@font-face{font-family:Roboto;src:url('assets/roboto-400.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Roboto;src:url('assets/roboto-500.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Roboto;src:url('assets/roboto-700.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Roboto;src:url('assets/roboto-900.ttf') format('truetype');font-style:normal;font-weight:900;font-display:swap}
:root{--paper:#f7f6f2;--ink:#060609;--blue:#144fff;--body:#42465b;--muted:#7e8094;--line:#c8cad0;--s:clamp(1px,.113250283vw,1.63080408px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-color:#aeb2bc var(--paper)}body{margin:0;background:var(--paper);color:var(--ink);font:400 calc(14*var(--s))/1.35 Roboto,Arial,sans-serif}a{color:inherit;text-decoration:none}h1,h2,h3,h4,p,figure{margin:0}button{font:inherit}svg{display:block}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:5px}button{cursor:pointer}::selection{background:var(--blue);color:white}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.page{width:min(100%,1440px);margin:auto;overflow:clip}.wrap{width:calc(100% - 96*var(--s));margin-inline:auto}.icon{width:calc(17*var(--s));height:calc(17*var(--s));fill:none;stroke:currentColor;stroke-width:1.4;flex:none}.skip-link{position:fixed;left:16px;top:12px;z-index:10;background:var(--blue);color:white;padding:12px 20px;transform:translateY(-160%)}.skip-link:focus{transform:none}
.header{height:calc(60*var(--s));display:flex;align-items:center;gap:calc(23*var(--s))}.brand{font-weight:900;font-size:calc(28*var(--s));line-height:1;letter-spacing:calc(-1.3*var(--s))}.brand span{color:var(--blue)}.brand-description{font-size:calc(12*var(--s));color:var(--body)}nav{margin-left:auto;display:flex;align-items:center;gap:calc(20*var(--s));font-size:calc(10*var(--s))}nav>a{padding-block:calc(12*var(--s));white-space:nowrap}nav>a:hover{color:var(--blue)}nav .header-cta{padding:calc(9*var(--s)) calc(16*var(--s));background:#10121d;color:white;border-radius:calc(6*var(--s));display:flex;align-items:center;gap:calc(9*var(--s))}.header-cta .icon{width:calc(12*var(--s));height:calc(12*var(--s))}
.hero-inner{height:calc(415*var(--s));position:relative}.hero-copy{position:relative;padding-top:calc(37*var(--s));z-index:1}.eyebrow{font-size:calc(9*var(--s));font-weight:700;line-height:1.3;letter-spacing:calc(1.6*var(--s));text-transform:uppercase;color:var(--blue)}.hero h1{font-size:calc(60*var(--s));font-weight:900;line-height:.94;letter-spacing:calc(-2.8*var(--s));margin-top:calc(12*var(--s));width:max-content}.hero h1 span,.experience h2 span{color:var(--blue)}.hero-description{font-size:calc(14*var(--s));line-height:1.35;color:var(--body);margin-top:calc(20*var(--s))}.hero-action{margin-top:calc(27*var(--s))}.button{display:inline-flex;align-items:center;justify-content:center;gap:calc(17*var(--s));min-height:calc(43*var(--s));padding:calc(11*var(--s)) calc(22*var(--s));border-radius:calc(8*var(--s));border:1px solid transparent;font-size:calc(14*var(--s));font-weight:500;line-height:1.25;transition:background .2s,transform .2s}.button:active{transform:translateY(1px)}.primary{background:var(--blue);color:#fff}.primary:hover{background:#003bd5}.play{width:calc(18*var(--s));height:calc(18*var(--s));fill:currentColor}.caption{font-size:calc(12*var(--s));color:var(--muted);margin-top:calc(7*var(--s))}.hero-art{position:absolute;width:calc(548*var(--s));height:calc(406*var(--s));right:calc(-48*var(--s));top:0;pointer-events:none}.hero-person{position:absolute;right:calc(46*var(--s));top:calc(102*var(--s));font-size:calc(14*var(--s));line-height:1.2}.hero-person strong{font-weight:700}.hero-person p{color:var(--body);margin-top:calc(3*var(--s))}.hero-features{height:calc(65*var(--s));display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);gap:20px}.hero-features p{display:flex;align-items:center;gap:calc(16*var(--s));font-size:calc(14*var(--s));color:#171b36;white-space:nowrap}.feature-icon{width:calc(23*var(--s));height:calc(23*var(--s));fill:var(--paper);stroke:#171b36;stroke-width:1.6;stroke-linejoin:round}.hero{border-bottom:1px solid #e4e3df}
.experience{height:calc(561*var(--s));padding-top:calc(35*var(--s))}.experience h2{margin-top:calc(12*var(--s));font-size:calc(46*var(--s));line-height:.94;letter-spacing:calc(-1.7*var(--s));font-weight:900}.experience-grid{display:grid;grid-template-columns:45.2% 54.8%;margin-top:calc(30*var(--s));height:calc(302*var(--s))}.group-title{font-size:calc(12*var(--s));font-weight:500;text-transform:uppercase;letter-spacing:calc(1.6*var(--s));line-height:1.2;color:#1c223d;margin-bottom:calc(18*var(--s))}.benefits{padding-right:calc(24*var(--s))}.benefits article{display:grid;grid-template-columns:calc(40*var(--s)) 1fr;gap:calc(17*var(--s));align-items:start}.benefits article+article{margin-top:calc(34*var(--s))}.benefit-icon{color:var(--blue);width:calc(35*var(--s));height:calc(38*var(--s));fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.benefits h4{font-size:calc(20*var(--s));line-height:1.15;font-weight:700;letter-spacing:calc(-.45*var(--s));margin-bottom:calc(5*var(--s));white-space:nowrap}.benefits p{font-size:calc(14*var(--s));line-height:1.18;color:var(--body);max-width:calc(277*var(--s))}.projects{border-left:1px solid var(--line);padding-left:calc(27*var(--s))}.project-list{list-style:none;padding:0;margin:0}.project-list li{display:grid;grid-template-columns:calc(38*var(--s)) calc(165*var(--s)) 1fr;align-items:center;gap:calc(17*var(--s));height:calc(38*var(--s));border-bottom:1px solid var(--line)}.project-list li:last-child{border-bottom:0}.project-list li>span{font-size:calc(16*var(--s));line-height:1.1;color:var(--blue);border-right:1px solid var(--line)}.project-list h4{font-size:calc(16*var(--s));line-height:1.2;letter-spacing:calc(-.45*var(--s));font-weight:700;white-space:nowrap}.project-list p{font-size:calc(12*var(--s));letter-spacing:calc(-.25*var(--s));line-height:1.2;color:var(--body);white-space:nowrap}.section-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:calc(24*var(--s));padding-top:calc(12*var(--s));font-size:calc(14*var(--s));color:var(--body)}.section-bottom a{color:var(--blue)}.section-bottom a:hover{text-decoration:underline}
.case{height:calc(372*var(--s));background:#171b1c;color:#f5f5f5}.case-inner{height:100%;position:relative}.case-copy{position:relative;z-index:1;padding-top:calc(29*var(--s));margin-left:calc(-4*var(--s));width:calc(302*var(--s))}.case .eyebrow{color:#c6c9cc;font-size:calc(9*var(--s))}.case h2{font-size:calc(36*var(--s));line-height:1.03;letter-spacing:calc(-1*var(--s));font-weight:700;margin-top:calc(12*var(--s))}.case-rule{height:1px;background:#45494b;margin-top:calc(25*var(--s));margin-bottom:calc(27*var(--s));width:calc(300*var(--s))}.case-brand{display:flex;align-items:flex-start;gap:calc(17*var(--s))}.tooth{width:calc(49*var(--s));height:calc(47*var(--s));flex:none}.case-brand h3{font-weight:700;font-size:calc(34*var(--s));letter-spacing:calc(-.8*var(--s));line-height:1.2}.case-brand p{font-size:calc(14*var(--s));line-height:1.25;margin-top:calc(4*var(--s));font-weight:400}.case-button{background:transparent;border:1px solid #e4e5e5;color:#fff;margin-top:calc(23*var(--s));padding-inline:calc(21*var(--s));min-height:calc(42*var(--s));font-size:calc(14*var(--s));font-weight:400}.case-button:hover{background:#ffffff15}.case-image{position:absolute;right:calc(-48*var(--s));top:calc(11*var(--s));width:calc(527*var(--s));height:calc(361*var(--s))}
.approach{padding-top:calc(27*var(--s));padding-bottom:calc(25*var(--s))}.approach-inner{display:grid;grid-template-columns:56% 44%;min-height:calc(178*var(--s))}.approach-copy .eyebrow{margin-bottom:calc(10*var(--s))}.approach h2{font-size:calc(36*var(--s));letter-spacing:calc(-1*var(--s));line-height:1.05;font-weight:700}.steps{list-style:none;padding:0;margin:0}.steps li{display:grid;grid-template-columns:calc(54*var(--s)) 1fr;gap:calc(17*var(--s));position:relative;padding-bottom:calc(17*var(--s))}.steps li:last-child{padding-bottom:0}.step-num{color:var(--blue);font-size:calc(16*var(--s));font-weight:500;line-height:1.25}.steps li::before{content:"";position:absolute;left:calc(41*var(--s));top:calc(6*var(--s));width:1px;height:100%;background:var(--line)}.steps li:last-child::before{display:none}.steps li::after{content:"";position:absolute;left:calc(37*var(--s));top:calc(3*var(--s));width:calc(10*var(--s));height:calc(10*var(--s));border-radius:50%;background:var(--blue)}.steps h3{font-size:calc(14*var(--s));font-weight:700;line-height:1.2;margin-bottom:calc(3*var(--s))}.steps p{font-size:calc(12*var(--s));color:var(--muted);line-height:1.15}.contact-banner{width:calc(100% - 74*var(--s));min-height:calc(67*var(--s));margin:calc(10*var(--s)) auto 0;position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:calc(11*var(--s)) calc(20*var(--s)) calc(11*var(--s)) calc(18*var(--s));background:var(--blue);border-radius:calc(9*var(--s));color:#fff}.contact-banner h2{font-size:calc(32*var(--s));font-weight:500;letter-spacing:calc(-.9*var(--s));z-index:1}.contact-button{background:var(--paper);color:#12162c;font-size:calc(14*var(--s));font-weight:500;z-index:1;min-width:calc(174*var(--s));border-radius:calc(10*var(--s));padding-inline:calc(20*var(--s));gap:calc(13*var(--s))}.contact-button:hover{background:#fff}.banner-art{position:absolute;left:46%;bottom:0;width:calc(265*var(--s));height:calc(66*var(--s));pointer-events:none}
dialog{max-width:min(440px,calc(100% - 40px));padding:32px;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);font-size:16px}dialog::backdrop{background:#11152388;backdrop-filter:blur(4px)}dialog h2{font-size:26px;line-height:1.1;margin-right:12px}dialog p{color:var(--body);margin-top:18px}dialog .button{margin-top:24px;font-size:16px;min-height:44px}.dialog-close{position:absolute;right:12px;top:8px;background:transparent;border:0;font-size:28px;width:36px;height:36px}
@media(max-width:760px){:root{--s:1px}.wrap{width:calc(100% - 40px)}.header{height:auto;min-height:72px;flex-wrap:wrap;gap:12px;padding-block:16px}.brand-description{font-size:12px}nav{gap:16px;font-size:12px}nav>a:not(.header-cta){display:none}nav .header-cta{padding:10px 12px;min-height:40px}.hero-inner{height:auto;padding-top:24px}.hero-copy{padding-top:0}.eyebrow{font-size:10px}.hero h1{font-size:clamp(44px,8vw,60px);line-height:.98;letter-spacing:-2px}.hero-description{font-size:16px;margin-top:22px;max-width:37ch}.hero-description br{display:none}.hero-action{margin-top:26px}.button{font-size:16px;min-height:48px;padding:13px 19px}.caption{font-size:13px}.hero-art{position:relative;right:auto;top:auto;display:block;width:calc(100% + 40px);height:auto;margin:26px -20px 0;aspect-ratio:548/406}.hero-person{top:auto;bottom:calc(26vw + 45px);right:12px;font-size:12px}.hero-features{height:auto;gap:18px;flex-wrap:wrap;justify-content:flex-start;padding-block:22px}.hero-features p{font-size:14px;gap:12px;flex-basis:calc(50% - 9px)}.hero-features p:last-child{flex-basis:100%}.experience{height:auto;padding-block:38px}.experience h2{font-size:clamp(32px,5.8vw,44px);line-height:1.03;letter-spacing:-1px;margin-top:15px}.experience-grid{grid-template-columns:1fr;height:auto;gap:36px;margin-top:32px}.group-title{font-size:12px;letter-spacing:1.25px;margin-bottom:22px}.benefits{padding:0}.benefits article{grid-template-columns:35px 1fr;gap:16px}.benefits article+article{margin-top:28px}.benefits h4{font-size:20px;white-space:normal}.benefits p{font-size:16px;line-height:1.4;max-width:46ch}.projects{border-left:0;padding-left:0}.project-list li{height:auto;min-height:59px;grid-template-columns:30px 1fr;gap:4px 16px;padding-block:12px}.project-list h4{font-size:17px;white-space:normal}.project-list p{grid-column:2;font-size:14px;white-space:normal;letter-spacing:0;line-height:1.3}.section-bottom{margin-top:32px;display:block;font-size:15px;line-height:1.4;padding-top:20px}.section-bottom a{display:inline-flex;align-items:center;min-height:44px;margin-top:10px}.case{height:auto}.case-inner{padding-top:32px}.case-copy{padding-top:0;margin-left:0;width:100%}.case h2{font-size:36px;line-height:1.07}.case-rule{width:100%;margin-block:25px}.case-brand h3{font-size:34px}.case-brand p{font-size:16px}.case-button{font-size:16px;min-height:48px}.case-image{position:relative;right:auto;top:auto;width:calc(100% + 40px);height:auto;margin:28px -20px 0;aspect-ratio:527/361}.approach{padding-block:36px 24px}.approach-inner{grid-template-columns:1fr;gap:32px}.approach h2{font-size:clamp(30px,5.5vw,36px)}.steps li{grid-template-columns:54px 1fr;padding-bottom:25px}.steps h3{font-size:17px}.steps p{font-size:15px;line-height:1.4;color:#65697d}.steps p br{display:none}.step-num{font-size:17px}.contact-banner{width:calc(100% - 32px);margin-top:30px;flex-wrap:wrap;padding:22px;gap:18px;border-radius:10px}.contact-banner h2{font-size:29px}.contact-button{font-size:16px}.banner-art{left:40%;width:310px;height:78px}}
@media(min-width:761px) and (max-width:882px){:root{--s:.95px}.experience{height:auto;padding-bottom:30px}.experience-grid{height:auto;min-height:302px}.benefits h4{white-space:normal}.project-list li{grid-template-columns:30px 145px 1fr;gap:12px}.project-list p{white-space:normal}.hero h1{font-size:56px}}
@media(max-width:379px){.header{gap:8px}.brand-description{font-size:10px}nav .header-cta{font-size:11px}.hero h1{font-size:43px}.hero-features p{flex-basis:100%}.hero-person{right:0;font-size:11px}.benefits h4{font-size:19px}.contact-banner h2{font-size:26px}.case-brand{gap:12px}.case-brand h3{font-size:30px}}
/* Reference geometry at 883 px. Artwork is a visual crop; all page copy is live HTML. */
html{scrollbar-width:none}html::-webkit-scrollbar{display:none}
body{background:radial-gradient(ellipse at 45% 15%,#fbfaf7 0,#f7f6f2 65%,#f4f2ee 100%)}
.hero h1 .headline-line{display:block;color:var(--ink);font-size:calc(56*var(--s));line-height:calc(56*var(--s))}
.hero h1 .headline-line:nth-child(2){font-size:calc(64*var(--s));line-height:calc(56*var(--s))}
.hero h1 .headline-line:last-child{font-size:calc(68*var(--s));line-height:calc(60*var(--s));color:var(--blue)}
.hero-art{mix-blend-mode:multiply}.hero-person{right:auto;left:calc(671*var(--s))}
.hero-action .button{width:calc(223*var(--s));padding-inline:calc(18*var(--s));font-weight:400;gap:calc(17*var(--s))}
.hero-description,.benefits p,.section-bottom p,.case-brand p{letter-spacing:calc(-.25*var(--s))}
.experience{height:calc(560*var(--s))}.projects .group-title{margin-bottom:calc(6*var(--s))}
.project-list li{grid-template-columns:calc(38*var(--s)) calc(148*var(--s)) 1fr}
.project-list p{font-size:calc(13*var(--s))}
.case{background:radial-gradient(ellipse at 45% 65%,#222829,#171b1c 75%)}
@media(max-width:760px){.hero h1 .headline-line,.hero h1 .headline-line:nth-child(2),.hero h1 .headline-line:last-child{font-size:clamp(44px,8vw,60px);line-height:.98}.hero-art{mix-blend-mode:multiply}.hero-person{left:auto;right:12px}.experience{height:auto}.hero-action .button{width:auto;font-size:16px;min-height:48px;padding:13px 19px}.project-list li{grid-template-columns:30px 1fr}.project-list p{font-size:14px}.projects .group-title{margin-bottom:22px}}
@media(max-width:379px){.hero h1 .headline-line,.hero h1 .headline-line:nth-child(2),.hero h1 .headline-line:last-child{font-size:43px}.hero-person{right:0}}
@media(min-width:761px) and (max-width:882px){.experience{height:auto}.project-list li{grid-template-columns:30px 140px 1fr}}
.header .brand,.header .brand-description,.header nav{transform:translateY(calc(-5*var(--s)))}
nav{gap:calc(18*var(--s));margin-right:calc(-7*var(--s))}nav .header-cta{width:calc(126*var(--s));height:calc(31*var(--s));padding:0;justify-content:center;gap:calc(8*var(--s))}
.hero h1 .headline-line:nth-child(2){line-height:calc(48*var(--s))}
.hero-action .button{height:calc(44*var(--s));min-height:calc(44*var(--s));white-space:nowrap;letter-spacing:calc(-.25*var(--s));padding-inline:calc(19*var(--s));gap:calc(14*var(--s))}.hero-action .play{width:calc(16*var(--s));height:calc(16*var(--s))}
.hero-art{mix-blend-mode:normal}.experience h2{font-size:calc(47*var(--s));letter-spacing:calc(-.9*var(--s))}.benefits .group-title{margin-bottom:calc(15*var(--s))}.benefits p{width:calc(300*var(--s));max-width:none}
@media(max-width:760px){.header .brand,.header .brand-description,.header nav{transform:none}nav{margin-right:0}nav .header-cta{height:auto;min-height:40px;width:auto;padding:10px 12px}.hero h1 .headline-line:nth-child(2){line-height:.98}.hero-action .button{height:auto;min-height:48px;padding-inline:19px}.experience h2{font-size:clamp(32px,5.8vw,44px);letter-spacing:-1px}.benefits p{width:auto;max-width:46ch}.benefits p br{display:none}.benefits .group-title{margin-bottom:22px}}
.case h2{white-space:nowrap;letter-spacing:calc(-1.4*var(--s))}.case-button{width:calc(196*var(--s));padding-inline:calc(14*var(--s));gap:calc(13*var(--s))}.case-image{-webkit-mask-image:linear-gradient(to right,transparent,#000 2%,#000);mask-image:linear-gradient(to right,transparent,#000 2%,#000)}
.contact-button{width:calc(174*var(--s));min-width:0;padding-inline:calc(16*var(--s));gap:calc(12*var(--s));letter-spacing:calc(-.2*var(--s));flex:none}.contact-banner h2{letter-spacing:calc(-1.1*var(--s))}.project-list h4{width:max-content}
@media(max-width:760px){.case h2{white-space:normal;font-size:36px;letter-spacing:-1px}.case-button{width:auto;padding-inline:21px}.contact-button{width:auto;padding-inline:20px}.project-list h4{width:auto}.hero h1 .headline-line,.hero h1 .headline-line:nth-child(2),.hero h1 .headline-line:last-child{font-size:clamp(38px,11.2vw,60px)}}
@media(max-width:379px){.hero h1 .headline-line,.hero h1 .headline-line:nth-child(2),.hero h1 .headline-line:last-child{font-size:clamp(38px,11.2vw,42px)}}
.primary{background:linear-gradient(180deg,#1355fc,#0f50fc)}.contact-banner{background:linear-gradient(180deg,#1355fc,#0f50fc)}
.hero-features{display:grid;grid-template-columns:calc(289*var(--s)) calc(299*var(--s)) 1fr;gap:0}
.eyebrow{letter-spacing:calc(1.4*var(--s))}
@media(max-width:760px){.hero-features{display:flex;gap:18px}.eyebrow{letter-spacing:1.4px}}
@media(min-width:761px) and (max-width:882px){.hero-features{display:flex;gap:12px}.hero-features p{gap:10px;font-size:13px}}
.case h2{width:max-content}
@media(max-width:760px){.case h2{width:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}
.button,nav .header-cta,.dialog-close{transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;box-shadow:0 0 0 transparent}
.dialog-close{border-radius:6px}
@media(hover:hover){
  .primary:hover{background:#003bd5;box-shadow:0 5px 14px #144fff26}
  nav .header-cta:hover{background:var(--blue);color:#fff}
  .case-button:hover{background:var(--paper);color:#171b1c;border-color:var(--paper)}
  .contact-button:hover{background:#10121d;color:#fff}
  .dialog-close:hover{background:#e5eaff;color:var(--blue)}
}
@media(prefers-reduced-motion:reduce){.button,nav .header-cta,.dialog-close{transition:none}}
/* Fit the introduction to the available screen; retain generous section spacing. */
@media(min-width:761px){
  .header,.hero{--s:min(clamp(1px,.113250283vw,1.63080408px),calc((100svh - 24px)/541))}
  .header.wrap,.hero-inner.wrap,.hero-features.wrap{width:min(calc(100% - 96*var(--s)),calc(787*var(--s)))}
  .hero{padding-bottom:12px}
  .experience{height:auto;padding-block:clamp(56px,6vw,96px)}
  .experience-grid{height:auto;min-height:calc(302*var(--s));margin-top:calc(38*var(--s))}
  .section-bottom{margin-top:calc(34*var(--s));padding-top:calc(18*var(--s))}
  .case{height:calc(372*var(--s) + 96px)}
  .case-copy{padding-top:calc(29*var(--s) + 48px)}
  .case-image{top:50%;right:calc(-30*var(--s));width:calc(505*var(--s));height:auto;transform:translateY(-50%) perspective(1600px) rotateY(-5deg) rotateZ(-1.5deg)}
  .approach{padding-top:clamp(60px,6vw,96px);padding-bottom:clamp(40px,4vw,64px)}
  .contact-banner{margin-top:calc(40*var(--s))}
}
.case-image{border:calc(6*var(--s)) solid #eef1eb;border-radius:calc(12*var(--s));box-shadow:0 20px 38px #0005;mask-image:none;-webkit-mask-image:none}
@media(max-width:760px){
  .experience{padding-block:56px}
  .experience-grid{margin-top:36px;gap:44px}
  .case-inner{padding-top:44px;padding-bottom:36px}
  .case-image{width:100%;margin:36px 0 0;aspect-ratio:960/660}
  .approach{padding-block:56px 32px}
  .contact-banner{margin-top:40px}
}
@media(min-width:761px) and (max-width:1023px){
  .case{height:auto}
  .case-inner{padding-block:48px}
  .case-copy{width:100%;padding-top:0;margin-left:0}
  .case-image{position:relative;display:block;top:auto;right:auto;width:100%;max-width:660px;transform:none;margin:40px auto 0}
}
@media(max-width:760px){
  .hero-inner{padding-top:16px}
  .hero-description{margin-top:16px}
  .hero-action{margin-top:20px}
  .hero-art{width:min(calc(100% + 40px),calc(30svh * 548 / 406));margin:16px auto 0}
  .hero-person{bottom:calc(14svh + 42px);right:0}
  .hero-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-block:16px;align-items:start}
  .hero-features p{display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:12px;line-height:1.25;white-space:normal}
}
/* Each section has its own screen-height budget; content stays in normal flow. */
@media(min-width:761px){
  .header,.hero,.case,.approach{--s:min(.113250283vw,1.63080408px,calc((100svh - 24px)/541))}
  .experience{--s:min(.113250283vw,1.63080408px,calc((100svh - 24px)/580))}
  .experience .wrap,.case .wrap,.approach .wrap{width:min(calc(100% - 96*var(--s)),calc(787*var(--s)))}
  .experience{padding-block:calc(40*var(--s))}
  .experience-grid{margin-top:calc(32*var(--s));min-height:calc(280*var(--s))}
  .benefits article+article{margin-top:calc(28*var(--s))}
  .section-bottom{margin-top:calc(24*var(--s));padding-top:calc(14*var(--s))}
  .case{height:calc(468*var(--s))}
  .case-inner{padding-block:0}
  .case-copy{width:calc(302*var(--s));margin-left:calc(-4*var(--s));padding-top:calc(77*var(--s))}
  .case-image{position:absolute;display:block;top:50%;right:calc(-30*var(--s));width:calc(505*var(--s));max-width:none;margin:0;height:auto;transform:translateY(-50%) perspective(1600px) rotateY(-5deg) rotateZ(-1.5deg)}
  .approach{padding-block:calc(48*var(--s))}
  .approach-inner{min-height:calc(200*var(--s))}
  .contact-banner{width:calc(809*var(--s));max-width:calc(100% - 74*var(--s));margin-top:calc(40*var(--s))}
}
@media(max-width:760px){
  .experience{padding-block:20px}
  .experience h2{font-size:clamp(24px,7.5vw,30px);line-height:1.04;margin-top:12px}
  .experience-grid{gap:20px;margin-top:20px}
  .experience .group-title{font-size:11px;letter-spacing:1px;line-height:1.2;margin-bottom:12px}
  .benefits article{grid-template-columns:24px 1fr;gap:12px}
  .benefit-icon{width:24px;height:28px}
  .benefits article+article{margin-top:12px}
  .benefits h4{font-size:16px;line-height:1.15;margin-bottom:4px}
  .benefits p{font-size:13px;line-height:1.25}
  .project-list li{grid-template-columns:20px minmax(0,1fr) minmax(0,1.05fr);gap:8px;min-height:32px;padding-block:3px}
  .project-list li>span{font-size:13px}
  .project-list h4{font-size:13px;line-height:1.15;letter-spacing:-.25px}
  .project-list p{grid-column:auto;font-size:11.5px;line-height:1.2}
  .section-bottom{margin-top:16px;padding-top:12px;font-size:12px;line-height:1.3}
  .section-bottom a{min-height:32px;margin-top:2px}
  .case-inner{padding-block:28px}
  .case-copy .case-rule{margin-block:20px}
  .case-image{margin-top:24px}
  .approach{padding-block:32px}
  .approach-inner{gap:24px}
  .steps li{padding-bottom:20px}
  .contact-banner{margin-top:24px}
}
@media(max-width:379px){
  .project-list li{padding-block:0}
  .benefits article{grid-template-columns:1fr}
  .benefits .benefit-icon{display:none}
  .experience{padding-block:14px}
  .experience-grid{margin-top:14px;gap:14px}
  .benefits article+article{margin-top:8px}
  .section-bottom{margin-top:10px}
}
/* Keep the hover surface and hit area stable; interpolate only the blue color. */
.hero-action .primary{background-image:none;background-color:#1355fc;box-shadow:none;transform:none;transition:background-color .18s ease}
@media(hover:hover){
  .hero-action .primary:hover{background-image:none;background-color:#003bd5;box-shadow:none}
}
.hero-action .primary:active{background-color:#0033b5;transform:none}
@media(prefers-reduced-motion:reduce){.hero-action .primary{transition:none}}
/* Horizontal gutters depend on width, independently from section-height scaling. */
:root{--gutter:clamp(20px,4vw,64px);--content-max:1792px}
.page{width:100%;max-width:none}
.wrap,.header.wrap,.hero-inner.wrap,.hero-features.wrap,.experience .wrap,.case .wrap,.approach .wrap{
  width:calc(100% - 2*var(--gutter));max-width:var(--content-max)
}
.contact-banner{width:calc(100% - 2*var(--gutter));max-width:var(--content-max)}
@media(min-width:761px){
  nav{margin-right:0}
  .hero-art{right:0}
  .hero-person{left:auto;right:0}
  .hero-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .hero-features p:nth-child(2){justify-self:center}
  .hero-features p:last-child{justify-self:end}
  .case-copy{margin-left:0}
  .case-image{right:0}
}
@media(max-width:760px){:root{--gutter:20px}}
/* Keep the portrait close to the action, and group the three promises. */
.feature-icon{fill:none;stroke:var(--blue);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.hero-features p{gap:10px}
@media(min-width:761px){
  .hero{--s:min(calc((100vw - 2*var(--gutter))/1040),1.63080408px,calc((100svh - 24px)/541))}
  .hero-inner.wrap{max-width:calc(1040*var(--s))}
  .hero-action .button{min-width:220px;min-height:44px;font-size:max(14px,calc(14*var(--s)))}
  .hero-features{grid-template-columns:repeat(3,max-content);justify-content:center;column-gap:clamp(28px,5vw,80px)}
  .hero-features p{font-size:max(13px,calc(14*var(--s)))}
  .hero-features p:nth-child(2),.hero-features p:last-child{justify-self:start}
  .feature-icon{width:max(22px,calc(24*var(--s)));height:max(22px,calc(24*var(--s)))}
}
@media(max-width:760px){
  .hero-art{margin-top:8px}
  .hero-features{column-gap:10px}
  .hero-features p{gap:6px}
  .feature-icon{width:22px;height:22px}
}
/* A single composition width aligns every section with the introduction. */
@media(min-width:761px){
  :root{--layout-s:min(calc((100vw - 2*var(--gutter))/1040),1.63080408px,calc((100svh - 24px)/541));--layout-width:calc(1040*var(--layout-s))}
  .header,.hero,.case,.approach{--s:var(--layout-s)}
  .experience{--s:min(calc((100vw - 2*var(--gutter))/1040),1.63080408px,calc((100svh - 24px)/580))}
  .wrap,.header.wrap,.hero-inner.wrap,.hero-features.wrap,.experience .wrap,.case .wrap,.approach .wrap,.contact-banner{max-width:var(--layout-width)}
  .case-copy{width:calc(440*var(--s));padding-top:calc(40*var(--s))}
  .case-copy .case-rule{margin-top:calc(16*var(--s));margin-bottom:calc(20*var(--s));width:calc(360*var(--s))}
}
.case-list{list-style:none;margin:calc(16*var(--s)) 0 0;padding:0;display:grid;gap:calc(7*var(--s));font-size:calc(14*var(--s));line-height:1.3;color:#e4eae6}
.case-list li{display:flex;align-items:baseline;gap:calc(10*var(--s))}
.case-list li::before{content:"";width:calc(6*var(--s));height:calc(6*var(--s));border-radius:50%;background:#91d8ad;flex:none;align-self:flex-start;margin-top:.45em}
@media(max-width:760px){.case-list{font-size:14px;gap:7px;margin-top:16px}.case-copy .case-rule{margin-block:16px}.case-button{margin-top:18px}}
@media(max-width:379px){.case-inner{padding-block:24px}}
/* Animate SVG components, with a pause between each short gesture. */
.feature-icon{overflow:visible}
.slider-knob{fill:var(--paper);transform-box:fill-box;transform-origin:center}
.gear-wheel{transform-box:fill-box;transform-origin:center}
.chart-bar{transform-box:fill-box;transform-origin:center bottom;fill:#144fff16}
.hero-action .primary{position:relative;isolation:isolate}
.hero-action .primary::before,.hero-action .primary::after{content:"";position:absolute;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0}
.hero-action .primary::before{inset:0;background:var(--blue);box-shadow:0 0 24px 10px #144fff50;transition:opacity .2s ease}
.hero-action .primary::after{inset:-3px;border:2px solid #144fffaa;box-shadow:0 0 0 4px #144fff12}
@keyframes slider-forward{0%,15%,75%,100%{transform:translateX(0)}35%,55%{transform:translateX(6px)}}
@keyframes slider-backward{0%,15%,75%,100%{transform:translateX(0)}35%,55%{transform:translateX(-6px)}}
@keyframes gear-index{0%,18%{transform:rotate(0)}48%,100%{transform:rotate(60deg)}}
@keyframes chart-rise{0%,15%,85%,100%{transform:scaleY(.65)}40%,65%{transform:scaleY(1)}}
@keyframes cta-glow{0%,100%{opacity:.2;transform:scale(1)}25%{opacity:.8;transform:scale(1.02,1.08)}60%{opacity:.3;transform:scale(1)}}
@keyframes cta-wave{0%{transform:scale(1);opacity:0}12%{opacity:.7}70%,100%{transform:scale(1.16,1.5);opacity:0}}
@media(prefers-reduced-motion:no-preference){
  .knob-first,.knob-third{animation:slider-forward 4.8s cubic-bezier(.4,0,.2,1) infinite}
  .knob-second{animation:slider-backward 4.8s cubic-bezier(.4,0,.2,1) infinite;animation-delay:-.25s}
  .knob-third{animation-delay:-.5s}
  .gear-wheel{animation:gear-index 4.8s cubic-bezier(.4,0,.2,1) infinite}
  .chart-bar{animation:chart-rise 4.8s cubic-bezier(.4,0,.2,1) infinite}
  .bar-second{animation-delay:-.3s}.bar-third{animation-delay:-.6s}
  .hero-action .primary::before{animation:cta-glow 2.8s ease-in-out infinite}
  .hero-action .primary::after{animation:cta-wave 2.8s ease-out infinite}
}
.hero[data-motion="paused"] .slider-knob,.hero[data-motion="paused"] .gear-wheel,.hero[data-motion="paused"] .chart-bar,.hero[data-motion="paused"] .primary::before,.hero[data-motion="paused"] .primary::after{animation-play-state:paused}
@media(hover:hover){
  .hero-action .primary:hover::before{animation:none;opacity:.6;transform:none}
  .hero-action .primary:hover::after{animation:none;opacity:0}
}
.hero-action .primary:focus-visible::before{animation:none;opacity:.4;transform:none}
.hero-action .primary:focus-visible::after,.hero-action .primary:active::after{animation:none;opacity:0}
.hero-action .primary:active::before{animation:none;opacity:.3;transform:none}
@media(prefers-reduced-motion:reduce){.hero-action .primary::before{transition:none}}
/* A clear trial offer and a matching contact action. */
.contact-copy{position:relative;z-index:1;min-width:0}
.contact-banner h2{font-size:calc(26*var(--s));line-height:1.12;letter-spacing:calc(-.6*var(--s))}
.contact-copy p{font-size:calc(14*var(--s));line-height:1.3;margin-top:calc(5*var(--s));color:#fff}
.contact-button{width:auto;min-width:calc(232*var(--s));white-space:nowrap}
.contact-banner{min-height:calc(90*var(--s))}
@media(max-width:760px){
  .contact-banner h2{font-size:26px;letter-spacing:-.5px}
  .contact-copy p{font-size:15px;margin-top:8px}
  .contact-button{width:100%;min-width:0;padding-inline:16px}
}
@media(max-width:379px){
  .approach{padding-block:16px}
  .approach h2{font-size:28px}
  .approach-inner{gap:20px}
  .steps li{padding-bottom:14px}
  .steps li:last-child{padding-bottom:0}
  .contact-banner{padding:16px;gap:14px;margin-top:20px}
  .contact-banner h2{font-size:24px}
}
/* A quiet, aligned closing surface with real contact and section links. */
.footer{border-top:1px solid var(--line);padding-block:32px 18px;font-size:14px;color:var(--body)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.1fr) auto minmax(0,1fr);gap:32px;align-items:start}
.footer-brand .brand{display:inline-flex;align-items:center;min-height:44px;font-size:28px;letter-spacing:-1.3px;color:var(--ink)}
.footer-brand p{margin-top:2px;font-size:14px;line-height:1.4}
.footer-nav{margin:0;gap:0;font-size:14px}
.footer-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px 22px;margin:0;padding:0}
.footer-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--body);transition:color .18s ease}
.footer-contact{justify-self:end}
.footer-contact p{font-size:13px;line-height:1.4;color:var(--muted);margin-bottom:4px}
.footer-contact-links>a:not(.footer-telegram){display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--blue);font-size:16px;font-weight:500}
.footer-contact .icon{width:16px;height:16px;stroke-width:1.6}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;padding-top:12px;border-top:1px solid #c8cad070;font-size:13px;color:var(--muted)}
.footer-top-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--body);font-size:14px}
.footer-top-link .icon{width:14px;height:14px}
@media(hover:hover){.footer a:hover{color:var(--blue)}.footer-contact-links>a:not(.footer-telegram):hover{text-decoration:underline;text-underline-offset:4px}}
@media(max-width:1023px){.footer-grid{grid-template-columns:1fr auto;gap:16px 24px}.footer-nav{grid-column:1/-1;grid-row:2}.footer-contact{align-self:center}}
@media(max-width:760px){.footer{padding-block:28px 12px}.footer-grid{grid-template-columns:1fr;gap:14px}.footer-contact{justify-self:start}.footer-nav{grid-column:auto;grid-row:auto}.footer-nav ul{gap:4px 24px}.footer-bottom{margin-top:18px}.footer-brand p{max-width:30ch}}
@media(prefers-reduced-motion:reduce){.footer-nav a{transition:none}}
@media(max-width:379px){.case h2{font-size:28px;line-height:1.08}}

/* Mobile reading order: introduction, portrait, action, then the benefits. */
.hero-portrait{display:contents}
.hero-person{left:auto;right:calc(58*var(--s));top:auto;bottom:calc(24*var(--s));z-index:2;color:#fff;text-shadow:0 1px 8px #0008}
.hero-person strong{display:block;font-size:calc(17*var(--s));line-height:1.2}
.hero-person p{color:#e4e7ef;white-space:nowrap;font-size:calc(12*var(--s));line-height:1.3;margin-top:4px}
.hero-benefits{display:none}
.benefits p{overflow-wrap:normal;word-break:normal;text-wrap:pretty}
@media(min-width:761px){
  .hero-copy{height:100%}
  .experience{margin-top:clamp(24px,4svh,48px)}
  .case,.approach{margin-top:clamp(24px,4svh,48px)}
  .benefits h4{white-space:normal}
}
@media(max-width:760px){
  .hero-inner{display:flex;flex-direction:column;padding-top:20px}
  .hero-copy{display:contents}
  .hero-copy>.eyebrow{order:1}
  .hero-copy>h1{order:2}
  .hero-description{order:3}
  .hero-portrait{order:4;display:block;position:relative;width:min(100%,440px);margin:24px auto 0}
  .hero-art{width:100%;height:auto;margin:0;mix-blend-mode:normal}
  .hero-person{top:auto;bottom:18px;right:18%;font-size:13px}
  .hero-person strong{font-size:17px}
  .hero-person p{font-size:12px}
  .hero-action{order:5;margin-top:24px}
  .hero-features{display:none}
  .hero-benefits{display:block;margin-top:32px;padding-block:24px 32px;border-top:1px solid var(--line)}
  .hero-benefits:empty{display:none}
  .experience-grid>.benefits{display:none}
  .benefits .group-title{font-size:11px;letter-spacing:1px;margin-bottom:22px}
  .benefits article{grid-template-columns:24px minmax(0,1fr);gap:8px 12px;align-items:center}
  .benefits article>div{display:contents}
  .benefits .benefit-icon{display:block;width:24px;height:26px;grid-column:1;grid-row:1}
  .benefits h4{grid-column:2;grid-row:1;font-size:17px;line-height:1.2;margin:0;letter-spacing:-.2px}
  .benefits p{grid-column:1/-1;font-size:14px;line-height:1.45;width:auto;max-width:46ch;letter-spacing:0}
  .benefits article+article{margin-top:24px}
  .experience{margin-top:24px;padding-block:32px}
  .case,.approach{margin-top:32px}
  .experience-grid{margin-top:24px;gap:0}
  .hero h1,.experience h2,.approach h2{text-wrap:balance}
}
@media(max-width:379px){
  .hero-person{bottom:14px;right:18%}
  .hero-person strong{font-size:15px}
  .hero-person p{font-size:11px}
  .benefits h4{font-size:16px}
}

/* Official clinic artwork, rendered white for the dark project surface. */
.case-brand{display:block}
.case-logo{display:block;width:calc(300*var(--s));max-width:100%;height:auto;filter:brightness(0) invert(1)}
.case-brand>p{font-size:calc(14*var(--s));line-height:1.25;margin-top:calc(10*var(--s));font-weight:400}
@media(min-width:761px){.case{height:calc(520*var(--s))}}
@media(max-width:760px){.case-logo{width:280px}.case-brand>p{font-size:16px;margin-top:10px}}
@media(max-width:379px){.case-logo{width:220px}.case-brand>p{font-size:14px;margin-top:8px}}

/* Pulse the trial action's halo, keeping its label and hit area still. */
.contact-button{position:relative;isolation:isolate;transform:none}
.contact-button::before,.contact-button::after{content:"";position:absolute;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0}
.contact-button::before{inset:0;box-shadow:0 0 20px 7px #ffffff70}
.contact-button::after{inset:-3px;border:2px solid #ffffffc0}
@keyframes trial-glow{0%,100%{opacity:.15;transform:scale(1)}25%{opacity:.8;transform:scale(1.02,1.08)}65%{opacity:.2;transform:scale(1)}}
@keyframes trial-wave{0%{opacity:0;transform:scale(1)}12%{opacity:.75}70%,100%{opacity:0;transform:scale(1.08,1.4)}}
@media(prefers-reduced-motion:no-preference){
  .contact-button::before{animation:trial-glow 3.2s ease-in-out infinite}
  .contact-button::after{animation:trial-wave 3.2s ease-out infinite}
}
.contact-banner[data-motion="paused"] .contact-button::before,.contact-banner[data-motion="paused"] .contact-button::after{animation-play-state:paused}
@media(hover:hover){.contact-button:hover::before,.contact-button:hover::after{animation:none;opacity:0}}
.contact-button:focus-visible{outline:3px solid #fff;outline-offset:5px}
.contact-button:focus-visible::before,.contact-button:focus-visible::after,.contact-button:active::before,.contact-button:active::after{animation:none;opacity:0}
.contact-button:active{transform:none}

@media(max-width:760px){
  .hero-action{text-align:center}
  .case-button{display:flex;width:fit-content;max-width:100%;margin-inline:auto}
}

/* Personal monogram and studio name share one compact lockup. */
.brand,.footer-brand .brand{display:inline-flex;align-items:center;gap:14px;letter-spacing:0;color:var(--ink)}
.brand .brand-monogram{display:block;flex:none;color:var(--ink);font-size:34px;line-height:1;font-weight:900;letter-spacing:-1.5px}
.brand .brand-dot{color:var(--blue)}
.brand-copy{display:flex;flex-direction:column;gap:3px;white-space:nowrap}
.brand .brand-lab{color:var(--body);font-size:11.5px;line-height:1.2;font-weight:400;letter-spacing:0}
.brand .brand-development{color:var(--ink);font-size:16px;line-height:1.2;font-weight:500;letter-spacing:0}
@media(min-width:761px){.header{min-height:56px}}
.footer-contact-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.footer .footer-telegram{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;flex:none;border:1px solid var(--blue);border-radius:12px;background:var(--blue);color:#fff;line-height:0;transition:background-color .18s ease,border-color .18s ease}
.telegram-icon{display:block;width:24px;height:24px;flex:none;fill:currentColor;stroke:none}
@media(hover:hover){.footer .footer-telegram:hover{background:#063cdb;border-color:#063cdb;color:#fff}}
@media(max-width:760px){.header .brand{gap:10px}.header .brand-monogram{font-size:30px}.header .brand-lab{font-size:11px}.header .brand-development{font-size:15px}}
@media(max-width:379px){.header .brand{gap:6px}.header .brand-monogram{font-size:25px}.header .brand-lab{font-size:10px}.header .brand-development{font-size:14px}.header nav .header-cta{font-size:10.5px;padding-inline:8px;min-height:44px}}
@media(prefers-reduced-motion:reduce){.footer .footer-telegram{transition:none}}

/* Give the portrait a shallow curved base while preserving the photo's contrast. */
.hero-art{
  -webkit-mask-image:none;
  mask-image:none;
  clip-path:inset(0 round 0 0 46% 46% / 0 0 12% 12%);
}
.hero-person{bottom:calc(70*var(--s))}
@media(max-width:760px){.hero-person{bottom:16%}}