/* ==========================================================================
   IMPERIUM 3.0 — design tokens
   Core ground: warm stone off-white. Ink: #191919. Sand / tan from the palette.
   Accent: blue #5468FF — the glow in the ParaCompass mark. It is the one colour
   shared by Imperium and ParaCompass, used sparingly and always for the same jobs:
   signal (live dots, eyebrow markers), interaction (links, focus,
   active states), and intelligence (anything ParaCompass). Deeper shades carry text.
   ========================================================================== */
:root{
  color-scheme: light;
  --bg:        #F2EFE8;   /* stone ivory — core ground */
  --bg-2:      #FAF8F3;   /* raised surfaces (inputs, inset frames) */
  --sand:      #D8D0C1;   /* palette */
  --tan:       #CBB8A9;   /* palette */
  --ink:       #191919;   /* palette — text + dark sections */
  --ink-2:     #5B564E;   /* warm grey text */
  --ink-3:     #8C867C;   /* muted labels */
  /* Accent scale (blue) */
  --blue-50:   #F5F6FF;
  --blue-100:  #ECEEFF;
  --blue-200:  #D3D9FF;
  --blue-300:  #A9B3FF;   /* accent text on dark grounds */
  --blue-500:  #5468FF;   /* brand accent — glows, lines, fills, markers */
  --blue-600:  #4A5EF5;   /* large accent text, active states */
  --blue-700:  #3F52E6;   /* small accent text on light grounds (AA) */
  --accent:        var(--blue-500);
  --accent-strong: var(--blue-600);
  --accent-ink:    var(--blue-700);
  --accent-soft:   color-mix(in srgb, var(--blue-500) 14%, transparent);
  --accent-glow:   color-mix(in srgb, var(--blue-500) 42%, transparent);
  --card:      color-mix(in srgb, var(--sand) 58%, var(--bg));
  --card-2:    color-mix(in srgb, var(--sand) 34%, var(--bg));
  --line:      color-mix(in srgb, var(--ink) 12%, transparent);
  --line-2:    color-mix(in srgb, var(--ink) 26%, transparent);
  --footer:    #1C1B19;   /* dark, not true black */

  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;   /* labels, data, meta */
  --italic: "Newsreader", "Source Serif 4", Georgia, serif;                  /* the italic accent: one word in a title, hero and covers only */
  --brand: "Manrope", var(--sans);                                               /* ParaCompass wordmark only */

  --fs-d1:   clamp(2.7rem, 5.8vw, 5.1rem);
  --fs-d2:   clamp(2.4rem, 4.6vw, 4rem);
  --fs-h2:   clamp(2rem, 3.4vw, 3.1rem);
  --fs-h3:   clamp(1.45rem, 2.2vw, 1.9rem);
  --fs-h4:   1.25rem;
  --fs-lead: clamp(1.1rem, 1.35vw, 1.3rem);
  --fs-body: 1rem;
  --fs-sm:   .875rem;
  --fs-xs:   .75rem;

  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 22px;

  --nav-h: 72px;
  --gutter: clamp(20px, 4vw, 44px);
  --wrap: 1280px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--nav-h) + 24px)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-body); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.015em; text-wrap:balance}
p{margin:0}
ul{list-style:none; margin:0; padding:0}
:focus-visible{outline:2px solid var(--accent-strong); outline-offset:3px; border-radius:4px}
::selection{background:color-mix(in srgb, var(--blue-500) 30%, transparent); color:var(--ink)}

.wrap{width:min(100% - 2*var(--gutter), var(--wrap)); margin-inline:auto}
.section{padding-block:clamp(4rem, 7.5vw, 7.25rem)}
.section-tight{padding-block:clamp(3rem, 5vw, 4.5rem)}
.hr{height:1px; background:var(--line); border:0; margin:0}

/* Type roles */
.d1{font-size:var(--fs-d1); line-height:1.02; letter-spacing:-.025em; font-weight:600}
.d2{font-size:var(--fs-d2); line-height:1.04; letter-spacing:-.022em; font-weight:600}
.h2{font-size:var(--fs-h2); line-height:1.08}
.h3{font-size:var(--fs-h3); line-height:1.18}
.h4{font-size:var(--fs-h4); line-height:1.25}
.lead{font-family:var(--serif); font-size:var(--fs-lead); line-height:1.45; color:var(--ink); font-weight:400; max-width:52ch}
.serif{font-family:var(--serif); line-height:1.5}
.muted{color:var(--ink-2)}
.eyebrow{font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.eyebrow::before{content:""; display:inline-block; width:6px; height:6px; margin-right:.6em; background:var(--accent); vertical-align:.14em}
.mono{font-family:var(--mono)}
.nw{white-space:nowrap}
.u{text-decoration:underline; text-decoration-thickness:.06em; text-underline-offset:.13em; text-decoration-color:var(--accent); transition:color .2s, text-decoration-color .2s}
a.u:hover{color:var(--accent-strong); text-decoration-color:var(--accent-strong)}
.small{font-size:var(--fs-sm)}
.prose p + p{margin-top:1.1em}
.prose.serif{font-size:1.1rem; line-height:1.6}

/* Buttons + links */
.btn{display:inline-flex; align-items:center; gap:.55rem; padding:.72rem 1.1rem; border-radius:var(--r-sm);
  font-weight:500; font-size:.92rem; line-height:1; border:1px solid transparent; white-space:nowrap;
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-dark{background:var(--ink); color:var(--bg)}
.btn-dark:hover{background:#2E2D2A; box-shadow:0 10px 26px -12px var(--accent-glow)}
.btn-light{background:var(--bg); color:var(--ink)}
.btn-light:hover{background:#fff}
.btn-line{border-color:var(--line-2); color:var(--ink); background:transparent}
.btn-line:hover{background:var(--card)}
.btn-sm{padding:.55rem .85rem; font-size:.84rem}
.arrow{display:inline-block; transition:transform .25s var(--ease)}
.btn:hover .arrow, .link:hover .arrow{transform:translateX(3px)}
.link{display:inline-flex; align-items:center; gap:.4rem; font-weight:500; font-size:var(--fs-sm)}
.link:hover{text-decoration:underline; text-underline-offset:.2em; text-decoration-color:var(--accent); text-decoration-thickness:1.5px}

/* ==========================================================================
   Intro — the logo writes itself onto the black, holds a beat, and the black fades away to the page
   ========================================================================== */
#intro{position:fixed; inset:0; z-index:200; background:var(--ink); display:grid; place-items:center; overflow:hidden}
#intro .intro-logo{position:relative; width:min(46vw, 320px); z-index:2; display:flex; align-items:center; gap:0}
#intro .intro-logo .imp-logo{width:100%; height:auto; color:var(--bg); clip-path:inset(-2px 100% -2px -2px); animation:logoReveal 1.05s var(--ease) .35s forwards}
#intro .intro-logo::after{content:""; position:absolute; left:0; top:-10%; height:120%; width:2px; background:var(--bg); opacity:0;
  animation:caret 1.05s var(--ease) .35s forwards}
#intro.done{animation:introOut .55s var(--ease) forwards}
#intro.done .intro-logo{transition:transform .55s var(--ease); transform:scale(.985)}
@keyframes logoReveal{to{clip-path:inset(-2px -2px -2px -2px)}}
@keyframes caret{0%{opacity:1; left:0} 90%{opacity:1} 100%{opacity:0; left:100%}}
@keyframes introOut{to{opacity:0; visibility:hidden}}
body.intro-lock{overflow:hidden}

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:90; height:var(--nav-h);
  background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-inner{height:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem}
.nav-right{display:flex; align-items:center; gap:1.25rem; margin-left:auto}
.brand .imp-logo{height:30px; color:var(--ink)}
.nav-links{display:flex; align-items:center; gap:.15rem}
.nav-item{position:relative}
.nav-link{display:inline-flex; align-items:center; gap:.35rem; padding:.55rem .8rem; border-radius:var(--r-sm); font-size:.9rem; font-weight:500; color:var(--ink); transition:background-color .2s}
.nav-link:hover, .nav-item.open > .nav-link, .nav-link.active{background:var(--card)}
.nav-link .chev{width:10px; height:10px; transition:transform .25s}
.nav-item.open .chev{transform:rotate(180deg)}
.menu{position:absolute; top:calc(100% + 8px); left:0; min-width:190px; padding:.4rem; border-radius:12px; color:var(--ink);
  background:#FCFBF9; border:1px solid var(--line); box-shadow:0 18px 50px -20px rgba(25,25,25,.28), 0 2px 8px rgba(25,25,25,.05);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s}
.nav-item.open .menu{opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s}
.menu a{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:.42rem .6rem; border-radius:6px; font-size:.92rem; white-space:nowrap; transition:background-color .15s}
.menu a:hover{background:color-mix(in srgb, var(--sand) 30%, transparent)}
.menu .m-group{margin:.35rem .6rem .3rem; font-size:.82rem; color:var(--ink-3)}
.menu .m-group + a{margin-top:0}
.menu hr{height:1px; border:0; background:var(--line); margin:.45rem .6rem}
.menu .ext{color:var(--ink-3); font-size:.78rem}

.menu-right{left:auto; right:0; min-width:210px}
.nav-cta{display:flex; align-items:center; gap:.75rem}
.cta-split{position:relative; display:flex; align-items:stretch; border-radius:var(--r-sm); overflow:visible; background:var(--ink); color:var(--bg)}
.cta-main{white-space:nowrap}
.cta-main{display:flex; align-items:center; padding:.58rem .9rem; font-size:.88rem; font-weight:500; border-radius:var(--r-sm) 0 0 var(--r-sm); transition:background-color .2s}
.cta-chev{display:grid; place-items:center; width:34px; border-radius:0 var(--r-sm) var(--r-sm) 0; border-left:1px solid rgba(255,255,255,.18); color:var(--bg); transition:background-color .2s}
.cta-main:hover, .cta-chev:hover{background:#333230}
.cta-chev .chev{width:10px; height:10px; transition:transform .25s}
.cta-split.open .cta-chev .chev{transform:rotate(180deg)}
.cta-split.open .menu{opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s}
.burger{display:none; width:40px; height:40px; border-radius:var(--r-sm); place-items:center}
.burger span{display:block; width:18px; height:1.5px; background:var(--ink); margin:2.5px 0; transition:transform .25s, opacity .25s}
.drawer{position:fixed; inset:var(--nav-h) 0 0 0; z-index:80; background:var(--bg); padding:1.5rem var(--gutter) 3rem; overflow:auto; display:none}
.drawer.open{display:block}
.drawer a{display:block; padding:1rem 0; border-bottom:1px solid var(--line); font-size:1.35rem; font-weight:600}
.drawer .sub a{font-size:1rem; font-weight:500; padding:.7rem 0 .7rem 1rem; color:var(--ink-2); border:0}
@media (max-width: 940px){
  .nav-links, .nav-cta .btn{display:none}
  .burger{display:grid}
}

/* ==========================================================================
   Pages (hash routed)
   ========================================================================== */
.page{position:relative}
.site-main{position:relative; z-index:2; background:var(--bg); box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}

/* Reveal on scroll — only applied by JS to elements that start below the fold */
.pre{opacity:0; transform:translateY(18px)}
.in{opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease)}

/* Wireframe placeholder — every TBD creative uses this so it's obvious what to replace */
.wf{position:relative; border:1px dashed var(--line-2); border-radius:var(--r-md); background:
  linear-gradient(to top right, transparent calc(50% - .6px), color-mix(in srgb, var(--ink) 18%, transparent) 50%, transparent calc(50% + .6px)),
  linear-gradient(to top left,  transparent calc(50% - .6px), color-mix(in srgb, var(--ink) 18%, transparent) 50%, transparent calc(50% + .6px)),
  var(--card-2); overflow:hidden; min-height:120px; max-width:100%}
.wf::before{content:attr(data-label); position:absolute; left:12px; top:12px; z-index:1; padding:.35rem .55rem; border-radius:4px;
  background:var(--ink); color:var(--bg); font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.07em; text-transform:uppercase}
.wf::after{content:attr(data-size); position:absolute; right:12px; bottom:10px; font-family:var(--mono); font-size:.66rem; color:var(--ink-3); letter-spacing:.04em}
.wf-dark{border-color:rgba(255,255,255,.25); background:
  linear-gradient(to top right, transparent calc(50% - .6px), rgba(255,255,255,.18) 50%, transparent calc(50% + .6px)),
  linear-gradient(to top left,  transparent calc(50% - .6px), rgba(255,255,255,.18) 50%, transparent calc(50% + .6px)), #262522}
.wf-dark::before{background:var(--bg); color:var(--ink)}
.wf-dark::after{color:rgba(255,255,255,.5)}

/* Hero (Anthropic index model) */
.hero{padding-top:clamp(3rem, 6vw, 5.5rem); padding-bottom:clamp(2rem, 4vw, 3rem)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); gap:2rem 4rem; align-items:end}
.hero-grid .lead{margin-bottom:.35em}
@media (max-width: 860px){ .hero-grid{grid-template-columns:1fr} }

/* Hero creative — sticky, expands to full bleed on scroll */
.creative-stage{position:relative; height:120vh}   /* script sets the exact height: the run to full bleed plus a short hold */
.creative-sticky{position:sticky; top:var(--nav-h); height:calc(100vh - var(--nav-h)); display:flex; align-items:flex-start; justify-content:center; overflow:hidden}
.world-panel{position:relative; width:min(100% - 2*var(--gutter), var(--wrap)); height:min(74vh, 720px); border-radius:var(--r-lg); overflow:hidden;
  background:#8A7278; box-shadow:0 30px 80px -40px rgba(25,25,25,.5); will-change:width,height,border-radius; isolation:isolate}
.world{position:absolute; inset:0}
.hero-canvas{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 62%; image-rendering:pixelated; image-rendering:crisp-edges; display:block}
.world-panel.dither-mode{background:#EBE5DA}
.world-panel.dither-mode .world-copy{color:var(--ink)}
.world-panel.dither-mode .world-vignette{background:radial-gradient(ellipse 46% 36% at 50% 54%, rgba(235,229,218,.62), rgba(235,229,218,0) 72%)}
.world-panel.dither-mode .world-copy h2{text-shadow:none}
.world-panel.dither-mode .world-copy p{text-shadow:none; opacity:1}
.hero-media-first .media{position:relative; background:#E9E3D8}
.hero-media-first .media .hero-canvas{position:absolute}
.hero-photo{display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.world-panel.photo-mode .hero-photo{display:block}
.world-panel.photo-mode .world, .world-panel.photo-mode .tod, .world-panel.photo-mode .world-tag{display:none}
.world-panel.photo-mode .world-vignette{background:linear-gradient(to top, rgba(25,25,25,.62) 0%, rgba(25,25,25,.3) 35%, rgba(25,25,25,.18) 65%, rgba(25,25,25,.1) 100%)}
.world svg{width:100%; height:100%; display:block; filter:saturate(.92)}
.world .grain{position:absolute; inset:0; background-size:180px 180px; mix-blend-mode:soft-light; opacity:.5; pointer-events:none}
.world .layer{will-change:transform; transition:none}
.world-vignette{position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(25,25,25,.62) 0%, rgba(25,25,25,.28) 32%, rgba(25,25,25,0) 60%)}
.world-copy{position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; color:#fff; padding:0 var(--gutter); z-index:2}
.world-copy h2{font-family:var(--sans); font-weight:600; font-size:clamp(2.3rem, 5.6vw, 5.125rem); line-height:1.02; letter-spacing:-.032em; text-shadow:0 2px 30px rgba(0,0,0,.25); display:inline-block; text-align:left}
.world-copy h2 > span{display:block}
.world-copy h2 .l2{padding-left:clamp(2rem, 7vw, 5.5rem)}
.world-copy p{font-family:var(--sans); font-weight:400; font-size:clamp(1.1rem, 1.7vw, 1.5rem); line-height:1.3; letter-spacing:-.012em; margin-top:1.1rem; opacity:.92}
.world-copy .btn{margin-top:1.3rem}
.world-vignette{background:linear-gradient(to top, rgba(25,25,25,.5) 0%, rgba(25,25,25,.18) 32%, rgba(25,25,25,.08) 60%, rgba(25,25,25,.03) 100%)}
.tod{position:absolute; right:16px; bottom:16px; z-index:3; display:flex; gap:2px; padding:3px; border-radius:999px;
  background:rgba(25,25,25,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.14)}
.tod button{padding:.42rem .8rem; border-radius:999px; color:rgba(255,255,255,.8); font-size:.78rem; font-weight:600; letter-spacing:.02em; transition:background-color .2s,color .2s}
.tod button:hover{color:#fff}
.tod button[aria-pressed="true"]{background:var(--bg); color:var(--ink)}
.world-tag{position:absolute; left:18px; bottom:18px; z-index:3; display:flex; align-items:center; gap:.5rem; padding:.42rem .7rem; border-radius:999px;
  background:rgba(25,25,25,.45); color:rgba(255,255,255,.88); font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.14)}
.live{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(84,104,255,.6); animation:pulse 2.2s infinite; flex:0 0 auto}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(84,104,255,.6)} 70%{box-shadow:0 0 0 7px rgba(84,104,255,0)} 100%{box-shadow:0 0 0 0 rgba(84,104,255,0)}}
@media (max-width: 860px){
  .creative-stage{height:auto}
  .creative-sticky{position:relative; top:auto; height:auto}
  .world-panel{height:min(72vh, 560px); width:min(100% - 2*var(--gutter), var(--wrap)) !important; border-radius:var(--r-md) !important}
  .tod{bottom:14px; right:14px}
  .world-tag{display:none}
}

/* Time-of-day palettes for the world (stop-color / fill via variables) */
.world[data-tod="dawn"]{ --sky1:#C4B4AC; --sky2:#DCC2AE; --sky3:#EDD3B2; --sun:#F8E2BC; --sunA:1; --stars:0; --clouds:.7; --far:#736A60;
  --marble:#F1E9DC; --shade:#D7CCBB; --marble2:#E8DFCF; --interior:#B8AB98; --glow:#F3D7A7; --glowA:.35; --tree:#2B2925; --ground:#B9AE9D; --ground2:#978C7C; --moonA:0; --cloud:#F7E8D8}
.world[data-tod="day"]{  --sky1:#AFA89C; --sky2:#CCC5B8; --sky3:#E6E0D4; --sun:#FFF9EA; --sunA:.95; --stars:0; --clouds:.95; --far:#7A7266;
  --marble:#F3EDE2; --shade:#C8BEAF; --marble2:#E9E1D3; --interior:#9A8F7E; --glow:#F7E8CB; --glowA:.10; --tree:#2F2E29; --ground:#C6BCAB; --ground2:#A2978A; --moonA:0; --cloud:#FAF6EE}
.world[data-tod="dusk"]{ --sky1:#7B6B72; --sky2:#B99A95; --sky3:#DFBFA1; --sun:#F1C69C; --sunA:.9; --stars:.18; --clouds:.62; --far:#3F3936;
  --marble:#DACFC0; --shade:#B7A998; --marble2:#CFC3B2; --interior:#5E534A; --glow:#F3C98F; --glowA:.9; --tree:#1E1C1A; --ground:#6E655B; --ground2:#4C453E; --moonA:0; --cloud:#E9CBB3}
.world[data-tod="night"]{--sky1:#131312; --sky2:#221F1C; --sky3:#3A332C; --sun:#EFE6D6; --sunA:0; --stars:1; --clouds:.2; --far:#191816;
  --marble:#B5AA9B; --shade:#8A8073; --marble2:#A59A8B; --interior:#3A332D; --glow:#F0BF7B; --glowA:1; --tree:#0E0E0D; --ground:#2A2622; --ground2:#1A1816; --moonA:1; --cloud:#4A423C}
.world stop, .world .fx{transition:stop-color 1.4s var(--ease), fill 1.4s var(--ease), opacity 1.4s var(--ease)}
.world .sun-g{transition:transform 1.6s var(--ease), opacity 1.4s var(--ease)}
.world .cloud{animation:drift 140s ease-in-out infinite alternate}
.world .cloud:nth-child(2){animation-duration:190s; animation-delay:-60s}
.world .cloud:nth-child(3){animation-duration:230s; animation-delay:-120s}
@keyframes drift{from{transform:translateX(-70px)} to{transform:translateX(70px)}}
.world .star{animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.35} 50%{opacity:1}}

/* Cards (Anthropic "latest releases" model) */
.cards-3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem}
.card{display:flex; flex-direction:column; gap:.65rem; padding:1.25rem 1.3rem 1.3rem; border-radius:var(--r-md); background:var(--card); min-height:100%}
.card .h4{font-size:1.28rem; letter-spacing:-.01em}
.card .serif{font-size:.98rem; color:var(--ink); line-height:1.45; margin-bottom:.6rem}
.card .meta{margin:auto 0 0; padding-top:1rem; display:flex; flex-direction:column; border-top:1px solid var(--line)}
.meta > div{display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid var(--line); font-size:.8rem}
.meta dt{font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:.68rem; color:var(--ink-2); flex:0 0 auto}
.meta dd{margin:0; text-align:right; color:var(--ink)}
.card .btn{align-self:flex-start; margin-top:auto}
.card-pc{position:relative; overflow:hidden; isolation:isolate}
.card-pc::before{content:""; position:absolute; z-index:-1; right:-18%; top:-30%; width:70%; aspect-ratio:1; border-radius:50%; background:var(--accent); opacity:.26; filter:blur(48px); transition:opacity .5s var(--ease), transform .8s var(--ease)}
.card-pc:hover::before{opacity:.4; transform:scale(1.08)}

@media (max-width: 900px){ .cards-3{grid-template-columns:1fr} }

.split{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); gap:2rem 4rem; align-items:start}
@media (max-width: 860px){ .split{grid-template-columns:1fr} }
.feed li{border-top:1px solid var(--line)}
.feed li:last-child{border-bottom:1px solid var(--line)}
.feed a{display:flex; justify-content:space-between; gap:1rem; padding:1rem .25rem; transition:background-color .15s}
.feed a:hover{background:var(--card-2)}
.feed a:hover .t{text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:.2em}
.feed .c{font-family:var(--mono); letter-spacing:.02em}
.feed .t{font-weight:600; font-size:.95rem}
.feed .c{color:var(--ink-2); font-size:.85rem}

/* Ticker: "Trusted by" sits above the logos, on the page's left edge like every other label; the logos run the full width
   and fade out at both edges, so nothing is cut off against a line */
.ticker-wrap{padding:clamp(2.2rem,4vw,3.2rem) 0 clamp(2.3rem,4.4vw,3.5rem); border-bottom:1px solid var(--line); overflow:hidden}
.ticker-label{width:min(100% - 2*var(--gutter), var(--wrap)); margin:0 auto clamp(1.2rem,2.2vw,1.8rem); font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap}
.ticker-label::before{content:""; display:inline-block; width:6px; height:6px; margin-right:.6em; background:var(--accent); vertical-align:.14em}
.ticker-track {position:relative; overflow:hidden}   /* the fades are Stone (--bg) to clear Stone, so no browser draws a grey fringe */
.ticker-track::before, .ticker-track::after {content:""; position:absolute; top:0; bottom:0; z-index:1; width:12%; pointer-events:none}
.ticker-track::before {left:0; background:linear-gradient(90deg, var(--bg), rgba(242,239,232,0))}
.ticker-track::after {right:0; background:linear-gradient(270deg, var(--bg), rgba(242,239,232,0))}
@media (max-width: 560px){ .ticker li{height:56px} .ticker{gap:3rem}
  .ticker-track::before, .ticker-track::after{width:9%} }
.ticker{display:flex; width:max-content; gap:4.5rem; align-items:center; animation:ticker 80s linear infinite; will-change:transform}
.ticker:hover{animation-play-state:paused}
.ticker li{display:flex; align-items:center; height:72px; flex:none}
.ticker li img{display:block; width:auto; max-width:none; filter:brightness(0); opacity:.74; transition:opacity .3s}
.ticker li:hover img{opacity:1}
@keyframes ticker{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ==========================================================================
   Footer — page "peels off" to uncover it
   ========================================================================== */
.site-footer{position:sticky; bottom:0; z-index:1; color:#E8E3D9; padding:clamp(3rem, 6vw, 5rem) 0 1.6rem;
  background:radial-gradient(48% 70% at 100% 0%, rgba(84,104,255,.13), transparent 70%), var(--footer)}
.foot-top{display:grid; grid-template-columns:1.3fr repeat(3, minmax(0,.7fr)) 1.1fr; gap:2.5rem 2rem}
.foot-top .imp-logo{height:26px; color:var(--bg)}
.foot-origin{margin-top:1.3rem; max-width:34ch; color:rgba(232,227,217,.72); font-family:var(--serif); font-size:1rem; line-height:1.5}
.foot-col h5{margin:0 0 .9rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(232,227,217,.5); font-weight:500}
.foot-col a{display:block; padding:.28rem 0; font-size:.92rem; color:rgba(232,227,217,.86); transition:color .15s}
.foot-col a:hover{color:#fff}
.clocks{display:grid; gap:.55rem; align-content:start}
.clock{display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:.86rem}
.clock b{font-weight:600; display:inline-flex; align-items:center; gap:.55rem}
.clock span{font-family:var(--mono); font-size:.8rem; font-variant-numeric:tabular-nums; color:rgba(232,227,217,.7)}

.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem 2rem; margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.1); font-size:.78rem; color:rgba(232,227,217,.55)}
.foot-bottom a:hover{color:#fff}
@media (max-width: 900px){ .foot-top{grid-template-columns:1fr 1fr} .foot-top > :first-child, .foot-top > .clocks{grid-column:1 / -1} }

/* ==========================================================================
   Company page
   ========================================================================== */
.page-hero{padding-top:clamp(2.5rem, 5vw, 4rem); padding-bottom:clamp(2.5rem, 5vw, 4rem)}
.hero-media-first .wf, .hero-media-first .media{aspect-ratio:21 / 9; border-radius:var(--r-lg); width:100%; overflow:hidden}
.hero-media-first .media img{width:100%; height:100%; object-fit:cover}
.hero-media-first .hero-grid{margin-top:2.25rem; align-items:start}
.hero-actions{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.4rem}
.two-col{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:3rem 4rem; align-items:center}
@media (max-width: 900px){ .two-col{grid-template-columns:1fr} .two-col.flip > :first-child{order:2} }
.iso{width:100%; aspect-ratio:4 / 3; border-radius:var(--r-md); background:var(--card-2); border:1px solid var(--line); overflow:hidden}
.iso svg{width:100%; height:100%; display:block; font-family:var(--sans)}
.iso .wire{fill:none; stroke:var(--ink); stroke-width:1.1; stroke-linejoin:round; stroke-linecap:round}
.iso .dash{stroke-dasharray:3 4; stroke:var(--ink-3)}
.iso .top{fill:var(--bg-2)} .iso .left{fill:var(--sand)} .iso .right{fill:var(--tan)}
.iso .lbl-2{font-size:10.5px; fill:var(--ink-2)}
.iso .draw{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.3s var(--ease)}
.iso .fade{opacity:0; transition:opacity .9s var(--ease)}
.iso.in .draw{stroke-dashoffset:0}
.iso.in .fade{opacity:1}
.iso .float{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}}
.col-host{aspect-ratio:1 / 1; background:var(--card-2)}
.iso-svg{width:100%; height:100%; display:block; font-family:var(--sans)}
.iso-svg .f-t{fill:#F8F5EF} .iso-svg .f-l{fill:#E7E0D4} .iso-svg .f-r{fill:#D9D0C2}
.iso-svg polygon{stroke:var(--ink); stroke-width:1; stroke-linejoin:round; stroke-opacity:.8}
.iso-svg .core .f-t{fill:#EFE2D4} .iso-svg .core .f-l{fill:#DDCBBA} .iso-svg .core .f-r{fill:#CBB8A9}
.iso-svg .tile .f-t{fill:#FAF7F1} .iso-svg .tile.hot .f-t{fill:var(--blue-200)} .iso-svg .tile.hot .f-l, .iso-svg .tile.hot .f-r{fill:var(--blue-300)}
.iso-svg .pcl .f-t{fill:#F0F2FF} .iso-svg .pcl .f-l{fill:#DCE1FF} .iso-svg .pcl .f-r{fill:#C8D0FF}
.iso-svg .pcl .data, .iso-svg .data.pcd{fill:var(--accent-strong); opacity:.85}
.iso-svg .pglow{fill:var(--accent); filter:blur(22px)}
.iso-svg .rim{fill:none; stroke-opacity:.28}
.iso-svg .pin{fill:var(--ink); opacity:.55}
.iso-svg .data{fill:var(--ink-2); opacity:.55}
.iso-svg .seat{fill:none; stroke:var(--ink); stroke-width:1.3}
.iso-svg .glow{fill:#E3CDB9; filter:blur(18px)}
.iso-svg .guide{stroke:var(--ink-3); stroke-width:1; stroke-dasharray:3 4}
.iso-svg .guide-fill{fill:none; stroke:var(--ink-3); stroke-width:1; stroke-dasharray:3 4}
.iso-svg .face-t{font-size:9.5px; font-weight:500; fill:var(--ink-2); letter-spacing:.02em}
.iso-svg .lbl-t{font-size:12.5px; font-weight:600; fill:var(--ink)}
.iso-svg .lbl-s{font-size:10.5px; fill:var(--ink-2)}
.iso-svg .leader{stroke:var(--ink-3); stroke-width:1; stroke-dasharray:1.5 3}
.iso-svg .bracket{fill:none; stroke:var(--ink-2); stroke-width:1.1}
.iso-svg .dot{fill:var(--ink)}
.iso-svg .c-body, .iso-svg .c-top{stroke:var(--ink); stroke-width:1; stroke-opacity:.8}
.iso-svg .rod .c-body{fill:#E9E2D6} .iso-svg .rod .c-top{fill:#F8F5EF}
.iso-svg .rod.hot .c-body{fill:var(--blue-200)} .iso-svg .rod.hot .c-top{fill:var(--blue-100)}
.iso-svg .flute{stroke:#C4B9AA; stroke-width:.8}
.iso-svg .rod-t{font-size:10.5px; font-weight:600; fill:var(--ink-2); letter-spacing:.02em}
.iso-svg .rod.hot .rod-t{fill:var(--ink)}
.iso-svg .plate.hot .f-t{fill:var(--blue-100)} .iso-svg .plate.hot .f-l, .iso-svg .plate.hot .f-r{fill:var(--blue-200)}
.iso-svg .lbl.pc-lbl .lbl-t{fill:var(--accent-ink)} .iso-svg .lbl.pc-lbl .dot{fill:var(--accent)}
.iso-svg .strap .f-t, .iso-svg .strap .f-l, .iso-svg .strap .f-r{fill:#5B564E}
.iso-svg .lbl{text-transform:none; letter-spacing:0}
.iso-svg .hoop{fill:none; stroke:var(--ink); stroke-width:1.6}
.cap-list{display:grid; gap:1.5rem}
.cap{display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start}
.cap .glyph{width:20px; height:20px; margin-top:.15rem; color:var(--ink-3); transition:color .25s}
.cap:hover .glyph{color:var(--accent-strong)}
.cap h4{font-size:1.05rem; margin-bottom:.3rem}
.cap p{color:var(--ink-2); font-size:.95rem; line-height:1.5}

.team-grid-2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.25rem}
.person-wide{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:1.25rem; padding:1.1rem; border-radius:var(--r-md); background:var(--card-2); border:1px solid var(--line)}
.person-wide img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px}
.person-wide .role{font-size:.78rem; color:var(--ink-2); margin-bottom:.35rem}
.person-wide .serif{font-size:.95rem; margin-top:.75rem; color:var(--ink-2)}
.team-grid-3{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1.25rem}
.person{display:flex; flex-direction:column; gap:.4rem}
.person img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-md); margin-bottom:.6rem; background:var(--card)}
.person .role{font-size:.78rem; color:var(--ink-2)}
.person .name{font-weight:600; font-size:1.05rem}
.person .serif{font-size:.92rem; color:var(--ink-2)}
@media (max-width: 900px){ .team-grid-2{grid-template-columns:1fr} .team-grid-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 560px){ .team-grid-3{grid-template-columns:1fr} .person-wide{grid-template-columns:1fr} }

/* ==========================================================================
   Case studies
   ========================================================================== */
.featured{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr); gap:1.5rem; padding:1.5rem; border-radius:var(--r-lg); background:var(--card)}
.featured .copy{display:flex; flex-direction:column; gap:.8rem; padding:.5rem}
.featured .copy .btn{margin-top:auto; align-self:flex-start}
.featured .media{border-radius:var(--r-md); overflow:hidden; background:var(--bg-2); padding:.6rem}
.featured .media img{width:100%; height:100%; object-fit:cover; border-radius:10px; aspect-ratio:16/9}
@media (max-width: 860px){ .featured{grid-template-columns:1fr} }
.carousel-head{display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.6rem}
.car-ctl{display:flex; gap:.4rem}
.car-ctl button{width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; transition:background-color .2s}
.car-ctl button:hover{background:var(--card); border-color:var(--accent)}
.carousel{display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 2*1.25rem) / 3); gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:.5rem}
.carousel::-webkit-scrollbar{display:none}
.cs{scroll-snap-align:start; display:flex; flex-direction:column; border-radius:var(--r-md); background:var(--card-2); border:1px solid var(--line); overflow:hidden; min-height:100%}
.cs .media, .cs .wf{position:relative; flex:none; min-height:0; aspect-ratio:16/10; overflow:hidden; border-radius:0; border-left:0; border-right:0; border-top:0}
.cs .media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cs .body{padding:1.25rem; display:flex; flex-direction:column; gap:.5rem; flex:1}
.cs .tags{margin-top:auto; padding-top:1rem; font-family:var(--mono); font-size:.7rem; color:var(--ink-2); letter-spacing:.02em}
.cs .body .serif{font-size:.95rem; color:var(--ink-2)}
@media (max-width: 1000px){ .carousel{grid-auto-columns:calc((100% - 1.25rem) / 2)} }
@media (max-width: 640px){ .carousel{grid-auto-columns:88%} }
/* press wall: the outlets' own wordmarks in ink, open on the page (no boxes), sized by eye so no one logo shouts */
.press-grid{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:clamp(2.4rem,4.2vw,3.6rem) clamp(1.4rem,3vw,2.8rem); margin-top:clamp(2.8rem,5.5vw,4.4rem); align-items:center}
.press{display:flex; align-items:center; justify-content:center; min-height:64px; opacity:.8; transition:opacity .2s var(--ease)}
.press:hover,.press:focus-visible{opacity:1}
.press img{display:block; height:calc(var(--h) * var(--k,1)); width:auto; max-width:100%; object-fit:contain}
@media (max-width: 900px){ .press-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:2.2rem 2.6rem} .press{--k:.82; min-height:52px} }
@media (max-width: 560px){ .press-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 1.4rem} .press{--k:.66; min-height:44px} }
.cta-bars{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.cta-bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.4rem 1.6rem; border-radius:var(--r-md); font-size:clamp(1.2rem, 2vw, 1.6rem); font-weight:600; letter-spacing:-.01em; transition:transform .2s}
.cta-bar:hover{transform:translateY(-2px)}
.cta-bar.dark{background:var(--ink); color:var(--bg)}
.cta-bar.sand{background:var(--card)}
@media (max-width: 700px){ .cta-bars{grid-template-columns:1fr} }
.tbd{display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .55rem; border-radius:4px; background:var(--ink); color:var(--bg); font-size:.66rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; vertical-align:middle}

/* ==========================================================================
   Forms (Get started, ParaCompass demo, Careers) + toast
   ========================================================================== */
.form-card{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); padding:1.5rem}
.form-card .head{display:flex; justify-content:space-between; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); font-weight:500; margin-bottom:1.2rem}
.field{display:grid; gap:.35rem; margin-bottom:1rem}
.field label{font-family:var(--mono); font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; font-weight:500; color:var(--ink-2)}
.form-foot .btn{font-family:var(--sans); font-size:.92rem; letter-spacing:0; text-transform:none}
.field input, .field textarea, .field select{width:100%; padding:.75rem .85rem; border-radius:var(--r-sm); border:1px solid var(--line-2); background:#fff; font:inherit; font-size:.95rem; color:var(--ink)}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--accent-strong); box-shadow:0 0 0 3px var(--accent-soft)}
.field textarea{min-height:110px; resize:vertical}
.field-2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.form-foot{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.5rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
@media (max-width: 560px){ .field-2{grid-template-columns:1fr} }
.toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%, 20px); background:var(--ink); color:var(--bg); padding:.75rem 1.1rem; border-radius:8px; font-size:.9rem; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; z-index:120}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* Underlined, minimal form (Careers application, matches the reference) */
.form-lines .field{margin-bottom:1.35rem}
.form-lines .field label{text-transform:none; letter-spacing:0; font-size:.86rem; color:var(--ink); font-weight:500}
.form-lines .field input, .form-lines .field textarea{background:transparent; border:0; border-bottom:1px solid var(--line-2); border-radius:0; padding:.55rem 0}
.form-lines .field input:focus, .form-lines .field textarea:focus{border-bottom-color:var(--accent-strong); box-shadow:none}
.form-lines textarea{min-height:60px}
.drop{border:1px dashed var(--line-2); border-radius:var(--r-sm); padding:1.6rem; text-align:center; font-size:.85rem; color:var(--ink-2); transition:border-color .2s, background-color .2s; cursor:pointer}
.drop:hover{border-color:var(--accent); background:var(--accent-soft)}
.drop b{display:block; font-size:1.3rem; font-weight:400; margin-bottom:.2rem}

/* ==========================================================================
   Insights
   ========================================================================== */
.sub-form{display:flex; gap:.6rem; margin-top:1.2rem; max-width:440px}
.sub-form input{flex:1; padding:.72rem .9rem; border-radius:var(--r-sm); border:1px solid var(--line-2); background:#fff; font:inherit; font-size:.92rem}
.sub-form input:focus{outline:none; border-color:var(--accent-strong); box-shadow:0 0 0 3px var(--accent-soft)}
.posts-4{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:2rem; padding-block:2.5rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.post h4{font-size:1rem; margin-bottom:.5rem; line-height:1.3}
.post p{font-family:var(--serif); font-size:.95rem; color:var(--ink-2); margin-bottom:.8rem; line-height:1.45}
@media (max-width: 1000px){ .posts-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 560px){ .posts-4{grid-template-columns:1fr} }
.archive{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr); gap:2rem; align-items:start}
.archive table{width:100%; border-collapse:collapse; font-size:.86rem}
.archive th{text-align:left; font-family:var(--mono); font-size:.64rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); padding:.55rem .6rem; border-bottom:1px solid var(--line)}
.archive td{padding:.75rem .6rem; border-bottom:1px solid var(--line); vertical-align:top}
.archive tbody tr{cursor:pointer; transition:background-color .15s}
.archive tbody tr:hover, .archive tbody tr.on{background:var(--card-2)}
.archive tbody tr.on td:last-child{text-decoration:underline; text-underline-offset:.2em; text-decoration-color:var(--accent)}
.archive tbody tr.on td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
.archive td:first-child{white-space:nowrap; font-family:var(--mono); font-size:.76rem; font-variant-numeric:tabular-nums; color:var(--ink-2)}
.archive .more{display:block; text-align:center; padding:.75rem; margin-top:.75rem; border-radius:var(--r-sm); background:var(--card-2); font-size:.85rem}
.arch-art{position:sticky; top:calc(var(--nav-h) + 24px); aspect-ratio:1; border-radius:var(--r-md); overflow:hidden; background:var(--tan); transition:background-color .5s var(--ease); display:grid; place-items:center}
.arch-art svg{width:62%; height:62%; transition:transform .5s var(--ease)}
.arch-art .tile{width:70%; height:70%; background:var(--bg-2); border-radius:6px; display:grid; place-items:center; box-shadow:0 20px 40px -24px rgba(0,0,0,.4)}
@media (max-width: 860px){ .archive{grid-template-columns:1fr} .arch-art{position:relative; top:0; max-width:320px} }

/* ==========================================================================
   Careers / Get started
   ========================================================================== */
.career-hero{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr); gap:1.5rem; padding:1.5rem; border-radius:var(--r-lg); background:var(--card)}
.career-hero .copy{display:flex; flex-direction:column; gap:.8rem; padding:.5rem}
.career-hero .copy .link{margin-top:auto}
.career-hero .art{border-radius:var(--r-md); background:var(--tan); padding:1.5rem; display:grid; place-items:center; min-height:320px}
.career-hero .art .wf{width:min(100%, 420px); aspect-ratio:4/3; background-color:var(--bg-2)}
.career-hero .art-photo{padding:0; overflow:hidden}
.career-hero .art-photo img{width:100%; height:100%; object-fit:cover}
@media (max-width: 860px){ .career-hero{grid-template-columns:1fr} }
.apply{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr); gap:2rem 4rem}
.apply .sticky{position:sticky; top:calc(var(--nav-h) + 24px)}
@media (max-width: 860px){ .apply{grid-template-columns:1fr} .apply .sticky{position:relative; top:0} }

/* ==========================================================================
   Case study detail / Founders letter
   ========================================================================== */
.article-head{text-align:center; padding-top:clamp(2rem, 5vw, 4rem); max-width:70ch; margin:0 auto}
.article-head h1{font-size:clamp(2.2rem, 4.6vw, 3.8rem); line-height:1.05; letter-spacing:-.022em; margin:.7rem 0}
.article-media{margin:2.5rem auto 0; width:min(100%, 1000px); border-radius:var(--r-lg); overflow:hidden; background:var(--tan)}
.article-media img{width:100%; aspect-ratio:16/9; object-fit:cover}
.article{display:grid; grid-template-columns:220px minmax(0,1fr); gap:3rem; width:min(100%, 1000px); margin:3.5rem auto 0}
.side-nav{position:sticky; top:calc(var(--nav-h) + 24px); align-self:start; display:grid; gap:.1rem}
.side-nav a{display:block; padding:.5rem 0 .5rem .8rem; border-left:2px solid transparent; font-size:.8rem; color:var(--ink-3); transition:color .2s, border-color .2s}
.side-nav a.on, .side-nav a:hover{color:var(--ink); border-left-color:var(--accent)}
.article .body{max-width:66ch}
.article .body h3{font-size:1.15rem; margin:2.2rem 0 .8rem}
.article .body h3:first-child{margin-top:0}
.figure{margin:2rem 0; border:1px solid var(--line); border-radius:var(--r-md); padding:1rem; background:var(--bg-2)}
.figure figcaption{margin-top:.6rem; font-family:var(--mono); font-size:.7rem; color:var(--ink-3)}
.quote{margin:3rem 0; padding:2rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.quote p{font-family:var(--serif); font-size:clamp(1.4rem, 2.6vw, 2rem); line-height:1.3; letter-spacing:-.01em}
.quote cite{display:block; margin-top:1rem; font-style:normal; font-size:.85rem; color:var(--ink-2)}
@media (max-width: 860px){ .article{grid-template-columns:1fr} .side-nav{position:relative; top:0; display:flex; flex-wrap:wrap; gap:.4rem} .side-nav a{border-left:0; border-bottom:2px solid transparent; padding:.3rem .4rem} .side-nav a.on{border-bottom-color:var(--accent)} }

.letter-title{font-size:clamp(3.6rem, 12vw, 11.5rem); line-height:.92; letter-spacing:-.04em; font-weight:600; padding-top:clamp(2rem, 6vw, 4rem)}
.letter{width:min(100%, 560px); margin:clamp(3rem, 10vh, 7rem) 0 0 clamp(0px, 26vw, 420px)}
.letter .kicker{display:flex; gap:.9rem; align-items:baseline; font-size:1.25rem; font-weight:600; margin-bottom:2.5rem}
.letter .kicker::before{content:""; width:22px; height:3px; background:var(--accent); flex:0 0 auto; transform:translateY(-.35em)}
.letter p{font-size:clamp(1.15rem, 1.6vw, 1.45rem); line-height:1.4; letter-spacing:-.01em; margin-bottom:1.6rem}
.letter h3{display:flex; gap:.9rem; align-items:baseline; font-size:1.25rem; font-weight:600; letter-spacing:-.01em; margin:4rem 0 1.4rem}
.letter h3::before{content:""; width:22px; height:3px; background:var(--accent); flex:0 0 auto; transform:translateY(-.35em)}
.letter-body b{font-weight:600}
.letter-body a.link{display:inline; font-size:inherit; font-weight:inherit; text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1.5px; text-decoration-color:var(--accent)}
.letter p.epigraph{font-family:var(--serif); font-style:italic; font-size:clamp(1.05rem, 1.35vw, 1.2rem); line-height:1.5; padding-left:1.2rem; border-left:2px solid var(--accent); margin-bottom:3rem}
.letter p.epigraph .attr{display:block; margin-top:.7rem; font-family:var(--mono); font-style:normal; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase}
.letter p.epigraph .attr .w{font-family:inherit}
.letter p.close{font-family:var(--serif); font-style:italic; font-size:clamp(1.35rem, 2vw, 1.75rem); margin-top:2.6rem}
.letter-body .w{color:color-mix(in srgb, var(--ink) 22%, transparent); transition:color .4s var(--ease)}
.letter-body .w.on{color:var(--ink)}
.letter-body a .w{color:inherit}
.letter-body a{color:color-mix(in srgb, var(--ink) 22%, transparent); transition:color .4s}
.letter-body a:has(.w.on){color:var(--ink)}
.letter ol.caps{list-style:none; margin:0 0 2.4rem; padding:0; counter-reset:cap; border-bottom:1px solid var(--line)}
.letter ol.caps li{counter-increment:cap; position:relative; padding:1.3rem 0 1.4rem 3rem; border-top:1px solid var(--line); font-size:clamp(1.02rem, 1.3vw, 1.18rem); line-height:1.45; letter-spacing:-.005em}
.letter ol.caps li::before{content:counter(cap, decimal-leading-zero); position:absolute; left:0; top:1.55rem; font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.06em; color:var(--accent-ink)}
.letter ol.caps li > b{display:block; font-size:clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing:-.01em; margin-bottom:.35rem}
.sig{display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:3.5rem; padding-top:2rem}
.sig .wf{aspect-ratio:5/2; background-color:transparent; border-radius:8px}
.sig .who{margin-top:.6rem; font-size:.8rem; color:var(--ink-2)}
.sig .who b{display:block; color:var(--ink); font-weight:600}
@media (max-width: 700px){ .letter{margin-left:0} .sig{grid-template-columns:1fr} }

/* ---------- Team: clickable names/photos + bio drawer (mirrors findimperium.com) ---------- */
.bio-photo{display:block; width:100%; padding:0; border:0; background:none; cursor:pointer; border-radius:var(--r-md); overflow:hidden}
.person .bio-photo{margin-bottom:.6rem}
.person .bio-photo img{margin-bottom:0}
.bio-photo img{transition:transform .6s var(--ease), filter .4s}
.bio-photo:hover img{transform:scale(1.025)}
.person-wide .bio-photo{border-radius:10px; align-self:start}
.bio-name{font:inherit; color:inherit; letter-spacing:inherit; padding:0; border:0; background:none; cursor:pointer; text-align:left; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:.2em; text-decoration-thickness:1px; transition:text-decoration-color .2s}
.bio-name:hover,.bio-name:focus-visible{text-decoration-color:currentColor}
button.bio-more{border:0; background:none; padding:0; cursor:pointer; color:inherit}

.bio-overlay{position:fixed; inset:0; z-index:150; background:rgba(22,21,19,.52); opacity:0; transition:opacity .45s var(--ease)}
.bio-overlay.on{opacity:1}
.bio-drawer{--bio-bg:#F1EEE7; position:fixed; top:0; right:0; bottom:0; z-index:151; width:min(520px, 100vw); background:var(--bio-bg); color:var(--ink);
  display:flex; flex-direction:column; transform:translateX(100%); visibility:hidden; transition:transform .55s cubic-bezier(.22,.8,.2,1), visibility 0s linear .55s;
  box-shadow:-30px 0 80px -30px rgba(0,0,0,.35); outline:none}
.bio-drawer.open{transform:none; visibility:visible; transition:transform .55s cubic-bezier(.22,.8,.2,1), visibility 0s}
.bio-scroll{position:relative; flex:1; overflow-y:auto; overscroll-behavior:contain}
.bio-img{display:block; width:100%; aspect-ratio:1; object-fit:cover; object-position:center 30%; background:var(--card)}
.bio-close{position:absolute; top:16px; right:16px; z-index:2; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(25,25,25,.28); background:rgba(241,238,231,.08); color:var(--ink); cursor:pointer; transition:background-color .2s, border-color .2s}
.bio-close:hover{background:rgba(241,238,231,.6); border-color:rgba(25,25,25,.5)}
.bio-close svg{width:13px; height:13px}
.bio-body{padding:2.1rem 2.25rem 2.4rem}
.bio-h{font-size:1.85rem; font-weight:400; letter-spacing:-.015em; line-height:1.1}
.bio-title{margin-top:.55rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.bio-text{margin-top:1.4rem; padding-top:1.7rem; border-top:1px solid var(--line)}
.bio-text p{font-size:.9rem; line-height:1.42; color:#2A2927; margin-bottom:1.05rem}
.bio-list{list-style:none; margin:1.3rem 0 0; padding:0 0 0 1rem}
.bio-list li{position:relative; padding-left:1rem; font-size:.8rem; line-height:1.55; color:var(--ink-2); margin-bottom:.55rem}
.bio-list li::before{content:""; position:absolute; left:0; top:.62em; width:3px; height:3px; border-radius:50%; background:var(--ink-3)}
.bio-foot{flex:0 0 auto; display:flex; align-items:center; gap:1.3rem; padding:1.1rem 2.25rem 1.25rem; border-top:1px solid var(--line); background:var(--bio-bg)}
.bio-li,.bio-copy{display:inline-flex; align-items:center; gap:.45rem; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; padding:0 0 .25rem; border:0; background:none; cursor:pointer; font-family:inherit}
.bio-li{color:var(--ink); border-bottom:1px solid var(--ink)}
.bio-copy{color:var(--ink-3); border-bottom:1px solid transparent; transition:color .2s}
.bio-copy:hover{color:var(--ink)}
.bio-li svg{width:15px; height:15px}
.bio-copy svg{width:14px; height:14px}
body.bio-lock{overflow:hidden}
@media (max-width: 600px){ .bio-body{padding:1.6rem 1.4rem 2rem} .bio-foot{padding:1rem 1.4rem} }

/* ParaCompass mark — shared across the site.
   Lockup rule, measured from the logo file (in x-heights of the wordmark):
   the arrow is centred on the lowercase body, as in the file; it spans the full height of "ParaCompass",
   from just above the capitals to the bottom of the p (1em in Manrope); the gap to the word is 0.9 of the
   arrow's width, the file's spacing; the wordmark is Manrope Bold at the file's tracking. */
.pc-mark{display:inline-block; flex:0 0 auto; overflow:visible; color:var(--ink); height:1em; width:.752em}
.pc-wm{font-family:var(--brand); font-weight:700; letter-spacing:-.01em}
.pc-lock{display:inline-flex; align-items:baseline; gap:.61em; white-space:nowrap}
.pc-lock .pc-mark{height:1em; width:.752em; transform:translateY(.24em)}


/* =====================================================================
   PARACOMPASS — product page
   Brand: charcoal arrow + blue glow on cream (from the ParaCompass logo).
   The blue is the site-wide --accent, so product and firm share one signal colour.
   ===================================================================== */
.pc{--pc-cream:#F4F1ED; --pc-cream-2:#ECE8E1; --pc-cream-3:#E4DFD7; --pc-ink:#252323; --pc-ink-2:#4B4744; --pc-ink-3:#8A847C;
  --pc-glow:var(--accent); --pc-accent:var(--accent-ink); --pc-soft:var(--accent-soft); --pc-paper:#FBFAF7;
  --pc-mono:var(--mono); --pc-brand:var(--brand)}
.pc .pc-accent{color:var(--pc-accent)}
.pc .pc-num{font-family:var(--pc-mono); font-size:.72rem; letter-spacing:.08em; color:var(--pc-accent); text-transform:uppercase}
.pc .pc-mark{color:var(--pc-ink)}
/* Lockup rule (all sizes): arrow = .62 of the type size, dips .06 below the baseline, .18em from the word.
   Small UI lockups (<= 20px) scale the arrow up to .8 so it stays legible. */


/* ---------- Hero ---------- */
.pc-hero{position:relative; margin:0 clamp(6px,.9vw,14px); border-radius:18px; overflow:hidden;
  height:clamp(600px, calc(100svh - var(--nav-h) - 14px), 920px);
  background:radial-gradient(110% 80% at 50% 34%, #F6F4F0 0%, var(--pc-cream-2) 55%, var(--pc-cream-3) 100%)}
.pc-hero-copy{position:absolute; left:0; right:0; top:57%; text-align:center; pointer-events:none; padding:0 var(--gutter)}
.pc-lockup{margin:0; font-size:clamp(2.2rem, 10vw, 7.6rem); line-height:1; color:var(--pc-ink)}
.pc-sub{margin:clamp(1rem,2vw,1.6rem) auto 0; max-width:44ch; font-size:clamp(1.1rem, 1.8vw, 1.7rem); line-height:1.25; letter-spacing:-.015em; color:var(--pc-ink); text-wrap:balance}
.pc-hero.pc-narrow .pc-hero-copy{top:52%}
/* scroll cue: a plain arrow down, drawn at the weight of the site's text arrows; it bobs gently (Travel easing) */
.hero-down{position:absolute; left:50%; bottom:clamp(14px,2.8vh,32px); transform:translateX(-50%); display:grid; place-items:center; width:44px; height:48px; color:var(--pc-ink); animation:heroDown 2.4s var(--ease-io) infinite}
.hero-down svg{width:20px; height:26px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:square; stroke-linejoin:miter; overflow:visible}
.hero-down:hover{color:var(--accent-ink)}
@keyframes heroDown{0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,6px)}}
/* The glass (pc-glass.js): on arrival the card shows under fog for a moment, the fog dissolves, and the canvas gives
   way to a still drawing of the same card. The copy stays in the page, transparent, for screen readers, and the
   canvas takes its layout from it. The Visibility readout sits on the glass, bottom left, and counts the fog off. */
.pc-glass{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity .5s ease}
.pc-hero.glass-on{--gi:max(16px, min(3.2vw, 32px))}
.pc-hero.glass-on .pc-hero-copy{opacity:0}
.pc-hero.glass-shown .pc-glass{opacity:1}
.pc-bl{display:inline-block; width:0; height:0}
.pc-vis{display:none}
.pc-vis-l{font:500 11px/1 var(--pc-mono); letter-spacing:.08em; text-transform:uppercase; color:rgba(37,35,35,.64)}
.pc-hero.glass-on .pc-vis{position:absolute; left:var(--gi); bottom:var(--gi); display:grid; grid-template-columns:auto auto; align-items:center; gap:9px 14px; pointer-events:none}
.pc-vis b{justify-self:end; font:500 11px/1 var(--pc-mono); letter-spacing:.04em; color:var(--pc-ink); font-variant-numeric:tabular-nums; white-space:pre}
.pc-vis-m{grid-column:1/-1; width:148px; height:2px; background:rgba(37,35,35,.16); overflow:hidden}
.pc-vis-m i{display:block; width:100%; height:100%; background:var(--pc-glow); transform-origin:0 50%; transform:scaleX(0)}
@media (max-width:480px){ .pc-vis-m{width:112px} }

.pc-z{fill:none; stroke:var(--pc-ink); stroke-width:1; vector-effect:non-scaling-stroke}
.pc-pulse{fill:none; stroke:var(--pc-glow); stroke-width:2.2; stroke-linecap:round; vector-effect:non-scaling-stroke}
.pc-plate .top{stroke:var(--pc-ink); stroke-width:1; stroke-opacity:.7}
.pc-plate .side{stroke:var(--pc-ink); stroke-width:1; stroke-opacity:.45}
/* the audience cluster on the top plate (the ParaCompass+ field, without type) */
.pc-clu line{stroke:var(--pc-glow); stroke-width:1; stroke-opacity:.38; vector-effect:non-scaling-stroke}
.pc-clu ellipse{fill:var(--pc-glow)}
.pc-clu ellipse.d{fill:var(--accent-strong)}

/* ---------- Sub-nav ---------- */
/* the section bar lives in co-style.css (.lnav), shared with the Company page */

/* ---------- Sheet: statement + platform ---------- */
.pc-sheet{margin:14px clamp(6px,.9vw,14px) 0; background:var(--pc-paper); border-radius:18px; padding:clamp(4.5rem,10vw,9rem) clamp(1rem,3.4vw,3.2rem) clamp(2.5rem,5vw,4rem); scroll-margin-top:calc(var(--nav-h) + 60px)}
.pc-statement{max-width:25ch; margin:0 auto; text-align:center; font-size:clamp(1.75rem, 3.7vw, 3.35rem); line-height:1.12; letter-spacing:-.025em; color:var(--pc-ink); font-weight:400; text-wrap:balance}
.pc-statement .pc-accent{font-family:var(--pc-brand); font-weight:700; letter-spacing:-.01em}
.pc-statement .w{opacity:.14; transition:opacity .5s var(--ease)}
.pc-statement .w.on{opacity:1}
.pc-plat-head{margin:clamp(4.5rem,10vw,8rem) auto clamp(1.6rem,3vw,2.4rem); text-align:center}
.pc-plat-title{font-size:clamp(2.3rem, 5.2vw, 4.6rem); line-height:1; letter-spacing:-.045em; font-weight:600; color:var(--pc-ink)}
.pc-plat-lede{margin-top:.9rem; font-family:var(--pc-mono); font-size:clamp(.7rem,1vw,.82rem); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
.pc-flow{position:relative; background:radial-gradient(60% 70% at 50% 50%, rgba(84,104,255,.10), transparent 70%), var(--pc-cream); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.pc-flow svg{display:block; width:100%; height:auto}
.pc-flow-legend{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.2rem,3vw,3rem); margin-top:clamp(2rem,4vw,3rem); padding:0 clamp(0rem,1vw,1rem)}
.pc-flow-legend h3{margin:.5rem 0 .45rem; font-size:1.15rem; letter-spacing:-.01em; color:var(--pc-ink)}
.pc-flow-legend p{color:var(--ink-2); font-size:.95rem; line-height:1.5}
/* flow svg */
.pcf-colh{font-family:var(--pc-mono); font-size:12px; letter-spacing:.12em; fill:var(--pc-ink-3)}
.pcf-in{fill:none; stroke:var(--pc-ink); stroke-width:1.1; stroke-opacity:.38; transition:stroke-opacity .3s, stroke .3s, stroke-width .3s}
.pcf-in.amb{stroke-opacity:.12}
.pcf-out{fill:none; stroke:var(--pc-glow); stroke-width:1.3; stroke-opacity:.75; transition:stroke-opacity .3s}
.pcf-dim .pcf-in{stroke-opacity:.07}
.pcf-dim .pcf-in.hot{stroke:var(--pc-accent); stroke-opacity:1; stroke-width:2}
.pcf-pill{cursor:pointer}
.pcf-pill rect:not(.ic){fill:#fff; stroke:var(--pc-ink); stroke-opacity:.22; transition:stroke .25s, stroke-opacity .25s, fill .25s}
.pcf-pill .ic{fill:var(--pc-ink)}
.pcf-pill .ict{font-family:var(--pc-mono); font-size:10px; fill:#fff; font-weight:500}
.pcf-pill .nm{font-family:var(--sans); font-size:14.5px; fill:var(--pc-ink)}
.pcf-pill.hot rect:not(.ic){stroke:var(--pc-accent); stroke-opacity:1; fill:#F4F4FE}
.pcf-out-pill rect{fill:rgba(84,104,255,.12); stroke:var(--pc-glow); stroke-opacity:.55}
.pcf-out-pill text{font-family:var(--sans); font-size:14.5px; fill:#3346D4}
.pcf-hub rect.b{fill:#fff; stroke:var(--pc-ink); stroke-opacity:.9; stroke-width:1.2}
.pcf-hub .wm{font-family:var(--pc-brand); font-weight:700; font-size:26px; letter-spacing:-.26px; fill:var(--pc-ink)}
.pcf-hub .ml{font-family:var(--pc-mono); font-size:11.5px; letter-spacing:.06em; fill:var(--pc-ink-2)}
.pcf-hub .tr{fill:var(--pc-cream-2)}
.pcf-hub .fl{fill:var(--pc-ink)}
.pcf-hub .fl.a{fill:var(--pc-glow)}
.pcf-hub .sep{stroke:var(--line); stroke-width:1}

/* ---------- How it works ---------- */
.pc-system{scroll-margin-top:calc(var(--nav-h) + 60px)}
.pc-system-head{max-width:760px; margin-bottom:clamp(1rem,3vw,2rem)}
.pc-system-head .h2{margin-top:.6rem}
.pc-scrolly{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem)}
.pc-stick{position:sticky; top:calc(var(--nav-h) + 70px); height:calc(100vh - var(--nav-h) - 130px); max-height:720px; display:flex; align-items:center}
.pc-stack{width:100%}
.pc-stack svg{display:block; width:100%; height:auto; overflow:visible}
/* How it works: the hero's stack */
.pcs-clu line{transition:none}
.pcs-ring{fill:none; stroke:var(--pc-glow); stroke-width:1.3; stroke-dasharray:3 5; vector-effect:non-scaling-stroke}
.pcs-tag .pcs-lead{fill:none; stroke:var(--pc-glow); stroke-width:1; stroke-opacity:.8; vector-effect:non-scaling-stroke}
.pcs-tag .pcs-dot{fill:var(--pc-glow)}
.pcs-tag text{font-family:var(--pc-mono)}
.pcs-t1{font-size:13px; font-weight:500; fill:var(--pc-ink)}
.pcs-t2{font-size:12px; fill:var(--ink-2)}
.pcs-ind text{font-family:var(--pc-mono); font-size:11px; letter-spacing:.08em; fill:var(--ink-3); transition:fill .4s}
.pcs-ind text .n{fill:var(--ink-3); transition:fill .4s}
.pcs-ind line{stroke:var(--pc-ink); stroke-opacity:.14; stroke-width:2; transition:stroke .4s, stroke-opacity .4s}
.pcs-ind.done line{stroke:var(--pc-glow); stroke-opacity:.45}
.pcs-ind.on text{fill:var(--pc-ink)}
.pcs-ind.on text .n{fill:var(--pc-accent)}
.pcs-ind.on line{stroke:var(--pc-glow); stroke-opacity:1}
.pc-steps{display:flex; flex-direction:column}
.pc-step{min-height:74vh; display:flex; flex-direction:column; justify-content:center; padding:2rem 0; opacity:.35; transition:opacity .5s}
.pc-step.on{opacity:1}
.pc-step h3{margin:.7rem 0 .8rem; font-size:clamp(1.5rem,2.4vw,2.1rem); letter-spacing:-.02em; color:var(--pc-ink)}
.pc-step > p{color:var(--ink-2); font-size:1.02rem; line-height:1.6; max-width:52ch}
.pc-mock{margin-top:1.6rem; background:#fff; border:1px solid var(--line); border-radius:12px; padding:1rem 1.1rem; font-family:var(--pc-mono); font-size:.74rem; color:var(--pc-ink); box-shadow:0 24px 50px -36px rgba(37,35,35,.4); max-width:520px}
.pc-brief-head{display:flex; justify-content:space-between; align-items:center; padding-bottom:.7rem; margin-bottom:.8rem; border-bottom:1px solid var(--line); letter-spacing:.06em; text-transform:uppercase; font-size:.68rem; color:var(--pc-ink-2)}
.pc-tag{padding:.15rem .45rem; border-radius:999px; border:1px solid var(--line-2); font-size:.6rem; letter-spacing:.08em; color:var(--ink-3)}
.pc-connect{display:grid; grid-template-columns:1fr 1fr; gap:.45rem}
.pc-conn{display:flex; align-items:center; gap:.55rem; padding:.5rem .6rem; border:1px solid var(--line); border-radius:8px; background:#FCFBF9}
.pc-conn .ico{width:22px; height:22px; border-radius:5px; display:grid; place-items:center; background:var(--pc-ink); color:#fff; font-size:.62rem; font-weight:500; flex:0 0 auto}
.pc-conn .nm{flex:1; font-size:.72rem}
.pc-conn .st{display:inline-flex; align-items:center; gap:.3rem; font-size:.62rem; color:var(--ink-3); letter-spacing:.04em}
.pc-conn .st::before{content:""; width:6px; height:6px; border-radius:50%; background:#CFCAC2; transition:background .3s}
.pc-conn.ok .st{color:var(--pc-accent)}
.pc-conn.ok .st::before{background:var(--pc-glow); box-shadow:0 0 0 3px rgba(84,104,255,.22)}
.pc-connect-foot{grid-column:1/-1; display:flex; justify-content:space-between; margin-top:.35rem; padding-top:.6rem; border-top:1px solid var(--line); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.pc-connect-foot b{color:var(--pc-accent); font-weight:500}
.pc-brief-lines{margin:0; padding:0 0 0 1.1rem; display:grid; gap:.55rem}
.pc-brief-lines li{font-size:.75rem; line-height:1.5; min-height:1.5em}
.pc-brief-lines li::marker{color:var(--pc-accent)}
.pc-brief-rec{margin-top:.9rem; padding:.7rem .8rem; border-radius:8px; background:var(--pc-soft); display:grid; gap:.3rem; font-size:.74rem; line-height:1.5}
.pc-brief-rec b{font-weight:500; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--pc-accent)}
.pc-caret::after{content:"▍"; color:var(--pc-glow); animation:pcBlink 1s steps(1) infinite; margin-left:1px}
@keyframes pcBlink{50%{opacity:0}}

/* ---------- app chrome (Enterprise portfolio) ---------- */
.pc-dash,.pc-port{background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 50px 90px -60px rgba(37,35,35,.45); color:var(--pc-ink)}
.pc-dash-bar,.pc-port-bar{display:flex; align-items:center; gap:1rem; padding:.85rem clamp(1rem,2vw,1.5rem); border-bottom:1px solid var(--line)}
.pc-dash-brand{display:inline-flex; align-items:baseline; gap:.45rem; white-space:nowrap; font-size:1rem}
.pc-dash-brand i{font-style:normal; color:var(--pc-glow); margin:0 .15rem}
.pc-dash-brand em{font-style:normal; font-family:var(--pc-mono); font-size:.72rem; letter-spacing:.06em; color:var(--pc-ink-2)}
.pc-dash-note{margin-top:.9rem; font-family:var(--pc-mono); font-size:.62rem; letter-spacing:.06em; color:var(--ink-3)}

/* ---------- paracompass+ (charcoal, grain texture) ---------- */
.pc-plus{position:relative; margin:clamp(3rem,6vw,5rem) clamp(6px,.9vw,14px) 0; border-radius:18px; color:var(--pc-cream); padding:clamp(4.5rem,9vw,8rem) 0 clamp(4rem,7vw,6rem); overflow:hidden; scroll-margin-top:calc(var(--nav-h) + 50px); isolation:isolate;
  background:
    radial-gradient(55% 45% at 82% 6%, rgba(84,104,255,.30), transparent 70%),
    radial-gradient(45% 40% at 6% 96%, rgba(84,104,255,.14), transparent 70%),
    var(--pc-ink)}
.pc-plus::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.22; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px 180px}
.pc-plus-head{max-width:900px}
.pc-plus-eyebrow{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; font-family:var(--pc-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(244,241,237,.6)}
.pc-plus-pill .pc-mark, .pc-plan-dark .pc-mark{color:#fff}
.pc-plus-pill{display:inline-flex; align-items:center; gap:.3rem; padding:.3rem .7rem .3rem .55rem; border:1px solid rgba(84,104,255,.7); border-radius:999px; color:#fff; letter-spacing:-.01em; text-transform:none; font-size:.95rem; font-family:var(--pc-brand); font-weight:700}
.pc-plus-title{margin:1.2rem 0 1.1rem; font-size:clamp(2.4rem,5.4vw,4.8rem); line-height:1; letter-spacing:-.04em; font-weight:500; color:#F7F5F1}
.pc-plus-lead{font-size:clamp(1.05rem,1.4vw,1.25rem); line-height:1.55; color:rgba(244,241,237,.72); max-width:62ch}
.pc-field-wrap{margin-top:clamp(2.5rem,5vw,4rem)}
.pc-modes{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.8rem}
.pc-modes button{display:inline-flex; align-items:center; gap:.55rem; padding:.55rem .9rem; border-radius:8px; border:1px solid rgba(244,241,237,.16); background:rgba(244,241,237,.03); color:rgba(244,241,237,.62); font-size:.86rem; cursor:pointer; transition:all .25s; position:relative; overflow:hidden}
.pc-modes button i{font-style:normal; font-family:var(--pc-mono); font-size:.66rem; color:rgba(244,241,237,.4)}
.pc-modes button:hover{color:#fff; border-color:rgba(244,241,237,.35)}
.pc-modes button.on{background:var(--pc-cream); color:var(--pc-ink); border-color:var(--pc-cream)}
.pc-modes button.on i{color:var(--pc-accent)}
.pc-modes button .pg{position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--pc-glow)}
.pc-field{position:relative; height:clamp(360px, 44vw, 580px); border:1px solid rgba(244,241,237,.12); border-radius:14px; overflow:hidden; background:radial-gradient(90% 90% at 50% 50%, #2F2C2C, #1C1B1B)}
.pc-field canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.pc-field-hud{position:absolute; top:14px; right:14px; display:grid; gap:.25rem; justify-items:end; font-family:var(--pc-mono); font-size:.66rem; letter-spacing:.06em; color:rgba(244,241,237,.7); text-align:right; pointer-events:none}
.pc-field-hud b{color:#fff; font-weight:500; font-size:.72rem}
.pc-field-hud em{font-style:normal; color:rgba(244,241,237,.4)}
.pc-field-cap{margin-top:.9rem; font-family:var(--pc-mono); font-size:.74rem; letter-spacing:.03em; color:rgba(244,241,237,.55); min-height:1.4em}
.pc-plus-feats,.pc-ent-feats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1rem,2.4vw,2rem); margin-top:clamp(3rem,6vw,5rem); padding-top:clamp(2rem,4vw,3rem)}
.pc-plus-feats{border-top:1px solid rgba(244,241,237,.12)}
.pc-plus-feats h3{margin:.6rem 0 .5rem; font-size:1.1rem; color:#F7F5F1; letter-spacing:-.01em}
.pc-plus-feats p{font-size:.92rem; line-height:1.55; color:rgba(244,241,237,.62)}
.pc-plus .pc-num{color:#A9B3FF}

/* ---------- Enterprise ---------- */
.pc-ent{scroll-margin-top:calc(var(--nav-h) + 60px)}
.pc-ent-head{margin-bottom:clamp(2rem,4vw,3rem)}
.pc-port-count{margin-left:auto; white-space:nowrap; font-family:var(--pc-mono); font-size:.7rem; letter-spacing:.06em; color:var(--pc-ink-2)}
.pc-port-count b{color:var(--pc-accent); font-weight:500}
.pc-port-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; padding:clamp(1rem,2vw,1.5rem) clamp(1rem,2vw,1.5rem) 0}
.pc-port .pc-dash-note{padding:0 clamp(1rem,2vw,1.5rem) clamp(1rem,2vw,1.4rem)}
.pc-pcard{position:relative; border:1px solid var(--line); border-radius:12px; padding:.95rem 1rem .9rem; background:#FCFBF9; transition:transform .35s var(--ease), box-shadow .35s var(--ease), opacity .5s, border-color .25s}
.pc-pcard.pre{opacity:0; transform:translateY(14px)}
.pc-pcard:hover{transform:translateY(-3px); box-shadow:0 18px 36px -24px rgba(37,35,35,.45); border-color:var(--line-2)}
.pc-pcard-h{display:flex; align-items:center; justify-content:space-between; gap:.5rem}
.pc-pcard-h b{font-size:.92rem; font-weight:600; letter-spacing:-.01em}
.pc-pcard-h span{font-family:var(--pc-mono); font-size:.58rem; letter-spacing:.06em; padding:.15rem .45rem; border-radius:999px; border:1px solid var(--line-2); color:var(--pc-ink-2); white-space:nowrap}
.pc-pcard-h span.plus{border-color:rgba(84,104,255,.6); color:var(--pc-accent); background:var(--pc-soft)}
.pc-pcard small{display:block; margin-top:.2rem; font-family:var(--pc-mono); font-size:.62rem; letter-spacing:.04em; color:var(--ink-3)}
.pc-pcard svg{display:block; width:100%; height:46px; margin:.6rem 0 .5rem}
.pc-pcard svg path.l{fill:none; stroke:var(--pc-ink); stroke-width:1.4}
.pc-pcard svg path.a{fill:rgba(84,104,255,.16); stroke:none}
.pc-pcard-f{display:flex; align-items:center; justify-content:space-between}
.pc-pcard-f .n{font-size:1.15rem; font-weight:600; letter-spacing:-.02em}
.pc-pcard-f .n em{font-style:normal; font-family:var(--pc-mono); font-size:.62rem; color:var(--pc-accent); margin-left:.35rem; letter-spacing:.02em}
.pc-seats{display:flex}
.pc-seats i{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; margin-left:-6px; border:2px solid #FCFBF9; background:var(--pc-ink); color:#fff; font-style:normal; font-family:var(--pc-mono); font-size:.55rem}
.pc-seats i:nth-child(2){background:#6B6560}
.pc-seats i:nth-child(3){background:var(--pc-glow)}
.pc-seats i.more{background:var(--pc-cream-2); color:var(--pc-ink-2)}
.pc-padd{border:1.5px dashed var(--line-2); border-radius:12px; background:transparent; display:grid; place-items:center; align-content:center; gap:.4rem; min-height:150px; cursor:pointer; color:var(--pc-ink-2); font-size:.9rem; transition:border-color .2s, color .2s, background .2s}
.pc-padd:hover{border-color:var(--pc-glow); color:var(--pc-ink); background:rgba(84,104,255,.06)}
.pc-padd b{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--pc-ink); color:#fff; font-size:1.2rem; font-weight:400}
.pc-padd[disabled]{cursor:default; opacity:.7}
.pc-ent-feats h3{margin:.6rem 0 .5rem; font-size:1.1rem; color:var(--pc-ink); letter-spacing:-.01em}
.pc-ent-feats p{font-size:.92rem; line-height:1.55; color:var(--ink-2)}

/* ---------- Plans ---------- */
.pc-plans{scroll-margin-top:calc(var(--nav-h) + 60px); padding-top:0}
.pc-plans-head{margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.pc-plan-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem}
.pc-plan{position:relative; display:flex; flex-direction:column; padding:clamp(1.4rem,2.4vw,2rem); border-radius:16px; background:#fff; border:1px solid var(--line)}
.pc-plan h3{display:flex; align-items:baseline; font-family:var(--pc-brand); font-weight:700; letter-spacing:-.01em; font-size:1.6rem; color:var(--pc-ink)}
.pc-plan-for{margin-top:.5rem; font-family:var(--pc-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--pc-accent)}
.pc-plan-desc{margin-top:.9rem; color:var(--ink-2); line-height:1.5}
.pc-plan ul{list-style:none; margin:1.3rem 0 1.6rem; padding:1.1rem 0 0; border-top:1px solid var(--line); display:grid; gap:.65rem; flex:1}
.pc-plan li{position:relative; padding-left:1.6rem; font-size:.93rem; line-height:1.45}
.pc-plan li::before{content:""; position:absolute; left:0; top:.15em; width:16px; height:16px; border-radius:50%; background:var(--pc-soft)}
.pc-plan li::after{content:""; position:absolute; left:5.5px; top:calc(.15em + 3.5px); width:4px; height:7px; border:solid var(--pc-accent); border-width:0 1.6px 1.6px 0; transform:rotate(45deg)}
.pc-plan-dark{background:var(--pc-ink); border-color:var(--pc-ink); color:var(--pc-cream);
  background-image:radial-gradient(80% 60% at 100% 0%, rgba(84,104,255,.35), transparent 70%)}
.pc-plan-dark h3{color:#fff}
.pc-plan-dark .pc-plan-for{color:#A9B3FF}
.pc-plan-dark .pc-plan-desc{color:rgba(244,241,237,.72)}
.pc-plan-dark ul{border-color:rgba(244,241,237,.14)}
.pc-plan-dark li::before{background:rgba(84,104,255,.3)}
.pc-plan-dark li::after{border-color:#fff}
.pc-plan-flag{position:absolute; top:1.2rem; right:1.2rem; font-family:var(--pc-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; padding:.2rem .5rem; border-radius:999px; border:1px solid rgba(84,104,255,.7); color:#D3D9FF}
.pc-btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.75rem 1.1rem; border-radius:8px; font-size:.92rem; font-weight:500; transition:all .2s}
.pc-btn-ink{background:var(--pc-ink); color:#fff}
.pc-btn-ink:hover{background:#000}
.pc-btn-light{background:var(--pc-cream); color:var(--pc-ink)}
.pc-btn-light:hover{background:#fff}
.pc-btn-line-ink{border:1px solid var(--pc-ink); color:var(--pc-ink)}
.pc-btn-line-ink:hover{background:var(--pc-ink); color:#fff}
.pc #demo{scroll-margin-top:calc(var(--nav-h) + 60px)}
.pc .field select{width:100%; padding:.8rem .9rem; border:1px solid var(--line-2); border-radius:8px; background:var(--bg-2); font:inherit; color:var(--ink); appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size:5px 5px; background-repeat:no-repeat}

@media (max-width: 960px){
  .pc-scrolly{grid-template-columns:minmax(0,1fr)}
  .pc-stick{position:relative; top:0; height:auto; max-height:none}
  .pc-stack{max-width:520px; margin:0 auto}
  .pc-step{min-height:0; opacity:1; padding:1.6rem 0}
  .pc-plus-feats,.pc-ent-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pc-port-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pc-plan-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .pc-port-bar{flex-wrap:wrap} .pc-port-count{margin-left:0}
  .pc-hero{height:min(calc(100svh - var(--nav-h) - 14px), 620px)}
  .pc-flow-legend{grid-template-columns:1fr}
  .pc-plus-feats,.pc-ent-feats{grid-template-columns:1fr}
  .pc-port-grid{grid-template-columns:1fr}
  .pc-connect{grid-template-columns:1fr}
}

/* How it works, step 01: the owned channels around the plate, and the data still arriving from them */
.pcs-src text{font-family:var(--pc-mono); font-size:10.5px; letter-spacing:.1em; fill:var(--ink-3)}
.pcs-src circle{fill:var(--pc-glow); fill-opacity:.7}
.pcs-pks circle{fill:var(--pc-glow)}

/* How it works, step 03: the dashboard (the data, the read, and the audience in one view) */
.pc-mock.pc-dmini{max-width:540px; padding:0; overflow:hidden}
.pc-dmini-bar{display:flex; align-items:baseline; gap:.45rem; padding:.7rem 1rem; border-bottom:1px solid var(--line); white-space:nowrap}
.pc-dmini-bar .pc-lock{flex:none; font-family:var(--sans); font-size:.92rem; color:var(--pc-ink)}
.pc-dmini-bar i{font-style:normal; color:var(--pc-glow)}
.pc-dmini-bar em{flex:0 1 auto; min-width:0; font-style:normal; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--pc-ink-2); overflow:hidden; text-overflow:ellipsis}
.pc-dmini-bar .pc-tag{flex:none; margin-left:auto; align-self:center; text-transform:uppercase}
.pc-dmini-body{display:grid; gap:.6rem; padding:.85rem 1rem 1rem}
.pc-dmini-kpis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem}
.pc-dmini-kpis > div{min-width:0; padding:.6rem .7rem; border:1px solid var(--line); border-radius:8px; background:#FCFBF9}
.pc-dmini-kpis small{display:block; font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap}
.pc-dmini-kpis b{display:block; margin:.28rem 0 .12rem; font-family:var(--sans); font-size:1.28rem; font-weight:600; letter-spacing:-.02em; color:var(--pc-ink); white-space:nowrap}
.pc-dmini-kpis span{display:block; font-size:.58rem; color:var(--pc-accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pc-dmini-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.5rem}
.pc-dmini-card{min-width:0; padding:.65rem .75rem; border:1px solid var(--line); border-radius:8px}
.pc-dmini-h{margin:0 0 .5rem; font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.pc-dmini-row{display:grid; grid-template-columns:4.4rem minmax(0,1fr) 1.9rem; gap:.45rem; align-items:center; font-size:.64rem}
.pc-dmini-row + .pc-dmini-row{margin-top:.34rem}
.pc-dmini-row .tr{display:block; height:6px; border-radius:99px; background:var(--pc-cream-2); overflow:hidden}
.pc-dmini-row .fl{display:block; height:100%; width:0; border-radius:99px; background:var(--pc-ink); transition:width 1s cubic-bezier(.22,.8,.2,1)}
.pc-dmini-row:first-child .fl{background:var(--pc-glow)}
.pc-dmini-row .v{text-align:right; color:var(--pc-ink-2)}
.pc-dmini-ai{background:var(--pc-soft); border-color:transparent}
.pc-dmini-txt{margin:0; font-size:.68rem; line-height:1.5; min-height:6em}
.pc-dmini-rec{margin-top:.55rem; padding-top:.5rem; border-top:1px solid rgba(84,104,255,.28); font-size:.66rem; line-height:1.45; min-height:4.2em}
.pc-dmini-rec b{display:block; margin-bottom:.15rem; font-weight:500; font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--pc-accent)}
.pc-dmini-aud{padding:.65rem .75rem; border:1px solid var(--line); border-radius:8px}
.pc-dmini-seg{display:flex; gap:2px; height:10px; border-radius:99px; overflow:hidden; background:var(--pc-cream-2)}
.pc-dmini-seg i{display:block; height:100%; width:0; background:var(--c); transition:width 1s cubic-bezier(.22,.8,.2,1)}
.pc-dmini-leg{display:flex; flex-wrap:wrap; gap:.3rem .85rem; margin-top:.55rem; font-size:.6rem; color:var(--pc-ink-2)}
.pc-dmini-leg span{display:inline-flex; align-items:center; gap:.32rem; white-space:nowrap}
.pc-dmini-leg span::before{content:""; width:7px; height:7px; border-radius:2px; background:var(--c)}
.pc-dmini-leg b{font-weight:500; color:var(--pc-ink)}
.pc-steps,.pc-step,.pc-mock{min-width:0}
@media (max-width: 640px){
  .pc-dmini-grid{grid-template-columns:minmax(0,1fr)}
  .pc-dmini-bar .pc-tag{display:none}
  .pc-dmini-kpis{gap:.4rem}
  .pc-dmini-kpis > div{padding:.55rem .55rem}
  .pc-dmini-kpis small{white-space:normal; letter-spacing:.06em; line-height:1.3}
  .pc-dmini-kpis span{white-space:normal; line-height:1.35}
  .pc-dmini-kpis b{font-size:1.05rem}
  .pc-dmini-txt,.pc-dmini-rec{min-height:0}
}

/* ParaCompass+: one screen. The copy and the four features on the left, the live field on the right */
.pc-plus{padding:clamp(2.6rem,4.6vw,3.8rem) 0}
.pc-plus-in{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,4vw,4.2rem); align-items:center}
.pc-plus-in .pc-plus-head{max-width:none}
.pc-plus-in .pc-plus-title{margin:1rem 0 .9rem; font-size:clamp(2rem,3.5vw,3.3rem)}
.pc-plus-in .pc-plus-lead{font-size:clamp(.98rem,1.12vw,1.1rem); line-height:1.55; max-width:54ch}
.pc-plus-in .pc-plus-feats{grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem 1.8rem; margin-top:clamp(1.4rem,2.4vw,2rem); padding-top:clamp(1.2rem,2vw,1.6rem)}
.pc-plus-in .pc-plus-feats h3{margin:.4rem 0 .3rem; font-size:1rem}
.pc-plus-in .pc-plus-feats p{font-size:.85rem; line-height:1.5}
.pc-plus-in .pc-field-wrap{margin-top:0; min-width:0}
.pc-plus-in .pc-modes button{padding:.5rem .75rem; font-size:.78rem}
.pc-plus-in .pc-field{height:clamp(340px, calc(100svh - var(--nav-h) - 290px), 540px)}
/* Short desktop screens (laptops at 800 or 768 tall): tighten the copy column so the whole section still fits under the nav and the sub nav */
@media (min-width: 961px) and (max-height: 880px){
  .pc-plus{padding:clamp(1.6rem, 3.6vh, 2.4rem) 0}
  .pc-plus-in .pc-plus-eyebrow{font-size:.68rem}
  .pc-plus-in .pc-plus-pill{font-size:.88rem; padding:.24rem .62rem .24rem .5rem}
  .pc-plus-in .pc-plus-title{margin:.75rem 0 .65rem; font-size:clamp(1.9rem, 2.85vw, 2.7rem)}
  .pc-plus-in .pc-plus-lead{font-size:.94rem; line-height:1.5}
  .pc-plus-in .pc-plus-feats{gap:.85rem 1.6rem; margin-top:1.1rem; padding-top:1rem}
  .pc-plus-in .pc-plus-feats h3{margin:.25rem 0 .2rem; font-size:.94rem}
  .pc-plus-in .pc-plus-feats p{font-size:.8rem; line-height:1.45}
  .pc-plus-in .pc-modes{margin-bottom:.6rem}
  .pc-plus-in .pc-field{height:clamp(300px, calc(100svh - var(--nav-h) - 250px), 520px)}
  .pc-plus-in .pc-field-cap{margin-top:.6rem}
}
@media (min-width: 961px) and (max-width: 1180px){
  .pc-plus-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem}
  .pc-plus-in .pc-modes{gap:.3rem}
  .pc-plus-in .pc-modes button{padding:.45rem .6rem; font-size:.74rem}
  .pc-plus-in .pc-field{height:clamp(300px, calc(100svh - var(--nav-h) - 300px), 500px)}
}
/* the title is a three-line question now: screens 881 to 960 tall get a half step so it still fits */
@media (min-width: 961px) and (min-height: 881px) and (max-height: 960px){
  .pc-plus{padding:clamp(2rem, 4.4vh, 3.2rem) 0}
  .pc-plus-in .pc-plus-title{font-size:clamp(2rem, min(3.5vw, 5vh), 3.3rem)}
}
/* narrow laptops (961 to 1180 wide) on short screens: the copy column is narrow, so the question and the features take a step down */
@media (min-width: 961px) and (max-width: 1180px) and (max-height: 880px){
  .pc-plus{padding:clamp(1.1rem, 2.6vh, 1.8rem) 0}
  .pc-plus-in .pc-plus-title{margin:.6rem 0 .5rem; font-size:clamp(1.7rem, 2.6vw, 2.2rem)}
  .pc-plus-in .pc-plus-feats{gap:.7rem 1.4rem; margin-top:.9rem; padding-top:.8rem}
}
@media (min-width: 961px) and (max-height: 740px){
  .pc-plus-in .pc-plus-title{font-size:clamp(1.8rem, 2.6vw, 2.4rem)}
  .pc-plus-in .pc-plus-lead{font-size:.9rem}
  .pc-plus-in .pc-plus-feats p{font-size:.78rem; line-height:1.42}
  .pc-plus-in .pc-field{height:clamp(280px, calc(100svh - var(--nav-h) - 230px), 480px)}
}
@media (max-width: 960px){
  .pc-plus-in{grid-template-columns:minmax(0,1fr)}
  .pc-plus-in .pc-field{height:clamp(320px, 72vw, 480px)}
}
@media (max-width: 640px){
  .pc-plus-in .pc-plus-feats{grid-template-columns:minmax(0,1fr)}
}

/* typed lines: the hidden full copy holds the height, the typing sits on top */
.pc-tw{display:grid}
.pc-tw > .tg, .pc-tw > .tl{grid-area:1/1; min-width:0}
.pc-tw > .tg{visibility:hidden}
.pc-dmini-rec > span{display:block}

/* ---------- Imperium analysis: the expert read is part of the product (the same card as the home page's note on services) ---------- */
.pc-expert{scroll-margin-top:calc(var(--nav-h) + 60px); padding-bottom:0}
.pc-expert-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem; padding:1rem; border-radius:var(--r-lg); background:var(--card)}
.pc-expert-copy{display:flex; flex-direction:column; align-items:flex-start; gap:1rem; padding:clamp(.8rem,2.4vw,2.1rem); align-self:center}
.pc-expert-copy .eyebrow{margin:0}
.pc-expert-copy .h2{margin:0; font-size:clamp(1.75rem, 2.7vw, 2.45rem); line-height:1.08; letter-spacing:-.022em}
.pc-expert-copy .h2 .l{display:block; max-width:15em; text-wrap:balance}
.pc-expert-lead{margin:0; font-family:var(--serif); font-size:1.06rem; line-height:1.56; color:var(--ink); max-width:54ch; text-wrap:pretty}
/* how the analysis is made: three short steps, a row each */
.pc-expert-steps{list-style:none; margin:.2rem 0 0; padding:0; display:grid; width:100%; max-width:54ch}
.pc-expert-steps li{display:grid; grid-template-columns:2.1rem 7rem minmax(0,1fr); align-items:baseline; gap:.15rem .5rem; padding:.62rem 0; border-top:1px solid var(--line)}
.pc-expert-steps li:last-child{border-bottom:1px solid var(--line)}
.pc-expert-steps .n{font-family:var(--pc-mono); font-size:.68rem; font-weight:500; letter-spacing:.08em; color:var(--pc-accent)}
.pc-expert-steps b{font-size:.98rem; font-weight:600; letter-spacing:-.01em; color:var(--pc-ink)}
.pc-expert-steps .d{font-size:.95rem; line-height:1.42; color:var(--pc-ink-2); text-wrap:pretty}
@media (max-width: 560px){ .pc-expert-steps li{grid-template-columns:2rem minmax(0,1fr)} .pc-expert-steps .d{grid-column:2} }
.pc-expert-inc{display:inline-flex; align-items:center; gap:.6em; margin:.2rem 0 0; font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.pc-expert-inc svg{width:12px; height:12px; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:square}
.pc-expert-card{margin:0; display:flex; flex-direction:column; justify-content:center; padding:clamp(1.4rem,3vw,2.5rem) clamp(1.3rem,3vw,2.6rem); border-radius:var(--r-md); background:var(--bg-2)}
.pc-ex-row{position:relative; padding-left:1.7rem}
.pc-ex-row::before{content:""; position:absolute; left:0; top:.28rem; width:9px; height:9px; border-radius:50%; box-sizing:border-box; border:1.5px solid var(--pc-ink-3); background:var(--bg-2)}
.pc-ex-us::before{border-color:var(--accent); background:var(--accent)}
.pc-ex-ai{padding-bottom:1.8rem}
.pc-ex-ai::after{content:""; position:absolute; left:4px; top:1.05rem; bottom:.1rem; width:1px; background:var(--line)}  /* the thread from the data to the read */
.pc-ex-k{margin:0 0 .55rem; font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--pc-ink-3)}
.pc-ex-us .pc-ex-k{color:var(--accent-ink)}
.pc-ex-spark{display:block; width:100%; height:40px; margin:0 0 .7rem; overflow:visible}
.pc-ex-spark path{fill:none; stroke-width:1.5; vector-effect:non-scaling-stroke; stroke-linejoin:round}
.pc-ex-spark .base{stroke:var(--pc-ink-3); opacity:.6}
.pc-ex-spark .spike{stroke:var(--pc-ink)}
.pc-ex-spark circle{fill:var(--pc-ink)}
.pc-ex-ai .pc-ex-t{margin:0; font-size:1rem; line-height:1.45; color:var(--pc-ink-2); max-width:44ch}
.pc-ex-us .pc-ex-t{margin:0; font-family:var(--serif); font-size:clamp(1.12rem,1.45vw,1.28rem); line-height:1.5; color:var(--ink); max-width:40ch; text-wrap:pretty}
.pc-ex-call{display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .7rem; margin:1.1rem 0 0; padding:.75rem .9rem; border-radius:10px; background:var(--accent-soft); font-size:.95rem; line-height:1.4; color:var(--ink)}
.pc-ex-call b{font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink)}
.pc-ex-cap{margin:1.4rem 0 0; padding-left:1.7rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--pc-ink-3)}
@media (max-width: 900px){ .pc-expert-in{grid-template-columns:1fr} .pc-expert-copy{padding:1rem .6rem .4rem} }
/* the panel beside the copy: the ParaCompass lockup, built by Imperium (Oct 19: the worked example came out, it read as a promise) */
.pc-expert-logo{container-type:inline-size; min-width:0; align-items:center; gap:clamp(1.6rem,2.8vw,2.2rem); min-height:clamp(300px, 32vw, 460px); text-align:center}
.pc-expert-logo .pc-lock{font-size:min(3.7rem, 10.5cqi); line-height:1; color:var(--pc-ink)}   /* the lockup is about 7.9em wide: it fits the card at any width */
.pc-expert-by{display:flex; align-items:center; gap:.8rem; font-family:var(--pc-mono); font-size:.7rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--pc-ink-3)}
.pc-expert-by .imp-logo{height:26px; color:var(--ink)}
@media (max-width: 900px){ .pc-expert-logo{min-height:260px} }

/* =====================================================================
   COMPANY: Integrated Public Affairs, presented as a product.
   One pillar (the Imperium symbol) opened layer by layer as you scroll.
   Same stage as the ParaCompass page: cream hero, isometric zigzags, blue glow, sticky subnav.
   ===================================================================== */
.cp{--pc-cream:#F4F1ED; --pc-cream-2:#ECE8E1; --pc-cream-3:#E4DFD7; --pc-ink:#252323; --pc-ink-2:#4B4744; --pc-glow:var(--accent); --pc-accent:var(--accent-ink); --pc-mono:var(--mono); --pc-brand:var(--brand)}
.cp .pc-mark{color:var(--pc-ink)}


/* ---------- hero ---------- */
.cp-hero{position:relative; margin:0 clamp(6px,.9vw,14px); border-radius:18px; overflow:hidden;
  height:clamp(600px, calc(100svh - var(--nav-h) - 14px), 920px);
  background:radial-gradient(110% 80% at 50% 30%, #F6F4F0 0%, var(--pc-cream-2) 55%, var(--pc-cream-3) 100%)}
.cp-hero-svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.cp-hero-copy{position:absolute; left:0; right:0; top:62%; text-align:center; pointer-events:none; padding:0 var(--gutter); will-change:transform,opacity}
.cp-hero-copy .eyebrow{margin:0 0 .85rem}
.cp-title{margin:0; font-size:clamp(2.5rem, 6vw, 5.125rem); line-height:1; letter-spacing:-.032em; font-weight:600; color:var(--pc-ink); text-wrap:balance}
.cp-sub{margin:clamp(.8rem,1.5vw,1.2rem) auto 0; max-width:38ch; font-size:clamp(1.05rem, 1.45vw, 1.3rem); line-height:1.35; letter-spacing:-.01em; color:var(--ink-2); text-wrap:balance}


/* ---------- the dissection ---------- */
.cp-dissect{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(1.5rem,4vw,4.5rem); padding-top:clamp(.5rem,2vw,1.5rem)}
.cp-stick{position:sticky; top:calc(var(--nav-h) + 62px); align-self:start; height:calc(100svh - var(--nav-h) - 78px); max-height:900px}
.cp-stick > svg{position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible}
.cp-labels{position:absolute; inset:0; pointer-events:none}
.cp-layers{min-width:0}
.cp-layer{min-height:calc(100svh - var(--nav-h) - 40px); display:flex; align-items:center; padding:clamp(2.5rem,7vh,5rem) 0}
.cp-layer-in{width:100%; max-width:540px}
.cp-layer .eyebrow{margin:0}
.cp-layer .h2{margin:.75rem 0 1.1rem; letter-spacing:-.025em; text-wrap:balance}
.cp-lead{margin:0 0 1.8rem}
.cp-body{font-family:var(--serif); font-size:1.12rem; line-height:1.55; color:var(--ink); margin:0 0 1.6rem; max-width:50ch}
.cp-body .pc-lock{font-size:.98em; vertical-align:baseline}
.cp-body + .cp-body{margin-top:-.5rem}
.cp-layer-h{display:flex; align-items:center; gap:.65rem; margin:0; font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.cp-layer-h > span:first-child{color:var(--accent-ink)}

/* rows: the four parts, and the three ParaCompass plates */
.cp-rows{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.cp-row{display:grid; grid-template-columns:2rem minmax(0,1fr) auto; align-items:center; gap:.9rem; padding:1rem .25rem; border-bottom:1px solid var(--line);
  transition:background .2s var(--ease), padding .32s var(--ease)}
.cp-rows-pc .cp-row{grid-template-columns:2rem minmax(0,1fr) auto}
.cp-row:hover,.cp-row.hot,.cp-row:focus-visible{background:color-mix(in srgb, var(--accent) 8%, transparent); padding-left:.7rem; padding-right:.7rem}
.cp-row-n{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--accent-ink)}
.cp-row-t{display:flex; flex-direction:column; gap:.18rem; min-width:0}
.cp-row-t b{font-weight:600; font-size:1.06rem; letter-spacing:-.01em}
.cp-row-t small{font-size:.86rem; color:var(--ink-2); line-height:1.35}
.cp-row .arrow{color:var(--ink-3)}
.cp-row:hover .arrow,.cp-row.hot .arrow{transform:translateX(3px); color:var(--ink)}

/* approach: the three principles */
.cp-principles{margin:0 0 1.6rem; border-top:1px solid var(--line)}
.cp-principles > div{display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:1rem; padding:.95rem .25rem; border-bottom:1px solid var(--line); transition:background .2s var(--ease), padding .32s var(--ease)}
.cp-principles > div:hover,.cp-principles > div.hot{background:color-mix(in srgb, var(--accent) 8%, transparent); padding-left:.7rem}
.cp-principles dt{font-weight:600; letter-spacing:-.01em}
.cp-principles dd{margin:0; color:var(--ink-2); font-size:.95rem; line-height:1.5}
.cp-link{margin-top:.2rem}

/* capabilities: accordion, one open at a time */
.cp-caps{border-top:1px solid var(--line)}
.cp-cap{border-bottom:1px solid var(--line); transition:background .2s var(--ease)}
.cp-cap.hot:not(.open){background:color-mix(in srgb, var(--accent) 6%, transparent)}
.cp-cap-h{width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.9rem; padding:1rem .25rem; background:none; border:0; font:inherit; color:inherit; text-align:left; cursor:pointer}
.cp-cap-t{display:flex; flex-direction:column; gap:.18rem}
.cp-cap-t b{font-weight:600; font-size:1.06rem; letter-spacing:-.01em}
.cp-cap-t small{font-size:.86rem; color:var(--ink-2)}
.cp-pm{position:relative; width:13px; height:13px}
.cp-pm::before,.cp-pm::after{content:""; position:absolute; left:0; right:0; top:6px; height:1.2px; background:var(--ink); transition:transform .32s var(--ease)}
.cp-pm::after{transform:rotate(90deg)}
.cp-cap.open .cp-pm::after{transform:rotate(0)}
.cp-cap-p{display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s var(--ease)}
.cp-cap.open .cp-cap-p{grid-template-rows:1fr}
.cp-cap-p > div{overflow:hidden; min-height:0; padding-left:calc(15px + .9rem)}
.cp-cap-p p{margin:0 0 .9rem; font-family:var(--serif); font-size:1rem; line-height:1.5; color:var(--ink)}
.cp-cap-p ul{margin:0; padding:0 0 1.15rem; list-style:none; display:flex; flex-wrap:wrap; gap:.4rem}
.cp-cap-p li{font-size:.78rem; line-height:1.2; padding:.36rem .62rem; border:1px solid var(--line-2); border-radius:99px; color:var(--ink-2); background:color-mix(in srgb, var(--bg-2) 60%, transparent)}

/* team */
.cp-people{margin:0 0 .4rem}
.cp-people-h{margin:0 0 .7rem; font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.cp-founders{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; margin-bottom:1.4rem}
.cp-core{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem}
.cp-person{display:flex; flex-direction:column; gap:.55rem; min-width:0}
.cp-ph{display:block; width:100%; padding:0; border:0; background:var(--card); border-radius:10px; overflow:hidden; cursor:pointer; aspect-ratio:4 / 3.4; outline-offset:3px}
.cp-person.sm .cp-ph{aspect-ratio:1}
.cp-ph img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease)}
.cp-person:hover .cp-ph img,.cp-person.hot .cp-ph img{transform:scale(1.035)}
.cp-person .cp-ph{box-shadow:0 0 0 0 var(--accent); transition:box-shadow .2s var(--ease)}
.cp-person.hot .cp-ph{box-shadow:0 0 0 2px var(--accent)}
.cp-person .bio-name{font-weight:600; font-size:.98rem; letter-spacing:-.01em}
.cp-person.sm .bio-name{font-size:.84rem; line-height:1.25}
.cp-person small{display:block; margin-top:.15rem; font-size:.78rem; color:var(--ink-2); line-height:1.3}
.cp-person.sm small{font-size:.7rem}

/* ---------- labels over the scene ---------- */
.cp-lab{position:absolute; left:0; top:0; width:0; height:0; color:var(--ink); will-change:transform,opacity}
.cp-lab::after{content:""; position:absolute; left:-2.5px; top:-2.5px; width:5px; height:5px; background:var(--ink)}
.cp-lab .ln{position:absolute; left:0; top:0; width:var(--w,40px); height:1px; background:currentColor; opacity:.35}
.cp-lab .tx{position:absolute; left:calc(var(--w,40px) + 10px); top:0; transform:translateY(-50%); white-space:nowrap; display:flex; flex-direction:column; gap:.2rem}
.cp-lab.l .ln{left:auto; right:0}
.cp-lab.l .tx{left:auto; right:calc(var(--w,40px) + 10px); align-items:flex-end; text-align:right; white-space:normal; width:max-content; max-width:8.6rem}
.cp-lab.l .t1{display:block; text-align:right; line-height:1.2}
.cp-lab.l .t1 em{margin-right:.45rem}
.cp-nolabels .cp-labels{display:none}
.cp-lab .t1{display:flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:600; letter-spacing:-.005em; line-height:1.1}
.cp-lab .t1 em{font-style:normal; font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.06em; color:var(--accent-ink)}
.cp-lab .t2{font-size:.76rem; color:var(--ink-2)}
.cp-tag{position:absolute; left:0; top:0; padding:.34rem .6rem; border-radius:6px; background:var(--ink); color:var(--bg); font-size:.76rem; font-weight:500; white-space:nowrap; transition:opacity .2s}

/* ---------- the pillar (shared by hero, scene, and CTA) ---------- */
.cps{--f-top:#FBFAF7; --f-l:#E7E1D7; --f-r:#D3CCC0; --f-c:#E9E4DB; --f-ln:#252323; --f-band:#252323;
  --h-top:#EDF0FF; --h-l:#D6DCFF; --h-r:#BAC4FF; --h-c:#DCE1FF; --h-ln:#3F52E6}
.cps.dark{--f-top:#3B3935; --f-l:#2C2A27; --f-r:#201F1D; --f-c:#2D2B28; --f-ln:#F2EFE8; --f-band:#F2EFE8;
  --h-top:#363F85; --h-l:#2F3465; --h-r:#292D4E; --h-c:#2F3465; --h-ln:#D3D9FF}
.cps path,.cps ellipse,.cps circle,.cps line{vector-effect:non-scaling-stroke}
.cps .ft,.cps .fl,.cps .fr,.cps .fc,.cps .head{stroke:var(--f-ln); stroke-width:1; stroke-linejoin:round; transition:fill .32s var(--ease), stroke .32s var(--ease)}
.cps .ft,.cps .head{fill:var(--f-top)}
.cps .fl{fill:var(--f-l); stroke-opacity:.62}
.cps .fr{fill:var(--f-r); stroke-opacity:.62}
.cps .fc{fill:var(--f-c); stroke-opacity:.62}
.cps.dark .fl,.cps.dark .fr,.cps.dark .fc{stroke-opacity:.42}
.cps.dark .ft{stroke-opacity:.8}
.cps .sh{stroke:none; pointer-events:none}
.cps .flute{stroke:var(--f-ln); stroke-opacity:.13; stroke-width:1}
.cps .seam,.cps .div{stroke:var(--f-ln); stroke-opacity:.62; stroke-width:1}
.cps .bev{fill:none; stroke:#fff; stroke-opacity:.8; stroke-width:1; pointer-events:none}
.cps.dark .bev{stroke-opacity:.12}
.cps .cp-shadow{pointer-events:none}
.cps .num{font-family:var(--mono); font-size:15px; font-weight:500; letter-spacing:.04em; fill:var(--f-ln); fill-opacity:.5; transition:fill .32s var(--ease), fill-opacity .32s}
.cps .hl .ft,.cps .hl .head{fill:var(--h-top); stroke:var(--h-ln)}
.cps .hl .fl{fill:var(--h-l); stroke:var(--h-ln)}
.cps .hl .fr{fill:var(--h-r); stroke:var(--h-ln)}
.cps .hl .fc{fill:var(--h-c); stroke:var(--h-ln)}
.cps .hl .num{fill:var(--h-ln); fill-opacity:1}
.cps .cp-pawn.hl .ft,.cps .cp-pawn.hl .fc,.cps .cp-pawn.hl .head{fill:var(--accent); stroke:var(--blue-700)}
.cps .pop{transition:transform .5s var(--ease)}
.cps .cp-part.hl > .pop{transform:translateY(-8px)}
.cps .cp-wedge.hl > .pop{transform:translate(var(--px),var(--py))}
.cps .cp-plate.hl > .pop{transform:translateY(-12px)}
.cps .cp-clu line{stroke:var(--accent); stroke-width:1; stroke-opacity:.38}
.cps .cp-clu ellipse{fill:var(--accent); stroke:none}
.cps .cp-clu ellipse.d{fill:var(--accent-strong)}
@keyframes cpRing{from{transform:scale(1); opacity:1} to{transform:scale(4); opacity:0}}
/* the narrative the piece holds up: the one signal-coloured object in the closing panel */
#cpScene[data-q="1"] .cp-part, #cpScene[data-q="2"] .cp-slab, #cpScene[data-q="3"] .cp-wedge, #cpScene[data-q="4"] .cp-pawn, #cpScene[data-q="5"] .cp-plate{cursor:pointer}

/* ---------- closing CTA ---------- */
.cp-cta{position:relative; margin:clamp(2rem,5vw,4rem) clamp(6px,.9vw,14px) 0; border-radius:18px; overflow:hidden; color:var(--bg); isolation:isolate; scroll-margin-top:calc(var(--nav-h) + 60px);
  background:radial-gradient(50% 55% at 76% 88%, rgba(84,104,255,.26), transparent 70%), radial-gradient(40% 40% at 4% 0%, rgba(84,104,255,.10), transparent 70%), #191919}
.cp-cta::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.2; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px 180px}
.cp-cta-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); align-items:center; gap:clamp(1rem,4vw,4rem); min-height:min(88svh,860px); padding-block:clamp(3.5rem,7vw,6rem)}
.cp-cta .eyebrow{color:rgba(242,239,232,.62)}
.cp-cta-title{margin:.9rem 0 0; font-size:clamp(2.8rem, 6.4vw, 5.125rem); line-height:1; letter-spacing:-.032em; font-weight:600; color:#F2EFE8}
/* the italic accent (Brand Guidelines 3.0, p.36): Newsreader Italic 400, same size, baseline and colour as the title, tracking -1% */
.accent-serif,.accent-word{font-family:var(--italic); font-style:italic; font-weight:400; letter-spacing:-.01em; font-variation-settings:"opsz" 72; color:inherit}
/* the hero accent is a link to the founders' letter: underlined from the start, and on hover the line wipes out and draws back in */
a.hero-accent{position:relative; color:inherit; text-decoration:none}
a.hero-accent::after{content:""; position:absolute; left:.02em; right:.1em; bottom:.02em; height:max(2px,.042em); background:currentColor; transform-origin:0 50%}
a.hero-accent:hover::after,a.hero-accent:focus-visible::after{animation:ulRedraw .95s var(--ease-io)}
@keyframes ulRedraw{0%{transform:scaleX(1); transform-origin:100% 50%} 42%{transform:scaleX(0); transform-origin:100% 50%} 58%{transform:scaleX(0); transform-origin:0 50%} 100%{transform:scaleX(1); transform-origin:0 50%}}

/* "Integrated Public Affairs" is the product name: in a title it always holds one line.
   Home hero: two lines, "Next generation," then the name; the type scales down on phones so the name fits.
   (The name measures 10.23em with the Newsreader accent, 10.85em set in Schibsted 600.) */
#page-home .hero-title{font-size:min(var(--fs-d1), calc((100vw - 2 * var(--gutter)) / 10.6))}
#page-home .hero-line{white-space:nowrap}
#page-home .hero-grid{grid-template-columns:minmax(0,1fr); gap:1.6rem 4rem}
@media (min-width: 1200px){ #page-home .hero-grid{grid-template-columns:max-content minmax(0,1fr)} }
/* first screen: the headline and the Lincoln panel share it evenly. The panel's height is set in script so its bottom edge
   runs just past the fold (the cue to scroll); on short screens the type steps down with the height, not just the width. */
@media (min-width: 861px){
  #page-home .hero{padding-top:clamp(2rem, 6.4vh, 4rem); padding-bottom:clamp(1.5rem, 4.2vh, 2.6rem)}
  #page-home .hero-title{font-size:min(var(--fs-d1), calc((100vw - 2 * var(--gutter)) / 10.6), 10.6vh)}
  #page-home .world-panel{height:clamp(380px, calc(100vh - 21rem), 860px)}
  #page-home .world-copy h2{font-size:clamp(2.3rem, min(5.6vw, 8.8vh), 5.125rem)}
  #page-home .world-copy p{font-size:clamp(1.1rem, min(1.7vw, 2.7vh), 1.5rem)}
  /* the photo is laid out once at the full-bleed size and centred, so the panel growing only opens the window onto it */
  #page-home .world-panel{--pw:100vw; --ph:calc(100vh - var(--nav-h))}
  #page-home .world-panel.photo-mode .hero-photo{inset:auto; left:50%; top:50%; width:var(--pw); height:var(--ph); max-width:none;
    margin:calc(var(--ph) / -2) 0 0 calc(var(--pw) / -2); will-change:transform}
  #page-home .world-copy{will-change:transform}
}
/* phones: the panel is a card there, so the logo band needs air above it */
/* press: each outlet rises in once its logo is ready (script staggers them); hover still lifts it to full strength */
.press-grid.js .press:not(.on){opacity:0}
.press-grid.js .press.on{animation:pressIn .9s var(--ease) backwards}
@keyframes pressIn{from{opacity:0; transform:translateY(16px)} to{opacity:.8; transform:none}}
.cp-title{white-space:nowrap; font-size:min(clamp(2.5rem, 6vw, 5.125rem), calc((100vw - 2 * clamp(6px,.9vw,14px) - 2 * var(--gutter)) / 11.1))}
.cp-nw{white-space:nowrap}
.cp-layer .h2.cp-ov-h{font-size:min(var(--fs-h2), calc((100vw - 2 * var(--gutter)) / 11.6))}
.cp-cta-sub{margin:1.3rem 0 0; max-width:32ch; font-size:clamp(1.05rem,1.45vw,1.3rem); line-height:1.4; color:rgba(242,239,232,.72); text-wrap:balance}
.cp-cta .hero-actions{margin-top:2.1rem}
.cp-btn-ghost{border:1px solid rgba(242,239,232,.3); color:#F2EFE8; background:transparent}
.cp-btn-ghost:hover{background:rgba(242,239,232,.08)}
.cp-cta-art{min-width:0}
.cp-join .cp-cta-in{min-height:min(74svh,720px)}
.cps .ghost .fc,.cps .ghost .ft,.cps .ghost .head{fill:rgba(84,104,255,.14); stroke:var(--blue-300); stroke-opacity:1; stroke-dasharray:3 3}
.cps .ghost-ring{fill:none; stroke:var(--accent); stroke-width:1.4; transform-box:fill-box; transform-origin:center; animation:cpRing 2.6s var(--ease) infinite}
.cp-cta-art svg{width:100%; height:auto; display:block; overflow:visible; max-height:78svh}

/* ---------- section bar (Company and ParaCompass) ----------
   Sticks under the main nav once you pass the hero. Left: the page's sections, the current one in ink.
   Right: Next, which becomes the page's call to action at the end. Bottom edge: a blue line that fills as you read.
   No second black button under the main nav's Get started. */
.lnav{position:sticky; top:var(--nav-h); z-index:60; margin-top:10px; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.lnav-in{display:flex; align-items:center; gap:1.5rem; height:50px}
.lnav-list{display:flex; align-items:center; gap:clamp(1.1rem,2.3vw,2.1rem); margin:0; padding:0; list-style:none; min-width:0}
.lnav-list a{display:inline-flex; align-items:baseline; gap:.45rem; padding:.9rem 0; font-size:.86rem; color:var(--ink-2); white-space:nowrap; transition:color .2s var(--ease)}
.lnav-list a em,.lnav-cur em{font-style:normal; font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.06em; color:var(--ink-3); transition:color .2s var(--ease)}
.lnav-list a:hover{color:var(--ink)}
.lnav-list a.on{color:var(--ink); font-weight:500}
.lnav-list a.on em,.lnav-cur em{color:var(--accent-ink)}
.lnav-next{margin-left:auto; display:inline-flex; align-items:baseline; gap:.55rem; font-size:.86rem; font-weight:500; color:var(--ink); white-space:nowrap}
.lnav-next .k{font-family:var(--mono); font-size:.64rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.lnav-next .t{text-decoration:underline; text-decoration-color:transparent; text-underline-offset:.22em; transition:text-decoration-color .2s var(--ease)}
.lnav-next:hover .t{text-decoration-color:var(--accent)}
.lnav-next:hover .arrow{transform:translateX(3px)}
.lnav-next.end .arrow{color:var(--accent-ink)}
.lnav-bar{position:absolute; left:0; right:0; bottom:-1px; height:2px; overflow:hidden; pointer-events:none}
.lnav-bar i{display:block; height:100%; background:var(--accent); transform-origin:0 50%; transform:scaleX(0); transition:transform .15s linear}
.lnav-cur{display:none}
.lnav-cur-t em{margin-right:.45rem}

/* ---------- breadcrumb chip (team page, ParaCompass hero) ---------- */
.cp-crumb{display:inline-flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);
  padding:.42rem .75rem .42rem .62rem; border:1px solid var(--line-2); border-radius:99px; background:color-mix(in srgb, var(--bg-2) 55%, transparent); transition:background .2s, color .2s, border-color .2s}
.cp-crumb:hover{background:var(--bg-2); color:var(--ink); border-color:var(--ink-3)}

/* the footer waits under the page; let the page run up behind the translucent nav so it never shows through at the top */
.site-main{margin-top:calc(-1 * var(--nav-h)); padding-top:var(--nav-h)}

/* ---------- ParaCompass page: where it sits in the product, and tier names per the brand architecture ---------- */
.pc-crumb{position:absolute; z-index:2; top:clamp(14px,2.2vw,24px); left:clamp(14px,2.2vw,24px); white-space:nowrap}
.pc-tier{display:inline-flex; align-items:center; align-self:center; font-family:var(--pc-mono); font-size:.6rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--pc-accent); padding:.24rem .55rem; border:1px solid color-mix(in srgb, currentColor 55%, transparent); border-radius:99px}
.pc-plan h3{flex-wrap:wrap; gap:.45rem .75rem}
.pc-plan-dark .pc-tier{color:#A9B3FF}

@media (max-width: 900px){
  .cp-dissect{display:block; padding-top:0}
  .cp-stick{top:calc(var(--nav-h) + 50px); height:40svh; max-height:none; z-index:5; margin:0 calc(-1 * var(--gutter)); background:var(--bg); border-bottom:1px solid var(--line); overflow:hidden}
  .cp-labels{display:none}
  .cp-layer{min-height:70svh; padding:2.4rem 0 3rem}
  .cp-layer-in{max-width:none}
  .cp-cta-in{grid-template-columns:1fr; min-height:0}
  .cp-cta-art{max-width:400px; width:100%; margin:0 auto}
}
@media (max-width: 900px){
  /* the section list folds into one button: the section you are in, tap for the rest */
  .lnav-in{gap:1rem}
  .lnav-cur{display:inline-flex; align-items:baseline; gap:.5rem; padding:.9rem 0; border:0; background:none; font:inherit; font-size:.9rem; font-weight:500; color:var(--ink); cursor:pointer; white-space:nowrap}
  .lnav-cur .chev{width:10px; height:10px; align-self:center; transition:transform .2s var(--ease)}
  .lnav.open .lnav-cur .chev{transform:rotate(180deg)}
  .lnav-list{position:absolute; left:0; right:0; top:calc(100% + 1px); display:none; flex-direction:column; align-items:stretch; gap:0; padding:.2rem var(--gutter) .6rem;
    background:var(--bg); border-bottom:1px solid var(--line); box-shadow:0 18px 30px -20px rgba(25,25,25,.35)}
  .lnav.open .lnav-list{display:flex}
  .lnav-list a{display:flex; width:100%; padding:.85rem 0; font-size:.95rem; border-bottom:1px solid var(--line)}
  .lnav-list li:last-child a{border-bottom:0}
  .lnav-next .t{display:none}
  .lnav-next.end .t{display:inline}
}
@media (max-width: 560px){
  .cp-core{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cp-principles > div{grid-template-columns:1fr; gap:.3rem}
  .cp-row{grid-template-columns:1.6rem minmax(0,1fr) auto; gap:.7rem}
  .cp-rows-pc .cp-row{grid-template-columns:1.6rem minmax(0,1fr) auto}
}
@media (prefers-reduced-motion: reduce){
  .cps .cp-net .ring,.cps .ghost-ring{animation:none}
  .cps .pop,.cp-cap-p{transition:none}
}

/* Company page: press wall at the foot of the page, above the closing call to action */
/* home: clients featured in, after the services note */
.home-press{margin-top:clamp(3.5rem,7vw,6rem); padding-top:clamp(3rem,6vw,5rem); border-top:1px solid var(--line)}

/* ---------- home entrance: after the intro, the two titles rise line by line (Settle), then the rest follows ---------- */
[data-rl] .rl{display:block; overflow:hidden; padding:.1em 0 .22em; margin:-.1em 0 -.22em}
[data-rl] .rl-in{display:inline-block; transform:translateY(118%); transition:transform 1.05s var(--ease)}
[data-rl] .rl-fade{opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease), background-color .2s var(--ease)}
[data-rl].go .rl-in{transform:none; transition-delay:calc(var(--i,0) * 130ms)}
[data-rl].go .rl-fade{opacity:1; transform:none; transition-delay:calc(var(--i,0) * 130ms), calc(var(--i,0) * 130ms), 0s}
[data-rl].rl-done .rl{overflow:visible}
[data-rl] a.hero-accent::after{transform:scaleX(0); transition:transform .8s var(--ease) 1.05s}
[data-rl].go a.hero-accent::after{transform:scaleX(1)}
.world-panel[data-rl] .hero-photo{transform:scale(1.08); transition:transform 2.4s var(--ease)}
.world-panel[data-rl].go .hero-photo{transform:none}
.world-panel[data-rl] .world-copy h2 .l2.rl{padding-left:clamp(2rem, 7vw, 5.5rem)}

/* ---------- home: a note on service lists ---------- */
.nod{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:1rem; margin-top:clamp(2.5rem,5vw,4rem); padding:1rem; border-radius:var(--r-lg); background:var(--card)}
.nod-copy{display:flex; flex-direction:column; gap:.9rem; padding:clamp(.8rem,2.2vw,1.8rem)}
.nod-copy .eyebrow{margin:0}
.nod-title{margin:0; font-size:var(--fs-h3); line-height:1.08; letter-spacing:-.022em; font-weight:600; max-width:24ch; text-wrap:balance}
.nod-copy .serif{margin:0; font-size:1.02rem; line-height:1.55; color:var(--ink); max-width:56ch; text-wrap:pretty}
.nod-copy .btn{align-self:flex-start; margin-top:.4rem}
.nod-wall{position:relative; display:block; min-height:360px; border-radius:var(--r-md); background:var(--bg-2); overflow:hidden; isolation:isolate}
.nod-tag{position:absolute; z-index:2; left:1rem; top:1rem; padding:.32rem .6rem; border-radius:99px; background:var(--ink); color:var(--bg); font-family:var(--mono); font-size:.64rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase}
.nod-tag b{font-weight:600; color:var(--blue-300)}
.nod-roll{position:absolute; inset:0; padding:3.2rem 1.4rem 0; -webkit-mask-image:linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image:linear-gradient(transparent, #000 22%, #000 78%, transparent)}
.nod-roll-in{display:block; animation:nodRoll 90s linear infinite}
.nod-roll .r{display:block; padding-bottom:.25em; font-family:var(--sans); font-weight:600; font-size:clamp(1.2rem,1.75vw,1.55rem); line-height:1.22; letter-spacing:-.018em; color:rgba(25,25,25,.22); transition:color .3s var(--ease)}
.nod-roll .r i{font-style:normal; font-weight:400; color:var(--sand)}
.nod-wall:hover .nod-roll .r{color:rgba(25,25,25,.46)}
.nod-wall:hover .nod-roll-in{animation-play-state:paused}
@keyframes nodRoll{from{transform:translateY(0)} to{transform:translateY(-50%)}}

/* ---------- services: the full list ---------- */
.vh{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.sv-hero .sv-title{margin:.7rem 0 0}
.sv-bar{position:sticky; top:var(--nav-h); z-index:60; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sv-bar-in{display:flex; align-items:center; gap:1.2rem; height:50px}
.sv-filters{display:flex; align-items:center; gap:clamp(1rem,2vw,1.8rem); flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; transition:opacity .3s var(--ease)}
.sv-filters::-webkit-scrollbar{display:none}
.sv-filters.off{opacity:.3}
.sv-filters button{position:relative; display:inline-flex; align-items:baseline; gap:.4rem; padding:.9rem 0; border:0; background:none; font:inherit; font-size:.86rem; color:var(--ink-2); white-space:nowrap; cursor:pointer; transition:color .2s var(--ease)}
.sv-filters button em{font-style:normal; font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.06em; color:var(--ink-3)}
.sv-filters button .n{font-family:var(--mono); font-size:.66rem; color:var(--ink-3)}
.sv-filters button:hover,.sv-filters button.peek{color:var(--ink)}
.sv-filters button.on{color:var(--ink); font-weight:500}
.sv-filters button.on em{color:var(--accent-ink)}
.sv-filters button.on::after,.sv-filters button.peek::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent)}
.sv-filters button.peek:not(.on)::after{opacity:.45}
.sv-mode{flex:none; display:inline-flex; padding:3px; border:1px solid var(--line-2); border-radius:99px}
.sv-mode button{padding:.32rem .72rem; border:0; border-radius:99px; background:none; font:inherit; font-size:.78rem; color:var(--ink-2); cursor:pointer; white-space:nowrap; transition:background .2s var(--ease), color .2s var(--ease)}
.sv-mode button.on{background:var(--ink); color:var(--bg)}
.sv-stage{position:relative; padding:clamp(2.6rem,5vw,4.6rem) 0 clamp(1rem,3vw,2rem)}
.sv-wall{margin:0; padding:0; list-style:none; font-family:var(--sans); font-weight:600; font-size:clamp(1.55rem, 2.75vw, 2.65rem); line-height:1.17; letter-spacing:-.026em; transition:opacity .22s var(--ease)}
.sv-wall.out{opacity:0}
.sv-wall li{display:inline}
.sv-wall li::after{content:"/"; margin:0 .3em; font-weight:400; color:var(--sand)}
.sv-wall li:last-child::after{content:none}
/* each service is an inline span (role=button) so long names wrap like the words around them */
.sv-i{cursor:pointer; color:rgb(25 25 25 / var(--a,.22)); transition:color .18s linear, background-size .45s var(--ease); outline:none; border-radius:2px; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
  background:linear-gradient(var(--blue-200), var(--blue-200)) 0 86% / 0% .32em no-repeat; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.sv-i.sel{background-size:100% .4em}
.sv-i:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.sv-tip{position:absolute; z-index:3; left:0; top:0; pointer-events:none; padding:.3rem .55rem; border-radius:6px; background:var(--ink); color:var(--bg); font-family:var(--mono); font-size:.64rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; opacity:0; transform:translateY(calc(-100% - 2px)); transition:opacity .15s var(--ease), transform .15s var(--ease)}
.sv-tip.on{opacity:1; transform:translateY(calc(-100% - 8px))}
.sv-short{padding:clamp(.5rem,2vw,1.5rem) 0 clamp(1rem,3vw,2rem)}
.sv-short ol{margin:0; padding:0; list-style:none; display:grid; gap:.06em; font-size:clamp(2.3rem, 6.2vw, 5.125rem); font-weight:600; line-height:1.04; letter-spacing:-.034em}
.sv-short li{opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.sv-short.in li{opacity:1; transform:none}
.sv-short.in li:nth-child(2){transition-delay:.08s} .sv-short.in li:nth-child(3){transition-delay:.16s} .sv-short.in li:nth-child(4){transition-delay:.24s}
.sv-short a{display:inline-flex; align-items:flex-start; vertical-align:top; gap:.3em; color:var(--ink); text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:.04em; text-underline-offset:.12em; transition:text-decoration-color .2s var(--ease)}
.sv-short a:hover{text-decoration-color:currentColor}
.sv-short a em{font-style:normal; font-family:var(--mono); font-size:max(.2em, .62rem); font-weight:500; letter-spacing:.06em; color:var(--accent-ink); padding-top:.9em}
.sv-short-note{margin-top:1.8rem; font-size:clamp(1.1rem,1.6vw,1.4rem); line-height:1.4; color:var(--ink-2); opacity:0; transition:opacity .6s var(--ease) .35s}
.sv-short.in .sv-short-note{opacity:1}
.sv-short-note .pc-lock{color:var(--ink)}
.sv-end{padding-top:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--line)}
/* the three steps, above the list: what to do, lit as you go */
.sv-how{padding-bottom:clamp(1.6rem,3vw,2.4rem)}
.sv-steps{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.6rem,1.4vw,1rem)}
.sv-steps li{position:relative; display:flex; gap:.9rem; align-items:flex-start; padding:1rem 1.1rem 1.1rem; border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg-2); transition:border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease)}
.sv-step-n{flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line-2); font-family:var(--mono); font-size:.8rem; font-weight:600; color:var(--ink-2); transition:background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease)}
.sv-step-n i{font-style:normal}
.sv-step-t{display:grid; gap:.25rem; min-width:0}
.sv-step-t b{font-size:1rem; font-weight:600; letter-spacing:-.01em; color:var(--ink-2); transition:color .3s var(--ease)}
.sv-step-t small{font-size:.84rem; line-height:1.4; color:var(--ink-3)}
.sv-steps li.on{border-color:var(--accent); background:#fff; box-shadow:0 10px 30px -18px rgba(84,104,255,.55)}
.sv-steps li.on .sv-step-n{background:var(--accent); border-color:var(--accent); color:#fff}
.sv-steps li.on .sv-step-t b{color:var(--ink)}
.sv-steps li.on .sv-step-t small{color:var(--ink-2)}
.sv-steps li.done .sv-step-n{background:var(--ink); border-color:var(--ink); color:transparent; position:relative}
.sv-steps li.done .sv-step-n::after{content:""; position:absolute; width:9px; height:5px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:translateY(-1px) rotate(-45deg)}
.sv-steps li.done .sv-step-t b{color:var(--ink)}
.sv-steps li.nudge{animation:svNudge .5s var(--ease)}
@keyframes svNudge{0%,100%{transform:none} 25%{transform:translateX(-5px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)}}

/* your list, at the foot of the screen */
.sv-tray{position:fixed; z-index:80; left:50%; bottom:clamp(12px,2.5vh,24px); display:flex; align-items:center; gap:.9rem; width:min(860px, calc(100vw - 24px)); padding:.6rem .6rem .6rem 1.1rem; border-radius:16px;
  background:var(--ink); color:var(--bg); box-shadow:0 24px 50px -20px rgba(0,0,0,.6); transform:translate(-50%, calc(100% + 40px)); transition:transform .45s var(--ease)}
.sv-tray.in{transform:translate(-50%,0)}
.sv-tray[hidden]{display:none}
.sv-tray-n{margin:0; flex:none; display:flex; align-items:baseline; gap:.4rem; font-size:.86rem; white-space:nowrap}
.sv-tray-k{font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(242,239,232,.55); margin-right:.2rem}
.sv-tray-n b{font-family:var(--mono); font-size:1rem; font-weight:600; color:var(--blue-300)}
.sv-chips{flex:1; min-width:0; display:flex; gap:.4rem; margin:0; padding:2px 0; list-style:none; overflow-x:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image:linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent)}
.sv-chips::-webkit-scrollbar{display:none}
.sv-chip{display:inline-flex; align-items:center; gap:.45rem; padding:.34rem .5rem .34rem .7rem; border:1px solid rgba(242,239,232,.2); border-radius:99px; background:rgba(242,239,232,.06); color:#F2EFE8; font:inherit; font-size:.8rem; white-space:nowrap; cursor:pointer; transition:background .2s var(--ease), border-color .2s var(--ease)}
.sv-chip i{font-style:normal; font-size:.95rem; line-height:1; color:rgba(242,239,232,.55)}
.sv-chip:hover{background:rgba(242,239,232,.14); border-color:rgba(242,239,232,.4)} .sv-chip:hover i{color:#F2EFE8}
.sv-tray-empty{flex:1; min-width:0; margin:0; font-size:.86rem; color:rgba(242,239,232,.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sv-tray.has .sv-tray-empty{display:none}
.sv-tray:not(.has) .sv-chips, .sv-tray:not(.has) .sv-tray-clear{display:none}
.sv-tray-clear{flex:none; padding:0; border:0; background:none; font:inherit; font-size:.82rem; color:rgba(242,239,232,.72); cursor:pointer; text-decoration:underline; text-underline-offset:.2em}
.sv-tray-clear:hover{color:#F2EFE8}
.sv-send{flex:none; padding:.78rem 1.15rem; border-radius:10px; background:var(--accent); color:#fff; font-weight:600; transition:background .2s var(--ease), opacity .2s var(--ease)}
.sv-send:hover{background:var(--blue-600)}
.sv-send[aria-disabled="true"]{background:rgba(242,239,232,.14); color:rgba(242,239,232,.55); cursor:not-allowed}
#g-need.sv-filled{box-shadow:0 0 0 2px var(--accent); transition:box-shadow .3s var(--ease)}
.cp-longlist{margin-top:1.3rem}

@media (max-width: 900px){
  .nod{grid-template-columns:1fr}
  .nod-wall{min-height:280px}
}
@media (max-width: 640px){
  .sv-mode .x{display:none}
  .sv-filters{-webkit-mask-image:linear-gradient(90deg, #000 78%, transparent); mask-image:linear-gradient(90deg, #000 78%, transparent); padding-right:1.5rem}
  .sv-bar-in{gap:.8rem}
  .sv-chips{display:none}
  .sv-tray{gap:.7rem; justify-content:space-between; padding-left:.9rem}
  .sv-tray-empty{font-size:.8rem; white-space:normal}
  .sv-tray-k{display:none}
  .sv-steps{grid-template-columns:minmax(0,1fr); gap:.5rem}
  .sv-steps li{padding:.8rem .9rem}
}
@media (hover: none){
  .sv-i{color:rgb(25 25 25 / var(--a,.62))}
}
@media (prefers-reduced-motion: reduce){
  [data-rl] .rl-in,[data-rl] .rl-fade,.world-panel[data-rl] .hero-photo{opacity:1; transform:none; transition:none}
  [data-rl] a.hero-accent::after{transform:scaleX(1); transition:none}
  a.hero-accent:hover::after,a.hero-accent:focus-visible::after{animation:none}
  .nod-roll-in{animation:none}
  .sv-i,.sv-wall,.sv-tray,.sv-short li,.sv-short-note,.sv-steps li{transition:none} .sv-steps li.nudge{animation:none}
}

/* Every page: the Stone sheet ends with the dark cards' 18px corners over the footer. The footer tucks 18px up
   behind the sheet so the corners show it. Pages that end on a dark card (Company, Team) keep a Stone frame under it. */
#page-company, #page-team, #page-insights{padding-bottom:clamp(6px,.9vw,14px)}                /* padding, not margin, so it stays inside the sheet */
.site-main{border-radius:0 0 18px 18px}
.site-footer{margin-top:-18px; padding-top:calc(clamp(3rem, 6vw, 5rem) + 18px)}
/* team page: the people start right under the intro */
.team-sec{padding-top:clamp(2rem,4vw,3rem)}

/* founders' letter: the two signatures at about the same size, sitting on the names */
.sig{align-items:end}
.sig-img{display:block; height:auto; max-width:100%; margin:0 0 .5rem -.15rem}
.sig-clint{width:195px; margin-bottom:calc(.5rem + 17px)} .sig-josh{width:170px}   /* matched by eye: about the same cap height, and the two baselines line up (the J of Josh hangs below) */
@media (max-width: 700px){ .sig{gap:2.4rem} }

/* Insights archive: the table alone for now (the artwork is out until the creative is ready) */
.archive{grid-template-columns:minmax(0,1fr)}
/* forms: the submit button holds the right edge on its own */
.form-foot .btn{margin-left:auto}

/* Company closing CTA: the narrative control map (canvas, sized by its box) */
.nc{position:relative; width:100%; aspect-ratio:600 / 566; max-height:78svh; margin-inline:auto}
.nc canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
@media (max-width: 900px){ .cp-cta-art.nc{max-width:560px} }

/* nav: the Get started menu, mirrored in the phone drawer */
.cta-split .menu hr{margin:.4rem .6rem}
.drawer .d-group{margin:1.6rem 0 .2rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.drawer .d-group + .sub a:first-child{padding-top:.5rem}
.drawer .sub .ext{color:var(--ink-3); font-size:.85rem}

/* Insights: Featured and Archive are two plain lists now (date, title); the date column hugs its dates */
.archive th:first-child, .archive td:first-child{width:1%; padding-right:clamp(1.5rem, 4vw, 3.5rem)}

/* National award links: one quiet, evergreen line wherever the firm's recognition belongs (Company, Case Studies, Careers) */
.award-link{display:inline-flex; align-items:center; gap:.6em; margin-top:1.1rem; font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); transition:color .2s}
.award-link::before{content:""; width:6px; height:6px; flex:none; background:var(--accent)}
.award-link .ext{transition:transform .25s var(--ease)}
.award-link:hover{color:var(--ink)}
.award-link:hover .ext{transform:translate(2px,-2px)}
.award-link .arrow{transition:transform .25s var(--ease)}
.award-link:hover .arrow{transform:translateX(3px)}
.career-hero .copy .award-link{margin:0 0 .9rem}
.cp-layer-in .award-link{margin:-.4rem 0 1.4rem}
.clock-link span{white-space:nowrap}
.clock-link:hover b{text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:.2em}

/* ================================================================ INSIGHTS
   A masthead (the publication's name, the dispatch line, the subscribe form) beside the Imperium mark as a window onto
   the public arena; why we write it, in four points; the Featured list and the Friday archive; a subscribe band to close. */
.ins-hero{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(2rem,5vw,5rem); align-items:center;
  min-height:min(calc(100svh - var(--nav-h)), 880px); padding-block:clamp(2rem,5vh,3.5rem)}
.ins-hero-copy{display:flex; flex-direction:column; align-items:flex-start; min-width:0}
.ins-hero-copy .eyebrow{margin:0 0 1.3rem}
.ins-hero-copy .eyebrow .nw{white-space:nowrap}
.ins-title{margin:0; font-size:clamp(3.1rem, 7.2vw, 6.5rem); line-height:.95; letter-spacing:-.036em; font-weight:600}
.ins-title .accent-serif{display:block; letter-spacing:-.02em}
.ins-hero-copy .lead{margin-top:1.6rem; max-width:36ch}
.ins-hero-copy .sub-form{margin-top:1.7rem; width:100%}
.ins-note{margin-top:.9rem; font-size:.86rem; color:var(--ink-2)}
.ins-mark{position:relative; margin:0; justify-self:center; width:min(100%, calc(min(48svh, 460px) * .7985)); aspect-ratio:840 / 1052}
/* hidden from the start (no flash), then it eases in once the first scene has decoded */
.ins-mark{opacity:0; transform:translateY(18px) scale(.98)}
.ins-mark.in{opacity:1; transform:none; transition:opacity 1.1s var(--ease), transform 1.4s var(--ease)}
.ins-mark img{position:absolute; inset:0; width:100%; height:100%; opacity:0; z-index:0; user-select:none; -webkit-user-drag:none}
.ins-mark img.on{opacity:1; z-index:1}
.ins-mark img.prev{opacity:0; z-index:2; transition:opacity .28s ease-out}
.ins-why-head{margin-bottom:clamp(2rem,4vw,3.25rem)}
.ins-why-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.2rem,2.6vw,2.4rem); padding-top:clamp(1.6rem,3vw,2.4rem); border-top:1px solid var(--line)}
.ins-n{font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.08em; color:var(--accent-ink)}
.ins-why-grid h3{margin:.75rem 0 .5rem; font-size:1.15rem; line-height:1.25; letter-spacing:-.01em}
.ins-why-grid p{font-family:var(--serif); font-size:1rem; line-height:1.55; color:var(--ink-2)}
.ins-featured td{padding-block:1rem}
.ins-featured td b{display:block; font-weight:600; font-size:1rem; line-height:1.35; letter-spacing:-.005em}
.ins-featured td .dek{display:block; margin-top:.3rem; max-width:72ch; font-family:var(--serif); font-size:.95rem; line-height:1.45; color:var(--ink-2)}
.ins-featured tbody tr:hover td b{text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:.2em}
.ins-cta{margin-top:clamp(1rem,3vw,2.5rem)}
.ins-cta-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); align-items:center; gap:clamp(1.5rem,4vw,4rem); padding-block:clamp(3.2rem,6.5vw,5.5rem)}
.ins-cta-title{margin:.9rem 0 0; font-size:clamp(2.2rem, 4.6vw, 3.9rem); line-height:1.02; letter-spacing:-.03em; font-weight:600; color:#F2EFE8; text-wrap:balance}
.ins-cta .cp-cta-sub{margin-top:1rem; max-width:none}
.ins-cta-form{margin:0; max-width:none; width:100%}
.ins-cta-form input{border-color:transparent}
@media (max-width: 960px){ .ins-why-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 860px){
  .ins-hero{grid-template-columns:minmax(0,1fr); min-height:0; gap:2.6rem; padding-block:2.2rem 1rem}
  .ins-mark{width:min(48vw, 220px)}
  .ins-cta-in{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion: reduce){ .ins-mark{opacity:1; transform:none} }
@media (max-width: 560px){
  .ins-why-grid{grid-template-columns:minmax(0,1fr)}
  /* phones: each issue stacks, date over title, so the titles get the full width */
  #page-insights .archive thead{display:none}
  #page-insights .archive tbody tr{display:block; padding:.95rem .2rem; border-bottom:1px solid var(--line)}
  #page-insights .archive td{display:block; width:auto; padding:0; border:0}
  #page-insights .archive td:first-child{margin-bottom:.35rem; padding-right:0}
}

/* ---------- Home: the opening hero's scroll cue (placed and shown by homeCue). It sits on the photo panel's lower left,
   clear of the centred copy, and goes as soon as the page moves. ---------- */
.home-cue{position:fixed; z-index:6; left:0; top:0; display:flex; align-items:center; gap:.6rem; margin:0; padding:.58rem 1rem .58rem .8rem; border-radius:999px; cursor:pointer;
  background:rgba(25,25,25,.45); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:rgba(255,255,255,.92);
  font:500 .74rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity .5s var(--ease), transform .5s var(--ease), background-color .2s}
.home-cue svg{width:13px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:square; stroke-linejoin:miter; overflow:visible; animation:cueBob 2.4s var(--ease-io) infinite}
.home-cue:hover{background:rgba(25,25,25,.62)}
.home-cue.on{opacity:1; transform:none; pointer-events:auto}
.home-cue.on.away{opacity:0; transform:translateY(6px); pointer-events:none}
.home-cue:focus-visible{outline:2px solid #fff; outline-offset:3px}
@keyframes cueBob{0%,100%{transform:translateY(-1px)} 50%{transform:translateY(3px)}}

/* ---------- Home: the closing line, with the two award badges under it. Both files are cut to the badge and set to one
   height, so the two circles read the same size side by side. ---------- */
.arena{display:flex; flex-direction:column; align-items:flex-start; gap:clamp(1.4rem,2.6vw,2rem)}
.awards{display:flex; align-items:center; gap:clamp(1.25rem,2.6vw,2rem)}
.awards img{display:block; width:auto; height:clamp(96px, 9.2vw, 128px)}
/* they rise in like the press logos once they're decoded (riseIn in co-script.js), and settle at full strength */
.awards.js img:not(.on){opacity:0}
.awards.js img.on{animation:awardIn .9s var(--ease) backwards}
@keyframes awardIn{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}

/* ==========================================================================
   Case studies: one template for every study
   Head, hero, then a sticky "On this page" list beside the article. Headlines in Schibsted, the long-form and
   quotes in Source Serif, labels in Plex Mono. The visuals came from the handoff as self-contained figures.
   ========================================================================== */
.cs-head{padding-top:clamp(2.6rem, 6vw, 5rem)}
.cs-title{margin:1rem 0 0; font-size:clamp(2.35rem, 5vw, 4.1rem); line-height:1.03; letter-spacing:-.028em; font-weight:600; max-width:19ch}
.cs-title .cs-nw{white-space:nowrap}
.cs-dek{margin-top:1.3rem; max-width:46ch; color:var(--ink-2)}
.cs-hero{margin:clamp(2rem, 4vw, 3rem) 0 0; border-radius:var(--r-lg); overflow:hidden; background:var(--tan)}
.cs-hero img{display:block; width:100%; height:clamp(240px, 38vw, 540px); object-fit:cover}

.cs-body{display:grid; grid-template-columns:180px minmax(0,1fr); gap:clamp(2rem, 5vw, 4.5rem); align-items:start; padding:clamp(3.5rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem)}
.cs-nav{position:sticky; top:calc(var(--nav-h) + 28px); display:grid; gap:.1rem}
.cs-nav-h{margin:0 0 .7rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.cs-nav a{padding:.34rem 0 .34rem .85rem; border-left:2px solid var(--line); font-size:.875rem; color:var(--ink-2); transition:color .2s, border-color .2s}
.cs-nav a:hover{color:var(--ink)}
.cs-nav a.on{color:var(--ink); border-left-color:var(--accent)}
.cs-article{min-width:0}
.cs-sec + .cs-sec{margin-top:clamp(3.4rem, 6vw, 4.6rem)}

.cs-h{margin:0 0 1.15rem; font-size:clamp(1.75rem, 2.9vw, 2.45rem); line-height:1.1; letter-spacing:-.022em; font-weight:600; max-width:24ch}
.cs-sec > p{max-width:44rem; margin:0; font-family:var(--serif); font-size:clamp(1.06rem, 1.2vw, 1.18rem); line-height:1.65; color:var(--ink)}
.cs-sec > p + p{margin-top:1.15em}
.cs-sec > .cs-n{margin:0 0 .75rem; max-width:none; font-family:var(--mono); font-size:.74rem; line-height:1.4; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink)}
.cs-sec > p a{color:var(--accent-ink); text-decoration:underline; text-decoration-thickness:.06em; text-underline-offset:.16em; transition:color .2s}
.cs-sec > p a:hover{color:var(--ink)}
.cs-quote{max-width:44rem; margin:clamp(2.4rem, 4vw, 3rem) 0 0; padding:clamp(1.8rem, 3vw, 2.4rem) 0; border-top:1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-bottom:1px solid color-mix(in srgb, var(--ink) 16%, transparent)}
.cs-quote p{margin:0; font-family:var(--serif); font-size:clamp(1.45rem, 2.5vw, 2.05rem); line-height:1.27; letter-spacing:-.01em}
.cs-quote cite{display:block; margin-top:1rem; font-style:normal; font-size:.9rem; color:var(--ink-2)}
.cs-quote cite b{display:block; margin-bottom:.15rem; font-weight:600; color:var(--ink)}
.cs-quote.long p{font-size:clamp(1.3rem, 2vw, 1.7rem); line-height:1.32}
.cs-quote + p{margin-top:clamp(2.4rem, 4vw, 3rem)}

/* the visuals: text-width by default, the field map takes the article's full width */
.cs-fig{margin:clamp(1.8rem, 3.5vw, 2.6rem) 0; max-width:46rem; font-family:var(--sans)}
.cs-fig-wide{max-width:none}
.cs-sec > p + .cs-fig{margin-top:clamp(1.8rem, 3.5vw, 2.6rem)}
.cs-fig + p{margin-top:0}
.cs-fig > div:first-child, .cs-fig .csv-card{border-radius:var(--r-md) !important}
.cs-fig figcaption{margin-top:.8rem !important; font-size:.84rem !important; line-height:1.5 !important; color:var(--ink-2) !important; max-width:44rem}
.csv-title{font-family:var(--sans); font-weight:600; font-size:20px; line-height:1.2; letter-spacing:-.012em; color:#F4F1ED}
[data-anim]:not(.in-view), [data-anim]:not(.in-view) *{animation-play-state:paused !important}

.cs-foot{display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem 2rem; flex-wrap:wrap; padding:2.2rem 0 clamp(3.5rem, 7vw, 6rem); border-top:1px solid var(--line)}
.cs-all .arrow{margin-right:.15rem}
.cs-next{display:grid; gap:.35rem; text-align:right}
.cs-next small{font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.cs-next b{font-size:clamp(1.1rem, 1.9vw, 1.5rem); font-weight:600; letter-spacing:-.016em; line-height:1.2; transition:color .2s}
.cs-next:hover b{color:var(--accent-ink)}
.cs-next .arrow{display:inline-block; transition:transform .25s var(--ease)}
.cs-next:hover .arrow{transform:translateX(3px)}

@media (max-width: 900px){
  .cs-body{grid-template-columns:minmax(0,1fr)}
  .cs-nav{display:none}
}
@media (max-width: 560px){
  .cs-foot{flex-direction:column; align-items:flex-start}
  .cs-next{text-align:left}
}

/* ---------- GOP: by the numbers ---------- */
.m-in{opacity:0; animation:mpop .6s ease-out forwards}
@keyframes mpop{0%{opacity:0; transform:translateY(8px)} 100%{opacity:1; transform:none}}
@media (max-width: 520px){ .csv-gop [style*="repeat(3,minmax(0,1fr))"]{gap:14px !important} .csv-gop [style*="font-size:32px"]{font-size:27px !important} }

/* ---------- Apeel: what Grok told users, month by month ----------
   The handoff's 36s loop, rebuilt fluid: eight replies stacked in one cell, a timeline set in percentages */
.ag{background:#1C1B19; color:#F2EFE8; padding:clamp(18px, 3vw, 24px) clamp(18px, 3vw, 28px) clamp(20px, 3vw, 28px)}
.ag-top{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px 16px; margin-bottom:18px}
.ag-key{display:flex; gap:14px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase}
.ag-key .b{color:#E9A48F} .ag-key .a{color:#A9B3FF}
.ag-q{display:grid}
.ag-c{grid-area:1/1; display:flex; flex-direction:column; gap:14px; opacity:0}
.ag-h{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.ag-who{display:flex; align-items:center; gap:10px; min-width:0}
.ag-av{width:30px; height:30px; flex:none; border-radius:7px; background:#000; color:#F2EFE8; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:13px}
.ag-nm{font-size:14px; color:#F2EFE8} .ag-nm b{font-weight:600} .ag-nm span{color:rgba(242,239,232,.6)}
.ag-badge{display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase}
.ag-badge svg{width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.ag-c.bad .ag-badge{background:rgba(214,120,96,.22); color:#E9A48F}
.ag-c.ok .ag-badge{background:rgba(84,104,255,.28); color:#A9B3FF}
.ag-b{margin:0; background:rgba(242,239,232,.07); border-radius:4px 14px 14px 14px; padding:16px 18px; font-family:var(--serif); font-size:clamp(17px, 2.1vw, 20px); line-height:1.45; color:#F2EFE8}
.ag-x{background:rgba(214,120,96,.22); text-decoration:line-through; text-decoration-color:#E9A48F; text-decoration-thickness:2px; padding:0 3px; border-radius:2px}
.ag-ok{background:rgba(84,104,255,.28); padding:0 3px; border-radius:2px}
.ag-note{margin:0; font-size:13px; font-weight:500}
.ag-c.bad .ag-note{color:#E9A48F} .ag-c.ok .ag-note{color:#A9B3FF}
.ag-t{position:relative; height:62px; margin-top:26px}
.ag-t > *{position:absolute}
.ag-l{top:8px; height:2px; width:50%} .ag-l.b{left:0; background:rgba(214,120,96,.45)} .ag-l.a{left:50%; background:rgba(84,104,255,.45)}
.ag-pr{left:0; top:8px; height:2px; width:6.25%; background:#F2EFE8}
.ag-div{left:50%; top:-8px; width:1px; height:34px; background:rgba(242,239,232,.6)}
.ag-corr{left:50%; top:38px; transform:translateX(-50%); font-family:var(--mono); font-size:10px; letter-spacing:.04em; white-space:nowrap; color:rgba(242,239,232,.75)}
.ag-ring{left:calc(6.25% - 9px); top:0; width:18px; height:18px; border-radius:50%; border:2px solid #F2EFE8; box-sizing:border-box; background:#1C1B19; z-index:1}
.ag-m{left:calc(var(--x) - 7px); top:2px; width:14px; height:14px; border-radius:50%; display:flex; align-items:center; justify-content:center}
.ag-m svg{width:10px; height:10px; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.ag-m.bad{background:rgba(214,120,96,.22)} .ag-m.bad svg{stroke:#E9A48F}
.ag-m.ok{background:rgba(84,104,255,.28)} .ag-m.ok svg{stroke:#A9B3FF}
.ag-ml{left:var(--x); top:22px; transform:translateX(-50%); font-family:var(--mono); font-size:10px; white-space:nowrap; color:rgba(242,239,232,.6)}
@media (max-width: 560px){ .ag-ml .y{display:none} .ag-t{margin-top:22px} }
.agc0{animation:agc0 36s linear infinite}.agc1{animation:agc1 36s linear infinite}.agc2{animation:agc2 36s linear infinite}.agc3{animation:agc3 36s linear infinite}
.agc4{animation:agc4 36s linear infinite}.agc5{animation:agc5 36s linear infinite}.agc6{animation:agc6 36s linear infinite}.agc7{animation:agc7 36s linear infinite}
.agring{animation:agring 36s cubic-bezier(.4,0,.2,1) infinite}.agprog{animation:agprog 36s cubic-bezier(.4,0,.2,1) infinite}
@keyframes agc0{0%{opacity:1}11.25%{opacity:1}13.75%{opacity:0}98.75%{opacity:0}100%{opacity:1}}
@keyframes agc1{0%,11.25%{opacity:0}13.75%,23.75%{opacity:1}26.25%,100%{opacity:0}}
@keyframes agc2{0%,23.75%{opacity:0}26.25%,36.25%{opacity:1}38.75%,100%{opacity:0}}
@keyframes agc3{0%,36.25%{opacity:0}38.75%,48.75%{opacity:1}51.25%,100%{opacity:0}}
@keyframes agc4{0%,48.75%{opacity:0}51.25%,61.25%{opacity:1}63.75%,100%{opacity:0}}
@keyframes agc5{0%,61.25%{opacity:0}63.75%,73.75%{opacity:1}76.25%,100%{opacity:0}}
@keyframes agc6{0%,73.75%{opacity:0}76.25%,86.25%{opacity:1}88.75%,100%{opacity:0}}
@keyframes agc7{0%,86.25%{opacity:0}88.75%{opacity:1}98.75%{opacity:1}100%{opacity:0}}
@keyframes agring{0%,11.25%{left:calc(6.25% - 9px)}13.75%,23.75%{left:calc(18.75% - 9px)}26.25%,36.25%{left:calc(31.25% - 9px)}38.75%,48.75%{left:calc(43.75% - 9px)}51.25%,61.25%{left:calc(56.25% - 9px)}63.75%,73.75%{left:calc(68.75% - 9px)}76.25%,86.25%{left:calc(81.25% - 9px)}88.75%,98.75%{left:calc(93.75% - 9px)}100%{left:calc(6.25% - 9px)}}
@keyframes agprog{0%,11.25%{width:6.25%}13.75%,23.75%{width:18.75%}26.25%,36.25%{width:31.25%}38.75%,48.75%{width:43.75%}51.25%,61.25%{width:56.25%}63.75%,73.75%{width:68.75%}76.25%,86.25%{width:81.25%}88.75%,98.75%{width:93.75%}100%{width:6.25%}}

/* ---------- Vanderbilt: the field ---------- */
.vpd{opacity:0; animation:vpin .45s ease-out forwards}
.vglow{opacity:0; animation:vfade 1.2s ease-out 1.9s forwards}
.vdot{opacity:0; animation:vpin .6s ease-out 1.8s forwards}
.vring{opacity:0; animation:vring 2.6s ease-out 2.4s infinite}
.vlab{opacity:0; animation:vfade .6s ease-out 2.3s forwards}
.vtip{animation:vfade .2s ease-out both}
@keyframes vpin{0%{opacity:0; transform:translateY(-6px)} 100%{opacity:1; transform:none}}
@keyframes vfade{to{opacity:1}}
@keyframes vring{0%{opacity:.55; transform:scale(1)} 100%{opacity:0; transform:scale(3.2)}}
.vm-m, .vm-out, .vm-key{display:none}
@media (max-width: 700px){
  .vm{padding:20px 18px 18px}
  .vm-m{display:block; margin-bottom:14px}
  .vm-eb{margin:0 0 10px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(242,239,232,.7)}
  .vm-eb::before{content:""; display:inline-block; width:6px; height:6px; margin-right:9px; background:#5468FF; vertical-align:2px}
  .vm-t{margin:0 0 12px; font-size:24px; font-weight:600; line-height:1.1; letter-spacing:-.02em; color:#F2EFE8}
  .vm-p{margin:0 0 10px; font-size:15px; line-height:1.5; color:rgba(242,239,232,.8)}
  .vm .vtip{display:none !important}
  .vm-stage{margin:0 -6px}
  .vm-out{display:block; min-height:44px; margin-top:6px; padding:10px 12px; border-radius:8px; background:rgba(242,239,232,.06); font-size:14px; line-height:1.35; color:#F2EFE8}
  .vm-out b{display:block; font-weight:600}
  .vm-out small{display:block; margin-top:3px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:rgba(242,239,232,.7)}
  .vm-out .vm-out-k{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#A9B3FF}
  .vm-key{display:grid; gap:6px; margin-top:12px; font-size:12px; color:rgba(242,239,232,.65)}
  .vm-key span{display:flex; align-items:center; gap:8px}
  .vm-key i{width:8px; height:8px; border-radius:50%; background:#F2EFE8; flex:none} .vm-key i.v{background:#5468FF}
}

@media (prefers-reduced-motion: reduce){
  .agc0,.agc1,.agc2,.agc3,.agc4,.agc5,.agc6,.agring,.agprog{animation:none}
  .agc7{animation:none; opacity:1}
  .agring{left:calc(93.75% - 9px)} .agprog{width:93.75%}
  .m-in{animation:none; opacity:1}
  .vpd,.vglow,.vdot,.vlab,.vtip{animation:none; opacity:1} .vring{animation:none; opacity:0}
  .cs-next .arrow{transition:none}
}

/* ================================================================ October 12 studies: AGP, Goldfinch, Russell Street, Marcelina
   The handoff drew each as a glowing card inside a dark panel; here they are the site's own dark card (the same one as
   "By the numbers"): a title and a mono tag on top, figures in Schibsted, labels in Plex Mono, the blue as the signal. */
.nx{background:#191919; color:#F4F1ED; padding:26px 28px 30px; border-radius:var(--r-md)}
.nx-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px 16px; flex-wrap:wrap}
.nx-tag{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#A9B3FF}
.nx-k{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(244,241,237,.65)}
.nx-stat{display:flex; flex-direction:column; gap:6px; margin-top:22px; padding-top:14px; border-top:1px solid rgba(244,241,237,.18)}
@keyframes nxIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@keyframes nxLit{to{opacity:1}}

/* AGP: who has come to the table, one official at a time */
.agp-logo{display:block; height:32px; width:auto}
.agp-n{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:rgba(244,241,237,.55)}
.agp-n b{font-weight:500; color:#F4F1ED}
.agp-k{margin:26px 0 14px; padding-top:14px; border-top:1px solid rgba(244,241,237,.18)}
.agp-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 24px}
.agp-role{display:block; font-family:var(--mono); font-size:10px; line-height:1.4; letter-spacing:.08em; text-transform:uppercase; color:#A9B3FF}
.agp-name{display:block; margin-top:3px; font-weight:600; font-size:17px; line-height:1.2; letter-spacing:-.012em}
.agp-bar{display:none}
.agp.r-live .agp-list{display:block; position:relative; height:clamp(118px, 18vw, 136px)}
.agp.r-live .agp-i{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:14px;
  opacity:0; transform:translateY(14px); transition:opacity .45s var(--ease), transform .6s var(--ease); pointer-events:none}
.agp.r-live .agp-i.on{opacity:1; transform:none; transition-delay:.12s}
.agp.r-live .agp-i.out{opacity:0; transform:translateY(-14px)}
.agp.r-live .agp-role{padding:6px 12px; border:1px solid rgba(169,179,255,.45); border-radius:999px; font-size:11px}
.agp.r-live .agp-name{margin:0; font-size:clamp(34px, 5.6vw, 52px); line-height:1.02; letter-spacing:-.032em}
.agp.r-live .agp-bar{display:flex; gap:6px; margin-top:20px}
.agp-bar i{flex:1 1 0; height:3px; border-radius:2px; background:rgba(244,241,237,.16); overflow:hidden}
.agp-bar b{display:block; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:0 50%}
.agp-bar i.done b{transform:scaleX(1)}
.agp-bar i.on b{transform:scaleX(1); transition:transform var(--rt,3.4s) linear}

/* Goldfinch: a billion fewer pills; a third of the grid goes, one capsule at a time */
.gf-num{font-weight:500; font-size:clamp(40px, 8.4vw, 72px); line-height:1; letter-spacing:-.035em; white-space:nowrap}
.gf-pills{display:grid; grid-template-columns:repeat(15,minmax(0,1fr)); gap:clamp(8px,1.8vw,14px) clamp(5px,1.2vw,10px); margin-top:30px}
.gf-pills i{position:relative; aspect-ratio:2 / 1; border-radius:999px; background:linear-gradient(90deg,#D8D0C1 50%,#F4F1ED 50%); opacity:.9}
.gf-pills i.x{background:none; opacity:1; box-shadow:inset 0 0 0 1px rgba(244,241,237,.16)}
.gf-pills i.x b{position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg,#D8D0C1 50%,#F4F1ED 50%); opacity:.9;
  animation:gfOut .75s cubic-bezier(.4,0,.2,1) both; animation-delay:calc(400ms + var(--o) * 130ms)}
@keyframes gfOut{0%{opacity:.9; transform:none; box-shadow:0 0 0 0 rgba(84,104,255,0)}
  32%{opacity:1; transform:scale(1.18); box-shadow:0 0 0 2px #5468FF, 0 0 14px 2px rgba(84,104,255,.7)}
  100%{opacity:0; transform:scale(.15); box-shadow:0 0 0 2px rgba(84,104,255,0)}}

/* Russell Street: the coverage, tier by tier */
.rs-top{align-items:flex-start; margin-bottom:6px}
.rs-sub{margin:10px 0 0; font-size:13px; color:rgba(244,241,237,.55)}
.rs-count{text-align:right}
.rs-count b{display:block; font-weight:500; font-size:clamp(40px, 6vw, 54px); line-height:1; letter-spacing:-.03em}
.rs-count .nx-k{margin-top:8px; color:rgba(244,241,237,.55)}
.rs-tier{display:grid; grid-template-columns:150px minmax(0,1fr); gap:20px; padding:20px 0 18px; border-top:1px solid rgba(244,241,237,.12)}
.rs-tier:last-child{padding-bottom:0}
.rs-tk{margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#A9B3FF}
.rs-ts{margin:6px 0 0; font-size:13px; line-height:1.4; color:rgba(244,241,237,.5)}
.rs-tl{opacity:.35; animation:nxLit .5s linear both; animation-delay:var(--d)}
.rs-line{display:block; width:40px; height:2px; margin-top:12px; background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
  animation:rsLine .6s cubic-bezier(.4,0,.2,1) both; animation-delay:var(--d)}
@keyframes rsLine{to{transform:none}}
.rs-o{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-content:flex-start; gap:8px 22px}
.rs-o li{font-weight:500; font-size:clamp(19px, 2.4vw, 23px); line-height:1.2; letter-spacing:-.015em; white-space:nowrap;
  animation:nxIn .7s cubic-bezier(.2,.7,.2,1) both; animation-delay:var(--d)}

/* Marcelina: the path to approval */
.mc-steps{list-style:none; margin:26px 0 0; padding:0}
.mc-s{position:relative; padding-left:40px; opacity:.38; animation:nxLit .5s linear both; animation-delay:var(--d)}
.mc-s + .mc-s{margin-top:22px}
.mc-s:not(:last-child)::before, .mc-s:not(:last-child)::after{content:""; position:absolute; left:8px; top:26px; bottom:-22px; width:2px; background:rgba(244,241,237,.12)}
.mc-s:not(:last-child)::after{background:var(--accent); transform:scaleY(0); transform-origin:50% 0; animation:rsLine .6s cubic-bezier(.4,0,.2,1) both; animation-delay:var(--l)}
.mc-node{position:absolute; left:0; top:4px; width:18px; height:18px; box-sizing:border-box; border-radius:50%; border:1.5px solid rgba(244,241,237,.25); background:#191919;
  display:grid; place-items:center; animation:mcNode .7s cubic-bezier(.4,0,.2,1) both; animation-delay:var(--d)}
@keyframes mcNode{40%{background:#5468FF; border-color:#5468FF; box-shadow:0 0 0 6px rgba(84,104,255,.25)} 100%{background:#5468FF; border-color:#5468FF; box-shadow:0 0 0 0 rgba(84,104,255,0)}}
.mc-node svg{width:10px; height:10px; fill:none; stroke:#191919; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:0; animation:nxLit .3s linear both; animation-delay:calc(var(--d) + 180ms)}
.mc-k{margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#A9B3FF}
.mc-h{margin:6px 0 0; font-weight:600; font-size:clamp(22px, 3vw, 26px); line-height:1.15; letter-spacing:-.02em}
.mc-l{margin:5px 0 0; font-size:14px; color:rgba(244,241,237,.6)}
.mc-v{margin:4px 0 0; font-weight:500; font-size:clamp(30px, 5vw, 40px); line-height:1.1; letter-spacing:-.03em; white-space:nowrap}
.mc-badge{display:inline-block; margin-top:9px; padding:5px 10px; border:1px solid rgba(169,179,255,.45); border-radius:999px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:#D3D9FF; animation:nxIn .5s cubic-bezier(.2,.7,.2,1) both; animation-delay:var(--b)}

@media (max-width: 560px){
  .nx{padding:22px 20px 24px}
  .agp-list{grid-template-columns:minmax(0,1fr)}
  .rs-tier{grid-template-columns:minmax(0,1fr); gap:12px}
  .rs-line{display:none}
  .gf-pills{gap:7px 4px}
}
@media (prefers-reduced-motion: reduce){
  .gf-pills i.x b{animation:none; opacity:0}
  .rs-tl,.rs-line,.rs-o li,.mc-s,.mc-node,.mc-node svg,.mc-badge,.mc-s::after{animation:none; opacity:1; transform:none}
  .mc-node{background:#5468FF; border-color:#5468FF}
  .agp.r-live .agp-i{transition:none}
}

/* a graphic rather than a photo (the GOP's election night map): it keeps its own white, and the hero holds its edge on Stone with a hairline */
.cs-graphic{background:#fff !important}
.cs-hero.cs-graphic{position:relative}
.cs-hero.cs-graphic::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px var(--line); pointer-events:none}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important}
  #intro{display:none}
  .pre{opacity:1; transform:none}
}

/* ================================================================ INSIGHTS: the real issues (Oct 21)
   Featured lists every feature from the archive, newest first, each with its subtitle. The archive leads each Friday
   issue with that week's line, since every issue shares the Imperium Insights name, and opens on the latest ten;
   earlier issues come in twenty at a time. Every row is a link to its post, and the whole row takes the click. */
.archive td > a{display:block; color:inherit}
.ins-issues td{padding-block:.9rem}
.ins-issues td > a{max-width:72ch; font-family:var(--serif); font-size:1rem; line-height:1.45; color:var(--ink); text-wrap:pretty}
@media (hover: hover){
  .ins-issues tbody tr:hover td > a{text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1px; text-underline-offset:.2em}
}
.archive td > a:focus-visible{outline-offset:4px}
#page-insights .archive tbody tr.later{display:none}
.arch-foot{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin-top:.75rem}
.arch-foot .more{width:100%; margin-top:0; transition:background-color .2s var(--ease)}
@media (hover: hover){ .arch-foot .more:hover{background:var(--card)} }
.arch-foot.done{grid-template-columns:minmax(0,1fr)}
.arch-foot.done .arch-more{display:none}
@media (max-width: 560px){ .arch-foot{grid-template-columns:minmax(0,1fr)} }

/* ================================================================ PRIVACY POLICY (#/privacy)
   The case study reading system (the head, the sticky "On this page", sections that light the list as you read), set
   for a document people scan rather than read through: smaller numbered headings, short lists, the gist up top, and
   on phones and tablets the contents fold out from the top of the article. */
.legal .cs-title{max-width:none}
.lg-date{margin-top:1.5rem; font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.legal .cs-body{grid-template-columns:200px minmax(0,1fr); margin-top:clamp(2.4rem, 4.5vw, 3.5rem); padding-top:clamp(2.6rem, 5vw, 4rem); border-top:1px solid var(--line)}
.legal .cs-nav a{padding-block:.3rem}
.legal .cs-sec + .cs-sec{margin-top:clamp(2.6rem, 4.6vw, 3.5rem)}
.lg-h{display:flex; align-items:baseline; gap:.9rem; max-width:44rem; margin:0 0 1rem; font-size:clamp(1.3rem, 1.9vw, 1.6rem); line-height:1.2; letter-spacing:-.018em; font-weight:600}
.lg-n{flex:0 0 auto; min-width:1.6rem; font-family:var(--mono); font-size:.74rem; font-weight:500; letter-spacing:.08em; color:var(--accent-ink); transform:translateY(-.12em)}
.legal .cs-sec > p, .lg-list{max-width:44rem; font-family:var(--serif); font-size:clamp(1.02rem, 1.1vw, 1.1rem); line-height:1.65; color:var(--ink)}
.legal .cs-sec > p + p, .legal .cs-sec > p + .lg-list, .legal .cs-sec > .lg-list + p{margin-top:1em}
.lg-list{display:grid; gap:.6rem; margin:0; padding:0; list-style:none}
.lg-list li{position:relative; padding-left:1.35rem}
.lg-list li::before{content:""; position:absolute; left:.1rem; top:.72em; width:5px; height:5px; background:var(--ink-3)}
.legal b{font-weight:600}
.legal .cs-article a{color:var(--accent-ink); text-decoration:underline; text-decoration-thickness:.06em; text-underline-offset:.16em; overflow-wrap:break-word; transition:color .2s}
.legal .cs-article a:hover{color:var(--ink)}
.legal .cs-sec > .lg-addr{margin-top:1.4rem; font-family:var(--sans); font-size:.9rem; line-height:1.55; color:var(--ink-2)}
/* the gist, before the detail */
.lg-sum{max-width:44rem; margin:0 0 clamp(3rem, 5.5vw, 4.2rem); padding:clamp(1.4rem, 2.6vw, 2rem); border-radius:var(--r-md); background:var(--card-2)}
.lg-sum h2{margin:0 0 1rem; font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.lg-sum ul{display:grid; gap:.7rem}
.lg-sum li{position:relative; padding-left:1.2rem; font-size:1rem; line-height:1.5}
.lg-sum li::before{content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; background:var(--accent)}
/* contents: the sticky list on desktop; on narrower screens it folds out from the top of the article */
.lg-toc{display:none}
@media (max-width: 900px){
  .legal .cs-body{grid-template-columns:minmax(0,1fr)}
  .lg-toc{display:block; max-width:44rem; margin:0 0 2.2rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .lg-toc summary{display:flex; align-items:center; justify-content:space-between; min-height:52px; cursor:pointer; list-style:none; -webkit-user-select:none; user-select:none;
    font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
  .lg-toc summary::-webkit-details-marker{display:none}
  .lg-toc .chev{width:12px; height:12px; transition:transform .25s var(--ease)}
  .lg-toc[open] .chev{transform:rotate(180deg)}
  .lg-toc ol{margin:0; padding:0 0 .5rem; list-style:none}
  .legal .lg-toc a{display:flex; align-items:center; gap:.85rem; min-height:44px; color:var(--ink); text-decoration:none; font-size:.95rem; line-height:1.3}
  .lg-toc a span{flex:0 0 1.6rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--accent-ink)}
  /* the contents' own rules divide the page here, so the body drops its hairline */
  .legal .cs-body{margin-top:0; padding-top:clamp(1.8rem, 5vw, 2.4rem); border-top:0}
}
@media (max-width: 560px){ .lg-h{gap:.7rem} }
@media (prefers-reduced-motion: reduce){ .lg-toc .chev{transition:none} }

/* ================================================================ THE IMPERIUM LOGO (Brand Guidelines 3.0)
   The master lockup, inline: Ink on light grounds, Stone on Ink. Its proportions come from the viewBox; impFit
   refits the rods to the pixel grid. The browser draws it from its box's corner rounded to a whole pixel, which can sit
   up to half a pixel outside the box, so the box never clips it. */
.imp-logo{display:block; width:auto; aspect-ratio:361.046 / 75; overflow:visible; fill:currentColor}

/* ================================================================ FORMS: sending, then sent
   is-sending: the submit button reads "Sending…" and rests. is-sent: the fields give way, in place, to a confirmation
   (role="status"). The two labels share one grid cell, so the button keeps its width when the label changes. */
.btn-swap{display:inline-grid}
.btn-swap > *{grid-area:1 / 1; display:inline-flex; align-items:center; justify-content:center; gap:.55rem}
.btn-swap .btn-sending{visibility:hidden}
form.is-sending .btn-swap .btn-label{visibility:hidden}
form.is-sending .btn-swap .btn-sending{visibility:visible}
form.is-sending [type="submit"]{opacity:.55; cursor:default; pointer-events:none; box-shadow:none}
/* a label shorter than "Sending…" (Submit) keeps its own width at rest, and the button grows only while sending */
.btn-swap-grow{display:inline-flex}
.btn-swap-grow .btn-sending{display:none}
form.is-sending .btn-swap-grow .btn-label{display:none}
form.is-sending .btn-swap-grow .btn-sending{display:inline-flex}
.form-done{display:none}
form.is-sent > :not(.form-done):not(.head){display:none}
form.is-sent > .form-done{display:block}
@media (prefers-reduced-motion: no-preference){ form.is-sent > .form-done{animation:formDone .5s var(--ease) both} }
@keyframes formDone{from{opacity:0; transform:translateY(8px)}}
.form-done:focus{outline:none}
.form-done-mark{display:grid; place-items:center; width:40px; height:40px; margin:0 0 1.1rem; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink)}
.form-done-mark svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.form-done-h{margin:0; font-size:clamp(1.4rem, 2.1vw, 1.75rem); line-height:1.12; letter-spacing:-.02em; font-weight:600; color:var(--ink)}
.form-done-p{margin:.65rem 0 0; max-width:42ch; font-family:var(--serif); font-size:1.04rem; line-height:1.5; color:var(--ink-2)}
.form-done .btn.form-again{margin-top:1.4rem}
/* cards: the confirmation keeps the card's size, centred under the card's heading row */
.form-card.is-sent{display:flex; flex-direction:column}
.form-card.is-sent > .form-done{margin:auto 0; padding:1.25rem 0 1.75rem}
/* the application: the confirmation heads the form's column */
.form-lines > .form-done{padding:.25rem 0 2rem}
/* the subscribe rows: a compact confirmation about the height of the row it replaces */
form.sub-form.is-sent > .form-done{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:.85rem; align-items:center; width:100%; min-height:44px; text-align:left}
.sub-form .form-done-mark{grid-row:1 / span 2; width:36px; height:36px; margin:0}
.sub-form .form-done-mark svg{width:16px; height:16px}
.sub-form .form-done-h{font-size:1rem; line-height:1.3; letter-spacing:-.005em}
.sub-form .form-done-p{max-width:none; margin:.1rem 0 0; font-family:var(--sans); font-size:.88rem; line-height:1.4}
.form-again-link{display:inline; padding:0; margin:0; font:inherit; color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1px; text-underline-offset:.2em; cursor:pointer}
.form-again-link:hover{text-decoration-thickness:2px}
.ins-cta-form .form-done-mark{background:rgba(169,179,255,.14); color:var(--blue-300)}
.ins-cta-form .form-done-h{color:#F2EFE8}
.ins-cta-form .form-done-p{color:rgba(242,239,232,.68)}
.ins-cta-form .form-again-link{color:#F2EFE8; text-decoration-color:var(--blue-300)}

/* ================================================================ HOME: the Company cards sit a little closer to the client ticker */
#page-home .home-co{padding-top:clamp(3rem, 6vw, 5.5rem)}

/* ================================================================ COMPANY, 900px and below: no pinned graphic
   The scroll-driven pillar needs a wide screen; on phones and tablets the page is the hero, then the sections as text. */
@media (max-width: 900px){
  #cpStick{display:none}
  .cp-layer{min-height:0; padding:clamp(2.6rem, 8vw, 3.6rem) 0}
  .cp-layer + .cp-layer{border-top:1px solid var(--line)}
}

/* ================================================================ INSIGHTS: the title's second line steps right
   So the dot of the i in "Insights" clears the descender of the p in "Imperium" above it. Measured in em, so it holds at
   every size: at 0.3em the p clears it by 0.12em, more than the lines' own spacing elsewhere (0.09em). */
.ins-title .accent-serif{margin-left:.3em}

/* ==========================================================================
   PHONES AND TOUCH SCREENS
   Everything in this block is scoped to phone and tablet widths or to touch
   input (hover: none), so the desktop site renders exactly as before.
   ========================================================================== */

/* ---------- touch screens: no grey tap flash, no double-tap zoom on controls, no hover states that stick after a tap ---------- */
@media (hover: none) and (pointer: coarse){
  html{-webkit-tap-highlight-color:transparent}
  a,button,summary,label,select,[role="button"],[role="tab"],[data-bio]{touch-action:manipulation}
  .ticker:hover,.nod-wall:hover .nod-roll-in{animation-play-state:running}
  .ticker li:hover img{opacity:.74}
  .btn-dark:hover{background:var(--ink); box-shadow:none}
  .card-pc:hover::before{opacity:.26; transform:none}
  .cta-bar:hover{transform:none}
  .bio-photo:hover img{transform:none}
  .pc-pcard:hover{transform:none; box-shadow:none; border-color:var(--line)}
  .cp-person:hover:not(.hot) .cp-ph img{transform:none}
  /* a press, felt: quick and small */
  .btn,.cta-main,.cta-bar,.cs,.drawer a,.car-ctl button,.sv-send,.pc-modes button,.sv-mode button{transition-property:background-color,color,border-color,opacity,transform; -webkit-user-select:none; user-select:none}
  .btn:active,.cta-main:active,.sv-send:active,.car-ctl button:active{transform:scale(.97)}
  .cs:active,.cta-bar:active{transform:scale(.985)}
  .drawer a:active{opacity:.55}
}

/* ---------- the compact header: wherever the menu button shows (940px and below) ----------
   One system instead of three sizes: a 56px bar, the logo at 26px (125px wide, over the guidelines' 120px minimum
   for the lockup), and two 36px controls with the same 6px corners,
   8px apart, sitting on the right gutter. Each control keeps a 44px touch area through an invisible extension,
   so the bar can stay tight without anything getting hard to hit. */
@media (max-width: 940px){
  :root{--nav-h:56px}
  /* the bar's hairline is drawn inside it rather than added to it, so the 36px controls centre on whole pixels (10px from the top) */
  .nav{border-bottom:0; box-shadow:inset 0 -1px 0 transparent; transition:transform .32s var(--ease), box-shadow .25s}
  .nav.scrolled{box-shadow:inset 0 -1px 0 var(--line)}
  /* notched phones in landscape: keep text clear of the notch */
  .wrap{width:min(100% - 2*max(var(--gutter), env(safe-area-inset-left,0px), env(safe-area-inset-right,0px)), var(--wrap))}
  .brand{display:flex; align-items:center; height:44px}
  .brand .imp-logo{height:26px}
  .nav-right,.nav-cta{gap:8px}
  /* Get started: one button; its extra links (deck, client login, demo) live in the menu */
  .cta-chev,.cta-split > .menu{display:none}
  .cta-split{height:36px; border-radius:var(--r-sm)}
  .cta-main{position:relative; height:100%; padding:0 14px; border-radius:var(--r-sm); font-size:14px; letter-spacing:-.005em}
  .cta-main::after{content:""; position:absolute; inset:-4px 0}
  /* the menu button: the same height and corners as Get started, outlined; two 2px lines on whole pixels so both draw
     equally sharp on any screen, turning into an X */
  .burger{position:relative; display:block; width:36px; height:36px; padding:0; margin:0; border:1px solid var(--line-2); border-radius:var(--r-sm); background:transparent;
    transition:background-color .2s var(--ease), border-color .2s var(--ease)}
  .burger::after{content:""; position:absolute; inset:-5px}
  .burger span{position:absolute; left:50%; top:50%; width:16px; height:2px; margin:-1px 0 0 -8px; background:var(--ink); transition:transform .3s var(--ease)}
  .burger span:nth-child(1){transform:translateY(-4px) rotate(0)}
  .burger span:nth-child(2){display:none}
  .burger span:nth-child(3){transform:translateY(4px) rotate(0)}
  .burger[aria-expanded="true"]{border-color:var(--ink)}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(0) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(0) rotate(-45deg)}
  @media (hover: hover){ .burger:hover{background:var(--card)} }
  /* keyboard focus hugs the control; a tap or click never leaves a ring behind */
  .nav .cta-main:focus-visible,.burger:focus-visible{outline:2px solid var(--accent-strong); outline-offset:2px; border-radius:calc(var(--r-sm) + 2px)}
  html.m-ptr .nav :focus-visible{outline:none}
  /* the menu fades down from the bar instead of blinking on, and keeps the page behind it still */
  .drawer{display:block; top:calc(var(--nav-h) + env(safe-area-inset-top,0px)); visibility:hidden; opacity:0; transform:translateY(-8px); pointer-events:none;
    transition:opacity .22s var(--ease), transform .32s var(--ease), visibility 0s linear .32s;
    overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-bottom:calc(3rem + env(safe-area-inset-bottom,0px))}
  .drawer.open{visibility:visible; opacity:1; transform:none; pointer-events:auto; transition:opacity .22s var(--ease), transform .32s var(--ease), visibility 0s}
  .drawer a.on{color:var(--accent-ink)}
  .drawer .sub a.on{color:var(--accent-ink)}
  /* the menu already sets overflow:hidden on <body>, which the browser applies to the viewport; overflow on <html> as well would turn
     <body> into its own scroller and unstick the header, so the lock only stops the bounce */
  html.m-lock{overscroll-behavior:none}
}

/* the smallest phones (320px): the logo at its 120px minimum, so it fits beside both controls */
@media (max-width: 359px){ .brand .imp-logo{height:25px} }

/* whole-pixel gutters on phones and tablets, so the logo and the controls never land between pixels (browsers that can round) */
@supports (width: round(down, 1px, 1px)){
  @media (max-width: 940px){ :root{--gutter:clamp(20px, round(down, 4vw, 1px), 44px)} }
}

/* ---------- phones ---------- */
@media (max-width: 860px){
  :root{--nav-vis:var(--nav-h)}

  /* the bar steps out of the way while you read and comes back as soon as you scroll up; the section bars move up with it */
  html.m-nav-hidden{--nav-vis:0px}
  .nav{transition:transform .32s var(--ease), box-shadow .25s}
  html.m-nav-hidden .nav{transform:translateY(calc(-100% - env(safe-area-inset-top,0px) - 2px))}
  .lnav,.sv-bar{top:var(--nav-vis); transition:top .32s var(--ease)}

  /* the footer is taller than a phone screen, so it scrolls in normally instead of waiting under the page (otherwise its top could never be reached) */
  .site-footer{position:relative}
  .foot-col a{display:flex; align-items:center; min-height:44px; padding:0}
  .foot-col h5{margin-bottom:.35rem}
  .clock-link{min-height:44px; align-items:center}
  .foot-bottom a{padding:.75rem 0; margin:-.75rem 0}

  /* fields at 16px, so iOS doesn't zoom the page when one is tapped */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select,textarea{font-size:16px !important}
  /* at 16px an email field's natural width no longer fits beside its button: let it shrink, so the form never runs off the screen */
  .sub-form input{min-width:0}
  .form-lines .field-2{grid-template-columns:1fr 1fr; gap:1rem}

  /* tap targets of at least 44px, without moving the layout */
  .btn{min-height:44px}
  .btn-sm{min-height:40px}
  .lnav-next{padding:15px 0 15px .75rem; margin:-15px 0}
  .bio-name{padding:.55rem 0; margin:-.55rem 0}
  button.bio-more,.cs-all,.award-link,.cp-link,a.link{padding-block:.6rem; margin-block:-.6rem}
  .car-ctl button{width:44px; height:44px}
  .sv-filters{gap:.35rem}
  .sv-filters button{padding:.9rem .5rem}
  .sv-mode button{padding:.55rem .85rem}
  .pc-modes button{min-height:44px; padding:.6rem .8rem}
  .home-cue{min-height:40px}

  /* Team: the core team in two columns, so faces sit side by side instead of a screen each */
  .team-grid-3{grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.6rem .9rem}
  .team-grid-3 .person .name{font-size:1rem}
  .team-grid-3 .person img{margin-bottom:.45rem}

  /* things fixed to the bottom of the screen clear the home indicator */
  .sv-tray{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  html.m-tray .site-footer{padding-bottom:calc(1.6rem + 92px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(20px + env(safe-area-inset-bottom,0px)); max-width:calc(100vw - 32px)}

  /* the bio opens as a full-screen sheet: a bigger close button, and it follows your finger when you swipe it away */
  .bio-close{width:44px; height:44px; top:12px; right:12px; background:rgba(241,238,231,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
  .bio-drawer{touch-action:pan-y}
  .bio-drawer.m-drag{transition:none}
  .bio-foot{padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px))}
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce){
  .nav,.lnav,.sv-bar,.drawer,.burger span{transition:none}
}