/* TSKN.studio, after dope.security's design language (docs/design-system.md, measured against the live site).
   Near-black canvas and no background images: depth comes from white hairlines lit from above, glass with lit edges,
   a violet glow behind the hero, outline type and a plane on a flight path. Violet is kept for the active tab, rings
   and glows. */

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-padding-top:calc(var(--header-h) + 24px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--text-body);font-weight:var(--font-weight-regular);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
button,a,summary,label{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,figure,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2{font-weight:var(--font-weight-medium);letter-spacing:-.035em;line-height:1;text-wrap:balance}
h1{font-size:clamp(3rem,1.6rem + 4.6vw,var(--text-display))}
h2{font-size:clamp(2.25rem,1.4rem + 2.8vw,var(--text-heading-lg))}
h3{font-size:1.25rem;font-weight:var(--font-weight-regular);letter-spacing:-.012em;line-height:1.3}
/* Headings set single words in the serif italic */
:is(h1,h2,h3,.statement,.cta-title,.fare-title) em{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:1.08em;letter-spacing:-.02em;line-height:.9}
p{color:var(--text-2);font-weight:var(--font-weight-light);text-wrap:pretty}
h3,dd,li{text-wrap:pretty}
/* Short blocks balance their lines rather than strand a single word */
.story-title,.pass-fields dd,.aside-facts dd,.check-list li,.deliverables li{text-wrap:balance}
strong{font-weight:var(--font-weight-medium)}
fieldset{min-width:0}
[hidden]{display:none!important}
::selection{background:var(--violet);color:var(--bg)}
:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.icon{width:20px;height:20px;flex-shrink:0}
.shell{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-top) var(--section-bottom)}
.section-tight{padding-top:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-100px;left:16px;z-index:100;padding:12px 18px;border-radius:4px;background:var(--text);color:var(--bg);font-weight:500}
.skip-link:focus{top:12px}
.lead{font-size:var(--text-subheading);font-weight:var(--font-weight-light);line-height:1.5;color:var(--text)}
.small{font-size:.8125rem;color:var(--text-3)}
.noscript-note{margin-top:24px;font-size:.9375rem}

/* Labels: code-style annotations, chips and links */
.cypher{font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;color:var(--text-3)}
.eyebrow{margin-bottom:20px;font-size:1.5rem;letter-spacing:-.01em;color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;padding:.75em 1.25em;border-radius:var(--radius-smallcontrols);background:var(--chip);font-size:.75rem;font-weight:400;letter-spacing:.04em;line-height:1.2;text-transform:uppercase;color:var(--text);transition:background-color .2s}
.link-arrow{display:inline-flex;align-items:center;gap:12px;font-size:1.125rem;font-weight:var(--font-weight-light);color:var(--text);transition:opacity .2s}
.link-arrow:hover{opacity:.75}
.ring{display:grid;place-items:center;width:28px;height:28px;border:1.5px solid var(--violet);border-radius:50%;color:var(--text);transition:background-color .3s var(--ease-quart),color .3s}
.ring .icon{width:14px;height:14px}
.link-arrow:hover .ring{background:var(--violet);color:var(--bg)}
.text-link{font-size:1rem;color:var(--text-2);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:5px;transition:color .2s,text-decoration-color .2s}
.text-link:hover{color:var(--text);text-decoration-color:currentColor}
.price-chip{display:inline-flex;align-items:center;padding:.75em 1.1em;border-radius:var(--radius-smallcontrols);background:var(--chip);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;line-height:1.2;text-transform:uppercase;color:var(--text);font-variant-numeric:tabular-nums}
:is(.consent,.faq-intro,.hero-note,.legal,.section-head-aside) a:not([class]){color:var(--text);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:4px;transition:text-decoration-color .2s}
:is(.consent,.faq-intro,.hero-note,.legal,.section-head-aside) a:not([class]):hover{text-decoration-color:currentColor}

/* Buttons: white-rimmed glass pills for calls to action, glass pills lit from the right, and 4px nav buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:.75em;min-height:52px;padding:12px 28px;border:1.5px solid transparent;border-radius:var(--radius-pills);font-size:1rem;font-weight:var(--font-weight-bold);line-height:1.2;letter-spacing:-.005em;color:var(--text);white-space:nowrap;transition:background .2s ease,border-color .3s var(--ease-quart),box-shadow .3s var(--ease-quart),color .2s,transform .2s}
.button .icon{width:18px;height:18px}
.button .icon-arrow{transition:transform .3s var(--ease-quart)}
.button:hover .icon-arrow{transform:translateX(3px)}
.button:active{transform:translateY(1px)}
.button.large{min-height:60px;padding:14px 34px}
/* Hover: a light sheen sweeps across, the rim lights violet and the button lifts; arrows nudge forward */
.button{position:relative;isolation:isolate;overflow:hidden}
.button::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,#ffffff33 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease-quart);pointer-events:none}
.button:hover::after{transform:translateX(120%)}
.primary{border-color:#fff;background:var(--wash)}
.primary:hover{border-color:var(--violet);background:linear-gradient(90deg,#edc3c400,#ffffff26),var(--wash-2);box-shadow:inset 0 0 0 1px var(--violet),0 0 28px -6px var(--violet-glow);transform:translateY(-2px)}
.secondary{border:.8px solid transparent;border-top-color:#ffffff40;border-right-color:#ffffff80;border-bottom-color:#edc3c440;border-left-width:0;background:var(--wash);font-weight:var(--font-weight-light)}
.secondary.large{min-height:60px;padding:0 32px}
.cta-actions .secondary.large{min-height:64px;font-size:clamp(1.125rem,.85rem + .8vw,1.75rem)}
.secondary:hover{border-color:var(--violet);background-color:#ffffff1a;box-shadow:inset 0 0 0 1px var(--violet),0 0 28px -6px var(--violet-glow);transform:translateY(-2px)}
.fill,.action{min-height:0;padding:10px 18px;border:1px solid transparent;border-radius:4px;font-size:12px;font-weight:400;line-height:1.2;letter-spacing:normal;text-transform:uppercase}
.fill{background:#ffffff1a}
.fill:hover{background:#fff;color:var(--bg)}
.action{border-color:#fff;padding:9px 17px}
.action:hover{background:#fff;color:var(--bg)}
.button.small{min-height:0;padding:9px 16px}
.outline{min-height:40px;padding:8px 14px;border:1px solid var(--line-3);border-radius:4px;font-size:.875rem;font-weight:400;color:var(--text)}
.outline .icon{width:16px;height:16px}
.outline:hover{border-color:var(--text);background:var(--text);color:var(--bg)}
.card-arrow{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line-2);border-radius:50%;color:var(--text);flex-shrink:0;transition:background-color .3s,border-color .3s,color .3s,transform .4s var(--ease-quart)}
.card-arrow .icon{width:18px;height:18px}
.feature-icon,.plan-icon,.step-icon,.tile-icon,.mega-icon,.feature-check,.tab-icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%;color:var(--text);flex-shrink:0;transition:background-color .3s,border-color .3s,color .3s}
:is(.feature-icon,.plan-icon,.step-icon,.tile-icon,.mega-icon,.tab-icon) .icon{width:20px;height:20px}

/* Navigation: full width, a hairline below, the menu set off by a vertical divider; glass fades in once scrolled */
.header{position:sticky;top:0;z-index:50;border-bottom:1px solid #ffffff40;background:#0909098c;-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);transition:background-color .3s}
.js .header.at-top{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.nav{display:flex;align-items:stretch;min-height:var(--header-h);padding:0 1.625rem}
.brand{display:inline-flex;align-items:center;gap:.5em;font-size:1.0625rem;font-weight:var(--font-weight-bold);letter-spacing:-.01em;text-transform:uppercase;color:var(--text);white-space:nowrap}
.brand-mark{width:1.3em;height:.97em;flex-shrink:0;overflow:visible}
.brand-t{fill:var(--text)}
.brand-dot{fill:var(--violet)}
.brand-name span{font-weight:var(--font-weight-light)}
.nav-menu{display:flex;flex:1;align-items:stretch;margin-left:1.5rem;border-left:1px solid #ffffff40}
.nav-links{display:flex;align-items:stretch;margin-inline:auto}
:is(.nav-links,.services-nav)>a{position:relative;display:inline-flex;align-items:center;margin:0 1rem;font-size:12px;font-weight:400;line-height:1;text-transform:uppercase;color:#fff}
:is(.nav-links,.services-nav)>a::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:4px;background:#ffffffbf;transform:scaleY(0);transform-origin:bottom;transition:transform .15s}
:is(.nav-links,.services-nav)>a:hover::after{transform:none}
:is(.nav-links,.services-nav)>a[aria-current]::after{transform:none;background:#ffffff59}
.services-nav{display:flex;align-items:stretch}
.services-nav>a{margin-right:.25rem}
.services-toggle{align-self:center;display:grid;place-items:center;width:26px;height:26px;margin-right:.75rem;border:0;border-radius:4px;background:transparent;color:#fff;transition:background-color .2s}
.services-toggle:hover,.services-toggle[aria-expanded=true]{background:#ffffff1a}
.services-toggle .icon{width:14px;height:14px;transition:transform .3s var(--ease-quart)}
.services-toggle[aria-expanded=true] .icon{transform:rotate(180deg)}
.nav-actions{display:flex;align-items:center;gap:12px;margin-left:1rem}
.menu-toggle{display:none;padding:10px 0;border:0;background:none;font-size:.875rem;letter-spacing:.18em;text-transform:uppercase;color:#fff}
/* Focusing a header control never scrolls the page: the sticky header is always in view */
.nav :focus{scroll-margin-top:calc(-1 * (var(--header-h) + 24px))}
.mega-menu{position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - var(--header-h));overflow-y:auto;overscroll-behavior:contain;background:#0b0b0e;border-bottom:1px solid var(--line-2);animation:menu-in .15s ease}
.mega-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);gap:32px;padding-block:32px 24px}
.mega-col-wide ul{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
.mega-title{margin:0 0 12px 12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.mega-link{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:var(--radius-buttons);transition:background-color .2s}
.mega-link:hover{background:var(--raise)}
.mega-icon{width:40px;height:40px}
.mega-link:hover .mega-icon{border-color:var(--text)}
.mega-link strong{display:block;font-size:.9375rem;font-weight:var(--font-weight-medium);letter-spacing:-.01em;color:var(--text)}
.mega-link small{display:block;margin-top:2px;font-size:.8125rem;line-height:1.4;color:var(--text-3)}
.mega-link:hover small{color:var(--text-2)}
.mega-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 12px 24px;border-top:1px solid var(--line)}
.mega-bar p{font-size:.9375rem}
.mega-bar strong{color:var(--text)}
.mega-bar>div{display:flex;align-items:center;gap:24px;flex-shrink:0}
.mobile-nav{position:absolute;top:100%;left:0;right:0;height:calc(100dvh - var(--header-h));overflow-y:auto;overscroll-behavior:contain;background:#090909eb;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);animation:menu-in .3s ease}
.mobile-nav-inner{display:flex;flex-direction:column;min-height:100%;padding:8px var(--gutter) 40px}
.mobile-nav nav{display:flex;flex-direction:column}
.mobile-nav nav a{display:flex;align-items:baseline;gap:18px;padding:18px 0;border-bottom:1px solid var(--line-3);font-size:clamp(1.5rem,1.1rem + 2vw,2rem);font-weight:var(--font-weight-light);letter-spacing:-.02em;line-height:1.1}
.mobile-num{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--text-3)}
.mobile-nav nav a[aria-current] .mobile-num{color:var(--violet)}
.mobile-nav-footer{display:grid;gap:20px;justify-items:start;margin-top:auto;padding-top:32px}
.mobile-nav-footer .button{width:100%}
.mobile-email{font-size:1.125rem;color:var(--text-2)}
.reading-progress{position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--text);transform:scaleX(0);transform-origin:left;pointer-events:none}
html.menu-open{overflow:hidden}
@keyframes menu-in{from{opacity:0}}

/* The fixed status strip: where the visitor is in the page, as coordinates that drift while scrolling */
.strip{position:fixed;left:0;right:0;bottom:2rem;z-index:30;display:flex;align-items:center;gap:2rem;padding:0 2.5rem;font-size:.875rem;line-height:1;color:#fff;mix-blend-mode:difference;pointer-events:none;transition:opacity .4s}
.strip>span{color:#fff6}
.strip-plus .icon,.strip-heart .icon{width:14px;height:14px;color:#fff}
.strip-coords{margin-left:auto;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.strip.is-done{opacity:0}

/* Hero: image-free. A violet glow sits behind a mixed-face headline; the plane's streak trails its last line */
.hero-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle closest-corner at 10% 50%,#6c4bd680,transparent 55%),radial-gradient(42% 52% at 78% 48%,#af50ff14,transparent 70%)}
.hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:100svh;margin-top:calc(var(--header-h) * -1);padding:calc(var(--header-h) + clamp(48px,8vh,112px)) 0 clamp(96px,14vh,180px);overflow:hidden;overflow:clip}
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,32rem);gap:clamp(40px,5vw,96px);align-items:center}
.hero-title{display:flex;flex-direction:column;align-items:flex-start;font-size:clamp(2.75rem,.9rem + 10vw,var(--text-display));font-weight:var(--font-weight-medium);letter-spacing:-.03em;line-height:.8}
.hero-title .line{position:relative;display:block;white-space:nowrap}
.hero-title .line+.line{margin-top:.08em}
.hero-title em{font-size:1.06em;line-height:.8}
.hero-title .dim{color:#f7f9fa8a}
.hero-streak{position:absolute;left:100%;top:58%;display:block;width:clamp(72px,17vw,300px);height:2px;margin-left:.22em;background:linear-gradient(90deg,#f7f9fa00,#f7f9fae6);border-radius:2px;box-shadow:0 0 12px 1px #ffffff40;transform-origin:left center;animation:streak 1.8s .5s var(--ease-out) backwards}
.hero-streak .plane-icon{position:absolute;right:-36px;top:50%;width:34px;height:auto;fill:var(--text);filter:drop-shadow(0 0 8px #ffffff73);transform:translateY(-50%)}
.hero-sub{max-width:20ch;margin-top:clamp(28px,4vh,44px);font-size:clamp(1.375rem,1rem + 1.1vw,1.75rem);font-weight:var(--font-weight-bold);line-height:1.2;letter-spacing:-.01em;color:var(--text);animation:rise 1s .3s var(--ease-out) backwards}
.hero-play{display:inline-flex;align-items:center;gap:2rem;margin-top:clamp(24px,3.5vh,40px);font-size:clamp(1.25rem,.95rem + .9vw,1.75rem);font-weight:var(--font-weight-light);letter-spacing:-.01em;color:var(--text);animation:rise 1s .45s var(--ease-out) backwards}
.play-ring{display:grid;place-items:center;width:64px;height:64px;border:1px solid #fff;border-radius:50%;color:var(--violet);transition:transform .1s,border-color .1s}
.play-ring .icon{width:24px;height:24px;stroke-width:2}
.hero-play:hover .play-ring{border-color:var(--violet);box-shadow:inset 0 0 0 .5px var(--violet);transform:scale(1.1)}
.hero-pass{justify-self:end;width:100%;animation:pass-in 1.2s .35s var(--ease-out) both}
@keyframes streak{from{transform:scaleX(0);opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes pass-in{from{opacity:0;transform:translateY(24px)}}

/* Boarding pass: glass with a lit right edge, a notched corner, a dashed perforation and a pixel barcode on the stub */
.pass{position:relative;display:flex;border:1px solid var(--line);border-right-color:#fff;border-radius:10.8px;background:linear-gradient(155deg,#ffffff12,#ffffff03 62%),#09090966;color:var(--text);transition:transform .2s ease-out;-webkit-mask:radial-gradient(circle 16px at 0 0,#0000 97%,#000);mask:radial-gradient(circle 16px at 0 0,#0000 97%,#000)}
.pass-main{flex:1;min-width:0;padding:clamp(28px,3.4vw,52px) clamp(20px,2vw,28px) clamp(28px,3vw,44px) clamp(24px,2.6vw,36px)}
.pass-stub{display:flex;flex-direction:column;align-items:center;gap:16px;width:72px;padding:28px 14px;border-left:1px dashed var(--line-2)}
.pass-code{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;color:var(--text-3)}
.barcode{width:100%;height:auto;fill:var(--text);opacity:.85}
.pass-label{display:flex;align-items:center;gap:10px;font-size:1.25rem;font-weight:400;letter-spacing:-.01em;color:var(--text-3)}
.pass-label .brand-mark{width:22px;height:16px}
.pass-label .icon{width:20px;height:20px;stroke-width:1.4}
.pass-route{display:flex;align-items:flex-end;gap:16px;margin-top:22px;color:var(--text-3)}
.pass-route>div{display:grid;gap:6px}
.pass-key{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.pass-route strong{font-size:1.5rem;font-weight:400;letter-spacing:.02em;line-height:1;text-transform:uppercase;color:var(--text-2)}
.pass-arrow .icon{width:16px;height:16px;margin-bottom:4px}
.pass-title{margin-top:clamp(40px,7vh,88px);font-size:clamp(1.75rem,1.1rem + 1.6vw,2.5rem);font-weight:400;line-height:1;letter-spacing:-.02em;color:var(--text)}
.swap{display:grid}
/* The pass headline changes once, three seconds in, and then holds */
.swap>span{grid-area:1/1;animation:swap-out .6s 3s ease-in-out forwards}
.swap>span+span{opacity:0;animation-name:swap-in}
@keyframes swap-out{to{opacity:0;transform:translateY(-.5em)}}
@keyframes swap-in{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
.pass-actions{display:grid;gap:14px;margin-top:28px}
.pass-actions .button{width:100%;min-height:58px}
.pass-meta{margin-top:20px;font-size:.875rem;color:var(--text-3)}
.pass-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin-top:24px;padding-top:22px;border-top:1px dashed var(--line-2)}
.pass-fields dt{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.pass-fields dd{margin-top:6px;font-size:.9375rem;font-weight:var(--font-weight-medium);line-height:1.35;color:var(--text)}

/* Services as split-flap rows: outlined mono names that fill in, left to right, as they scroll past */
.flaps{display:flex;flex-direction:column;gap:1rem}
.flap{padding:1px;border-radius:8px;background:var(--frame)}
.flap-link{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:1rem;border-radius:7px;background:var(--bg);transition:background-color .6s var(--ease-quint)}
.flap-link:hover{background:var(--raise)}
.flap-text{position:relative;z-index:1;background:inherit;font-family:var(--font-mono);font-size:var(--flap-size);font-weight:400;letter-spacing:.2em;line-height:.9;text-transform:uppercase}
.flap-word{position:relative;z-index:2;display:block;color:#f0f0f000;-webkit-text-stroke:.8px var(--text)}
.flap-link:hover .flap-word{color:var(--text)}
.flap-fill{position:absolute;inset:0;z-index:1;background:inherit}
.flap-solid{display:block;color:var(--color-soft-white)}
.flap-mask{position:absolute;top:0;right:0;bottom:0;z-index:2;width:0;background:inherit}
.flap-arrow{position:relative;z-index:1;width:clamp(28px,3.6vw,51px);height:auto;fill:var(--text);flex-shrink:0}
.flap-line{position:absolute;left:0;right:0;top:50%;z-index:3;height:5px;margin-top:-2.5px;background:inherit}
.features-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 40px;margin-top:40px}
.features-foot .cypher{margin-right:auto}
.cursor-label{position:fixed;left:0;top:0;z-index:100;display:flex;align-items:center;gap:.5rem;padding:8px;border:solid #ffffff5e;border-width:1px 1px 0 0;border-radius:4px;background:linear-gradient(#10151bb3,#10151bb3),#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 3.2px 3.2px #00000040;font-size:11px;letter-spacing:.07em;line-height:1;text-transform:uppercase;color:#fff;pointer-events:none;opacity:0;transition:opacity .25s}
.cursor-label.is-on{opacity:1}
.cursor-label .icon{width:14px;height:14px}

/* The process told as a flight. Stacked by default; live (wide screens with motion) it slides sideways while a plane flies the route */
.story{position:relative;padding:var(--section-top) 0 var(--section-bottom)}
.story-view{position:relative}
.story-track{display:grid;gap:clamp(64px,9vw,128px);max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.story-panel{position:relative}
.story-copy{position:relative;z-index:2;max-width:46rem}
.story-giant{position:absolute;z-index:0;top:-.08em;right:0;font-family:var(--font-mono);font-size:clamp(7rem,22vw,26rem);line-height:.8;letter-spacing:-.04em;color:#f7f9fa00;-webkit-text-stroke:2px var(--text);opacity:.1;pointer-events:none}
.story-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:28px;font-size:1.5rem;font-weight:400;letter-spacing:-.01em;color:var(--text)}
.story-title{font-size:clamp(2.75rem,1.4rem + 4vw,5rem);font-weight:var(--font-weight-bold);letter-spacing:-.07em;line-height:.92}
.story-title em{font-family:var(--font-sans);font-size:1em;font-style:italic;font-weight:var(--font-weight-light);letter-spacing:-.06em}
.story-title-lg{max-width:12ch}
.story .cypher{margin-bottom:24px}
.dashed{position:relative;display:inline-block;border-bottom:.04em dashed var(--text)}
.dashed::before{content:attr(data-note);position:absolute;left:0;top:100%;margin-top:.5em;font-family:var(--font-mono);font-size:10px;font-weight:400;letter-spacing:.24em;line-height:1;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.story-lead{max-width:36ch;margin-top:40px;font-size:clamp(1.0625rem,.95rem + .4vw,1.25rem);line-height:1.6}
.story-note{margin-top:28px;font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-3)}
.story-desc{max-width:36ch;margin-top:36px;font-size:clamp(1.0625rem,.95rem + .4vw,1.25rem);line-height:1.6}
.story-out{max-width:36ch;margin-top:28px;padding-top:20px;border-top:1px dashed var(--line-2);font-size:1rem;color:var(--text)}
.story-out span{display:block;margin-bottom:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.story-index,.story-plane,.story-path{display:none}
.story-more{margin-top:clamp(48px,6vw,80px)}
/* Live: the track is a sticky film strip moved by GSAP; script.js sets the section height and flies the plane */
.story.is-live{padding:0}
.story.is-live .story-view{position:sticky;top:0;height:100vh;overflow:hidden}
.story.is-live .story-track{display:flex;width:max-content;height:100%;max-width:none;margin:0;padding:0;gap:0;will-change:transform}
.story.is-live .story-panel{display:flex;align-items:center;width:100vw;height:100vh;flex-shrink:0;padding:var(--header-h) 0 0 calc(var(--gutter) + 4rem)}
.story.is-live .story-giant{top:50%;left:var(--gutter);right:auto;font-size:min(46vh,30vw);transform:translateY(-38%)}
.story.is-live .story-copy{max-width:min(60vw,46rem);transition:opacity .2s}
.story.is-live .story-path{position:absolute;top:0;left:0;z-index:1;display:block;overflow:visible;pointer-events:none}
.story-route{fill:none;stroke:#f7f9fa38;stroke-width:1;stroke-dasharray:24 24}
.story-drawn{fill:none;stroke:var(--text);stroke-width:1}
.story.is-live .story-plane{position:absolute;top:0;left:0;z-index:3;display:block;width:36px;height:32px;margin:-16px 0 0 -36px;fill:var(--text);transform-origin:100% 50%;will-change:transform}
.story.is-live .story-plane svg{width:36px;height:32px}
.story.is-live .story-index{position:absolute;top:50%;right:2rem;z-index:4;display:grid;gap:16px;transform:translateY(-50%)}
.story-index li{font-size:.75rem;line-height:1;text-transform:uppercase;color:var(--text);opacity:.4;transition:opacity .3s}
.story-index li.is-active{opacity:1}
.story.is-live .story-more{position:absolute;left:0;right:0;bottom:calc(2rem + 48px);z-index:4;margin:0}

/* "Launch ready.": the giant serif moment between the story and the studio's promise */
.fly{overflow:hidden;padding:clamp(48px,8vw,120px) var(--gutter) clamp(72px,10vw,160px);text-align:center}
.fly-words{font-family:var(--font-serif);font-size:clamp(4.5rem,18vw,17rem);font-style:italic;line-height:.85;letter-spacing:-.04em;color:var(--text)}
.fly-words span{display:inline-block}
.fly-words.is-flying span{animation:fly-in 1s var(--ease-out) backwards}
.fly-words.is-flying span+span{animation-delay:.4s}
@keyframes fly-in{from{opacity:0;transform:translateY(60%)}}

/* The studio's promise: a typed serif line, the statement, chips, then four plain columns */
.statement-section>.cypher{margin-top:clamp(56px,7vw,96px)}
.typewriter{font-family:var(--font-serif);font-size:clamp(3rem,1.4rem + 7vw,9rem);font-style:italic;line-height:1;letter-spacing:-.03em;white-space:nowrap;color:var(--text)}
.caret{font-family:var(--font-mono);font-style:normal;font-size:.6em;color:var(--violet)}
.caret.is-off{opacity:0}
.statement{max-width:30ch;margin-top:clamp(40px,5vw,72px);font-size:clamp(1.5rem,1.05rem + 1.4vw,2.5rem);font-weight:400;letter-spacing:-.02em;line-height:1.25}
.statement em{font-size:1.1em}
.statement-section .chips{margin-top:32px}
.why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:24px;border-top:1px solid var(--line-2)}
.why-card,.feature-card{display:flex;flex-direction:column;align-items:flex-start;padding:28px 28px 12px 0}
:is(.why-card,.feature-card)+:is(.why-card,.feature-card){padding-left:28px;border-left:1px solid var(--line)}
.card-num{margin-bottom:28px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--text-3)}
:is(.why-card,.feature-card) h3{margin:26px 0 10px;font-size:1.125rem;font-weight:var(--font-weight-medium)}
:is(.why-card,.feature-card) p{font-size:.9375rem}
.support-copy{max-width:820px;margin-top:48px;font-size:.875rem;color:var(--text-3)}

/* Section headings: a code-style label, then a medium headline with one serif word */
.section-head{margin-bottom:clamp(40px,5vw,72px)}
.section-head .cypher{margin-bottom:24px}
.section-intro{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px 64px;align-items:end}
.section-title{max-width:16ch;font-size:clamp(2.25rem,1.4rem + 2.8vw,var(--text-heading-lg));font-weight:var(--font-weight-medium);letter-spacing:-.04em;line-height:1;color:var(--text);text-wrap:balance}
.section-head-aside{display:grid;justify-items:start;gap:20px;max-width:26rem;justify-self:end}
.section-head-aside p{font-size:1.125rem;line-height:1.55}

/* Industries as tabs: a pill track tinted violet, the active tab filled */
.tab-menu{display:inline-flex;flex-wrap:wrap;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:1.75rem;background:linear-gradient(#000000bf,#000000bf),linear-gradient(90deg,#401860,#4823b4 50%,#634e78)}
.tab-menu [role=tab]{padding:.5em 1em;border:1px solid transparent;border-radius:99px;background:transparent;font-size:1rem;font-weight:400;line-height:1.3;color:var(--text);transition:opacity .2s}
.tab-menu [role=tab]:hover{opacity:.75}
.tab-menu [aria-selected=true]{border-color:var(--line);background:var(--violet);font-weight:var(--font-weight-bold);color:var(--bg);opacity:1}
.tab-pane{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:start;max-width:52rem;margin-top:48px;animation:menu-in .3s ease}
.tab-pane h3{max-width:19ch;font-size:clamp(1.5rem,1.2rem + .9vw,1.75rem);font-weight:400;letter-spacing:-.02em;line-height:1.15}
.tab-pane p{max-width:46ch;margin:16px 0 28px;font-size:clamp(1.0625rem,.95rem + .4vw,1.25rem);line-height:1.6}
.tab-icon{width:56px;height:56px}

/* Pricing fares: ticket-shaped glow cards (two notches), a big starting price and a short note */
.fares{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fare{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:19rem;padding:28px;border-radius:20px;overflow:hidden;background:#0c0d10;color:var(--text);transition:box-shadow .2s;-webkit-mask:radial-gradient(circle 14px at 0 64%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 14px at 100% 64%,#0000 97%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 14px at 0 64%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 14px at 100% 64%,#0000 97%,#000) right/51% 100% no-repeat}
.fare::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--bloom)}
.fare-teal{--bloom:radial-gradient(110% 80% at 0% 100%,#005457e6,transparent 62%),radial-gradient(70% 60% at 100% 0%,#80e9ed33,transparent 62%)}
.fare-violet{--bloom:radial-gradient(110% 80% at 0% 100%,#5b3a96f2,transparent 62%),radial-gradient(70% 60% at 100% 0%,#68b2e540,transparent 62%)}
.fare-magenta{--bloom:radial-gradient(110% 80% at 0% 100%,#540536f2,transparent 62%),radial-gradient(70% 60% at 100% 0%,#ac4f7040,transparent 62%)}
.fare:hover{box-shadow:inset 0 0 0 1.5px #ffffffe6}
.fare-label{font-size:.875rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-2)}
.fare-title{margin-top:12px;font-size:2rem;font-weight:var(--font-weight-bold);letter-spacing:-.03em;line-height:1.05}
.fare-price{margin-top:auto;padding-top:40px;font-size:clamp(3.5rem,2.4rem + 2.6vw,5.5rem);font-weight:var(--font-weight-light);letter-spacing:-.05em;line-height:.9;color:#f7f9fae6;font-variant-numeric:tabular-nums}
.fare-unit{margin-top:14px;font-size:.875rem;color:var(--text-2)}
.pricing-note{max-width:860px;margin-top:28px;font-size:.875rem;color:var(--text-3)}

/* FAQ */
.faq-section>.cypher{margin-bottom:24px}
.faq-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(40px,6vw,96px);align-items:start}
.faq-intro{position:sticky;top:calc(var(--header-h) + 32px)}
.faq-intro .section-title{margin-bottom:20px}
.faq-intro>p{max-width:34ch;font-size:1.0625rem}
.faq-list{border-top:1px solid var(--line-2)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:16px;padding:24px 0;list-style:none;cursor:pointer;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);letter-spacing:-.012em;line-height:1.4;color:var(--text)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-num{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--text-3)}
.faq-icon{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line-2);border-radius:50%;transition:transform .4s var(--ease-quart),background-color .3s,border-color .3s,color .3s}
.faq-icon .icon{width:16px;height:16px}
.faq-list summary:hover .faq-icon{border-color:var(--text)}
.faq-list details[open] .faq-icon{border-color:var(--text);background:var(--text);color:var(--bg);transform:rotate(45deg)}
.faq-answer{padding:0 52px 28px 60px}
.faq-answer p{max-width:62ch}

/* Closing call to action: centred, light, with the plane climbing away and the curve of the earth below */
.cta-section{position:relative;isolation:isolate;overflow:hidden;overflow:clip;padding:clamp(96px,12vw,176px) 0 clamp(160px,20vw,300px);text-align:center}
.cta-section::before{content:'';position:absolute;z-index:-1;left:50%;bottom:calc(-1 * min(108vw,1900px) + clamp(96px,12vw,180px));width:min(150vw,2600px);height:min(110vw,1940px);border-radius:50%;background:#0b0b0e;box-shadow:0 -1px 0 #ff8cc84d,0 -40px 140px #60359073;transform:translateX(-50%)}
.cta-inner{display:flex;flex-direction:column;align-items:center}
.cta-plane .plane-icon{width:40px;height:auto;fill:var(--text);transform:rotate(-24deg)}
.cta-title{max-width:24ch;margin-top:28px;font-size:clamp(1.75rem,1rem + 2.6vw,3.125rem);font-weight:var(--font-weight-light);letter-spacing:-.025em;line-height:1.2}
.cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:44px}

/* Footer: stacked wordmark, bold column heads, violet underlines that grow, a vertical label and a tiny bottom bar */
.footer{padding:48px var(--gutter) 28px}
.footer-inner{max-width:120rem;margin-inline:auto}
.footer-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) 2rem;gap:48px 64px;padding-bottom:64px}
.footer-logo{display:inline-grid;font-size:clamp(2.75rem,2rem + 1.8vw,3.75rem);font-weight:var(--font-weight-bold);letter-spacing:-.02em;line-height:.9;text-transform:uppercase;color:var(--text)}
.footer-logo span+span{padding-left:.75em;font-weight:var(--font-weight-light)}
.footer-brand>p{max-width:30ch;margin-top:28px;font-size:1.125rem;line-height:1.55}
.footer-contact{display:grid;gap:4px;justify-items:start}
.footer-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.footer-nav h2{margin-bottom:20px;font-size:1.25rem;font-weight:var(--font-weight-bold);letter-spacing:0;line-height:1;text-transform:uppercase}
.footer-nav a,.footer-contact a{display:block;width:fit-content;padding:.5rem 0 .25rem;font-size:1.125rem;font-weight:var(--font-weight-light);line-height:1.25;color:var(--text);background:linear-gradient(var(--violet),var(--violet)) 0 100%/0 2px no-repeat;transition:background-size .3s ease-in}
.footer-nav a:hover,.footer-contact a:hover{background-size:100% 2px;transition-duration:.2s;transition-timing-function:ease-out}
.footer-tag{justify-self:end;writing-mode:vertical-rl;font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:14px 40px;padding-top:20px;border-top:1px solid var(--line-2);font-size:10px;letter-spacing:.18em;line-height:1.2;text-transform:uppercase;color:var(--text-3)}
.footer-made{display:inline-flex;align-items:center;gap:8px}
.footer-made .icon{width:12px;height:12px;color:var(--text)}
.footer-links{display:flex;flex-wrap:wrap;gap:24px}
.footer-links a{transition:color .2s}
.footer-links a:hover{color:var(--text)}
.footer-clock{display:inline-flex;gap:12px;margin-left:auto;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--text-3);font-variant-numeric:tabular-nums}
.clock-time{min-width:12ch;color:var(--text)}

/* Inner-page heroes, image-free like the homepage */
.page-hero{position:relative;isolation:isolate;margin-top:calc(var(--header-h) * -1);padding:calc(var(--header-h) + clamp(64px,10vw,152px)) 0 clamp(64px,8vw,120px);overflow:hidden;overflow:clip}
.page-hero h1{max-width:14ch;margin-top:20px;letter-spacing:-.03em;line-height:.92}
.page-hero h1 em{font-size:1.06em}
.page-lead{max-width:38rem;margin-top:32px;font-size:clamp(1.0625rem,.95rem + .45vw,1.25rem);font-weight:var(--font-weight-light);line-height:1.6;color:var(--text-2)}
.page-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;color:var(--text-3)}
.breadcrumbs li{display:flex;align-items:center;gap:10px}
.breadcrumbs li+li::before{content:'/';content:'/' / '';color:var(--text-4)}
.breadcrumbs a{transition:color .2s}
.breadcrumbs a:hover{color:var(--text)}
.breadcrumbs [aria-current]{color:var(--text-2)}
.hero-facts{display:flex;flex-wrap:wrap;margin-top:48px;border-block:1px dashed var(--line-2)}
.hero-facts>div{padding:18px 32px 18px 0;margin-right:32px;border-right:1px solid var(--line)}
.hero-facts>div:last-child{margin-right:0;border-right:0}
.hero-facts dt{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.hero-facts dd{margin-top:6px;font-size:1rem;font-weight:var(--font-weight-medium);color:var(--text)}
.page-hero-short{display:flex;align-items:center;min-height:min(820px,88svh)}
.page-hero-short .page-hero-inner{width:100%}
.hero-note{margin-top:24px}
.hero-giant{margin-top:40px;font-family:var(--font-mono);font-size:clamp(6rem,20vw,16rem);line-height:.8;letter-spacing:.06em;color:#f7f9fa00;-webkit-text-stroke:1.5px var(--text);opacity:.18}

/* Frames lit from above, shared by cards and panels */
:is(.service-card,.plan,.industry-card,.support-note,.inline-callout,.invite,.form-panel){border:1px solid transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--frame) border-box}

/* Service listings */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px}
.filter-button{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:7px 7px 7px 16px;border:1px solid var(--line-2);border-radius:99px;background:transparent;font-size:.875rem;color:var(--text-2);transition:background-color .2s,border-color .2s,color .2s}
.filter-button span{display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:99px;background:var(--chip);font-family:var(--font-mono);font-size:11px;color:var(--text-3);transition:background-color .2s,color .2s}
.filter-button:hover{border-color:var(--line-3);color:var(--text)}
.filter-button[aria-pressed=true]{border-color:var(--line);background:var(--violet);font-weight:var(--font-weight-bold);color:var(--bg)}
.filter-button[aria-pressed=true] span{background:#0909091f;color:var(--bg)}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.service-card{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius-buttons);transition:background .6s var(--ease-quint)}
.service-card:hover{background:linear-gradient(var(--raise),var(--raise)) padding-box,var(--frame) border-box}
.service-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:#111}
.service-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.72) saturate(.6);transition:transform .8s var(--ease-quint),filter .5s}
/* Concept imagery stays in the night palette until a card is hovered or focused */
@media(hover:hover){.service-media img{filter:grayscale(1) brightness(.55) contrast(1.08)}}
.service-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#0909098c)}
.service-card:is(:hover,:focus-visible) .service-media img{transform:scale(1.04);filter:none}
.service-body{display:flex;flex-direction:column;flex:1;padding:24px 24px 26px}
.service-meta{display:flex;gap:14px;margin-bottom:14px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.service-concept{margin-left:auto}
.service-body h3{margin-bottom:10px;font-size:1.5rem;font-weight:var(--font-weight-medium);letter-spacing:-.03em}
.service-body>p:not(.service-meta){margin-bottom:24px;font-size:.9375rem}
.service-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
.service-card:hover .card-arrow{border-color:var(--text);background:var(--text);color:var(--bg);transform:rotate(45deg)}
.related .section-head h2{font-size:clamp(1.75rem,1.3rem + 1.4vw,2.5rem)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start;padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line-2)}
.split h2{margin-top:24px}
.split .lead{margin-bottom:20px}
.split .button{margin-top:36px}

/* Service pages */
.showcase{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.showcase-media img{width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--line-2);border-radius:var(--radius-buttons)}
.showcase-media figcaption{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.showcase-media figcaption span{color:var(--text-2)}
.showcase-story .cypher{margin-bottom:20px}
.showcase-story h2{margin-bottom:20px;font-size:clamp(1.75rem,1.3rem + 1.4vw,2.5rem)}
.showcase-note{margin-top:24px;padding-top:24px;border-top:1px dashed var(--line-2);font-size:.875rem;color:var(--text-3)}
.service-detail{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(40px,6vw,80px);align-items:start}
.detail-main>.cypher{margin-bottom:20px}
.detail-main>h2{margin-bottom:36px;font-size:clamp(2rem,1.4rem + 1.8vw,3rem)}
.deliverables{display:grid;grid-template-columns:1fr 1fr;margin-bottom:56px;border-top:1px solid var(--line-2)}
.deliverables li{display:flex;align-items:center;gap:14px;padding:20px 20px 20px 0;border-bottom:1px solid var(--line);line-height:1.4;color:var(--text)}
.deliverables li:nth-child(even){padding-left:20px;border-left:1px solid var(--line)}
.deliverables li:last-child:nth-child(odd){grid-column:1/-1}
.feature-check{width:30px;height:30px}
.feature-check .icon{width:15px;height:15px;stroke-width:2}
.detail-block{margin-top:40px;padding-top:40px;border-top:1px solid var(--line)}
.deliverables+.detail-block{margin-top:48px;padding-top:0;border-top:0}
.detail-block h2{margin-bottom:16px;font-size:clamp(1.75rem,1.4rem + 1vw,2.25rem)}
.detail-block p{font-size:1.0625rem;line-height:1.6}
.project-aside{position:sticky;top:calc(var(--header-h) + 24px)}
.project-aside .pass-main{display:flex;flex-direction:column}
.aside-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:24px 0 12px;font-size:clamp(2.25rem,1.8rem + 1.4vw,3rem);font-weight:var(--font-weight-light);letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.project-aside .pass-main>p:not([class]){font-size:.9375rem}
.aside-facts{margin:24px 0;border-top:1px dashed var(--line-2)}
.aside-facts>div{display:grid;gap:6px;padding:14px 0;border-bottom:1px solid var(--line)}
.aside-facts dt{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.aside-facts dd{font-size:.9375rem;font-weight:var(--font-weight-medium)}
.project-aside .button{width:100%;margin-bottom:18px}
.project-aside .link-arrow{align-self:center;font-size:1rem}
.project-aside .small{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}

/* Clarity cards and other feature grids */
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-2)}
.feature-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Pricing page: plans share rows so prices, buttons and foot rules line up */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.plan{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:var(--card-padding);border-radius:10.8px}
.plan-head h3{margin:28px 0 8px;font-size:1.5rem;font-weight:var(--font-weight-medium);letter-spacing:-.025em}
.plan-head p{font-size:.9375rem;line-height:1.55}
.plan-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:30px 0 28px;padding-top:28px;border-top:1px dashed var(--line-2)}
.plan-from{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.plan-price strong{font-size:clamp(2.75rem,2rem + 1.9vw,var(--text-heading-lg));font-weight:var(--font-weight-light);letter-spacing:-.05em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.plan-unit{width:100%;margin-top:10px;font-size:.875rem;color:var(--text-3)}
.plan>.button{width:100%}
.check-list{display:grid;gap:12px;margin:28px 0}
.check-list li{display:flex;gap:12px;font-size:.9375rem;line-height:1.5;color:var(--text-2)}
.check-list .icon{width:18px;height:18px;margin-top:2px;color:var(--text);stroke-width:2}
.plan-foot{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);font-size:.875rem;color:var(--text-3)}
a.plan-foot{display:flex;color:var(--text)}
@supports (grid-template-rows:subgrid){.plan{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
.plan>:is(.plan-price,.check-list){align-self:start}
.plan-foot{margin-top:0}
}
.plan-featured{background:linear-gradient(#000000a6,#000000a6) padding-box,linear-gradient(120deg,#401860,#4823b4 50%,#634e78) padding-box,var(--frame) border-box}
.plan-featured .check-list .icon{color:var(--violet)}
.plan-featured .plan-foot{color:var(--text-2)}
.plan-badge{position:absolute;top:var(--card-padding);right:var(--card-padding);padding:.75em 1.25em;border-radius:var(--radius-smallcontrols);background:var(--violet);font-size:.75rem;font-weight:var(--font-weight-bold);letter-spacing:.04em;line-height:1.2;text-transform:uppercase;color:var(--bg)}
.invite,.support-note,.inline-callout{display:flex;align-items:center;gap:24px;margin-top:40px;padding:28px 32px;border-radius:var(--radius-buttons)}
:is(.invite,.support-note,.inline-callout) :is(h2,h3){margin-bottom:6px;font-size:1.1875rem;font-weight:var(--font-weight-medium);letter-spacing:-.012em;line-height:1.3}
:is(.invite,.support-note,.inline-callout) p{max-width:66ch;font-size:.9375rem}
:is(.invite,.support-note,.inline-callout) .button{margin-left:auto;flex-shrink:0}
.price-table{width:100%;border-collapse:collapse;text-align:left}
.price-table th{padding:14px 16px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);font-family:var(--font-mono);font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.price-table td{padding:24px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.price-table tbody tr{transition:background-color .25s}
.price-table tbody tr:hover{background:var(--raise)}
.price-table tbody tr:target{background:#262626}
.price-table td:first-child{width:58%;padding-right:40px}
.price-table h3{margin-bottom:6px;font-size:1.125rem;font-weight:var(--font-weight-regular);letter-spacing:-.015em}
.price-table p{font-size:.875rem}
.table-price{font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--text);font-variant-numeric:tabular-nums}
.price-table td:last-child{text-align:right}
.price-table :is(th,td):first-child{padding-left:0}
.price-table :is(th,td):last-child{padding-right:0}
@media(min-width:768px){.price-table tbody tr:hover td:first-child{box-shadow:-16px 0 0 var(--raise)}
.price-table tbody tr:hover td:last-child{box-shadow:16px 0 0 var(--raise)}
.price-table tbody tr:target td:first-child{box-shadow:-16px 0 0 #262626}
.price-table tbody tr:target td:last-child{box-shadow:16px 0 0 #262626}
}

/* Estimator and form controls */
.estimator{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.estimate-controls{display:grid;align-content:start;gap:28px;padding-top:32px;border-top:1px solid var(--line-2)}
#estimate-website-options,#estimate-fixed-options{display:grid;gap:28px}
.estimate-result .pass-main{display:flex;flex-direction:column}
.estimate-output{margin:28px 0;padding-bottom:28px;border-bottom:1px dashed var(--line-2)}
.estimate-figure{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.estimate-name{display:block;margin-bottom:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;line-height:1.5;text-transform:uppercase;color:var(--text-2)}
.estimate-result strong{display:block;font-size:clamp(2.75rem,2rem + 2vw,var(--text-heading-lg));font-weight:var(--font-weight-light);letter-spacing:-.05em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
#estimate-recurring{margin-top:18px;font-size:1.0625rem;color:var(--text)}
#estimate-scope{margin-top:10px;font-size:.9375rem;color:var(--text-3)}
.estimate-result .button{width:100%}
.estimate-result .small{margin-top:16px}
.field{display:grid;align-content:start;gap:10px}
.field-label{font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;color:var(--text-2)}
.field-hint{margin-top:-4px;font-size:.8125rem;color:var(--text-3)}
.req{color:var(--violet)}
:where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){display:block;width:100%;min-width:0;min-height:52px;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--radius-buttons);background:#ffffff0a;font-size:1rem;line-height:1.4;color:var(--text);-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .25s,background-color .2s}
:where(select){padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f9fa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px;cursor:pointer}
:where(select) option,:where(select) optgroup{background:#141318;color:var(--text)}
:where(textarea){min-height:150px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--text-3)}
select:has(option[value=""]:checked){color:var(--text-3)}
input:hover,select:hover,textarea:hover{border-color:var(--line-3)}
input:focus-visible,select:focus-visible,textarea:focus-visible,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--text);background-color:#ffffff0f;box-shadow:0 0 0 3px #af50ff59}
input:is([type=checkbox],[type=radio]):focus-visible{outline:2px solid var(--text);outline-offset:3px;box-shadow:none}
:is(input,select,textarea)[aria-invalid=true]{border-color:#ffa3a3}
.field-error{font-size:.8125rem;line-height:1.45;color:#ffa3a3}
.segmented{margin:0;padding:0;border:0}
.segmented legend{margin-bottom:10px;padding:0}
.segmented-options{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--line);border-radius:99px;background:linear-gradient(#000000bf,#000000bf),linear-gradient(90deg,#401860,#4823b4 50%,#634e78)}
.segmented label{position:relative;cursor:pointer}
.segmented input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.segmented span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border-radius:99px;font-size:.875rem;line-height:1.3;text-align:center;color:var(--text);transition:background-color .25s,color .25s}
.segmented input:checked+span{background:var(--violet);font-weight:var(--font-weight-bold);color:var(--bg)}
.segmented input:focus-visible+span{outline:2px solid var(--text);outline-offset:2px}
.stepper{display:flex;align-items:center;gap:8px;max-width:232px}
.stepper button{display:grid;place-items:center;width:52px;height:52px;flex-shrink:0;border:1px solid var(--line-2);border-radius:var(--radius-buttons);background:transparent;font-size:1.375rem;line-height:1;color:var(--text);transition:background-color .2s,border-color .2s,color .2s}
.stepper button:hover{border-color:var(--text);background:var(--text);color:var(--bg)}
.stepper input{height:52px;min-height:0;padding-block:0;text-align:center;font-family:var(--font-mono);font-size:1.0625rem;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.switch-option{position:relative;display:flex;align-items:flex-start;gap:14px;padding:18px;border:1px solid var(--line-2);border-radius:var(--radius-buttons);background:#ffffff05;cursor:pointer;transition:border-color .2s,background-color .2s}
.switch-option:hover{border-color:var(--line-3)}
.switch-option input{position:absolute;width:1px;height:1px;opacity:0}
.switch{position:relative;flex-shrink:0;width:44px;height:26px;margin-top:1px;border-radius:var(--radius-pills);background:#f7f9fa26;transition:background-color .25s,box-shadow .25s}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--text);transition:transform .3s var(--ease-quart)}
.switch-option input:checked+.switch{background:var(--violet);box-shadow:0 0 16px var(--violet-glow)}
.switch-option input:checked+.switch::after{transform:translateX(18px)}
.switch-option input:focus-visible+.switch{outline:2px solid var(--text);outline-offset:3px}
.switch-option strong{display:block;font-size:.96875rem;color:var(--text)}
.switch-option small{display:block;margin-top:2px;font-size:.8125rem;color:var(--text-3)}

/* Industries page */
.industry-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.search-field{display:grid;gap:12px;width:min(100%,520px)}
.search-input{position:relative;display:block}
.search-input .icon{position:absolute;top:50%;left:20px;width:20px;height:20px;color:var(--text-3);transform:translateY(-50%);pointer-events:none}
.search-input input{min-height:56px;padding-left:52px;border-radius:var(--radius-pills)}
.industry-count{padding-bottom:18px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.industry-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.industry-card{display:flex;flex-direction:column;padding:32px;border-radius:var(--radius-buttons);transition:background .6s var(--ease-quint)}
.industry-card:hover{background:linear-gradient(var(--raise),var(--raise)) padding-box,var(--frame) border-box}
.industry-card:target{background:linear-gradient(#262626,#262626) padding-box,linear-gradient(#fff,#ffffff40) border-box}
.industry-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.card-index{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--text-3)}
.industry-name{display:block;margin-bottom:12px;font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;color:var(--text-2)}
.industry-card h2{margin-bottom:12px;font-size:1.5rem;font-weight:var(--font-weight-medium);letter-spacing:-.025em;line-height:1.2}
.industry-card>p:not([class]){margin-bottom:28px;font-size:.9375rem}
.industry-price{display:grid;gap:4px}
.industry-price span{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.industry-price strong{font-size:1.0625rem;color:var(--text);font-variant-numeric:tabular-nums}
.industry-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:20px;border-top:1px dashed var(--line-2)}
.industry-empty{margin-top:20px;padding:28px;border:1px dashed var(--line-2);border-radius:var(--radius-buttons)}

/* About */
.about-story{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.about-collage{position:relative;padding:0 12% 18% 0}
.about-collage figure{overflow:hidden;border:1px solid var(--line-2);border-radius:var(--radius-buttons)}
.about-collage img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:grayscale(.6) brightness(.8)}
.collage-side{position:absolute;right:0;bottom:0;width:50%;outline:8px solid var(--bg)}
/* The note sits 20px inside the main image. Its offset is the collage's bottom padding (18% of its width)
   restated as a share of the collage's height, which tracks the width. */
.collage-note{position:absolute;left:20px;bottom:calc(23.5% + 20px);padding:14px 20px;border:solid #ffffff5e;border-width:1px 1px 0 0;border-radius:4px;background:linear-gradient(#10151bb3,#10151bb3),#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:1.125rem;letter-spacing:-.015em;color:var(--text)}
.collage-note em{display:block;font-family:var(--font-serif);font-size:1.15em;color:var(--text)}
.about-copy .cypher{margin-bottom:20px}
.about-copy .lead{margin:24px 0 20px}
.about-copy p+p{margin-top:16px}
.about-actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:36px}

/* Contact */
.contact-section{position:relative;isolation:isolate;overflow:hidden;overflow:clip;margin-top:calc(var(--header-h) * -1);padding:calc(var(--header-h) + clamp(48px,7vw,104px)) 0 var(--section-bottom)}
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:start}
.contact-intro{position:sticky;top:calc(var(--header-h) + 24px)}
.contact-intro h1{max-width:12ch;margin-top:20px;font-size:clamp(2.75rem,1.1rem + 3.4vw,4.75rem);line-height:.95}
.contact-email{display:inline-flex;align-items:center;gap:14px;margin-top:36px;padding:10px 24px 10px 10px;border:.8px solid transparent;border-top-color:#ffffff40;border-right-color:#ffffff80;border-bottom-color:#edc3c440;border-radius:var(--radius-pills);background:var(--wash);transition:background-color .2s,border-color .3s}
.contact-email:hover{border-color:var(--violet);background-color:#ffffff1a}
.contact-email-icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%}
.contact-email>span:last-child{font-weight:var(--font-weight-medium);line-height:1.35}
.contact-email small{display:block;margin-bottom:2px;font-family:var(--font-mono);font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.next-steps{margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.next-steps h2{margin-bottom:26px;font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.12em;line-height:1.3;text-transform:uppercase;color:var(--text-2)}
.next-steps ol{position:relative;display:grid;gap:26px}
.next-steps ol::before{content:'';position:absolute;left:16px;top:16px;bottom:16px;border-left:1px dashed var(--line-2)}
.next-steps li{position:relative;display:flex;gap:18px}
.next-num{display:grid;place-items:center;width:33px;height:33px;border:1px solid var(--line-3);border-radius:50%;background:var(--bg);font-family:var(--font-mono);font-size:11px;color:var(--text);flex-shrink:0}
.next-steps strong{display:block;margin-bottom:2px}
.next-steps li p{font-size:.9375rem}
.next-note{margin-top:28px;font-size:.875rem;color:var(--text-3)}
.form-panel{min-width:0;padding:clamp(24px,4vw,var(--card-padding));border-radius:10.8px}
.wizard-progress{margin-bottom:36px}
#wizard-counter{margin-bottom:18px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.wizard-progress ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:16px}
.wizard-progress li{display:flex;align-items:center;gap:10px;font-size:.8125rem;font-weight:var(--font-weight-medium);color:var(--text-3);transition:color .3s}
.wizard-dot{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line-2);border-radius:50%;font-family:var(--font-mono);font-size:11px;flex-shrink:0;transition:background-color .3s,border-color .3s,color .3s}
.wizard-progress li[aria-current]{color:var(--text)}
.wizard-progress li[aria-current] .wizard-dot{border-color:var(--violet);background:var(--violet);color:var(--bg)}
.wizard-progress li.is-done .wizard-dot{border-color:var(--text);background:var(--text);color:var(--bg)}
.wizard-track{height:1px;background:var(--line-2)}
.wizard-track span{display:block;width:33.333%;height:100%;background:var(--text);transition:width .5s var(--ease-out)}
.form-step{display:grid;gap:22px;margin:0;padding:0;border:0}
.form-step legend{margin-bottom:6px;padding:0;font-size:clamp(1.625rem,1.3rem + 1vw,var(--text-heading-sm));font-weight:var(--font-weight-medium);letter-spacing:-.03em;line-height:1.15;color:var(--text)}
.form-step legend:focus{outline:none}
.form-description{margin-bottom:4px;font-size:.9375rem;color:var(--text-3)}
.form-required{display:block;margin-top:4px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.consent-field{display:grid;gap:10px}
.consent{display:flex;align-items:flex-start;gap:12px;font-size:.875rem;line-height:1.5;color:var(--text-2);cursor:pointer}
.consent input{display:block;width:20px;height:20px;margin:1px 0 0;flex-shrink:0;border:1px solid var(--line-3);border-radius:4px;background:transparent no-repeat center/14px;-webkit-appearance:none;appearance:none;cursor:pointer;transition:background-color .2s,border-color .2s}
.consent input:hover{border-color:var(--text)}
.consent input:checked{border-color:var(--text);background-color:var(--text);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23090909' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.consent input[aria-invalid=true]{border-color:#ffa3a3}
.brief-note,.brief-review{padding:16px 18px;border:1px dashed var(--line-2);border-radius:var(--radius-buttons);background:var(--chip);font-size:.875rem;line-height:1.6;color:var(--text)}
.brief-review strong{display:block;margin-bottom:6px;font-family:var(--font-mono);font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.honey{display:none}
.wizard-actions{display:flex;gap:12px;margin-top:32px}
.wizard-actions .primary{flex:1}
/* Until the script starts the wizard only the first step shows, so the form does not jump; without JavaScript, or if the script never starts, every step shows */
html:not(.js) :is(.wizard-progress,.wizard-next),.wizard-off :is(.wizard-progress,.wizard-next){display:none}
.js:not(.wizard-off) #quote-form:not(.is-ready) :is(.form-step:not([data-form-step="0"]),.submit-button){display:none}
html:not(.js) .form-step+.form-step,.wizard-off .form-step+.form-step{margin-top:40px}
.submit-button:disabled{opacity:.6;cursor:wait;transform:none}
.form-status{margin-top:16px;font-size:.875rem}
.form-status:empty{display:none}
.form-footnote{margin-top:16px;font-size:.8125rem;color:var(--text-3)}

/* Legal */
.legal{padding-bottom:var(--section-bottom)}
.legal>*{max-width:720px}
.legal .legal-updated{display:inline-block;margin-bottom:16px;padding:.75em 1.25em;border-radius:var(--radius-smallcontrols);background:var(--chip);font-size:.75rem;font-weight:400;letter-spacing:.04em;line-height:1.3;text-transform:uppercase;color:var(--text)}
.legal h2{margin:48px 0 14px;font-size:1.5rem;font-weight:var(--font-weight-medium);letter-spacing:-.02em;line-height:1.3}
.legal p{font-size:1.0625rem;line-height:1.75}

/* Responsive layouts (dope.security's breakpoints: 1279, 991, 767, 479) */
@media(min-width:1920px){:root{--header-h:62px}
:is(.nav-links,.services-nav)>a,.fill,.action{font-size:1rem}
}

@media(max-width:1279px){.nav-actions .fill{display:none}
:is(.nav-links,.services-nav)>a{margin:0 .7rem;font-size:11px}
.why-grid,.feature-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
:is(.why-grid,.feature-grid-4)>:nth-child(odd){padding-left:0;border-left:0}
:is(.why-grid,.feature-grid-4)>:nth-child(n+3){border-top:1px solid var(--line)}
.plans{grid-template-columns:repeat(2,minmax(0,1fr))}
.plan-featured{order:-1;grid-column:1/-1}
.mega-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr);gap:16px}
.mega-col-wide ul{grid-template-columns:1fr}
.mega-link small{display:none}
.industry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.industry-grid:not(.is-filtered) .industry-card:last-child:nth-child(odd){grid-column:1/-1}
.service-detail{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,28rem)}
}

@media(max-width:991px){.nav-menu,.nav-actions .button,.mega-menu{display:none!important}
.menu-toggle{display:block}
.nav{justify-content:space-between;padding:0 var(--gutter)}
.nav-actions{margin-left:auto}
.hero{min-height:0;padding-bottom:clamp(72px,10vw,120px)}
.hero-inner{grid-template-columns:minmax(0,1fr)}
.hero-pass{justify-self:start;max-width:540px}
.section-intro{grid-template-columns:minmax(0,1fr);align-items:start}
.section-head-aside{justify-self:start;max-width:560px}
.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.related .service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.showcase,.service-detail,.about-story,.split,.faq-layout,.contact-layout{grid-template-columns:minmax(0,1fr)}
.project-aside,.faq-intro,.contact-intro{position:static}
.estimator{grid-template-columns:minmax(0,1fr)}
.fares{grid-template-columns:minmax(0,1fr)}
.fare{min-height:15rem}
.footer-top{grid-template-columns:minmax(0,1fr)}
.footer-tag{display:none}
.feature-grid{grid-template-columns:minmax(0,1fr)}
.feature-grid>.feature-card{padding:28px 0 24px;border-left:0}
.feature-grid>.feature-card+.feature-card{border-top:1px solid var(--line)}
.flap-line{display:none}
.about-collage{max-width:640px}
.contact-layout{display:flex;flex-direction:column;align-items:stretch;gap:0}
.wizard-actions .button{min-width:0;white-space:normal}
.contact-intro{display:contents}
.contact-email{align-self:flex-start}
.form-panel{order:1;margin-top:40px}
.next-steps{order:2;margin-top:56px}
.support-note,.inline-callout,.invite{flex-wrap:wrap}
:is(.support-note,.inline-callout,.invite) .button{margin-left:0}
:is(.support-note,.inline-callout,.invite)>div{flex:1 1 360px}
}

@media(max-width:767px){:root{--header-h:49px}
.strip{display:none}
.service-grid,.related .service-grid,.industry-grid,.why-grid,.feature-grid-4,.plans{grid-template-columns:minmax(0,1fr)}
:is(.why-grid,.feature-grid-4)>:is(.why-card,.feature-card){padding:28px 0 24px;border-left:0}
:is(.why-grid,.feature-grid-4)>*+*{border-top:1px solid var(--line)}
.flap-word{-webkit-text-stroke-width:.5px}
.flap-link{gap:12px}
.industry-grid:not(.is-filtered) .industry-card:last-child:nth-child(odd),.plan-featured{grid-column:auto}
.price-table,.price-table tbody,.price-table tr,.price-table td{display:block;width:100%}
.price-table thead{display:none}
.price-table tbody{border-top:1px solid var(--line-2)}
.price-table tr{padding:22px 0;border-bottom:1px solid var(--line)}
.price-table td{padding:0;border:0}
.price-table td:first-child{width:100%;padding:0}
.price-table .table-price{margin:14px 0 16px}
.price-table td:last-child{text-align:left}
.form-row{grid-template-columns:1fr}
.industry-toolbar{flex-direction:column;align-items:stretch;gap:12px}
.industry-count{padding-bottom:0}
.footer-nav{grid-template-columns:1fr 1fr}
.footer-nav>div:last-child{grid-column:1/-1}
.deliverables{grid-template-columns:1fr}
.deliverables li:nth-child(even){padding-left:0;border-left:0}
.faq-list summary{grid-template-columns:32px minmax(0,1fr) auto;gap:12px}
.faq-answer{padding:0 0 26px 44px}
.tab-pane{grid-template-columns:minmax(0,1fr);gap:20px}
.typewriter{white-space:normal}
/* Small links get a larger touch area without moving anything */
:is(.breadcrumbs a,.footer-links a,.link-arrow){position:relative}
:is(.breadcrumbs a,.footer-links a,.link-arrow)::after{content:'';position:absolute;inset:-12px -6px}
}

@media(max-width:560px){.hero{padding-top:calc(var(--header-h) + 40px)}
.pass-stub{width:52px;gap:12px;padding:22px 10px}
.pass-fields{gap:14px 16px}
.page-actions .button,.cta-actions .button{width:100%}
.cta-actions{width:100%;flex-direction:column}
.hero-facts{display:grid;grid-template-columns:1fr 1fr}
.hero-facts>div{margin-right:0;padding-right:16px}
.hero-facts>div:nth-child(2){padding-left:16px;border-right:0}
.hero-facts>div:last-child{grid-column:1/-1;padding-left:0;border-top:1px solid var(--line)}
.estimate-controls{gap:24px;padding-top:24px}
.segmented span{padding-inline:8px;font-size:.8125rem}
.support-note,.inline-callout,.invite{padding:24px}
:is(.support-note,.inline-callout,.invite) .button{width:100%}
.plan,.industry-card{padding:28px 24px}
.plan-badge{top:28px;right:24px}
.wizard-progress li>span:last-child{display:none}
.wizard-progress ol{display:flex;gap:10px}
.wizard-actions .button{padding-inline:18px}
.about-collage{padding:0 8% 22% 0}
.collage-note{left:12px;bottom:calc(26.4% + 12px);padding:10px 14px;font-size:.9375rem}
.footer-bottom{flex-direction:column;align-items:flex-start}
.footer-clock{margin-left:0}
.tab-menu{border-radius:1rem}
}

@media(max-width:400px){.pass-main{padding:24px 18px 24px 20px}
.hero-streak{width:40px}
.pass-route strong{font-size:1.25rem}
.page-actions .button{white-space:normal;text-wrap:balance;text-align:center}
}

@media(max-width:360px){.estimate-result .button{padding-inline:16px}
.estimate-result .button .icon{display:none}
}

/* Windows High Contrast removes background colours, so selected states also carry an outline */
@media(forced-colors:active){.segmented input:checked+span,.tab-menu [aria-selected=true],.filter-button[aria-pressed=true]{outline:2px solid Highlight;outline-offset:-2px}
.switch{border:1px solid CanvasText}
.switch::after{background:CanvasText;forced-color-adjust:none}
.switch-option input:checked+.switch{background:Highlight;forced-color-adjust:none}
.wizard-progress li[aria-current] .wizard-dot{outline:2px solid Highlight}
.consent input{-webkit-appearance:checkbox;appearance:auto}
.flap-word{-webkit-text-stroke:0;color:CanvasText}
}

/* Motion preferences */
.reveal-ready [data-reveal]:not(.is-visible){opacity:0}
@media print{.reveal-ready [data-reveal]{opacity:1!important}
.header,.footer,.strip,.cta-section::before,.hero-glow{display:none}
}
/* Reduced motion stops movement but keeps colour fades, so hovers still respond */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-property:color,background-color,border-color,box-shadow,opacity,text-decoration-color!important}
.button:hover,.button:hover .icon-arrow{transform:none}
.button::after{display:none}
.reveal-ready [data-reveal]:not(.is-visible){opacity:1}
.swap>span+span{display:none}
}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition-property:color,background-color,border-color,box-shadow,opacity,text-decoration-color!important}
html[data-motion=off] :is(.button:hover,.button:hover .icon-arrow){transform:none}
html[data-motion=off] .button::after{display:none}
html[data-motion=off].reveal-ready [data-reveal]:not(.is-visible){opacity:1}
html[data-motion=off] .swap>span+span{display:none}