/* GENERATED by the build step — do not edit.
   Source order: tokens/fonts, tokens/colors, tokens/typography, tokens/spacing, css/site.css, css/motion.css
   Regenerate after editing any of those files. */

/* fonts */
:root{--font-display:'Space Grotesk',-apple-system,system-ui,sans-serif;--font-ui:'Plus Jakarta Sans',-apple-system,system-ui,'Segoe UI',Helvetica,Arial,sans-serif;--font-mono:'JetBrains Mono',Menlo,'Ubuntu Mono',monospace}

/* colors */
:root{
--color-primary:#ffffff;--color-on-primary:#000000;
--color-surface-canvas-dark:#ffffff;--color-surface-night:#ebebeb;--color-surface-gray:#f2f5f7;--color-surface-canvas-light:#000000;
--color-surface-press-light:#1a1a1a;--color-surface-press-stronger:#262626;
--color-ink:#ffffff;--color-ink-deep:#ebebeb;--color-ink-press:#e6e6e6;
--color-on-dark-muted:rgba(0,0,0,0.72);--color-on-dark-faint:rgba(0,0,0,0.14);
--color-accent-orange:#f79621;--color-accent-blue:#00aeff;--color-accent-red:#EE4433;--color-accent-teal:#0db695;--color-accent-teal-deep:#0a6e5c;
--color-hairline-dark:#d9d9d9;--color-hairline-cool:#262626;--color-hairline-cloud:#131313;
--color-ring-focus:rgba(69,171,248,0.5);
--shadow-0:none;
--shadow-1:0 2px 8px rgba(255,255,255,0.28);
--shadow-2:0 10px 24px -6px rgba(255,255,255,0.35),0 4px 8px -4px rgba(255,255,255,0.3);
--shadow-glow:0 0 0 8px rgba(255,255,255,0.9),0 0 40px 10px rgba(238,155,60,0.22);
--shadow-press:inset 0 2px 6px rgba(255,255,255,0.22);
}

/* typography */
:root{
--text-display-hero:700 clamp(2.75rem,6vw,5.25rem)/1.08 var(--font-display);
--text-display-lg:600 clamp(2.25rem,4vw,3.5rem)/1.12 var(--font-display);
--text-heading-xl:600 2rem/1.2 var(--font-display);
--text-heading-lg:600 1.625rem/1.25 var(--font-display);
--text-heading-md:600 1.375rem/1.3 var(--font-ui);
--text-heading-sm:600 1.125rem/1.3 var(--font-ui);
--text-body-lg:400 1.0625rem/1.7 var(--font-ui);
--text-body-md:500 1rem/1.5 var(--font-ui);
--text-body-strong:600 1rem/1.5 var(--font-ui);
--text-eyebrow:600 0.875rem/1.4 var(--font-ui);
--letter-eyebrow:0.06em;
--text-button-cap:700 0.875rem/1.15 var(--font-ui);
--letter-button-cap:0.04em;
--text-caption:400 0.8125rem/1.45 var(--font-ui);
--text-micro-cap:600 0.6875rem/1.6 var(--font-ui);
--letter-micro-cap:0.05em;
--text-code:400 0.9375rem/1.55 var(--font-mono);
--text-code-strong:700 0.9375rem/1.55 var(--font-mono);
}

/* spacing */
:root{
--space-xxs:2px;--space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:24px;--space-xxl:32px;--space-section:96px;
--radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:10px;--radius-xl:12px;--radius-xxl:20px;--radius-full:9999px;
--container-max:1152px;
}

/* css/site.css */
*{margin:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font:var(--text-body-md);font-family:var(--font-ui);background:var(--color-surface-canvas-dark);color:var(--color-on-primary);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--color-accent-blue);text-decoration:none}
a:hover{text-decoration:underline}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--color-on-primary);color:var(--color-primary);padding:10px 16px;z-index:1000;border-radius:0 0 var(--radius-sm) 0}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--color-ring-focus);outline-offset:2px}
.container{max-width:var(--container-max);margin:0 auto;padding:0 24px}
.section{padding:var(--space-section) 0}
.section-tight{padding:56px 0}
.on-white{background:var(--color-surface-canvas-dark);color:var(--color-on-primary)}
.on-black{background:var(--color-surface-canvas-light);color:var(--color-ink)}
.on-black a{color:#00aeff}
.on-gray{background:var(--color-surface-gray);color:var(--color-on-primary)}
.eyebrow{display:inline-flex;align-items:center;font:600 .68rem/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:inherit;background:none;padding:2px 0 2px 14px;border-radius:0;border-left:3px solid var(--color-accent-teal-deep)}
.on-black .eyebrow{border-left-color:var(--color-accent-teal);color:#fff}
.eyebrow-center{border-left:0;padding:0;gap:12px;letter-spacing:.2em}
.eyebrow-center::before,.eyebrow-center::after{content:"";width:26px;height:1px;background:var(--color-accent-teal-deep);opacity:.6}
.cta-spotlight .eyebrow{border-left:0;padding:0;gap:12px;color:#fff;letter-spacing:.2em}
.cta-spotlight .eyebrow::before,.cta-spotlight .eyebrow::after{content:"";width:26px;height:1px;background:currentColor;opacity:.55}
.icon-chip{width:48px;height:48px;border-radius:var(--radius-lg);display:inline-flex;align-items:center;justify-content:center;margin-bottom:6px}
.icon-chip.c-red{background:rgba(225,83,59,.15)}
.icon-chip.c-blue{background:rgba(69,171,248,.15)}
.icon-chip.c-teal{background:rgba(13,182,149,.15)}
.icon-chip.c-orange{background:rgba(238,155,60,.18)}
.problem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));column-gap:56px;row-gap:8px;margin-top:44px}
.problem-row{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:20px 0}
.problem-row .icon-chip{width:40px;height:40px;margin-bottom:0;border-radius:var(--radius-md);transition:none}
.dg{margin-top:44px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:start}
.dg-list{display:grid;gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}
.dg-item{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;background:#000;cursor:pointer;text-align:left;border:0;color:#fff;font:inherit;transition:background .25s}
.dg-item:hover{background:rgba(255,255,255,.05)}
.dg-box{flex:0 0 auto;width:20px;height:20px;border:1.5px solid rgba(255,255,255,.4);border-radius:4px;display:flex;align-items:center;justify-content:center;margin-top:2px;transition:background .25s,border-color .25s}
.dg-item.on .dg-box{background:var(--color-accent-red);border-color:var(--color-accent-red)}
.dg-box svg{opacity:0;transition:opacity .2s}
.dg-item.on .dg-box svg{opacity:1}
.dg-item p{margin:0;font-size:1.02rem;font-weight:500}
.dg-item small{display:block;margin-top:5px;font-size:.86rem;font-weight:400;opacity:.6}
.dg-panel{position:sticky;top:100px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);padding:28px}
.dg-score{font-family:var(--font-display);font-weight:600;font-size:3.4rem;line-height:1;color:var(--color-accent-red)}
.dg-score em{font-style:normal;font-size:1.1rem;opacity:.5;color:#fff}
.dg-verdict{margin-top:14px;font-size:1rem;line-height:1.5;min-height:76px}
.dg-panel .btn{margin-top:20px;width:100%;justify-content:center}
@media (max-width:900px){.dg{grid-template-columns:1fr;gap:28px}.dg-panel{position:static}}
.ed{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
.ed-lede{position:sticky;top:100px}
.ed-list{border-top:1px solid rgba(255,255,255,.16)}
.ed-item{display:grid;grid-template-columns:112px minmax(0,1fr);gap:22px;padding:24px 4px;border-bottom:1px solid rgba(255,255,255,.12);transition:padding-left .35s,background .35s}
.ed-item:hover{padding-left:14px;background:rgba(255,255,255,.03)}
.ed-item b{font:600 .72rem/1.5 var(--font-mono);color:var(--color-accent-teal)}
.ed-item h3{margin:0;font-family:var(--font-display);font-weight:500;font-size:1.28rem;line-height:1.25}
.ed-item p{margin:7px 0 0;font-size:.95rem;line-height:1.5;opacity:.68;max-width:52ch}
@media (max-width:900px){.ed{grid-template-columns:1fr;gap:32px}.ed-lede{position:static}}
@media (max-width:520px){.ed-item{grid-template-columns:1fr;gap:8px}}
.problems-close{margin-top:40px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 20px;max-width:820px}
.badge-grid{margin-top:28px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;align-items:center}
.aw-strip{padding:16px 0}
.aw-strip .marquee-track{--marquee-copies:2;--marquee-gap:64px;--marquee-dur:46s}
.aw-strip .aw-plain{flex:0 0 auto;height:108px;display:flex;align-items:center;justify-content:center;position:relative}
.aw-year{position:absolute;left:0;right:0;top:70%;text-align:center;font-family:var(--font-ui);font-size:9px;font-weight:500;line-height:1;color:#fff;letter-spacing:.01em;pointer-events:none}
.aw-year i{display:block;font-style:normal;font-size:6px;line-height:.9;opacity:.9}
.portrait{border-radius:var(--radius-xxl);overflow:hidden;background:#111;aspect-ratio:3/4}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.owner-split{display:grid;grid-template-columns:0.82fr 1.18fr;gap:64px;align-items:start}
.portrait-wrap{position:relative}
.portrait-plate{position:absolute;left:18px;bottom:18px;right:18px;background:rgba(0,0,0,.72);color:#fff;border-radius:var(--radius-md);padding:12px 16px;display:flex;flex-direction:column;gap:2px;margin:0}
.portrait-plate b{font:var(--text-body-strong)}
.portrait-plate span{font:var(--text-caption);opacity:.75}
.owner-lead{margin-top:16px;font:var(--text-display-lg);font-size:clamp(1.5rem,2.4vw,2.1rem);font-family:var(--font-display);line-height:1.2;text-wrap:pretty}
.facts{margin-top:34px;display:flex;flex-direction:column}
.fact{padding:24px 0;border-top:1px solid var(--color-hairline-dark)}
.fact h3{margin-bottom:8px}
.fact p{font:var(--text-body-md);opacity:.82;max-width:58ch}
.approach-band{background:#000;color:#fff;position:relative;overflow:hidden}
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.aeo-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.who-statement{font-family:var(--font-display);font-weight:500;font-size:clamp(1.7rem,4vw,3.1rem);line-height:1.16;max-width:30ch;text-wrap:pretty}
.who-statement em{font-style:normal;color:var(--color-accent-orange)}
.who-meta{margin-top:48px;padding-top:26px;border-top:1px solid var(--color-hairline-dark);display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.who-sig{display:flex;align-items:center;gap:16px}
.who-sig img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 22%}
.who-sig>span{display:flex;flex-direction:column;gap:3px}
.who-sig b{font:var(--text-body-strong)}
.who-sig>span>span{font:var(--text-caption);opacity:.65}
.aeo-answer{background:#0b0b0b;color:#fff;border:1px solid #0b0b0b;border-radius:var(--radius-xl);padding:26px;box-shadow:0 20px 44px rgba(0,0,0,.16)}
.aeo-bar{display:flex;align-items:center;gap:9px;font:var(--text-caption);font-family:var(--font-mono);opacity:.55;text-transform:uppercase;letter-spacing:.08em}
.aeo-dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent-teal)}
.aeo-tag{margin-left:auto;opacity:1;font-size:.62rem;border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:2px 7px;letter-spacing:.1em}
.aeo-q{margin-top:20px;font:var(--text-body-strong);opacity:.6}
.aeo-a{margin-top:14px;font-family:var(--font-display);font-weight:500;font-size:1.22rem;line-height:1.45}
.aeo-cite{display:block;margin-top:12px;font:var(--text-caption);font-family:var(--font-mono);color:var(--color-accent-blue)}
.aeo-src{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;gap:8px}
.aeo-chip{display:inline-flex;align-items:center;gap:6px;font:var(--text-caption);padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.07)}
.aeo-chip i{color:var(--color-accent-teal)}
@media (max-width:860px){.aeo-split{grid-template-columns:1fr;gap:34px}}
.bento-cell{position:relative;overflow:hidden;background:#fff;border:1px solid var(--color-hairline-cloud);border-radius:var(--radius-xl);padding:28px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:12px;transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease-out}
.bento-cell:hover,.bento-cell:hover .bento-cta{text-decoration:none}
.bento-cell.feature{grid-row:span 2;background:#000;color:#fff;border-color:#000}
.bento-cell.feature h3{font-family:var(--font-display);font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.12}
.bento-cell.feature>p{font:var(--text-body-lg);opacity:.82;max-width:30ch}
.bento-cell h3{font-family:var(--font-display);font-weight:600;font-size:1.18rem;line-height:1.2;margin:0}
.bento-cell>p{font:var(--text-caption);opacity:.72;margin:0}
.bento-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.bento-list li{display:flex;align-items:flex-start;gap:9px;font:var(--text-caption);opacity:.9}
.bento-list li i{flex:0 0 auto;margin-top:2px;color:var(--color-accent-teal)}
.bento-num{position:absolute;top:16px;right:22px;font-family:var(--font-display);font-weight:700;font-size:2.6rem;line-height:1;opacity:.09}
.bento-cta{margin-top:auto;padding-top:14px;font:var(--text-body-strong);font-size:.85rem;color:var(--color-accent-blue)}
.bento-cell.feature .bento-cta{color:var(--color-accent-orange)}
.bento-cell:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(0,0,0,.14)}
.bento-cell.feature:hover{box-shadow:0 22px 44px rgba(0,0,0,.4)}
@media (max-width:860px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bento-cell.feature{grid-row:auto;grid-column:span 2}}
@media (max-width:520px){.bento{grid-template-columns:1fr}.bento-cell.feature{grid-column:span 1}}
.approach-band .quote-mark{display:block;font:900 8rem/0.7 var(--font-display);color:var(--color-accent-orange);opacity:.9}
.approach-lead{margin-top:18px;font-family:var(--font-display);font-weight:600;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.14;max-width:26ch;text-wrap:pretty}
@media (max-width:860px){.owner-split{grid-template-columns:1fr;gap:36px}}
.aw-strip .aw-plain img{height:100%;width:auto;max-width:150px;object-fit:contain}
.aw-strip a.aw-plain{transition:transform .2s ease-out,opacity .2s ease-out}
.aw-strip .aw-plain.on-light-disc{background:#fff;border-radius:50%;width:108px;height:108px;padding:2px;box-sizing:border-box}
.aw-strip .aw-plain.on-light-disc img{width:100%;height:100%;max-width:none;border-radius:50%;object-fit:contain}
.aw-strip a.aw-plain:hover{transform:scale(1.06)}
.badge-cell{display:flex;align-items:center;justify-content:center}
.badge-cell img{width:100%;max-width:120px;height:120px;object-fit:contain}
.badge-cell.on-dark-disc{background:#000;border-radius:50%;width:120px;height:120px;margin:0 auto;padding:3px;box-sizing:border-box;overflow:hidden}
.badge-cell.on-dark-disc img{max-width:100%;height:100%}
@media (max-width:760px){.badge-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.badge-cell img{height:96px;max-width:96px}}
@media (max-width:440px){.badge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.logo-wall{margin-top:44px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.logo-wall .lg{background:#fff;border-radius:0;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:22px;transition:transform .25s cubic-bezier(.4,0,.2,1)}
.logo-wall .lg:hover{transform:translateY(-4px)}
.logo-wall .lg img{max-width:100%;max-height:100%;object-fit:contain}
@media (max-width:1100px){.logo-wall{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
@media (max-width:900px){.logo-wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.logo-wall .lg{padding:18px}}
@media (max-width:560px){.logo-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.logo-wall .lg{padding:16px}}

.stat-row .stat b{color:var(--color-accent-orange)}
.stat-row .stat:nth-child(2) b{color:var(--color-accent-blue)}
.stat-row .stat:nth-child(3) b{color:var(--color-accent-teal)}
.hero-shape{position:absolute;border-radius:50%;filter:blur(50px);pointer-events:none;z-index:0}
.cta-spotlight{position:relative;overflow:hidden;text-align:center;background:var(--color-accent-teal);color:#06231d;border-top:1px solid rgba(0,0,0,.18);border-bottom:1px solid rgba(0,0,0,.18)}
.cta-spotlight .marquee{position:absolute;inset:0;display:flex;align-items:flex-end;padding-bottom:8px;opacity:.07;z-index:0}
.cta-spotlight .marquee-track{font:var(--text-display-hero);font-family:var(--font-display);white-space:nowrap;color:#06231d;--marquee-copies:3;--marquee-gap:64px;--marquee-dur:40s}
.cta-spotlight .container{max-width:900px;position:relative;z-index:1}
.cta-spotlight .eyebrow{color:#06231d;background:transparent;padding-left:0;padding-right:0;opacity:1}
.cta-spotlight .display{margin-top:14px;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.08;letter-spacing:-.015em}
.cta-spotlight .body-lg{margin-top:18px;opacity:.85;max-width:62ch;margin-left:auto;margin-right:auto}
.cta-spotlight .btn-row{margin-top:32px;justify-content:center}
.btn-outline-dark{background:transparent;color:#06231d;border-style:solid;border-width:1px;border-color:rgba(6,35,29,.45)}
@media(max-width:640px){.cta-spotlight .display{font:var(--text-display-lg);font-family:var(--font-display)}}
section:has(.hero-shape){overflow-x:clip}
h1,h2,h3{font-family:var(--font-display);line-height:1.15;text-wrap:pretty}
.display{font:var(--text-display-hero)}
.h-xl{font:var(--text-heading-xl)}
.h-lg{font:var(--text-heading-lg)}
.h-md{font:var(--text-heading-md);font-family:var(--font-ui)}
.h-sm{font:var(--text-heading-sm);font-family:var(--font-ui)}
.body-lg{font:var(--text-body-lg)}
.body-strong{font:var(--text-body-strong)}
.caption{font:var(--text-caption);opacity:0.75}
p{text-wrap:pretty}
.lead{font:var(--text-body-lg);max-width:640px}
.btn{font:var(--text-button-cap);letter-spacing:var(--letter-button-cap);text-transform:uppercase;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:6px;padding:14px 24px;box-shadow:5px 5px 0 var(--slab,transparent);transition:transform .14s ease-out,box-shadow .14s ease-out,background-color .14s ease-out,color .14s ease-out,border-color .14s ease-out}
.btn:hover{text-decoration:none;transform:translate(5px,5px);box-shadow:0 0 0 var(--slab,transparent)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--slab,transparent)}
@media(prefers-reduced-motion:reduce){.btn,.btn:hover,.btn:active{transition:none;transform:none}}
.btn-solid{background:var(--color-on-primary);color:var(--color-primary)!important;--slab:var(--color-accent-teal)}
.on-black .btn-solid,.dg-panel .btn-solid{background:#fff;color:#000!important;border:1px solid var(--color-accent-teal);--slab:var(--color-accent-teal)}
.on-black .btn-solid:hover,.dg-panel .btn-solid:hover{background:#000;color:#fff!important;border-color:var(--color-accent-teal)}
.btn-invert{background:var(--color-primary);color:var(--color-on-primary)!important;--slab:var(--color-accent-teal)}
.btn-ghost{background:transparent;color:#fff!important;border:1px solid #fff;--slab:#fff}
.on-white .btn-ghost,.cta-spotlight .btn-ghost{color:#000!important;border-color:#000;--slab:#000}
.cta-spotlight .btn-solid{--slab:#fff}
.cta-spotlight .btn-invert{--slab:#fff}
.btn-sm{padding:9px 16px;font-size:0.75rem;box-shadow:3px 3px 0 var(--slab,transparent)}
.btn-sm:hover,.btn-sm:active{transform:translate(3px,3px)}
.btn-row{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.btn.btn-outline-dark{background:transparent;color:#06231d!important;border-style:solid;border-width:1px;border-color:rgba(6,35,29,.5);--slab:#06231d}
.card{background:#fff;color:var(--color-on-primary);border:1px solid var(--color-hairline-dark);border-radius:var(--radius-xl);padding:var(--space-xxl)}
.card,.card-flat{position:relative;transition:box-shadow .25s ease-out}
.card:hover,.card-flat:hover{transform:translateY(-5px)}
.card:hover{box-shadow:0 18px 36px rgba(0,0,0,.16)}
.card[data-num]::after{content:attr(data-num);position:absolute;top:10px;right:18px;font:var(--text-heading-xl);font-family:var(--font-display);opacity:.07;line-height:1}
blockquote.testimonial{overflow:visible;position:relative}
.g-review{position:relative;background:#fff;color:var(--color-on-primary);border:1px solid rgba(0,0,0,.14);border-radius:0;padding:26px 24px;display:flex;flex-direction:column;gap:15px;box-shadow:none;transition:border-color .3s}
.g-review:hover{border-color:var(--color-accent-teal-deep)}
.g-mark{font-family:var(--font-display);font-size:2.6rem;line-height:.7;color:var(--color-accent-teal-deep);opacity:.6}
.timeline{position:relative;margin-top:8px;padding-left:64px}
.rn-shell{margin-top:36px;background:#0b0b0b;color:#fff;border:1px solid #0b0b0b;border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 20px 44px rgba(0,0,0,.16)}
.svc-nav{position:sticky;top:0;z-index:80;background:#000;border-bottom:1px solid rgba(255,255,255,.1)}
.std-grid{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.16)}
.route-grid{margin-top:34px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:16px}
.route{position:relative;display:flex;flex-direction:column;gap:11px;padding:30px 26px;border:1px solid var(--color-hairline-cloud);border-radius:var(--radius-xl);background:#fff;color:inherit;text-decoration:none;transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s ease-out,border-color .28s}
.route:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(0,0,0,.13);border-color:#000;text-decoration:none}
.route.feature{background:#000;color:#fff;border-color:#000}
.route.feature:hover{box-shadow:0 22px 48px rgba(0,0,0,.42)}
.route-ic{width:46px;height:46px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;background:rgba(13,182,149,.15);color:var(--color-accent-teal)}
.route.feature .route-ic{background:rgba(238,155,60,.2);color:var(--color-accent-orange)}
.route-ic svg{width:23px;height:23px}
.route h3{margin:4px 0 0;font-family:var(--font-display);font-weight:600;font-size:1.3rem;line-height:1.18}
.route.feature h3{font-size:1.7rem}
.route>p{margin:0;font:var(--text-caption);opacity:.72;max-width:34ch}
.route-best{font:var(--text-caption);font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;opacity:.5}
.route-go{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:7px;font:var(--text-body-strong);font-size:.88rem;color:var(--color-accent-blue)}
.route.feature .route-go{color:var(--color-accent-orange)}
.route-go svg{width:16px;height:16px;transition:transform .2s ease-out}
.route:hover .route-go svg{transform:translateX(3px)}
.direct{margin-top:16px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px}
.wk-head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.wk-hint{max-width:34ch;opacity:.55;margin:0}
.wk-bar{position:sticky;top:0;z-index:5;margin-top:28px;padding:16px 0 14px;background:#fff;border-bottom:1px solid var(--color-hairline-cloud)}
.wk-filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.wk-filters::-webkit-scrollbar{display:none}
.wk-filters .btn{flex:0 0 auto;border-radius:999px;padding:8px 15px;font-size:.78rem;letter-spacing:.02em;text-transform:none;transition:background .18s,color .18s,border-color .18s;transform:none}
.wk-filters .btn:hover{transform:none}
.wk-n{font-family:var(--font-mono);font-size:.6rem;opacity:.45;letter-spacing:0;margin-left:2px}
.wk-count{margin:12px 0 0;opacity:.45;font-size:.76rem}
.wk-grid{overflow-anchor:none;margin-top:28px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(272px,100%),1fr));gap:18px}
.wk-card{position:relative;display:flex;flex-direction:column;text-decoration:none;color:#fff;background:#0b0b0b;border:1px solid rgba(255,255,255,.16);border-radius:0;overflow:hidden;transition:border-color .3s ease-out}
a.wk-card{color:#fff}
a.wk-card:hover{border-color:var(--color-accent-teal);text-decoration:none}
.wk-frame{display:block;position:relative;height:240px;overflow:hidden;background:#111}
.wk-frame picture{display:block}
.wk-frame img{display:block;width:100%;height:auto;transition:transform 6.5s linear}
a.wk-card:hover .wk-frame img{transform:translateY(calc(-100% + 240px))}
.wk-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;font:var(--text-caption);opacity:.4}
.wk-ph svg{width:22px;height:22px}
.wk-meta{padding:16px;flex:1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 10px;align-content:start}
.wk-name{display:block;font-family:var(--font-display);font-weight:600;font-size:1.08rem;line-height:1.2}
.wk-tags{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.wk-tags span{padding:4px 9px;border:1px solid rgba(255,255,255,.2);border-radius:3px;font:600 .58rem/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.65}
.wk-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid rgba(255,255,255,.14);font:600 .64rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-teal)}
.wk-arrow{flex:0 0 auto;transition:transform .25s}
.wk-arrow svg{width:14px;height:14px}
a.wk-card:hover .wk-arrow{transform:translate(2px,-2px)}
.wk-name{grid-column:2}
.wk-job{grid-column:1;grid-row:1/3}
.wk-job{flex:0 0 auto;font:600 .68rem/1.2 var(--font-mono);letter-spacing:.06em;color:#fff;opacity:.42}

.wk-card:hover .wk-job{opacity:.7}
.wk-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.wk-card.is-empty{opacity:.68}
.wk-card[hidden]{display:none}
.wk-more{overflow-anchor:none;margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.wk-more[hidden]{display:none}
.btn[hidden],a.btn[hidden]{display:none}
@media (max-width:700px){.wk-hint{display:none}.wk-frame{height:190px}a.wk-card:hover .wk-frame img{transform:translateY(calc(-100% + 190px))}}
@media (prefers-reduced-motion:reduce){.wk-frame img{transition:none}a.wk-card:hover .wk-frame img{transform:none}}
.ind-cloud{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.ind-cloud span{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border:1px solid rgba(0,0,0,.16);border-radius:999px;font-size:.98rem;transition:border-color .3s,background .3s,transform .3s}
.ind-cloud span:hover{border-color:var(--color-accent-teal-deep);background:rgba(0,153,133,.06);transform:translateY(-2px)}
.ind-note{margin:24px auto 0;text-align:center;font-size:.95rem;opacity:.62;max-width:52ch}
.ind-row{margin-top:22px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.ind-chip{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border:1px solid var(--color-hairline-cloud);border-radius:999px;font:var(--text-caption)}
.client-marquee .marquee-track{--marquee-gap:64px;align-items:center}
.client-logo{flex:0 0 auto;display:flex;align-items:center;height:50px}
.client-logo img{width:auto;max-width:190px;object-fit:contain;opacity:.82;transition:opacity .3s ease-out,transform .3s ease-out}
.client-marquee:hover .client-logo img,.client-logo img:hover{opacity:1}
@media (max-width:620px){.client-marquee .marquee-track{--marquee-gap:42px}}
.direct-item.phone{background:#fff;color:inherit;border-color:var(--color-hairline-cool);padding:24px 26px}
.direct-item.phone:hover{background:var(--color-surface-gray);border-color:#000}
.direct-item.phone>svg{width:26px;height:26px;color:var(--color-accent-teal)}
.direct-item.phone b{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.05;letter-spacing:-.01em}
.direct-item.phone span span{opacity:.65}
.direct-item{display:flex;align-items:center;gap:13px;padding:20px 22px;border:1px solid var(--color-hairline-cloud);border-radius:var(--radius-lg);text-decoration:none;color:inherit;transition:border-color .2s,background .2s}
.direct-item:hover{border-color:#000;background:var(--color-surface-gray);text-decoration:none}
.direct-item>svg{flex:0 0 auto;width:20px;height:20px;color:var(--color-accent-teal)}
.direct-item span{display:flex;flex-direction:column;gap:2px;min-width:0}
.direct-item b{font:var(--text-body-strong);font-size:.92rem;overflow-wrap:anywhere}
.direct-item span span{font:var(--text-caption);opacity:.6}
.form-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
.next-steps{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-direction:column;gap:22px}
.next-steps li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.next-steps li>span{width:30px;height:30px;border-radius:50%;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;font:600 .8rem/1 var(--font-mono);flex:0 0 auto}
.next-steps b{font:var(--text-body-strong);font-size:.98rem}
.next-steps p{margin:5px 0 0;font:var(--text-caption);opacity:.7;max-width:38ch}
.form-card{background:#fff;border:1px solid var(--color-hairline-cloud);border-radius:var(--radius-xl);padding:32px;box-shadow:0 2px 4px rgba(0,0,0,.05)}
.form-card form{margin-top:0!important}
#form-error{margin-bottom:20px;padding:14px 16px;border:1px solid var(--color-accent-red);border-radius:10px;font-size:.9rem}
@media (max-width:980px){.route-grid{grid-template-columns:1fr}.direct{grid-template-columns:1fr}.form-split{grid-template-columns:1fr;gap:34px}}
.std-card{background:#000;padding:30px 28px;display:flex;flex-direction:column;gap:12px}
.std-n{font:600 .74rem/1 var(--font-mono);color:var(--color-accent-teal)}
.std-card h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:1.22rem;line-height:1.2}
.std-card h3 a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.std-card h3 a:hover{color:var(--color-accent-orange)}
.std-card h3 svg{width:15px;height:15px;opacity:.5}
.std-why{margin:0;font:var(--text-body-lg);font-size:1.05rem;line-height:1.45;max-width:34ch}
.std-what{margin:0;font:var(--text-caption);opacity:.65;max-width:46ch}
.std-how{display:flex;align-items:center;gap:8px;margin:auto 0 0;padding-top:6px;font:var(--text-caption);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.03em;opacity:.75;color:var(--color-accent-teal)}
.std-how svg{width:14px;height:14px}
@media (max-width:760px){.std-grid{grid-template-columns:1fr}.std-card{padding:26px 22px}}
.svc-nav-in{display:flex;gap:6px;overflow-x:auto;padding:10px 0;scrollbar-width:none;justify-content:center}
.svc-nav-in::-webkit-scrollbar{display:none}
.svc-nav a{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;color:#fff;text-decoration:none;font:var(--text-caption);white-space:nowrap;opacity:.6;transition:background .2s,opacity .2s}
@media (max-width:640px){.svc-nav-in{justify-content:flex-start}}
.svc-nav a span{font:600 .7rem/1 var(--font-mono);color:var(--color-accent-teal)}
.svc-nav a:hover{opacity:1;background:rgba(255,255,255,.08);color:#fff}
.svc-nav a.active{opacity:1;background:#fff;color:#000}
.svc-nav a.active span{color:var(--color-accent-teal-deep)}
.svc-grid{display:grid;grid-template-columns:0.72fr 1.28fr;gap:60px;align-items:start}
.svc-side{position:sticky;top:96px}
.svc-num{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(3rem,5vw,4.6rem);line-height:.85;opacity:.16}
.svc-side h2{margin:14px 0 0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.14}
.svc-lead{margin:14px 0 0;font:var(--text-body-md);opacity:.75;max-width:34ch}
.svc-who{display:flex;align-items:flex-start;gap:9px;margin:18px 0 0;font:var(--text-caption);opacity:.85;max-width:32ch}
.svc-who svg{flex:0 0 auto;width:17px;height:17px;color:var(--color-accent-teal);margin-top:1px}
.svc-side-cta{margin:24px 0 0}
.svc-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--color-hairline-cloud)}
.svc-block.on-black .svc-items{background:rgba(255,255,255,.16)}
.svc-item{background:#fff;padding:26px 24px}
.svc-block.on-black .svc-item{background:#000}
.svc-item header{display:flex;align-items:baseline;gap:12px}
.svc-item h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:1.05rem;line-height:1.25}
.svc-i-n{margin-left:auto;font:600 .7rem/1 var(--font-mono);opacity:.3}
.svc-item>p{margin:9px 0 0;font:var(--text-caption);opacity:.72}
.svc-item ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.svc-item li{position:relative;padding-left:14px;font:var(--text-caption);opacity:.82}
.svc-item li::before{content:'';position:absolute;left:0;top:.6em;width:6px;height:1px;background:var(--color-accent-teal)}
@media (max-width:980px){.svc-grid{grid-template-columns:1fr;gap:30px}.svc-side{position:static}}
@media (max-width:620px){.svc-items{grid-template-columns:1fr}}
.rn-bar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.16);font:var(--text-caption);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;opacity:.75}
.rn-dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent-teal)}
.rn-btn{margin-left:auto;appearance:none;background:#fff;color:#000;border:0;border-radius:6px;padding:7px 15px;font:var(--text-button-cap);letter-spacing:var(--letter-button-cap);text-transform:uppercase;cursor:pointer}
.rn-btn:hover{background:#000;color:#fff;box-shadow:inset 0 0 0 1px #fff}
.rn-out{padding:22px 18px;min-height:290px;font-family:var(--font-mono);font-size:.9rem;line-height:1.75}
.rn-line{display:block;opacity:0;animation:rn-in .3s ease-out forwards}
@keyframes rn-in{to{opacity:1}}
.terminal-body .line .k{color:var(--color-accent-teal)}
.rn-line .k{color:var(--color-accent-teal)}
.rn-line .w{opacity:.55}
.rn-step{border:0;background:none;color:inherit;font:inherit;text-align:left;padding:7px 10px;margin:0 -10px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:9px;width:calc(100% + 20px);transition:background .18s ease-out}
.rn-step:hover{background:rgba(255,255,255,.07)}
.rn-step:hover .rn-t{color:var(--color-accent-orange)}
.rn-step:focus-visible{outline:2px solid var(--color-accent-blue);outline-offset:2px}
.rn-caret{margin-left:auto;flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;font-size:.8rem;line-height:1;color:var(--color-accent-teal);transition:background .18s,border-color .18s,transform .18s}
.rn-caret::before{content:'+'}
.rn-step:hover .rn-caret{border-color:var(--color-accent-teal);background:rgba(13,182,149,.16)}
.rn-item.open .rn-caret{transform:rotate(180deg);border-color:var(--color-accent-teal)}
.rn-item.open .rn-caret::before{content:'\2212'}
.rn-item.open .rn-t{color:var(--color-accent-orange)}
.rn-t{color:#fff}
.rn-detail{overflow:hidden;max-height:0;border-left:1px solid rgba(255,255,255,.16);margin:0 0 0 6px;opacity:0;transition:max-height .36s cubic-bezier(.4,0,.2,1),opacity .22s ease-out}
.rn-detail-in{padding:8px 0 16px 22px}
.rn-item.open .rn-detail{margin:4px 0 8px 6px;opacity:1}
.rn-detail p{margin:0;font-family:var(--font-ui);font-size:.95rem;opacity:.8;max-width:56ch}
.rn-detail ul{list-style:none;margin:12px 0 0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.rn-detail li{font-family:var(--font-ui);font-size:.78rem;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.08)}
@media (prefers-reduced-motion:reduce){.rn-line{animation:none;opacity:1}.rn-detail{transition:none}}
.timeline::before{content:'';position:absolute;left:23px;top:14px;bottom:14px;width:1px;background:var(--color-hairline-cloud)}
.tl-phase{position:relative;margin:34px 0 18px;font:var(--text-eyebrow);letter-spacing:var(--letter-eyebrow);text-transform:uppercase;color:var(--color-accent-teal-deep)}
.tl-phase:first-child{margin-top:0}
.tl-phase::before{content:'';position:absolute;left:-49px;top:50%;width:13px;height:1px;background:var(--color-accent-teal)}
.tl-item{position:relative;padding:16px 0}
.tl-dot{position:absolute;left:-64px;top:14px;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--color-hairline-cloud);display:flex;align-items:center;justify-content:center;font:600 .82rem/1 var(--font-mono);color:#111;transition:background .25s,border-color .25s,color .25s}
.tl-item:hover .tl-dot{background:#000;border-color:#000;color:#fff}
.tl-body h3{font-family:var(--font-display);font-weight:600;font-size:1.16rem;line-height:1.25;margin:0}
.tl-body p{margin:8px 0 0;font:var(--text-body-md);opacity:.78;max-width:60ch}
@media (max-width:560px){.timeline{padding-left:50px}.timeline::before{left:17px}.tl-dot{left:-50px;width:35px;height:35px;font-size:.72rem}.tl-phase::before{left:-37px;width:10px}}
.g-review header{margin-top:auto;padding-top:14px;border-top:1px solid rgba(0,0,0,.12);display:flex;align-items:center;gap:11px;order:3}
.g-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font:var(--text-body-strong);font-size:1rem;flex:0 0 auto}
.g-who{display:flex;flex-direction:column;gap:1px;min-width:0}
.g-who b{font:var(--text-body-strong);font-size:.95rem}
.g-who span{font:var(--text-caption);opacity:.6}
.g-stars{display:flex;gap:2px;color:#fbbc04}
.g-stars svg{width:17px;height:17px;fill:currentColor;stroke:currentColor}
.g-text{font:var(--text-body-md);line-height:1.6;margin:0;opacity:.78}
.g-src{display:none}
.g-src svg{width:14px;height:14px}
blockquote.testimonial::before{content:'\201C';position:absolute;top:-14px;left:14px;font:900 4.5rem/1 var(--font-display);color:var(--color-accent-teal);opacity:.18}
.on-black .card{background:#fff;border-color:var(--color-hairline-dark)}
.card-flat{background:transparent;border:1px solid var(--color-hairline-cool);border-radius:var(--radius-xl);padding:var(--space-xxl)}
.on-white .card-flat{border-color:var(--color-hairline-dark)}
.badge{display:inline-flex;align-items:center;font:var(--text-caption);font-size:0.75rem;padding:5px 10px;border-radius:var(--radius-xs);font-weight:600}
.badge-teal{background:var(--color-accent-teal);color:#fff}
.badge-orange{background:var(--color-accent-orange);color:#000}
.badge-blue{background:var(--color-accent-blue);color:#fff}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:0.8125rem;font-weight:600;padding:7px 14px;border-radius:var(--radius-xl);background:var(--color-accent-teal-deep);color:#fff}
.grid{display:grid;gap:var(--space-xl)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
@media (max-width:900px){.grid-3.two-up,.grid-4.two-up{grid-template-columns:repeat(2,1fr)}}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font:var(--text-body-strong)}
.field input,.field select,.field textarea{font:var(--text-body-md);font-family:var(--font-ui);padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--color-hairline-cool);background:var(--color-surface-canvas-dark);color:var(--color-on-primary);outline:none}
.on-black .field input,.on-black .field select,.on-black .field textarea{border-color:var(--color-hairline-cool);background:#0e0e0e;color:var(--color-ink)}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 3px var(--color-ring-focus)}
.field .hint{font:var(--text-caption);opacity:0.7}
header.site{position:sticky;top:0;z-index:100;background:var(--color-surface-canvas-light);border-bottom:1px solid var(--color-hairline-cool)}
header.site .bar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:var(--container-max);margin:0 auto}
header.site img.logo{height:30px;filter:invert(1) brightness(1.6)}
.nav-actions{display:flex;align-items:center;gap:14px}
.menu-toggle{display:none}
.menu-btn{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--color-hairline-dark);border-radius:var(--radius-sm);color:var(--color-ink);cursor:pointer;background:none;flex-shrink:0}
.nav-scrim{position:fixed;inset:0;background:rgba(0,0,0,.62);opacity:0;pointer-events:none;transition:opacity .3s ease-out;z-index:190}
.nav-drawer{position:fixed;top:0;right:0;height:100%;width:min(380px,88vw);background:#000;color:#fff;z-index:200;transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:96px 32px 32px;border-left:1px solid rgba(255,255,255,.14);overflow-y:auto}
.nav-drawer .drawer-close{position:absolute;top:20px;right:20px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-sm);cursor:pointer;color:#fff}
.nav-drawer .drawer-close:hover{background:rgba(255,255,255,.1)}
.nav-drawer a{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12);color:#fff;font:var(--text-body-strong);font-size:1.1rem;display:flex;justify-content:space-between;align-items:center;text-decoration:none}
.nav-drawer a:hover{color:var(--color-accent-orange)}
.nav-drawer .drawer-cta{margin-top:24px;border-bottom:none}
.menu-btn svg,.drawer-close svg,.nav-scrim *{pointer-events:none}
.menu-btn svg,.drawer-close svg{transition:transform .22s cubic-bezier(.4,0,.2,1);transform-origin:50% 50%}
.menu-btn svg line{transition:transform .22s cubic-bezier(.4,0,.2,1);transform-origin:50% 50%}
.menu-btn:hover svg line[y1="6"]{transform:translateY(-1.6px)}
.menu-btn:hover svg line[y1="18"]{transform:translateY(1.6px)}
.menu-btn:hover svg line[y1="12"]{transform:scaleX(.6)}
.drawer-close:hover svg{transform:rotate(90deg)}
.nav-drawer a.drawer-cta{margin-top:28px;border:1px solid #fff;border-radius:var(--radius-md);background:#fff;color:#000!important;font:var(--text-button-cap);letter-spacing:var(--letter-button-cap);text-transform:uppercase;justify-content:center;text-align:center;padding:16px 24px}
.nav-drawer a.drawer-cta:hover{background:#000;color:#fff!important}
.menu-toggle:checked ~ .nav-scrim{opacity:1;pointer-events:auto}
.menu-toggle:checked ~ .nav-drawer{transform:translateX(0);box-shadow:-32px 0 80px rgba(0,0,0,.6)}
footer.site{background:var(--color-surface-canvas-light);color:var(--color-ink);border-top:1px solid var(--color-hairline-cool);padding:var(--space-section) 0 var(--space-xl)}
footer.site img{filter:invert(1) brightness(1.6)}
footer.site .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 2fr;gap:var(--space-xxl)}
@media (max-width:860px){footer.site .cols{grid-template-columns:1fr 1fr}}
footer.site h3{font:var(--text-body-strong);margin-bottom:14px;color:var(--color-ink)}
footer.site ul{list-style:none;display:flex;flex-direction:column;gap:10px}
footer.site ul.city-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:10px}
footer.site ul.city-list a{white-space:nowrap}
footer.site ul.city-list span{white-space:nowrap;color:#c9c9c9}
@media (max-width:960px){footer.site ul.city-list{grid-template-columns:1fr 1fr}}
@media (max-width:420px){footer.site ul.city-list{grid-template-columns:1fr}}
footer.site a{color:#c9c9c9}
footer.site a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:48px;padding-top:24px;border-top:1px solid var(--color-hairline-cool);font:var(--text-caption)}
.crumbs{font:var(--text-caption);padding:14px 0;opacity:0.8}
.crumbs a{color:inherit;text-decoration:underline}
.faq details{border-bottom:1px solid var(--color-hairline-dark);padding:18px 0}
.on-black .faq details{border-color:var(--color-hairline-cool)}
.faq summary{font:var(--text-body-strong);cursor:pointer;list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .mk{flex:none;position:relative;width:11px;height:11px;margin-top:.44em}
.faq summary .mk::before,.faq summary .mk::after{content:"";position:absolute;background:var(--color-accent-teal);transition:transform .18s ease-out}
.faq summary .mk::before{top:5px;left:0;width:11px;height:1.5px}
.faq summary .mk::after{top:0;left:4.75px;width:1.5px;height:11px}
.faq details[open] summary .mk::after{transform:scaleY(0)}
@media (prefers-reduced-motion:reduce){.faq summary .mk::before,.faq summary .mk::after{transition:none}}
.faq-grp{margin-top:26px}
.faq-grp:first-of-type{margin-top:14px}
.faq-grp>.grp-h{margin:0 0 2px;font:600 .64rem/1 var(--font-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--color-accent-teal)}
.faq-grp>details:first-of-type{border-top:2px solid currentColor}
.on-white .faq-grp>details:first-of-type,.on-gray .faq-grp>details:first-of-type{border-top-color:#111}

.faq .a{margin-top:12px;max-width:760px}
blockquote.testimonial{border-left:3px solid var(--color-accent-teal);padding-left:20px;margin:0;font:var(--text-body-lg)}
blockquote.testimonial cite{display:block;margin-top:14px;font:var(--text-body-strong);font-style:normal;opacity:0.85}
.stat-row{display:flex;gap:36px;flex-wrap:wrap}
.stat-row .stat b{display:block;font:var(--text-heading-lg);font-family:var(--font-display)}
/* js/stats.js writes the live figure into a <span data-stat> inside the <b>.
   It must inherit the display size, never the caption size of the label span
   beside it — hence the direct-child selectors above. */
.stat-row .stat b [data-stat]{font:inherit;display:inline}
.stat-row .stat>span{font:var(--text-caption)}
.sticky-call{position:fixed;bottom:0;left:0;right:0;background:var(--color-on-primary);color:var(--color-primary);display:none;justify-content:center;gap:20px;padding:12px;z-index:90;font:var(--text-button-cap)}
@media (max-width:640px){.sticky-call{display:flex}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.reviewed{font:var(--text-caption);opacity:0.65;margin-top:8px}
.numbered{counter-reset:step}
.numbered .step{counter-increment:step;display:flex;gap:20px}
.numbered .step .n{font:var(--text-heading-lg);font-family:var(--font-display);opacity:0.35;min-width:44px}
table.compare{width:100%;border-collapse:collapse;font:var(--text-body-md)}
table.compare th,table.compare td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--color-hairline-dark)}
.on-black table.compare th,.on-black table.compare td{border-color:var(--color-hairline-cool)}
table.compare th{font:var(--text-body-strong);text-transform:uppercase;font-size:0.8rem;letter-spacing:var(--letter-eyebrow);color:var(--color-accent-teal);background:rgba(13,182,149,0.08);border-bottom:2px solid var(--color-accent-teal)}
.pf-hero{position:relative;overflow:hidden;padding-bottom:64px}
.pf-hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;align-items:center;position:relative;z-index:1}
.sp-stage{height:430px;position:relative;perspective:1000px;overflow:hidden;-webkit-mask-image:radial-gradient(125% 100% at 50% 50%,#000 56%,transparent);mask-image:radial-gradient(125% 100% at 50% 50%,#000 56%,transparent)}
.sp-plane{position:absolute;inset:-22%;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:110px;gap:14px;transform:rotateX(36deg) rotateZ(-6deg);transform-style:preserve-3d;animation:sp-drift 40s linear infinite}
.sp-tile{border-radius:8px;overflow:hidden;background:#101010;border:1px solid rgba(255,255,255,.13);box-shadow:0 14px 30px rgba(0,0,0,.5);filter:brightness(.28) saturate(.6);transition:filter .7s ease-out}
.sp-tile img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.sp-tile.lit{filter:brightness(1.05) saturate(1)}
@keyframes sp-drift{from{transform:rotateX(36deg) rotateZ(-6deg) translate3d(0,0,0)}to{transform:rotateX(36deg) rotateZ(-6deg) translate3d(0,-248px,0)}}
@media (max-width:960px){.pf-hero-grid{grid-template-columns:1fr;gap:20px}.sp-stage{height:300px}.sp-plane{grid-auto-rows:88px}}
@media (prefers-reduced-motion:reduce){.sp-plane{animation:none}.sp-tile{filter:brightness(.72)}}
#web .wk-bar{background:var(--color-ink-black,#000);border-bottom-color:rgba(255,255,255,.14)}
#web .wk-count{opacity:.4}
#web .wk-filters .btn-solid,#web .wk-filters .btn.is-active{background:#fff!important;color:#000!important;border-color:#fff!important}
#web .wk-filters .btn.is-active .wk-n{opacity:.5}
body.subpage h1.display{font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.06;letter-spacing:-.015em}
body.subpage h1.h-xl{font-size:clamp(1.85rem,3.6vw,2.7rem);line-height:1.1}

.t4{margin-top:38px;display:grid;grid-template-columns:minmax(0,.52fr) minmax(0,.48fr);gap:56px;align-items:start}
.t4-list{display:grid;gap:6px}
.t4-tab{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;background:none;border:0;padding:6px 0;font:inherit;text-align:left;cursor:pointer;color:rgba(255,255,255,.55);transition:color .25s}
.t4-tab b{font:600 .68rem/1 var(--font-mono)}
.t4-tab span{font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.08;letter-spacing:-.015em}
.t4-tab:hover{color:rgba(255,255,255,.85)}
.t4-tab.on{color:#fff}
.t4-tab.on b{color:var(--color-accent-teal)}
.t4-panel{display:none;padding-top:8px}
.t4-panel.on{display:block}
.t4-panel p{margin:0;font-size:1.06rem;line-height:1.6;opacity:.8}
.t4-panel ul{margin:24px 0 0;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.16);list-style:none;display:grid;gap:11px}
.t4-panel .chk{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:start;font-size:.96rem;line-height:1.45}
.t4-panel .chk svg{margin-top:3px;color:var(--color-accent-teal)}
.t4-panel .btn{margin-top:26px}
@media (max-width:900px){.t4{grid-template-columns:1fr;gap:26px}}

.pts{margin-top:30px;border-top:1px solid rgba(255,255,255,.16)}
.pt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:20px 2px;border-bottom:1px solid rgba(255,255,255,.12)}
.pt svg{margin-top:4px;color:var(--color-accent-teal);flex:0 0 auto}
.pt p{margin:0;font-size:1rem;line-height:1.55;opacity:.8}
.pt p b{color:#fff;opacity:1}
.on-white .pts,.on-gray .pts{border-top-color:rgba(0,0,0,.16)}
.on-white .pt,.on-gray .pt{border-bottom-color:rgba(0,0,0,.12)}
.on-white .pt svg,.on-gray .pt svg{color:var(--color-accent-teal-deep)}
.on-white .pt p b,.on-gray .pt p b{color:var(--color-primary)}

.rv-tick{margin-top:30px}
.rv-tick .marquee-track{--marquee-copies:2;--marquee-gap:0;--marquee-dur:64s}
.rv-card{flex:0 0 auto;width:330px;margin-right:16px;background:#0b0b0b;border:1px solid rgba(255,255,255,.16);padding:22px 20px;display:flex;flex-direction:column;gap:12px;white-space:normal}
.rv-card p{margin:0;font-size:.95rem;line-height:1.55;opacity:.82}
.rv-card footer{margin-top:auto;display:flex;align-items:center;gap:10px}
.rv-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#000;font:600 .78rem/1 var(--font-ui);flex:0 0 auto}
.rv-card b{display:block;font-size:.9rem}
.rv-card small{display:block;opacity:.5;font-size:.8rem}
.rv-stars{display:flex;gap:2px;color:#fbbc04}
.rv-stars svg{width:16px;height:16px;fill:currentColor;stroke:currentColor}
@media (max-width:560px){.rv-card{width:270px}}

.l1{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:56px;align-items:start}
.l1-h{position:sticky;top:100px}
.l1-list{border-top:1px solid rgba(255,255,255,.16)}
.l1-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:20px;padding:22px 2px;border-bottom:1px solid rgba(255,255,255,.12);transition:padding-left .3s,background .3s}
.l1-row:hover{padding-left:12px;background:rgba(255,255,255,.03)}
.l1-row b{font:600 .72rem/1.4 var(--font-mono);color:var(--color-accent-teal)}
.l1-row h3{margin:0;font-family:var(--font-display);font-weight:500;font-size:1.16rem;line-height:1.25}
.l1-row p{margin:7px 0 0;font-size:.95rem;line-height:1.55;opacity:.7}
@media (max-width:900px){.l1{grid-template-columns:1fr;gap:26px}.l1-h{position:static}}

.lb{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.88);display:flex;flex-direction:column}
.lb[hidden]{display:none}
html.lb-open{overflow:hidden}
.lb-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;background:#000;border-bottom:1px solid rgba(255,255,255,.14)}
.lb-cap{font:600 .68rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.lb-x{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--color-accent-red);border:1px solid var(--color-accent-red);color:#fff;cursor:pointer;transition:background .2s,border-color .2s}
.lb-x:hover{background:#fff;color:var(--color-accent-red);border-color:#fff}
.lb-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px;display:flex;align-items:flex-start;justify-content:center}
.lb-scroll img{flex:0 0 auto;width:100%;max-width:1400px;height:auto;align-self:flex-start;display:block;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.wk-card.is-modal .wk-foot{color:var(--color-accent-teal)}
@media (max-width:560px){.lb-scroll{padding:10px}}

.btn-spin{display:inline-block;width:13px;height:13px;margin-right:9px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;animation:btn-spin .7s linear infinite}
@keyframes btn-spin{to{transform:rotate(360deg)}}
.btn.is-loading{pointer-events:none;opacity:.85}
.wk-card.is-fresh{opacity:0;transform:translateY(10px)}
.wk-card{transition:border-color .3s ease-out,opacity .45s ease-out,transform .45s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){.btn-spin{animation:none}.wk-card.is-fresh{opacity:1;transform:none}.wk-card{transition:border-color .3s}}

.wk-empty{margin:34px auto 0;text-align:center;max-width:46ch;opacity:.6}
.btn:focus-visible{outline:2px solid var(--color-accent-teal);outline-offset:3px}

/* ---------- hero band ---------- */
.hero-band{padding-top:64px}
.hero-2col{max-width:1152px;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;position:relative}
@media (max-width:900px){.hero-2col{grid-template-columns:1fr;gap:32px}}

/* ---------- mobile: header ---------- */
header.site .bar>a{flex:0 0 auto;display:flex;align-items:center}
header.site img.logo{width:auto;max-width:none;flex:0 0 auto}
@media (max-width:700px){
 header.site .bar{padding:12px 16px}
 header.site img.logo{height:26px}
 .nav-actions>.btn{display:none}          /* CTA lives in the fixed bottom bar on mobile */
}

/* ---------- mobile: rhythm ---------- */
@media (max-width:700px){
 .section{padding:52px 0}
 .section-tight{padding:36px 0}
 .hero-band{padding-top:32px;padding-bottom:44px}
 .hero-2col{gap:26px}
 .stat-row{gap:20px 26px}
 .terminal-body{padding:18px 16px 22px;font-size:.82rem;line-height:1.8;min-height:0}
 .hero-shape{filter:blur(38px)}
 body{padding-bottom:60px}                /* clears the fixed bottom bar */
}
@media (max-width:700px){
 .hero-2col .stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
 .hero-2col .stat-row .stat b{font-size:1.5rem;line-height:1.1}
 .hero-2col .stat-row .stat>span{font-size:.7rem;line-height:1.3;display:block}
 .hero-2col .btn-row{gap:10px}
 .hero-2col .btn-row .btn{flex:1 1 auto;justify-content:center}
}
@media (max-width:360px){
 .container{padding-left:16px;padding-right:16px}
 header.site img.logo{height:22px}
 .display{font-size:1.85rem;line-height:1.12}
 .terminal-body{font-size:.76rem}
}

/* ---------- mobile: footer ---------- */
@media (max-width:700px){
 footer.site .cols{grid-template-columns:1fr;gap:32px}
 footer.site ul.city-list{grid-template-columns:1fr 1fr}
 .footer-bottom{flex-direction:column;gap:10px}
}
@media (max-width:420px){footer.site ul.city-list{grid-template-columns:1fr}}

@media (max-width:700px){
 .wk-bar{position:static;z-index:auto}   /* category row scrolls away with the page on mobile */
 .svc-nav{position:static}               /* same for the Websites / Logos shortcut bar */
}

/* ---------- mobile: contact + shared grids ---------- */
@media (max-width:900px){
 .form-split{grid-template-columns:1fr;gap:32px}
 .route-grid{grid-template-columns:1fr}
 .std-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
 .direct{grid-template-columns:1fr}
 .form-card{padding:22px 18px}
 .next-steps p{max-width:none}
 .direct-item{padding:16px 16px}
 .direct-item.phone{padding:20px 18px}
}

@media (max-width:400px){
 .btn{white-space:nowrap;font-size:.72rem;letter-spacing:.05em;padding:13px 14px}
 .btn-sm{font-size:.66rem;padding:10px 12px}
 .btn-row{flex-direction:column;align-items:stretch}
 .btn-row .btn{width:100%;justify-content:center}
 .sticky-call{gap:12px;font-size:.78rem;padding:11px 10px}
}

/* mobile header hard guards (CTA lives in the fixed bottom bar below 700px) */
header.site .bar{flex-wrap:nowrap;gap:12px;min-width:0}
header.site .nav-actions{flex:0 0 auto;min-width:0}
header.site .nav-actions>.btn{white-space:nowrap}
@media (max-width:700px){header.site .nav-actions>.btn{display:none!important}}

/* drawer CTA must fit the panel width */
.nav-drawer a.drawer-cta{display:flex;width:100%;box-sizing:border-box;text-align:center;justify-content:center;white-space:normal;overflow-wrap:anywhere;padding-left:16px;padding-right:16px}
@media (max-width:420px){.nav-drawer a.drawer-cta{font-size:.68rem;letter-spacing:.06em}}

/* WCAG fixes: the brand blue (#00aeff) is only ~2.6:1 on a light canvas, and a
   link inside prose must not be distinguished by colour alone. Deeper blue is
   5.2:1 on white; dark canvases keep the bright accent (8.4:1 on black). */
:root{--color-link-light:#0A6FBE}
/* PROSE links only. Card-shaped links (.route, .wk-card, .direct-item, .bento-cell)
   are themselves <a> elements — colouring every <a> repainted whole cards. */
.on-white p a:not(.btn),.on-gray p a:not(.btn),.on-white li a:not(.btn),.on-gray li a:not(.btn),.wk-empty a,.faq .a a{color:var(--color-link-light)}
/* "go" affordances inside light cards only — dark .feature cards keep their orange. */
.on-white .route:not(.feature) .route-go,.on-gray .route:not(.feature) .route-go,
.on-white .bento-cell:not(.feature) .bento-cta,.on-gray .bento-cell:not(.feature) .bento-cta{color:var(--color-link-light)}
p a:not(.btn),.faq .a a,.wk-empty a,.g-src a{text-decoration:underline;text-underline-offset:2px}
/* Bottom-bar links sit inline inside sentences, so they need a non-colour cue.
   Rather than a permanent underline they carry it on hover/focus and are held
   at full white at rest, which reads against the #c9c9c9 text around them —
   the design system's "underline reveal on links" convention. */
.footer-bottom a{color:#fff;text-decoration:none;text-underline-offset:2px}
.footer-bottom a:hover,.footer-bottom a:focus-visible{color:#fff;text-decoration:underline}
.on-white .route-best,.on-gray .route-best{opacity:.68}
#web .wk-count{opacity:.55}

/* Short pages (thank-you, 404) left the black footer floating mid-viewport with
   the white body showing beneath it. Pin the footer to the bottom, and set the
   canvas on <html> so body's white never propagates past its own box. */
html{background:#000}
body{min-height:100dvh;display:flex;flex-direction:column}
body>main{flex:1 0 auto}

/* mobile: the 60px bottom padding that clears the fixed call bar was showing
   body's own white canvas below the black footer. Keep the canvas black. */
body{background:#000}
.sticky-call{border-top:1px solid rgba(255,255,255,.14);align-items:center;min-height:56px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
@media (max-width:700px){body{padding-bottom:0}body>.sticky-call{margin-top:0}main,footer.site{padding-bottom:0}footer.site .footer-bottom{padding-bottom:64px}}

/* css/motion.css */
@media (prefers-reduced-motion: reduce){.reveal,.step,.tilt,.marquee-track,.cursor{transition:none!important;animation:none!important}}
.js-armed .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease-out,transform .7s ease-out}
.js-armed .reveal.is-visible{opacity:1;transform:none}
.js-armed .reveal-group>.reveal:nth-child(2){transition-delay:.08s}
.js-armed .reveal-group>.reveal:nth-child(3){transition-delay:.16s}
.js-armed .reveal-group>.reveal:nth-child(4){transition-delay:.24s}
.js-armed .reveal-group>.reveal:nth-child(5){transition-delay:.32s}
.js-armed .reveal-group>.reveal:nth-child(6){transition-delay:.4s}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee[data-img-gate]:not(.is-ready) .marquee-track{animation-play-state:paused;opacity:0}
.marquee[data-img-gate] .marquee-track{opacity:1;transition:opacity .3s ease-out}
.marquee.is-paused .marquee-track{animation-play-state:paused}
[data-cal-loading]{pointer-events:none;opacity:.85}
[data-cal-loading]::before{content:"";display:inline-block;width:13px;height:13px;margin-right:9px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;animation:btn-spin .7s linear infinite}
@media (prefers-reduced-motion:reduce){[data-cal-loading]::before{animation:none}}
.marquee-track{display:flex;gap:0!important;width:max-content;will-change:transform;backface-visibility:hidden;animation:marquee var(--marquee-dur,26s) linear infinite}
.marquee-track>*{flex:0 0 auto;margin-right:var(--marquee-gap,56px)}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-100% / var(--marquee-copies,2)),0,0)}}
.tilt{transition:box-shadow .2s ease-out;will-change:transform}
.tilt:hover{box-shadow:0 24px 44px rgba(0,0,0,.28)}
.sticky-steps{display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:start}
.sticky-steps .panel{position:sticky;top:110px;border:1px solid var(--color-hairline-cool);border-radius:var(--radius-xl);padding:32px;min-height:260px;display:flex;flex-direction:column;justify-content:center;background:var(--color-surface-canvas-dark)}
.on-white .sticky-steps .panel{background:#fff}
.sticky-steps .steps-list .step{padding:8px 0;transition:opacity .35s ease-out}
.js-armed .sticky-steps .steps-list .step{opacity:.38}
.js-armed .sticky-steps .steps-list .step.active{opacity:1}
@media (max-width:860px){.sticky-steps{grid-template-columns:1fr}.sticky-steps .panel{position:static;min-height:auto}}
.terminal{background:#0b0b0c;border:1px solid var(--color-hairline-cool);border-radius:var(--radius-xxl);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.terminal-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--color-hairline-cool)}
.terminal-bar .dot{width:11px;height:11px;border-radius:50%}
.terminal-title{margin-left:8px;font:var(--text-caption);color:#8a8a8a;font-family:var(--font-mono)}
.terminal-body{padding:24px 22px 28px;font-family:var(--font-mono);font-size:0.9rem;line-height:1.9;min-height:220px;color:#c9c9c9}
.terminal-body .line{white-space:pre-wrap;word-break:break-word;min-height:1.9em}
.terminal-body .line.ok{color:var(--color-accent-teal)}
.terminal-body .cursor{display:inline-block;color:var(--color-accent-orange);animation:cursor-blink 1s step-end infinite}
@keyframes cursor-blink{50%{opacity:0}}
.faq details{transition:background-color .2s}
.problem-row .icon-chip{flex-shrink:0}
.nav-drawer a{opacity:0;transform:translateX(16px)}
.menu-toggle:checked ~ .nav-drawer a{animation:drawer-link-in .4s ease-out forwards}
.menu-toggle:checked ~ .nav-drawer a:nth-child(2){animation-delay:.06s}
.menu-toggle:checked ~ .nav-drawer a:nth-child(3){animation-delay:.12s}
.menu-toggle:checked ~ .nav-drawer a:nth-child(4){animation-delay:.18s}
.menu-toggle:checked ~ .nav-drawer a:nth-child(5){animation-delay:.24s}
.menu-toggle:checked ~ .nav-drawer a:nth-child(6){animation-delay:.3s}
@keyframes drawer-link-in{to{opacity:1;transform:translateX(0)}}
@media (prefers-reduced-motion: reduce){.nav-drawer a{opacity:1;transform:none;animation:none}}

/* Hero must paint without waiting on JS — it holds the LCP element. */
.hero-band .reveal,.hero-band.reveal{opacity:1!important;transform:none!important;transition:none!important}
/* Key takeaways — quotable page summary, deliberately quiet: reads as a
   colophon/footnote rather than a section. Side label column, no rules, small
   low-contrast body, mono numerals retained as the only accent. */
.tk-sec{padding:38px 0}
.tk-grid{display:grid;grid-template-columns:170px minmax(0,1fr);gap:34px;align-items:start}
.tk-sec h2{font:600 .78rem/1.5 var(--font-mono);letter-spacing:.06em;color:rgba(255,255,255,.5);margin:0}
.tk{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.tk li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;align-items:baseline}
.tk b{font:600 .66rem/1.7 var(--font-mono);letter-spacing:.05em;color:var(--color-accent-teal)}
.tk p{margin:0;font-size:.875rem;line-height:1.62;color:rgba(255,255,255,.62);text-wrap:pretty}
.tk p a{color:var(--color-accent-blue);text-decoration:none}
.tk p a:hover{color:#fff}
@media (max-width:760px){.tk-grid{grid-template-columns:1fr;gap:14px}.tk li{grid-template-columns:22px minmax(0,1fr);gap:10px}}
/* Inline "more" link with a Lucide arrow. Canvas-agnostic: colour comes from
   currentColor, so it works on on-gray/on-white and on-black alike. Mono
   uppercase picks up the brand's one typographic tic; the rule under it is the
   affordance, going teal on hover while the arrow steps right. */
p a.lnk-arrow,li a.lnk-arrow,a.lnk-arrow,.on-gray p a.lnk-arrow,.on-white p a.lnk-arrow,.on-black p a.lnk-arrow{text-decoration:none;color:inherit}
.lnk-arrow{display:inline-flex;align-items:center;gap:9px;font:700 .72rem/1 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;color:inherit;padding-bottom:7px;border-bottom:1px solid currentColor;transition:color .18s ease-out,border-color .18s ease-out}
.lnk-arrow svg{width:15px;height:15px;flex:none;transition:transform .18s ease-out}
.lnk-arrow:hover,.lnk-arrow:focus-visible{color:var(--color-accent-teal);border-bottom-color:var(--color-accent-teal)}
.lnk-arrow:hover svg,.lnk-arrow:focus-visible svg{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.lnk-arrow svg{transition:none}.lnk-arrow:hover svg{transform:none}}
/* Reviews use <blockquote> + <cite> so the quote and its attribution are
   machine-readable as a testimonial pair. Purely semantic — these rules keep
   the rendering byte-identical to the previous <p>/<span> markup. */
blockquote.g-text{margin:0;border:0;padding:0}
blockquote.g-text p{margin:0;font:inherit;line-height:inherit}
cite.g-who{font-style:normal}
.rv-card blockquote{margin:0;border:0;padding:0}
.rv-card blockquote p{margin:0}
.rv-card cite{font-style:normal;display:block}
/* ---- Guide pages: prose, answer box, comparison tables, FAQ ---- */
/* The "short answer" block is the snippet-extractable unit: one tight
   paragraph at the top of the page, visually a quiet callout rather than a
   hero. Teal left rule reuses the eyebrow's rule idiom. */
.answer-wrap{padding:6px 0 22px}
.answer-box{margin-top:0;padding:20px 24px;background:#f5f5f5;border-left:3px solid var(--color-accent-teal);border-radius:0 10px 10px 0}
.answer-box .answer-label{margin:0 0 7px;font:600 .68rem/1 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:#5a5a5a}
.answer-box p:last-child{margin:0;font-size:1.02rem;line-height:1.62;text-wrap:pretty}
.prose h2{margin:0 0 14px}
.prose p{font-size:1.02rem;line-height:1.72;margin:0 0 15px;text-wrap:pretty}
.prose p:last-child{margin-bottom:0}
.prose>*+h2{margin-top:34px}
.prose-list{margin:0 0 16px;padding-left:0;list-style:none;display:grid;gap:9px}
.prose-list li{position:relative;padding-left:19px;font-size:1.02rem;line-height:1.65;text-wrap:pretty}
.prose-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--color-accent-teal)}
.defs{margin:0 0 16px}
.defs dt{font-weight:600;font-size:1.02rem;margin-top:15px}
.defs dt:first-child{margin-top:0}
.defs dd{margin:4px 0 0;font-size:1.02rem;line-height:1.65;color:#3d3d3d;text-wrap:pretty}
.tbl-wrap{overflow-x:auto;margin:0 0 18px;-webkit-overflow-scrolling:touch}
table.cmp{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem}
table.cmp th,table.cmp td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--color-hairline-cloud,#e4e4e4);vertical-align:top;line-height:1.5}
table.cmp thead th{font:600 .7rem/1.4 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:#5a5a5a;border-bottom-width:2px}
table.cmp tbody th{font-weight:600;width:31%}
.rel-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.rel-list li{border-bottom:1px solid var(--color-hairline-cloud,#e4e4e4)}
.rel-list a{display:block;padding:13px 0;font-weight:600;font-size:1rem;text-decoration:none;color:inherit}
.rel-list a:hover{color:var(--color-accent-teal)}
/* Guides index — numbered editorial rows rather than a card grid. The eight
   guides are a reading list, not eight equivalent products, so a single column
   with a mono index reads faster and matches the .ed rhythm used elsewhere.
   Full-width rows also let each title breathe at a real display size. */
.gd-list{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--color-hairline-cloud,#e4e4e4)}
.gd-list li{border-bottom:1px solid var(--color-hairline-cloud,#e4e4e4)}
.gd-list a{display:grid;grid-template-columns:52px minmax(0,1fr) 22px;align-items:baseline;gap:18px;padding:22px 6px;text-decoration:none;color:inherit;transition:background .16s ease-out,padding-left .16s ease-out}
.gd-list a:hover,.gd-list a:focus-visible{background:#fafafa;padding-left:14px}
.gd-list i.n{font:600 .7rem/1.9 var(--font-mono);letter-spacing:.06em;color:var(--color-accent-teal);font-style:normal}
.gd-list b{display:block;font:600 1.24rem/1.3 var(--font-display);letter-spacing:-.012em;margin-bottom:6px;text-wrap:pretty}
.gd-list .gd-txt{display:block;min-width:0}
.gd-list .gd-txt>span{display:block;font-size:.94rem;line-height:1.62;color:#4a4a4a;max-width:62ch;text-wrap:pretty}
.gd-list a:hover b,.gd-list a:focus-visible b{color:var(--color-accent-teal)}
.gd-list svg{width:17px;height:17px;color:#c2c2c2;align-self:center;transition:transform .16s ease-out,color .16s ease-out}
.gd-list a:hover svg,.gd-list a:focus-visible svg{color:var(--color-accent-teal);transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.gd-list a,.gd-list svg{transition:none}.gd-list a:hover{padding-left:6px}.gd-list a:hover svg{transform:none}}
@media (max-width:600px){.gd-list a{grid-template-columns:34px minmax(0,1fr);gap:12px;padding:19px 4px}.gd-list svg{display:none}.gd-list b{font-size:1.1rem}}
@media (max-width:560px){.answer-box{padding:17px 18px}.prose p,.prose-list li,.defs dd,.defs dt{font-size:.98rem}}
/* ---------------------------------------------------------------- guide pages
   Long-form article shell. The 8 guides were a stack of identical white
   sections with inline padding, which read as one undifferentiated column of
   text. This gives them a real editorial rhythm: ruled + numbered section
   openers, a wider type measure, and a contents list so a 1,100-word page is
   scannable in five seconds. */
.guide{padding:0 0 8px;background:#fff;color:#111}
.guide .container{max-width:860px}

/* Hero */
.guide-head{padding:44px 0 0}
.guide-head .kicker{display:flex;align-items:center;gap:10px;font:600 .69rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#6d6d6d}
.guide-head .kicker a{color:inherit;text-decoration:none}
.guide-head .kicker a:hover{color:var(--color-accent-teal)}
.guide-head .kicker svg{width:12px;height:12px;color:#bdbdbd}
.guide-head h1{margin:15px 0 0;font:600 clamp(2rem,4.4vw,2.9rem)/1.12 var(--font-display);letter-spacing:-.022em;text-wrap:balance}
.guide-lede{margin:17px 0 0;font-size:1.14rem;line-height:1.62;color:#4a4a4a;max-width:64ch;text-wrap:pretty}

/* The quotable unit. Hairline box with an inset mono label rather than a
   tinted panel with a coloured left border. */
.answer-wrap{padding:26px 0 4px}
.answer-box{position:relative;margin:0;padding:26px 28px 24px;background:#fff;border:1px solid var(--color-hairline-cloud,#e4e4e4);border-top:2px solid var(--color-accent-teal);border-radius:0 0 10px 10px}
.answer-box .answer-label{position:absolute;top:-1px;left:28px;transform:translateY(-50%);margin:0;padding:0 9px;background:#fff;font:600 .66rem/1 var(--font-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--color-accent-teal)}
.answer-box p:last-child{margin:0;font-size:1.06rem;line-height:1.66;text-wrap:pretty}

/* Contents */
.guide-toc{margin:30px 0 0;padding:0;list-style:none;border-top:1px solid var(--color-hairline-cloud,#e4e4e4);display:grid}
.guide-toc-label{margin:34px 0 0;font:600 .66rem/1 var(--font-mono);letter-spacing:.11em;text-transform:uppercase;color:#6d6d6d}
.guide-toc li+li{border-top:1px solid var(--color-hairline-cloud,#e4e4e4)}
.guide-toc a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:baseline;padding:12px 4px;text-decoration:none;color:inherit;font-size:.96rem;font-weight:500;transition:color .16s ease-out}
.guide-toc a:hover,.guide-toc a:focus-visible{color:var(--color-accent-teal)}
.guide-toc em{font:600 .66rem/1.7 var(--font-mono);color:var(--color-accent-teal);font-style:normal}

/* Ruled, numbered section openers */
.guide-sec{padding:40px 0 0}
.guide-sec-end{padding-bottom:52px}
@media (max-width:600px){.guide-sec-end{padding-bottom:38px}}
.guide-sec>.container>h2{position:relative;margin:0 0 18px;padding-top:20px;border-top:1px solid var(--color-hairline-cloud,#e4e4e4);font:600 clamp(1.35rem,2.6vw,1.72rem)/1.22 var(--font-display);letter-spacing:-.016em;text-wrap:pretty}
.guide-sec>.container>h2 em{display:block;margin-bottom:9px;font:600 .66rem/1 var(--font-mono);letter-spacing:.11em;color:var(--color-accent-teal);font-style:normal}

.guide .sec-lede{font-size:1.1rem;line-height:1.62;color:#333;max-width:62ch;margin:0 0 4px;text-wrap:pretty}
.guide .prose p,.guide .prose-list li,.guide .defs dd{font-size:1.04rem;line-height:1.74}
.guide .prose p{max-width:66ch}

/* Definition pairs as editorial rows: the factor at display size with its
   explanation beneath. Each factor carries real weight, which suits a list of
   five things the reader is being asked to weigh against each other. No index
   numerals — the section openers and the takeaways block already number
   things on these pages. */
.guide .defs{margin:14px 0 0;display:grid}
.guide .defs dt{margin:0;padding:22px 0 0;border-top:1px solid var(--color-hairline-cloud,#e4e4e4);font:600 1.32rem/1.28 var(--font-display);letter-spacing:-.014em;color:#111;text-wrap:pretty}
.guide .defs dt:first-of-type{border-top:2px solid #111}
.guide .defs dd{margin:0;padding:8px 0 24px;color:#454545;max-width:64ch}
@media (max-width:600px){
  .guide .defs dt{padding-top:19px;font-size:1.16rem}
  .guide .defs dd{padding-bottom:20px}
}

/* Tables: mono figures, emphasised row header, no min-width lock on mobile */
.guide table.cmp{font-size:.94rem}
.guide table.cmp thead th{background:#fafafa;border-bottom-width:1px;color:#4a4a4a}
.guide table.cmp tbody th{font-weight:600;color:#111}
.guide table.cmp td{font-variant-numeric:tabular-nums}
.guide table.cmp tbody tr:last-child th,.guide table.cmp tbody tr:last-child td{border-bottom:0}
.tbl-wrap{border:1px solid var(--color-hairline-cloud,#e4e4e4);border-radius:10px;overflow:hidden auto;overflow-x:auto}
.tbl-note{margin:11px 0 0;font-size:.9rem;line-height:1.6;color:#6a6a6a}

/* Related, with arrows */
.rel-list a{display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:14px;align-items:center;padding:15px 0}
.rel-list svg{width:16px;height:16px;color:#c2c2c2;transition:transform .16s ease-out,color .16s ease-out}
.rel-list a:hover svg,.rel-list a:focus-visible svg{color:var(--color-accent-teal);transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){.rel-list svg,.guide-toc a{transition:none}.rel-list a:hover svg{transform:none}}
@media (max-width:600px){
  .guide-head{padding-top:30px}
  .answer-box{padding:24px 20px 20px}
  .answer-box .answer-label{left:20px}
  .guide-sec{padding-top:32px}
  .guide .prose p,.guide .prose-list li,.guide .defs dd{font-size:1rem}
  .guide-toc a{grid-template-columns:26px minmax(0,1fr);gap:9px}
  .rel-list svg{display:none}
  .rel-list a{grid-template-columns:1fr}
}
/* Pills read as single-line chips; flex-wrap handles the overflow. Below
   600px the grid takes over and labels are allowed to wrap again. */
.ind-cloud span{white-space:nowrap}
@media (max-width:600px){.ind-cloud span{white-space:normal}}

/* ---- Mobile fixes: industry cloud + centered eyebrow ---- */
/* The pill cloud relied on pills being narrower than the viewport. On a phone
   (worse with the OS text-size setting turned up) each pill takes its own row
   at a random width and long labels wrap inside a 999px radius, which reads as
   broken. Below 600px it becomes an even two-column grid with a smaller radius,
   so a wrapped label looks deliberate instead of accidental. */
@media (max-width:600px){
 .ind-cloud{margin-top:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(148px,100%),1fr));gap:8px;justify-content:stretch}
 .ind-cloud span{justify-content:center;text-align:center;padding:11px 12px;font-size:.9rem;line-height:1.35;border-radius:14px;overflow-wrap:anywhere}
 .ind-cloud span:hover{transform:none}
 .ind-row{gap:8px}
 /* The decorative hairlines get stranded at the viewport edges once the label
    wraps to two lines. They carry no meaning, so drop them and let the label
    centre and balance on its own. */
 .eyebrow-center{gap:0;max-width:100%;text-align:center;text-wrap:balance}
 .eyebrow-center::before,.eyebrow-center::after{display:none}
}
/* ---- Mobile: centre the footer ---- */
/* At one column per section the left-aligned columns read as a ragged stack.
   Centring the whole footer keeps the logo, blurb, CTA, link lists and bottom
   bar on one axis. Applies only below 700px, where .cols is already 1fr. */
@media (max-width:700px){
 footer.site .cols{text-align:center;justify-items:center}
 footer.site .cols>div{width:100%}
 footer.site .caption{margin-left:auto;margin-right:auto}
 footer.site ul{align-items:center}
 footer.site ul.city-list{justify-items:center;column-gap:18px;max-width:280px;margin-left:auto;margin-right:auto}
 .footer-bottom{align-items:center;text-align:center}
 .footer-bottom>span{display:block;width:100%}
 .footer-bottom>span:last-child{white-space:nowrap}
 .footer-bottom>span:last-child span{display:inline}
}
/* ---- Mobile: footer link centring + sticky bar prominence ---- */
@media (max-width:700px){
 /* The UA stylesheet's 40px list padding survives list-style:none, so a
    centred <ul> was centring inside an inset box and reading ~20px right of
    the headings above it. */
 footer.site ul{padding-left:0;margin-left:0}
 footer.site ul li{width:100%;text-align:center}
 footer.site ul.city-list li{text-align:center}
}
/* The sticky bar was black-on-black against the footer with a 14% white
   hairline, so it read as part of the page rather than as a fixed action bar.
   Now: teal top rule, a lift shadow to separate it from the content behind,
   and the consultation action promoted to the design system's dark-canvas
   solid button (white fill, black text, teal outline) while the phone number
   stays a plain link. */
.sticky-call{border-top:2px solid var(--color-accent-teal);box-shadow:0 -10px 28px rgba(0,0,0,.55);gap:14px}
.sticky-call .sc-call{color:#fff;text-decoration:none;font-weight:600;letter-spacing:.01em;padding:9px 4px}
.sticky-call .sc-call:hover{color:var(--color-accent-teal)}
.sticky-call .sc-cta{display:inline-flex;align-items:center;background:#fff;color:#000;border:1px solid var(--color-accent-teal);border-radius:999px;padding:9px 18px;font-weight:700;text-decoration:none;white-space:nowrap}
.sticky-call .sc-cta:hover,.sticky-call .sc-cta:active{background:#000;color:#fff}
@media (max-width:400px){.sticky-call{gap:10px}.sticky-call .sc-cta{padding:9px 13px}.sticky-call .sc-call{padding:9px 0}}
/* ---- Mobile: process run-log rows ---- */
/* The row is a single flex line: "> step n/5" | title | "done" | caret. On a
   phone there is not enough width, so every part wrapped independently and the
   columns lost their alignment. Below 600px it becomes an explicit two-row
   grid — the step counter, status and caret share the top line, the step title
   owns the second — so the counters and "done" labels line up down the list
   and long titles like "Design & Build" no longer break mid-phrase. */
@media (max-width:600px){
 .rn-out{padding:18px 14px;font-size:.84rem;line-height:1.6}
 .rn-step{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"w k c" "t t t";column-gap:10px;row-gap:2px;align-items:center;padding:9px 10px}
 .rn-step .w{grid-area:w;white-space:nowrap}
 .rn-step .k{grid-area:k;white-space:nowrap}
 .rn-step .rn-caret{grid-area:c;margin-left:0}
 .rn-step .rn-t{grid-area:t;font-size:1rem;letter-spacing:-.01em}
 .rn-detail-in{padding:8px 0 14px 16px}
 .rn-detail p{font-size:.9rem}
}
/* Wide container — grid-only sections. Body copy stays at the 1152px measure
   everywhere; this is for sections whose content is a grid of thumbnails,
   where the boxed width wastes screen and forces a 4-across grid on displays
   with room for 5. Only widens above 1280px, so nothing below a large desktop
   changes. Headings inside keep their own max-width, so the wider container
   does not lengthen any line of text. */
@media (min-width:1280px){
 .container-wide{max-width:1420px}
 .container-wide .wk-grid{gap:20px}
 .container-wide .logo-wall{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
}
@media (min-width:1600px){
 .container-wide{max-width:1560px}
}
/* Social link — footer only. Circular hairline icon button, matching the
   design system's circular-icon-button radius and its 1px-hairline-only rule
   for dark canvases (no fill, no shadow). Teal on hover, like every other
   footer affordance. */
.social-row{display:flex;align-items:center;gap:10px;margin-top:18px}
.social-row a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-full);color:#fff;transition:color .18s ease-out,border-color .18s ease-out}
.social-row a:hover,.social-row a:focus-visible{color:var(--color-accent-teal);border-color:var(--color-accent-teal)}
.social-row svg{width:19px;height:19px}
@media (max-width:700px){.social-row{justify-content:center}}
/* ---- Mobile: comparison tables stack instead of scrolling ---- */
/* min-width:520px meant these scrolled sideways on a phone: the browser drew a
   persistent scrollbar under the table and the rightmost column was hidden with
   nothing to suggest it existed. Below 640px each row becomes its own block and
   every cell is labelled from its column heading via data-label, so the full
   table is readable top-to-bottom with no horizontal scroll. */
@media (max-width:640px){
 .tbl-wrap{overflow:visible;margin-bottom:22px;padding:4px 16px 6px;border-radius:8px}
 table.cmp{display:block;min-width:0;font-size:.95rem;border-collapse:collapse}
 table.cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 table.cmp tbody,table.cmp tr{display:block}
 table.cmp tr{padding:14px 16px;border-bottom:1px solid var(--color-hairline-cloud,#e4e4e4)}
 table.cmp tr:first-child{padding-top:14px}
 table.cmp tr:last-child{border-bottom:0}
 table.cmp tbody th{display:block;width:auto;padding:0 0 8px;border:0;font-size:1.02rem;line-height:1.4}
 table.cmp td{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);column-gap:14px;padding:4px 0;border:0;line-height:1.5}
 table.cmp td[data-label]::before{content:attr(data-label);font:600 .68rem/1.7 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:#6a6a6a}
 table.cmp td:not([data-label]){display:block}
}