@charset "UTF-8";

/* ==========================================================================
   Prismo Labs — design system
   1. Tokens          5. Buttons & links      9. Page furniture
   2. Base            6. Header & nav        10. Forms
   3. Utilities       7. Home sections       11. Footer, cookies, 404
   4. Reveal & motion 8. New components      12. Responsive / motion / print
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

@font-face{
  font-family:"Fraunces Fallback";
  src:local("Georgia"),local("Times New Roman");
  size-adjust:97%;
  ascent-override:96%;
  descent-override:24%;
  line-gap-override:0%;
}

:root{
  color-scheme:light;

  --ink:#1C1C1E; --ink-2:#26262B;
  --indigo:#2C2C54; --indigo-deep:#1F1F3D; --indigo-soft:#3B3B70;
  --blue:#0260DE; --blue-bright:#0260DE; --sky:#0260DE; --sky-soft:#0260DE;
  --paper:#F5F5F5; --paper-2:#EDEDF1; --white:#fff;
  --muted:#4A4D5A; --muted-2:#6E7180;
  --line:rgba(28,28,30,.14); --line-strong:rgba(28,28,30,.3); --line-light:rgba(245,245,245,.16);
  --danger:#b3261e;

  --serif:"Fraunces","Fraunces Fallback",Georgia,"Times New Roman",serif;
  --sans:"Inter","Avenir Next",Avenir,"Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  --step--1:clamp(.78rem,.76rem + .08vw,.84rem);
  --step-0:1rem;
  --step-1:clamp(1.05rem,1rem + .3vw,1.18rem);
  --step-2:clamp(1.35rem,1.2rem + .7vw,1.75rem);
  --step-3:clamp(1.7rem,1.45rem + 1.3vw,2.5rem);
  --step-4:clamp(2.1rem,1.6rem + 2.4vw,3.4rem);
  --step-5:clamp(2.6rem,1.8rem + 4vw,4.6rem);
  --step-6:clamp(3rem,1.6rem + 5.6vw,5.9rem);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:88px; --s10:120px;
  --section-y:clamp(76px,9vw,138px);

  --shell:1220px;
  --gutter:clamp(20px,4vw,64px);
  --header-h:72px; --announce-h:34px;
  --header-offset:calc(var(--header-h) + var(--announce-h));

  --r-1:10px; --r-2:16px; --r-3:24px; --r-4:32px; --r-pill:999px;

  --shadow-sm:0 1px 2px rgba(20,20,23,.05),0 4px 12px -4px rgba(20,20,23,.1);
  --shadow-md:0 2px 6px rgba(20,20,23,.05),0 18px 36px -14px rgba(20,20,23,.2);
  --shadow-lg:0 6px 16px rgba(20,20,23,.07),0 36px 72px -28px rgba(20,20,23,.32),0 64px 120px -60px rgba(44,44,84,.35);
  --shadow-focus:0 0 0 3px rgba(2,96,222,.35);

  --dur-fast:150ms; --dur-med:260ms; --dur-slow:520ms; --dur-reveal:900ms; --stagger:80ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  --grad-band:linear-gradient(165deg,var(--indigo) 0%,var(--indigo-deep) 100%);
  --grad-cta:linear-gradient(115deg,#0260DE 0%,var(--blue) 45%,var(--sky) 100%);
  --grad-hero-bed:radial-gradient(90% 70% at 85% 10%,rgba(2,96,222,.16),transparent 60%),radial-gradient(70% 60% at 0% 100%,rgba(44,44,84,.1),transparent 65%);

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");

  --z-sticky:45; --z-header:50; --z-banner:100; --z-skip:200; --z-grain:900;
}

/* 2. Base ------------------------------------------------------------------ */

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-offset) + 24px);
  scrollbar-color:rgba(28,28,30,.35) transparent;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 var(--step-0)/1.65 var(--sans);
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{color:inherit}
img,svg{max-width:100%}

h1,h2,h3,h4,p{margin-top:0}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:450;
  letter-spacing:-.02em;
  font-variation-settings:"opsz" 60;
}

h1 em,h2 em,h3 em{font-style:italic}
strong{font-weight:600}

:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:2px}
.site-header :focus-visible,.services-band :focus-visible,.site-footer :focus-visible,.closing-cta :focus-visible{outline-color:var(--sky)}

::selection{background:var(--blue);color:var(--white)}

.shell{width:min(calc(100% - var(--gutter) * 2),var(--shell));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip-link{position:fixed;z-index:var(--z-skip);top:10px;left:10px;padding:12px 16px;border-radius:var(--r-1);background:var(--indigo-deep);color:var(--paper);font-size:14px;transform:translateY(-160%);transition:transform var(--dur-med) var(--ease-out)}
.skip-link:focus{transform:none}

/* 3. Utilities ------------------------------------------------------------- */

.eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 24px;font:500 .72rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--indigo)}
.eyebrow-line{width:36px;height:1px;background:var(--blue);transform-origin:left;transition:transform var(--dur-reveal) var(--ease-out) .15s}
html.js [data-reveal]:not(.is-revealed) .eyebrow-line{transform:scaleX(0)}

.section{padding-block:var(--section-y)}
.section-index{display:flex;gap:12px;align-items:center;color:var(--muted-2);font:500 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase}
.section-index span:first-child{color:var(--blue)}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.section-heading .section-index{margin-bottom:22px}
.section-copy{max-width:420px;color:var(--muted);font-size:.97rem;line-height:1.8}

.text-link,.arrow-link{display:inline-flex;align-items:center;gap:10px;font-size:.92rem;font-weight:600;padding-bottom:3px;border-bottom:1.5px solid var(--blue);transition:border-color var(--dur-fast),color var(--dur-fast)}
.text-link:hover,.arrow-link:hover{border-color:var(--indigo);color:var(--indigo)}
.arrow-link{margin-top:18px}
.arrow-link span,.text-link span{transition:transform var(--dur-med) var(--ease-out)}
.arrow-link:hover span,.text-link:hover span{transform:translate(3px,-3px)}

.quiet-note{margin-top:14px;color:var(--muted-2);font-size:.84rem}
.tiny-square{width:8px;height:8px;background:var(--blue)}

.breadcrumbs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:34px;color:var(--muted-2);font:500 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
.breadcrumbs a{transition:color var(--dur-fast)}
.breadcrumbs a:hover{color:var(--indigo)}
.breadcrumbs span[aria-hidden]{color:var(--blue)}

/* 4. Reveal & motion system ------------------------------------------------ */

html.js [data-reveal]{
  opacity:0;
  transform:translate3d(0,var(--reveal-y,22px),0);
  transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);
  transition-delay:calc(var(--i,0) * var(--stagger));
}
html.js [data-reveal="fade"]{--reveal-y:0px}
html.js [data-reveal="scale"]{--reveal-y:14px;transform:translate3d(0,var(--reveal-y,14px),0) scale(.975)}
html.js [data-reveal].is-revealed{opacity:1;transform:none}

/* Hero load choreography (CSS-only, runs once on load) */
@keyframes rise-in{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes art-in{from{opacity:0;transform:translate3d(0,34px,0) scale(.985)}to{opacity:1;transform:none}}
@keyframes mark-in{from{background-size:0 34%}to{background-size:100% 34%}}
@keyframes signal-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}

html.js .hero-copy>*{animation:rise-in .85s var(--ease-out) both}
html.js .hero-copy>*:nth-child(2){animation-delay:.08s}
html.js .hero-copy>*:nth-child(3){animation-delay:.16s}
html.js .hero-copy>*:nth-child(4){animation-delay:.24s}
html.js .hero-copy>*:nth-child(5){animation-delay:.32s}
html.js .hero-art{animation:art-in 1s var(--ease-out) .1s both}
html.js .headline-mark{animation:mark-in .9s var(--ease-out) .6s both}

/* Chart bars grow once their study reveals */
.visual-chart span{transform-origin:50% 100%}
html.js [data-reveal] .visual-chart span{transform:scaleY(0)}
html.js [data-reveal].is-revealed .visual-chart span{transform:scaleY(1);transition:transform .9s var(--ease-out) .25s}
html.js [data-reveal].is-revealed .visual-chart span:nth-child(2){transition-delay:.31s}
html.js [data-reveal].is-revealed .visual-chart span:nth-child(3){transition-delay:.37s}
html.js [data-reveal].is-revealed .visual-chart span:nth-child(4){transition-delay:.43s}
html.js [data-reveal].is-revealed .visual-chart span:nth-child(5){transition-delay:.49s}
html.js [data-reveal].is-revealed .visual-chart span:nth-child(6){transition-delay:.55s}
html.js [data-reveal].is-revealed .visual-chart span:nth-child(7){transition-delay:.61s}
html.js [data-reveal].is-revealed .visual-chart span:nth-child(8){transition-delay:.67s}
html.js [data-reveal].is-revealed .visual-chart span:nth-child(9){transition-delay:.73s}

/* Cross-page transitions (progressive enhancement) */
@view-transition{navigation:auto}
.site-header{view-transition-name:prismo-header}

/* 5. Buttons & links ------------------------------------------------------- */

.button{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:0 26px;
  border:1px solid transparent;border-radius:var(--r-pill);
  font-size:.92rem;font-weight:600;letter-spacing:-.01em;cursor:pointer;
  transform:translate3d(calc(var(--mx,0) * 3px),calc(var(--my,0) * 3px),0);
  transition:background var(--dur-med),color var(--dur-med),border-color var(--dur-med),box-shadow var(--dur-med),transform var(--dur-med) var(--ease-out);
}
.button::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(140px circle at calc((var(--mx,0) / 2 + .5) * 100%) calc((var(--my,0) / 2 + .5) * 100%),rgba(255,255,255,.22),transparent 68%);
  opacity:0;transition:opacity var(--dur-med);
}
.button:hover::before{opacity:1}
.button span[aria-hidden]{transition:transform var(--dur-med) var(--ease-out)}
.button:hover span[aria-hidden]{transform:translate(3px,-3px)}

.button-dark{background:var(--ink);color:var(--paper);box-shadow:var(--shadow-sm)}
.button-dark:hover{background:var(--indigo);box-shadow:var(--shadow-md);transform:translate3d(calc(var(--mx,0) * 3px),calc(var(--my,0) * 3px - 2px),0)}
.button-light{border-color:rgba(2,96,222,.6);color:var(--paper)}
.button-light:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

.round-link{
  position:relative;width:96px;height:96px;flex:none;display:grid;place-items:center;
  border:1.5px solid var(--ink);border-radius:50%;font-size:28px;
  transform:translate3d(calc(var(--mx,0) * 5px),calc(var(--my,0) * 5px),0);
  transition:transform var(--dur-med) var(--ease-out),background var(--dur-med),color var(--dur-med);
}
.round-link::after{content:"";position:absolute;inset:6px;border:1px dashed rgba(28,28,30,.35);border-radius:50%}
.round-link:hover{background:var(--ink);color:var(--paper);transform:translate3d(calc(var(--mx,0) * 5px),calc(var(--my,0) * 5px),0) rotate(45deg)}

/* 6. Header & nav ---------------------------------------------------------- */

.announcement{min-height:var(--announce-h);display:flex;align-items:center;justify-content:center;gap:10px;background:var(--indigo-deep);color:#D9DDEA;font:500 .68rem var(--mono);letter-spacing:.12em;text-transform:uppercase;padding-inline:var(--s4);text-align:center}
.signal{width:7px;height:7px;flex:none;border-radius:50%;background:var(--sky);animation:signal-pulse 2.6s var(--ease-in-out) infinite}
.announcement-divider{color:var(--sky)}

.site-header{position:sticky;z-index:var(--z-header);top:0;background:var(--ink);color:var(--paper);border-bottom:1px solid rgba(2,96,222,.14);transition:box-shadow var(--dur-med),background var(--dur-med)}
.site-header.is-scrolled{background:rgba(28,28,30,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 12px 32px -18px rgba(15,15,25,.7)}
.header-inner{min-height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:var(--s5)}

.brand{display:inline-flex;align-items:center;gap:11px;font-size:21px;font-weight:600;letter-spacing:-.045em}
.brand-light{font-weight:400;color:var(--sky)}
.brand-mark{display:block;flex:none;transition:transform var(--dur-slow) var(--ease-out)}
.brand-mark--favicon{width:56px;height:56px;object-fit:contain}
.brand:hover .brand-mark{transform:rotate(-6deg) scale(1.06)}

.site-nav{display:flex;align-items:center;gap:30px;font-size:.9rem}
.site-nav>a:not(.nav-cta){position:relative;padding-block:6px;color:#C9CCD8;transition:color var(--dur-fast)}
.site-nav>a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-med) var(--ease-out)}
.site-nav>a:not(.nav-cta):hover{color:var(--white)}
.site-nav>a:not(.nav-cta):hover::after{transform:scaleX(1)}
.site-nav>a[aria-current="page"]:not(.nav-cta){color:var(--white)}
.site-nav>a[aria-current="page"]:not(.nav-cta)::after{transform:scaleX(1)}

.nav-cta{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:11px 20px;border:1px solid rgba(2,96,222,.7);border-radius:var(--r-pill);
  font-size:.84rem;font-weight:600;
  transform:translate3d(calc(var(--mx,0) * 2px),calc(var(--my,0) * 2px),0);
  transition:background var(--dur-med),color var(--dur-med),border-color var(--dur-med),transform var(--dur-med) var(--ease-out);
}
.nav-cta:hover{background:var(--blue);border-color:var(--blue);color:var(--ink)}
.nav-cta span{transition:transform var(--dur-med) var(--ease-out)}
.nav-cta:hover span{transform:translate(2px,-2px)}

.menu-toggle{display:none}

/* 7. Home — hero ----------------------------------------------------------- */

.hero{position:relative;min-height:min(720px,88vh);display:grid;grid-template-columns:1.02fr .98fr;gap:var(--s8);align-items:center;padding-block:80px 92px}
.hero::before{content:"";position:absolute;inset:-40px calc(50% - 50vw) 0;background:var(--grad-hero-bed);pointer-events:none;z-index:-1}
.hero-copy{max-width:600px}
.hero h1{font-size:var(--step-6);line-height:.99;margin-bottom:26px}
.headline-mark{
  background-image:linear-gradient(180deg,rgba(2,96,222,.34),rgba(2,96,222,.34));
  background-repeat:no-repeat;background-position:0 86%;background-size:100% 34%;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.hero-lede{max-width:34rem;color:var(--muted);font-size:var(--step-1);line-height:1.7}
.hero-actions{display:flex;align-items:center;gap:28px;margin-top:34px;flex-wrap:wrap}
.hero-footnote{display:flex;align-items:center;gap:11px;margin-top:46px;color:var(--muted-2);font:500 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase}

.hero-art{
  position:relative;min-height:520px;overflow:hidden;border-radius:var(--r-4);
  background:var(--ink);
  background-image:linear-gradient(rgba(2,96,222,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(2,96,222,.07) 1px,transparent 1px);
  background-size:36px 36px;
  box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.05);
}
.hero-art::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 70% 25%,rgba(2,96,222,.22),transparent 65%);pointer-events:none}
.art-coordinate,.art-index{position:absolute;z-index:3;font:500 .68rem var(--mono);letter-spacing:.12em;color:var(--sky);text-transform:uppercase}
.coordinate-one{top:22px;left:24px}
.coordinate-two{right:22px;bottom:22px;writing-mode:vertical-rl}
.art-index{left:24px;bottom:22px}

.art-sheet{
  position:absolute;border-radius:var(--r-2);padding:20px;
  transform:translate3d(0,calc(var(--plx,0px) * var(--depth,1)),0) rotate(var(--rot,0deg));
  transition:box-shadow var(--dur-slow);
}
.sheet-label{display:block;font:500 .64rem var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.sheet-back{--depth:.45;--rot:-7deg;top:12%;left:9%;width:62%;height:44%;background:linear-gradient(160deg,var(--indigo-soft),var(--indigo-deep));color:var(--paper);border:1px solid rgba(2,96,222,.35);box-shadow:var(--shadow-md)}
.sheet-back>i{display:block;height:2px;margin-top:26px;width:70%;background:rgba(2,96,222,.7);border-radius:2px}
.sheet-back>i:nth-of-type(2){width:85%}
.sheet-back>i:nth-of-type(3){width:48%}
.sheet-mid{--depth:.8;--rot:5deg;top:26%;left:30%;width:58%;height:42%;background:linear-gradient(150deg,var(--blue-bright),var(--blue));color:var(--ink);box-shadow:var(--shadow-lg)}
.sheet-grid{height:74%;display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.sheet-grid i{border-radius:7px;background:rgba(255,255,255,.3)}
.sheet-grid i:nth-child(2){background:var(--indigo)}
.sheet-front{--depth:1.15;--rot:-2deg;z-index:2;top:44%;left:14%;width:68%;height:42%;background:var(--paper);color:var(--ink);box-shadow:16px 18px 0 -2px var(--indigo-deep),var(--shadow-lg)}
.sheet-front>b{display:block;margin-top:18px;font:450 clamp(1.7rem,3vw,2.1rem)/1.06 var(--serif);letter-spacing:-.025em}
.sheet-button{position:absolute;bottom:18px;left:20px;font:600 .72rem var(--sans);letter-spacing:.02em;color:var(--indigo)}
.sheet-orbit{position:absolute;right:18px;bottom:16px;width:78px;height:78px;border:2px solid var(--blue);border-radius:50%}
.sheet-orbit::before{content:"";position:absolute;inset:15px;border:2px solid var(--indigo);border-radius:50%}
.sheet-orbit::after{content:"";position:absolute;inset:29px;border-radius:50%;background:var(--blue)}

/* 7. Home — marquee ticker ------------------------------------------------ */

.ticker{overflow:hidden;background:var(--grad-band);color:var(--paper);contain:paint;border-block:1px solid rgba(2,96,222,.16)}
.ticker-track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}
.ticker-inner{display:flex;align-items:center;flex:none}
.ticker-inner span{flex:none;padding:19px 30px;font:500 .78rem var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:#E4E7F2}
.ticker-inner span:not(:first-child)::before{content:"/";margin-right:30px;color:var(--sky)}

/* 7. Home — intro / services band ----------------------------------------- */

.intro-section{display:grid;grid-template-columns:.34fr 1fr;gap:var(--s6)}
.intro-content{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--s8);align-items:end}
.intro-content h2,.section-heading h2,.services-layout h2{font-size:var(--step-4);line-height:1.05;margin-bottom:0}
.intro-content h2 em,.section-heading h2 em{color:var(--indigo)}
.intro-copy p{max-width:400px;color:var(--muted);font-size:.97rem;line-height:1.8}

.services-band{padding-block:var(--section-y);background:var(--grad-band);color:var(--paper);position:relative;overflow:hidden}
.services-band::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 90% 0%,rgba(2,96,222,.28),transparent 70%);pointer-events:none}
.services-layout{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,7vw,100px);align-items:center}
.services-layout .eyebrow{color:var(--sky)}
.services-layout h2{max-width:460px}
.services-layout .section-copy{margin-block:22px 30px;color:#D5D9EE}
.service-list{border-top:1px solid rgba(2,96,222,.35)}
.service-list>a{display:grid;grid-template-columns:48px 1fr 26px;align-items:center;gap:18px;padding:26px 2px;border-bottom:1px solid rgba(2,96,222,.35);transition:background var(--dur-med),padding var(--dur-med) var(--ease-out)}
.service-list>a:hover{background:rgba(31,31,61,.55);padding-inline:16px}
.service-number{align-self:start;padding-top:7px;color:var(--blue);font:500 .72rem var(--mono);letter-spacing:.1em}
.services-band .service-number{color:var(--sky)}
.service-list b,.service-list small{display:block}
.service-list b{font:450 1.55rem var(--serif);letter-spacing:-.02em}
.service-list small{margin-top:5px;color:#D5D9EE;font-size:.86rem}
.service-arrow{color:var(--sky);transition:transform var(--dur-med) var(--ease-out)}
.service-list a:hover .service-arrow{transform:translate(4px,-4px)}

/* 7. Home — process rail --------------------------------------------------- */

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;top:4px;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--blue),rgba(2,96,222,.12))}
.steps li{counter-increment:s;position:relative;padding:36px 30px 6px 0;margin-right:30px;border-right:1px solid var(--line)}
.steps li:last-child{border-right:0;margin-right:0;padding-right:0}
.steps li::after{content:"";position:absolute;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px var(--paper)}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;margin-bottom:16px;color:var(--blue);font:500 .72rem var(--mono);letter-spacing:.14em}
.steps b{display:block;font:450 1.4rem var(--serif);margin-bottom:8px;letter-spacing:-.02em}
.steps span{color:var(--muted);font-size:.9rem}

/* 7. Home — work feature --------------------------------------------------- */

.work-feature{display:block}
.work-visual{
  position:relative;min-height:460px;overflow:hidden;border-radius:var(--r-3);
  background:var(--grad-band);
  background-image:radial-gradient(rgba(2,96,222,.28) 1px,transparent 1px);
  background-size:17px 17px;
  padding:24px 5.6% 46px;
  box-shadow:var(--shadow-md);
}
.visual-top{display:flex;justify-content:space-between;gap:16px;font:500 .68rem var(--mono);letter-spacing:.12em;color:var(--sky);text-transform:uppercase}
.visual-board{
  display:grid;grid-template-columns:158px 1fr;width:84%;height:322px;margin:32px auto 0;overflow:hidden;
  border-radius:var(--r-2);background:var(--paper);
  box-shadow:18px 20px 0 -2px rgba(20,20,35,.6),var(--shadow-lg);
  transform:translate3d(0,calc(var(--plx,0px) * .55),0);
}
.visual-rail{display:flex;flex-direction:column;gap:19px;padding:19px 16px;background:var(--ink);color:var(--paper);font:500 .58rem var(--mono);letter-spacing:.12em}
.visual-rail b{margin-bottom:11px;font-size:.78rem;line-height:1.25;letter-spacing:0}
.visual-rail span:first-of-type{color:var(--sky)}
.visual-main{padding:24px}
.visual-title{display:flex;flex-direction:column;gap:11px}
.visual-title>span{font:500 .6rem var(--mono);letter-spacing:.12em;color:var(--muted-2)}
.visual-title>b{font:450 1.75rem var(--serif);letter-spacing:-.02em}
.visual-panels{display:grid;grid-template-columns:1.3fr 1fr .7fr;gap:11px;margin-top:15px}
.visual-panels i{height:52px;border-radius:8px;background:linear-gradient(150deg,var(--blue-bright),var(--blue))}
.visual-panels i:nth-child(2){background:linear-gradient(150deg,var(--indigo-soft),var(--indigo))}
.visual-panels i:nth-child(3){background:linear-gradient(150deg,var(--ink-2),var(--ink))}
.visual-chart{height:106px;display:flex;align-items:end;gap:6px;margin-top:15px;border-bottom:1px solid rgba(44,44,84,.5)}
.visual-chart span{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--blue-bright),var(--blue))}
.visual-chart span:nth-child(1){height:30%}
.visual-chart span:nth-child(2){height:47%}
.visual-chart span:nth-child(3){height:40%}
.visual-chart span:nth-child(4){height:72%;background:linear-gradient(180deg,var(--indigo-soft),var(--indigo))}
.visual-chart span:nth-child(5){height:60%}
.visual-chart span:nth-child(6){height:83%;background:linear-gradient(180deg,var(--indigo-soft),var(--indigo))}
.visual-chart span:nth-child(7){height:64%}
.visual-chart span:nth-child(8){height:92%;background:linear-gradient(180deg,var(--indigo-soft),var(--indigo))}
.visual-chart span:nth-child(9){height:77%}
.visual-caption{position:absolute;right:20px;bottom:16px;font:500 .68rem var(--mono);letter-spacing:.1em;color:var(--sky);text-transform:uppercase}
.work-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}
.work-caption small,.work-caption b{display:block}
.work-caption small{font:500 .68rem var(--mono);letter-spacing:.12em;color:var(--muted-2);text-transform:uppercase}
.work-caption b{margin-top:7px;font:450 1.55rem var(--serif);letter-spacing:-.02em}
.work-open{width:46px;height:46px;flex:none;display:grid;place-items:center;border:1px solid var(--indigo);border-radius:50%;color:var(--indigo);font-size:17px;transition:background var(--dur-med),color var(--dur-med),transform var(--dur-med) var(--ease-out)}
.work-feature:hover .work-open{background:var(--indigo);color:var(--paper);transform:translate(2px,-2px)}

/* 7. Home — closing CTA ---------------------------------------------------- */

.closing-cta{padding-block:clamp(64px,8vw,104px);background:var(--grad-cta);color:var(--ink);position:relative;overflow:hidden}
.closing-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 80% at 85% 20%,rgba(255,255,255,.28),transparent 70%);pointer-events:none}
.closing-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.closing-inner .eyebrow{color:var(--ink)}
.closing-inner .eyebrow-line{background:var(--ink)}
.closing-inner h2{font-size:var(--step-5);line-height:1.02}
.closing-inner h2 em{color:var(--white)}

/* 8. New components -------------------------------------------------------- */

/* Capability bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.bento-cell{
  position:relative;display:flex;flex-direction:column;gap:14px;overflow:hidden;
  padding:28px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--white);
  transition:border-color var(--dur-med),box-shadow var(--dur-med),transform var(--dur-med) var(--ease-out);
}
.bento-cell:hover{border-color:rgba(2,96,222,.55);box-shadow:var(--shadow-md);transform:translateY(-4px)}
.bento-cell--w4{grid-column:span 4}
.bento-cell--w2{grid-column:span 2}
.bento-cell--w3{grid-column:span 3}
.bento-label{font:500 .68rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.bento-cell h3{font-size:var(--step-2);margin:0;line-height:1.15}
.bento-cell p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.7;max-width:46ch}
.bento-art{height:64px;margin-top:auto;border-radius:var(--r-1);position:relative;overflow:hidden}
.bento-art--strategy{background:linear-gradient(120deg,var(--indigo-deep),var(--indigo));display:flex;align-items:end;gap:6px;padding:10px 12px}
.bento-art--strategy i{flex:1;background:rgba(2,96,222,.55);border-radius:3px 3px 0 0}
.bento-art--strategy i:nth-child(1){height:36%}
.bento-art--strategy i:nth-child(2){height:62%}
.bento-art--strategy i:nth-child(3){height:48%}
.bento-art--strategy i:nth-child(4){height:86%;background:var(--sky)}
.bento-art--identity{background:var(--paper);display:grid;place-items:center;border:1px solid var(--line)}
.bento-art--identity b{font:450 2.1rem/1 var(--serif);letter-spacing:-.03em}
.bento-art--identity b em{color:var(--indigo)}
.bento-art--engineering{background:var(--ink);background-image:linear-gradient(rgba(2,96,222,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(2,96,222,.14) 1px,transparent 1px);background-size:18px 18px;display:grid;place-items:center}
.bento-art--engineering i{width:46px;height:46px;border:1.5px solid var(--sky);border-radius:50%;position:relative}
.bento-art--engineering i::after{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--blue)}

/* FAQ accordion */
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:24px 4px;cursor:pointer;list-style:none;font:500 1.02rem/1.4 var(--sans);letter-spacing:-.01em;transition:color var(--dur-fast)}
.faq-q::-webkit-details-marker{display:none}
.faq-q:hover{color:var(--indigo)}
.faq-item[open] .faq-q{color:var(--indigo)}
.faq-icon{position:relative;width:36px;height:36px;flex:none;border:1px solid var(--line-strong);border-radius:50%;transition:border-color var(--dur-med),transform var(--dur-med) var(--ease-out)}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;top:50%;left:50%;width:13px;height:1.5px;background:var(--indigo);transform:translate(-50%,-50%)}
.faq-icon::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform var(--dur-med) var(--ease-out)}
.faq-item[open] .faq-icon{border-color:var(--blue);transform:rotate(180deg)}
.faq-item[open] .faq-icon::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-slow) var(--ease-out)}
.faq-item[open] .faq-a{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden}
.faq-a p{max-width:66ch;margin:0;padding:0 4px 26px;color:var(--muted);font-size:.95rem;line-height:1.8}
.faq-section,.process-strip,.work-preview{border-top:1px solid var(--line)}
.faq-block{margin-top:84px;padding-top:56px;border-top:1px solid var(--line-strong)}
.faq-block .section-index{margin-bottom:20px}
.faq-block h2{font-size:var(--step-3);line-height:1.1;margin:0 0 26px}
.faq-block h2 em{color:var(--indigo)}

/* Engagement cards (pricing) */
.engagement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.engagement-card{
  position:relative;display:flex;flex-direction:column;gap:16px;
  padding:30px 28px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-3);
  box-shadow:var(--shadow-sm);
  transition:border-color var(--dur-med),box-shadow var(--dur-med),transform var(--dur-med) var(--ease-out);
}
.engagement-card::before{content:"";position:absolute;top:0;left:28px;right:28px;height:3px;border-radius:0 0 3px 3px;background:var(--grad-cta);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-slow) var(--ease-out)}
.engagement-card:hover{border-color:rgba(2,96,222,.5);box-shadow:var(--shadow-md);transform:translateY(-4px)}
.engagement-card:hover::before{transform:scaleX(1)}
.engagement-index{font:500 .7rem var(--mono);letter-spacing:.16em;color:var(--blue);text-transform:uppercase}
.engagement-card h2{font-size:1.6rem;margin:0;line-height:1.15}
.engagement-card>p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.75}
.engagement-meta{margin:auto 0 0;border-top:1px solid var(--line)}
.engagement-meta>div{display:grid;grid-template-columns:104px 1fr;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.engagement-meta>div:last-child{border-bottom:0;padding-bottom:0}
.engagement-meta dt{font:500 .66rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);padding-top:3px}
.engagement-meta dd{margin:0;font-size:.9rem;line-height:1.6;color:var(--ink)}

/* Note cards (insights) */
.note-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.note-card{
  display:flex;flex-direction:column;gap:16px;padding:30px 28px;
  border:1px solid var(--line);border-radius:var(--r-3);background:var(--white);
  transition:border-color var(--dur-med),box-shadow var(--dur-med),transform var(--dur-med) var(--ease-out);
}
.note-card:hover{border-color:rgba(2,96,222,.5);box-shadow:var(--shadow-md);transform:translateY(-4px)}
.note-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;font:500 .66rem var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2)}
.note-meta b{color:var(--blue);font-weight:500}
.note-card h2{font-size:1.4rem;line-height:1.2;margin:0;letter-spacing:-.02em}
.note-card p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.75}
.note-card .arrow-link{margin-top:auto}

/* Study meta (work) */
.study-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:26px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.study-meta dt{font:500 .66rem var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);margin-bottom:7px}
.study-meta dd{margin:0;font-size:.92rem;line-height:1.6}
.study-block{margin-top:96px;padding-top:66px;border-top:1px solid var(--line-strong)}
.study-block>h2{font-size:var(--step-3);line-height:1.1;margin:18px 0 30px;letter-spacing:-.02em}

/* Type specimen art (second study) */
.work-visual--type{background:var(--indigo-deep);background-image:linear-gradient(rgba(2,96,222,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(2,96,222,.08) 1px,transparent 1px);background-size:36px 36px;padding-bottom:24px}
.type-specimen{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(18px,4vw,44px);align-items:center;
  width:86%;margin:34px auto 26px;padding:clamp(20px,3vw,34px);
  background:var(--paper);border-radius:var(--r-2);
  box-shadow:16px 18px 0 -2px rgba(15,15,30,.55),var(--shadow-lg);
}
.type-glyph{font:450 clamp(4rem,9vw,6.6rem)/.88 var(--serif);letter-spacing:-.04em;color:var(--ink)}
.type-glyph em{color:var(--blue);font-style:italic}
.type-glyph small{display:block;margin-top:16px;font:500 .66rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.type-rules{display:grid;gap:11px}
.type-rules i{display:block;height:2px;background:var(--ink);border-radius:2px}
.type-rules i:nth-child(1){width:100%}
.type-rules i:nth-child(2){width:82%;background:var(--indigo)}
.type-rules i:nth-child(3){width:64%;background:var(--blue)}
.type-rules i:nth-child(4){width:88%;background:var(--muted-2)}
.type-rules i:nth-child(5){width:44%;background:var(--sky)}
.type-note{margin-top:6px;font:500 .66rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}

/* Principles (studio) */
.principle-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px 0 12px}
.principle{padding:24px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--white)}
.principle b{display:block;font:450 1.18rem var(--serif);margin-bottom:9px;letter-spacing:-.02em}
.principle p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.72}
.prose .principle p{color:var(--muted);font-size:.92rem;line-height:1.72}

/* Process phase columns */
.phase-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
.phase-col{border-top:1px solid var(--line);padding-top:15px}
.phase-col h3{margin:0 0 12px;font:500 .68rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.phase-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.phase-col li{position:relative;padding-left:20px;font-size:.92rem;color:#33353f;line-height:1.6}
.phase-col li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1.5px;background:var(--blue)}
.service-detail--phase{grid-template-columns:64px 1fr;gap:26px;padding-block:40px}
.service-detail--phase .service-number{
  display:grid;place-items:center;width:52px;height:52px;padding:0;
  border:1px solid var(--line-strong);border-radius:50%;background:var(--white);
  font:500 .76rem var(--mono);color:var(--indigo);box-shadow:var(--shadow-sm);
  transition:border-color var(--dur-med),background var(--dur-med),color var(--dur-med),transform var(--dur-med) var(--ease-out);
}
.service-detail--phase:hover .service-number{border-color:var(--blue);background:var(--indigo);color:var(--paper);transform:translateY(-3px)}

/* 404 */
.marquee-links{overflow:hidden;border-block:1px solid rgba(2,96,222,.16);background:var(--grad-band);contain:paint}
.marquee-links:hover .ticker-track,.marquee-links:focus-within .ticker-track{animation-play-state:paused}
.marquee-links .ticker-inner a{padding:16px 30px;font:500 .76rem var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#E4E7F2;white-space:nowrap;transition:color var(--dur-fast)}
.marquee-links .ticker-inner a:hover{color:var(--white)}
.marquee-links .ticker-inner a:not(:first-child)::before{content:"/";margin-right:30px;color:var(--sky)}

/* 9. Page furniture -------------------------------------------------------- */

.page-hero{position:relative;padding-block:72px 56px}
.page-hero::before{content:"";position:absolute;inset:-20px calc(50% - 50vw) 0;background:var(--grad-hero-bed);pointer-events:none;z-index:-1}
.page-hero h1{max-width:880px;font-size:var(--step-5);line-height:1.03;margin-bottom:22px}
.page-hero .hero-lede{max-width:660px;margin-bottom:28px}
.page-content{padding-block:52px 112px}

.page-grid{display:grid;grid-template-columns:232px 1fr;gap:72px}
.page-aside{position:sticky;top:calc(var(--header-offset) + 38px);align-self:start;font-size:.9rem}
.page-aside a{display:block;margin-bottom:15px;color:var(--muted-2);padding-left:0;border-left:2px solid transparent;transition:color var(--dur-fast),padding var(--dur-med) var(--ease-out),border-color var(--dur-med)}
.page-aside a:hover{color:var(--indigo);padding-left:12px;border-left-color:var(--blue)}

.prose{max-width:740px}
.prose h2{margin:48px 0 14px;font-size:1.85rem;line-height:1.14}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:#33353F;font-size:.97rem;line-height:1.85}
.prose p+p{margin-top:15px}
.prose ul{padding-left:20px}
.prose li{margin:7px 0}
.prose a,.contact-details a{color:var(--indigo);text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:1.5px;text-underline-offset:4px;transition:color var(--dur-fast),text-decoration-color var(--dur-fast)}
.prose a:hover,.contact-details a:hover{color:var(--blue);text-decoration-color:var(--indigo)}

.service-detail{display:grid;grid-template-columns:82px 1fr;gap:22px;padding:34px 0;border-top:1px solid var(--line-strong)}
.service-detail:last-child{border-bottom:1px solid var(--line-strong)}
.service-detail .service-number{padding-top:9px;color:var(--indigo);font-weight:500;letter-spacing:.1em}
.service-detail h2{margin:0 0 13px;font-size:var(--step-2);line-height:1.16}
.service-detail p{max-width:680px;margin:0;color:#33353F;font-size:.96rem;line-height:1.8}
.service-detail p+p{margin-top:14px}
.service-detail ul{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 0;padding:0;list-style:none}
.service-detail li{padding:7px 14px;border:1px solid rgba(44,44,84,.4);border-radius:var(--r-pill);color:var(--indigo);font-size:.82rem;font-weight:500;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.service-detail li:hover{background:var(--indigo);border-color:var(--indigo);color:var(--paper)}

.case-note{
  position:relative;margin:34px 0;padding:24px 26px 24px 28px;
  border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:0 var(--r-2) var(--r-2) 0;background:var(--white);box-shadow:var(--shadow-sm);
  font-size:.93rem;line-height:1.75;color:var(--muted);
}
.case-note strong{color:var(--ink)}

/* 10. Forms ---------------------------------------------------------------- */

.contact-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:72px;align-items:start}
.contact-details{color:var(--muted);font-size:.96rem;line-height:1.78}
.contact-details strong{color:var(--ink)}
.contact-form{
  position:relative;padding:32px;border:1px solid var(--line);border-radius:var(--r-3);
  background:var(--white);box-shadow:var(--shadow-md);overflow:hidden;
}
.contact-form::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-cta)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-field{margin-bottom:18px}
.form-field label{display:block;margin-bottom:8px;font-size:.9rem;font-weight:600}
.form-field input,.form-field textarea,.form-field select{
  width:100%;min-height:52px;padding:13px 15px;border:1px solid #8B90A3;border-radius:var(--r-1);
  background:var(--paper);color:var(--ink);
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast);
}
.form-field textarea{min-height:148px;resize:vertical}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:none;border-color:var(--blue);background:var(--white);box-shadow:var(--shadow-focus)}
.form-field [aria-invalid="true"]{border:2px solid var(--danger)}
.field-error{display:none;margin:7px 0 0;color:#A3201A;font-size:.82rem}
.form-field.has-error .field-error{display:block}
.form-error,.form-success,.form-loading{display:none;margin-top:16px;padding:13px 15px;border:1px solid var(--indigo);border-radius:var(--r-1);font-size:.9rem}
.is-visible{display:block!important}
.form-error{border-color:var(--danger);background:#FDECEB;color:#7A1712}
.form-success{border-color:#2E6B3F;background:#EAF5EE;color:#1F4A2B}
.form-loading{background:var(--indigo);color:var(--paper)}
.form-loading::before{content:"";display:inline-block;width:12px;height:12px;margin-right:9px;vertical-align:-2px;border:2px solid var(--paper);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.form-submit[disabled]{opacity:.65;cursor:wait}
.form-privacy{margin:14px 0 0;color:var(--muted-2);font-size:.82rem}

/* 11. Footer, cookies, 404 ------------------------------------------------- */

.site-footer{background:var(--ink);color:var(--paper);position:relative}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(2,96,222,.5),transparent)}
.footer-main{display:grid;grid-template-columns:.9fr 1fr 1.3fr;gap:36px;align-items:start;padding-block:52px 36px}
.footer-main>p{max-width:230px;margin:6px 0 0;color:#C8CAD4;font:450 1.28rem/1.35 var(--serif);letter-spacing:-.02em}
.footer-main nav{display:grid;grid-template-columns:repeat(3,1fr);gap:13px 24px;font-size:.9rem}
.footer-main nav a{color:#C8CAD4;transition:color var(--dur-fast),transform var(--dur-med) var(--ease-out);display:inline-block}
.footer-main nav a:hover{color:var(--sky);transform:translateX(3px)}
.footer-main nav a[href="contact.html"]{color:var(--white)}
.cookie-settings:hover,.footer-email:hover{color:var(--sky)}
.footer-bottom{min-height:58px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;border-top:1px solid rgba(2,96,222,.16);color:#A9ACBA;font:500 .72rem var(--mono);letter-spacing:.08em;padding-block:14px}
.footer-email{color:var(--paper);text-decoration:underline;text-decoration-color:rgba(2,96,222,.8);text-underline-offset:4px;overflow-wrap:anywhere}
.cookie-settings{padding:4px 0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;transition:color var(--dur-fast)}
.sticky-cta{display:none}

.cookie-banner{
  position:fixed;z-index:var(--z-banner);right:20px;bottom:20px;width:min(540px,calc(100% - 40px));
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:22px;
  border:1px solid rgba(44,44,84,.35);border-radius:var(--r-2);
  background:rgba(245,245,245,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--ink);box-shadow:var(--shadow-lg);
}
.cookie-banner[hidden]{display:none}
.cookie-banner b{font:450 1.08rem var(--serif)}
.cookie-banner p{max-width:300px;margin:7px 0 0;color:var(--muted);font-size:.84rem;line-height:1.55}
.cookie-actions{display:grid;gap:8px}
.cookie-actions .button{min-height:42px;padding-inline:16px;font-size:.84rem;white-space:nowrap}
.cookie-reject{padding:10px 14px;border:1px solid var(--indigo);border-radius:var(--r-pill);background:transparent;font-size:.84rem;cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast)}
.cookie-reject:hover{background:var(--indigo);color:var(--paper)}

.not-found{min-height:calc(100vh - 240px);display:grid;place-content:center;padding-block:72px;text-align:left}
.not-found-code{color:var(--blue);font:500 .74rem var(--mono);letter-spacing:.18em;text-transform:uppercase}
.not-found h1{margin:22px 0;font-size:clamp(3.4rem,9vw,6.2rem);line-height:.98}
.not-found h1 em{color:var(--indigo)}
.not-found p{max-width:480px;color:var(--muted);font-size:1.02rem}
.not-found .button{width:max-content;margin-block:22px 10px}
.not-found .breadcrumbs{margin:14px 0 0}

/* Grain overlay */
body::after{
  content:"";position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;
  opacity:.05;background-image:var(--grain);background-size:160px 160px;mix-blend-mode:soft-light;
}

/* 12. Responsive ----------------------------------------------------------- */

@media(max-width:1080px){
  .bento{grid-template-columns:repeat(4,1fr)}
  .bento-cell--w4{grid-column:span 4}
  .bento-cell--w2{grid-column:span 2}
  .bento-cell--w3{grid-column:span 2}
  .engagement-grid,.note-grid{grid-template-columns:repeat(2,1fr)}
  .study-meta{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:940px){
  :root{--section-y:clamp(64px,7vw,96px)}
  .site-nav{gap:14px;font-size:.8rem}
  .site-nav>a{white-space:nowrap}
  .nav-cta{padding-inline:12px;gap:6px}
  .hero{min-height:auto;grid-template-columns:1fr;gap:44px;padding-block:60px}
  .hero-copy{max-width:660px}
  .intro-section,.intro-content,.services-layout,.contact-layout,.footer-main{grid-template-columns:1fr;gap:36px}
  .page-grid{grid-template-columns:190px 1fr;gap:40px}
  .steps{grid-template-columns:1fr 1fr;row-gap:40px}
  .steps::before{display:none}
  .steps li::after{position:static;display:block;margin-bottom:14px}
  .steps li:nth-child(2){border-right:0;margin-right:0}
  .steps li:nth-child(2n){padding-right:0}
  .principle-grid,.phase-grid{grid-template-columns:1fr}
  .type-specimen{grid-template-columns:1fr;gap:26px;width:100%}
  .hero-art{min-height:480px}
}

@media(max-width:700px){
  :root{--header-h:64px;--announce-h:30px;--gutter:clamp(18px,5vw,28px);--shadow-lg:0 6px 16px rgba(20,20,23,.08),0 24px 48px -20px rgba(20,20,23,.3)}
  .announcement{font-size:.6rem;letter-spacing:.09em}
  .menu-toggle{
    width:44px;height:44px;display:grid;place-content:center;gap:6px;
    border:1px solid rgba(2,96,222,.7);border-radius:var(--r-1);background:transparent;
    transition:background var(--dur-med),border-color var(--dur-med);
  }
  .menu-toggle span{display:block;width:18px;height:2px;background:var(--paper);border-radius:2px;transition:transform var(--dur-med) var(--ease-out),opacity var(--dur-med)}
  .menu-open .menu-toggle{background:rgba(2,96,222,.16)}
  .menu-open .menu-toggle span:nth-child(1){transform:translateY(4px) rotate(45deg)}
  .menu-open .menu-toggle span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
  .site-nav{position:absolute;display:none;top:100%;left:0;right:0;padding:10px 20px 22px;background:rgba(28,28,30,.98);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(2,96,222,.2);box-shadow:0 30px 60px -30px rgba(10,10,20,.8)}
  .menu-open .site-nav{display:grid;gap:0}
  .menu-open .site-nav>a{animation:rise-in .45s var(--ease-out) both}
  .menu-open .site-nav>a:nth-child(2){animation-delay:.04s}
  .menu-open .site-nav>a:nth-child(3){animation-delay:.08s}
  .menu-open .site-nav>a:nth-child(4){animation-delay:.12s}
  .menu-open .site-nav>a:nth-child(5){animation-delay:.16s}
  .menu-open .site-nav>a:nth-child(6){animation-delay:.2s}
  .menu-open .site-nav>a:nth-child(7){animation-delay:.24s}
  .site-nav>a:not(.nav-cta){padding:15px 2px;border-bottom:1px solid rgba(2,96,222,.16)}
  .site-nav>a:not(.nav-cta)::after{display:none}
  .nav-cta{justify-content:space-between;margin-top:18px}
  .hero-actions{flex-direction:column;align-items:flex-start;gap:18px}
  .hero-footnote{margin-top:34px;font-size:.64rem}
  .hero-art{min-height:420px;border-radius:var(--r-3)}
  .sheet-back{width:72%;left:6%}
  .sheet-mid{width:66%;left:24%}
  .sheet-front{width:78%;left:8%}
  .services-band{padding-block:64px}
  .steps{grid-template-columns:1fr;row-gap:34px}
  .steps li{margin-right:0;border-right:0;padding:0 0 24px;border-bottom:1px solid var(--line)}
  .steps li:last-child{border-bottom:0;padding-bottom:0}
  .steps li::after{margin-bottom:12px}
  .work-visual{min-height:340px;padding-inline:12px}
  .visual-board{width:100%;height:240px;grid-template-columns:100px 1fr;box-shadow:10px 12px 0 -2px rgba(20,20,35,.6)}
  .visual-rail{gap:13px;padding:13px 11px;font-size:.52rem}
  .visual-rail b{font-size:.66rem}
  .visual-main{padding:15px}
  .visual-title>b{font-size:1.3rem}
  .visual-panels i{height:36px}
  .visual-chart{height:72px}
  .bento{grid-template-columns:1fr;gap:14px}
  .bento-cell{grid-column:span 1;padding:24px}
  .engagement-grid,.note-grid{grid-template-columns:1fr;gap:14px}
  .study-meta{grid-template-columns:1fr 1fr;gap:16px}
  .faq-q{font-size:.98rem;padding-block:20px}
  .closing-cta{padding-block:56px}
  .round-link{width:68px;height:68px;font-size:21px}
  .footer-main nav{grid-template-columns:1fr 1fr}
  .footer-main{padding-block:40px 28px}
  .footer-bottom{padding-block:16px;padding-bottom:96px}
  .sticky-cta{
    position:fixed;z-index:var(--z-sticky);bottom:14px;left:50%;transform:translateX(-50%);
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    width:min(calc(100% - 32px),380px);padding:15px 20px;
    border:1px solid rgba(2,96,222,.7);border-radius:var(--r-pill);
    background:rgba(28,28,30,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    color:var(--paper);box-shadow:0 14px 34px -12px rgba(10,10,20,.6);font-size:.9rem;font-weight:600;
  }
  .cookie-banner{right:12px;bottom:84px;width:calc(100% - 24px);grid-template-columns:1fr;gap:16px;padding:18px}
  .cookie-actions{grid-template-columns:1fr 1fr}
  .cookie-actions .button{white-space:normal}
  .cookie-banner p{max-width:none}
  .page-hero{padding-block:48px 34px}
  .page-content{padding-block:36px 84px}
  .page-grid{grid-template-columns:1fr;gap:30px}
  .page-aside{position:static;display:flex;flex-wrap:wrap;gap:8px 18px}
  .page-aside a{margin:0;padding-left:0;border-left:0}
  .page-aside a:hover{padding-left:0}
  .service-detail{grid-template-columns:48px 1fr;gap:12px;padding-block:26px}
  .service-detail--phase{grid-template-columns:1fr;gap:18px}
  .service-detail--phase .service-number{width:46px;height:46px}
  .contact-form{padding:22px}
  .form-row{grid-template-columns:1fr;gap:0}
  .type-glyph{font-size:clamp(3.2rem,16vw,4.6rem)}
}

@media(max-width:480px){
  .hero h1{font-size:clamp(2.5rem,11vw,3rem)}
  .hero-art{min-height:380px}
  .sheet-front>b{font-size:1.4rem}
  .sheet-orbit{width:58px;height:58px}
  .sheet-orbit::before{inset:11px}
  .sheet-orbit::after{inset:22px}
  .study-meta{grid-template-columns:1fr}
  .footer-main nav{grid-template-columns:1fr 1fr;gap:11px 16px}
}

/* 13. Reduced motion & print ----------------------------------------------- */

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html.js [data-reveal]{opacity:1!important;transform:none!important}
  html.js [data-reveal] .visual-chart span{transform:scaleY(1)!important}
  .ticker-track{animation:none!important;transform:none!important}
  .ticker:hover .ticker-track{animation-play-state:running}
  .signal{animation:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

@media print{
  body::after{display:none}
  .site-header,.sticky-cta,.cookie-banner,.announcement,.marquee-links,.ticker{display:none}
  .hero-art,.work-visual,.closing-cta,.services-band{box-shadow:none}
  a[href]::after{content:""}
}