@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/anton-latin.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url(assets/fonts/figtree.woff2) format('woff2')}

:root{--bg:#F3F2ED;--ink:#0E1311;--mut:#56615C;--green:#0E7C66;--deep:#0A2A22;--night:#07140F;--mint:#BDEBD8;--sand:#EAE4D5;--lime:#D4F56A;--cream:#F4F2ED;--vh:100vh;--ox:0px;--oy:0px}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.5 'Figtree',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ol,figure{margin:0}
ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px}
.skip:focus{top:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* ---------- Scene system ---------- */
.js:not(.ready) .stage,.js:not(.ready) .nav{visibility:hidden}
.scene{position:relative;display:block}
.pin{position:sticky;top:0;height:var(--vh);overflow:hidden}
.stage{position:absolute;left:0;top:0;width:1280px;height:800px;transform-origin:0 0;background:var(--bg);container-type:inline-size}
.safe{position:absolute;left:var(--ox);top:var(--oy);width:1280px;height:800px;pointer-events:none}
.safe>*{pointer-events:auto}
.scene--log{z-index:2;margin-top:calc(var(--vh) * -1)}
html.rm .scene--log{margin-top:0}
.scene--log .pin,.scene--log .stage{background:transparent}
.scene--how .stage{background:var(--sand)}
.scene--footer .stage{background:var(--deep);color:var(--cream)}
.d{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.004em;line-height:.9}
.lines .ln{display:block;overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em}
.lines .ln>i{display:block;font-style:normal;white-space:nowrap}

/* ---------- Nav ---------- */
.nav{position:fixed;left:0;top:0;z-index:50;height:64px;width:1280px;transform-origin:0 0;transition:background-color .3s,box-shadow .3s,color .3s}
.nav__in{height:100%;max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:30px;padding:0 40px;font-size:14px;font-weight:500}
.nav.is-solid{background:rgba(243,242,237,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(14,19,17,.08)}
.nav.is-dark{background:rgba(7,20,15,.82);color:var(--cream);box-shadow:0 1px 0 rgba(244,242,237,.08)}
.nav.is-dark .nav__cta{background:var(--cream);color:var(--deep)}
/* Pixel-field lockup, generated inline by tests/gen-logo.cjs. Only the loose pixels move; the grid stays put. */
.s-logo{display:inline-flex;align-items:center;line-height:1}
.s-logo__lock{position:relative;display:block}
.s-logo__lock svg{display:block;height:32px;width:auto}
.s-logo .mt-mark-g{fill:var(--green);transition:fill .3s}
.s-logo .mt-word-g{fill:currentColor}
.nav.is-dark .s-logo .mt-mark-g{fill:var(--lime)}
/* The loose pixels are HTML squares over the mark so their motion runs on the compositor. Percentages keep the
   study's geometry: travel is relative to each square's own size. */
.mt-loose{position:absolute;left:0;top:0;height:100%;color:var(--green);transition:color .3s;pointer-events:none}
.nav.is-dark .mt-loose{color:var(--lime)}
.mt-loose .mt-ember{position:absolute;background:currentColor;animation:mt-pixel-rise var(--ember-duration) var(--ember-delay) infinite linear}
@keyframes mt-pixel-rise{
  0%{transform:translate(0,0) scale(1);opacity:0}
  9%{opacity:1}
  30%{opacity:.98}
  66%{opacity:.72}
  100%{transform:translate(var(--ember-dx),var(--ember-dy)) scale(.32);opacity:0}
}
/* Reduced motion and the Pause motion button both show the complete still mark. The motion starts once the nav is
   visible: Chrome won't hand an animation that began under visibility:hidden to the compositor. */
html.rm .mt-ember,html.motion-still .mt-ember,.js:not(.ready) .mt-ember{animation:none}
@media (prefers-reduced-motion:reduce){.mt-ember{animation:none!important}}
.f9-m{display:inline-block;vertical-align:baseline}
.s-links{display:flex;gap:22px;margin-right:auto;opacity:.85}
.s-links a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.s-pill{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 20px;border-radius:999px;font-weight:600;font-size:15px;white-space:nowrap;border:0;cursor:pointer;transition:transform .2s,background-color .2s}
.s-pill:hover{transform:translateY(-1px)}
.s-pill--dark{background:var(--ink);color:#fff;height:38px;font-size:14px}
.s-pill--light{background:var(--cream);color:var(--deep)}
.s-pill--light:hover{background:#fff}
.s-pill--ghost{border:1px solid rgba(244,242,237,.55);color:var(--cream)}
.s-pill--ghost:hover{border-color:var(--cream)}

/* ---------- 1 Hero ---------- */
.h-card{position:absolute;left:16px;right:16px;top:64px;bottom:16px;border-radius:28px;overflow:hidden;background:#03261F url(assets/hero-fallback.jpg) center/cover;color:var(--cream)}
.h-shader{position:absolute;inset:0}
.h-scrim{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 45%,rgba(3,30,24,.55),rgba(3,30,24,.1))}
.h-copy{position:absolute;left:0;right:0;top:calc(136px + var(--oy));display:grid;justify-items:center;text-align:center;padding:0 40px}
.h-title{font-size:112px;color:#FFFFFF}
.h-sub{margin-top:28px;max-width:470px;font-size:17px;line-height:1.5;color:#DCE9E4}
.h-cta{display:flex;gap:10px;margin-top:28px}
.h-pause{position:absolute;right:20px;bottom:20px;font-size:12px;font-weight:600;color:#CFE3DB;background:transparent;border:1px solid rgba(207,227,219,.35);border-radius:999px;padding:6px 12px;cursor:pointer}
.h-pause:hover{border-color:#CFE3DB}
.b-frame{position:absolute;display:block;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 50px 90px -40px rgba(0,0,0,.55),0 16px 36px -20px rgba(0,0,0,.4)}
.b-chrome{height:34px;background:#F1EFEA;border-bottom:1px solid #E6E2DA;display:flex;align-items:center;gap:6px;padding:0 12px}
.b-chrome i{width:9px;height:9px;border-radius:50%;background:#D5D1C8}
.b-chrome span{margin:0 auto;background:#fff;border-radius:5px;font-size:11px;color:#4A524E;padding:2px 40px}
.b-view{position:relative;display:block;overflow:hidden}
.b-view img{width:100%;height:auto}
.h-frame{left:170px;width:940px;top:700px}
.h-frame .b-view{height:560px}
/* The hero builds itself: layout grid, selection boxes, the cursor, and the frame's wireframe */
.hb-grid{position:absolute;top:0;bottom:0;left:calc(var(--ox) + 24px);width:1200px;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;pointer-events:none;opacity:0;-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.hb-grid i{border-left:1px solid rgba(189,235,216,.13);border-right:1px solid rgba(189,235,216,.13);transform-origin:50% 50%;transform:scaleY(0)}
.hb-over{position:absolute;inset:0;pointer-events:none}
.hb-box{position:absolute;border:1px solid var(--lime);opacity:0}
.hb-box b{position:absolute;width:7px;height:7px;background:#fff;border:1px solid var(--lime)}
.hb-box b:nth-child(1){left:-4px;top:-4px}.hb-box b:nth-child(2){right:-4px;top:-4px}.hb-box b:nth-child(3){left:-4px;bottom:-4px}.hb-box b:nth-child(4){right:-4px;bottom:-4px}
.hb-box em{position:absolute;left:-1px;bottom:100%;margin-bottom:6px;font:700 10px/1 'Figtree',sans-serif;font-style:normal;letter-spacing:.06em;background:var(--lime);color:var(--ink);padding:4px 6px;border-radius:3px;white-space:nowrap}
.hb-gap{position:absolute;width:1px;background:var(--lime);opacity:0}
.hb-gap::before,.hb-gap::after{content:'';position:absolute;left:-4px;width:9px;height:1px;background:var(--lime)}
.hb-gap::before{top:0}.hb-gap::after{bottom:0}
.hb-gap em{position:absolute;right:9px;top:50%;transform:translateY(-50%);font:700 10px/1 'Figtree',sans-serif;font-style:normal;color:var(--lime)}
.hb-cur{z-index:7;opacity:0;transform-origin:1px 1px}
.hb-cur span{background:var(--cream);color:var(--deep);box-shadow:0 6px 16px -8px rgba(7,20,15,.5);transition:transform .3s}
.hb-cur.is-flip span{transform:translateX(calc(-100% - 20px))}
.hb-click{position:absolute;left:-13px;top:-13px;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--lime);opacity:0}
.hb-wire{position:absolute;inset:0;background:#FAF9F6}
.hb-wire svg{display:block;width:100%;height:100%}
.h-frame .b-view img{position:relative}

/* ---------- 2 Problem ---------- */
.p2-snd{position:absolute;left:0;top:0;pointer-events:none;transform-origin:50% 50%}
.p2-head{position:absolute;left:0;right:0;top:338px;text-align:center;display:grid;justify-items:center;transform-origin:50% 0;z-index:1}
.p2-head h2{font-size:104px}
.p2-head h2 .ln{display:block;white-space:nowrap}
.p2w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em;margin-bottom:-.04em}
.p2w>i{display:inline-block;font-style:normal}
.p2-sub{position:absolute;left:0;right:0;top:300px;margin:0 auto;max-width:520px;text-align:center;color:var(--mut);font-size:17px;z-index:1}
.p2-cols{position:absolute;left:120px;right:120px;top:420px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;z-index:1}
.p2-col{position:relative;padding-top:26px}
.p2-rule{position:absolute;left:0;right:0;top:0;height:2px;background:var(--ink);transform-origin:left;transform:scaleX(0)}
.p2-t{display:grid;gap:8px;align-content:start}
.p2-ico{width:34px;height:34px;border-radius:8px;background:var(--night);display:grid;place-items:center;margin-bottom:18px}
.p2-col h3{font:700 19px/1.2 'Figtree',sans-serif}
.p2-col p{font-size:14.5px;color:var(--mut);line-height:1.5}

/* ---------- 3 Services ---------- */
.s3-word{position:absolute;left:0;top:0;font-size:170px;white-space:nowrap}
.s3-orb{position:absolute;left:50%;top:50%;width:330px;height:330px;margin:-165px 0 0 -165px;border-radius:50%;
  background:radial-gradient(38% 38% at 34% 30%,rgba(255,255,255,.95),rgba(255,255,255,0) 60%),radial-gradient(60% 60% at 70% 75%,#0E7C66 0,rgba(14,124,102,0) 70%),conic-gradient(from 40deg,#BDEBD8,#5AD3B4,#0E7C66,#0A4A3E,#5AD3B4,#D4F56A,#BDEBD8);
  box-shadow:inset -30px -40px 80px rgba(3,38,31,.45),inset 20px 20px 60px rgba(255,255,255,.35),0 60px 90px -50px rgba(10,74,62,.6)}
.s3-cards{position:absolute;left:40px;right:40px;top:292px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.s3-card{background:#fff;border-radius:18px;padding:18px;display:grid;gap:10px;align-content:start}
.s3-card h3{font:400 30px/1 'Anton',sans-serif;text-transform:uppercase}
.s3-card p{font-size:14px;color:var(--mut);line-height:1.45}
.s3-art{height:170px;border-radius:12px;background:#F1EFEA;position:relative;overflow:hidden}
.s3-head{position:absolute;left:40px;right:40px;top:96px;display:flex;justify-content:space-between;align-items:end}
.s3-head h2{font-size:84px}
.s3-head p{max-width:390px;font-size:16px;color:var(--mut)}
.s3-foot{position:absolute;left:40px;right:40px;top:628px;font-size:16px;max-width:720px}
.wf{position:absolute;inset:18px;display:grid;gap:8px;align-content:start}
.wf i{display:block;height:12px;border-radius:4px;background:#DCD8CF}
.wf .wf-hero{height:48px;border-radius:6px;background:#DCD8CF;position:relative;overflow:hidden}
.wf .wf-hero::after{content:"";position:absolute;inset:0;background:var(--green);transform:scaleX(var(--f,0));transform-origin:left}
.wf .wf-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.wf .wf-row i{height:34px}
.serp{position:absolute;inset:16px}
.serp i{position:absolute;left:0;right:0;height:26px;border-radius:6px;background:#E2DED5;display:flex;align-items:center;padding-left:8px;font-size:10px;font-style:normal;color:#8A938F}
.serp i.you{background:var(--green);color:#fff;font-weight:700}
.gad{position:absolute;inset:16px}
.gad .q{height:30px;border-radius:15px;background:#fff;border:1px solid #DDD9D0;font-size:11px;line-height:28px;padding-left:12px;color:#2C3531;white-space:nowrap;overflow:hidden}
.gad .res{margin-top:12px;background:#fff;border-radius:8px;padding:8px 10px;font-size:10px;line-height:1.35;color:#56615C}
.gad .res b{display:block;color:#1A4FC4;font-size:12px}
.gad .res em{font-style:normal;font-weight:700;color:#0E1311;margin-right:4px}
.feed{position:absolute;left:50%;top:12px;width:120px;margin-left:-60px;bottom:-10px;background:#fff;border-radius:14px 14px 0 0;padding:8px;box-shadow:0 10px 30px -18px rgba(0,0,0,.3)}
.feed .top{display:flex;gap:5px;align-items:center;font-size:8px;color:#56615C}
.feed .top i{width:14px;height:14px;border-radius:50%;background:var(--green)}
.feed .img{margin-top:6px;height:82px;border-radius:6px;background:linear-gradient(135deg,#0E7C66,#5AD3B4 60%,#D4F56A)}
.feed .heart{position:absolute;left:14px;bottom:18px;font-size:13px;color:#E0245E}
.feed .cta{position:absolute;right:8px;bottom:16px;font-size:8px;font-weight:700;background:#EEF3F1;border-radius:4px;padding:3px 6px}

/* ---------- 4 Log ---------- */
.p4-panel{position:absolute;left:0;right:0;top:76px;bottom:-40px;border-radius:64px 64px 0 0;background:var(--mint)}
.p4-cover{position:absolute;left:0;right:0;top:0;height:77px;background:var(--bg);opacity:0}
.p4-left{position:absolute;left:64px;top:116px;width:470px;color:var(--night)}
.p4-left h2{font-size:92px}
.p4-left p{margin-top:22px;font-size:15px;color:#2E4A40;max-width:360px}
.p4-month{margin-top:30px;display:grid;gap:8px;max-width:360px}
.p4-month span{font-size:12px;font-weight:700;letter-spacing:.08em}
.p4-month b{display:block;height:6px;border-radius:3px;background:rgba(7,20,15,.12);overflow:hidden}
.p4-month b i{display:block;height:100%;width:100%;background:var(--night);transform-origin:left;transform:scaleX(0)}
.p4-log{position:absolute;left:616px;right:64px;top:116px;height:614px;overflow:hidden;color:var(--night);-webkit-mask:linear-gradient(#000 78%,transparent);mask:linear-gradient(#000 78%,transparent)}
.p4-item{position:absolute;left:0;right:0;top:0;height:92px;background:#fff;border-radius:14px;padding:14px 18px;display:grid;grid-template-columns:62px 1fr;gap:4px 14px;align-content:center}
.p4-item time{font-size:13px;color:#56615C;grid-row:span 2;padding-top:2px}
.p4-item .tag{justify-self:start;font-size:10.5px;font-weight:700;letter-spacing:.06em;border-radius:5px;padding:2px 7px}
.p4-item p{font-size:16px;line-height:1.35;font-weight:500}
.tag--web{background:var(--green);color:#fff}.tag--seo{background:var(--night);color:#fff}.tag--gads{background:#E5E2DA;color:var(--night)}.tag--meta{background:var(--lime);color:var(--night)}.tag--rep{background:#fff;color:var(--night);box-shadow:inset 0 0 0 1.5px var(--night)}

/* ---------- 5 Work ---------- */
.w5-top{position:absolute;left:40px;top:96px;font-size:84px}
.w5-card{position:absolute;left:0;top:0;background:var(--night);color:var(--cream);overflow:hidden}
.w5-in{position:absolute;left:0;top:0;transform-origin:0 0}
.w5-safe{position:absolute;left:var(--ox);top:var(--oy);width:1280px;height:800px}
.w5-eye{position:absolute;left:64px;top:128px;font-size:13px;font-weight:600;letter-spacing:.08em;color:#9FC9BA}
.w5-chaps{position:absolute;left:64px;top:170px;width:450px;display:grid}
.w5-chap{grid-area:1/1;display:grid;gap:18px;align-content:start}
.w5-chap .k{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--lime)}
.w5-chap h3{font:400 76px/.92 'Anton',sans-serif;text-transform:uppercase}
.w5-chap p{font-size:17px;color:#C9D8D2;max-width:400px}
.odo{display:inline-flex;overflow:hidden;height:.92em;vertical-align:top}
.odo span{display:flex;flex-direction:column}
.odo span i{font-style:normal;height:.92em;line-height:.92}
.w5-prog{position:absolute;left:64px;bottom:64px;display:flex;gap:8px;width:450px}
.w5-prog b{flex:1;height:3px;border-radius:2px;background:rgba(244,242,237,.18);overflow:hidden}
.w5-prog b i{display:block;height:100%;background:var(--cream);transform-origin:left;transform:scaleX(0)}
.w5-frame{left:600px;top:120px;width:620px}
.w5-frame .b-view{height:520px;background:#fff}
.wc-old,.wc-new{position:absolute;left:0;top:0;width:100%}
.wc-old{filter:saturate(.6)}
.wc-new{height:100%;overflow:hidden;clip-path:inset(0 0 100% 0)}
.wc-new img{width:100%;height:auto}
.wc-scan{position:absolute;left:0;right:0;top:0;height:3px;background:#5AD3B4;box-shadow:0 0 18px 6px rgba(90,211,180,.55);opacity:0}
.wc-tag{position:absolute;left:14px;top:14px;background:#C8312A;color:#fff;font:700 11px/1 'Figtree',sans-serif;letter-spacing:.08em;padding:7px 10px;border-radius:6px;opacity:0}
.wc-float{position:absolute;margin:0;border-radius:14px;box-shadow:0 30px 60px -28px rgba(0,0,0,.75);opacity:0}
.wc-serp{left:540px;top:500px;width:460px;background:#202124;padding:10px 12px 12px}
.wc-serp figcaption{font:600 11px/1 'Figtree',sans-serif;color:#9AA0A6;letter-spacing:.04em;margin:2px 2px 8px}
.wc-serp img{display:block;width:100%;height:auto;border-radius:6px}
.wc-dots{left:540px;top:496px;width:390px;background:#fff;color:var(--ink);padding:16px 18px}
.wc-dots b{display:block;font:700 18px/1.2 'Figtree',sans-serif}
.wc-dots .grid{display:grid;grid-template-columns:repeat(34,1fr);gap:3px;margin-top:12px}
.wc-dots .grid i{aspect-ratio:1;border-radius:2px;background:#E6E3DA}
.wc-dots .grid i.on{background:var(--green)}
.wc-month{left:540px;top:520px;width:370px;background:#fff;color:var(--ink);padding:16px 18px}
.wc-month b{font:700 15px/1.2 'Figtree',sans-serif;display:block;margin-bottom:10px}
.wc-month ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.wc-month li{font-size:14px;display:flex;gap:9px;align-items:center}
.wc-month li i{flex:none;width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;font:700 11px/18px 'Figtree',sans-serif;text-align:center;font-style:normal}

/* ---------- 6 How ---------- */
.h6-title{position:absolute;left:48px;top:96px;font-size:100px}
.h6-lede{position:absolute;left:48px;top:330px;width:420px;font-size:16px;color:#4B4A40}
.h6-line{position:absolute;left:640px;top:90px;width:40px;height:640px}
.h6-step{position:absolute;left:700px;right:48px;display:grid;gap:6px}
.h6-step .n{font:400 22px/1 'Anton',sans-serif;color:var(--green)}
.h6-step h3{font:700 24px/1.15 'Figtree',sans-serif;letter-spacing:-.01em}
.h6-step p{font-size:15.5px;color:#4B4A40;max-width:440px}

/* ---------- 7 Team ---------- */
.t7-title{position:absolute;left:0;right:0;top:128px;text-align:center;font-size:100px}
.t7-sub{position:absolute;left:0;right:0;top:246px;text-align:center;font-size:17px;color:var(--mut)}
.t7-cards{position:absolute;left:120px;right:120px;top:304px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.t7-card{position:relative;background:#fff;border-radius:18px;padding:14px;display:grid;gap:12px}
.t7-ph{height:250px;border-radius:12px;background:#03261F url(assets/hero-fallback.jpg) center/cover;position:relative;overflow:hidden}
.t7-sh{position:absolute;inset:0}
.t7-cut{position:absolute;left:0;top:0;z-index:5;pointer-events:none;transform-origin:0 0;opacity:0;transition:filter .35s}
.t7-cut.is-held{filter:drop-shadow(0 26px 28px rgba(7,20,15,.32))}
.t7-card h3{font:700 18px/1.2 'Figtree',sans-serif}
.t7-card p{font-size:14px;color:var(--mut)}
.cur{position:absolute;left:0;top:0;z-index:6;display:flex;align-items:flex-start;gap:2px;pointer-events:none}
.cur span{font-size:12px;font-weight:700;border-radius:6px;padding:3px 8px;margin-top:14px;white-space:nowrap}

/* ---------- 8 Closing call to action ---------- */
.c8-panel{position:absolute;overflow:hidden;background:#03261F url(assets/hero-fallback.jpg) center/cover}
.c8-shader{position:absolute;left:0;top:0}
.c8-title{position:absolute;left:0;right:0;text-align:center;font-size:120px;z-index:2}
.c8-sub{position:absolute;left:0;right:0;top:505px;text-align:center;font-size:17px;color:var(--mut)}
.c8-form{position:absolute;left:50%;top:555px;width:660px;margin-left:-330px;background:#fff;border-radius:18px;padding:8px;display:flex;gap:8px;box-shadow:0 1px 0 rgba(14,19,17,.05),0 20px 40px -30px rgba(14,19,17,.4)}
.c8-form input{flex:1;min-width:0;border:0;background:transparent;padding:0 14px;height:46px;font-size:16px;border-radius:12px}
.c8-form input+input{border-left:1px solid #ECE9E1;border-radius:0 12px 12px 0}
.c8-form input::placeholder{color:#8A938F}
.c8-form input:focus{outline:none;background:#F6F5F1}
.c8-form .s-pill{height:46px;font-size:15px}
.c8-note{position:absolute;left:0;right:0;top:645px;text-align:center;font-size:13.5px;color:var(--mut)}
.c8-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.c8-form.is-sent{justify-content:center;align-items:center;min-height:62px;font-weight:600;color:var(--green)}

/* ---------- 9 Footer ---------- */
.f9-top{position:absolute;left:48px;right:48px;top:104px;display:flex;justify-content:space-between;gap:40px}
.f9-top p{font-size:20px;max-width:430px;line-height:1.35}
.f9-links{display:grid;gap:10px;font-size:15px;color:#C9D8D2;text-align:right;align-content:start}
.f9-links a:hover,.f9-ai a:hover{color:var(--cream)}
.f9-ai{position:absolute;left:48px;right:48px;top:266px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:18px 0;border-top:1px solid rgba(244,242,237,.14);border-bottom:1px solid rgba(244,242,237,.14);font-size:14px;color:#C9D8D2}
.f9-ai b{color:var(--cream);margin-right:10px}
.f9-ai a{border:1px solid rgba(244,242,237,.25);border-radius:999px;padding:4px 12px}
.f9-mark{position:absolute;left:40px;right:40px;bottom:40px;font-size:208px;white-space:nowrap;display:flex;overflow:hidden;line-height:.86;padding-top:.06em}
.f9-mark i{font-style:normal;display:inline-block}
.f9-legal{position:absolute;left:48px;right:48px;top:346px;font-size:12.5px;color:#8FB0A4;display:flex;gap:20px}

/* ---------- Phone ---------- */
html.is-m .nav{height:56px}
html.is-m .nav__in{padding:0 18px;max-width:375px}
html.is-m .s-links{display:none}
html.is-m .s-logo{margin-right:auto}
html.is-m .s-logo__lock svg{height:26px}
html.is-m .nav__cta{height:34px;font-size:13px;padding:0 14px}
html.is-m .safe,html.is-m .w5-safe{width:375px;height:760px}

@container (max-width:700px){
  .s-pill{height:44px;font-size:15px}
  .h-card{left:8px;right:8px;top:56px;bottom:64px;border-radius:22px}
  .h-copy{top:calc(84px + var(--oy));padding:0 20px}
  .h-title{font-size:58px}
  .h-sub{font-size:16px;margin-top:20px}
  .h-cta{flex-direction:column;width:100%;margin-top:24px}
  .h-cta .s-pill{justify-content:center}
  .h-pause{right:12px;bottom:12px}
  .h-frame{left:22px;width:331px;top:640px}
  .h-frame .b-view{height:300px}
  .hb-grid{left:calc(var(--ox) + 12px);width:335px;grid-template-columns:repeat(4,1fr);gap:16px}
  .hb-grid i:nth-child(n+5){display:none}
  .b-chrome{height:24px}.b-chrome span{font-size:9px;padding:1px 18px}.b-chrome i{width:6px;height:6px}

  .p2-head{top:355px;padding:0 18px}
  .p2-head h2{font-size:50px}
  .p2-sub{top:190px;padding:0 22px;font-size:15.5px;max-width:none}
  .p2-cols{left:20px;right:20px;top:292px;grid-template-columns:1fr;gap:16px}
  .p2-col{padding-top:14px}
  .p2-t{grid-template-columns:34px 1fr;column-gap:12px;row-gap:4px}
  .p2-ico{margin:0;grid-row:span 2}
  .p2-col h3{font-size:16px}
  .p2-col p{font-size:13.5px}

  .s3-word{font-size:92px}
  .s3-orb{width:190px;height:190px;margin:-95px 0 0 -95px}
  .s3-head{left:18px;right:18px;top:70px;display:grid;gap:10px}
  .s3-head h2{font-size:52px}
  .s3-head p{font-size:14.5px}
  .s3-cards{left:14px;right:14px;top:250px;grid-template-columns:1fr 1fr;gap:10px}
  .s3-card{padding:10px;gap:6px;border-radius:14px}
  .s3-card h3{font-size:20px}
  .s3-card p{font-size:12px}
  .s3-art{height:96px}
  .s3-foot{left:18px;right:18px;top:670px;font-size:13.5px}
  .serp{inset:10px}.serp i{height:16px;font-size:8px}
  .gad{inset:10px}.gad .q{height:22px;line-height:20px;font-size:9px}.gad .res{margin-top:6px;padding:5px 7px;font-size:8px}.gad .res b{font-size:9px}
  .feed{width:84px;margin-left:-42px;top:8px}.feed .img{height:40px}
  .wf{inset:10px;gap:5px}.wf .wf-hero{height:26px}.wf .wf-row i{height:18px}.wf i{height:8px}

  .p4-panel{left:0;right:0;top:64px;border-radius:36px 36px 0 0}
  .p4-cover{height:65px}
  .p4-left{left:28px;right:28px;top:84px;width:auto}
  .p4-left h2{font-size:50px}
  .p4-left p{font-size:13.5px;margin-top:12px}
  .p4-month{margin-top:14px}
  .p4-log{left:22px;right:22px;top:340px;height:400px}
  .p4-item{height:78px;padding:10px 12px;grid-template-columns:48px 1fr;column-gap:10px}
  .p4-item p{font-size:13.5px}
  .p4-item time{font-size:11.5px}

  .w5-top{left:18px;top:70px;font-size:52px}
  .w5-eye{left:20px;top:84px}
  .w5-chaps{left:20px;right:20px;top:112px;width:auto}
  .w5-chap{gap:10px}
  .w5-chap h3{font-size:46px}
  .w5-chap p{font-size:14.5px}
  .w5-prog{left:20px;right:20px;width:auto;bottom:28px}
  .w5-frame{left:20px;top:400px;width:335px}
  .w5-frame .b-view{height:290px}
  .wc-serp,.wc-dots,.wc-month{left:30px;right:30px;width:auto;top:548px}
  .wc-serp{padding:8px 9px 9px}
  .wc-dots{padding:12px 14px}
  .wc-dots b{font-size:15px}
  .wc-dots .grid{gap:2px;margin-top:8px}
  .wc-month{padding:12px 14px}
  .wc-month li{font-size:12.5px}
  .wc-tag{left:8px;top:8px;font-size:9px;padding:5px 7px}

  .h6-title{left:20px;top:80px;font-size:56px}
  .h6-lede{left:20px;top:200px;width:auto;right:20px;font-size:14.5px}
  .h6-line{left:20px;top:290px;height:450px}
  .h6-step{left:66px;right:18px}
  .h6-step h3{font-size:18px}
  .h6-step p{font-size:13.5px}
  .h6-step .n{font-size:17px}

  .t7-title{top:80px;font-size:52px;padding:0 16px}
  .t7-sub{top:200px;font-size:14.5px;padding:0 24px}
  .t7-cards{left:14px;right:14px;top:258px;grid-template-columns:1fr;gap:10px}
  .t7-card{grid-template-columns:120px 1fr;align-items:center;padding:10px}
  .t7-ph{height:120px;grid-row:span 2}
  .t7-card h3{font-size:16px;align-self:end}
  .t7-card p{font-size:13px;align-self:start}

  .c8-title{font-size:60px;padding:0 14px}
  .c8-sub{top:318px;font-size:15px;padding:0 24px}
  .c8-form{left:14px;right:14px;width:auto;margin:0;top:396px;flex-direction:column}
  .c8-form input{height:44px}
  .c8-form input+input{border-left:0;border-top:1px solid #ECE9E1;border-radius:0}
  .c8-form .s-pill{justify-content:center}
  .c8-note{top:580px;padding:0 20px}

  .f9-top{left:20px;right:20px;top:76px;flex-direction:column;gap:22px}
  .f9-top p{font-size:17px}
  .f9-links{text-align:left;grid-auto-flow:column;justify-content:start;gap:16px;font-size:14px}
  .f9-ai{left:20px;right:20px;top:270px;font-size:12.5px;gap:6px}
  .f9-ai b{width:100%}
  .f9-legal{left:20px;right:20px;top:380px;flex-wrap:wrap;gap:10px}
  .f9-mark{left:14px;right:14px;bottom:26px;font-size:60px}
}