/* Shared styles for every page except portal.html (which has its own).
   Home-only pieces (hero, image band, splash) stay inline in index.html.
   Palette: "Fog & slate". */
:root{
  --bg:#DBDCD8; --bg-raised:#EAEAE7; --fg:#191C1B; --fg-muted:#5C615F;
  --line:#C4C5C1; --accent:#3E4A50; --accent-fg:#EAEAE7;
  /* inverted panel (dark, for contrast against the light page) */
  --panel-bg:#1E2220; --panel-fg:#E7E9E6; --panel-muted:#9AA09C; --panel-line:#333936; --panel-accent:#93A4A9;
  color-scheme:light;

  --hero-fg:#F5F6F4; --hero-muted:#D2D6D3;

  --maxw:1080px;
  --f-display:"Archivo",system-ui,-apple-system,Segoe UI,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{ scroll-padding-top:66px }
html,body{margin:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; letter-spacing:.005em;
  transition:background .5s ease, color .5s ease;
}
a{color:inherit}
img{display:block; max-width:100%}
::selection{background:var(--accent); color:var(--accent-fg)}

.wrap{
  max-width:var(--maxw); margin:0 auto;
  padding-left:max(22px, env(safe-area-inset-left,0px));
  padding-right:max(22px, env(safe-area-inset-right,0px));
}

/* ---------- reveal / stagger ---------- */
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.js .reveal.in{opacity:1; transform:none}
.js .stagger > *{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.js .stagger.in > *{opacity:1; transform:none}
.js .stagger.in > *:nth-child(2){transition-delay:.08s}
.js .stagger.in > *:nth-child(3){transition-delay:.16s}
.js .stagger.in > *:nth-child(4){transition-delay:.24s}

/* ---------- fixed top bar: transparent over the dark page top → light lockup on scroll ---------- */
.topbar{ position:fixed; top:0; left:0; right:0; z-index:50;
  padding-top:env(safe-area-inset-top,0px); background:transparent; border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease; }
.topbar .bar{ max-width:var(--maxw); margin:0 auto;
  padding-left:max(22px,env(safe-area-inset-left,0px)); padding-right:max(22px,env(safe-area-inset-right,0px));
  display:flex; align-items:center; justify-content:space-between; gap:18px; padding-block:16px;
  transition:padding .35s ease; }
.mark{ display:flex; align-items:center; gap:12px; font-family:var(--f-display); text-decoration:none;
  font-weight:800; letter-spacing:.2em; font-size:.82rem; color:#F5F6F4; transition:color .35s ease; }
.mark .lt{ font-weight:300; }
.brandbear{ height:15px; width:auto; display:block; }
.bear-dark{ display:none; }
.nav{ display:flex; align-items:center; gap:24px; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.08em;
  color:#D2D6D3; text-transform:uppercase; transition:color .35s ease; }
.nav a{ text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px; }
.nav a:hover, .nav a[aria-current="page"]{ border-color:currentColor; }
.nav .nav-cta{ border:1px solid rgba(255,255,255,.4); padding:8px 13px; }
.nav .nav-cta:hover{ border-color:currentColor; }
/* Desktop: Services/Industries/Security/Support sit at the bar's true centre (not the gap
   between the wordmark and Client login + Contact, which are different widths).
   Mobile: the wrapper dissolves so the menu panel lists every link as before. */
@media (min-width:941px){
  .topbar .bar{ position:relative; }
  .nav-main{ position:absolute; inset:0; margin-inline:auto; width:fit-content;
    display:flex; align-items:center; gap:24px; }
}
.menu-btn{ display:none; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  background:transparent; color:#F5F6F4; border:1px solid rgba(255,255,255,.4); padding:8px 13px; cursor:pointer; }
.topbar.solid, .topbar.open{ background:#ECECE8; border-bottom-color:rgba(0,0,0,.08); box-shadow:0 1px 24px rgba(0,0,0,.07); }
.topbar.solid .bar{ padding-block:11px; }
.topbar.solid .mark, .topbar.open .mark{ color:#161717; }
.topbar.solid .nav, .topbar.open .nav{ color:#3F4442; }
.topbar.solid .nav .nav-cta{ border-color:rgba(0,0,0,.28); }
.topbar.solid .menu-btn, .topbar.open .menu-btn{ color:#161717; border-color:rgba(0,0,0,.28); }
.topbar.solid .bear-light, .topbar.open .bear-light{ display:none; }
.topbar.solid .bear-dark, .topbar.open .bear-dark{ display:block; }
@media (max-width:940px){
  .menu-btn{ display:block; }
  .nav{ display:none; }
  .nav-main{ display:contents; }
  .topbar.open .nav{ display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; left:0; right:0; top:100%; background:#ECECE8; border-bottom:1px solid rgba(0,0,0,.08);
    padding:6px max(22px,env(safe-area-inset-left,0px)) 20px; box-shadow:0 18px 30px rgba(0,0,0,.08); }
  .topbar.open .nav a{ padding:14px 0; border-bottom:1px solid rgba(0,0,0,.08); font-size:.8rem; }
  .topbar.open .nav .nav-cta{ margin-top:16px; text-align:center; border:1px solid #161717; padding:13px; }
}

.eye{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fg-muted); display:flex; align-items:center; gap:12px; }
.eye::before{ content:""; width:26px; height:1px; background:var(--accent); flex:0 0 auto; transition:background .5s ease; }

.lead{ margin:22px 0 0; font-size:clamp(1rem,1.6vw,1.12rem); color:var(--fg-muted);
  max-width:58ch; line-height:1.55; }
.cta-row{ margin-top:34px; display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; }
.btn{ font-family:var(--f-body); font-size:1rem; font-weight:500; text-decoration:none;
  background:#F5F6F4; color:#111417; padding:13px 22px; transition:background .15s ease; }
.btn:hover{ background:#FFFFFF; }

/* ---------- generic section ---------- */
section.block{ border-top:1px solid var(--line); padding-block:clamp(52px,8vw,84px); transition:background .5s ease, border-color .5s ease; }
.block h2{ font-family:var(--f-display); font-weight:700; letter-spacing:-.015em;
  font-size:clamp(1.7rem,4vw,2.7rem); line-height:1.08; text-wrap:balance; margin:22px 0 0; max-width:20ch; }
.block .intro{ margin:20px 0 0; color:var(--fg-muted); max-width:62ch; font-size:1.05rem; }

/* ---------- inverted panel ---------- */
.panel{ background:var(--panel-bg); color:var(--panel-fg);
  --fg:var(--panel-fg); --fg-muted:var(--panel-muted); --line:var(--panel-line); --accent:var(--panel-accent);
  border-top:1px solid var(--panel-line); }

/* ---------- services ---------- */
.svc{ margin-top:52px; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.svc > div{ background:var(--bg); padding:30px clamp(20px,3vw,34px); transition:background .3s ease; }
.svc > div:hover{ background:var(--bg-raised); }
.svc .tag{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; color:var(--accent); text-transform:uppercase; }
.svc h3{ font-family:var(--f-display); font-weight:700; font-size:1.3rem; margin:16px 0 0; letter-spacing:-.01em; }
.svc p{ margin:12px 0 0; color:var(--fg-muted); font-size:.97rem; line-height:1.55; }
.svc .more{ display:inline-block; margin-top:18px; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px; }
@media(min-width:720px){ .svc{ grid-template-columns:repeat(3,1fr); } }

/* ---------- process ---------- */
.steps{ margin-top:48px; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.step{ background:var(--bg); padding:26px clamp(20px,3vw,32px); display:grid; gap:4px 26px;
  grid-template-columns:auto 1fr; align-items:baseline; transition:background .3s ease; }
.step:hover{ background:var(--bg-raised); }
.step .num{ font-family:var(--f-mono); font-size:.8rem; color:var(--accent); letter-spacing:.1em; }
.step h4{ font-family:var(--f-display); font-weight:600; font-size:1.12rem; margin:0; letter-spacing:-.005em; }
.step p{ grid-column:2; margin:8px 0 0; color:var(--fg-muted); font-size:.96rem; max-width:64ch; }

/* ---------- verticals ---------- */
.verts{ margin-top:44px; display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.vert{ border-left:2px solid var(--accent); padding:4px 0 6px 18px; }
.vert .vt{ font-family:var(--f-display); font-weight:600; font-size:1.05rem; }
.vert .vd{ margin-top:6px; color:var(--fg-muted); font-size:.9rem; }

/* ---------- principles ---------- */
.prins{ margin-top:48px; display:grid; gap:34px; }
@media(min-width:720px){ .prins{ grid-template-columns:repeat(3,1fr); gap:40px; } }
.prin .pe{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; color:var(--accent); text-transform:uppercase; }
.prin h3, .prin h4{ font-family:var(--f-display); font-weight:700; font-size:1.25rem; margin:14px 0 0; letter-spacing:-.01em; }
.prin > h3:first-child{ margin-top:0; }
.prin p{ margin:12px 0 0; color:var(--fg-muted); font-size:.96rem; line-height:1.55; }

/* ---------- inner pages: dark page head under the top bar ---------- */
.page-head{ background:#000; color:var(--hero-fg);
  padding:calc(clamp(120px,16vw,170px) + env(safe-area-inset-top,0px)) 0 clamp(56px,8vw,88px); }
.page-head .eye{ color:#9AA09C; }
.page-head .eye::before{ background:#9AA09C; }
/* same size as the home hero's h1 */
.page-head h1{ font-family:var(--f-display); font-weight:700; color:var(--hero-fg);
  font-size:clamp(2.2rem,3.9vw,3.6rem); line-height:1.02; letter-spacing:-.025em;
  text-wrap:balance; margin:22px 0 0; max-width:18ch; }
.page-head .lead{ color:var(--hero-muted); }
.page-head h1.wide{ max-width:26ch; }
.page-head .lead + .lead{ margin-top:14px; }
/* a section label that is a real heading: .eye look, none of the .block h2 size */
.block h2.eye{ font-family:var(--f-mono); font-weight:400; font-size:.74rem; letter-spacing:.2em; line-height:1.6;
  margin:0; max-width:none; }

/* long-form text */
.prose{ max-width:68ch; }
.prose h2{ font-family:var(--f-display); font-weight:700; letter-spacing:-.015em;
  font-size:clamp(1.4rem,3vw,1.9rem); line-height:1.15; margin:48px 0 0; }
.prose h2:first-child{ margin-top:0; }
.prose p, .prose ul{ margin:16px 0 0; color:var(--fg-muted); }
.prose li + li{ margin-top:8px; }

/* FAQ */
.faq{ margin-top:8px; border-bottom:1px solid var(--line); max-width:80ch; }
.faq details{ border-top:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; padding:22px 40px 22px 0; position:relative;
  font-family:var(--f-display); font-weight:600; font-size:1.12rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:4px; top:18px; font-family:var(--f-mono); font-size:1.2rem; color:var(--accent); }
.faq details[open] summary::after{ content:"\2212"; }
.faq .ans{ padding:0 0 24px; color:var(--fg-muted); max-width:68ch; }
.faq .ans p, .faq .ans ul{ margin:0 0 12px; }
.faq .ans > :last-child{ margin-bottom:0; }
.faq .ans ul{ padding-left:20px; }
.faq .ans li + li{ margin-top:10px; }
.faq .ans strong{ color:var(--fg); font-weight:600; }
/* FAQ topics: topic name on the left (sticky while its questions scroll), questions on the right */
.faq-group{ display:grid; gap:14px; }
.faq-group + .faq-group{ margin-top:clamp(48px,7vw,72px); }
.faq-group .faq-cat{ margin:0; max-width:none; line-height:1.6; font-family:var(--f-mono); font-weight:500; font-size:.74rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); }
@media(min-width:900px){
  .faq-group{ grid-template-columns:minmax(0,.9fr) minmax(0,2.4fr); gap:48px; align-items:start; }
  .faq-group .faq-cat{ position:sticky; top:96px; padding-top:24px; }
  .faq-group .faq{ margin-top:0; }
}

/* Services dropdown in the top nav. The panel matches the bar: dark while the bar is
   transparent over the black page top, light once the bar goes solid on scroll.
   Mobile (inside the open menu): the submenu sits indented under Services, always shown. */
.has-menu{ position:relative; display:flex; align-items:center; }
.has-menu > .nav-top{ display:inline-flex; align-items:center; gap:7px; }
.caret{ font-size:.7em; line-height:1; opacity:.75; transition:transform .2s ease; }
.submenu{ position:absolute; top:calc(100% + 16px); left:-14px; min-width:214px; padding:8px; z-index:60;
  display:none; flex-direction:column;
  background:#0E1210; border:1px solid rgba(255,255,255,.14); box-shadow:0 22px 48px rgba(0,0,0,.55); }
.submenu::before{ content:""; position:absolute; top:-16px; left:0; right:0; height:16px; }  /* hover bridge */
.has-menu:hover .submenu, .has-menu:focus-within .submenu{ display:flex; }
.has-menu:hover .caret{ transform:rotate(180deg); }
.submenu a{ padding:11px 13px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:#C9CDCA; text-decoration:none; border-bottom:0; white-space:nowrap; transition:background .15s ease, color .15s ease; }
.submenu a:hover, .submenu a[aria-current="page"]{ background:rgba(255,255,255,.08); color:#FFFFFF; border-color:transparent; }
/* bar has scrolled to its solid light state → light panel */
.topbar.solid .submenu{ background:#ECECE8; border-color:rgba(0,0,0,.1); box-shadow:0 20px 44px rgba(0,0,0,.16); }
.topbar.solid .submenu a{ color:#3F4442; }
.topbar.solid .submenu a:hover, .topbar.solid .submenu a[aria-current="page"]{ background:rgba(0,0,0,.06); color:#161717; }
@media (max-width:940px){
  .topbar.open .nav .has-menu{ flex-direction:column; align-items:stretch; }
  .topbar.open .nav .has-menu .caret{ display:none; }
  .topbar.open .nav .submenu{ position:static; display:flex; background:transparent; border:0; box-shadow:none; padding:0 0 0 16px; }
  .topbar.open .nav .submenu::before{ display:none; }
  /* the mobile menu panel is light, so the indented links are dark regardless of scroll state */
  .topbar.open .nav .submenu a{ padding:12px 0; border-bottom:1px solid rgba(0,0,0,.08); font-size:.74rem; color:#3F4442; }
  .topbar.open .nav .submenu a:hover, .topbar.open .nav .submenu a[aria-current="page"]{ background:transparent; color:#161717; }
}

/* Per-section line graphic on the services overview: heading left, mark right;
   stacks with the mark on top below 640px. Stroke uses the section's --accent,
   so it adapts across the light and dark bands on its own. */
.sec-head{ display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,4vw,48px); }
.sec-head h2{ margin:0; }
.sec-icon{ flex:0 0 auto; width:clamp(72px,9vw,118px); height:clamp(72px,9vw,118px);
  color:var(--accent); opacity:.9; transition:color .5s ease; }
@media (max-width:640px){
  .sec-head{ flex-direction:column-reverse; align-items:flex-start; gap:18px; }
  .sec-icon{ width:62px; height:62px; }
}

/* "More on …" link at the foot of an overview section */
a.section-more{ display:inline-block; margin-top:28px; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:3px; color:var(--accent); }
a.section-more:hover{ color:var(--fg); }

/* in-page jump links, on the dark page head */
.jump{ display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }
.jump a{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  color:#D2D6D3; border:1px solid rgba(255,255,255,.28); padding:10px 14px; transition:color .15s ease, border-color .15s ease; }
.jump a:hover{ color:#F5F6F4; border-color:rgba(255,255,255,.7); }

/* industry intro + photo: photo on top on phones, beside the text from 900px,
   alternating sides (.flip puts it on the left). Also used for the animal photo on each
   service page, where .start lines the photo up with the heading because the copy beside it is long.
   Each <img> sets its own crop focus in --pos (desktop, 4:5) and --pos-sm (phone, 3:2). */
.ind-top{ display:grid; gap:28px; }
.ind-photo{ margin:0; order:-1; aspect-ratio:3/2; overflow:hidden; background:#2A2E31; }
.ind-photo img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos-sm, 50% 50%);
  filter:grayscale(1); }
@media(min-width:900px){
  .ind-top{ grid-template-columns:minmax(0,1fr) minmax(0,.72fr); gap:clamp(40px,6vw,72px); align-items:center; }
  .ind-top.flip{ grid-template-columns:minmax(0,.72fr) minmax(0,1fr); }
  .ind-top.start{ align-items:start; }
  .ind-photo{ order:0; aspect-ratio:4/5; }
  .ind-top.flip .ind-photo{ order:-1; }
  .ind-photo img{ object-position:var(--pos, 50% 50%); }
}
/* Scroll motion. Entering view (.wipe gets .in from site.js), the photo wipes open from
   the text side and settles from a slight zoom. While scrolling, site.js sets --shift so
   the photo drifts inside its frame; the 1.12 zoom leaves 6% spare above and below,
   and --shift stays within ±5%.
   The clip goes on the <img>, never the <figure>: the figure is what IntersectionObserver
   watches, and a fully clipped target never reports as visible, so it would never open. */
.ind-photo img{ scale:1.12; translate:0 var(--shift, 0%); }
.js .ind-photo.wipe{ background:transparent; }
.js .ind-photo.wipe img{ clip-path:inset(0 100% 0 0); scale:1.3;
  transition:clip-path 1.2s cubic-bezier(.65,0,.25,1), scale 1.8s cubic-bezier(.2,.7,.2,1); }
.js .ind-top.flip .ind-photo.wipe img{ clip-path:inset(0 0 0 100%); }
/* same specificity as the .flip rule above and later, so it wins for both sides */
.js .ind-top .ind-photo.wipe.in img{ clip-path:inset(0 0 0 0); scale:1.12; }
@media (prefers-reduced-motion:reduce){
  .ind-photo img, .js .ind-top .ind-photo.wipe img{ clip-path:none; scale:1; translate:none; }
}

/* services overview: "The Growing Risk" / "How It Affects You" as two columns, and
   the ASCII diagrams as a bordered monospace block that scrolls on small screens. */
.duo{ margin-top:34px; display:grid; gap:30px 48px; }
.duo .col h3{ font-family:var(--f-display); font-weight:600; font-size:1.12rem; margin:0 0 10px; letter-spacing:-.005em; }
.duo .col p{ margin:0; color:var(--fg-muted); font-size:.98rem; line-height:1.6; }
.duo .col p + p{ margin-top:12px; }
@media(min-width:760px){ .duo{ grid-template-columns:1fr 1fr; } }
/* Diagrams use a system monospace font, not --f-mono: IBM Plex Mono as Google Fonts serves it has no
   box-drawing glyphs (─ │ ┌ ►), so they fell back to a font with a narrower character width and the
   borders stopped lining up with the text. One font for every character keeps the columns true. */
pre.ascii{ margin:34px 0 0; overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:rgba(127,130,127,.10); border:1px solid var(--line); padding:20px clamp(16px,2.5vw,24px);
  font-family:ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace;
  font-size:.7rem; line-height:1.4; color:var(--fg-muted); white-space:pre; }

/* "Vulnerabilities we test" grid (industries) */
.vlabel{ margin:44px 0 0; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.vulns{ margin-top:18px; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.vulns > div{ background:var(--bg); padding:26px clamp(20px,3vw,32px); transition:background .3s ease; }
.vulns > div:hover{ background:var(--bg-raised); }
.panel .vulns > div{ background:var(--panel-bg); }
.panel .vulns > div:hover{ background:#252A28; }
.vulns h3{ font-family:var(--f-display); font-weight:600; font-size:1.08rem; margin:0; letter-spacing:-.005em; }
.vulns p{ margin:10px 0 0; color:var(--fg-muted); font-size:.95rem; line-height:1.55; }
@media(min-width:720px){ .vulns{ grid-template-columns:repeat(2,1fr); } }

/* other-pages strip at the foot of inner pages */
.related{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.related a{ font-family:var(--f-mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  border:1px solid var(--line); padding:12px 16px; transition:border-color .15s ease, background .15s ease; }
.related a:hover{ border-color:var(--fg); background:var(--bg-raised); }

/* Empty copy slot: marks where the page's text goes. Must not ship to a live page. */
.slot{ display:block; border:1px dashed #8E928F; padding:14px 18px; margin:16px 0 0;
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:#6F7471; background:rgba(255,255,255,.18); }
.slot.big{ padding-block:44px; }
.page-head .slot, .panel .slot{ color:#9AA09C; border-color:#5C615F; background:rgba(255,255,255,.03); }

/* ---------- contact (image) ---------- */
.contact{ position:relative; overflow:hidden; }
.contact .bg{ position:absolute; inset:0; background:#0B0E0C center/cover no-repeat; background-image:url('cta.jpg'); }
.contact .bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,10,9,.86), rgba(8,10,9,.55) 60%, rgba(8,10,9,.7)); }
.contact .wrap{ position:relative; z-index:1; padding-block:clamp(72px,11vw,120px); }
.contact .eye{ color:#C7CBC8; }
.contact h2{ font-family:var(--f-display); font-weight:800; letter-spacing:-.02em; color:#F5F6F4;
  font-size:clamp(2rem,5.5vw,3.6rem); line-height:1.05; text-wrap:balance; margin:22px 0 0; max-width:16ch;
  text-shadow:0 2px 30px rgba(0,0,0,.5); }
.mailrow{ margin-top:34px; display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.mail{ font-family:var(--f-mono); font-size:clamp(1rem,2.6vw,1.35rem); color:#F5F6F4;
  border:1px solid rgba(255,255,255,.28); padding:13px 18px; letter-spacing:.02em; user-select:all;
  background:rgba(8,10,9,.35); }
.copy{ font-family:var(--f-mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; background:transparent; color:#D2D6D3; border:1px solid rgba(255,255,255,.28);
  padding:13px 16px; transition:color .2s ease, border-color .2s ease; }
.copy:hover{ color:#F5F6F4; border-color:var(--accent); }

/* ---------- footer: stacked lockup left, link columns right ---------- */
.site-foot{ position:relative; overflow:hidden; background:#111417; color:#C9CDCA; border-top:1px solid #23282B; }
/* a faint radar / contour field radiating up behind the closing wordmark —
   slate rings on the dark footer, densest at the base, static */
.site-foot::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:min(54%,360px);
  background:url("footer-radar.svg") no-repeat bottom center; background-size:cover;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 94%);
          mask-image:linear-gradient(to top,#000,transparent 94%);
  pointer-events:none; z-index:0; }
.site-foot .wrap{ padding-top:clamp(56px,8vw,88px); position:relative; z-index:1; }
.foot-top{ display:grid; gap:48px; }
@media(min-width:820px){ .foot-top{ grid-template-columns:minmax(220px,1fr) auto; gap:64px; } }
.foot-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.foot-bear{ height:52px; width:auto; }
.foot-wm{ font-family:var(--f-display); font-weight:800; letter-spacing:.14em; font-size:clamp(1.4rem,3vw,1.8rem); line-height:1; color:#F1F0EA; }
.foot-wm .lt{ font-weight:300; }
.foot-tag{ font-family:var(--f-mono); letter-spacing:.34em; font-size:.62rem; color:#9AA09C; text-transform:uppercase; }
.foot-mail{ margin-top:12px; font-family:var(--f-mono); font-size:.86rem; color:#9AA09C; text-decoration:none; }
.foot-mail:hover{ color:#F1F0EA; }
.foot-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 48px; }
@media(min-width:560px){ .foot-cols{ grid-template-columns:repeat(3,auto); gap:36px 64px; } }
.foot-col h3{ margin:0 0 16px; font-family:var(--f-mono); font-weight:500; font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:#7F8683; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.foot-col a{ text-decoration:none; color:#C9CDCA; font-size:.92rem; transition:color .15s ease; }
.foot-col a:hover, .foot-legal a:hover{ color:#FFFFFF; }
.foot-end{ margin-top:clamp(48px,7vw,72px); padding-top:24px; border-top:1px solid #23282B; display:flex; flex-wrap:wrap;
  justify-content:space-between; align-items:center; gap:12px 24px; font-size:.82rem; color:#7F8683; }
.foot-legal{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.foot-legal a{ text-decoration:none; color:#9AA09C; transition:color .15s ease; }
/* Oversized closing wordmark, clipped at the page's bottom edge. pointer-events:none
   because its tall line box overlaps the legal links above and would steal their hover. */
.foot-giant{ margin:clamp(32px,5vw,48px) 0 -.17em; pointer-events:none; user-select:none; white-space:nowrap;
  font-family:var(--f-display); font-weight:800; line-height:.8; letter-spacing:-.03em;
  font-size:clamp(3rem,13.6vw,10.2rem);
  background:linear-gradient(to bottom, rgba(241,240,234,.16), rgba(241,240,234,.02));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.foot-giant .lt{ font-weight:300; }

@media (prefers-reduced-motion:reduce){
  .js .reveal, .js .stagger > *{ opacity:1 !important; transform:none !important; transition:none !important }
  *{ transition:none !important }
}

/* ---------- services overview intro: a row of the static service marks above the text,
   sitting just under the page head so it shows without scrolling ---------- */
.page-head.snug{ padding-bottom:clamp(40px,5vw,56px); }   /* services: keeps the marks row above the fold on short laptop windows */
section.block.svc-intro{ padding-top:clamp(14px,2vw,24px); }
/* equal-width boxes + space-between = icon centres evenly spaced edge to edge of the wrap */
.svc-marks{ display:flex; justify-content:space-between; margin-bottom:clamp(28px,3.2vw,46px);
  color:var(--accent); transition:color .5s ease; }
.svc-marks svg{ width:clamp(44px,12vw,72px); height:auto; aspect-ratio:48 / 40; display:block; overflow:visible; }
.svc-marks a{ display:block; color:inherit; border-radius:6px; transition:color .25s ease, transform .25s ease; }
.svc-marks a:hover{ color:var(--fg); transform:translateY(-3px); }
.svc-marks a:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; }

/* ---------- animated section scenes (services overview) ----------
   Each section heading carries a small animated vignette. Motion only runs once the
   heading has scrolled into view (.sec-head.in) and is fully disabled under
   prefers-reduced-motion, which falls back to a static placed state. */
.sec-scene{ position:relative; flex:0 0 auto; color:var(--accent);
  width:clamp(168px,20vw,212px); height:clamp(104px,13vw,132px); transition:color .5s ease; }
.scene-core{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }

/* hold everything until the heading reveals */
.sec-scene *{ animation-play-state:paused; }
.sec-head.in .sec-scene *{ animation-play-state:running; }

/* message / notification bubbles (vishing + phishing) — several messages cycle
   through two fixed slots per scene, so the loop reads as a conversation, not one line */
.vbubble, .ebubble{ position:absolute; z-index:2; font-family:var(--f-mono); font-size:8.5px; line-height:1.35;
  letter-spacing:.01em; padding:5px 7px; max-width:134px; border:1px solid var(--accent); border-radius:9px;
  background:var(--bg); color:var(--fg); font-weight:500; opacity:0; box-shadow:0 4px 14px rgba(0,0,0,.14); }
.panel .vbubble, .panel .ebubble{ background:var(--panel-bg); box-shadow:0 6px 18px rgba(0,0,0,.4); }
.ebubble{ border-radius:4px; display:flex; align-items:center; gap:7px; }  /* phishing reads as inbox cards */
.plogo{ flex:0 0 auto; width:16px; height:16px; display:block; border-radius:3px; background:#fff; overflow:hidden; }
.plogo img{ width:100%; height:100%; object-fit:contain; padding:2px; box-sizing:border-box; display:block; }

/* two slots: top-left / bottom-right (vishing), top-right / bottom-left (phishing) */
.vb-top{ top:-10px; left:-16px; border-bottom-left-radius:2px; }
.vb-bot{ bottom:-8px; right:-10px; border-bottom-right-radius:2px; }
.et-top{ top:-10px; right:-8px; }
.et-bot{ bottom:-10px; left:-14px; }

/* vishing: three messages per slot, staggered across an 18s loop */
.vbubble{ animation:popbub 18s ease-in-out infinite; }
.v2{ animation-delay:3s } .v3{ animation-delay:6s } .v4{ animation-delay:9s }
.v5{ animation-delay:12s } .v6{ animation-delay:15s }
@keyframes popbub{ 0%{opacity:0;transform:translateY(7px) scale(.9)} 2.5%{opacity:1;transform:none}
  13%{opacity:1} 16%{opacity:0;transform:translateY(-4px) scale(.98)} 100%{opacity:0} }

/* phishing: four inbox cards, staggered across a 16s loop */
.ebubble{ animation:popcard 16s ease-in-out infinite; }
.c2{ animation-delay:4s } .c3{ animation-delay:8s } .c4{ animation-delay:12s }
@keyframes popcard{ 0%{opacity:0;transform:translateY(11px)} 3%{opacity:1;transform:none}
  15%{opacity:1} 19%{opacity:0;transform:translateY(-7px)} 100%{opacity:0} }

/* vishing: waveform bars "speak" */
.wv{ transform-box:fill-box; transform-origin:center; transform:scaleY(.3); animation:wave 1s ease-in-out infinite; }
.wv1{ animation-duration:.9s } .wv2{ animation-duration:.7s; animation-delay:.12s }
.wv3{ animation-duration:1.05s; animation-delay:.05s } .wv4{ animation-duration:.75s; animation-delay:.2s }
.wv5{ animation-duration:.95s; animation-delay:.1s } .wv6{ animation-duration:.8s; animation-delay:.28s }
@keyframes wave{ 0%,100%{transform:scaleY(.28)} 50%{transform:scaleY(1)} }

/* phishing: hook dips toward the inbox */
.hook{ transform-box:fill-box; transform-origin:top center; animation:dip 3.2s ease-in-out infinite; }
@keyframes dip{ 0%,100%{transform:translateY(-2px)} 50%{transform:translateY(3px)} }

/* physical: a visitor walks up, badges in, the door swings open — and a faint
   tailgater slips through behind them before it closes. 7s loop, everything synced. */
.phys-scene .floor{ opacity:.4; }
.phys-scene .door{ transform-box:fill-box; transform-origin:0% 50%; animation:dooropen 7s ease-in-out infinite; }
@keyframes dooropen{ 0%,36%{transform:scaleX(1)} 50%{transform:scaleX(.12)} 84%{transform:scaleX(.12)}
  95%,100%{transform:scaleX(1)} }
.phys-scene .reader-led{ animation:blink 1.2s steps(1) infinite; }
.phys-scene .grant-ring{ transform-box:fill-box; transform-origin:center; opacity:0; animation:grant 7s ease-in-out infinite; }
@keyframes grant{ 0%,37%{opacity:0;transform:scale(1)} 41%{opacity:.85;transform:scale(1)}
  60%{opacity:0;transform:scale(3.4)} 100%{opacity:0} }
.phys-scene .fig1{ animation:walkin 7s ease-in-out infinite; }
.phys-scene .fig2{ opacity:.42; animation:walkin2 7s linear infinite; }
@keyframes walkin{ 0%{opacity:0;transform:translate(6px,37px)} 9%{opacity:1}
  38%{transform:translate(33px,37px)} 50%{transform:translate(33px,37px)}
  84%{opacity:1;transform:translate(50px,37px)} 96%,100%{opacity:0;transform:translate(58px,37px)} }
@keyframes walkin2{ 0%,20%{opacity:0;transform:translate(2px,37px)} 30%{opacity:.42}
  86%{opacity:.42;transform:translate(49px,37px)} 97%,100%{opacity:0;transform:translate(56px,37px)} }
.phys-scene .leg, .phys-scene .arm{ transform-box:fill-box; transform-origin:top center; }
.phys-scene .bob{ transform-box:fill-box; transform-origin:center; }
/* lone visitor: legs swing while walking, then hold still (38–50%) as they stand
   at the reader and the door opens, then swing again through the doorway */
.phys-scene .fig1 .lg1{ animation:legA 7s linear infinite; }
.phys-scene .fig1 .lg2, .phys-scene .fig1 .arm{ animation:legB 7s linear infinite; }
.phys-scene .fig1 .bob{ animation:bobWalk 7s linear infinite; }
/* tailgater: never stops moving */
.phys-scene .fig2 .lg1{ animation:swingA .5s ease-in-out infinite; }
.phys-scene .fig2 .lg2, .phys-scene .fig2 .arm{ animation:swingB .5s ease-in-out infinite; }
.phys-scene .fig2 .bob{ animation:bob .5s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-1.1px)} }
@keyframes swingA{ 0%,100%{transform:rotate(17deg)} 50%{transform:rotate(-17deg)} }
@keyframes swingB{ 0%,100%{transform:rotate(-17deg)} 50%{transform:rotate(17deg)} }
@keyframes legA{ 0%{transform:rotate(2deg)}
  6%{transform:rotate(18deg)} 12%{transform:rotate(-18deg)} 18%{transform:rotate(18deg)}
  24%{transform:rotate(-18deg)} 30%{transform:rotate(18deg)} 36%{transform:rotate(-12deg)}
  38%{transform:rotate(0deg)} 50%{transform:rotate(0deg)}
  55%{transform:rotate(-18deg)} 61%{transform:rotate(18deg)} 67%{transform:rotate(-18deg)}
  73%{transform:rotate(18deg)} 79%{transform:rotate(-18deg)} 85%{transform:rotate(14deg)}
  91%{transform:rotate(-12deg)} 96%{transform:rotate(0deg)} 100%{transform:rotate(2deg)} }
@keyframes legB{ 0%{transform:rotate(-2deg)}
  6%{transform:rotate(-18deg)} 12%{transform:rotate(18deg)} 18%{transform:rotate(-18deg)}
  24%{transform:rotate(18deg)} 30%{transform:rotate(-18deg)} 36%{transform:rotate(12deg)}
  38%{transform:rotate(0deg)} 50%{transform:rotate(0deg)}
  55%{transform:rotate(18deg)} 61%{transform:rotate(-18deg)} 67%{transform:rotate(18deg)}
  73%{transform:rotate(-18deg)} 79%{transform:rotate(18deg)} 85%{transform:rotate(-14deg)}
  91%{transform:rotate(12deg)} 96%{transform:rotate(0deg)} 100%{transform:rotate(-2deg)} }
@keyframes bobWalk{ 0%{transform:translateY(0)}
  6%{transform:translateY(-1.1px)} 12%{transform:translateY(0)} 18%{transform:translateY(-1.1px)}
  24%{transform:translateY(0)} 30%{transform:translateY(-1.1px)} 36%{transform:translateY(0)}
  38%{transform:translateY(0)} 50%{transform:translateY(0)}
  55%{transform:translateY(-1.1px)} 61%{transform:translateY(0)} 67%{transform:translateY(-1.1px)}
  73%{transform:translateY(0)} 79%{transform:translateY(-1.1px)} 85%{transform:translateY(0)}
  91%{transform:translateY(-1.1px)} 96%{transform:translateY(0)} 100%{transform:translateY(0)} }

/* cyber: a movie-hacker console — each line types out character by character
   (per-line steps() reveal), the block fills top to bottom, holds on "access
   granted", then clears and types again. The whole 16s loop repeats endlessly. */
.cyber-scene .term-win{ position:absolute; inset:4px; border:1.6px solid var(--accent); border-radius:5px; overflow:hidden; }
.cyber-scene .term-bar{ height:22%; min-height:12px; border-bottom:1.5px solid var(--accent); display:flex; align-items:center; gap:3px; padding:0 6px; }
.cyber-scene .term-bar i{ width:3px; height:3px; border-radius:50%; background:var(--accent); display:block; }
.cyber-scene .term{ position:absolute; left:8px; right:6px; top:26%; bottom:5%; overflow:hidden;
  font-family:var(--f-mono); font-size:7px; line-height:1.5; color:var(--accent); z-index:2; }
.cyber-scene .term-feed{ display:block; animation:termfade 16s linear infinite; }
.cyber-scene .term-line{ display:block; white-space:nowrap; overflow:hidden; width:0; }
/* each line waits its turn, then types out; steps(--w) gives the per-character tick */
.cyber-scene .ty1{ animation:ty1 16s linear infinite } .cyber-scene .ty2{ animation:ty2 16s linear infinite }
.cyber-scene .ty3{ animation:ty3 16s linear infinite } .cyber-scene .ty4{ animation:ty4 16s linear infinite }
.cyber-scene .ty5{ animation:ty5 16s linear infinite } .cyber-scene .ty6{ animation:ty6 16s linear infinite }
.cyber-scene .ty7{ animation:ty7 16s linear infinite }
@keyframes ty1{ 0%{width:0;animation-timing-function:steps(18)} 7%{width:var(--w)} 100%{width:var(--w)} }
@keyframes ty2{ 0%{width:0} 12.5%{width:0;animation-timing-function:steps(15)} 19.5%{width:var(--w)} 100%{width:var(--w)} }
@keyframes ty3{ 0%{width:0} 25%{width:0;animation-timing-function:steps(17)} 32%{width:var(--w)} 100%{width:var(--w)} }
@keyframes ty4{ 0%{width:0} 37.5%{width:0;animation-timing-function:steps(16)} 44.5%{width:var(--w)} 100%{width:var(--w)} }
@keyframes ty5{ 0%{width:0} 50%{width:0;animation-timing-function:steps(16)} 57%{width:var(--w)} 100%{width:var(--w)} }
@keyframes ty6{ 0%{width:0} 62.5%{width:0;animation-timing-function:steps(18)} 69.5%{width:var(--w)} 100%{width:var(--w)} }
@keyframes ty7{ 0%{width:0} 75%{width:0;animation-timing-function:steps(18)} 82%{width:var(--w)} 100%{width:var(--w)} }
/* fade the feed out after the hold so the width-reset at the loop seam is invisible */
@keyframes termfade{ 0%{opacity:0} 2.5%{opacity:1} 84%{opacity:1} 90%{opacity:0} 100%{opacity:0} }
.caret{ display:inline-block; width:3px; height:7px; margin-left:1px; vertical-align:-1px;
  background:currentColor; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{opacity:0} }

/* swarm: a flock of gulls converges on a server rack from every side.
   Birds are filled gull silhouettes (matching bird.jpg); the wings flap by
   scaling each silhouette vertically. The rack's drive LEDs blink as they close in. */
.swarm-scene .rack{ transform-box:fill-box; transform-origin:center; animation:rackpulse 2.4s ease-in-out infinite; }
@keyframes rackpulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
.swarm-scene .rled{ animation:blink 1s steps(1) infinite; }
.swarm-scene .r2{ animation-duration:.7s } .swarm-scene .r3{ animation-duration:1.3s } .swarm-scene .r4{ animation-duration:.9s }
.swarm-scene .gull{ fill:currentColor; stroke:none; }
.swarm-scene .bird{ opacity:0; }
.swarm-scene .b1{ animation:flyA 4.2s ease-in infinite }
.swarm-scene .b2{ animation:flyB 4.8s ease-in infinite .4s }
.swarm-scene .b3{ animation:flyC 4.5s ease-in infinite .9s }
.swarm-scene .b4{ animation:flyD 5s ease-in infinite 1.3s }
.swarm-scene .b5{ animation:flyE 4.6s ease-in infinite 1.8s }
@keyframes flyA{ 0%{opacity:0;transform:translate(6px,6px) scale(.5)} 14%{opacity:1}
  72%{opacity:1;transform:translate(30px,16px) scale(.92)} 90%,100%{opacity:0;transform:translate(35px,20px) scale(.45)} }
@keyframes flyB{ 0%{opacity:0;transform:translate(64px,7px) scale(.5)} 14%{opacity:1}
  72%{opacity:1;transform:translate(42px,16px) scale(.92)} 90%,100%{opacity:0;transform:translate(37px,20px) scale(.45)} }
@keyframes flyC{ 0%{opacity:0;transform:translate(3px,28px) scale(.5)} 14%{opacity:1}
  72%{opacity:1;transform:translate(27px,23px) scale(.92)} 90%,100%{opacity:0;transform:translate(33px,21px) scale(.45)} }
@keyframes flyD{ 0%{opacity:0;transform:translate(68px,26px) scale(.5)} 14%{opacity:1}
  72%{opacity:1;transform:translate(45px,23px) scale(.92)} 90%,100%{opacity:0;transform:translate(39px,21px) scale(.45)} }
@keyframes flyE{ 0%{opacity:0;transform:translate(36px,1px) scale(.5)} 14%{opacity:1}
  72%{opacity:1;transform:translate(36px,13px) scale(.92)} 90%,100%{opacity:0;transform:translate(36px,19px) scale(.45)} }
.swarm-scene .flap{ transform-box:fill-box; transform-origin:center; animation:flap .4s ease-in-out infinite; }
.swarm-scene .b2 .flap{ animation-duration:.48s } .swarm-scene .b3 .flap{ animation-duration:.44s }
.swarm-scene .b4 .flap{ animation-duration:.52s } .swarm-scene .b5 .flap{ animation-duration:.46s }
@keyframes flap{ 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(.42)} }

/* what we leave behind: the check draws itself, the shield steady */
.check-draw{ stroke-dasharray:1; stroke-dashoffset:1; animation:draw 3.4s ease-in-out infinite; }
@keyframes draw{ 0%{stroke-dashoffset:1} 28%{stroke-dashoffset:0} 82%{stroke-dashoffset:0} 93%{stroke-dashoffset:1} 100%{stroke-dashoffset:1} }

@media (max-width:640px){
  .sec-scene{ width:116px; height:84px; }
  .vbubble, .ebubble{ display:none; }            /* too cramped on phones — keep just the core motion */
  .cyber-scene .term{ font-size:6px; }
}
@media (prefers-reduced-motion:reduce){
  .sec-scene *{ animation:none !important; }
  .vbubble, .ebubble{ display:none; }
  .wv{ transform:scaleY(1); }
  .caret{ display:none; }
  .cyber-scene .term-feed{ opacity:1; }
  .cyber-scene .term-line{ width:auto; }
  .phys-scene .door{ transform:scaleX(1); }
  .phys-scene .grant-ring{ opacity:0; }
  .phys-scene .fig1{ opacity:1; transform:translate(14px,37px); }
  .phys-scene .fig2{ opacity:.4; transform:translate(44px,37px); }
  .swarm-scene .bird{ opacity:1; }
  .swarm-scene .b1{ transform:translate(26px,16px) }
  .swarm-scene .b2{ transform:translate(44px,17px) }
  .swarm-scene .b3{ transform:translate(20px,24px) }
  .swarm-scene .b4{ transform:translate(48px,24px) }
  .swarm-scene .b5{ transform:translate(36px,12px) }
  .check-draw{ stroke-dashoffset:0; }
}

/* ---------- long-form trust pages (security, privacy, terms, rules) ----------
   Optional facts strip in the black page head, then a sticky numbered index beside numbered
   sections. The index is built by site.js from each .sec's data-short (scrollspy, from 900px). */
.facts{ margin:44px 0 0; padding:0; list-style:none; display:grid; gap:1px;
  grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-flow:dense;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); }
/* phones: long values take a full row so nothing breaks mid-word */
.facts li.wide{ grid-column:1 / -1; }
.facts li{ background:#000; padding:18px 20px 20px; }
.facts .k{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:#9AA09C; }
.facts .v{ margin-top:8px; font-family:var(--f-display); font-weight:600; font-size:1.02rem; color:var(--hero-fg); line-height:1.3; overflow-wrap:anywhere; }
@media(min-width:760px){ .facts{ grid-template-columns:repeat(4,minmax(0,1fr)); } .facts li.wide{ grid-column:auto; } }
.page-head .updated{ margin:18px 0 0; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#9AA09C; }

.sec-grid{ display:grid; gap:56px; }
.sec-index{ display:none; }
@media(min-width:900px){
  .sec-grid{ grid-template-columns:220px minmax(0,1fr); gap:64px; }
  .sec-index{ display:block; }
}
.sec-index .sticky{ position:sticky; top:112px; }
.sec-index .eye{ margin:0 0 22px; }
.sec-index ol{ margin:0; padding:0; list-style:none; display:grid; gap:13px; }
.sec-index a{ display:flex; align-items:baseline; gap:12px; text-decoration:none;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--fg-muted); transition:color .2s ease; }
.sec-index a .n{ color:#A3A5A1; transition:color .2s ease; }
.sec-index a:hover{ color:var(--fg); }
.sec-index a:hover .n{ color:var(--accent); }
.sec-index a[aria-current="location"]{ color:var(--fg); font-weight:500; }
.sec-index a[aria-current="location"] .n{ color:var(--accent); }

.sec-body{ max-width:68ch; display:grid; gap:64px; }
.sec{ scroll-margin-top:112px; }
.sec .n{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.1em; color:var(--accent); margin:0; }
.sec h2{ font-family:var(--f-display); font-weight:700; letter-spacing:-.015em;
  font-size:clamp(1.35rem,2.6vw,1.75rem); line-height:1.15; margin:10px 0 0; text-wrap:balance; }
.sec h3{ font-family:var(--f-display); font-weight:600; font-size:1.05rem; letter-spacing:-.005em; margin:28px 0 0; color:var(--fg); }
.sec p, .sec ul{ margin:16px 0 0; color:var(--fg-muted); }
.sec h3 + p, .sec h3 + ul{ margin-top:10px; }
.sec ul{ padding-left:20px; }
.sec li + li{ margin-top:8px; }
.sec strong{ color:var(--fg); font-weight:600; }
.sec a{ text-underline-offset:3px; }

/* label / value rows: retention periods, scope schedule items */
.rows{ margin:22px 0 0; border:1px solid var(--line); background:var(--bg-raised); }
.rows > div{ display:grid; gap:4px 24px; padding:16px 20px; }
.rows > div + div{ border-top:1px solid var(--line); }
.rows .rk{ font-family:var(--f-mono); font-size:.76rem; letter-spacing:.04em; color:var(--fg); }
.rows .rv{ font-size:.95rem; line-height:1.55; color:var(--fg-muted); }
@media(min-width:640px){ .rows > div{ grid-template-columns:170px minmax(0,1fr); } }

/* a quiet closing line under the last section */
.sec-foot{ margin:0; padding-top:22px; border-top:1px solid var(--line); font-size:.84rem; color:var(--fg-muted); }
.sec-foot a{ text-underline-offset:3px; }

/* facts still to be supplied before a page goes live */
mark.fill{ background:rgba(0,0,0,.06); color:inherit; border-bottom:1px dashed #8E928F; padding:0 3px; }