:root{
  --black:#050709;
  --black-soft:#080c11;
  --ink:#20242a;
  --muted:#626a73;
  --white:#f7f7f5;
  --off:#f4f3ef;
  --off-2:#e9ebed;
  --blue:#1687ff;
  --blue-deep:#0a60bd;
  --line-dark:rgba(255,255,255,.12);
  --line-light:rgba(20,26,32,.13);
  --radius:22px;
  --container:min(1180px,calc(100% - 96px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--black)}
body{margin:0;font-family:"Nunito Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--black);color:var(--white);font-weight:700;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
button,input{font:inherit}button{border:0}.container{width:var(--container);margin-inline:auto;position:relative;z-index:3}.section-dark{background:var(--black);color:var(--white)}.section-light{background:var(--off);color:var(--ink)}.section-light-alt{background:var(--off-2);color:var(--ink)}section{position:relative;overflow:hidden}
.eyebrow{margin:0 0 20px;text-transform:uppercase;letter-spacing:.12em;font-size:.84rem;font-weight:900;line-height:1.3;opacity:.66}
h1,h2,h3,p{margin-top:0}h1,h2,h3{letter-spacing:-.045em}h1{font-size:clamp(3.25rem,6vw,6.1rem);line-height:.98;margin-bottom:28px;font-weight:900;max-width:980px}h1 span,h2 span{color:var(--blue)}h2{font-size:clamp(2.6rem,4.45vw,4.7rem);line-height:1.02;margin-bottom:22px;font-weight:900}h3{font-size:clamp(1.55rem,2vw,2rem);line-height:1.08;font-weight:900;margin-bottom:14px}p{font-size:1.08rem;line-height:1.58;font-weight:700}

/* HERO */
.hero{min-height:100svh;height:100svh;display:flex;align-items:center;isolation:isolate;background:#040609}
.hero-bg{position:absolute;inset:-4%;z-index:-4;background-image:url("https://images.unsplash.com/photo-1531733009302-d62983216cf8?auto=format&fit=crop&fm=jpg&q=82&w=2600");background-size:cover;background-position:center 58%;filter:saturate(.48) brightness(.48) contrast(1.12);transform:scale(1.04);animation:heroDrift 18s ease-in-out infinite alternate;will-change:transform,background-position}
.hero-glow{position:absolute;inset:-10%;z-index:-3;background:radial-gradient(ellipse at 78% 24%,rgba(22,135,255,.18),transparent 35%),radial-gradient(ellipse at 25% 76%,rgba(22,135,255,.06),transparent 38%);animation:heroGlow 10s ease-in-out infinite alternate}
.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(3,6,9,.97) 0%,rgba(3,6,9,.88) 43%,rgba(4,10,17,.38) 76%,rgba(3,6,9,.58) 100%),linear-gradient(180deg,rgba(5,7,9,.20),rgba(5,7,9,.08) 60%,#050709 100%)}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--line-dark)}
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:72px;align-items:center}
.hero-copy{max-width:930px}.hero-lead{font-size:clamp(1.13rem,1.55vw,1.36rem);max-width:730px;color:rgba(247,247,245,.79);margin-bottom:29px}.hero-principles{display:flex;align-items:center;gap:14px;color:rgba(247,247,245,.72);font-weight:900;font-size:.98rem}.hero-principles i{width:28px;height:1px;background:rgba(255,255,255,.3)}.signature{font-family:"Allura",cursive;font-size:3.3rem;line-height:1;color:rgba(255,255,255,.9);margin-top:30px;transform:rotate(-3deg);width:max-content}.hero-note{justify-self:end;border-left:1px solid rgba(255,255,255,.30);padding-left:24px;display:grid;gap:7px;font-size:1rem;color:rgba(255,255,255,.66);line-height:1.35}.hero-note strong{color:#fff;font-weight:900;font-size:1.08rem}
@keyframes heroDrift{0%{transform:scale(1.04) translate3d(0,0,0);background-position:center 58%}100%{transform:scale(1.075) translate3d(-.8%,.5%,0);background-position:52% 55%}}
@keyframes heroGlow{0%{opacity:.7;transform:translate3d(-1%,0,0)}100%{opacity:1;transform:translate3d(2%,1%,0)}}

/* TRUE PARALLAX TRANSITIONS */
.transition-band{height:154px;position:relative;overflow:hidden;background:var(--black);isolation:isolate}
.transition-band::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(5,7,9,.98),transparent 28%,transparent 72%,rgba(5,7,9,.96))}
.transition-dark-light::after{background:linear-gradient(180deg,#050709 0%,rgba(5,7,9,.25) 30%,rgba(244,243,239,.2) 74%,var(--off) 100%)}
.transition-light-dark::after{background:linear-gradient(180deg,var(--off) 0%,rgba(244,243,239,.16) 28%,rgba(5,7,9,.18) 74%,#050709 100%)}
.transition-light-dark:has(.ridge-layer)::after{background:linear-gradient(180deg,var(--off-2) 0%,rgba(233,235,237,.14) 27%,rgba(5,7,9,.16) 72%,#050709 100%)}
.parallax-layer{position:absolute;inset:-90px -5%;will-change:transform;transform:translate3d(0,0,0);z-index:1}
.mountains-layer{background-image:linear-gradient(90deg,rgba(5,7,9,.84),rgba(14,44,73,.24),rgba(244,243,239,.05)),url("https://images.unsplash.com/photo-1531733009302-d62983216cf8?auto=format&fit=crop&fm=jpg&q=78&w=2200");background-size:cover;background-position:center 67%;filter:saturate(.45) brightness(.72)}
.soft-grid-layer{background:radial-gradient(circle at 30% 40%,rgba(22,135,255,.18),transparent 34%),linear-gradient(125deg,#070a0e,#111821 55%,#050709)}
.soft-grid-layer::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,transparent,#000 35%,#000 70%,transparent)}
.blue-haze-layer{background:radial-gradient(ellipse at 70% 48%,rgba(22,135,255,.30),transparent 32%),linear-gradient(110deg,#050709,#0c1824 58%,#dfe5ea 100%)}
.ridge-layer{background:linear-gradient(100deg,rgba(5,7,9,.9),rgba(9,28,45,.5),rgba(5,7,9,.92)),url("https://images.unsplash.com/photo-1531733009302-d62983216cf8?auto=format&fit=crop&fm=jpg&q=70&w=2200");background-size:cover;background-position:center 72%;filter:saturate(.35) brightness(.56)}
.light-version{background:radial-gradient(circle at 75% 35%,rgba(22,135,255,.14),transparent 32%),linear-gradient(120deg,#f4f3ef,#e6e8eb 55%,#eef0f2)}
.light-version::before{background-image:linear-gradient(rgba(20,26,32,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(20,26,32,.04) 1px,transparent 1px)}
.portrait-transition-layer{background:linear-gradient(120deg,#f4f3ef 0%,#dfe4e8 40%,#0b1016 84%,#050709 100%)}
.transition-to-about{height:178px}.transition-to-about::after{background:linear-gradient(180deg,var(--off) 0%,rgba(244,243,239,.10) 28%,rgba(5,7,9,.18) 76%,#050709 100%)}

/* VISION */
.vision{min-height:88svh;padding:112px 0 120px;display:flex;align-items:center}
.vision-layout{display:grid;grid-template-columns:1.02fr .98fr;gap:80px;align-items:center}.section-copy p{max-width:620px;color:#4c535b}.section-copy h2{max-width:760px}.concept-line{display:block;margin-top:30px;padding-top:23px;border-top:1px solid var(--line-light);font-size:1.18rem;color:#20242a;font-weight:900;max-width:590px}.vision-art{min-height:500px;display:flex;align-items:center;justify-content:center;flex-direction:column}.vision-svg{width:min(100%,680px);height:auto;overflow:visible}.svg-grid path{fill:none;stroke:#20242a;stroke-width:1}.flow-line{fill:none;stroke:url(#flow);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:10 12;animation:flowDash 7s linear infinite}.flow-2{animation-duration:8.5s}.flow-3{animation-duration:10s}.svg-points circle{fill:#fff;stroke:#1687ff;stroke-width:3}.svg-points .center-point{fill:#1687ff;filter:drop-shadow(0 0 16px rgba(22,135,255,.35));animation:centerPulse 2.8s ease-in-out infinite}.svg-labels text{font-family:"Nunito Sans",sans-serif;font-size:20px;font-weight:900;fill:#30363d}.svg-labels .center-label{fill:#1687ff;font-size:21px}.vision-art-caption{margin:8px 0 0;font-size:1.05rem;color:#6a7178}.vision-art-caption strong{color:#20242a}@keyframes flowDash{to{stroke-dashoffset:-88}}@keyframes centerPulse{50%{transform:scale(1.14);transform-origin:338px 260px}}

/* METHOD */
.method{min-height:100svh;display:flex;align-items:center;padding:110px 0;background:#050709}.method-inner{width:100%}.section-heading{max-width:790px;margin-bottom:58px}.section-heading.compact{margin-bottom:68px}.section-heading>p:last-child{color:rgba(247,247,245,.66);font-size:1.16rem}.section-light-alt .section-heading>p:last-child{color:#59616a}.method-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}.method-grid article{padding:46px 38px 50px 0;min-height:248px}.method-grid article:not(:first-child){padding-left:38px}.method-grid p{color:rgba(247,247,245,.68);max-width:305px;margin:0}.step-number{display:block;color:var(--blue);font-size:1rem;font-weight:900;margin-bottom:28px}.method-arrow{font-size:2.2rem;color:rgba(255,255,255,.24);font-weight:700}

/* WORK */
.work{padding:118px 0 126px}.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}.work-card{background:#f7f7f5;border:1px solid rgba(20,26,32,.14);border-radius:var(--radius);padding:38px 40px 40px;min-height:324px;display:flex;flex-direction:column;align-items:flex-start}.work-index{font-size:1rem;font-weight:900;color:var(--blue);margin-bottom:34px}.work-card p{color:#555c64;max-width:500px;margin-bottom:32px}.work-card .cta-button{margin-top:auto}

/* CTAs */
.cta-button{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:54px;border-radius:999px;padding:0 24px;font-weight:900;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,background .25s ease,color .25s ease,border-color .25s ease}.cta-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.2,.8,.2,1)}.cta-button:hover{transform:translateY(-3px)}.cta-button:hover svg{transform:translateX(5px)}.cta-button:active{transform:translateY(0) scale(.985)}.cta-dark{background:#161a1f;color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.08)}.cta-dark:hover{background:#050709;box-shadow:0 12px 28px rgba(0,0,0,.14)}.cta-blue{background:var(--blue);color:#fff;box-shadow:0 12px 34px rgba(22,135,255,.22)}.cta-blue:hover{background:#0e7df2;box-shadow:0 16px 42px rgba(22,135,255,.32)}.cta-outline-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.82);box-shadow:none}.cta-outline-light:hover{background:#fff;color:#080a0d;border-color:#fff;box-shadow:0 14px 38px rgba(0,0,0,.18)}

/* CASES */
.cases{padding:120px 0 130px}.cases-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:start}.cases-heading{position:relative;margin:0}.cases-heading p:last-child{color:rgba(247,247,245,.66);max-width:480px}.case-list{border-top:1px solid var(--line-dark)}.case-item{border-bottom:1px solid var(--line-dark)}.case-item summary{list-style:none;cursor:pointer;padding:30px 0;display:grid;grid-template-columns:1fr .75fr auto;gap:24px;align-items:center}.case-item summary::-webkit-details-marker{display:none}.case-item summary strong{font-size:1.42rem;font-weight:900}.case-item summary span{font-size:1rem;color:rgba(247,247,245,.58)}.case-item summary b{font-size:1.7rem;font-weight:700;color:var(--blue);transition:transform .2s ease}.case-item[open] summary b{transform:rotate(45deg)}.case-content{padding:0 0 30px;max-width:650px}.case-content p{color:rgba(247,247,245,.70);margin:0}

/* EXPERIENCE STORY */
.experience-story{padding:118px 0 130px}.story-heading{max-width:790px;margin-bottom:58px}.story-stack{border-top:1px solid var(--line-light)}.story-card{display:grid;grid-template-columns:76px minmax(0,1fr) 180px;gap:34px;align-items:center;padding:46px 0;border-bottom:1px solid var(--line-light);position:relative}.story-index{font-size:1rem;font-weight:900;color:var(--blue);align-self:start;padding-top:5px}.story-kicker{font-size:.95rem;text-transform:uppercase;letter-spacing:.11em;color:#737a82;margin-bottom:12px;font-weight:900}.story-card h3{font-size:clamp(1.8rem,2.65vw,2.75rem);max-width:760px;margin-bottom:13px;color:#20242a}.story-card p:last-child{color:#5b626a;max-width:760px;margin:0}.story-mark{font-size:clamp(1.55rem,2.5vw,2.4rem);line-height:1;text-align:right;color:#20242a;font-weight:900;letter-spacing:-.04em}.story-card-2 .story-mark{color:#1687ff}.story-card-3{background:linear-gradient(90deg,transparent,rgba(22,135,255,.04),transparent)}

/* ABOUT - final */
.about{min-height:86svh;padding:118px 0 96px;display:flex;align-items:center;isolation:isolate;background:#050709}.about-photo{position:absolute;inset:0;z-index:-3;background-image:url("assets/vinicius-oliveira.jpeg");background-repeat:no-repeat;background-size:cover;background-position:78% 31%;filter:grayscale(1) contrast(1.05) brightness(.84);opacity:.68}.about-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#050709 0%,rgba(5,7,9,.97) 34%,rgba(5,7,9,.80) 52%,rgba(5,7,9,.24) 76%,rgba(5,7,9,.48) 100%),linear-gradient(180deg,#050709 0%,rgba(5,7,9,.08) 18%,rgba(5,7,9,.12) 74%,#050709 100%)}.about-inner{display:flex;align-items:center;min-height:570px}.about-copy{max-width:650px}.about-copy p{color:rgba(247,247,245,.76);max-width:570px}.about-copy .cta-button{margin-top:20px}.about-mobile-portrait{display:none}

/* FLOATING */
.floating-contact{position:fixed;right:28px;bottom:28px;z-index:40;width:62px;height:62px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 38px rgba(22,135,255,.34);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}.floating-contact svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.floating-contact:hover{transform:translateY(-4px) scale(1.045);box-shadow:0 18px 48px rgba(22,135,255,.46)}.floating-contact:active{transform:translateY(0) scale(.97)}

/* MODAL */
.modal{position:fixed;inset:0;z-index:100;background:#07090c;color:#fff;display:none}.modal.is-open{display:block}body.modal-open{overflow:hidden}.modal-close{position:absolute;right:30px;top:25px;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.07);color:#fff;font-size:2rem;line-height:1;cursor:pointer;z-index:3;transition:background .2s ease,transform .2s ease}.modal-close:hover{background:rgba(255,255,255,.13);transform:rotate(5deg)}.modal-layout{min-height:100svh;display:grid;grid-template-columns:minmax(340px,.78fr) minmax(0,1.22fr)}.modal-intro{padding:clamp(54px,7vw,105px);background:#0b0f14;border-right:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column}.modal-intro h2{font-size:clamp(2.65rem,4.6vw,4.8rem);margin-bottom:28px}.modal-intro>p:not(.eyebrow){color:rgba(255,255,255,.62);max-width:490px}.modal-progress-list{margin-top:auto;border-top:1px solid rgba(255,255,255,.12)}.progress-item{padding:17px 0;display:grid;grid-template-columns:46px 1fr;gap:10px;border-bottom:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.35)}.progress-item span{font-size:.92rem}.progress-item strong{font-size:1rem}.progress-item.is-active,.progress-item.is-done{color:#fff}.progress-item.is-active span{color:var(--blue)}.modal-form{padding:clamp(70px,9vw,140px) clamp(46px,9vw,145px);display:flex;flex-direction:column;min-height:100svh}.form-topline{display:flex;justify-content:space-between;gap:20px;color:rgba(255,255,255,.58);font-size:.96rem;font-weight:900;margin-bottom:18px}.progress-track{height:2px;background:rgba(255,255,255,.12);margin-bottom:clamp(65px,9vh,110px)}.progress-track i{display:block;height:100%;width:25%;background:var(--blue);transition:width .35s cubic-bezier(.2,.8,.2,1)}.form-step{display:none;max-width:760px}.form-step.is-active{display:block;animation:stepIn .32s ease both}@keyframes stepIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.form-step label,.form-step legend{display:block;font-size:clamp(2.2rem,4vw,4.3rem);line-height:1.02;letter-spacing:-.045em;font-weight:900;margin-bottom:20px}.form-step>p,.form-step fieldset>p{color:rgba(255,255,255,.57);font-size:1.1rem;margin-bottom:38px}.form-step input[type="text"],.form-step input[type="tel"]{width:100%;border:0;border-bottom:2px solid rgba(255,255,255,.25);background:transparent;color:#fff;padding:18px 0;font-size:1.5rem;font-weight:800;outline:none;border-radius:0}.form-step input::placeholder{color:rgba(255,255,255,.24)}.form-step input:focus{border-bottom-color:var(--blue)}.form-step fieldset{border:0;padding:0;margin:0}.form-step legend{padding:0}.service-options{display:grid;gap:14px}.service-options label{margin:0;font-size:inherit;letter-spacing:normal;line-height:1.2}.service-options label>input{position:absolute;opacity:0;pointer-events:none}.service-options label>span{display:block;padding:20px 22px;border:1px solid rgba(255,255,255,.15);border-radius:16px;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease}.service-options label>span:hover{border-color:rgba(255,255,255,.32);transform:translateY(-1px)}.service-options label>span strong{display:block;font-size:1.13rem;font-weight:900;margin-bottom:5px}.service-options label>span small{font-size:.99rem;color:rgba(255,255,255,.52);font-weight:700}.service-options input:checked+span{border-color:var(--blue);background:rgba(22,135,255,.09)}.form-actions{margin-top:auto;display:flex;align-items:center;gap:16px;padding-top:46px}.form-back{min-height:54px;padding:0 10px;background:transparent;color:rgba(255,255,255,.58);font-weight:900;cursor:pointer}.form-note{font-size:.94rem;color:rgba(255,255,255,.5);margin:16px 0 0}

@media (max-width:980px){
  :root{--container:min(100% - 48px,780px)}
  .hero-inner{grid-template-columns:1fr}.hero-note{justify-self:start}
  .vision{min-height:auto}.vision-layout,.cases-layout{grid-template-columns:1fr;gap:58px}.vision-art{min-height:430px}
  .method{min-height:auto;padding:105px 0}.method-grid{grid-template-columns:1fr;border-bottom:0}.method-grid article,.method-grid article:not(:first-child){padding:34px 0;border-bottom:1px solid var(--line-dark);min-height:0}.method-arrow{display:none}
  .work-grid{grid-template-columns:1fr}
  .story-card{grid-template-columns:58px 1fr 130px;gap:24px}
  .about-photo{background-position:76% 31%;opacity:.60}.about-shade{background:linear-gradient(90deg,#050709 0%,rgba(5,7,9,.97) 38%,rgba(5,7,9,.70) 68%,rgba(5,7,9,.44) 100%),linear-gradient(180deg,#050709 0%,transparent 30%,#050709 100%)}
  .modal-layout{grid-template-columns:1fr}.modal-intro{display:none}.modal-form{padding:90px 42px 42px}
}

@media (max-width:640px){
  :root{--container:calc(100% - 36px)}
  h1{font-size:clamp(2.85rem,13vw,4.1rem)}h2{font-size:clamp(2.3rem,10vw,3.45rem)}
  .eyebrow{font-size:.77rem;margin-bottom:17px}
  .hero{height:100svh;min-height:690px}.hero-bg{background-position:62% 58%}.hero-shade{background:linear-gradient(90deg,rgba(3,6,9,.96),rgba(3,6,9,.68)),linear-gradient(180deg,rgba(5,7,9,.16),#050709 100%)}.hero-lead{font-size:1.05rem}.hero-principles{flex-wrap:wrap}.signature{font-size:2.7rem}.hero-note{display:none}
  .transition-band{height:92px}.transition-to-about{height:112px}
  .vision,.work,.cases,.experience-story{padding:86px 0 92px}.vision-art{min-height:330px}.vision-svg{width:112%;margin-left:-6%}.svg-labels text{font-size:18px}.concept-line{font-size:1.08rem}
  .method{padding:90px 0}.section-heading{margin-bottom:42px}.method-grid article,.method-grid article:not(:first-child){padding:31px 0}
  .work-card{padding:30px 27px;min-height:0}.work-index{margin-bottom:24px}
  .case-item summary{grid-template-columns:1fr auto;gap:12px}.case-item summary span{grid-column:1}.case-item summary b{grid-row:1/3;grid-column:2;align-self:center}
  .story-heading{margin-bottom:42px}.story-card{grid-template-columns:42px 1fr;gap:16px;padding:34px 0}.story-mark{grid-column:2;text-align:left;font-size:1.35rem;margin-top:3px}.story-card h3{font-size:1.7rem}.story-kicker{font-size:.83rem}
  .about{display:block;min-height:auto;padding:88px 0 0}.desktop-photo{display:none}.about-shade{background:linear-gradient(180deg,#050709 0%,#050709 100%)}.about-inner{min-height:auto;padding-bottom:58px}.about-copy{max-width:100%}.about-copy p{max-width:100%}.about-mobile-portrait{display:block;position:relative;height:72svh;min-height:520px;background-image:linear-gradient(180deg,#050709 0%,transparent 22%,transparent 72%,#050709 100%),url("assets/vinicius-oliveira.jpeg");background-repeat:no-repeat;background-size:cover;background-position:center 22%;filter:grayscale(1);overflow:hidden}.about-mobile-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,9,.15),transparent 35%,transparent 70%,rgba(5,7,9,.08))}.mobile-signature{position:absolute;left:24px;bottom:54px;z-index:2;font-family:"Allura",cursive;font-size:3.4rem;color:#fff;transform:rotate(-4deg);text-shadow:0 3px 20px rgba(0,0,0,.5)}
  .floating-contact{right:18px;bottom:18px;width:56px;height:56px}
  .modal-form{padding:78px 22px 28px}.modal-close{right:18px;top:16px}.form-step label,.form-step legend{font-size:2.45rem}.form-actions{padding-top:34px}.form-actions .cta-button{margin-left:auto}.form-topline{font-size:.86rem}.progress-track{margin-bottom:58px}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-bg,.hero-glow,.flow-line,.center-point{animation:none!important}.parallax-layer{transform:none!important}.cta-button,.cta-button svg,.floating-contact,.modal-close,.service-options label>span{transition:none!important}.form-step.is-active{animation:none!important}}

/* --- Fine-tuning overrides: motion, method alignment, final block, floating CTA --- */
.hero-inner{min-height:100svh;padding:88px 0}
.hero-bg{animation:heroKenBurns 26s ease-in-out infinite alternate!important;transform-origin:center center}
@keyframes heroKenBurns{
  0%{transform:scale(1.06) translate3d(0,0,0);background-position:58% 58%}
  50%{transform:scale(1.11) translate3d(-1.2%,.7%,0);background-position:55% 55%}
  100%{transform:scale(1.16) translate3d(-2.4%,1.2%,0);background-position:52% 52%}
}
.hero-glow{animation:heroGlowEnhanced 12s ease-in-out infinite alternate!important}
@keyframes heroGlowEnhanced{
  0%{opacity:.62;transform:translate3d(-1.5%,0,0) scale(1)}
  100%{opacity:1;transform:translate3d(2%,1.2%,0) scale(1.05)}
}

.method{padding:0;min-height:100svh}
.method-inner{display:grid;align-content:center;min-height:100svh;padding:112px 0}
.method-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.method-grid article,
.method-grid article:not(:first-child){padding:42px 32px 44px!important;min-height:0;display:flex;flex-direction:column;justify-content:flex-start}
.method-grid article+article{border-left:1px solid var(--line-dark)}
.method-grid p{max-width:335px}
.method-arrow{display:none!important}

.about{min-height:100svh;padding:0;display:flex;align-items:center}
.about-photo{background-position:86% 28%!important;filter:grayscale(1) contrast(1.02) brightness(.96)!important;opacity:.82!important}
.about-shade{background:linear-gradient(90deg,#050709 0%,rgba(5,7,9,.95) 31%,rgba(5,7,9,.68) 54%,rgba(5,7,9,.18) 79%,rgba(5,7,9,.30) 100%),linear-gradient(180deg,#050709 0%,rgba(5,7,9,.06) 22%,rgba(5,7,9,.10) 74%,#050709 100%)!important}
.about-inner{min-height:100svh;padding:110px 0 96px}
.about-copy{max-width:720px}
.about-copy .eyebrow,
.about-copy p{display:none!important}
.about-signature{margin-bottom:24px;font-size:3.85rem;color:rgba(255,255,255,.94);text-shadow:0 4px 22px rgba(0,0,0,.22)}
.about-copy .cta-button{margin-top:34px}

.floating-contact{right:30px;bottom:30px;width:76px;height:76px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,#2497ff 0%,#0a76ee 100%);box-shadow:0 18px 52px rgba(22,135,255,.42)}
.floating-contact svg{width:32px;height:32px;stroke-width:1.8}
.floating-contact:hover{transform:translateY(-4px) scale(1.055);box-shadow:0 22px 56px rgba(22,135,255,.52)}

@media (max-width:980px){
  .method{min-height:auto;padding:96px 0}
  .method-inner{min-height:auto;padding:0}
  .method-grid{grid-template-columns:1fr}
  .method-grid article+article{border-left:0}
  .about-photo{background-position:82% 28%!important;opacity:.76!important}
}

@media (max-width:640px){
  .hero-inner{padding:64px 0}
  .hero-bg{animation:heroKenBurnsMobile 20s ease-in-out infinite alternate!important}
  @keyframes heroKenBurnsMobile{
    0%{transform:scale(1.08) translate3d(0,0,0);background-position:64% 56%}
    100%{transform:scale(1.14) translate3d(-1.6%,.8%,0);background-position:60% 52%}
  }
  .about{padding:88px 0 0}
  .floating-contact{right:18px;bottom:18px;width:66px;height:66px}
  .floating-contact svg{width:28px;height:28px}
}

@media (prefers-reduced-motion:reduce){
  .hero-bg,.hero-glow{animation:none!important}
}

/* =========================================================
   UX / STORYTELLING REFINEMENT V3
   - calmer typography
   - consistent containers and spacing
   - photo section first / mountain section last
   - method alignment repaired
   ========================================================= */
:root{
  --container:min(1120px,calc(100% - 112px));
  --radius:18px;
}

.eyebrow{
  margin-bottom:18px;
  font-size:.82rem;
  letter-spacing:.095em;
  line-height:1.35;
}
h1,h2,h3{letter-spacing:-.035em}
h1{
  font-size:clamp(3.2rem,5.15vw,5.25rem);
  line-height:1.01;
  margin-bottom:25px;
  max-width:850px;
}
h2{
  font-size:clamp(2.55rem,3.8vw,4rem);
  line-height:1.035;
  margin-bottom:20px;
}
h3{
  font-size:clamp(1.45rem,1.75vw,1.82rem);
  letter-spacing:-.025em;
  margin-bottom:12px;
}
p{font-size:1rem;line-height:1.56;font-weight:700}

/* First section: portrait / personal positioning */
.about{
  min-height:100svh;
  height:100svh;
  padding:0;
}
.about-inner{
  min-height:100svh;
  height:100%;
  padding:96px 0;
  align-items:center;
}
.about-copy{max-width:650px}
.about-copy h1{max-width:650px}
.about-photo{
  background-position:88% 28%!important;
  opacity:.84!important;
  filter:grayscale(1) contrast(1.02) brightness(.98)!important;
}
.about-shade{
  background:
    linear-gradient(90deg,#050709 0%,rgba(5,7,9,.96) 30%,rgba(5,7,9,.73) 52%,rgba(5,7,9,.16) 80%,rgba(5,7,9,.24) 100%),
    linear-gradient(180deg,rgba(5,7,9,.72) 0%,rgba(5,7,9,.03) 25%,rgba(5,7,9,.05) 76%,#050709 100%)!important;
}
.about-signature{
  margin:0 0 24px;
  font-size:3.5rem;
  color:rgba(255,255,255,.94);
}
.about-copy .cta-button{margin-top:30px}

/* Transitions: enough depth, less visual bulk */
.transition-band{height:118px}
.transition-to-about{height:118px}

/* Vision */
.vision{
  min-height:82svh;
  padding:104px 0 110px;
}
.vision-layout{gap:70px}
.section-copy h2{max-width:700px}
.section-copy p{max-width:590px}
.concept-line{
  margin-top:26px;
  padding-top:20px;
  font-size:1.08rem;
}
.vision-art{min-height:440px}
.vision-svg{width:min(100%,620px)}
.svg-labels text{font-size:18px}
.svg-labels .center-label{font-size:19px}
.vision-art-caption{font-size:1rem}

/* Method: enforce centered container and balanced grid */
.method{
  min-height:100svh;
  padding:0;
}
.method .container.method-inner{
  width:var(--container)!important;
  max-width:none!important;
  margin-inline:auto!important;
  min-height:100svh;
  padding:96px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.method .section-heading.compact{
  width:100%;
  max-width:780px;
  margin:0 auto 56px;
  text-align:center;
}
.method .section-heading.compact>p:last-child{
  max-width:620px;
  margin-inline:auto;
  font-size:1.04rem;
}
.method-grid{
  width:100%;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
}
.method-grid article,
.method-grid article:not(:first-child){
  padding:38px 34px 40px!important;
  min-height:205px;
}
.method-grid article:first-child{padding-left:0!important;padding-right:42px!important}
.method-grid article:last-child{padding-right:0!important;padding-left:42px!important}
.method-grid article+article{border-left:1px solid var(--line-dark)}
.method-grid p{max-width:290px;font-size:.98rem;line-height:1.52}
.step-number{font-size:.92rem;margin-bottom:22px}

/* Work */
.work{padding:104px 0 112px}
.section-heading{max-width:720px;margin-bottom:50px}
.section-heading>p:last-child{font-size:1.04rem}
.work-grid{gap:22px}
.work-card{padding:34px 35px 36px;min-height:292px}
.work-index{font-size:.92rem;margin-bottom:26px}
.work-card p{font-size:.98rem;margin-bottom:28px}
.cta-button{min-height:52px;padding:0 22px;gap:13px;font-size:.96rem}

/* Cases */
.cases{padding:106px 0 114px}
.cases-layout{grid-template-columns:.82fr 1.18fr;gap:76px}
.cases-heading p:last-child{font-size:1rem}
.case-item summary{padding:26px 0;gap:20px}
.case-item summary strong{font-size:1.28rem}
.case-item summary span{font-size:.94rem}
.case-content{padding-bottom:25px}
.case-content p{font-size:.98rem}

/* Experience: quieter, more editorial */
.experience-story{padding:106px 0 116px}
.story-heading{max-width:720px;margin-bottom:50px}
.story-card{
  grid-template-columns:62px minmax(0,1fr) 145px;
  gap:28px;
  padding:39px 0;
}
.story-index{font-size:.92rem}
.story-kicker{font-size:.88rem;letter-spacing:.08em;margin-bottom:9px}
.story-card h3{
  font-size:clamp(1.65rem,2.2vw,2.3rem);
  max-width:690px;
  margin-bottom:10px;
}
.story-card p:last-child{font-size:.98rem;max-width:700px}
.story-mark{font-size:clamp(1.35rem,2vw,2rem)}

/* Final mountain statement */
.hero{
  min-height:100svh;
  height:100svh;
}
.hero-inner{
  min-height:100svh;
  padding:92px 0;
  display:flex;
  align-items:center;
}
.hero-copy{max-width:820px}
.hero-copy h2{
  font-size:clamp(3rem,4.8vw,4.75rem);
  max-width:800px;
  margin-bottom:24px;
}
.hero-lead{
  font-size:1.08rem;
  max-width:620px;
  margin-bottom:24px;
}
.hero-principles{font-size:.92rem;gap:12px}
.hero-principles i{width:24px}
.hero-copy>.signature{font-size:3rem;margin-top:25px}
.hero-cta{margin-top:30px}

/* Floating CTA */
.floating-contact{width:72px;height:72px}

@media (max-width:980px){
  :root{--container:min(100% - 56px,780px)}
  .about{height:auto;min-height:100svh}
  .about-inner{min-height:100svh;height:auto}
  .vision{min-height:auto}
  .method{min-height:auto;padding:92px 0}
  .method .container.method-inner{width:var(--container)!important;min-height:auto;padding:0}
  .method .section-heading.compact{text-align:left;margin:0 0 44px}
  .method .section-heading.compact>p:last-child{margin-inline:0}
  .method-grid{grid-template-columns:1fr;border-bottom:0}
  .method-grid article,
  .method-grid article:not(:first-child),
  .method-grid article:first-child,
  .method-grid article:last-child{
    padding:30px 0!important;
    min-height:0;
    border-left:0;
    border-bottom:1px solid var(--line-dark);
  }
  .method-grid p{max-width:520px}
  .cases-layout{grid-template-columns:1fr;gap:50px}
  .story-card{grid-template-columns:52px 1fr 115px;gap:22px}
  .hero-inner{display:flex}
}

@media (max-width:640px){
  :root{--container:calc(100% - 38px)}
  h1{font-size:clamp(2.7rem,11.8vw,3.7rem)}
  h2{font-size:clamp(2.25rem,9vw,3.15rem)}
  p{font-size:.98rem}
  .eyebrow{font-size:.8rem;letter-spacing:.08em}

  .about{display:block;height:auto;min-height:auto;padding:76px 0 0}
  .about-inner{min-height:auto;height:auto;padding:0 0 52px}
  .about-copy h1{max-width:100%}
  .about-signature{font-size:3.05rem;margin-bottom:20px}
  .about-mobile-portrait{height:68svh;min-height:500px;background-position:center 20%}
  .mobile-signature{font-size:3.15rem;bottom:44px}

  .transition-band,.transition-to-about{height:84px}
  .vision,.work,.cases,.experience-story{padding:78px 0 84px}
  .vision-art{min-height:300px}
  .vision-svg{width:108%;margin-left:-4%}
  .svg-labels text{font-size:17px}

  .method{padding:78px 0}
  .method .section-heading.compact{margin-bottom:32px}
  .section-heading{margin-bottom:38px}
  .work-card{padding:28px 25px;min-height:0}

  .story-card{grid-template-columns:36px 1fr;gap:14px;padding:30px 0}
  .story-mark{grid-column:2;text-align:left;margin-top:2px;font-size:1.25rem}
  .story-card h3{font-size:1.58rem}
  .story-kicker{font-size:.82rem}

  .hero{min-height:100svh;height:100svh}
  .hero-inner{min-height:100svh;padding:72px 0}
  .hero-copy h2{font-size:clamp(2.65rem,11vw,3.65rem)}
  .hero-lead{font-size:1rem}
  .hero-principles{flex-wrap:wrap}
  .hero-copy>.signature{font-size:2.7rem}
  .floating-contact{width:64px;height:64px}
}

/* =========================================================
   V4 — authority, journey and UX refinement
   ========================================================= */
:root{
  --container:min(1120px,calc(100% - 112px));
  --blue:#1687ff;
  --off:#f4f3ef;
  --off-2:#ebecea;
}

/* First frame — portrait pushed to the right */
.about-photo{
  background-size:auto 122%!important;
  background-position:108% 44%!important;
  opacity:.82!important;
  filter:grayscale(1) contrast(1.03) brightness(.96)!important;
}
.about-shade{
  background:
    linear-gradient(90deg,#050709 0%,rgba(5,7,9,.96) 34%,rgba(5,7,9,.74) 54%,rgba(5,7,9,.14) 78%,rgba(5,7,9,.23) 100%),
    linear-gradient(180deg,rgba(5,7,9,.46) 0%,rgba(5,7,9,.02) 30%,rgba(5,7,9,.08) 76%,#050709 100%)!important;
}
.about-copy{max-width:640px}
.about-copy h1{max-width:640px}
.journey-cta{margin-top:30px;text-decoration:none}
.journey-cta svg{stroke-width:1.45}

/* Stronger, clearer parallax bands */
.transition-band{height:164px!important;isolation:isolate}
.transition-band .parallax-layer{inset:-170px -6%!important;transform:translate3d(0,0,0) scale(1.12);will-change:transform}
.transition-band::after{pointer-events:none}
.transition-light-light{background:var(--off)}
.transition-light-light::after{background:linear-gradient(180deg,var(--off) 0%,rgba(244,243,239,.38) 25%,rgba(235,236,234,.30) 72%,var(--off) 100%)}
.final-transition{height:188px!important}

/* Journey wireframe */
.vision{min-height:88svh}
.vision-art{min-height:500px}
.journey-wireframe{width:min(100%,690px);height:auto;overflow:visible}
.wf-grid path{fill:none;stroke:#20242a;stroke-width:1;opacity:.06}
.wf-route path{fill:none;stroke:#a9afb5;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wf-route .wf-route-accent{stroke:var(--blue);stroke-width:2.4;stroke-dasharray:1 18;stroke-linecap:round;opacity:.82}
.wf-node rect,.wf-mini rect{fill:#f8f8f6;stroke:#c9cdd1;stroke-width:1.25}
.wf-node text,.wf-mini text{font-family:"Nunito Sans",sans-serif;fill:#737981;font-size:13px;font-weight:900;letter-spacing:.06em}
.wf-node .wf-title,.wf-mini text:first-of-type{fill:#20242a;font-size:17px;letter-spacing:-.02em}
.wf-mini path{stroke:#c9cdd1;stroke-width:1.5;stroke-dasharray:5 8}
.wf-mini .wf-small{fill:#81878e;font-size:12px;letter-spacing:0}
.wf-mini .wf-performance{fill:#eef6ff;stroke:#1687ff}
.vision-art-caption{max-width:570px;text-align:center;line-height:1.5}

/* Method — restrained and aligned */
.method .section-heading.compact{max-width:720px;margin:0 auto 52px!important;text-align:center!important}
.method .section-heading.compact>p:last-child{max-width:560px;margin-inline:auto!important}
.method-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.method-grid article,.method-grid article:not(:first-child),.method-grid article:first-child,.method-grid article:last-child{
  padding:36px 34px 38px!important;
  min-height:198px!important;
  border-bottom:0!important;
}
.method-grid article:first-child{padding-left:0!important;padding-right:40px!important}
.method-grid article:last-child{padding-right:0!important;padding-left:40px!important}
.method-grid h3{font-size:1.65rem}
.method-grid p{font-size:.98rem;line-height:1.5;max-width:290px}

/* Knowledge is authority, not a service catalogue */
.knowledge{padding:112px 0 122px}
.knowledge-heading{max-width:820px;margin-bottom:58px}
.knowledge-heading>p:last-child{color:#545b62;max-width:740px}
.knowledge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line-light);border-left:1px solid var(--line-light)}
.knowledge-card{display:grid;grid-template-columns:48px 1fr;gap:20px;padding:34px 34px 36px;border-right:1px solid var(--line-light);border-bottom:1px solid var(--line-light);min-height:235px;background:rgba(255,255,255,.15)}
.knowledge-card.knowledge-wide{grid-column:span 2;grid-template-columns:48px minmax(0,760px);min-height:210px}
.knowledge-index{font-size:.9rem;font-weight:900;color:var(--blue);padding-top:3px}
.knowledge-kicker{margin:0 0 9px;text-transform:uppercase;letter-spacing:.075em;font-size:.82rem;color:#747b82;font-weight:900}
.knowledge-card h3{font-size:clamp(1.5rem,2vw,2rem);color:#20242a;margin-bottom:10px}
.knowledge-card p:last-child{margin:0;color:#59616a;max-width:660px;font-size:.98rem}

/* Actual commercial formats stay clearly separated */
.work-dark{padding:110px 0 118px;background:#050709;color:#fff}
.work-dark .section-heading>p:last-child{color:rgba(247,247,245,.64)}
.work-dark .work-card{background:#090d12;border-color:rgba(255,255,255,.13);box-shadow:none}
.work-dark .work-card h3{color:#fff}
.work-dark .work-card p{color:rgba(247,247,245,.64)}
.work-dark .work-index{color:var(--blue)}
.work-dark .cta-outline-light{border-width:.8px}

/* Cases on a light editorial field */
.cases-light{padding:108px 0 116px;color:#20242a}
.cases-light .cases-heading p:last-child{color:#5e656d}
.cases-light .case-list{border-top:1px solid var(--line-light)}
.cases-light .case-item{border-bottom:1px solid var(--line-light)}
.cases-light .case-item summary strong{color:#20242a}
.cases-light .case-item summary span{color:#70777e}
.cases-light .case-content p{color:#555d65}

/* Vertical timeline */
.experience-story{padding:112px 0 124px}
.timeline-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:92px;align-items:start}
.story-heading{position:sticky;top:80px;margin:0;max-width:470px}
.story-heading>p:last-child{color:#5e656d;max-width:430px}
.timeline{position:relative;padding-left:44px}
.timeline::before{content:"";position:absolute;left:8px;top:16px;bottom:18px;width:1px;background:linear-gradient(180deg,#1687ff 0%,rgba(32,36,42,.16) 28%,rgba(32,36,42,.16) 72%,#20242a 100%)}
.timeline-item{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr) 94px;gap:24px;padding:0 0 54px}
.timeline-item:last-child{padding-bottom:0}
.timeline-dot{position:absolute;left:-42px;top:9px;width:13px;height:13px;border-radius:50%;background:var(--off);border:2px solid #1687ff;box-shadow:0 0 0 7px rgba(22,135,255,.07)}
.timeline-index{font-size:.9rem;font-weight:900;color:var(--blue);padding-top:4px}
.timeline-copy h3{font-size:clamp(1.55rem,2.15vw,2.18rem);color:#20242a;margin-bottom:10px}
.timeline-copy>p:last-child{margin:0;color:#5b626a;font-size:.98rem}
.timeline-mark{align-self:start;text-align:right;font-size:1.04rem;color:#20242a;padding-top:4px}

/* Final mountain frame — movement is intentionally visible */
.final-hero .hero-bg{
  animation:finalMountainMove 14s cubic-bezier(.45,.05,.55,.95) infinite alternate!important;
  transform-origin:58% 55%;
  filter:saturate(.5) brightness(.52) contrast(1.12)!important;
}
@keyframes finalMountainMove{
  0%{transform:scale(1.06) translate3d(0,0,0);background-position:54% 60%}
  100%{transform:scale(1.18) translate3d(-3.2%,1.8%,0);background-position:47% 52%}
}
.final-hero .hero-glow{animation:heroGlowEnhanced 8s ease-in-out infinite alternate!important}
.final-hero .cta-outline-light{border-width:.7px!important;background:rgba(0,0,0,.04)}
.final-hero .cta-outline-light:hover{background:#fff}
.final-hero .hero-copy>.signature,.final-hero .hero-principles{display:none}

/* Floating contact — larger, classic message glyph */
.floating-contact{width:82px!important;height:82px!important;right:30px!important;bottom:30px!important;border:1px solid rgba(255,255,255,.12);background:#1687ff!important;box-shadow:0 18px 48px rgba(22,135,255,.38)!important}
.floating-contact svg{width:34px!important;height:34px!important;stroke-width:1.55!important}
.floating-contact:hover{transform:translateY(-4px) scale(1.04)!important;box-shadow:0 22px 58px rgba(22,135,255,.5)!important}

@media (max-width:980px){
  .about-photo{background-size:auto 114%!important;background-position:103% 42%!important}
  .timeline-layout{grid-template-columns:1fr;gap:50px}
  .story-heading{position:static;max-width:720px}
  .timeline{padding-left:42px}
  .knowledge-grid{grid-template-columns:1fr}
  .knowledge-card.knowledge-wide{grid-column:span 1}
  .method .section-heading.compact{text-align:left!important;margin:0 0 42px!important}
  .method .section-heading.compact>p:last-child{margin-inline:0!important}
  .method-grid{grid-template-columns:1fr!important}
  .method-grid article,.method-grid article:not(:first-child),.method-grid article:first-child,.method-grid article:last-child{padding:28px 0!important;border-left:0!important;border-bottom:1px solid var(--line-dark)!important}
  .method-grid p{max-width:560px}
}

@media (max-width:640px){
  .transition-band{height:110px!important}
  .final-transition{height:130px!important}
  .vision-art{min-height:330px}
  .journey-wireframe{width:112%;margin-left:-6%}
  .knowledge{padding:80px 0 88px}
  .knowledge-heading{margin-bottom:40px}
  .knowledge-card,.knowledge-card.knowledge-wide{grid-template-columns:34px 1fr;gap:14px;padding:28px 20px;min-height:0}
  .knowledge-card h3{font-size:1.5rem}
  .timeline{padding-left:30px}
  .timeline::before{left:4px}
  .timeline-dot{left:-32px}
  .timeline-item{grid-template-columns:34px 1fr;gap:12px;padding-bottom:42px}
  .timeline-mark{grid-column:2;text-align:left;color:var(--blue);font-size:.95rem}
  .final-hero .hero-bg{animation-duration:11s!important}
  .floating-contact{width:70px!important;height:70px!important;right:18px!important;bottom:18px!important}
  .floating-contact svg{width:29px!important;height:29px!important}
}
/* No sticky scrolling: every section follows the document naturally. */
.story-heading{position:static!important;top:auto!important}

/* =========================================================
   V5 — portrait blend + authority without client logos
   ========================================================= */

/* Opening portrait: preserve the editorial elegance of V3,
   push the subject to the right and dissolve the left edge into black. */
.about-photo{
  background-size:cover!important;
  background-position:88% 30%!important;
  opacity:.76!important;
  filter:grayscale(1) contrast(1.04) brightness(.88)!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 24%,rgba(0,0,0,.72) 48%,#000 66%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 24%,rgba(0,0,0,.72) 48%,#000 66%,#000 100%);
}
.about-shade{
  background:
    linear-gradient(90deg,#050709 0%,#050709 23%,rgba(5,7,9,.96) 34%,rgba(5,7,9,.72) 48%,rgba(5,7,9,.30) 66%,rgba(5,7,9,.10) 84%,rgba(5,7,9,.24) 100%),
    linear-gradient(180deg,rgba(5,7,9,.34) 0%,rgba(5,7,9,.02) 32%,rgba(5,7,9,.08) 74%,#050709 100%)!important;
}
.about-copy{position:relative;z-index:4}

/* Repertoire is framed as intellectual/technical authority, never a service list. */
.knowledge-grid-editorial .knowledge-card{background:rgba(255,255,255,.08)}
.knowledge-grid-editorial .knowledge-wide{grid-template-columns:48px minmax(0,820px)}
.knowledge-grid-editorial .knowledge-last{background:linear-gradient(90deg,rgba(22,135,255,.035),rgba(255,255,255,.10))}
.knowledge-manifesto{
  margin:34px 0 0;
  padding-top:28px;
  border-top:1px solid var(--line-light);
  color:#697078;
  font-size:1.08rem;
  max-width:760px;
}
.knowledge-manifesto strong{color:#20242a}

/* Replacement for the former client/CV block: outcome-oriented, conceptual and positive. */
.direction{
  padding:108px 0 118px;
  background:#eceeeb;
  color:#20242a;
}
.direction-layout{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:88px;
  align-items:start;
}
.direction-heading{margin:0;max-width:500px}
.direction-heading>p:last-child{color:#5b6269;max-width:460px}
.direction-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--line-light);
  border-left:1px solid var(--line-light);
}
.direction-grid article{
  min-height:210px;
  padding:30px 30px 32px;
  border-right:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  background:rgba(255,255,255,.18);
}
.direction-grid article>span{
  color:var(--blue);
  font-size:.88rem;
  font-weight:900;
  margin-bottom:32px;
}
.direction-grid h3{font-size:clamp(1.45rem,1.8vw,1.85rem);margin-bottom:9px;color:#20242a}
.direction-grid p{font-size:.96rem;line-height:1.5;color:#60676e;margin:0;max-width:350px}

/* The light-to-light bridge after the new conceptual section should remain subtle. */
.direction + .transition-light-light{background:#eceeeb}
.direction + .transition-light-light::after{
  background:linear-gradient(180deg,#eceeeb 0%,rgba(236,238,235,.38) 28%,rgba(244,243,239,.42) 72%,var(--off) 100%);
}

@media (max-width:980px){
  .about-photo{
    background-size:cover!important;
    background-position:82% 28%!important;
    opacity:.72!important;
  }
  .direction-layout{grid-template-columns:1fr;gap:48px}
  .direction-heading{max-width:720px}
}

@media (max-width:640px){
  .about-photo{display:none!important}
  .direction{padding:78px 0 86px}
  .direction-grid{grid-template-columns:1fr}
  .direction-grid article{min-height:0;padding:27px 22px 29px}
  .direction-grid article>span{margin-bottom:22px}
  .knowledge-manifesto{font-size:1rem;margin-top:28px;padding-top:24px}
}

/* --- V5 tweak: hero photo pushed further right and softer fade into black --- */
.about-photo{
  background-position: 111% 38% !important;
  background-size: auto 116% !important;
  opacity: .78 !important;
  filter: grayscale(1) contrast(1.02) brightness(.90) !important;
}
.about-shade{
  background:
    linear-gradient(90deg,
      #050709 0%,
      rgba(5,7,9,.985) 18%,
      rgba(5,7,9,.93) 34%,
      rgba(5,7,9,.78) 48%,
      rgba(5,7,9,.42) 66%,
      rgba(5,7,9,.16) 80%,
      rgba(5,7,9,.26) 100%),
    linear-gradient(180deg,
      #050709 0%,
      rgba(5,7,9,.04) 20%,
      rgba(5,7,9,.08) 76%,
      #050709 100%) !important;
}

@media (max-width: 1180px){
  .about-photo{
    background-position: 103% 36% !important;
    background-size: cover !important;
  }
}

@media (max-width: 980px){
  .about-photo{
    background-position: 96% 30% !important;
    opacity: .70 !important;
  }
}


/* --- V5 correction: keep portrait to the right without hard cut, restore soft fade into black --- */
.about-photo{
  background-size: cover !important;
  background-position: 90% 34% !important;
  opacity: .76 !important;
  filter: grayscale(1) contrast(1.02) brightness(.88) !important;
}
.about-shade{
  background:
    linear-gradient(90deg,
      #050709 0%,
      rgba(5,7,9,.985) 16%,
      rgba(5,7,9,.94) 31%,
      rgba(5,7,9,.82) 45%,
      rgba(5,7,9,.58) 58%,
      rgba(5,7,9,.32) 70%,
      rgba(5,7,9,.14) 80%,
      rgba(5,7,9,.22) 100%),
    linear-gradient(180deg,
      #050709 0%,
      rgba(5,7,9,.04) 20%,
      rgba(5,7,9,.08) 76%,
      #050709 100%) !important;
}

@media (max-width: 1280px){
  .about-photo{
    background-position: 92% 34% !important;
  }
}

@media (max-width: 980px){
  .about-photo{
    background-position: 84% 28% !important;
    opacity: .70 !important;
  }
}


/* --- V5 hero portrait architecture fix: absolute image layer on the right with real fade --- */
.about{
  overflow:hidden;
}
.about-photo{
  position:absolute !important;
  top:0 !important;
  right:-1.2vw !important;
  bottom:0 !important;
  left:auto !important;
  width:min(58vw, 900px) !important;
  height:100% !important;
  z-index:-3 !important;
  display:flex !important;
  align-items:stretch !important;
  justify-content:flex-end !important;
  background:none !important;
  opacity:1 !important;
  pointer-events:none !important;
  overflow:hidden !important;
}
.about-photo-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:right center;
  display:block;
  filter:grayscale(1) contrast(1.03) brightness(.89);
  -webkit-mask-image:linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.05) 8%,
    rgba(0,0,0,.16) 15%,
    rgba(0,0,0,.34) 22%,
    rgba(0,0,0,.58) 29%,
    rgba(0,0,0,.82) 38%,
    rgba(0,0,0,.96) 46%,
    rgba(0,0,0,1) 56%,
    rgba(0,0,0,1) 100%);
  mask-image:linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.05) 8%,
    rgba(0,0,0,.16) 15%,
    rgba(0,0,0,.34) 22%,
    rgba(0,0,0,.58) 29%,
    rgba(0,0,0,.82) 38%,
    rgba(0,0,0,.96) 46%,
    rgba(0,0,0,1) 56%,
    rgba(0,0,0,1) 100%);
}
.about-shade{
  background:
    linear-gradient(90deg,
      #050709 0%,
      rgba(5,7,9,.985) 18%,
      rgba(5,7,9,.94) 34%,
      rgba(5,7,9,.82) 48%,
      rgba(5,7,9,.56) 61%,
      rgba(5,7,9,.24) 75%,
      rgba(5,7,9,.32) 100%),
    linear-gradient(180deg,
      #050709 0%,
      rgba(5,7,9,.04) 18%,
      rgba(5,7,9,.08) 76%,
      #050709 100%) !important;
}
.about-inner{
  position:relative;
  z-index:2;
}

@media (max-width: 1280px){
  .about-photo{
    width:min(60vw, 820px) !important;
    right:-2vw !important;
  }
}

@media (max-width: 980px){
  .about-photo{
    width:min(62vw, 720px) !important;
    right:-3vw !important;
  }
  .about-photo-img{
    filter:grayscale(1) contrast(1.02) brightness(.86);
  }
}

@media (max-width: 640px){
  .about-photo{display:none !important;}
}


/* =========================================================
   MOBILE AUDIT — final mobile-only layer
   Scope: <= 767px. Desktop/tablet desktop composition untouched.
   ========================================================= */
@media (max-width: 767px){
  :root{
    --container:calc(100% - 36px);
    --mobile-gap:18px;
  }

  html{
    scroll-behavior:smooth;
    scroll-padding-top:0;
  }
  body{
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
  }
  section{scroll-margin-top:0}

  h1{
    font-size:clamp(2.38rem,10.6vw,3.12rem)!important;
    line-height:1.015!important;
    letter-spacing:-.035em!important;
  }
  h2{
    font-size:clamp(2.02rem,8.7vw,2.72rem)!important;
    line-height:1.045!important;
    letter-spacing:-.03em!important;
  }
  h3{
    font-size:1.38rem!important;
    line-height:1.12!important;
    letter-spacing:-.02em!important;
  }
  p{
    font-size:.95rem!important;
    line-height:1.52!important;
  }
  .eyebrow{
    font-size:.72rem!important;
    letter-spacing:.085em!important;
    margin-bottom:14px!important;
  }

  /* Opening frame: one portrait only, integrated into the same section. */
  .about{
    display:flex!important;
    align-items:flex-end!important;
    min-height:100svh!important;
    height:auto!important;
    padding:0!important;
    overflow:hidden!important;
    background:#050709!important;
  }
  .about-photo{
    display:flex!important;
    position:absolute!important;
    inset:0 0 auto 0!important;
    width:100%!important;
    height:68svh!important;
    min-height:430px!important;
    z-index:-3!important;
    overflow:hidden!important;
    background:none!important;
    opacity:1!important;
  }
  .about-photo-img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:54% 14%!important;
    filter:grayscale(1) contrast(1.02) brightness(.82)!important;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,.94) 60%,rgba(0,0,0,.66) 72%,rgba(0,0,0,.24) 86%,transparent 100%)!important;
    mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,.94) 60%,rgba(0,0,0,.66) 72%,rgba(0,0,0,.24) 86%,transparent 100%)!important;
  }
  .about-shade{
    background:
      linear-gradient(180deg,rgba(5,7,9,.08) 0%,rgba(5,7,9,.10) 34%,rgba(5,7,9,.42) 54%,rgba(5,7,9,.90) 72%,#050709 86%,#050709 100%),
      linear-gradient(90deg,rgba(5,7,9,.26) 0%,rgba(5,7,9,.04) 52%,rgba(5,7,9,.10) 100%)!important;
  }
  .about-inner{
    min-height:100svh!important;
    height:auto!important;
    padding:50svh 0 max(44px,calc(env(safe-area-inset-bottom) + 30px))!important;
    display:flex!important;
    align-items:flex-end!important;
  }
  .about-copy{
    width:100%!important;
    max-width:100%!important;
  }
  .about-copy h1{max-width:345px!important;margin-bottom:0!important}
  .about-signature{
    display:block!important;
    font-size:2.55rem!important;
    line-height:.95!important;
    margin:0 0 15px!important;
    color:rgba(255,255,255,.96)!important;
  }
  .about-mobile-portrait,.mobile-signature{display:none!important}
  .journey-cta{
    min-height:49px!important;
    margin-top:25px!important;
    padding:0 18px!important;
    gap:12px!important;
    font-size:.88rem!important;
    border-width:.8px!important;
  }
  .journey-cta svg{width:18px!important;height:18px!important}

  /* Parallax bridges remain visible without producing lateral jitter. */
  .transition-band,
  .transition-to-about,
  .final-transition{
    height:66px!important;
    min-height:66px!important;
  }
  .transition-band .parallax-layer{
    inset:-82px -7%!important;
    transform:translate3d(0,0,0) scale(1.07);
  }

  /* Vision / commercial wireframe */
  .vision{
    min-height:auto!important;
    padding:72px 0 76px!important;
  }
  .vision-layout{
    grid-template-columns:1fr!important;
    gap:34px!important;
  }
  .vision-copy p{max-width:100%!important}
  .concept-line{
    margin-top:22px!important;
    padding-top:18px!important;
    font-size:1rem!important;
    line-height:1.4!important;
  }
  .vision-art{
    min-height:0!important;
    padding-top:4px!important;
    overflow:hidden!important;
  }
  .journey-wireframe{
    width:122%!important;
    max-width:none!important;
    margin:0 0 0 -11%!important;
  }
  .wf-node text,.wf-mini text{font-size:16px!important}
  .wf-node .wf-title,.wf-mini text:first-of-type{font-size:21px!important}
  .wf-mini .wf-small{font-size:14px!important}
  .vision-art-caption{
    margin:3px 0 0!important;
    font-size:.88rem!important;
    line-height:1.45!important;
    text-align:left!important;
    width:100%!important;
  }

  /* Method */
  .method{
    min-height:auto!important;
    padding:72px 0 76px!important;
  }
  .method-inner{
    min-height:auto!important;
    padding:0!important;
    display:block!important;
  }
  .method .section-heading.compact{
    margin:0 0 28px!important;
    text-align:left!important;
  }
  .method .section-heading.compact>p:last-child{margin:0!important}
  .method-grid{
    display:block!important;
    border-top:1px solid var(--line-dark)!important;
    border-bottom:0!important;
  }
  .method-grid article,
  .method-grid article:not(:first-child),
  .method-grid article:first-child,
  .method-grid article:last-child{
    min-height:0!important;
    padding:24px 0 25px!important;
    border-left:0!important;
    border-right:0!important;
    border-bottom:1px solid var(--line-dark)!important;
  }
  .step-number{font-size:.78rem!important;margin-bottom:12px!important}
  .method-grid h3{margin-bottom:8px!important}
  .method-grid p{max-width:100%!important;margin:0!important;color:rgba(247,247,245,.68)!important}

  /* Repertoire / authority */
  .knowledge{
    padding:72px 0 78px!important;
  }
  .knowledge-heading{margin-bottom:32px!important}
  .knowledge-grid,
  .knowledge-grid-editorial{
    grid-template-columns:1fr!important;
    border-left:0!important;
  }
  .knowledge-card,
  .knowledge-card.knowledge-wide,
  .knowledge-grid-editorial .knowledge-wide{
    grid-column:auto!important;
    grid-template-columns:28px minmax(0,1fr)!important;
    gap:12px!important;
    min-height:0!important;
    padding:23px 17px 24px!important;
    border-left:1px solid var(--line-light)!important;
  }
  .knowledge-index{font-size:.76rem!important}
  .knowledge-kicker{font-size:.69rem!important;line-height:1.35!important;margin-bottom:7px!important}
  .knowledge-card h3{font-size:1.32rem!important;margin-bottom:8px!important}
  .knowledge-card p:last-child{font-size:.91rem!important;line-height:1.5!important}
  .knowledge-manifesto{
    margin-top:24px!important;
    padding-top:21px!important;
    font-size:.94rem!important;
  }

  /* Commercial formats */
  .work,
  .work-dark{
    padding:72px 0 78px!important;
  }
  .section-heading{margin-bottom:32px!important}
  .work-grid{grid-template-columns:1fr!important;gap:14px!important}
  .work-card{
    min-height:0!important;
    padding:24px 21px 22px!important;
    border-radius:15px!important;
  }
  .work-index{font-size:.76rem!important;margin-bottom:17px!important}
  .work-card p{margin-bottom:22px!important}
  .work-card .cta-button{
    width:100%!important;
    min-height:49px!important;
    justify-content:space-between!important;
    padding-inline:17px!important;
    font-size:.87rem!important;
  }

  /* Direction / outcomes */
  .direction{
    padding:72px 0 78px!important;
  }
  .direction-layout{
    grid-template-columns:1fr!important;
    gap:31px!important;
  }
  .direction-grid{grid-template-columns:1fr!important;border-left:0!important}
  .direction-grid article{
    min-height:0!important;
    padding:22px 18px 23px!important;
    border-left:1px solid var(--line-light)!important;
  }
  .direction-grid article>span{font-size:.75rem!important;margin-bottom:15px!important}
  .direction-grid h3{font-size:1.3rem!important;margin-bottom:7px!important}
  .direction-grid p{font-size:.9rem!important}

  /* Timeline */
  .experience-story{
    padding:72px 0 80px!important;
  }
  .timeline-layout{
    grid-template-columns:1fr!important;
    gap:30px!important;
  }
  .story-heading{margin-bottom:0!important}
  .timeline{
    padding-left:24px!important;
  }
  .timeline::before{left:3px!important;top:12px!important;bottom:12px!important}
  .timeline-dot{left:-27px!important;top:8px!important;width:11px!important;height:11px!important;box-shadow:0 0 0 5px rgba(22,135,255,.06)!important}
  .timeline-item{
    grid-template-columns:28px minmax(0,1fr)!important;
    gap:10px!important;
    padding-bottom:34px!important;
  }
  .timeline-index{font-size:.75rem!important}
  .story-kicker{font-size:.7rem!important;margin-bottom:7px!important}
  .timeline-copy h3{font-size:1.32rem!important;margin-bottom:8px!important}
  .timeline-copy>p:last-child{font-size:.9rem!important;line-height:1.5!important}
  .timeline-mark{
    grid-column:2!important;
    text-align:left!important;
    font-size:.78rem!important;
    color:var(--blue)!important;
    padding-top:2px!important;
  }

  /* Final mountain frame */
  .final-hero{
    min-height:100svh!important;
    height:auto!important;
  }
  .final-hero .hero-inner{
    min-height:100svh!important;
    padding:82px 0 max(112px,calc(env(safe-area-inset-bottom) + 92px))!important;
    align-items:center!important;
  }
  .final-hero .hero-copy h2{
    font-size:clamp(2.12rem,9.2vw,2.9rem)!important;
    max-width:345px!important;
  }
  .final-hero .hero-lead{font-size:.95rem!important;max-width:330px!important}
  .final-hero .hero-cta{
    min-height:49px!important;
    padding:0 18px!important;
    font-size:.88rem!important;
    border-width:.55px!important;
  }
  .final-hero .hero-bg{animation-duration:13s!important}

  /* Floating contact: large enough to notice, small enough not to cover copy. */
  .floating-contact{
    width:64px!important;
    height:64px!important;
    right:16px!important;
    bottom:max(16px,calc(env(safe-area-inset-bottom) + 10px))!important;
    box-shadow:0 14px 38px rgba(22,135,255,.34)!important;
  }
  .floating-contact svg{width:27px!important;height:27px!important;stroke-width:1.6!important}

  /* Fullscreen multistep modal — mobile ergonomics */
  .modal{
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
  }
  .modal-layout{
    display:block!important;
    height:100dvh!important;
    min-height:100dvh!important;
  }
  .modal-intro{display:none!important}
  .modal-close{
    width:42px!important;
    height:42px!important;
    right:14px!important;
    top:max(12px,env(safe-area-inset-top))!important;
    font-size:1.7rem!important;
    background:rgba(255,255,255,.065)!important;
  }
  .modal-form{
    height:100dvh!important;
    min-height:100dvh!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding:max(68px,calc(env(safe-area-inset-top) + 56px)) 20px max(22px,calc(env(safe-area-inset-bottom) + 16px))!important;
  }
  .form-topline{
    font-size:.76rem!important;
    margin-bottom:12px!important;
    gap:12px!important;
  }
  .progress-track{
    margin-bottom:42px!important;
    height:2px!important;
  }
  .form-step{max-width:100%!important}
  .form-step label,.form-step legend{
    font-size:clamp(1.92rem,8.7vw,2.45rem)!important;
    line-height:1.04!important;
    letter-spacing:-.035em!important;
    margin-bottom:13px!important;
  }
  .form-step>p,.form-step fieldset>p{
    font-size:.92rem!important;
    line-height:1.45!important;
    margin-bottom:27px!important;
  }
  .form-step input[type="text"],.form-step input[type="tel"]{
    font-size:16px!important;
    line-height:1.25!important;
    padding:14px 0!important;
    border-bottom-width:1px!important;
  }
  .service-options{gap:10px!important}
  .service-options label>span{
    padding:15px 15px!important;
    border-radius:13px!important;
  }
  .service-options label>span strong{font-size:.98rem!important;margin-bottom:4px!important}
  .service-options label>span small{font-size:.82rem!important;line-height:1.35!important}
  .form-actions{
    position:sticky!important;
    bottom:0!important;
    z-index:2!important;
    margin-top:auto!important;
    padding:18px 0 max(4px,env(safe-area-inset-bottom))!important;
    background:linear-gradient(180deg,rgba(7,9,12,0),#07090c 24%,#07090c 100%)!important;
    gap:10px!important;
  }
  .form-actions .cta-button{
    min-height:49px!important;
    padding:0 17px!important;
    font-size:.88rem!important;
  }
  .form-back{
    min-height:49px!important;
    padding:0 4px!important;
    font-size:.86rem!important;
  }
  .form-note{
    font-size:.82rem!important;
    line-height:1.4!important;
    margin-top:9px!important;
  }
}


/* --- Unified package rule: photo in original color on both desktop and mobile --- */
@media (min-width: 768px){
  .about-photo{
    filter: contrast(1.02) brightness(.90) saturate(1.02) !important;
  }
  .about-photo-img{
    filter: contrast(1.02) brightness(.90) saturate(1.02) !important;
  }
}

@media (max-width: 767px){
  .about-photo-img{
    filter: contrast(1.02) brightness(.90) saturate(1.02) !important;
  }
}

/* =========================================================
   MODAL FORM — unified UX refinement
   Stable layout, calmer copy, focus motion and reliable mobile ergonomics
   ========================================================= */
[hidden]{display:none!important}

.modal{
  height:100dvh;
  min-height:100dvh;
  overflow:hidden;
}
.modal-layout{
  height:100dvh;
  min-height:100dvh;
  overflow:hidden;
}
.modal-intro{
  min-height:100dvh;
  padding:clamp(48px,6vw,88px);
}
.modal-intro h2{
  max-width:560px;
  font-size:clamp(2.65rem,4.25vw,4.35rem);
  line-height:1.01;
  margin-bottom:22px;
}
.modal-intro>p:not(.eyebrow){
  max-width:430px;
  font-size:1.02rem;
  line-height:1.55;
}

.modal-form{
  height:100dvh;
  min-height:0;
  padding:clamp(56px,7vh,84px) clamp(48px,7vw,112px) clamp(34px,5vh,58px);
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto auto;
  align-items:stretch;
  overflow:hidden;
}
.form-topline{
  margin:0 0 16px;
  min-height:22px;
  align-items:center;
  font-size:.9rem;
  letter-spacing:.015em;
}
.progress-track{
  margin:0;
  height:2px;
  border-radius:999px;
  overflow:hidden;
}
.progress-track i{
  transform-origin:left center;
  transition:width .42s cubic-bezier(.2,.8,.2,1);
}
.form-stage{
  min-height:0;
  display:flex;
  align-items:center;
  overflow-y:auto;
  overflow-x:hidden;
  padding:clamp(30px,5vh,62px) 2px clamp(22px,4vh,48px);
  scrollbar-width:none;
}
.form-stage::-webkit-scrollbar{display:none}
.form-step{
  width:100%;
  max-width:760px;
  margin:0;
}
.form-step.is-active{
  animation:modalStepIn .42s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes modalStepIn{
  from{opacity:0;transform:translate3d(0,16px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
.form-step label,
.form-step legend{
  max-width:760px;
  font-size:clamp(2.35rem,3.9vw,4.15rem);
  line-height:1.02;
  letter-spacing:-.038em;
  margin-bottom:14px;
}
.form-step>p,
.form-step fieldset>p{
  margin-bottom:clamp(28px,4vh,42px);
  color:rgba(255,255,255,.58);
  font-size:1.04rem;
  line-height:1.48;
}

.input-shell{
  position:relative;
  width:100%;
  max-width:720px;
  border-bottom:1px solid rgba(255,255,255,.22);
  transition:border-color .28s ease,transform .3s cubic-bezier(.2,.8,.2,1);
}
.input-shell:focus-within{
  border-bottom-color:transparent;
  transform:translateY(-2px);
}
.input-line{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),#66b3ff);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .38s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.input-shell:focus-within .input-line{transform:scaleX(1)}
.form-step input[type="text"],
.form-step input[type="tel"]{
  border:0!important;
  padding:18px 0 16px;
  min-height:64px;
  font-size:clamp(1.22rem,1.75vw,1.52rem);
  font-weight:800;
  transition:color .25s ease,letter-spacing .25s ease,transform .25s ease;
}
.form-step input[type="text"]:focus,
.form-step input[type="tel"]:focus{
  transform:translateX(3px);
  letter-spacing:.005em;
}
.form-step input::placeholder{
  color:rgba(255,255,255,.28);
  transition:color .25s ease,opacity .25s ease;
}
.form-step input:focus::placeholder{color:rgba(255,255,255,.16);opacity:.72}

.field-error{
  min-height:20px;
  margin:10px 0 0!important;
  color:#ff9a9a!important;
  font-size:.84rem!important;
  line-height:1.35!important;
  font-weight:800;
}
.form-step.has-error .input-shell{border-bottom-color:rgba(255,120,120,.7)}
.form-step.has-error .input-line{background:#ff8585;transform:scaleX(1)}

.service-options{
  gap:11px;
  max-width:760px;
}
.service-options label>span{
  position:relative;
  min-height:76px;
  padding:16px 52px 16px 19px;
  border-radius:15px;
  border-color:rgba(255,255,255,.13);
  background:rgba(255,255,255,.018);
  transform:translateY(0);
  transition:border-color .24s ease,background .24s ease,transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease;
}
.service-options label>span:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.035);
}
.service-options label>span strong{
  font-size:1.02rem;
  margin-bottom:3px;
}
.service-options label>span small{
  display:block;
  font-size:.89rem;
  line-height:1.35;
  color:rgba(255,255,255,.51);
}
.service-options label>span i{
  position:absolute;
  right:18px;
  top:50%;
  width:25px;
  height:25px;
  border-radius:50%;
  display:grid;
  place-items:center;
  transform:translateY(-50%) scale(.75);
  font-style:normal;
  font-size:.76rem;
  color:#fff;
  background:var(--blue);
  opacity:0;
  transition:opacity .2s ease,transform .3s cubic-bezier(.2,.8,.2,1);
}
.service-options input:checked+span{
  border-color:rgba(22,135,255,.9);
  background:rgba(22,135,255,.085);
  box-shadow:0 0 0 1px rgba(22,135,255,.08) inset;
}
.service-options input:checked+span i{opacity:1;transform:translateY(-50%) scale(1)}

.form-actions{
  margin:0;
  padding:18px 0 0;
  min-height:76px;
  border-top:1px solid rgba(255,255,255,.09);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.form-primary-action{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:250px;
}
.form-actions .cta-button{
  min-width:230px;
  min-height:54px;
  margin:0!important;
}
.form-back{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-width:90px;
  min-height:48px;
  padding:0;
  color:rgba(255,255,255,.55);
  transition:color .22s ease,transform .25s cubic-bezier(.2,.8,.2,1);
}
.form-back:hover{color:#fff;transform:translateX(-2px)}
.form-note{
  min-height:22px;
  margin:9px 0 0;
  font-size:.82rem;
  line-height:1.35;
  color:rgba(255,255,255,.52);
}

/* Make the primary action feel responsive without becoming playful. */
.modal-form .cta-blue{
  position:relative;
  overflow:hidden;
}
.modal-form .cta-blue::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.16) 48%,transparent 68%);
  transform:translateX(-130%);
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.modal-form .cta-blue:hover::before{transform:translateX(130%)}

@media (max-width:980px){
  .modal-form{
    height:100dvh;
    min-height:100dvh;
    padding:72px 38px max(26px,env(safe-area-inset-bottom));
  }
  .form-stage{padding:34px 0 24px}
}

@media (max-width:767px){
  .modal{
    height:100dvh!important;
    min-height:100dvh!important;
  }
  .modal-layout{
    height:100dvh!important;
    min-height:100dvh!important;
  }
  .modal-close{
    width:42px!important;
    height:42px!important;
    top:max(14px,env(safe-area-inset-top))!important;
    right:16px!important;
    font-size:1.65rem!important;
    background:rgba(255,255,255,.055)!important;
  }
  .modal-form{
    height:100dvh!important;
    min-height:0!important;
    padding:max(68px,calc(env(safe-area-inset-top) + 58px)) 20px max(16px,env(safe-area-inset-bottom))!important;
    grid-template-rows:auto auto minmax(0,1fr) auto auto!important;
    overflow:hidden!important;
  }
  .form-topline{
    font-size:.78rem!important;
    margin-bottom:12px!important;
  }
  .progress-track{height:2px!important}
  .form-stage{
    padding:24px 0 16px!important;
    align-items:center!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
  }
  .form-step label,
  .form-step legend{
    font-size:clamp(2rem,10vw,2.7rem)!important;
    line-height:1.04!important;
    letter-spacing:-.035em!important;
    margin-bottom:11px!important;
  }
  .form-step>p,
  .form-step fieldset>p{
    font-size:.91rem!important;
    margin-bottom:24px!important;
  }
  .input-shell{max-width:100%}
  .form-step input[type="text"],
  .form-step input[type="tel"]{
    min-height:58px!important;
    padding:15px 0 13px!important;
    font-size:16px!important; /* prevents iOS zoom */
  }
  .field-error{
    min-height:18px!important;
    margin-top:8px!important;
    font-size:.77rem!important;
  }
  .service-options{gap:9px!important}
  .service-options label>span{
    min-height:66px!important;
    padding:13px 44px 13px 15px!important;
    border-radius:13px!important;
  }
  .service-options label>span strong{font-size:.92rem!important}
  .service-options label>span small{font-size:.78rem!important}
  .service-options label>span i{right:13px;width:22px;height:22px}
  .form-actions{
    min-height:68px!important;
    padding:13px 0 0!important;
    gap:10px!important;
  }
  .form-back{
    min-width:72px!important;
    font-size:.82rem!important;
  }
  .form-primary-action{
    min-width:0!important;
    flex:1;
  }
  .form-actions .cta-button{
    width:100%!important;
    min-width:0!important;
    min-height:50px!important;
    padding:0 16px!important;
    font-size:.86rem!important;
  }
  .form-actions .cta-button svg{width:18px!important;height:18px!important}
  .form-note{
    min-height:18px!important;
    margin-top:6px!important;
    font-size:.74rem!important;
  }
}

@media (max-height:700px) and (max-width:767px){
  .modal-form{padding-top:max(60px,calc(env(safe-area-inset-top) + 52px))!important}
  .form-stage{align-items:flex-start!important;padding-top:18px!important}
  .form-step label,.form-step legend{font-size:clamp(1.75rem,8.6vw,2.25rem)!important}
  .form-step>p,.form-step fieldset>p{margin-bottom:18px!important}
  .service-options label>span{min-height:58px!important;padding-top:10px!important;padding-bottom:10px!important}
}

@media (prefers-reduced-motion:reduce){
  .form-step.is-active,
  .input-shell,
  .input-line,
  .form-step input,
  .service-options label>span,
  .service-options label>span i,
  .modal-form .cta-blue::before{
    animation:none!important;
    transition:none!important;
  }
}

/* Modal accessibility / send state */
.service-options input:focus-visible+span{
  outline:2px solid rgba(102,179,255,.85);
  outline-offset:3px;
}
.modal-form .cta-button:disabled{
  cursor:wait;
  opacity:.72;
  transform:none!important;
}
.modal-form .cta-button.is-sending svg{
  animation:sendArrow .75s ease-in-out infinite alternate;
}
@keyframes sendArrow{to{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.modal-form .cta-button.is-sending svg{animation:none!important}}