:root{
  --cream:#FDF8F3;
  --blue:#2E22A8;
  --orange:#DC643F;
  --black:#2E22A8;
  --white:#FFFFFF;
  --muted:#2E22A8;
  --line:rgba(46,34,168,.18);
  --max:1320px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--black);
  font-family:Arial,Helvetica,sans-serif;line-height:1.48;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.container{width:min(calc(100% - 52px),var(--max));margin:0 auto}
.nav{
  position:sticky;top:0;z-index:50;background:rgba(253,248,243,.90);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)
}
.nav-inner{height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-weight:800;letter-spacing:-.03em;font-size:16px}
.nav-links{display:flex;gap:26px;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.eyebrow{
  color:var(--blue);text-transform:uppercase;letter-spacing:.16em;
  font-size:11px;font-weight:800;margin-bottom:18px
}
.hero{min-height:88vh;padding:100px 0 70px;display:grid;align-items:center;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
h1,h2,h3,p{margin-top:0}
h1{font-family:Arial,Helvetica,sans-serif;font-size:clamp(62px,7.3vw,118px);line-height:.90;letter-spacing:-.065em;font-weight:800;margin-bottom:30px
}
h2{font-family:Arial,Helvetica,sans-serif;font-size:clamp(44px,5vw,78px);line-height:.94;letter-spacing:-.055em;font-weight:800}
.hero p{font-size:clamp(18px,1.7vw,23px);max-width:760px;color:var(--blue)}
.cta-row{display:flex;align-items:center;gap:15px;margin-top:34px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 18px;border:1px solid var(--black);font-size:13px;
  font-weight:800;text-transform:uppercase;letter-spacing:.05em
}
.btn.primary{background:var(--black);color:var(--cream)}
.btn.link{border:0;border-bottom:2px solid var(--blue);padding:11px 0 4px}
.hero-visual{position:relative;min-height:520px}
.hero-visual .project-shot{
  position:absolute;border:1px solid var(--line);background:var(--white);
  box-shadow:0 22px 70px rgba(46,34,168,.10)
}
.hero-visual .shot-a{width:68%;left:0;top:55px;transform:rotate(-3deg)}
.hero-visual .shot-b{width:66%;right:0;top:0;transform:rotate(2deg)}
.hero-visual .shot-c{width:55%;right:7%;bottom:5px;transform:rotate(-1deg)}
.doodle{position:absolute;pointer-events:none;z-index:3;object-fit:contain}
.doodle.hero-oval{width:180px;left:-18px;top:145px;transform:rotate(-8deg)}
.doodle.hero-arrow{width:150px;right:-12px;bottom:5px;transform:rotate(5deg)}
.section{position:relative;padding:116px 0;border-top:1px solid var(--line);overflow:hidden}
.section-head{display:grid;grid-template-columns:.32fr 1fr;gap:32px;margin-bottom:74px}
.section-head h2{margin:0}
.work-intro{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:end}
.work-intro p{font-size:18px;max-width:520px;color:var(--blue)}
.project{padding:74px 0;border-top:1px solid var(--line)}
.project:first-of-type{border-top:none}
.project-top{display:grid;grid-template-columns:85px .95fr .85fr;gap:28px;align-items:start;margin-bottom:42px}
.project-num{font-family:Arial,Helvetica,sans-serif;font-size:34px;color:var(--orange)}
.project h3{
  font-family:Arial,Helvetica,sans-serif;font-size:clamp(40px,4.5vw,70px);
  line-height:.94;letter-spacing:-.055em;font-weight:800;margin-bottom:18px
}
.tags{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--blue)}
.project-desc{font-size:18px;color:var(--blue);max-width:590px}
.project-link{display:inline-block;margin-top:17px;font-size:13px;font-weight:800;text-transform:uppercase;border-bottom:2px solid var(--blue)}
.visual{
  position:relative;background:var(--white);border:1px solid var(--line);
  min-height:540px;padding:42px;display:flex;align-items:center;justify-content:center
}
.visual img{width:100%;max-height:590px;object-fit:contain}
.visual .doodle{opacity:.95}
.visual .corner-mark{width:105px;right:25px;top:22px;transform:rotate(7deg)}
.visual .bottom-mark{width:120px;left:26px;bottom:18px;transform:rotate(-5deg)}
.more-list{border-top:1px solid var(--line)}
.more-item{display:grid;grid-template-columns:70px 1fr 1fr;gap:24px;padding:27px 0;border-bottom:1px solid var(--line)}
.more-item .n{color:var(--orange);font-weight:800}
.more-item h3{font-family:Arial,Helvetica,sans-serif;font-size:27px;font-weight:800;margin:0}
.more-item p{margin:0;color:var(--muted)}
.paper-note{
  background:var(--white);border:1px solid var(--line);padding:30px;position:relative;
  min-height:300px;display:flex;align-items:flex-end
}
.paper-note img.note-main{width:100%;max-height:235px;object-fit:contain}
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start}
.about-copy p{font-size:19px;color:var(--blue);max-width:760px}
.highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.highlight{border-top:2px solid var(--blue);padding-top:13px}
.highlight strong{display:block;font-family:Arial,Helvetica,sans-serif;font-size:28px;font-weight:800}
.highlight span{display:block;font-size:13px;color:var(--muted);margin-top:5px}
.gallery{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:16px}
.gallery div{
  min-height:270px;border:1px solid var(--line);background:var(--white);
  padding:22px;display:flex;align-items:flex-end;font-weight:800
}
.gallery .orange{background:var(--orange);color:var(--cream)}
.gallery .blue{background:var(--blue);color:var(--cream)}
.gallery .tall{min-height:520px}
.contact{position:relative;background:var(--blue);color:var(--cream);padding:118px 0;overflow:hidden}
.contact h2{max-width:1000px;font-size:clamp(56px,7vw,104px)}
.contact p{font-size:20px;max-width:700px}
.contact .btn{border-color:var(--cream);color:var(--cream)}
.contact .btn.primary{background:var(--cream);color:var(--blue)}
.contact .doodle{filter:none}
.footer{background:var(--black);color:#cfc8c1;padding:25px 0;font-size:12px}
.footer-inner{display:flex;justify-content:space-between;gap:20px}
.case-hero{position:relative;padding:110px 0 76px;overflow:hidden}
.case-hero h1{max-width:1120px}
.case-hero p{font-size:22px;max-width:850px;color:var(--blue)}
.case-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid var(--line);padding-top:20px;margin-top:52px}
.case-meta strong{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--blue);margin-bottom:6px}
.case-meta span{font-size:14px}
.case-section{position:relative;padding:88px 0;border-top:1px solid var(--line);overflow:hidden}
.case-grid{display:grid;grid-template-columns:.32fr 1fr;gap:44px}
.case-grid h2{font-size:46px}
.case-grid p{font-size:19px;color:var(--blue);max-width:850px}
.callout{font-family:Arial,Helvetica,sans-serif;font-size:clamp(38px,4.6vw,70px)!important;line-height:.98!important;font-weight:800;letter-spacing:-.05em;color:var(--black)!important}
.case-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:28px}
.case-list div{border-top:1px solid var(--line);padding:15px 0;font-size:15px}
.case-note{font-size:14px!important;color:var(--muted)!important;font-style:italic}
.next{background:var(--orange);color:var(--cream);padding:86px 0}
.next a{font-family:Arial,Helvetica,sans-serif;font-size:clamp(40px,5vw,72px);line-height:.95;font-weight:800;letter-spacing:-.05em}
.resume-card{padding:28px;border:1px solid var(--line);background:var(--white);margin-top:34px}
.handwritten-block{position:relative;padding:32px 0 6px}
.handwritten-block img{max-width:min(680px,100%);max-height:145px;object-fit:contain;object-position:left center}
.to-complete{border-left:3px solid var(--orange);padding-left:16px;color:var(--muted);font-size:14px}
@media(max-width:900px){
  .container{width:min(calc(100% - 28px),var(--max))}
  .nav-links{display:none}
  .hero{padding-top:70px}
  .hero-grid,.section-head,.work-intro,.project-top,.about-grid,.case-grid{grid-template-columns:1fr}
  .hero-visual{min-height:390px}
  .hero-visual .shot-a{width:70%}.hero-visual .shot-b{width:68%}.hero-visual .shot-c{width:55%}
  .project-top{gap:10px}
  .visual{min-height:370px;padding:18px}
  .more-item{grid-template-columns:48px 1fr}
  .more-item p{grid-column:2}
  .highlights,.case-meta,.case-list,.gallery{grid-template-columns:1fr}
  .gallery .tall{min-height:300px}
}

/* Hover interactions */
.project-link,
.nav-links a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.project-link::after,
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s ease;
}
.btn.link {
  position: relative;
  text-decoration: none;
  border-bottom: 0;
}
.btn.link::before,
.btn.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 100%;
  height: 2px;
}
.btn.link::before { background: currentColor; }
.btn.link::after {
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s ease;
}
.btn:not(.link) {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
@media (hover:hover) and (pointer:fine) {
  .project-link:hover::after,
  .nav-links a:hover::after,
  .btn.link:hover::after { transform: scaleX(1); }

  .btn.primary:hover,
  .btn:not(.primary):not(.link):hover {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--cream);
  }
}
@media (prefers-reduced-motion:reduce) {
  .project-link::after,
  .nav-links a::after,
  .btn.link::after,
  .btn:not(.link) { transition:none; }
}

/* Accessibility and interaction audit v7 */
:root{
  --orange:#ceff00;
}

/* Keyboard focus: visible on every interactive element */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:4px;
  border-radius:2px;
}
.contact a:focus-visible,
.next a:focus-visible{
  outline-color:var(--cream);
}

/* Text links: one underline only. It draws left-to-right on hover/focus. */
.project-link,
.nav-links a,
.btn.link{
  position:relative;
  display:inline-block;
  text-decoration:none;
  border-bottom:0;
}
.project-link::before,
.project-link::after,
.nav-links a::before,
.nav-links a::after,
.btn.link::before,
.btn.link::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  transform-origin:left center;
}
.project-link::before,
.nav-links a::before,
.btn.link::before{
  bottom:-4px;
  background:currentColor;
  transform:scaleX(1);
  transition:transform .18s ease;
}
.project-link::after,
.nav-links a::after,
.btn.link::after{
  bottom:-4px;
  background:var(--blue);
  transform:scaleX(0);
  transition:transform .28s ease .06s;
}

/* Nav links are not underlined at rest; preserve their original visual style. */
.nav-links a::before{transform:scaleX(0)}

@media (hover:hover) and (pointer:fine){
  .project-link:hover::before,
  .btn.link:hover::before{transform:scaleX(0)}
  .project-link:hover::after,
  .nav-links a:hover::after,
  .btn.link:hover::after{transform:scaleX(1)}
}
.project-link:focus-visible::before,
.btn.link:focus-visible::before{transform:scaleX(0)}
.project-link:focus-visible::after,
.nav-links a:focus-visible::after,
.btn.link:focus-visible::after{transform:scaleX(1)}

/* Lime is an accent/background, never body text on cream/white. */
.project-num,
.more-item .n{color:var(--blue)}
.gallery .orange{background:var(--orange);color:var(--blue)}
.next{background:var(--orange);color:var(--blue)}
.next .eyebrow{color:var(--blue)!important}
.to-complete{border-left-color:var(--orange)}

/* Filled buttons: lime with dark-blue text gives >9:1 contrast. */
@media (hover:hover) and (pointer:fine){
  .btn.primary:hover,
  .btn:not(.primary):not(.link):hover{
    background:var(--orange);
    border-color:var(--blue);
    color:var(--blue);
  }
}
.btn.primary:focus-visible,
.btn:not(.primary):not(.link):focus-visible{
  background:var(--orange);
  border-color:var(--blue);
  color:var(--blue);
}

/* Contact buttons need the same accessible hover treatment on dark blue. */
.contact .btn.primary:hover,
.contact .btn:hover,
.contact .btn.primary:focus-visible,
.contact .btn:focus-visible{
  background:var(--orange);
  border-color:var(--orange);
  color:var(--blue);
}

/* Make large linked areas and controls comfortably targetable. */
.nav-links a{padding-block:8px}
.project-link{padding-block:5px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}


/* v8 — dark-backed lime accents on homepage project numbers */
#work .project-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 3rem;
  padding: .38rem .58rem;
  background: var(--blue);
  color: #CEFF00;
  border-radius: 4px;
  line-height: 1;
}

/* Keep the accent readable in forced-colors/high-contrast environments. */
@media (forced-colors: active) {
  #work .project-num {
    border: 1px solid ButtonText;
  }
}


/* ==========================================================
   Checkout case study v9
   ========================================================== */
.checkout-relative{position:relative}
.checkout-story-section{
  position:relative;
  padding:112px 0;
  border-top:1px solid var(--line);
  overflow:hidden;
}
.checkout-story-head{
  display:grid;
  grid-template-columns:.34fr 1fr;
  gap:48px;
  align-items:start;
  margin-bottom:64px;
}
.checkout-story-head h2{margin-bottom:18px}
.checkout-story-head p{
  max-width:780px;
  font-size:18px;
  color:var(--blue);
}
.checkout-index{
  display:inline-flex;
  min-width:46px;
  min-height:34px;
  padding:5px 10px;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  background:var(--blue);
  color:#CEFF00;
  font-weight:800;
  line-height:1;
  border-radius:4px;
}
.checkout-doodle{
  position:absolute;
  z-index:2;
  pointer-events:none;
  max-width:none;
}
.doodle-whatif{
  width:140px;
  right:4%;
  top:-28px;
  transform:rotate(-8deg);
}
.doodle-arrow{
  width:170px;
  left:1%;
  bottom:44px;
  transform:rotate(-8deg);
}
.doodle-scribble{
  width:118px!important;
  height:auto!important;
  right:-25px;
  top:-42px;
  transform:rotate(8deg);
}
.doodle-asterisks{
  width:135px;
  right:5%;
  bottom:32px;
  transform:rotate(8deg);
}

/* early */
.checkout-start{background:var(--white)}
.early-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  align-items:start;
  max-width:1040px;
  margin:0 auto;
}
.device-card{
  margin:0;
  padding:18px 18px 15px;
  background:var(--cream);
  border:1px solid var(--line);
}
.device-card img{
  width:100%;
  aspect-ratio: .47;
  object-fit:cover;
  object-position:top;
  background:white;
}
.device-card figcaption,
.later-card figcaption{
  padding-top:13px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
  color:var(--blue);
}
.early-offset{transform:translateY(54px)}

/* flow */
.flow-stage{
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  padding:28px;
}
.flow-stage>img:first-child{
  width:100%;
  max-height:none;
  object-fit:contain;
}
.intermediate-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  max-width:900px;
  margin:54px auto 0;
}
.ui-card{
  margin:0;
  background:var(--white);
  border:1px solid var(--line);
  padding:22px;
}
.ui-card img{
  width:100%;
  max-height:680px;
  object-fit:contain;
}
.ui-card figcaption{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-top:18px;
  color:var(--blue);
}
.ui-card figcaption strong{font-size:15px}
.ui-card figcaption span{font-size:13px;max-width:380px}
.pair-lower{transform:translateY(70px)}

/* later iteration */
.flexibility-stage{background:var(--blue);color:var(--cream)}
.flexibility-stage .eyebrow,
.flexibility-stage .checkout-story-head p{color:var(--cream)}
.flexibility-stage h2{color:var(--cream)}
.flexibility-stage .checkout-index{background:#CEFF00;color:var(--blue)}
.later-grid{
  display:grid;
  grid-template-columns:.8fr 1fr .8fr;
  gap:24px;
  align-items:start;
}
.later-card{
  margin:0;
  background:var(--cream);
  padding:20px;
}
.later-card img{
  width:100%;
  max-height:780px;
  object-fit:contain;
}
.later-card figcaption{color:var(--blue)}
.later-large{transform:translateY(-24px)}
.later-drop{transform:translateY(58px)}

/* current */
.current-stage{background:var(--cream)}
.current-story-head h2{font-size:clamp(50px,6vw,88px)}
.current-editorial{
  display:grid;
  grid-template-columns:1.2fr .9fr .75fr;
  gap:28px;
  align-items:start;
}
.current-editorial figure{margin:0}
.screen-surface{
  background:var(--white);
  border:1px solid var(--line);
  padding:18px;
}
.screen-surface img{
  width:100%;
  height:auto;
  object-fit:contain;
}
.current-main .screen-surface{padding:24px}
.current-side{
  display:grid;
  gap:28px;
}
.current-mini:first-child{transform:translateY(54px)}
.current-success{transform:translateY(124px)}
.current-editorial figcaption{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px 4px 0;
  color:var(--blue);
}
.current-editorial figcaption strong{font-size:15px}
.current-editorial figcaption span{font-size:13px;line-height:1.42}

/* contribution */
.checkout-skill-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.checkout-skill-cloud span{
  display:inline-flex;
  padding:11px 14px;
  border:1px solid var(--blue);
  border-radius:999px;
  font-size:13px;
  font-weight:700;
}

/* outcome */
.checkout-outcome{
  padding:118px 0;
  background:var(--white);
  border-top:1px solid var(--line);
}
.outcome-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:64px;
  align-items:end;
}
.outcome-grid p{font-size:18px;color:var(--blue)}
.outcome-statement{
  margin:0!important;
  font-size:clamp(44px,5.5vw,82px)!important;
  line-height:.94!important;
  letter-spacing:-.055em;
  font-weight:800;
}
.outcome-statement mark{
  background:#CEFF00;
  color:var(--blue);
  padding:0 .08em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

@media(max-width:900px){
  .checkout-story-section{padding:82px 0}
  .checkout-story-head,
  .outcome-grid{grid-template-columns:1fr;gap:18px}
  .early-grid{grid-template-columns:1fr;max-width:430px}
  .early-offset{transform:none}
  .intermediate-pair{grid-template-columns:1fr;max-width:520px}
  .pair-lower{transform:none}
  .later-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .later-large,.later-drop{transform:none}
  .current-editorial{grid-template-columns:1fr;max-width:540px;margin:0 auto}
  .current-mini:first-child,.current-success{transform:none}
  .doodle-whatif{width:95px;right:0;top:-16px}
  .doodle-arrow{display:none}
  .doodle-scribble{width:80px!important;right:-8px}
  .doodle-asterisks{width:90px;right:2%}
}
@media(prefers-reduced-motion:reduce){
  .early-offset,.pair-lower,.later-large,.later-drop,.current-mini:first-child,.current-success{transform:none}
}

/* ==========================================================
   Checkout case study v11 — final visual QA fixes
   ========================================================== */
/* UI evidence must remain intact: no accidental cropping. */
.checkout-story-section{overflow:visible}
.checkout-challenge{overflow:visible}
.checkout-relative{padding-right:150px}
.doodle-whatif{right:0;top:-48px;width:125px}

/* Consistent, complete phone-like presentation for screenshots. */
.early-grid,.intermediate-pair,.later-grid{align-items:start}
.device-card,.ui-card,.later-card{background:transparent;border:0;padding:0;overflow:visible}
.device-card img,.ui-card img,.later-card img,
.screen-surface img{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center top;
  box-sizing:border-box;
  background:#fff;
  border:2px solid var(--blue);
  border-radius:30px;
  box-shadow:0 12px 28px rgba(24,47,80,.10);
}
.early-offset,.pair-lower,.later-large,.later-drop,
.current-mini:first-child,.current-success{transform:none!important}

/* Flow doodle stays completely inside the composition. */
.flow-stage{overflow:visible}
.doodle-scribble{right:18px;top:-62px;width:105px!important}

/* Intermediate pair: equal visual width, no stagger. */
.intermediate-pair{align-items:start;max-width:920px}
.ui-card figcaption{padding-left:4px;padding-right:4px}

/* Blue-stage screens: equal widths, full screenshots, no stagger. */
.later-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:start}
.later-card img{border-color:#CEFF00;box-shadow:0 14px 30px rgba(0,0,0,.16)}
.doodle-asterisks{right:3%;bottom:22px;width:110px;filter:sepia(1) saturate(8) hue-rotate(30deg) brightness(1.35)}

/* Current experience: clean equal cards, complete screens, no overlap. */
.current-editorial{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:56px 36px;
  align-items:start;
}
.current-side{display:contents}
.current-main,.current-mini,.current-success{width:100%;transform:none!important}
.screen-surface{background:transparent;border:0;padding:0!important;overflow:visible}
.current-editorial figcaption{padding:16px 4px 0}

/* Outcome: highlight participates in flow instead of overlaying previous line. */
.outcome-grid{align-items:start}
.outcome-statement{display:flex;flex-direction:column;gap:.16em;line-height:.98!important}
.outcome-statement mark{display:inline-block;width:fit-content;line-height:1.02;padding:.05em .09em .08em}

@media(max-width:900px){
  .checkout-relative{padding-right:0;padding-top:64px}
  .doodle-whatif{right:8px;top:0;width:88px}
  .doodle-scribble{right:12px;top:-45px;width:74px!important}
  .later-grid,.current-editorial{grid-template-columns:1fr;max-width:540px;margin-left:auto;margin-right:auto}
  .doodle-asterisks{right:16px;bottom:12px;width:78px}
}

/* v12 compact evidence + doodle safe zones */
.checkout-challenge .container,.checkout-story-section .container{overflow:visible}
.checkout-relative{padding-right:180px}
.doodle-whatif{right:18px!important;top:-30px!important;width:112px!important;max-width:112px!important}
.flow-stage{margin-top:84px}
.doodle-scribble{right:34px!important;top:-78px!important;width:88px!important;max-width:88px!important}
.flexibility-stage .container{position:relative;padding-bottom:86px}
.doodle-asterisks{right:38px!important;bottom:22px!important;width:82px!important;max-width:82px!important;filter:sepia(1) saturate(10) hue-rotate(28deg) brightness(1.45)!important}

/* Screens are evidence, not hero-sized devices. Always preserve the full image. */
.early-grid{max-width:820px;gap:36px}
.device-card img{max-width:230px;margin:0 auto;border-radius:24px}
.device-card figcaption{max-width:230px;margin:0 auto}
.intermediate-pair{max-width:720px;gap:48px}
.ui-card img{max-width:310px;margin:0 auto;border-radius:24px}
.ui-card figcaption{max-width:310px;margin-left:auto;margin-right:auto}

.step3-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:28px!important;max-width:1060px;margin:0 auto;align-items:start}
.step3-grid .later-card{min-width:0}
.step3-grid .later-card img{width:auto;max-width:220px;max-height:none;margin:0 auto;border-radius:24px;border-color:#CEFF00}
.step3-grid .later-card figcaption{max-width:220px;margin:0 auto;padding-top:13px}

.current-editorial{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;max-width:1120px;margin:0 auto}
.current-editorial .screen-surface img{width:auto;max-width:240px;max-height:none;margin:0 auto;border-radius:24px}
.current-editorial figcaption{max-width:240px;margin:0 auto}
.current-side{display:contents}

@media(max-width:1050px){
 .step3-grid,.current-editorial{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:650px}
}
@media(max-width:700px){
 .checkout-relative{padding-right:0;padding-top:70px}
 .doodle-whatif{right:16px!important;top:2px!important;width:76px!important}
 .flow-stage{margin-top:64px}
 .doodle-scribble{right:18px!important;top:-56px!important;width:64px!important}
 .step3-grid,.current-editorial{grid-template-columns:1fr!important;max-width:320px}
 .doodle-asterisks{right:18px!important;bottom:16px!important;width:64px!important}
}


/* Current experience — 5-screen layout */
.current-five-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:34px 28px;
  align-items:start;
  max-width:1120px;
  margin:0 auto;
}
.current-five-grid .current-card{
  grid-column:span 2;
  margin:0;
}
.current-five-grid .current-card:nth-child(4){
  grid-column:2 / span 2;
}
.current-five-grid .current-card:nth-child(5){
  grid-column:4 / span 2;
}
.current-five-grid .screen-surface{
  width:100%;
  max-width:300px;
  margin:0 auto;
  padding:0;
  background:var(--white);
  border:1.5px solid var(--blue);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(46,34,168,.10);
}
.current-five-grid .screen-surface img{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
}
.current-five-grid figcaption{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-width:300px;
  margin:12px auto 0;
  color:var(--blue);
}
.current-five-grid figcaption strong{font-size:15px}
.current-five-grid figcaption span{font-size:13px;line-height:1.42}

@media(max-width:900px){
  .current-five-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:680px;
  }
  .current-five-grid .current-card,
  .current-five-grid .current-card:nth-child(4),
  .current-five-grid .current-card:nth-child(5){
    grid-column:auto;
  }
}
@media(max-width:600px){
  .current-five-grid{grid-template-columns:1fr;max-width:360px}
}


/* v14 — Outcome */
.outcome-stage{
  background:#CEFF00 !important;
  color:#2E22A8 !important;
}
.outcome-stage h2,
.outcome-stage p,
.outcome-stage .eyebrow,
.outcome-stage .checkout-index{
  color:#2E22A8 !important;
}

/* v14 — Step 04 mixed-height screenshots
   Screens stay complete, proportional and uncropped.
   The common stage creates consistency without forcing a fake device radius. */
.current-five-grid{
  gap:42px 30px !important;
  align-items:start !important;
}
.current-five-grid .screen-surface{
  width:100% !important;
  max-width:300px !important;
  height:500px !important;
  margin:0 auto !important;
  padding:18px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  background:#FDF8F3 !important;
  border:1px solid rgba(46,34,168,.18) !important;
  border-radius:18px !important;
  overflow:visible !important;
  box-shadow:none !important;
}
.current-five-grid .screen-surface img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:464px !important;
  object-fit:contain !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:0 10px 24px rgba(46,34,168,.10) !important;
}
.current-five-grid figcaption{
  max-width:300px !important;
  margin-top:14px !important;
}

@media(max-width:900px){
  .current-five-grid .screen-surface{
    height:480px !important;
    max-width:290px !important;
  }
  .current-five-grid .screen-surface img{max-height:444px !important}
}
@media(max-width:600px){
  .current-five-grid .screen-surface{
    height:auto !important;
    max-width:290px !important;
  }
  .current-five-grid .screen-surface img{max-height:none !important}
}


/* v15 — Next case study remains visible, on white */
.checkout-next,
.next-case,
.next-case-study{
  background:#FFFFFF !important;
}

.next{background:#FFFFFF !important;}

/* v16 — Steps 01–03: same screenshot language as Step 04 */
.unified-screen-step figure img{
 display:block!important;width:auto!important;height:auto!important;
 max-width:100%!important;max-height:464px!important;object-fit:contain!important;
 margin:0 auto!important;border:0!important;border-radius:0!important;
 box-shadow:0 10px 24px rgba(46,34,168,.10)!important;
}
.unified-screen-step .old-card,
.unified-screen-step .later-card,
.unified-screen-step .flow-card,
.unified-screen-step .intermediate-card,
.unified-screen-step .screen-card,
.unified-screen-step .screen-frame{
 box-sizing:border-box!important;background:#FDF8F3!important;
 border:1px solid rgba(46,34,168,.18)!important;border-radius:18px!important;
 box-shadow:none!important;overflow:visible!important;
}
.unified-screen-step .old-card{padding:18px!important;}
.unified-screen-step .step3-grid .later-card{
 min-height:500px!important;padding:18px!important;display:flex!important;
 flex-direction:column!important;justify-content:flex-end!important;
}
.unified-screen-step .step3-grid .later-card img{max-height:430px!important;}
.unified-screen-step .step3-grid .later-card figcaption{
 width:100%!important;max-width:none!important;padding-top:14px!important;
}
.unified-screen-step .intermediate-grid figure,
.unified-screen-step .middle-grid figure{
 padding:18px!important;box-sizing:border-box!important;background:#FDF8F3!important;
 border:1px solid rgba(46,34,168,.18)!important;border-radius:18px!important;
}
@media(max-width:700px){
 .unified-screen-step figure img{max-height:none!important}
 .unified-screen-step .step3-grid .later-card{min-height:0!important}
 .unified-screen-step .step3-grid .later-card img{max-height:none!important}
}


/* ==========================================================
   v17 — Step 02 + Step 03 visual consistency
   ========================================================== */

/* STEP 02
   Give both intermediate screens the same framed treatment used elsewhere. */
.unified-screen-step .intermediate-pair{
  align-items:start !important;
}
.unified-screen-step .intermediate-pair .ui-card{
  background:#FDF8F3 !important;
  border:1px solid rgba(46,34,168,.18) !important;
  border-radius:18px !important;
  padding:18px !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.unified-screen-step .intermediate-pair .ui-card img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:520px !important;
  object-fit:contain !important;
  margin:0 auto !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:0 10px 24px rgba(46,34,168,.10) !important;
}
.unified-screen-step .intermediate-pair .ui-card figcaption{
  padding-top:14px !important;
}

/* STEP 03
   All screens share the same visual size.
   The frame background matches the blue section background. */
.flexibility-stage .later-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:26px !important;
  align-items:start !important;
}
.flexibility-stage .later-grid .later-card{
  width:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  transform:none !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Equal-sized frame area for all four screenshots */
.flexibility-stage .later-grid .later-card::before{
  content:"";
  display:block;
}
.flexibility-stage .later-grid .later-card img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:430px !important;
  object-fit:contain !important;
  margin:0 auto !important;
  padding:18px !important;
  box-sizing:border-box !important;
  background:var(--blue) !important;
  border:1px solid rgba(206,255,0,.42) !important;
  border-radius:18px !important;
  box-shadow:0 10px 24px rgba(0,0,0,.16) !important;
}

/* Force the same visual frame footprint while keeping the UI uncropped.
   Each image scales proportionally inside the identical blue stage. */
.flexibility-stage .later-grid .later-card{
  position:relative !important;
}
.flexibility-stage .later-grid .later-card img{
  width:100% !important;
  height:500px !important;
  object-fit:contain !important;
}

/* Caption sits outside the frame and remains readable on blue. */
.flexibility-stage .later-grid .later-card figcaption{
  width:100% !important;
  max-width:none !important;
  padding:14px 2px 0 !important;
  margin:0 !important;
  color:var(--cream) !important;
  background:transparent !important;
}

/* Neutralize older stagger/offset rules. */
.flexibility-stage .later-grid .later-large,
.flexibility-stage .later-grid .later-drop{
  transform:none !important;
}

/* Responsive behavior */
@media(max-width:1100px){
  .flexibility-stage .later-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:650px){
  .flexibility-stage .later-grid{
    grid-template-columns:1fr !important;
  }
  .flexibility-stage .later-grid .later-card img{
    height:auto !important;
    max-height:none !important;
  }
}

/* v18 — Step 01 new supplied screens, equal visual size and framed like the other steps */
.flow-system + .nothing-placeholder { display: none; }
.checkout-story-section:has(.early-grid) .early-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:28px !important;
  align-items:start !important;
}
.checkout-story-section:has(.early-grid) .device-card,
.checkout-story-section:has(.early-grid) .device-card.early-offset{
  margin:0 !important;
  transform:none !important;
  padding:18px !important;
  box-sizing:border-box !important;
  background:#FDF8F3 !important;
  border:1px solid rgba(46,34,168,.18) !important;
  border-radius:18px !important;
  box-shadow:none !important;
  overflow:visible !important;
  display:flex !important;
  flex-direction:column !important;
}
.checkout-story-section:has(.early-grid) .device-card img{
  display:block !important;
  width:100% !important;
  height:500px !important;
  object-fit:contain !important;
  margin:0 auto !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:0 10px 24px rgba(46,34,168,.10) !important;
}
.checkout-story-section:has(.early-grid) .device-card figcaption{
  width:100% !important;
  margin:0 !important;
  padding:14px 0 0 !important;
  background:transparent !important;
}
@media(max-width:900px){
 .checkout-story-section:has(.early-grid) .early-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:600px){
 .checkout-story-section:has(.early-grid) .early-grid{grid-template-columns:1fr !important;}
 .checkout-story-section:has(.early-grid) .device-card img{height:auto !important;}
}


/* Pending Step 01 adjustment — frame background matches white section */
.early-grid .device-card{
  background:#FFFFFF !important;
}


/* Pending challenge update */
.challenge-lime{
  background:#CEFF00 !important;
  color:#2E22A8 !important;
}
.challenge-lime h2,
.challenge-lime p,
.challenge-lime .eyebrow{
  color:#2E22A8 !important;
}


/* Pending hero metadata update */
.case-meta dt,
.checkout-meta dt{
  color:#CEFF00 !important;
}


/* Pending checkout hero eyebrow update */
.case-hero .eyebrow,
.checkout-hero .eyebrow{
  color:#CEFF00 !important;
}


/* ==========================================================
   Final accumulated checkout updates + doodle QA
   ========================================================== */

/* Hero lime accents requested */
.checkout-hero .eyebrow,
.case-hero .eyebrow{
  color:#CEFF00 !important;
}
.case-meta strong{
  color:#CEFF00 !important;
}

/* Challenge section */
.challenge-lime{
  background:#CEFF00 !important;
  color:#2E22A8 !important;
}
.challenge-lime h2,
.challenge-lime p,
.challenge-lime .eyebrow{
  color:#2E22A8 !important;
}

/* Step 01 frame background matches its white section */
.checkout-start .device-card{
  background:#FFFFFF !important;
}

/* Doodles: safe positioning, palette-only assets, no clipping */
.checkout-doodle{
  position:absolute !important;
  display:block !important;
  height:auto !important;
  max-width:none !important;
  pointer-events:none !important;
  z-index:3 !important;
  filter:none !important;
}
.checkout-challenge,
.checkout-challenge .container,
.checkout-challenge .checkout-relative,
.checkout-story-section,
.checkout-story-section .container,
.flow-stage,
.flexibility-stage,
.flexibility-stage .container{
  overflow:visible !important;
}

/* Challenge "why?" — fully inside the content safe area */
.checkout-challenge .checkout-relative{
  position:relative !important;
  padding-right:155px !important;
}
.doodle-whatif{
  width:126px !important;
  right:8px !important;
  top:-44px !important;
  transform:rotate(-7deg) !important;
}

/* Step 01 arrow — inside section bounds */
.checkout-start .container{
  position:relative !important;
  padding-bottom:72px !important;
}
.doodle-arrow{
  width:165px !important;
  left:26px !important;
  bottom:8px !important;
  transform:rotate(-6deg) !important;
}

/* Step 02 scribble — keep away from page edge */
.flow-stage{
  position:relative !important;
  margin-top:82px !important;
}
.doodle-scribble{
  width:108px !important;
  right:24px !important;
  top:-76px !important;
  transform:rotate(7deg) !important;
}

/* Step 03 asterisks — lime on blue, entirely inside the blue section */
.flexibility-stage .container{
  position:relative !important;
  padding-bottom:96px !important;
}
.doodle-asterisks{
  width:132px !important;
  right:30px !important;
  bottom:12px !important;
  transform:rotate(7deg) !important;
}

/* Avoid doodles colliding with text on narrower screens */
@media(max-width:900px){
  .checkout-challenge .checkout-relative{padding-right:110px !important}
  .doodle-whatif{width:92px !important;right:4px !important;top:-24px !important}
  .doodle-arrow{width:120px !important;left:18px !important}
  .doodle-scribble{width:84px !important;right:12px !important;top:-58px !important}
  .doodle-asterisks{width:94px !important;right:18px !important;bottom:18px !important}
}
@media(max-width:620px){
  .checkout-challenge .checkout-relative{padding-right:0 !important;padding-top:60px !important}
  .doodle-whatif{width:80px !important;right:10px !important;top:-4px !important}
  .doodle-arrow{display:none !important}
  .flow-stage{margin-top:72px !important}
  .doodle-scribble{width:72px !important;right:8px !important;top:-54px !important}
  .flexibility-stage .container{padding-bottom:78px !important}
  .doodle-asterisks{width:82px !important;right:10px !important;bottom:8px !important}
}


/* ==========================================================
   v20 — Coral accent + Step 01 frame fix
   ========================================================== */

:root{
  --coral:#FF5A5F;
}

/* Checkout hero accent */
.checkout-hero .eyebrow,
.case-hero .eyebrow{
  color:var(--coral) !important;
}

/* Role / Scope / Collaboration / Timeline labels */
.case-meta strong{
  color:var(--coral) !important;
}

/* Step numbers 01 / 02 / 03 / 04: coral text, no background */
.checkout-index{
  background:transparent !important;
  color:var(--coral) !important;
  padding:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  border-radius:0 !important;
}

/* Step 01: entire inside of each frame must be white */
.checkout-start .early-grid .device-card{
  background:#FFFFFF !important;
  border:1px solid rgba(46,34,168,.18) !important;
}
.checkout-start .early-grid .device-card img{
  background:#FFFFFF !important;
}
.checkout-start .early-grid .device-card figcaption{
  background:#FFFFFF !important;
}

/* Any inner stage inherited from previous versions must also be white */
.checkout-start .early-grid .device-card > *,
.checkout-start .early-grid .device-card::before,
.checkout-start .early-grid .device-card::after{
  background-color:#FFFFFF;
}


/* ==========================================================
   v21 — requested correction
   ========================================================== */

/* All elements previously changed to coral are blue again */
.checkout-hero .eyebrow,
.case-hero .eyebrow,
.case-meta strong,
.checkout-index{
  color:#2E22A8 !important;
}

/* Step numbers stay without background */
.checkout-index{
  background:transparent !important;
}

/* Step 01 frames and image surfaces are pure white */
.checkout-start .early-grid .device-card,
.checkout-start .early-grid .device-card img,
.checkout-start .early-grid .device-card figcaption{
  background:#FFFFFF !important;
}

/* v22 definitive Step 01 white-frame correction */
.checkout-start .early-grid .device-card:nth-child(2),
.checkout-start .early-grid .device-card:nth-child(2) img,
.checkout-start .early-grid .device-card:nth-child(2) figcaption{
  background:#FFFFFF !important;
}


/* ==========================================================
   v23 — Homepage checkout project visual
   Current product screens, no board and no doodles.
   Screens remain complete and proportionally scaled.
   ========================================================== */
.checkout-home-visual{
  background:#2E22A8 !important;
  border:0 !important;
  overflow:hidden;
  padding:0 !important;
}
.checkout-home-stage{
  position:relative;
  min-height:650px;
  width:100%;
  max-width:1410px;
  margin:0 auto;
}
.checkout-home-screen{
  position:absolute;
  margin:0;
  padding:0;
  background:transparent;
  filter:drop-shadow(0 18px 28px rgba(15,10,80,.22));
}
.checkout-home-screen img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:18px;
}

/* Main checkout is the focal screen */
.checkout-home-main{
  width:260px;
  left:50%;
  top:42px;
  transform:translateX(-50%);
  z-index:4;
}
/* Supporting screens: deliberately overlapped, never cropped */
.checkout-home-method{
  width:225px;
  left:15%;
  top:115px;
  transform:rotate(-4deg);
  z-index:2;
}
.checkout-home-bank{
  width:225px;
  right:15%;
  top:112px;
  transform:rotate(4deg);
  z-index:3;
}
.checkout-home-success{
  width:195px;
  right:29%;
  top:265px;
  transform:rotate(2deg);
  z-index:5;
}

@media(max-width:900px){
  .checkout-home-stage{min-height:570px}
  .checkout-home-main{width:225px;top:42px}
  .checkout-home-method{width:190px;left:7%;top:120px}
  .checkout-home-bank{width:190px;right:7%;top:120px}
  .checkout-home-success{width:165px;right:23%;top:260px}
}
@media(max-width:620px){
  .checkout-home-visual{overflow:hidden}
  .checkout-home-stage{min-height:500px}
  .checkout-home-main{width:190px;top:34px}
  .checkout-home-method{width:145px;left:1%;top:132px}
  .checkout-home-bank{width:145px;right:1%;top:128px}
  .checkout-home-success{width:130px;right:8%;top:285px}
}


/* ==========================================================
   v24 — Homepage checkout visual: flow board + main checkout phone
   ========================================================== */
.checkout-home-visual-v2{
  position:relative;
  min-height:690px;
  overflow:hidden;
  background:#171717;
  border:0 !important;
  isolation:isolate;
}
.checkout-home-bg{
  position:absolute;
  inset:0;
  background-image:url("assets/checkout-home-flow-bg.png");
  background-size:cover;
  background-position:center 45%;
  opacity:.50;
  filter:saturate(.7) contrast(.95);
  z-index:0;
}
.checkout-home-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(23,23,23,.38),rgba(23,23,23,.12) 48%,rgba(23,23,23,.34));
  z-index:1;
}

/* Phone */
.checkout-phone-wrap{
  position:absolute;
  left:50%;
  top:52%;
  transform:translate(-50%,-50%) rotate(-9deg);
  z-index:4;
  filter:drop-shadow(0 28px 38px rgba(0,0,0,.38));
}
.checkout-phone{
  position:relative;
  width:330px;
  padding:10px;
  border-radius:48px;
  background:linear-gradient(145deg,#151515,#4e4e4e 45%,#0c0c0c 80%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.20),
    inset 0 0 0 6px #111;
}
.checkout-phone img{
  display:block;
  width:100%;
  height:auto;
  border-radius:38px;
  background:#fff;
}
.checkout-phone-speaker{
  position:absolute;
  left:50%;
  top:18px;
  width:92px;
  height:26px;
  transform:translateX(-50%);
  border-radius:18px;
  background:#050505;
  z-index:3;
  pointer-events:none;
}

/* Zoom detail callouts, made from the same real main-checkout screen. */
.checkout-callout{
  position:absolute;
  width:155px;
  height:155px;
  border-radius:50%;
  background:#fff;
  border:4px solid rgba(255,255,255,.95);
  box-shadow:0 16px 28px rgba(0,0,0,.28);
  overflow:hidden;
  z-index:5;
}
.checkout-callout::before{
  content:"";
  position:absolute;
  width:86px;
  height:1px;
  background:rgba(206,255,0,.95);
  top:50%;
  right:100%;
  transform-origin:right center;
}
.checkout-callout-top{right:13%;top:12%}
.checkout-callout-mid{right:8%;top:39%}
.checkout-callout-bottom{right:15%;bottom:9%}
.checkout-callout-top::before{transform:rotate(-10deg)}
.checkout-callout-mid::before{transform:rotate(4deg)}
.checkout-callout-bottom::before{transform:rotate(14deg)}

.checkout-zoom{
  width:100%;
  height:100%;
  background-image:url("assets/checkout-case/current-01-main.png");
  background-repeat:no-repeat;
}
/* Focuses: title/payment info, payment methods, CTA/consent area */
.zoom-top{
  background-size:520px auto;
  background-position:50% 7%;
}
.zoom-mid{
  background-size:520px auto;
  background-position:50% 48%;
}
.zoom-bottom{
  background-size:520px auto;
  background-position:50% 88%;
}

/* Responsive */
@media(max-width:1000px){
  .checkout-home-visual-v2{min-height:620px}
  .checkout-phone{width:285px}
  .checkout-callout{width:130px;height:130px}
  .checkout-callout-top{right:7%}
  .checkout-callout-mid{right:3%}
  .checkout-callout-bottom{right:9%}
}
@media(max-width:720px){
  .checkout-home-visual-v2{min-height:560px}
  .checkout-home-bg{background-position:center}
  .checkout-phone-wrap{left:47%}
  .checkout-phone{width:235px;border-radius:38px}
  .checkout-phone img{border-radius:30px}
  .checkout-phone-speaker{width:72px;height:20px;top:15px}
  .checkout-callout{width:100px;height:100px}
  .checkout-callout::before{width:50px}
  .checkout-callout-top{right:2%;top:10%}
  .checkout-callout-mid{right:1%;top:39%}
  .checkout-callout-bottom{right:4%;bottom:10%}
  .checkout-zoom{background-size:390px auto}
}
@media(max-width:520px){
  .checkout-home-visual-v2{min-height:500px}
  .checkout-phone-wrap{left:43%}
  .checkout-phone{width:205px}
  .checkout-callout{width:82px;height:82px}
  .checkout-callout::before{display:none}
  .checkout-callout-top{right:1%;top:8%}
  .checkout-callout-mid{right:1%;top:42%}
  .checkout-callout-bottom{right:3%;bottom:8%}
  .checkout-zoom{background-size:340px auto}
}


/* ==========================================================
   v25 — Homepage checkout visual refinement
   ========================================================== */
.checkout-home-visual-v3{
  position:relative;
  min-height:700px;
  overflow:hidden;
  background:#fff;
  border:0 !important;
  isolation:isolate;
}
.checkout-flow-background{
  position:absolute;
  inset:0;
  background:url("assets/checkout-home-flow-bg.png") center 44% / cover no-repeat;
  opacity:.25;
  filter:saturate(.55) contrast(.85);
  z-index:0;
}
/* Requested transparent white layer above the flow board */
.checkout-white-wash{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.48);
  z-index:1;
}

/* More realistic CSS phone skin, inspired by the reference but using the real UI asset */
.checkout-device{
  position:absolute;
  left:48%;
  top:50%;
  width:390px;
  transform:translate(-50%,-50%) rotate(-8deg);
  z-index:5;
  filter:drop-shadow(0 30px 34px rgba(46,34,168,.22));
}
.device-shell{
  position:relative;
  padding:9px;
  border-radius:56px;
  background:
    linear-gradient(120deg,#111 0%,#626262 13%,#171717 24%,#050505 68%,#777 88%,#181818 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.65),
    inset 0 0 0 4px rgba(0,0,0,.9),
    0 0 0 1px rgba(0,0,0,.35);
}
.device-screen{
  position:relative;
  height:625px;
  overflow:hidden; /* deliberate crop requested */
  border-radius:47px;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.device-screen img{
  position:absolute;
  width:100%;
  height:auto;
  left:0;
  top:-22px;
  transform:scale(1.06);
  transform-origin:top center;
  max-width:none;
}
.device-island{
  position:absolute;
  top:19px;
  left:50%;
  transform:translateX(-50%);
  width:104px;
  height:29px;
  border-radius:18px;
  background:#050505;
  z-index:4;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.device-side{
  position:absolute;
  background:linear-gradient(#353535,#090909);
  border-radius:4px;
  z-index:-1;
}
.device-side-left{width:5px;height:82px;left:-3px;top:145px}
.device-side-right{width:5px;height:62px;right:-3px;top:190px}

/* Logical detail focus: all use the same real main checkout image */
.checkout-detail{
  position:absolute;
  z-index:6;
  width:190px;
  height:190px;
}
.detail-circle{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:50%;
  background:#fff;
  border:4px solid rgba(255,255,255,.98);
  box-shadow:0 16px 34px rgba(46,34,168,.18);
}
.detail-crop{
  width:100%;
  height:100%;
  background-image:url("assets/checkout-case/current-01-main.png");
  background-repeat:no-repeat;
}
.detail-line{
  position:absolute;
  top:50%;
  right:calc(100% - 4px);
  width:115px;
  height:2px;
  background:#2E22A8;
  opacity:.75;
  z-index:-1;
  transform-origin:right center;
}

/* 1 — top/payment context */
.detail-amount{right:12%;top:9%}
.detail-amount .detail-crop{
  background-size:650px auto;
  background-position:50% 8%;
}
.detail-amount .detail-line{transform:rotate(-9deg)}

/* 2 — available payment methods */
.detail-method{right:6%;top:39%}
.detail-method .detail-crop{
  background-size:650px auto;
  background-position:50% 49%;
}
.detail-method .detail-line{transform:rotate(5deg)}

/* 3 — security / lower checkout context */
.detail-security{right:13%;bottom:8%}
.detail-security .detail-crop{
  background-size:650px auto;
  background-position:50% 86%;
}
.detail-security .detail-line{transform:rotate(13deg)}

@media(max-width:1050px){
  .checkout-home-visual-v3{min-height:640px}
  .checkout-device{width:340px;left:46%}
  .device-screen{height:550px}
  .checkout-detail{width:150px;height:150px}
  .detail-line{width:82px}
  .detail-amount{right:7%}
  .detail-method{right:3%}
  .detail-security{right:8%}
}
@media(max-width:720px){
  .checkout-home-visual-v3{min-height:560px}
  .checkout-flow-background{opacity:.20}
  .checkout-white-wash{background:rgba(255,255,255,.54)}
  .checkout-device{width:275px;left:43%}
  .device-shell{border-radius:44px;padding:7px}
  .device-screen{height:460px;border-radius:37px}
  .device-island{width:78px;height:22px;top:15px}
  .checkout-detail{width:108px;height:108px}
  .detail-line{width:45px}
  .detail-amount{right:2%;top:8%}
  .detail-method{right:1%;top:40%}
  .detail-security{right:3%;bottom:7%}
  .detail-crop{background-size:440px auto !important}
}
@media(max-width:520px){
  .checkout-home-visual-v3{min-height:500px}
  .checkout-device{width:235px;left:40%}
  .device-screen{height:405px}
  .checkout-detail{width:82px;height:82px}
  .detail-line{display:none}
  .detail-amount{right:1%;top:7%}
  .detail-method{right:1%;top:41%}
  .detail-security{right:2%;bottom:7%}
  .detail-crop{background-size:360px auto !important}
}

/* v27 supplied Checkout homepage artwork */
.checkout-home-final-art{width:100%;overflow:hidden;padding:0!important;margin:0;background:#fff;border:0!important}
.checkout-home-final-art img{display:block;width:100%;height:auto;object-fit:contain}


/* ==========================================================
   v28 — Editorial blue hierarchy across the whole portfolio
   Reference principle: strong display type + softer body copy
   ========================================================== */
:root{
  --blue-950:#17135F;
  --blue-900:#211879;
  --blue-800:#2E22A8;
  --blue-700:#493FC0;
  --blue-600:#6259C8;
  --blue-500:#756FC2;
  --blue-400:#8E89BD;
  --blue-300:#AAA6CB;
  --blue-200:#D9D7EA;
  --blue-100:#F1F0F8;
}

/* Default reading color: softer than headings, still accessible on light surfaces */
body{color:var(--blue-700)}
p,
li,
dd,
.project-copy,
.case-copy,
.about-copy,
.contact-copy{color:var(--blue-600)}

/* Display hierarchy */
h1,
.hero h1,
.case-hero h1{color:var(--blue-950)}
h2,
.section-title,
.project h2,
.case-section h2{color:var(--blue-900)}
h3,
h4,
.project h3,
.case-section h3{color:var(--blue-800)}

/* Small editorial labels / metadata */
.eyebrow,
.kicker,
.meta-label,
.case-meta dt,
.project-index,
.step-number,
.section-number{color:var(--blue-800)}
.case-meta dd,
.meta-value,
figcaption,
.caption,
small{color:var(--blue-500)}

/* Links remain clearly interactive */
a{color:var(--blue-800)}
nav a,
.header a{color:var(--blue-900)}

/* Light cards: slightly softer copy hierarchy */
.card p,
.project-card p,
.case-card p{color:var(--blue-600)}

/* Dark blue surfaces: use tonal light blues rather than flat white everywhere */
[style*="background:#2E22A8"] h1,
[style*="background: #2E22A8"] h1,
[style*="background:#2E22A8"] h2,
[style*="background: #2E22A8"] h2,
.blue-section h1,.blue-section h2,.blue-section h3,
.dark-section h1,.dark-section h2,.dark-section h3{color:#FFFFFF}
[style*="background:#2E22A8"] p,
[style*="background: #2E22A8"] p,
.blue-section p,.dark-section p{color:#D9D7EA}

/* Preserve lime sections: darkest blue for strongest readability */
[style*="background:#CEFF00"],
[style*="background: #CEFF00"]{color:var(--blue-900)}
[style*="background:#CEFF00"] p,
[style*="background: #CEFF00"] p{color:var(--blue-700)}

/* Case-study captions should visually recede from UI evidence */
.case-study figcaption,
.checkout-screen figcaption,
.screen-caption{color:var(--blue-500)}

/* Footer / secondary utility copy */
footer,
footer p,
.footer-copy{color:var(--blue-500)}
footer a{color:var(--blue-800)}


/* ==========================================================
   v29 — Refined portfolio color hierarchy
   ========================================================== */
:root{
  --portfolio-blue:#2E22A8;
  --portfolio-number:#78BFEA;
  --portfolio-muted:#6F7893;
}

/* Titles: original portfolio blue */
h1, h2, h3, h4,
.hero h1,
.case-hero h1,
.section-title,
.project h2,
.project h3,
.case-section h2,
.case-section h3{
  color:var(--portfolio-blue);
}

/* Eyebrows and tags: blue-grey */
.eyebrow,
.kicker,
.tag,
.tags,
.project-tag,
.project-tags,
.case-tag,
.case-tags,
.meta-label,
.case-meta dt{
  color:var(--portfolio-muted);
}

/* Numbers: light blue, no filled background */
.project-index,
.step-number,
.section-number,
.case-step-number,
.case-number,
[class*="step-number"],
[class*="section-number"]{
  color:var(--portfolio-number) !important;
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}

/* Checkout numbered steps: remove any pill/block treatment */
.checkout-step-number,
.case-study-step .number,
.case-step .number{
  color:var(--portfolio-number) !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Homepage Checkout artwork: rounded corners */
.checkout-home-final-art{
  border-radius:28px !important;
  overflow:hidden !important;
}
.checkout-home-final-art img{
  border-radius:28px !important;
}

/* ==========================================================
   v30 — explicit global hierarchy corrections
   ========================================================== */
/* Header name on every page */
.brand{
  color:#2E22A8 !important;
}

/* Every eyebrow / tag across the project, including inline overrides */
.eyebrow,
.tags,
.tag,
.kicker,
.project-tag,
.project-tags,
.case-tag,
.case-tags,
.meta-label,
.case-meta dt,
.case-meta strong{
  color:#6F7893 !important;
}

/* Every visible project / step number: light blue, text only */
.project-num,
.more-item .n,
.checkout-index,
.project-index,
.step-number,
.section-number,
.case-step-number,
.case-number,
.checkout-step-number,
.case-study-step .number,
.case-step .number,
[class*="step-number"],
[class*="section-number"]{
  color:#78BFEA !important;
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Checkout 01–04 had older component-level sizing/background rules */
.checkout-index{
  display:inline-block !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:0 !important;
}


/* ==========================================================
   v31 — definitive eyebrow / tag / number color
   ========================================================== */
:root{
  --portfolio-muted:#6F7893;
}

/* ALL eyebrow / kicker / tag variants across all pages */
.eyebrow,
[class*="eyebrow"],
.kicker,
[class*="kicker"],
.tag,
[class*="-tag"],
[class*="tag-"],
.tags,
[class*="-tags"],
[class*="tags-"],
.project-tag,
.project-tags,
.case-tag,
.case-tags,
.meta-label,
.case-meta dt,
.case-hero .eyebrow,
.case-hero [class*="eyebrow"],
.checkout-hero .eyebrow,
.checkout-hero [class*="eyebrow"],
.hero .eyebrow,
.hero [class*="eyebrow"]{
  color:#6F7893 !important;
}

/* ALL project / step / section numbers: no background */
.project-index,
.step-number,
.section-number,
.case-step-number,
.case-number,
.checkout-step-number,
[class*="step-number"],
[class*="section-number"],
[class*="project-index"],
.case-study-step .number,
.case-step .number,
.project .number,
[class*="number"]{
  color:#6F7893 !important;
  background:transparent !important;
  background-color:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}


/* ==========================================================
   v32 — definitive number color fix using actual site classes
   ========================================================== */
.project-num,
.checkout-index,
.more-item .n,
.more-list .n,
.n,
.number,
.project-index,
.step-number,
.section-number,
.case-step-number,
.case-number,
.checkout-step-number,
.case-study-step .number,
.case-step .number{
  color:#6F7893 !important;
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

/* Explicitly override older homepage lime/blue number treatments */
#work .project-num,
.project .project-num,
.more-item .n,
.checkout-story-head .checkout-index{
  color:#6F7893 !important;
  background:none !important;
}


/* ==========================================================
   v34 — punctuation accents + checkout section inversion
   ========================================================== */

/* Lime punctuation accents in headings */
.title-punctuation{
  color:#CEFF00 !important;
}

/* Checkout: sections previously lime are now blue */
.checkout-challenge.challenge-lime,
.checkout-outcome.outcome-stage{
  background:#2E22A8 !important;
  color:#FFFFFF !important;
}
.checkout-challenge.challenge-lime h2,
.checkout-challenge.challenge-lime p,
.checkout-challenge.challenge-lime .eyebrow,
.checkout-outcome.outcome-stage h2,
.checkout-outcome.outcome-stage p,
.checkout-outcome.outcome-stage .eyebrow{
  color:#FFFFFF !important;
}
.checkout-challenge.challenge-lime .title-punctuation,
.checkout-outcome.outcome-stage .title-punctuation{
  color:#CEFF00 !important;
}

/* Checkout Step 03: blue -> white */
.checkout-story-section.flexibility-stage{
  background:#FFFFFF !important;
  color:#2E22A8 !important;
}
.checkout-story-section.flexibility-stage h2,
.checkout-story-section.flexibility-stage .checkout-story-head p{
  color:#2E22A8 !important;
}
.checkout-story-section.flexibility-stage .eyebrow{
  color:#6F7893 !important;
}
.checkout-story-section.flexibility-stage .checkout-index{
  color:#6F7893 !important;
  background:transparent !important;
}
.checkout-story-section.flexibility-stage .title-punctuation{
  color:#CEFF00 !important;
}

/* Step 03 screen frames adjusted for the new white section */
.checkout-story-section.flexibility-stage .later-card{
  background:#2E22A8 !important;
  border:1px solid #2E22A8 !important;
}
.checkout-story-section.flexibility-stage .later-card figcaption{
  color:#FFFFFF !important;
}

/* Home Get in touch: white copy + lime punctuation */
#contact.contact,
#contact.contact h2,
#contact.contact p,
#contact.contact .eyebrow{
  color:#FFFFFF !important;
}
#contact.contact .title-punctuation{
  color:#CEFF00 !important;
}

/* Text buttons only; lime underline on hover/focus */
#contact .cta-row{
  gap:28px;
}
#contact .contact-text-link{
  display:inline-block;
  position:relative;
  padding:4px 0;
  border:0 !important;
  background:transparent !important;
  color:#FFFFFF !important;
  font-weight:800;
  text-decoration:none !important;
}
#contact .contact-text-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  background:#CEFF00;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .22s ease;
}
#contact .contact-text-link:hover::after,
#contact .contact-text-link:focus-visible::after{
  transform:scaleX(1);
}
#contact .contact-text-link:hover,
#contact .contact-text-link:focus-visible{
  color:#FFFFFF !important;
  background:transparent !important;
}

/* v35 requested batch */
.checkout-story-section.flexibility-stage .later-card{
  background:#FFFFFF !important;
  border:1px solid var(--line) !important;
}
.checkout-story-section.flexibility-stage .later-card figcaption{
  color:#2E22A8 !important;
}
.checkout-outcome.outcome-stage{
  padding:88px 0 !important;
  border-top:1px solid var(--line);
}
.checkout-outcome.outcome-stage .case-grid{
  display:grid !important;
  grid-template-columns:.32fr 1fr !important;
  gap:44px !important;
}
.checkout-outcome.outcome-stage .case-grid h2{font-size:46px;}
.checkout-outcome.outcome-stage .case-grid p{
  font-size:19px;
  max-width:850px;
  color:#FFFFFF !important;
}
@media (max-width:800px){
  .checkout-outcome.outcome-stage .case-grid{grid-template-columns:1fr !important;}
}

/* v36 — Step 03 frames: remove blue fill completely */
.checkout-story-section.flexibility-stage .later-card{
  background:#FFFFFF !important;
  border:1px solid var(--line) !important;
}
.checkout-story-section.flexibility-stage .later-card img{
  background:#FFFFFF !important;
}
.checkout-story-section.flexibility-stage .later-card figcaption{
  background:#FFFFFF !important;
  color:#2E22A8 !important;
}

/* v37 — Step 03 frames matched to Step 04 screen frames */
.checkout-story-section.flexibility-stage .later-card{
  box-sizing:border-box !important;
  background:#FDF8F3 !important;
  border:1px solid rgba(46,34,168,.18) !important;
  border-radius:18px !important;
  padding:18px !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.checkout-story-section.flexibility-stage .later-card img{
  display:block !important;
  background:#FFFFFF !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.checkout-story-section.flexibility-stage .later-card figcaption{
  background:transparent !important;
  color:#2E22A8 !important;
  padding:14px 4px 0 !important;
}

/* v38 — Step 03: pure white, equal-size containers */
.checkout-story-section.flexibility-stage .later-grid{
  align-items:stretch !important;
}
.checkout-story-section.flexibility-stage .later-card{
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  background:#FFFFFF !important;
  border:1px solid rgba(46,34,168,.18) !important;
  border-radius:18px !important;
  padding:18px !important;
  box-shadow:none !important;
}
.checkout-story-section.flexibility-stage .later-card img{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:464px !important;
  max-height:464px !important;
  object-fit:contain !important;
  margin:0 auto !important;
  background:#FFFFFF !important;
}
.checkout-story-section.flexibility-stage .later-card figcaption{
  margin-top:auto !important;
  min-height:54px !important;
  box-sizing:border-box !important;
  padding:14px 4px 0 !important;
  background:#FFFFFF !important;
  color:#2E22A8 !important;
}

/* v39 — Step 03 screenshot shadow, consistent with other steps */
.checkout-story-section.flexibility-stage .later-card img{
  box-shadow:var(--shadow) !important;
}

/* v40 — Step 03 screenshot shadow, exact value used in the other checkout steps */
.checkout-story-section.flexibility-stage .later-card img{
  box-shadow:0 10px 24px rgba(46,34,168,.10) !important;
}

/* v41 — About / editorial background section */
.about-background-editorial{
  background:#FFFFFF;
  overflow:hidden;
}
.about-background-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:clamp(56px,7vw,120px);
  align-items:center;
}
.about-background-visual{
  position:relative;
  margin-left:clamp(-80px,-5vw,-28px);
}
.about-background-visual img{
  display:block;
  width:100%;
  height:auto;
}
.about-background-copy{
  max-width:620px;
  padding:48px 0;
}
.about-background-copy .eyebrow{
  margin-bottom:26px;
}
.about-background-copy h2{
  margin:0 0 30px;
}
.about-background-copy p:last-child{
  margin-bottom:0;
}
@media(max-width:900px){
  .about-background-grid{
    grid-template-columns:1fr;
    gap:42px;
  }
  .about-background-visual{
    margin-left:0;
    max-width:680px;
  }
  .about-background-copy{
    max-width:720px;
    padding:0;
  }
}

/* v42 — About: rounded collage + alternating white/cream sections */
.about-background-visual img{
  border-radius:28px !important;
}
.about-alt-white{
  background:#FFFFFF !important;
}
.about-alt-cream{
  background:#FDF8F3 !important;
}
/* Background editorial section participates in the same alternating rhythm */
.about-background-editorial.about-alt-cream{
  background:#FDF8F3 !important;
}

/* v43 — Resume first section fully white */
.resume-hero,
.resume-hero .container,
.resume-hero .resume-wrap,
.resume-hero .resume-card{
  background:#FFFFFF !important;
}

/* v45 — repaired homepage image and outline contact icons */
#contact .contact-text-link{display:inline-flex !important;align-items:center;gap:9px;}
#contact .contact-icon{width:19px;height:19px;flex:0 0 19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

/* v46 — handwritten note directly on the page */
.paper-note{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  min-height:0 !important;
  height:auto !important;
}
.paper-note .note-main{
  display:block;
  width:min(100%,720px) !important;
  height:auto !important;
  object-fit:contain !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* v47 — Resume */
.resume-intro,.resume-intro .container{background:#FFFFFF !important;}
.resume-intro .resume-card{
  margin-top:36px;padding:26px 30px;background:#2E22A8 !important;
  border:0 !important;border-radius:24px;
}
.resume-intro .resume-card .cta-row{margin:0;}
.resume-intro .resume-card .btn.primary{background:#CEFF00;color:#2E22A8;}
.resume-intro .resume-card .btn.link{color:#FFFFFF;}

.resume-longer{background:#2E22A8 !important;color:#FFFFFF;}
.resume-longer .container{background:transparent !important;}
.resume-longer-content{max-width:820px;margin:0;text-align:left;}
.resume-longer h2,.resume-longer p,.resume-longer .project-link{color:#FFFFFF !important;}
.resume-longer .title-punctuation{color:#CEFF00 !important;}

/* v48 — pending Resume + Selected Work refinements */

/* Resume: compact CTA container aligned to the text measure above */
.resume-intro .resume-card{
  width:fit-content !important;
  max-width:100%;
  padding:26px 30px !important;
}

/* View Resume: lime normally, white on hover */
.resume-intro .resume-card .btn.primary{
  background:#CEFF00 !important;
  color:#2E22A8 !important;
  transition:background-color .2s ease,color .2s ease;
}
.resume-intro .resume-card .btn.primary:hover,
.resume-intro .resume-card .btn.primary:focus-visible{
  background:#FFFFFF !important;
  color:#2E22A8 !important;
}

/* Download + View selected work: no static underline, lime underline left-to-right on hover */
.resume-intro .resume-card .btn.link,
.resume-longer .project-link{
  position:relative;
  border-bottom:0 !important;
  text-decoration:none !important;
}
.resume-intro .resume-card .btn.link::after,
.resume-longer .project-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:3px;
  background:#CEFF00;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .24s ease;
}
.resume-intro .resume-card .btn.link:hover::after,
.resume-intro .resume-card .btn.link:focus-visible::after,
.resume-longer .project-link:hover::after,
.resume-longer .project-link:focus-visible::after{
  transform:scaleX(1);
}

/* Home Selected Work: align right paragraph with the top of the left content block */
#work .work-intro{
  align-items:start !important;
}
#work .work-intro > p{
  align-self:start !important;
  margin-top:0 !important;
}

@media(max-width:900px){
  .resume-intro .resume-card{width:100% !important;}
}

/* v49 */
.resume-intro .resume-card .btn.link,.resume-longer .project-link{
border:0!important;border-bottom:0!important;text-decoration:none!important;background-image:none!important;box-shadow:none!important;position:relative}
.resume-intro .resume-card .btn.link::after,.resume-longer .project-link::after{
content:""!important;position:absolute!important;left:0!important;bottom:-6px!important;width:100%!important;height:3px!important;background:#CEFF00!important;transform:scaleX(0)!important;transform-origin:left center!important;transition:transform .24s ease!important}
.resume-intro .resume-card .btn.link:hover::after,.resume-intro .resume-card .btn.link:focus-visible::after,.resume-longer .project-link:hover::after,.resume-longer .project-link:focus-visible::after{transform:scaleX(1)!important}
#work .work-intro{align-items:center!important}
#work .work-intro>p{align-self:center!important;margin-top:0!important;margin-bottom:0!important}

/* v50 — definitive Resume underline override.
   Global link styling draws the resting underline with ::before. */
.resume-intro .resume-card .btn.link::before,
.resume-longer .project-link::before{
  content:"" !important;
  display:none !important;
  width:0 !important;
  height:0 !important;
  background:transparent !important;
  transform:scaleX(0) !important;
}

/* Keep only the lime animated ::after underline on interaction. */
.resume-intro .resume-card .btn.link::after,
.resume-longer .project-link::after{
  display:block !important;
  transform:scaleX(0) !important;
  background:#CEFF00 !important;
}
.resume-intro .resume-card .btn.link:hover::after,
.resume-intro .resume-card .btn.link:focus-visible::after,
.resume-longer .project-link:hover::after,
.resume-longer .project-link:focus-visible::after{
  transform:scaleX(1) !important;
}


/* ==========================================================
   v51 — More Work + Beyond Products assets
   ========================================================== */
.beyond-gallery{
  display:grid !important;
  grid-template-columns:1.5fr 1fr 1fr !important;
  grid-template-areas:
    "web packaging editorial"
    "product brand brand" !important;
  gap:16px !important;
  align-items:stretch;
}
.beyond-gallery .beyond-card{
  position:relative;
  min-height:0 !important;
  padding:0 !important;
  display:block !important;
  overflow:hidden;
  background:#FFFFFF;
  border:1px solid var(--line);
}
.beyond-gallery .beyond-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.beyond-web{
  grid-area:web;
  aspect-ratio:1200/1120;
  background:#2E22A8 !important;
}
.beyond-web .beyond-placeholder{
  position:absolute;
  inset:0;
}
.beyond-packaging{
  grid-area:packaging;
  aspect-ratio:800/1120;
}
.beyond-editorial{
  grid-area:editorial;
  aspect-ratio:800/1120;
}
.beyond-product-communication{
  grid-area:product;
  aspect-ratio:1/1;
}
.beyond-brand{
  grid-area:brand;
  aspect-ratio:1200/800;
}
.beyond-label{
  position:absolute;
  left:18px;
  right:18px;
  bottom:16px;
  z-index:2;
  width:max-content;
  max-width:calc(100% - 36px);
  padding:8px 11px;
  background:#FFFFFF;
  color:#2E22A8;
  font-weight:800;
  line-height:1.1;
}
.beyond-web .beyond-label{
  background:transparent;
  color:#FFFFFF;
  padding-left:0;
}

@media(max-width:900px){
  .beyond-gallery{
    grid-template-columns:1fr 1fr !important;
    grid-template-areas:
      "web web"
      "packaging editorial"
      "product product"
      "brand brand" !important;
  }
}
@media(max-width:620px){
  .beyond-gallery{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "web"
      "packaging"
      "editorial"
      "product"
      "brand" !important;
  }
}


/* ==========================================================
   v52 — Beyond Products refinement
   ========================================================== */

/* Card shell becomes transparent so labels no longer cover artwork */
.beyond-gallery .beyond-card{
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  display:flex !important;
  flex-direction:column !important;
}

/* Artwork: clean rounded corners */
.beyond-gallery .beyond-card img,
.beyond-gallery .beyond-placeholder{
  width:100% !important;
  border-radius:22px !important;
  overflow:hidden !important;
}

/* Preserve each supplied asset ratio without label overlap */
.beyond-gallery .beyond-card img{
  display:block !important;
  height:auto !important;
  object-fit:cover !important;
}

/* Web placeholder keeps its visual block until artwork is supplied */
.beyond-web{
  aspect-ratio:auto !important;
  background:transparent !important;
}
.beyond-web .beyond-placeholder{
  position:relative !important;
  inset:auto !important;
  aspect-ratio:1200/1120;
  background:#2E22A8 !important;
}

/* Labels sit outside the image: compact editorial caption */
.beyond-gallery .beyond-label,
.beyond-web .beyond-label{
  position:static !important;
  width:auto !important;
  max-width:none !important;
  margin-top:12px !important;
  padding:0 !important;
  background:transparent !important;
  color:#2E22A8 !important;
  font-size:14px;
  font-weight:800;
  line-height:1.2;
}

/* Brand Applications spans to the same right edge as the row above
   and fills the complete grid area beside Product Communication. */
.beyond-brand{
  grid-area:brand !important;
  aspect-ratio:auto !important;
  align-self:stretch !important;
}
.beyond-brand img{
  flex:1 1 auto !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  object-fit:cover !important;
}

/* Product Communication anchors the height of the second row. */
.beyond-product-communication{
  aspect-ratio:1/1 !important;
}
.beyond-product-communication img{
  aspect-ratio:1/1;
  object-fit:cover !important;
}

@media(max-width:900px){
  .beyond-brand img{
    height:auto !important;
    aspect-ratio:1200/800;
  }
}


/* v53 — Beyond Products layout repair
   Keep the gallery inside the site container and prevent labels from becoming grid-sized items. */
.beyond-gallery{
  width:100% !important;
  max-width:100% !important;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.8fr) !important;
  grid-template-areas:
    "web packaging editorial"
    "product brand brand" !important;
  align-items:start !important;
  gap:18px !important;
  overflow:hidden;
}

.beyond-gallery .beyond-card{
  min-width:0 !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:auto !important;
  display:block !important;
  position:relative !important;
}

/* The image is the card; labels are compact captions below it. */
.beyond-gallery .beyond-card img,
.beyond-gallery .beyond-placeholder{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  object-fit:cover !important;
  border-radius:22px !important;
}

.beyond-web .beyond-placeholder{aspect-ratio:1200/1120 !important;}
.beyond-packaging img,
.beyond-editorial img{aspect-ratio:800/1120 !important;}
.beyond-product-communication img{aspect-ratio:1/1 !important;}
.beyond-brand img{aspect-ratio:1200/800 !important;}

/* No absolute/flex stretching on captions. */
.beyond-gallery .beyond-label,
.beyond-web .beyond-label{
  position:relative !important;
  inset:auto !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  margin:10px 0 0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#2E22A8 !important;
  font-size:13px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
}

/* Brand Applications spans the two right columns, ending at the same gallery edge above. */
.beyond-brand{
  grid-area:brand !important;
  align-self:start !important;
}
.beyond-brand img{
  width:100% !important;
  height:auto !important;
  flex:none !important;
}

@media(max-width:900px){
  .beyond-gallery{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-areas:
      "web web"
      "packaging editorial"
      "product product"
      "brand brand" !important;
  }
}
@media(max-width:620px){
  .beyond-gallery{
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-areas:"web" "packaging" "editorial" "product" "brand" !important;
  }
}


/* v54 — Brand Applications: match Product Communication height only */
@media(min-width:901px){
  .beyond-brand{
    height:100% !important;
  }
  .beyond-brand img{
    height:100% !important;
    width:100% !important;
    aspect-ratio:auto !important;
    object-fit:cover !important;
  }
}


/* v55 — exact second-row image height alignment */
@media(min-width:901px){
  .beyond-gallery{
    align-items:start !important;
  }

  /* Both second-row artworks use the same explicit visual height.
     Product Communication's square card defines that height. */
  .beyond-product-communication,
  .beyond-brand{
    align-self:start !important;
  }

  .beyond-product-communication img,
  .beyond-brand img{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }

  /* Brand spans two columns, so its native 3:2 ratio would be too short.
     Match the visual height of the square Product Communication card
     by using the same row height and cropping only inside the image. */
  .beyond-gallery:has(.beyond-product-communication) .beyond-brand img{
    aspect-ratio:auto !important;
    height:100% !important;
    object-fit:cover !important;
  }

  .beyond-brand{
    display:grid !important;
    grid-template-rows:1fr auto !important;
  }

  /* Set Brand artwork height from the first column width:
     grid total = 1.2 + .8 + .8 fractions; product spans first 1.2fr.
     This makes both visible image blocks equal-height. */
  .beyond-brand img{
    height:calc((100vw - max(28px, (100vw - var(--max))/2)*2 - 36px) * 1.2 / 2.8) !important;
    max-height:calc(var(--max) * 1.2 / 2.8) !important;
  }
}


/* v56 — definitive equal-height second row */
@media(min-width:901px){
  .beyond-gallery{
    --second-row-image-h: 420px;
    align-items:start !important;
  }

  .beyond-product-communication,
  .beyond-brand{
    height:auto !important;
    min-height:0 !important;
    display:block !important;
  }

  .beyond-product-communication img,
  .beyond-brand img{
    display:block !important;
    width:100% !important;
    height:var(--second-row-image-h) !important;
    min-height:var(--second-row-image-h) !important;
    max-height:var(--second-row-image-h) !important;
    aspect-ratio:auto !important;
    object-fit:cover !important;
    border-radius:22px !important;
  }
}

@media(min-width:901px) and (max-width:1200px){
  .beyond-gallery{--second-row-image-h:360px;}
}


/* ==========================================================
   v61 — Motion system
   Subtle, functional motion with reduced-motion support.
   ========================================================== */

:root{
  --motion-fast:240ms;
  --motion-base:520ms;
  --motion-slow:640ms;
  --motion-ease:cubic-bezier(.22,.7,.25,1);
}

/* Page entrance / exit */
html.motion-ready body{
  opacity:0;
}
html.motion-ready body.motion-page-in{
  opacity:1;
  transition:opacity 320ms ease;
}
html.motion-ready body.motion-page-out{
  opacity:0;
  transition:opacity 220ms ease;
}

/* Homepage hero entrance */
.motion-hero-item{
  opacity:0;
  transform:translateY(18px);
}
body.motion-page-in .motion-hero-item{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity var(--motion-slow) var(--motion-ease),
    transform var(--motion-slow) var(--motion-ease);
  transition-delay:var(--hero-delay,0ms);
}

/* Generic scroll reveal */
.motion-reveal{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease);
  transition-delay:var(--motion-delay,0ms);
}
.motion-reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Stagger groups */
.motion-stagger-item{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity 480ms var(--motion-ease),
    transform 480ms var(--motion-ease);
  transition-delay:calc(var(--stagger-index,0) * 65ms);
}
.motion-stagger-item.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Homepage hero visual — tiny scroll parallax, no continuous floating */
.hero-visual.motion-parallax{
  transform:translate3d(0,var(--parallax-y,0px),0);
  will-change:transform;
}

/* Selected Work image feedback */
.project .visual{
  overflow:hidden;
}
.project .visual img{
  transition:transform 420ms var(--motion-ease);
}
@media (hover:hover){
  .project:hover .visual img{
    transform:scale(1.02);
  }
  .project .project-link{
    transition:transform var(--motion-fast) var(--motion-ease);
  }
  .project .project-link:hover{
    transform:translateX(5px);
  }
}

/* More Work: subtle horizontal feedback after staggered reveal */
.more-item{
  transition:
    transform var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) ease;
}
@media (hover:hover){
  .more-item:hover{
    transform:translateX(6px);
  }
}

/* Beyond Products — image stays inside rounded crop */
.beyond-gallery .beyond-card{
  overflow:visible !important;
}
.beyond-gallery .beyond-card img,
.beyond-gallery .beyond-placeholder{
  transition:transform 420ms var(--motion-ease);
}
.beyond-gallery .beyond-label{
  transition:transform var(--motion-fast) var(--motion-ease);
}
@media (hover:hover){
  .beyond-gallery .beyond-card:hover img,
  .beyond-gallery .beyond-card:hover .beyond-placeholder{
    transform:scale(1.025);
  }
  .beyond-gallery .beyond-card:hover .beyond-label{
    transform:translateX(3px);
  }
}

/* Raster doodles: quick directional reveal, then remain still */
.motion-doodle{
  opacity:0;
  clip-path:inset(0 100% 0 0);
  transition:
    clip-path 620ms var(--motion-ease),
    opacity 240ms ease;
}
.motion-doodle.is-visible{
  opacity:1;
  clip-path:inset(0 0 0 0);
}

/* Case-study screenshot groups: clean sequential entrance */
.current-card.motion-stagger-item,
.later-card.motion-stagger-item,
.early-card.motion-stagger-item{
  transform:translateY(16px) scale(.985);
}
.current-card.motion-stagger-item.is-visible,
.later-card.motion-stagger-item.is-visible,
.early-card.motion-stagger-item.is-visible{
  transform:translateY(0) scale(1);
}

/* Keep keyboard / motion accessibility predictable */
@media (prefers-reduced-motion:reduce){
  html.motion-ready body,
  html.motion-ready body.motion-page-in,
  html.motion-ready body.motion-page-out,
  .motion-hero-item,
  body.motion-page-in .motion-hero-item,
  .motion-reveal,
  .motion-reveal.is-visible,
  .motion-stagger-item,
  .motion-stagger-item.is-visible,
  .motion-doodle,
  .motion-doodle.is-visible,
  .hero-visual.motion-parallax,
  .project .visual img,
  .more-item,
  .beyond-gallery .beyond-card img,
  .beyond-gallery .beyond-placeholder,
  .beyond-gallery .beyond-label{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
    transition:none !important;
    animation:none !important;
  }
}


/* v62 — requested interaction refinements */
.brand .brand-initial{
  color:inherit;
  transition:color var(--motion-fast,240ms) ease;
}
@media (hover:hover){
  .brand:hover .brand-initial{color:#CEFF00;}

  /* Scale only the image actually being hovered, never the whole project. */
  .project:hover .visual img{transform:none;}
  .project .visual img:hover{transform:scale(1.02);}

  /* Case-study links keep only their existing underline animation. */
  .project .project-link,
  .project .project-link:hover{transform:none !important;}
}
@media (prefers-reduced-motion:reduce){
  .brand .brand-initial{transition:none !important;}
}


/* v63 — User Portal case study */
.portal-shot{margin:0;background:#fff;border:1px solid rgba(46,34,168,.14);border-radius:18px;overflow:hidden}
.portal-shot img{display:block;width:100%;height:auto}
.portal-old-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:24px;align-items:start;margin-top:42px}
.portal-rethink{background:var(--cream)}
.portal-new-home{margin-top:42px}
.portal-device-composition{position:relative;margin-top:46px;padding:0 0 34px 92px}
.portal-desktop{width:100%}
.portal-mobile{position:absolute;width:27%;left:0;bottom:0;border-radius:20px;box-shadow:0 18px 44px rgba(46,34,168,.16);z-index:2}
.portal-outcome{background:var(--blue);color:#fff}
.portal-outcome .eyebrow{color:#fff}
.portal-outcome h2,.portal-outcome p{color:#fff}
.portal-outcome .title-punctuation{color:var(--lime)!important}

@media(max-width:800px){
  .portal-old-grid{grid-template-columns:1fr;gap:18px;margin-top:30px}
  .portal-device-composition{padding:0;display:grid;grid-template-columns:1fr;gap:20px}
  .portal-mobile{position:relative;width:min(72%,390px);left:auto;bottom:auto;margin:-10px auto 0}
  .portal-new-home{margin-top:30px}
}


/* v64 — User Portal responsive composition refinement */
.portal-device-composition{
  padding:0 92px 34px 0 !important;
}
.portal-mobile{
  left:auto !important;
  right:0 !important;
}
@media(max-width:800px){
  .portal-device-composition{
    padding:0 !important;
  }
  .portal-mobile{
    right:auto !important;
  }
}


/* v65 — Keep responsive mockups clearly below the copy */
.portal-device-composition{
  width:min(1180px, calc(100% - 48px)) !important;
  margin:54px auto 0 !important;
  padding:0 74px 30px 0 !important;
  box-sizing:border-box;
}
.portal-desktop{
  width:94% !important;
  margin:0 auto 0 0 !important;
}
.portal-mobile{
  width:22% !important;
  right:0 !important;
  top:34px !important;
  bottom:auto !important;
}
@media(max-width:800px){
  .portal-device-composition{
    width:min(100% - 32px, 620px) !important;
    margin:34px auto 0 !important;
    padding:0 !important;
  }
  .portal-desktop{width:100% !important}
  .portal-mobile{
    position:relative !important;
    width:min(62%,340px) !important;
    top:auto !important;
    right:auto !important;
    margin:18px auto 0 !important;
  }
}

.portal-outcome .eyebrow{color:#FFFFFF!important}.portal-outcome .title-punctuation{color:#CEFF00!important}

/* v67 — shared case-study layout language */
.user-portal-page .checkout-story-head{margin-bottom:44px}
.user-portal-page .contribution-stage .checkout-skill-cloud{margin-top:24px}

/* v69 — Case 02 homepage showcase */
.user-portal-home-final-art{
  overflow:hidden;
  border-radius:28px !important;
}
.user-portal-home-final-art img{
  display:block;
  width:100%;
  height:auto;
  border-radius:28px !important;
}

/* v70 — uniform 16:9 homepage case-study visuals */
#work .project > .visual{
  width:100%;
  aspect-ratio:16 / 9;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden;
  border-radius:28px !important;
}
#work .project > .visual > img{
  display:block;
  width:100%;
  height:100% !important;
  max-height:none !important;
  object-fit:cover;
  border-radius:28px !important;
}

/* v71 — Case 02 homepage visual only: remove outer white frame */
#work .project .user-portal-home-final-art{
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden !important;
  border-radius:28px !important;
}
#work .project .user-portal-home-final-art > img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  object-fit:cover !important;
  border-radius:28px !important;
}

/* v73 — Beyond Products intro alignment */
.beyond-intro{
  max-width:none;
  margin:18px 0 35px;
  color:#2E22A8;
  font-size:19px;
}

/* v74 — Beyond Products paragraph directly under title */
.beyond-section-head{align-items:start !important}
.beyond-heading-content{min-width:0}
.beyond-heading-content .beyond-intro{
  max-width:900px;
  margin:24px 0 0 !important;
  color:#2E22A8 !important;
  font-size:19px;
}

/* v75 — Homepage Beyond the interface illustration */
.about-grid .beyond-interface-art{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  display:flex;
  align-items:center;
  justify-content:center;
}
.about-grid .beyond-interface-art img{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  background:transparent !important;
}

/* v76 — Keep the Beyond the interface illustration visible; it is not a doodle reveal */
.about-grid .beyond-interface-art img,
.about-grid .beyond-interface-art img.motion-doodle,
.about-grid .beyond-interface-art img.motion-doodle.is-visible{
  opacity:1 !important;
  clip-path:none !important;
  transform:none !important;
  visibility:visible !important;
}

/* v77 — Paydays case study */
.paydays-single-visual{margin-top:46px;border-radius:22px;overflow:hidden}
.paydays-single-visual img{display:block;width:100%;height:auto}
.paydays-process-composition{position:relative;margin-top:46px;padding:0 0 70px}
.paydays-journey{width:88%;border-radius:22px;overflow:hidden;border:1px solid rgba(46,34,168,.12);background:#fff}
.paydays-journey img{display:block;width:100%;height:auto}
.paydays-process-screen{position:absolute;width:48%;right:0;bottom:0;border-radius:20px;overflow:hidden;box-shadow:0 18px 42px rgba(46,34,168,.16);background:#fff}
.paydays-process-screen img{display:block;width:100%;height:auto}
.paydays-evolution-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:46px;align-items:start}
.paydays-evolution-grid figure{margin:0}.paydays-evolution-grid img{display:block;width:100%;height:auto;border-radius:20px;border:1px solid rgba(46,34,168,.12)}
.paydays-evolution-grid figcaption{margin-top:12px;color:#2E22A8;font-weight:700}
@media(max-width:800px){.paydays-process-composition{padding:0}.paydays-journey{width:100%}.paydays-process-screen{position:relative;width:78%;margin:-20px 0 0 auto;right:auto;bottom:auto}.paydays-evolution-grid{grid-template-columns:1fr}}

/* v78 — Paydays revision story + framed visuals */
.paydays-process-composition{
  width:min(1080px,92%);
  margin:46px auto 0 !important;
  padding:0 0 54px !important;
}
.paydays-journey{
  width:82% !important;
  padding:16px !important;
  box-sizing:border-box;
  border:1px solid rgba(46,34,168,.18) !important;
  border-radius:20px !important;
  background:#fff !important;
}
.paydays-journey img{border-radius:12px}
.paydays-process-screen{
  width:43% !important;
  right:0 !important;
  bottom:0 !important;
  padding:14px !important;
  box-sizing:border-box;
  border:1px solid rgba(46,34,168,.18) !important;
  border-radius:20px !important;
  background:#fff !important;
  box-shadow:0 12px 28px rgba(46,34,168,.12) !important;
}
.paydays-process-screen img{border-radius:12px}
.paydays-evolution-grid{align-items:stretch !important}
.paydays-evolution-grid figure{
  display:flex;
  flex-direction:column;
}
.paydays-screen-frame{
  height:420px;
  padding:16px;
  box-sizing:border-box;
  border:1px solid rgba(46,34,168,.18);
  border-radius:20px;
  background:#fff;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.paydays-screen-frame img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  border:0 !important;
  border-radius:10px !important;
}
@media(max-width:800px){
  .paydays-process-composition{width:100%;padding:0 !important}
  .paydays-journey{width:100% !important}
  .paydays-process-screen{position:relative !important;width:82% !important;margin:18px auto 0 !important;right:auto !important;bottom:auto !important}
  .paydays-screen-frame{height:auto;aspect-ratio:16/10}
}

/* v79 — Checkout Case 01: smaller flow map with rounded corners */
.checkout-story-section.flow-system .flow-stage{
  width:min(1040px,88%) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  border-radius:22px !important;
  overflow:hidden !important;
}
.checkout-story-section.flow-system .flow-stage > img:not(.checkout-doodle){
  display:block;
  width:100% !important;
  height:auto !important;
  border-radius:22px !important;
}
@media(max-width:800px){
  .checkout-story-section.flow-system .flow-stage{width:100% !important}
}

/* v83 — next case arrow hover */
.next-case-arrow{
  color:inherit;
  transition:color .2s ease;
}
.next a:hover .next-case-arrow,
.next a:focus-visible .next-case-arrow,
.next-case:hover .next-case-arrow,
.next-case:focus-visible .next-case-arrow{
  color:#CEFF00 !important;
}

/* v84 mobile fries menu */
.mobile-menu-toggle,.mobile-menu{display:none}
@media(max-width:760px){nav{position:relative;z-index:1003}.mobile-menu-toggle{display:flex;position:absolute;z-index:1004;top:50%;right:24px;width:34px;height:28px;padding:0;border:0;background:transparent;flex-direction:column;justify-content:space-between;transform:translateY(-50%);cursor:pointer}.mobile-menu-toggle span{display:block;width:100%;height:3px;border-radius:99px;background:#2E22A8;transform-origin:center;transition:.25s ease}.mobile-menu-toggle span:nth-child(2){background:#CEFF00}body.mobile-menu-open .mobile-menu-toggle span:nth-child(1){transform:translateY(12.5px) rotate(45deg)}body.mobile-menu-open .mobile-menu-toggle span:nth-child(2){opacity:0}body.mobile-menu-open .mobile-menu-toggle span:nth-child(3){transform:translateY(-12.5px) rotate(-45deg)}.mobile-menu{display:block;position:fixed;z-index:1001;inset:0;padding:150px 28px 42px;background:#FDF8F3;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .25s ease,transform .25s ease,visibility .25s}body.mobile-menu-open{overflow:hidden}body.mobile-menu-open .mobile-menu{opacity:1;visibility:visible;transform:none}.mobile-menu-inner{max-width:560px;margin:0 auto}.mobile-menu-inner a{display:flex;align-items:flex-start;gap:10px;padding:18px 0 22px;border-bottom:1px solid rgba(46,34,168,.18);color:#2E22A8;text-decoration:none}.mobile-menu-inner a span{font-size:clamp(40px,12vw,64px);line-height:.95;font-weight:800;letter-spacing:-.045em}.mobile-menu-inner a small{margin-top:3px;color:#6F7893;font-size:13px;font-weight:800}}
@media(prefers-reduced-motion:reduce){.mobile-menu,.mobile-menu-toggle span{transition:none!important}}

/* v85 — correct mobile fries icon + header placement */
@media(max-width:760px){
  nav{position:relative !important}
  .mobile-menu-toggle{
    display:flex !important;
    position:absolute !important;
    top:50% !important;
    right:24px !important;
    bottom:auto !important;
    left:auto !important;
    width:38px !important;
    height:26px !important;
    padding:3px 0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    justify-content:center !important;
    gap:7px !important;
    transform:translateY(-50%) !important;
    z-index:1004 !important;
  }
  .mobile-menu-toggle .fries-line{
    display:block !important;
    height:4px !important;
    border-radius:999px !important;
    opacity:1 !important;
    transition:transform .25s ease,width .25s ease,background .2s ease !important;
  }
  .mobile-menu-toggle .fries-line-top{
    width:29px !important;
    background:#2E22A8 !important;
  }
  .mobile-menu-toggle .fries-line-bottom{
    width:38px !important;
    background:#CEFF00 !important;
  }
  body.mobile-menu-open .mobile-menu-toggle{
    gap:0 !important;
  }
  body.mobile-menu-open .mobile-menu-toggle .fries-line-top{
    width:36px !important;
    background:#2E22A8 !important;
    transform:translateY(2px) rotate(45deg) !important;
  }
  body.mobile-menu-open .mobile-menu-toggle .fries-line-bottom{
    width:36px !important;
    background:#2E22A8 !important;
    transform:translateY(-2px) rotate(-45deg) !important;
  }
}

/* v86 — three-line fries + persistent close button */
@media(max-width:760px){
  .mobile-menu-toggle{
    display:flex !important;
    position:fixed !important;
    top:34px !important;
    right:24px !important;
    left:auto !important;
    bottom:auto !important;
    width:38px !important;
    height:30px !important;
    padding:2px 0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    justify-content:center !important;
    gap:5px !important;
    transform:none !important;
    z-index:2147483647 !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
  .mobile-menu-toggle .fries-line{
    display:block !important;
    height:4px !important;
    border-radius:999px !important;
    transform-origin:center !important;
    opacity:1 !important;
    visibility:visible !important;
    transition:transform .25s ease,width .25s ease,background .2s ease,opacity .15s ease !important;
  }
  .mobile-menu-toggle .fries-line-top{
    width:29px !important;
    background:#2E22A8 !important;
  }
  .mobile-menu-toggle .fries-line-middle{
    width:38px !important;
    background:#CEFF00 !important;
  }
  .mobile-menu-toggle .fries-line-bottom{
    width:29px !important;
    background:#2E22A8 !important;
  }

  /* Keep toggle above the full-screen menu when open. */
  body.mobile-menu-open .mobile-menu-toggle{
    display:flex !important;
    position:fixed !important;
    z-index:2147483647 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    gap:0 !important;
  }
  body.mobile-menu-open .mobile-menu-toggle .fries-line-top{
    width:36px !important;
    background:#2E22A8 !important;
    transform:translateY(4px) rotate(45deg) !important;
  }
  body.mobile-menu-open .mobile-menu-toggle .fries-line-middle{
    opacity:0 !important;
    width:0 !important;
  }
  body.mobile-menu-open .mobile-menu-toggle .fries-line-bottom{
    width:36px !important;
    background:#2E22A8 !important;
    transform:translateY(-4px) rotate(-45deg) !important;
  }
  .mobile-menu{z-index:100000 !important}
}

/* v87 — fries proportions + always-visible close X */
@media(max-width:760px){
  /* Closed state: outer lines longer, middle lime line shorter */
  .mobile-menu-toggle .fries-line-top,
  .mobile-menu-toggle .fries-line-bottom{
    width:38px !important;
    background:#2E22A8 !important;
  }
  .mobile-menu-toggle .fries-line-middle{
    width:27px !important;
    background:#CEFF00 !important;
    align-self:flex-end !important;
  }

  /* Open state: keep the control visible above every overlay/header layer */
  body.mobile-menu-open .mobile-menu-toggle{
    display:flex !important;
    position:fixed !important;
    top:34px !important;
    right:24px !important;
    width:38px !important;
    height:30px !important;
    z-index:2147483647 !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
  body.mobile-menu-open .mobile-menu-toggle .fries-line-top,
  body.mobile-menu-open .mobile-menu-toggle .fries-line-bottom{
    position:absolute !important;
    top:13px !important;
    right:0 !important;
    width:38px !important;
    height:4px !important;
    opacity:1 !important;
    visibility:visible !important;
    background:#2E22A8 !important;
  }
  body.mobile-menu-open .mobile-menu-toggle .fries-line-top{
    transform:rotate(45deg) !important;
  }
  body.mobile-menu-open .mobile-menu-toggle .fries-line-bottom{
    transform:rotate(-45deg) !important;
  }
  body.mobile-menu-open .mobile-menu-toggle .fries-line-middle{
    display:none !important;
  }

  /* Header/nav must not clip the fixed close control */
  body.mobile-menu-open nav,
  body.mobile-menu-open header{
    overflow:visible !important;
  }
  .mobile-menu{
    z-index:999999 !important;
  }
}

/* v88 — dedicated, reliable close control inside mobile overlay */
.mobile-menu-close{display:none}
@media(max-width:760px){
  /* Closed fries: outer blue lines long, middle lime line short */
  .mobile-menu-toggle .fries-line-top,
  .mobile-menu-toggle .fries-line-bottom{width:38px !important}
  .mobile-menu-toggle .fries-line-middle{width:27px !important}

  /* When menu is open, hide fries and use a real close button in overlay */
  body.mobile-menu-open .mobile-menu-toggle{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  .mobile-menu-close{
    display:block;
    position:absolute;
    top:25px;
    right:24px;
    width:40px;
    height:40px;
    padding:0;
    border:0;
    background:transparent;
    z-index:10;
    cursor:pointer;
  }
  .mobile-menu-close span{
    display:block;
    position:absolute;
    left:2px;
    top:18px;
    width:36px;
    height:4px;
    border-radius:999px;
    background:#2E22A8;
  }
  .mobile-menu-close span:first-child{transform:rotate(45deg)}
  .mobile-menu-close span:last-child{transform:rotate(-45deg)}
}

/* v89 — persistent header + reliable mobile anchored navigation */
nav{
  position:sticky !important;
  top:0 !important;
  z-index:90000 !important;
  background:#FDF8F3 !important;
}
@media(max-width:760px){
  nav{
    position:sticky !important;
    top:0 !important;
    z-index:90000 !important;
    background:#FDF8F3 !important;
  }
  /* prevent anchored sections from hiding behind sticky header */
  #work,#contact{scroll-margin-top:110px}
}

/* v92 — 404 footer at viewport bottom */
.page-404{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.page-404 footer{
  margin-top:auto !important;
}

/* v93 — supplied landing hero artwork */
header.hero{position:relative;overflow:hidden}
header.hero .container{position:relative;z-index:2}
.landing-complex-clear-art{
 position:absolute;z-index:1;right:clamp(20px,4vw,72px);top:50%;
 width:min(46vw,740px);transform:translateY(-42%);pointer-events:none
}
.landing-complex-clear-art img{display:block;width:100%;height:auto;object-fit:contain}
@media(max-width:900px){
 header.hero{overflow:visible}
 .landing-complex-clear-art{position:relative;right:auto;top:auto;width:100%;max-width:700px;margin:46px auto 0;transform:none}
}

/* v94 — landing: only the supplied artwork */
header.hero .hero-visual,
header.hero .hero-art:not(.landing-complex-clear-art),
header.hero .hero-image,
header.hero .hero-showcase,
header.hero .hero-media{
  display:none !important;
}
header.hero .landing-complex-clear-art{
  display:block !important;
}

/* v95 — underlined text links: blue at rest, lime sweep left → right on hover */
a:not(.button):not(.btn):not(.nav-link):not(.brand){
  text-decoration: none;
}

a.text-link,
.prose a,
.about-copy a,
.contact-copy a,
.case-copy a,
.resume-copy a,
footer a{
  position: relative;
  display: inline-block;
  text-decoration: none !important;
  background-image:
    linear-gradient(#CEFF00,#CEFF00),
    linear-gradient(#2E22A8,#2E22A8);
  background-size: 0 2px, 100% 2px;
  background-position: left bottom, left bottom;
  background-repeat: no-repeat;
  transition: background-size .32s cubic-bezier(.22,.61,.36,1);
}

a.text-link:hover,
a.text-link:focus-visible,
.prose a:hover,
.prose a:focus-visible,
.about-copy a:hover,
.about-copy a:focus-visible,
.contact-copy a:hover,
.contact-copy a:focus-visible,
.case-copy a:hover,
.case-copy a:focus-visible,
.resume-copy a:hover,
.resume-copy a:focus-visible,
footer a:hover,
footer a:focus-visible{
  background-size: 100% 2px, 100% 2px;
}

}

/* v96 — final text-link underline system */
.btn.link,
.project-link,
.contact-text-link,
.resume-intro .resume-card .btn.link,
.resume-longer .project-link {
  position: relative !important;
  display: inline-block;
  text-decoration: none !important;
  border-bottom: 0 !important;
  background-image: none !important;
}
.btn.link::before,
.btn.link::after,
.project-link::before,
.project-link::after,
.contact-text-link::before,
.contact-text-link::after,
.resume-intro .resume-card .btn.link::before,
.resume-intro .resume-card .btn.link::after,
.resume-longer .project-link::before,
.resume-longer .project-link::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -4px !important;
  width: 100% !important;
  height: 2px !important;
  transform-origin: left center !important;
  pointer-events: none !important;
}
.btn.link::before,
.project-link::before,
.contact-text-link::before,
.resume-intro .resume-card .btn.link::before,
.resume-longer .project-link::before {
  background: #2E22A8 !important;
  transform: scaleX(1) !important;
}
.btn.link::after,
.project-link::after,
.contact-text-link::after,
.resume-intro .resume-card .btn.link::after,
.resume-longer .project-link::after {
  background: #CEFF00 !important;
  transform: scaleX(0) !important;
  transition: transform .34s cubic-bezier(.22,.61,.36,1) !important;
}
.btn.link:hover::after,
.btn.link:focus-visible::after,
.project-link:hover::after,
.project-link:focus-visible::after,
.contact-text-link:hover::after,
.contact-text-link:focus-visible::after,
.resume-intro .resume-card .btn.link:hover::after,
.resume-intro .resume-card .btn.link:focus-visible::after,
.resume-longer .project-link:hover::after,
.resume-longer .project-link:focus-visible::after {
  transform: scaleX(1) !important;
}
/* Contact sits on blue: keep its resting underline visible in white, lime sweeps over it. */
#contact .contact-text-link::before { background:#fff !important; }

/* v97 — Contact links: no resting underline; lime sweep only on hover */
#contact a,
.contact a,
.contact-section a,
.contact-links a,
.contact-actions a{
  text-decoration:none !important;
  border-bottom:0 !important;
  background-image:linear-gradient(#CEFF00,#CEFF00) !important;
  background-repeat:no-repeat !important;
  background-position:left bottom !important;
  background-size:0 3px !important;
  transition:background-size .32s cubic-bezier(.22,.61,.36,1) !important;
  padding-bottom:5px;
}

#contact a:hover,
#contact a:focus-visible,
.contact a:hover,
.contact a:focus-visible,
.contact-section a:hover,
.contact-section a:focus-visible,
.contact-links a:hover,
.contact-links a:focus-visible,
.contact-actions a:hover,
.contact-actions a:focus-visible{
  background-size:100% 3px !important;
}

/* Prevent legacy pseudo-element underlines from appearing in contact CTAs */
#contact a::before,
#contact a::after,
.contact a::before,
.contact a::after,
.contact-section a::before,
.contact-section a::after,
.contact-links a::before,
.contact-links a::after,
.contact-actions a::before,
.contact-actions a::after{
  content:none !important;
  display:none !important;
}

/* v98 — definitive text-link underline behavior */

/* 1) Standard underlined text links:
      blue at rest, lime sweep left -> right on hover */
.btn.link,
.project-link,
.resume-intro .resume-card .btn.link,
.resume-longer .project-link {
  position:relative !important;
  display:inline-block !important;
  text-decoration:none !important;
  border-bottom:0 !important;
  background:none !important;
  padding-bottom:5px !important;
}

.btn.link::before,
.project-link::before,
.resume-intro .resume-card .btn.link::before,
.resume-longer .project-link::before {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:0 !important;
  right:auto !important;
  bottom:0 !important;
  width:100% !important;
  height:2px !important;
  background:#2E22A8 !important;
  transform:none !important;
  opacity:1 !important;
  pointer-events:none !important;
}

.btn.link::after,
.project-link::after,
.resume-intro .resume-card .btn.link::after,
.resume-longer .project-link::after {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:0 !important;
  right:auto !important;
  bottom:0 !important;
  width:100% !important;
  height:2px !important;
  background:#CEFF00 !important;
  transform:scaleX(0) !important;
  transform-origin:left center !important;
  transition:transform .32s cubic-bezier(.22,.61,.36,1) !important;
  opacity:1 !important;
  pointer-events:none !important;
}

.btn.link:hover::after,
.btn.link:focus-visible::after,
.project-link:hover::after,
.project-link:focus-visible::after,
.resume-intro .resume-card .btn.link:hover::after,
.resume-intro .resume-card .btn.link:focus-visible::after,
.resume-longer .project-link:hover::after,
.resume-longer .project-link:focus-visible::after {
  transform:scaleX(1) !important;
}

/* 2) Contact CTA links:
      absolutely NO underline at rest; lime only appears on hover */
#contact .contact-text-link {
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:12px !important;
  text-decoration:none !important;
  border-bottom:0 !important;
  background:none !important;
  padding-bottom:7px !important;
}

#contact .contact-text-link::before {
  content:none !important;
  display:none !important;
}

#contact .contact-text-link::after {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:3px !important;
  background:#CEFF00 !important;
  transform:scaleX(0) !important;
  transform-origin:left center !important;
  transition:transform .32s cubic-bezier(.22,.61,.36,1) !important;
  opacity:1 !important;
  pointer-events:none !important;
}

#contact .contact-text-link:hover::after,
#contact .contact-text-link:focus-visible::after {
  transform:scaleX(1) !important;
}


@media (hover:none),(pointer:coarse){
  .cursor-lime-dot{display:none !important}
}

/* v99 — definitive lime cursor dot */
#cursor-lime-dot{
  position:fixed !important;
  left:0 !important;
  top:0 !important;
  width:12px !important;
  height:12px !important;
  border-radius:999px !important;
  background:#CEFF00 !important;
  pointer-events:none !important;
  z-index:2147483647 !important;
  opacity:1 !important;
  display:block !important;
  visibility:visible !important;
  transform:translate3d(-100px,-100px,0);
  box-shadow:0 0 0 1px rgba(46,34,168,.08);
  transition:width .16s ease,height .16s ease !important;
}
#cursor-lime-dot.is-link{
  width:18px !important;
  height:18px !important;
}
@media (hover:none), (pointer:coarse){
  #cursor-lime-dot{display:none !important}
}