/* ==========================================================================
   Holdpoint by elas — enterprise editorial language
   Newsreader display over Albert Sans text, JetBrains Mono labels.
   Warm near-black, white and #F5F5F7. Green is reserved for product status.
   ========================================================================== */
@font-face{ font-family:"Albert Sans"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(fonts/albertsans-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:"Albert Sans"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(fonts/albertsans-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"JetBrains Mono"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(fonts/jetbrainsmono-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:"JetBrains Mono"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(fonts/jetbrainsmono-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:"Newsreader"; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/newsreader-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:"Newsreader"; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/newsreader-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root{
  --white:   #FFFFFF;
  --grey:    #F5F5F7;
  --ink:     #1D1D1F;
  --ink-2:   #5F5F64;
  --ink-3:   #6E6E73;
  --hair:    #D2D2D7;

  --black:   #0B0F11;   /* warm near-black, the hero shade */
  --dark-c:  #161B1E;   /* card on black */
  --shade:   #0B0F11;
  --bar:     #15120E;

  --sans:  "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --inv:     #F5F5F7;
  --inv-2:   #A1A1A6;
  --inv-3:   #8A8A8F;

  --green:      #0FA34A;
  --green-hi:   #2FBF63;
  --green-deep: #087A36;
  --green-txt:  #0A7A3A;  /* status green on white and on the wash */
  --green-lt:   #3DD371;  /* link green on black */
  --green-wash: #E9F6EE;

  --red:    #E0352B;  --red-wash:   #FDEEEC;
  --amber:  #B25000;  --amber-wash: #FCF2E4;
  --blue:   #0071E3;  --blue-wash:  #EAF3FD;

  --t-hero:  clamp(2.875rem, 5.4vw, 5rem);
  --t-h2:    clamp(2.1rem, 4.2vw, 3.5rem);
  --t-h3:    clamp(1.35rem, 2vw, 1.75rem);
  --t-body:  1.0625rem;   /* 17px */
  --t-lead:  clamp(1.19rem, 1.6vw, 1.3125rem);  /* 19–21px */

  --pad: clamp(1.375rem, 4vw, 2.75rem);
  --gap: clamp(4.5rem, 11vw, 10rem);     /* section rhythm: 72px on phones, 160px on wide screens */
  --col-text: 980px;
  --col-wide: 1240px;

  --r-pill: 980px;
  --r-card: 28px;

  --ease: cubic-bezier(.32,.72,0,1);
  color-scheme: light;
}

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

html{ overflow-x:hidden; scroll-behavior:smooth; scroll-padding-top:5rem; }
body{
  margin:0; max-width:100%;
  background:var(--white); color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body); line-height:1.5; font-weight:400;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{ margin:0; color:var(--ink); text-wrap:balance; }
h1,h2{ font-family:var(--sans); font-weight:300; }
h3,h4{ font-family:var(--sans); font-weight:300; }
h1{ font-size:var(--t-hero); line-height:1; letter-spacing:-.02em; }
h2{ font-size:var(--t-h2);  line-height:1.06; letter-spacing:-.018em; }
h3{ font-size:var(--t-h3);  line-height:1.16; letter-spacing:-.014em; }
p{ margin:0; }
a{ color:inherit; }

:focus-visible{ outline:2px solid currentColor; outline-offset:3px; border-radius:4px; }
::selection{ background:rgba(11,15,17,.14); }

/* the second line of a headline steps back */
.grad{ color:var(--ink-2); }
.sect-black .grad, .on-black .grad{ color:rgba(255,255,255,.62); }

/* ---------- logo ------------------------------------------------------------ */
.mark{ display:block; height:1em; width:auto; }
.mark .pin{ fill:currentColor; }
.mark .accent{ fill:var(--green); }
.wordmark{
  text-decoration:none;
  display:inline-flex; align-items:center; gap:.42em;
  font-family:var(--serif); font-weight:400; letter-spacing:-.01em; line-height:1;
}
.wordmark .mark{ height:1.4em; }
.wordmark > span{ white-space:nowrap; }
.wordmark .by{ font-family:var(--sans); font-size:.56em; font-weight:400; letter-spacing:0; opacity:.72; margin-left:.5em; }

/* ---------- announcement bar + nav: transparent over the hero, frosted once stuck ---- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:90;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .3s ease, border-color .3s ease;
}
.nav[data-stuck="true"], .nav[data-open="true"]{
  background:rgba(11,15,17,.86);
  backdrop-filter:saturate(1.6) blur(18px);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);
  border-bottom-color:rgba(255,255,255,.08);
}
.bar{
  position:relative; background:var(--bar); color:#fff;
  font-size:.875rem; line-height:40px; height:40px; text-align:center;
  overflow:hidden; transition:height .3s var(--ease), padding .3s var(--ease);
}
.bar b{ font-weight:500; }
.bar a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.6); margin-left:.4rem; }
.bar-x{
  position:absolute; right:12px; top:0; height:40px; width:40px;
  background:none; border:0; color:#fff; opacity:.7; cursor:pointer; font:inherit;
}
.bar-x:hover{ opacity:1; }
.nav[data-stuck="true"] .bar, .nav[data-bar="off"] .bar{ height:0; padding-top:0; padding-bottom:0; }

/* Interior pages (no dark hero for the nav to sit over) keep the nav solid from
   the top, otherwise its white text lands on a light page and disappears. */
body.page-interior .nav{
  background:rgba(11,15,17,.86);
  backdrop-filter:saturate(1.6) blur(18px);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);
  border-bottom-color:rgba(255,255,255,.08);
}
body.page-interior main{ padding-top:calc(40px + 4.2rem); }
@media (max-width:700px){ body.page-interior main{ padding-top:calc(40px + 3.2rem); } }
.nav-in{
  max-width:var(--col-wide); height:80px; margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; gap:2rem;
}
.nav .wordmark{ font-size:1.45rem; color:#fff; }
.nav-links{ display:flex; gap:2.1rem; margin-inline:auto; }
.nav-links a{
  position:relative;
  text-decoration:none; font-size:.95rem; font-weight:400; letter-spacing:-.005em;
  color:rgba(255,255,255,.86); transition:color .18s ease;
}
.nav-links a:hover{ color:#fff; }
.nav-links a::after{
  content:""; position:absolute; left:50%; bottom:-7px;
  width:4px; height:4px; border-radius:50%; background:#fff;
  opacity:0; transform:translateX(-50%) scale(.4);
  transition:opacity .25s ease, transform .25s var(--ease);
}
.nav-links a.is-active{ color:#fff; }
.nav-links a.is-active::after{ opacity:1; transform:translateX(-50%) scale(1); }
.nav-cta{
  display:inline-flex; align-items:center;
  font-size:.95rem; font-weight:500; text-decoration:none;
  color:var(--shade); background:#fff; white-space:nowrap;
  padding:.62rem 1.25rem; border-radius:var(--r-pill);
  transition:background .18s ease;
}
.nav-cta:hover{ background:#E6E6E6; }
.nav-signin{
  display:inline-flex; align-items:center;
  text-decoration:none; font-size:.95rem; font-weight:400;
  color:#fff; margin-right:.75rem;
  padding:.56rem 1.1rem; border:1px solid rgba(255,255,255,.28); border-radius:var(--r-pill);
  transition:border-color .18s ease;
}
.nav-signin:hover{ border-color:rgba(255,255,255,.6); }
/* mobile menu */
.nav-burger{
  display:none; flex:none; width:40px; height:40px; margin-left:.2rem;
  background:none; border:0; cursor:pointer; border-radius:10px;
  align-items:center; justify-content:center;
}
.nav-burger i{
  position:relative; display:block; width:18px; height:2px; border-radius:1px;
  background:#fff; transition:background .2s ease;
}
.nav-burger i::before, .nav-burger i::after{
  content:""; position:absolute; left:0; width:18px; height:2px; border-radius:1px;
  background:#fff; transition:transform .25s var(--ease), top .25s var(--ease);
}
.nav-burger i::before{ top:-6px; }
.nav-burger i::after{ top:6px; }
.nav[data-open="true"] .nav-burger i{ background:transparent; }
.nav[data-open="true"] .nav-burger i::before{ top:0; transform:rotate(45deg); }
.nav[data-open="true"] .nav-burger i::after{ top:0; transform:rotate(-45deg); }

.nav-sheet{
  display:none; position:absolute; top:100%; left:0; right:0; z-index:89;
  background:rgba(11,15,17,.98);
  backdrop-filter:saturate(1.8) blur(20px);
  -webkit-backdrop-filter:saturate(1.8) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:1rem var(--pad) 1.4rem;
}
.nav[data-open="true"] .nav-sheet{ display:block; }
.nav-sheet a{
  display:block; padding:.85rem 0;
  font-size:1.15rem; font-weight:600; letter-spacing:-.015em;
  color:#fff; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-sheet a:last-child{ border-bottom:0; }

@media (max-width:880px){
  .nav-links{ display:none; }
  .nav-in{ justify-content:space-between; height:64px; }
  .nav .wordmark{ font-size:1.3rem; }
  .nav-burger{ display:inline-flex; }
  .bar{ font-size:.8rem; line-height:1.35; height:auto; padding:.7rem 3.5rem .7rem var(--pad); text-align:left; }
  .bar a{ white-space:nowrap; }
  .bar-x{ right:4px; top:2px; }
  .bar-more{ display:none; }
}
@media (min-width:881px){ .nav-sheet{ display:none !important; } }
@media (max-width:480px){
  .nav-signin{ display:none; }
  .nav-in{ gap:.75rem; }
  .nav .wordmark{ font-size:1.2rem; }
  .wordmark .by{ display:none; }
  .nav-cta{ font-size:.875rem; padding:.5rem 1rem; }
}

/* ---------- buttons & links --------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  background:var(--ink); color:#fff;
  font-size:1rem; font-weight:500; letter-spacing:-.006em;
  text-decoration:none; border:0; cursor:pointer;
  padding:.8rem 1.5rem; border-radius:var(--r-pill);
  transition:background .2s ease, transform .2s var(--ease);
}
.btn:hover{ background:#303336; }
.btn:active{ transform:scale(.985); }
.btn-lg{ font-size:1.0625rem; padding:1rem 1.75rem; }
.on-black .btn, .hero .btn{ background:#fff; color:var(--shade); }
.on-black .btn:hover, .hero .btn:hover{ background:#E6E6E6; }
.on-black .btn-ghost{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); }
.on-black .btn-ghost:hover{ background:#fff; color:var(--shade); }

.tlink{
  display:inline-flex; align-items:center; gap:.28rem;
  color:var(--ink); text-decoration:underline; text-decoration-color:rgba(0,0,0,.28); text-underline-offset:.22em;
  font-size:1.0625rem; letter-spacing:-.006em;
  transition:text-decoration-color .18s ease;
}
.tlink:hover{ text-decoration-color:currentColor; }
.tlink .chev{ font-weight:600; transition:transform .18s var(--ease); }
.tlink:hover .chev{ transform:translateX(2px); }
.on-black .tlink{ color:#fff; text-decoration-color:rgba(255,255,255,.4); }

/* ---------- layout ------------------------------------------------------------ */
.wrap{ width:100%; max-width:var(--col-wide); margin-inline:auto; padding-inline:var(--pad); }
.wrap-t{ width:100%; max-width:var(--col-text); margin-inline:auto; padding-inline:var(--pad); }

.sect{ padding-block:var(--gap); }
.sect-black{ background:var(--black); color:var(--inv); }
.sect-black h2,.sect-black h3{ color:#fff; }

.on-black .eyebrow{ color:rgba(255,255,255,.7); }

.lead{
  font-size:var(--t-lead); line-height:1.42; font-weight:400;
  color:var(--ink-2); letter-spacing:-.014em;
  max-width:60ch; margin-top:1.3rem;
}
.sect-black .lead{ color:var(--inv-2); }

.center{ text-align:center; }
.center .lead{ margin-inline:auto; }

/* ========================= HERO ============================================== */
/* full-bleed jobsite footage behind the headline; the still is the poster,
   the reduced-motion fallback and the phone experience */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:clamp(9rem, 18vh, 12rem);
  padding-bottom:clamp(4rem, 9vh, 7rem);
  color:#fff; background:var(--shade);
}
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-still, .hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 55%;
  filter:saturate(.8) contrast(1.05) brightness(.85);
}
.hero-video{ opacity:0; transition:opacity 1.2s ease; }
.hero[data-video="ready"] .hero-video{ opacity:1; }
.hero-grade{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(10,14,16,.82) 0%, rgba(10,14,16,.5) 45%, rgba(10,14,16,.15) 100%),
    linear-gradient(180deg, rgba(10,14,16,.45) 0%, rgba(10,14,16,0) 30%, rgba(10,14,16,0) 60%, rgba(10,14,16,.55) 100%);
}
.hero h1{ color:#fff; max-width:14ch; }
.hero .lead{ color:rgba(255,255,255,.78); max-width:36ch; margin-top:1.6rem; font-size:clamp(1.1rem, 1.5vw, 1.25rem); }
.hero .hero-ctas{ justify-content:flex-start; margin-top:2.5rem; }
@media (max-width:700px){
  /* phones: the still fills the first screen, copy sits high, the figure on the slab stays visible below it */
  .hero-video{ display:none; }
  .hero{ min-height:100vh; min-height:100svh; justify-content:flex-start; padding-top:11rem; padding-bottom:3rem; }
  .hero h1{ font-size:2.5rem; }
  .hero .lead{ font-size:1.05rem; margin-top:1.2rem; }
  .hero .hero-ctas{ margin-top:1.8rem; }
  .hero-still{ object-position:50% 50%; }
  /* the desktop dashboard mock does not survive a 350px column; the lifecycle explorer carries the product here */
  /* long centred paragraphs read badly at this width */
  .wrap-t.center{ text-align:left; }
  .wrap-t.center .lead{ margin-inline:0; }
}
@media (prefers-reduced-motion:reduce){ .hero-video{ display:none; } }

.hero-ctas{
  margin-top:2.2rem;
  display:flex; gap:1.4rem; justify-content:center; align-items:center; flex-wrap:wrap;
}
.close-s .hero-note{ color:var(--inv-3); }
/* the product, framed, opens How it works */
/* ---------- app mock ----------------------------------------------------------- */
@media (max-width:880px){ .app{ grid-template-columns:1fr; } .app-side{ display:none; } }

@media (max-width:640px){ .app-top .proj{ display:none; } }

@media (max-width:640px){ .kpis{ grid-template-columns:repeat(2,1fr); } }
.pill{
  display:inline-flex; align-items:center; gap:5px;
  font-size:9.5px; font-weight:600; letter-spacing:.02em;
  padding:3px 9px; border-radius:var(--r-pill);
}
.pill i{ width:5px; height:5px; border-radius:50%; background:currentColor; }
.pill[data-s="overdue"]{ background:var(--red-wash); color:#C4271E; }
.pill[data-s="review"]{ background:var(--blue-wash); color:var(--blue); }
.pill[data-s="open"]{ background:#F0F0F2; color:var(--ink-2); }
.pill[data-s="risk"]{ background:var(--amber-wash); color:var(--amber); }
.pill[data-s="clear"]{ background:var(--green-wash); color:var(--green-deep); }
.pill[data-s="overdue"] i{ animation:blink 1.6s ease infinite; }
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@media (max-width:880px){ .tbl .hide-m{ display:none; } }
@media (max-width:560px){ .tbl .hide-s{ display:none; } }

@media (max-width:720px){ .stats{ grid-template-columns:1fr; } }
/* ---------- bento ---------------------------------------------------------------- */
@media (max-width:980px){ .bento{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .bento{ grid-template-columns:1fr; } }

.bcard .tlink{ margin-top:.9rem; font-size:.95rem; }
@media (max-width:640px){ .b-wide{ grid-column:span 1; } }

/* bento art: notification stack */
/* bento art: countdown ring */
html.js .ring .fgc{
  stroke-dashoffset:257.6;
  transition:stroke-dashoffset 1.5s var(--ease);
}

/* bento art: closeout doc */
/* the package assembling itself: lines write in, then the chip lands.
   One shared 15s cycle, staggered on --dd. */
html.js .bento[data-in="true"] .doc .ln{ animation:docline 15s var(--ease) var(--dd) infinite backwards; }
html.js .bento[data-in="true"] .doc .ok{ animation:docok 15s var(--ease) var(--dd) infinite backwards; }
@keyframes docline{
  0%       { transform:scaleX(0); }
  3.7%,92% { transform:scaleX(1); }
  96%,100% { transform:scaleX(0); }
}
@keyframes docok{
  0%       { opacity:0; transform:translateY(4px) scale(.94); }
  3.5%,92% { opacity:1; transform:none; }
  96%,100% { opacity:0; transform:translateY(4px) scale(.94); }
}
/* phone bento card */
.ph-brand .mark{ height:1.25em; width:auto; flex:none; }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(15,163,74,.55);} 100%{ box-shadow:0 0 0 7px rgba(15,163,74,0);} }
@keyframes tapDot{ 0%{opacity:0; transform:scale(.55);} 28%{opacity:1; transform:scale(1);} 100%{opacity:0; transform:scale(1);} }
@keyframes tapRing{ 0%{transform:scale(.5); opacity:.95;} 100%{transform:scale(2.8); opacity:0;} }

/* ---------- the problem, as a paired ledger -----------------------------------------
   No containers. The four complaints and the four answers correspond one to one, so
   the pairing is the layout: a row per pair, hairline rules, the old state receding
   and the new state at full contrast. Replaces the two cards this section used to be. */
@media (max-width:760px){
  /* One column, and both states get the same shape: a small mono label on its own
     line, then the sentence. The number joins the "before" label so the two sides
     stay symmetrical instead of one hanging-indenting and the other not. */
}

/* .ba-tag and friends survive on their own: /solutions still uses them for the
   today / on-Holdpoint labels in the coordination-layer comparison. */
.ba-tag{
  display:inline-flex; align-items:center;
  font-size:.8rem; font-weight:600; letter-spacing:-.005em;
  padding:.32rem .85rem; border-radius:var(--r-pill);
}
.before .ba-tag{ background:var(--grey); color:var(--ink-2); }
.after .ba-tag{ background:rgba(255,255,255,.1); color:#fff; }
.after h3{ color:#fff; }

/* ---------- first 30 days ----------------------------------------------------------- */
@media (max-width:880px){ .tl{ grid-template-columns:1fr; } }
/* ---------- black storytelling ---------------------------------------------------- */
.story .lead{ max-width:56ch; }
@media (max-width:880px){ .story-grid{ grid-template-columns:1fr; } }
/* ---------- layer diagram: field -> Holdpoint -> systems of record ------------------ */
/* Holdpoint is the layer being sold, so it carries the weight */
/* ---------- manifesto: one statement, full width ------------------------------------ */
.manifesto{ padding-block:clamp(5rem,9vw,8rem); }
.manifesto p{
  max-width:22ch; margin:0 auto; text-align:center;
  font-size:clamp(2rem,4.4vw,3.6rem); font-weight:300;
  line-height:1.1; letter-spacing:-.02em;
}

/* ---------- two side-by-side cards -------------------------------------------------- */
.duo{
  margin-top:clamp(2.4rem,4vw,3.4rem);
  display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr));
}
.duo-card{
  border:1px solid rgba(255,255,255,.16); border-radius:var(--r-card);
  padding:clamp(1.6rem,2.8vw,2.4rem);
}
.duo-card h3{ font-size:clamp(1.3rem,2vw,1.75rem); font-weight:300; color:#fff; }
.duo-card p{ margin-top:.6rem; color:var(--inv-2); font-size:1rem; max-width:34ch; }
.duo-card .tlink{ margin-top:1.1rem; display:inline-block; }
@media (max-width:760px){ .duo{ grid-template-columns:1fr; } }

/* ---------- industries: their big cycling word -------------------------------------- */
.industries{ text-align:center; padding-block:clamp(5rem,9vw,8rem); }
.ind-word{
  margin-top:clamp(1.6rem,3vw,2.4rem);
  font-size:clamp(3rem,8vw,6.5rem); font-weight:300;
  line-height:1; letter-spacing:-.03em; min-height:1.1em;
}
.ind-word span{ display:inline-block; transition:opacity .4s ease, transform .4s ease; }
.ind-word span[data-out]{ opacity:0; transform:translateY(-.12em); }
.ind-list{
  list-style:none; margin:clamp(2.2rem,4vw,3.2rem) 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem;
}
.ind-list li{
  border:1px solid var(--hair); border-radius:var(--r-pill);
  padding:.4rem .95rem; font-size:.92rem; color:var(--ink-2); white-space:nowrap;
}
.ind-list li b{
  margin-left:.45rem; font-family:var(--mono); font-size:.62rem; font-weight:500;
  letter-spacing:.1em; color:var(--ink); background:var(--grey);
  border-radius:4px; padding:.16rem .34rem; vertical-align:.08em;
}
@media (max-width:520px){ .ind-list li{ white-space:normal; } }

/* ---------- client band ------------------------------------------------------------- */
.clients{ text-align:center; padding-block:clamp(4rem,7vw,6rem); }
.clients h2{ font-size:clamp(1.6rem,2.8vw,2.4rem); line-height:1.1; }
.client-row{
  list-style:none; margin:clamp(2rem,3.5vw,2.8rem) 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(1.4rem,3.5vw,3.4rem);
}
.client-row li{
  font-size:clamp(1rem,1.5vw,1.35rem); font-weight:300;
  letter-spacing:-.01em; color:var(--ink); white-space:nowrap;
}
@media (max-width:520px){ .client-row{ gap:1rem 1.6rem; } }

/* ---------- stage cards: image first, one line, arrow ------------------------------- */
@media (max-width:900px){ .stages{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .stages{ grid-template-columns:1fr; } }

/* ---------- quote -------------------------------------------------------------------- */
/* ---------- security ------------------------------------------------------------------ */
@media (max-width:1020px){ .sec-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .sec-grid{ grid-template-columns:1fr; } }
/* ---------- close ---------------------------------------------------------------------- */
.close-s .hero-ctas{ margin-top:2.4rem; }

/* ---------- footer (dark) --------------------------------------------------------------- */
.foot{ background:var(--shade); color:var(--inv-2); font-size:.9rem; line-height:1.55; }
.foot a{ color:var(--inv-2); text-decoration:none; transition:color .18s ease; }
.foot a:hover{ color:#fff; }
.foot-in{ max-width:var(--col-wide); margin-inline:auto; padding-inline:var(--pad); }
.foot-cols{
  display:grid; gap:2.5rem 3rem; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  padding-block:3.2rem 2.6rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}
@media (max-width:880px){ .foot-cols{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-cols{ grid-template-columns:1fr; } }
.foot .wordmark{ font-size:1.15rem; color:#fff; }
.foot .about{ margin-top:.9rem; max-width:30ch; }
.foot-col .h{
  font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--inv-3); margin-bottom:.9rem;
}
.foot-col a{ display:block; padding-block:.3rem; }
.foot-base{
  display:flex; flex-wrap:wrap; gap:.8rem 2rem; align-items:center; justify-content:space-between;
  padding-block:1.5rem;
  font-size:.8rem; color:var(--inv-3);
}
.foot-base a{ color:var(--inv-3); }
.foot-base a:hover{ color:var(--inv-2); }
.foot-base .tag{ font-weight:400; color:#fff; letter-spacing:-.01em; }
.foot-base, .foot-base a{ color:var(--inv-2); }
.foot-base .tag em{ font-family:var(--serif); font-style:italic; font-size:1.1em; color:#fff; }
.foot-base .legal{ display:flex; gap:1.4rem; }

/* command center — bento art ------------------------------------------------------------
   A light-mode screenshot of the product. Charts draw themselves in when the
   card lands; .dash[data-live="true"] is set by the observer below. */
@media (max-width:620px){ .dash{ grid-template-columns:1fr; } }

@media (max-width:620px){ .dash-side{ display:none; } }
@keyframes blip{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.8);} }

.dash .chips{ display:flex; flex-wrap:wrap; gap:.28rem; margin-top:.6rem; }
.dash .chips span{
  font-size:.54rem; font-weight:500; color:var(--ink-2);
  border:1px solid var(--hair); border-radius:20px; padding:.2rem .48rem; white-space:nowrap;
}
.dash .chips span.on{ background:var(--green-deep); border-color:var(--green-deep); color:#fff; font-weight:600; }

/* KPI tiles */
@media (max-width:520px){ .dash .dkpis{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:.3rem; } }
/* chart panels */
@media (max-width:560px){ .dash .panels{ grid-template-columns:1fr; } }
.dash .panel .h{
  display:flex; align-items:baseline; justify-content:space-between; gap:.4rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:600; font-size:.47rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.dash .panel .h em{ font-style:normal; letter-spacing:0; text-transform:none; font-size:.58rem; color:var(--ink-2); }

/* donut */
/* bars */
/* the bar track is a definite 64px row, so the % heights aren't squeezed by
   the label underneath */
 .bars .b:nth-child(2) i{ transition-delay:.12s }
 .bars .b:nth-child(4) i{ transition-delay:.26s }
 .bars .b:nth-child(6) i{ transition-delay:.40s }
 .bars .b:nth-child(8) i{ transition-delay:.54s }

/* table */
/* ---------- interactive affordance (desktop pointers only) -------------------------------- */
/* ---------- personas ------------------------------------------------------------------ */
.p-grid{
  margin-top:clamp(2.8rem,5vw,4rem);
  display:grid; gap:1.1rem; grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:880px){ .p-grid{ grid-template-columns:1fr; } }
.pcard{
  background:var(--grey); border-radius:var(--r-card);
  padding:clamp(1.7rem,2.6vw,2.3rem);
  display:flex; flex-direction:column; text-align:left;
}
.pcard .pk{
  font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3);
}
.pcard .pw{ margin-top:.2rem; font-size:.85rem; color:var(--ink-3); }
.pcard h3{ margin-top:1rem; font-size:clamp(1.25rem,1.8vw,1.5rem); }
.pcard p{ margin-top:.7rem; color:var(--ink-2); font-size:.97rem; line-height:1.55; }
.pcard .src{ margin-top:.6rem; font-size:.74rem; color:var(--ink-3); font-style:italic; }
.pcard .tlink{ margin-top:auto; padding-top:1.2rem; font-size:.95rem; }

/* ---------- comparison: the coordinator vs the coordination layer ---------------------- */
.cmp{
  margin-top:clamp(2.8rem,5vw,4rem);
  display:grid; gap:1.1rem; grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:880px){ .cmp{ grid-template-columns:1fr; } }
.cmp-card{
  border-radius:var(--r-card); padding:clamp(1.7rem,2.6vw,2.3rem); text-align:left;
  background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.05), 0 2px 10px rgba(0,0,0,.03);
}
.cmp-card.after{ background:var(--black); box-shadow:none; }
.cmp-card h3{ margin-top:1.1rem; font-size:clamp(1.2rem,1.7vw,1.4rem); }
.cmp-card.after h3{ color:#fff; }
.cmp-rows{ margin-top:1.2rem; display:flex; flex-direction:column; }
.cmp-rows > div{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.65rem 0; border-bottom:1px solid rgba(0,0,0,.06);
  font-size:.95rem; color:var(--ink-2);
}
.cmp-card.after .cmp-rows > div{ border-bottom-color:rgba(255,255,255,.1); color:var(--inv-2); }
.cmp-rows b{ font-weight:600; color:var(--ink); }
.cmp-card.after .cmp-rows b{ color:#fff; }
.cmp-out{ margin-top:1.2rem; font-weight:500; font-size:.98rem; color:#C4271E; }
.cmp-card.after .cmp-out{ color:#fff; }

/* ---------- governance ----------------------------------------------------------------- */
@media (max-width:720px){ .gov-grid{ grid-template-columns:1fr; } }
/* ---------- integrations FAQ ------------------------------------------------------------- */
@media (max-width:880px){ .faq{ grid-template-columns:1fr; } }
/* ---------- print: the page is forwarded as a PDF more than it is browsed ---------- */
@media print{
  html.js .rv, html.js .frame{ opacity:1 !important; transform:none !important; }
  .nav{ position:absolute; }
}

/* ---------- reveal ----------------------------------------------------------------------- */
html.js .rv{ opacity:0; transform:translateY(18px); }
html.js .rv[data-in="true"]{ opacity:1; transform:none; transition:opacity .7s ease, transform .85s var(--ease); }
html.js .rv[data-in="true"].d1{ transition-delay:.08s; }
html.js .rv[data-in="true"].d2{ transition-delay:.16s; }
html.js .rv[data-in="true"].d3{ transition-delay:.24s; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  html.js .rv{ opacity:1; transform:none; }
}

/* ============================================================================
   PAGE BLOCKS  —  built to the reference site's measurements:
   Light display type at 82/48/32, square cards, 10px radius, 16px gutters.
   ========================================================================== */

/* ---------- clients ---------------------------------------------------- */
.clients{ text-align:center; padding-block:clamp(4rem,7vw,6rem); }
.clients h2{ font-size:clamp(1.6rem,2.8vw,2.4rem); line-height:1.1; }
.client-row{
  list-style:none; margin:clamp(2rem,3.5vw,2.8rem) 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1.4rem,3.5vw,3.4rem);
}
.client-row li{
  font-size:clamp(1rem,1.5vw,1.35rem); font-weight:300;
  letter-spacing:-.01em; white-space:nowrap;
}
@media (max-width:520px){ .client-row{ gap:1rem 1.6rem; } }

/* ---------- card grid --------------------------------------------------- */
.cards{ padding-block:clamp(4.5rem,8vw,7rem); }
.cards h2{ font-size:clamp(2rem,4vw,3rem); line-height:1.06; }
.cardgrid{
  list-style:none; margin:clamp(2.6rem,4.5vw,3.6rem) 0 0; padding:0;
  display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr));
}
.cardgrid a{ display:block; text-decoration:none; color:inherit; }
.cardgrid img{
  display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:10px; background:#0B0F11;
}
.cardgrid b{
  display:block; margin-top:1.1rem;
  font-size:clamp(1.2rem,1.7vw,1.6rem); font-weight:300; letter-spacing:-.014em;
}
.cardgrid b::after{ content:" \2197"; color:var(--ink-3); }
.cardgrid span{ display:block; margin-top:.35rem; font-size:.95rem; color:var(--ink-2); max-width:32ch; }
@media (hover:hover){
  .cardgrid a{ transition:opacity .25s ease; }
  .cardgrid a:hover{ opacity:.7; }
}
@media (max-width:900px){ .cardgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .cardgrid{ grid-template-columns:1fr; } }

/* ---------- manifesto --------------------------------------------------- */
.manifesto{ padding-block:clamp(5rem,9vw,8rem); }
.manifesto p{
  max-width:22ch; margin:0 auto; text-align:center;
  font-size:clamp(2rem,4.4vw,3.6rem); font-weight:300;
  line-height:1.1; letter-spacing:-.02em;
}

/* ---------- the OS block ------------------------------------------------ */
.os{ text-align:center; padding-block:clamp(4.5rem,8vw,7rem); }
.chips{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem;
  max-width:780px; margin-inline:auto;
}
.chips li{
  border:1px solid var(--hair); border-radius:var(--r-pill);
  padding:.4rem .95rem; font-size:.9rem; color:var(--ink-2); white-space:nowrap;
}
.os-art{
  display:block; width:min(100%,420px); height:auto; aspect-ratio:1/1;
  margin:clamp(2rem,4vw,3rem) auto 0; border-radius:14px;
}
.os h2{ margin-top:clamp(1.8rem,3vw,2.6rem); font-size:clamp(2rem,4vw,3rem); line-height:1.06; }
.os .tlink{ margin-top:1.4rem; display:inline-block; }

/* ---------- two cards --------------------------------------------------- */
.duo-s{ padding-block:clamp(4.5rem,8vw,7rem); }
.duo{ display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.duo-card{
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-card);
  padding:clamp(1.4rem,2.4vw,2rem);
}
.duo-card img{
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border-radius:10px; margin-bottom:1.4rem;
}
.duo-card h3{ font-size:clamp(1.3rem,2vw,1.75rem); font-weight:300; color:#fff; }
.duo-card p{ margin-top:.6rem; color:var(--inv-2); font-size:1rem; max-width:34ch; }
.duo-card .tlink{ margin-top:1.1rem; display:inline-block; }
@media (max-width:760px){ .duo{ grid-template-columns:1fr; } }

/* ---------- industries -------------------------------------------------- */
.industries{ text-align:center; padding-block:clamp(5rem,9vw,8rem); }
.ind-word{
  margin-top:clamp(1.6rem,3vw,2.4rem);
  font-size:clamp(3rem,8vw,6.5rem); font-weight:300;
  line-height:1; letter-spacing:-.03em; min-height:1.1em;
}
.ind-word span{ display:inline-block; transition:opacity .4s ease, transform .4s ease; }
.ind-word span[data-out]{ opacity:0; transform:translateY(-.12em); }
.ind-list{
  list-style:none; margin:clamp(2.2rem,4vw,3.2rem) 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem;
}
.ind-list li{
  border:1px solid var(--hair); border-radius:var(--r-pill);
  padding:.4rem .95rem; font-size:.92rem; color:var(--ink-2); white-space:nowrap;
}
.ind-list li b{
  margin-left:.45rem; font-family:var(--mono); font-size:.62rem; font-weight:500;
  letter-spacing:.1em; color:var(--ink); background:var(--grey);
  border-radius:4px; padding:.16rem .34rem; vertical-align:.08em;
}
@media (max-width:520px){ .ind-list li{ white-space:normal; } }


/* ---------- photographic treatment: one grade, one grain, on every frame ------------- */
.ph{
  position:relative; margin:0; border-radius:10px; overflow:hidden; background:#0B0F11;
  aspect-ratio:1/1;
}
.cardgrid .ph img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0; aspect-ratio:auto;
  filter:saturate(.8) contrast(1.06) brightness(.9);
  transform:scale(1.001); transition:transform .9s cubic-bezier(.32,.72,0,1);
}
.ph::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(4,10,14,.55) 0%, rgba(4,10,14,.05) 42%, rgba(4,10,14,.28) 100%);
}
.ph::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.16; mix-blend-mode:overlay;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .8 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.cardgrid .ph b{
  position:absolute; z-index:2; top:1.15rem; left:1.3rem; right:1.2rem; margin:0;
  display:flex; justify-content:space-between; gap:1rem; align-items:flex-start;
  color:#fff; font-size:clamp(1.3rem,1.9vw,1.75rem); font-weight:300; letter-spacing:-.018em; line-height:1.15;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.cardgrid .ph b::after{ content:"\2197"; color:#fff; font-size:1.05em; }
.cardgrid > li > a > span{ margin-top:.9rem; }
@media (hover:hover){
  .cardgrid a:hover{ opacity:1; }
  .cardgrid a:hover .ph img{ transform:scale(1.035); }
}

/* ---------- client band: official marks, one tone --------------------------------------- */
.clients [data-has-logo] img{
  display:block; height:34px; width:auto; max-width:200px; margin:0 auto;
  filter:grayscale(1) contrast(1.05); opacity:.72; transition:opacity .25s ease, filter .25s ease;
}
.clients [data-has-logo]:hover img{ opacity:1; filter:none; }
@media (max-width:640px){ .clients [data-has-logo] img{ height:24px; } }

/* photographic treatment on the coordination-layer art and the duo cards */
.os-ph{ width:min(100%,420px); margin:clamp(2rem,4vw,3rem) auto 0; border-radius:14px; }
.os-ph img.os-art{ position:absolute; inset:0; width:100%; height:100%; margin:0; object-fit:cover; border-radius:0; filter:saturate(.8) contrast(1.06) brightness(.9); }
.duo-card .duo-ph{ aspect-ratio:16/9; border-radius:10px; margin:0 0 1.4rem; }
.duo-card .duo-ph img{ position:absolute; inset:0; width:100%; height:100%; margin:0; object-fit:cover; border-radius:0; aspect-ratio:auto; filter:saturate(.8) contrast(1.06) brightness(.9); }

/* interim crops until the queued regenerations land: keep subjects clear of the title,
   and lift the aerial so it reads at card size */
.cardgrid li:nth-child(3) .ph img{ object-position:22% 50%; }
.cardgrid li:nth-child(4) .ph img{ object-position:26% 50%; }
.os-ph img.os-art{ filter:saturate(.85) contrast(1.2) brightness(1.18); }

/* one tint over every frame so mixed source lighting reads as one family:
   a cool graphite base, letting the grade keep only a warm highlight */
.ph::before{
  background:
    linear-gradient(180deg, rgba(4,10,14,.58) 0%, rgba(4,10,14,.08) 42%, rgba(4,10,14,.32) 100%),
    linear-gradient(0deg, rgba(20,44,52,.34), rgba(20,44,52,.34));
}
.ph img{ filter:saturate(.68) contrast(1.08) brightness(.9) !important; }
.os-ph img.os-art{ filter:saturate(.75) contrast(1.2) brightness(1.18) !important; }

/* the coordination layer, literally: Holdpoint pins over the live decks */
.os-ph{ isolation:isolate; }
.os-ph img.os-art{ transform:scale(1.28); transform-origin:58% 58%; }
.os-ph::before{ background:linear-gradient(180deg, rgba(4,10,14,.25) 0%, rgba(4,10,14,.05) 50%, rgba(4,10,14,.35) 100%), linear-gradient(0deg, rgba(20,44,52,.28), rgba(20,44,52,.28)); }
.pin-hp{
  position:absolute; left:var(--x); top:var(--y); z-index:3; transform:translate(-9px,-9px);
  display:grid; grid-template-columns:18px auto; grid-template-rows:auto auto; column-gap:.5rem; align-items:center;
  text-align:left; pointer-events:none;
}
.pin-hp i{
  grid-row:1 / span 2; width:18px; height:18px; border-radius:50%;
  background:#fff; border:5px solid var(--green,#0FA34A); box-shadow:0 0 0 2px rgba(0,0,0,.35);
  position:relative;
}
.pin-hp i::after{
  content:""; position:absolute; inset:-9px; border-radius:50%; border:1.5px solid var(--green,#0FA34A); opacity:0;
  animation:pinpulse 2.6s ease-out infinite;
}
.pin-hp[data-s="review"] i{ border-color:#E0A21B; } .pin-hp[data-s="review"] i::after{ border-color:#E0A21B; }
.pin-hp[data-s="overdue"] i{ border-color:#E0352B; } .pin-hp[data-s="overdue"] i::after{ border-color:#E0352B; animation-duration:1.6s; }
.pin-hp b, .pin-hp small{
  display:block; white-space:nowrap; padding:0 .55rem; background:#F5F5F7; color:#111;
}
.pin-hp b{ font:500 12px/1.9 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.01em; border-radius:4px 4px 0 0; }
.pin-hp small{ font:400 11px/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; color:#3A3A3E; border-radius:0 0 4px 4px; border-top:1px solid rgba(0,0,0,.08); }
.pin-hp[data-s="overdue"] small{ color:#B4271F; font-weight:500; }
@keyframes pinpulse{ 0%{ transform:scale(.6); opacity:.9 } 100%{ transform:scale(1.5); opacity:0 } }
@media (prefers-reduced-motion:reduce){ .pin-hp i::after{ animation:none; } }
@media (max-width:480px){ .pin-hp b{ font-size:11px } .pin-hp small{ font-size:10px } }

/* stacked marks need more height to stay legible; wide marks keep the shared cap height */
.clients [data-logo="ames"][data-has-logo] img{ height:58px; }
.clients [data-logo="fenagh"][data-has-logo] img{ height:40px; }
.clients ul, .clients .client-list{ align-items:center; }
.clients [data-logo="hoffman"][data-has-logo] img{ height:44px; }
.clients [data-logo="4leaf"][data-has-logo] img{ height:36px; }
.clients [data-logo="cts"][data-has-logo] img{ height:38px; }

/* OS block: headline, one wide frame, the vocabulary as its caption. Closes the gap after the manifesto. */
.manifesto{ padding-bottom:clamp(2.5rem,4.5vw,4rem); }
.os{ padding-top:clamp(2.5rem,4.5vw,4rem); }
.os h2{ margin-top:0; }
.os-ph{ width:min(100%,1000px); aspect-ratio:16/9; margin:clamp(2rem,3.6vw,3rem) auto 0; border-radius:16px; }
.os-ph img.os-art{ transform:scale(1.12); transform-origin:56% 55%; }
.os .chips{ margin-top:clamp(1.4rem,2.4vw,2rem); max-width:1000px; }
.os .chips li{ font-size:.85rem; padding:.38rem .9rem; color:var(--ink-3,#6E6E73); }
.os .tlink{ margin-top:1.6rem; }
@media (max-width:640px){ .os-ph{ aspect-ratio:4/3; } .pin-hp b{ font-size:11px } .pin-hp small{ font-size:10px } }

/* transparent header over footage: a scrim keeps the white nav legible when a light
   frame passes underneath. The scrolled and open states are already solid. */
.nav:not([data-stuck="true"]):not([data-open="true"])::before{
  content:""; position:absolute; left:0; right:0; top:0; bottom:-72px; z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(4,8,10,.78) 0%, rgba(4,8,10,.55) 45%, rgba(4,8,10,.22) 78%, rgba(4,8,10,0) 100%);
}
.nav:not([data-stuck="true"]) .wordmark,
.nav:not([data-stuck="true"]) .nav-links a,
.nav:not([data-stuck="true"]) .nav-signin{ text-shadow:0 1px 2px rgba(0,0,0,.45); }

/* hero copy over footage: deepen the grade where the text sits (bottom-left) so light
   frames never wash out the headline and lead */
.hero-grade{
  background:
    linear-gradient(90deg, rgba(10,14,16,.9) 0%, rgba(10,14,16,.66) 42%, rgba(10,14,16,.22) 100%),
    linear-gradient(180deg, rgba(10,14,16,.5) 0%, rgba(10,14,16,0) 28%, rgba(10,14,16,.15) 55%, rgba(10,14,16,.72) 100%);
}
.hero .lead{ color:rgba(255,255,255,.9); }

/* a soft dark plate behind the hero copy: busy or bright frames can no longer sit
   directly under the lead */
.hero > .wrap{ position:relative; z-index:0; }
.hero > .wrap::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:-4rem; right:35%; top:-3rem; bottom:-2.5rem;
  background:radial-gradient(ellipse at 28% 62%, rgba(10,14,16,.78) 0%, rgba(10,14,16,.5) 48%, rgba(10,14,16,0) 82%);
  filter:blur(22px);
}
@media (max-width:700px){ .hero > .wrap::before{ right:-2rem; } }

/* stage cards: the description lives inside the frame, bottom-left, under a deeper foot gradient */
.cardgrid > li > a{ position:relative; display:block; }
.cardgrid .ph::before{
  background:
    linear-gradient(180deg, rgba(4,10,14,.58) 0%, rgba(4,10,14,.06) 40%, rgba(4,10,14,.22) 68%, rgba(4,10,14,.78) 100%),
    linear-gradient(0deg, rgba(20,44,52,.34), rgba(20,44,52,.34));
}
.cardgrid > li > a > span{
  position:absolute; z-index:2; left:1.3rem; right:1.3rem; bottom:1.15rem; margin:0;
  color:rgba(255,255,255,.9); font-size:.95rem; line-height:1.45; max-width:30ch;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}
@media (max-width:560px){ .cardgrid > li > a > span{ font-size:.9rem; } }

/* industries word: one line, always; the script scales the size so the longest label fits */
.ind-word{ white-space:nowrap; position:relative; }

/* interior pages have a solid header from the top; no scrim needed, and it would smear the light page */
body.page-interior .nav::before{ display:none; }
.clients [data-logo="inourscope"][data-has-logo] img{ height:30px; }