/* ==========================================================================
   Duplia: Variant B "Cinematic & bold"
   One stylesheet for the whole site. Sections:
   1. Fonts & tokens       6. Buttons, links, labels     11. Testimonials (film strip)
   2. Base & grain         7. Hero / page hero           12. Forms & contact
   3. Layout helpers       8. Trust strip & call sheet   13. Footer
   4. Header & nav         9. Cards, features, slates    14. Legal (paper) & 404
   5. Mobile action bar   10. Page-specific pieces       15. Motion & utilities
   ========================================================================== */

/* 1. Fonts & tokens ------------------------------------------------------- */
@font-face { font-family: "Big Shoulders Display"; src: url("/assets/fonts/big-shoulders-display-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* Brand */
  --slate: #404953;          /* Duplia primary */
  --tan: #d2a98e;            /* Duplia accent: our "tungsten light" */
  --tan-hi: #e6c7b1;
  --tan-lo: #b98f73;

  /* Dark scale derived from slate */
  --ink-950: #0d1014;        /* page background */
  --ink-900: #13171c;
  --ink-850: #1a1f26;        /* surfaces */
  --ink-800: #232a33;        /* raised surfaces */
  --ink-700: #2e3640;
  --line: rgba(170, 178, 187, .16);
  --line-strong: rgba(170, 178, 187, .32);
  --alert: #e0785c;          /* warnings in diagrams (fire, ransomware) */

  /* Text on dark (all AA on --ink-950 … --ink-800) */
  --fg: #eceef0;
  --fg-muted: #aab2bb;
  --fg-dim: #8b949e;

  /* Paper: light reading surface for long text */
  --paper: #f4f0ea;
  --paper-ink: #1a1f26;
  --paper-muted: #4d5661;
  --paper-link: #7a4f33;

  /* Type */
  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Space & shape */
  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 10vw, 8.5rem);
  --radius: 4px;
  --header-h: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* 2. Base & grain --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--ink-950);
  color: var(--fg);
  font: 400 1.0625rem/1.65 var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Subtle static film grain over everything (decorative) */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.15; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
strong { font-weight: 600; }
::selection { background: var(--tan); color: var(--ink-950); }

:focus-visible { outline: 2px solid var(--tan); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--tan); color: var(--ink-950); padding: .6rem 1rem; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 1em; height: 1em; }

/* 3. Layout helpers ------------------------------------------------------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap--narrow { --wrap: 820px; }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--raised { background: var(--ink-900); }
.section-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 760px; }
.section-head--split { max-width: none; }
@media (min-width: 1024px) {
  .section-head--split { grid-template-columns: 1.1fr 1fr; align-items: end; column-gap: 4rem; }
  .section-head--split .eyebrow { grid-column: 1 / -1; }
  .section-head--split p { margin: 0; }
}
.section-head p { color: var(--fg-muted); font-size: 1.125rem; margin: 0; }

/* Display type */
.display, .h-display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .9;
}
.display { font-size: clamp(3.4rem, 7.4vw, 7.25rem); }
.display--page { font-size: clamp(3rem, 8vw, 6.5rem); }
.h-display { font-size: clamp(2.6rem, 6vw, 4.75rem); }
.h-display--sm { font-size: clamp(2.1rem, 4vw, 3.25rem); }
.display em, .h-display em { font-style: normal; color: var(--tan); }
.lede { font-size: clamp(1.125rem, 1.6vw, 1.3rem); color: var(--fg-muted); max-width: 40rem; }
.lede strong { color: var(--fg); font-weight: 600; }   /* key message line */

/* Mono labels: eyebrows, timecodes, scene numbers */
.eyebrow {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin: 0;
  font: 500 .8125rem/1.3 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tan);
}
.eyebrow .sc { color: var(--fg-muted); padding: .2rem .45rem; border: 1px solid var(--line-strong); border-radius: 2px; letter-spacing: .08em; }
.mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: .06em; }

/* Frame / safe-area corner marks: add .frame to any positioned box */
.frame { position: relative; }
.frame::before {
  content: ""; position: absolute; inset: var(--frame-inset, 12px); z-index: 2; pointer-events: none;
  --c: var(--frame-color, rgba(236, 238, 240, .75)); --l: var(--frame-len, 18px); --w: 1.5px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l);
  background-repeat: no-repeat;
}

/* Filmic grade over photos: crushed blacks, cool shadows, warm highlights */
.graded { position: relative; overflow: hidden; background: var(--ink-900); }
.graded > img, .graded > picture img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.06); }
.graded::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(13, 16, 20, 0) 55%, rgba(13, 16, 20, .55)),
    linear-gradient(135deg, rgba(210, 169, 142, .12), rgba(64, 73, 83, .28));
  mix-blend-mode: normal;
}

/* 4. Header & nav --------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 80;
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
/* Blur lives on a pseudo-element: backdrop-filter on the header itself would trap the fixed mobile drawer */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(13, 16, 20, .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  transition: background .3s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header.is-scrolled::before { background: rgba(13, 16, 20, .94); }
.header-bar { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.brand { display: block; flex: none; margin-right: auto; padding-block: .5rem; }
/* White SVG logo (DUPLIA with STORAGE beneath). Sizes keep the D mark's 13-unit grid on whole
   pixels (5, 6 or 7px squares) with an even height, so it renders sharp on standard screens. */
.brand img { width: 162px; height: 40px; }

.header-actions { display: flex; align-items: center; gap: .5rem; }
.header-phone {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: 0 .75rem; border-radius: var(--radius);
  font: 500 .9375rem/1 var(--font-mono); letter-spacing: .04em; text-decoration: none; color: var(--fg);
}
.header-phone .icon { color: var(--tan); }
.header-phone:hover { color: var(--tan-hi); }
.header-phone span, .header-actions .header-cta { display: none; }
.menu-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  background: none; border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer;
}
.menu-toggle .icon { width: 22px; height: 22px; }
.menu-toggle .i-close { display: none; }
.menu-toggle[aria-expanded="true"] .i-open { display: none; }
.menu-toggle[aria-expanded="true"] .i-close { display: block; }

/* Mobile drawer */
.nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 79;
  background: var(--ink-950);
  padding: 1.5rem var(--gutter) 7rem;
  overflow-y: auto;
  display: none;
}
.nav.is-open { display: block; }
.nav__list { list-style: none; display: grid; gap: .25rem; }
.nav__link {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: .9rem 0; background: none; border: 0; border-bottom: 1px solid var(--line);
  font: 800 2.25rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em;
  text-decoration: none; text-align: left; cursor: pointer; color: var(--fg);
}
.nav__link[aria-current] { color: var(--tan); }   /* current page, or the group containing it */
.nav__link .icon { transition: transform .25s var(--ease); color: var(--tan); }
.has-sub.is-open > .nav__link .icon { transform: rotate(180deg); }
.sub { list-style: none; display: none; padding: .5rem 0 1rem; }
.has-sub.is-open > .sub { display: grid; gap: .25rem; }
.sub a {
  display: grid; grid-template-columns: 2.25rem 1fr; gap: .25rem .75rem; align-items: baseline;
  padding: .65rem .5rem; border-radius: var(--radius); text-decoration: none;
}
.sub a:hover, .sub a[aria-current="page"] { background: var(--ink-850); }
.sub__tc { font: 500 .75rem/1 var(--font-mono); color: var(--tan); letter-spacing: .08em; }
.sub strong { display: block; font-weight: 600; }
.sub small { display: block; grid-column: 2; color: var(--fg-muted); font-size: .875rem; }
.sub a[aria-current="page"] strong { color: var(--tan); }
.nav__foot { margin-top: 2rem; display: grid; gap: .75rem; }
.nav__foot .btn { width: 100%; }

@media (min-width: 1024px) {
  .brand img { width: 135px; height: 34px; }
  .header-actions .header-cta { display: inline-flex; }
  .menu-toggle { display: none; }
  .header-bar { gap: 2rem; }
  .brand { margin-right: 0; }
  .nav { position: static; display: block; padding: 0; background: none; overflow: visible; margin-right: auto; }
  .nav__list { display: flex; gap: .25rem; }
  .nav__item { position: relative; }
  .nav__link {
    width: auto; gap: .35rem; padding: .6rem .65rem; border: 0;
    font: 600 .9375rem/1 var(--font-text); text-transform: none; letter-spacing: 0; color: var(--fg-muted);
    border-radius: var(--radius);
  }
  .nav__link:hover, .has-sub.is-open > .nav__link { color: var(--fg); }
  .nav__link[aria-current] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--tan); border-radius: 0; }
  .sub {
    position: absolute; top: calc(100% + .6rem); left: -.5rem; width: 22rem;
    padding: .5rem; background: var(--ink-850); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  }
  .nav__foot { display: none; }
}
/* Phone number text joins the icon once there is room for it. The logo stays at 162x40 (6px
   grid) so it has breathing room above and below in the 68px header bar. */
@media (min-width: 1280px) {
  .brand img { width: 162px; height: 40px; }
  .header-phone span { display: inline; }
  .nav__link { padding-inline: .8rem; }
}

/* 5. Mobile action bar (Call / Enquire always one tap away) --------------- */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(13, 16, 20, .94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.action-bar .btn { min-height: 48px; padding-inline: .75rem; }
body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) {
  .action-bar { display: none; }
  body { padding-bottom: 0; }
}

/* 6. Buttons, links, labels ---------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: .8rem 1.5rem;
  border: 1px solid transparent; border-radius: var(--radius);
  font: 600 1rem/1.1 var(--font-text); text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.btn--sm { min-height: 42px; padding: .55rem 1.05rem; font-size: .9375rem; }
.btn--tan { background: var(--tan); color: var(--ink-950); }
.btn--tan:hover { background: var(--tan-hi); }
.btn--ghost { border-color: var(--line-strong); color: var(--fg); background: rgba(13, 16, 20, .35); }
.btn--ghost:hover { border-color: var(--fg); }
.btn--ghost .icon { color: var(--tan); }
.btn .icon { width: 1.15em; height: 1.15em; }
.btn:active { transform: translateY(1px); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-row .mono { font-size: .95rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; color: var(--tan); text-decoration: none;
}
.link-arrow .icon { transition: transform .25s var(--ease); }
a:hover > .link-arrow .icon, .link-arrow:hover .icon { transform: translateX(4px); }
.text-link { color: var(--tan); }
.text-link:hover { color: var(--tan-hi); }

/* 7. Hero / page hero ------------------------------------------------------ */
.hero {
  position: relative; isolation: isolate;
  display: grid; align-items: end;
  /* 2.39:1 "scope" frame on wide screens, never taller than the viewport */
  min-height: clamp(560px, 41.8vw, calc(100svh - var(--header-h)));
  padding-block: 6rem clamp(2.5rem, 5vw, 4.5rem);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 75% 35%; filter: saturate(.8) contrast(1.08) brightness(.92); }
/* Home hero: a slow camera drift (a gentle push-in and pan), turned off for reduced motion */
.hero > .hero__media img { transform-origin: 70% 40%; animation: hero-drift 28s ease-in-out infinite alternate; will-change: transform; }
@keyframes hero-drift {
  from { transform: scale(1.04) translate3d(1.2%, 0, 0); }
  to { transform: scale(1.12) translate3d(-1.8%, -1%, 0); }
}
.hero__grade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, var(--ink-950) 0%, rgba(13, 16, 20, .8) 32%, rgba(13, 16, 20, 0) 70%),
    linear-gradient(90deg, rgba(13, 16, 20, .85) 0%, rgba(13, 16, 20, .35) 55%, rgba(13, 16, 20, 0) 80%),
    linear-gradient(135deg, rgba(64, 73, 83, .45), rgba(210, 169, 142, .1));
}
.hero__content { display: grid; gap: 1.5rem; }
.hero__content { gap: 1.25rem; }
.hero__content .display { max-width: 14ch; }
.hero__content .lede { max-width: 34rem; }
.hero .lede { color: #c9cfd5; }

/* Viewfinder overlay: frame marks, REC + timecode */
.viewfinder {
  position: absolute; inset: calc(var(--header-h) * 0 + 16px) 16px 16px; z-index: 0; pointer-events: none;
  --frame-inset: 0px; --frame-len: 28px; --frame-color: rgba(236, 238, 240, .55);
}
.viewfinder__hud {
  position: absolute; top: 14px; left: 18px; right: 18px;
  display: flex; justify-content: space-between; gap: 1rem;
  font: 500 .75rem/1 var(--font-mono); letter-spacing: .12em; color: rgba(236, 238, 240, .8);
}
.rec { display: inline-flex; align-items: center; gap: .5rem; }
.rec i { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 10px rgba(229, 72, 77, .7); }
.js .rec i { animation: rec-blink 1.6s steps(1) infinite; }
@keyframes rec-blink { 50% { opacity: .2; } }

@media (max-width: 699px) {
  .hero { min-height: auto; padding-top: 0; align-items: start; grid-template-rows: auto auto; }
  .hero__media { position: relative; inset: auto; height: 62vw; min-height: 260px; z-index: -2; }
  .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--ink-950), rgba(13, 16, 20, 0) 55%); }
  .hero__grade { display: none; }
  .hero__content { margin-top: -.5rem; }
  .viewfinder { bottom: auto; height: calc(62vw - 32px); min-height: 228px; }
}

/* Inner page hero */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(5rem, 12vw, 9rem) clamp(3rem, 6vw, 5rem);
  min-height: clamp(440px, 62vh, 640px);
  display: grid; align-items: end;
}
.page-hero .hero__media img { object-position: center; }
.page-hero__content { display: grid; gap: 1.25rem; }
.page-hero__content > * { max-width: 52rem; }
.page-hero .viewfinder { inset: 16px; }
.page-hero--plain { min-height: 0; padding-block: clamp(4rem, 9vw, 7rem) clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }
@media (max-width: 699px) {
  .page-hero { min-height: 0; padding-top: 0; align-items: start; }
  .page-hero .hero__media { position: relative; height: 48vw; min-height: 200px; }
  .page-hero .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--ink-950), rgba(13, 16, 20, 0) 60%); }
  .page-hero .hero__grade { display: none; }
  .page-hero .viewfinder { bottom: auto; height: calc(48vw - 32px); min-height: 168px; }
  .page-hero__content { margin-top: .75rem; }
  .page-hero--plain { padding-top: 3rem; }
}

.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; font: 500 .75rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--fg-dim); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; }

/* 8. Trust strip (stats bar) & call sheet ---------------------------------- */
/* Each stat is a display figure + a two-line mono label. Figures marked [data-count]
   count up from zero when the bar scrolls into view (main.js); the final values are in
   the HTML. Phones stack figure over label in a 2x2 grid; from 1024px everything sits on
   one row at the same height as before. */
.trust { border-block: 1px solid var(--line); background: var(--ink-900); }
.trust__row { display: grid; gap: 1.5rem; padding-block: 1.75rem; }
.trust__years { display: flex; align-items: center; gap: .9rem; margin: 0; }
.trust__years b,
.trust__list b { font: 800 2.5rem/.8 var(--font-display); color: var(--tan); white-space: nowrap; }
.trust__years > span,
.trust__list li > span { font: 500 .6875rem/1.35 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.trust__list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1.5rem; }
.trust__list li { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; min-width: 0; }
[data-count] { display: inline-block; }
@media (min-width: 1024px) {
  .trust__row { grid-template-columns: auto 1fr; align-items: center; gap: 1.25rem; padding-block: 2.2rem; }
  .trust__years { padding-right: 1.25rem; border-right: 1px solid var(--line); }
  .trust__years b,
  .trust__list b { font-size: 2rem; }
  /* Labels keep their two lines (set by <br>) so the bar stays one row high */
  .trust__years > span,
  .trust__list li > span { font-size: .625rem; letter-spacing: .05em; white-space: nowrap; }
  .trust__list { grid-template-columns: repeat(4, auto); justify-content: space-between; align-items: center; gap: .75rem; }
  .trust__list li { flex-direction: row; align-items: center; gap: .5rem; }
}
@media (min-width: 1280px) {
  .trust__row { gap: 3rem; padding-block: 1.75rem; }
  .trust__years { padding-right: 3rem; }
  .trust__years b,
  .trust__list b { font-size: 3.25rem; }
  .trust__years > span,
  .trust__list li > span { font-size: .6875rem; letter-spacing: .1em; }
  .trust__list { gap: 1.5rem; }
  .trust__list li { gap: .9rem; }
}

/* Call sheet: What / Who / Why / Next, the service page summary */
.callsheet { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--ink-900); }
.callsheet__head {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .85rem 1.25rem; border-bottom: 1px solid var(--line-strong);
  font: 500 .75rem/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted);
}
.callsheet__head b { color: var(--tan); font-weight: 500; }
.callsheet dl { margin: 0; display: grid; }
.callsheet dl > div { padding: 1.4rem 1.25rem 1.5rem; border-bottom: 1px solid var(--line); }
.callsheet dl > div:last-child { border-bottom: 0; }
.callsheet dt { font: 500 .75rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tan); margin-bottom: .75rem; }
.callsheet dd { margin: 0; color: var(--fg); }
.callsheet dd a { color: var(--tan); }
@media (min-width: 700px) {
  .callsheet dl { grid-template-columns: repeat(2, 1fr); }
  .callsheet dl > div { border-right: 1px solid var(--line); }
  .callsheet dl > div:nth-child(2n) { border-right: 0; }
  .callsheet dl > div:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (min-width: 1100px) {
  .callsheet dl { grid-template-columns: repeat(4, 1fr); }
  .callsheet dl > div { border-bottom: 0; border-right: 1px solid var(--line); }
  .callsheet dl > div:nth-child(2n) { border-right: 1px solid var(--line); }
  .callsheet dl > div:last-child { border-right: 0; }
}
.callsheet-wrap { margin-top: clamp(-3rem, -4vw, -1.5rem); position: relative; z-index: 2; }
@media (max-width: 699px) { .callsheet-wrap { margin-top: 2rem; } }
.callsheet-wrap + .trust { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* 9. Cards, features, slates ---------------------------------------------- */
/* Service "shots" on the home page */
.shots { display: grid; gap: 1.25rem; }
@media (min-width: 800px) { .shots { grid-template-columns: repeat(3, 1fr); } }
.shot {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--ink-900); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: border-color .3s, transform .4s var(--ease);
}
.shot:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.shot__media { aspect-ratio: 16 / 10; --frame-inset: 10px; --frame-len: 14px; }
.shot__media img { transition: transform .8s var(--ease); }
.shot:hover .shot__media img { transform: scale(1.04); }
.shot__tc {
  position: absolute; left: 12px; bottom: 12px; z-index: 3;
  font: 500 .6875rem/1 var(--font-mono); letter-spacing: .12em; color: var(--fg);
  background: rgba(13, 16, 20, .7); padding: .4rem .5rem; border-radius: 2px;
}
.shot__body { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem 1.5rem 1.75rem; flex: 1; }
.shot h3 { font: 800 2rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.shot p { margin: 0; color: var(--fg-muted); }
.shot .link-arrow { margin-top: auto; padding-top: .5rem; align-self: flex-start; }

.also { display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.also p { margin: 0; font: 500 .75rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }

/* Service cards that list several pages (home: Remote Storage, Connectivity) */
.shot--menu:hover { transform: none; }
.shot__links { list-style: none; display: grid; margin-top: .25rem; border-top: 1px solid var(--line); }
.shot__facts { margin: .25rem 0 0; display: grid; border-top: 1px solid var(--line); }
.shot__facts div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.shot__facts dt { font: 500 .6875rem/1.6 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.shot__facts dd { margin: 0; font-size: .95rem; }
.shot__links a {
  display: grid; grid-template-columns: 2rem 1fr auto; gap: .15rem .5rem; align-items: baseline;
  padding: .8rem 0; border-bottom: 1px solid var(--line); text-decoration: none;
}
.shot__links li:last-child a { border-bottom: 0; padding-bottom: 0; }
.shot__links strong { font-weight: 600; }
.shot__links small { grid-column: 2; color: var(--fg-muted); font-size: .9rem; }
.shot__links .icon { grid-column: 3; grid-row: 1 / span 2; align-self: center; color: var(--tan); transition: transform .25s var(--ease); }
.shot__links a:hover strong { color: var(--tan); }
.shot__links a:hover .icon { transform: translateX(4px); }

/* Feature grid (icon + title + text) */
.features { list-style: none; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 700px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .features--3 { grid-template-columns: repeat(3, 1fr); } }
.feature { background: var(--ink-950); padding: 2rem 1.75rem 2.25rem; display: grid; gap: .75rem; align-content: start; }
.feature .icon { width: 30px; height: 30px; color: var(--tan); stroke-width: 1.5; margin-bottom: .5rem; }
.feature h3 { font-size: 1.1875rem; }
.feature p { margin: 0; color: var(--fg-muted); }
/* Accreditation badges under a feature card (Colocation: An accredited team), white like the footer's */
.feature__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: .5rem; }
.feature__badges img { height: 40px; width: auto; filter: brightness(0) invert(.93); }

/* Split: text + media */
.split { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-first > :first-child { order: 2; }
}
.split__text { display: grid; gap: 1.25rem; }
.split__text p { color: var(--fg-muted); margin: 0; }
.split__media { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.split__media--wide { aspect-ratio: 16 / 9; }

/* Layered photos: overlapping shots with offset outlines and slate-style captions (home, Years of service).
   The box is 100 wide by 134 tall; tops are percentages of that height. */
.layers { position: relative; aspect-ratio: 100 / 134; margin-bottom: 2.5rem; }
.layers__shot { position: absolute; margin: 0; }
.layers__shot img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; filter: saturate(.8) contrast(1.06); }
.layers__shot::after { content: ""; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; pointer-events: none; background: linear-gradient(135deg, rgba(210, 169, 142, .12), rgba(64, 73, 83, .28)); }
.layers__shot--wide img, .layers__shot--wide::after { aspect-ratio: 2 / 1; }
.layers__shot--big { box-shadow: 0 30px 60px rgba(0, 0, 0, .6); }
.layers__shot figcaption { position: absolute; left: 0; top: calc(100% + 8px); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em; color: var(--fg-dim); text-transform: uppercase; white-space: nowrap; }
.layers__shot figcaption b { color: var(--tan); font-weight: 500; }
.layers__outline { position: absolute; border: 1px solid var(--tan); opacity: .7; }
.layers__outline--a { left: 6%; top: 3%; width: 56%; height: 41.8%; }
.layers__outline--b { right: 0; top: 47.8%; width: 48%; height: 35.8%; }
.layers__shot--team { left: 0; top: 0; width: 56%; z-index: 2; }
.layers__shot--trio { right: 0; top: 3%; width: 32%; z-index: 1; }
.layers__shot--tablet { right: 2%; top: 44.8%; width: 48%; z-index: 4; }
.layers__shot--vest { left: 2%; top: 49.3%; width: 46%; z-index: 5; }
.layers__shot--trio figcaption { left: auto; right: 0; }
@media (max-width: 599px) { .layers__shot figcaption { display: none; } .layers { margin-bottom: 0; } }
.layers__shot--cable { left: 33%; top: 74.6%; width: 18%; z-index: 6; box-shadow: 0 16px 32px rgba(0, 0, 0, .55); }
.layers__shot--thumbs { left: 54%; top: 28.4%; width: 22%; z-index: 5; box-shadow: 0 16px 32px rgba(0, 0, 0, .55); }
.layers__shot--laptop { left: 0; top: 71.6%; width: 30%; z-index: 6; box-shadow: 0 16px 32px rgba(0, 0, 0, .55); }
/* Settle-in when the collage scrolls into view: outlines draw on, then the shots are laid down one by one
   (big ones first), then the slate captions. Uses the .reveal observer in main.js; off for reduced motion. */
.js .layers.reveal { opacity: 1; transform: none; }
.js .layers:not(.is-visible) .layers__outline, .js .layers:not(.is-visible) .layers__shot, .js .layers:not(.is-visible) .layers__shot figcaption { opacity: 0; }
.js .layers.is-visible .layers__outline { animation: layers-draw .7s var(--ease) backwards; }
.js .layers.is-visible .layers__outline--b { animation-delay: .12s; }
.js .layers.is-visible .layers__shot { animation: layers-settle .75s var(--ease) var(--d, 0s) backwards; }
.js .layers.is-visible .layers__shot figcaption { animation: layers-fade .6s ease-out 1.25s backwards; }
.layers__shot--team { --d: .25s; } .layers__shot--tablet { --d: .35s; } .layers__shot--vest { --d: .45s; } .layers__shot--trio { --d: .55s; }
.layers__shot--thumbs { --d: .65s; } .layers__shot--laptop { --d: .75s; } .layers__shot--cable { --d: .85s; }
@keyframes layers-draw { from { opacity: 0; clip-path: inset(0 100% 100% 0); } to { opacity: .7; clip-path: inset(0); } }
@keyframes layers-settle { from { opacity: 0; transform: translateY(-14px) scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes layers-fade { from { opacity: 0; } to { opacity: 1; } }
/* Hover lift (mouse only): bring a shot to the front so the partly hidden ones can be seen */
@media (hover: hover) and (pointer: fine) {
  .layers__shot { transition: scale .35s var(--ease), box-shadow .35s var(--ease); }
  .layers__shot:hover { z-index: 10; scale: 1.06; box-shadow: 0 34px 70px rgba(0, 0, 0, .7); }
}

/* Round "lens" crop for circular images */
.lens { width: min(100%, 460px); aspect-ratio: 1; margin-inline: auto; border-radius: 50%; padding: 14px; border: 1px solid var(--line-strong); position: relative; }
.lens::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed var(--line); pointer-events: none; }
.lens img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: saturate(.8) contrast(1.05); }

/* Tick list */
.ticks { list-style: none; display: grid; gap: .6rem; }
.ticks li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .5rem; color: var(--fg); }
.ticks li::before { content: ""; width: 14px; height: 8px; margin-top: .45em; border: solid var(--tan); border-width: 0 0 2px 2px; transform: rotate(-45deg); }

/* Big stat */
.stat { display: flex; align-items: flex-end; gap: 1rem; }
.stat b { font: 800 clamp(7rem, 16vw, 12rem)/.78 var(--font-display); color: var(--tan); }
.stat span { font: 500 .8125rem/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); padding-bottom: .4rem; }

/* Clapperboard slates for the 4-step process */
.slates { list-style: none; display: grid; gap: 1.25rem; counter-reset: scene; }
@media (min-width: 700px) { .slates { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .slates { grid-template-columns: repeat(4, 1fr); } }
.slate { background: var(--ink-900); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.slate__clapper {
  height: 22px;
  background: repeating-linear-gradient(-55deg, var(--fg) 0 16px, var(--ink-950) 16px 32px);
  border-bottom: 2px solid var(--ink-950);
  transform-origin: 0 100%;
  opacity: .9;
}
.slate:nth-child(even) .slate__clapper { background: repeating-linear-gradient(-55deg, var(--tan) 0 16px, var(--ink-950) 16px 32px); }
.slate__fields { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--line-strong); }
.slate__fields > div { padding: .7rem 1rem; }
.slate__fields > div + div { border-left: 1px solid var(--line-strong); }
.slate__fields small { display: block; font: 500 .625rem/1 var(--font-mono); letter-spacing: .16em; color: var(--fg-muted); margin-bottom: .35rem; }
.slate__fields b { font: 800 2.75rem/.85 var(--font-display); color: var(--fg); }
.slate__fields div + div b { color: var(--tan); }
.slate__body { padding: 1.25rem 1rem 1.5rem; display: grid; gap: .6rem; }
.slate h3 { font-size: 1.1875rem; }
.slate p { margin: 0; color: var(--fg-muted); font-size: .98rem; }
.js .slate.reveal .slate__clapper { transform: rotate(-9deg); transition: transform .6s var(--ease) .25s; }
.js .slate.reveal.is-visible .slate__clapper { transform: none; }

/* Full-bleed band (e.g. Synology partner) */
.band { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(6rem, 14vw, 11rem); }
.band .hero__media img { object-position: center 40%; filter: saturate(.7) brightness(.65) contrast(1.1); }
.band__grade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(13, 16, 20, .92), rgba(13, 16, 20, .55) 55%, rgba(13, 16, 20, .2)); }
.band__content { display: grid; gap: 1.5rem; }
.band__content > * { max-width: 44rem; }
.band__content > .partner-logos { max-width: none; }
.band__content p { color: #c9cfd5; margin: 0; }
.partner-logos { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: center; margin-top: 1rem; }
.partner-logos { gap: 1.25rem 3rem; }
.partner-logos img { width: auto; opacity: .92; } /* each logo's height is set from src/_data/partners.json */

/* CTA band */
.cta-band { position: relative; overflow: hidden; border-top: 1px solid var(--line); background: var(--ink-900); }
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 120% at 85% 0%, rgba(210, 169, 142, .18), transparent 60%);
}
.cta-band__inner { position: relative; display: grid; gap: 2rem; align-items: end; }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1.4fr 1fr; } }
.cta-band__actions { display: grid; gap: .75rem; }
.cta-band__phone { font: 800 clamp(2.4rem, 5vw, 3.5rem)/1 var(--font-display); color: var(--tan); text-decoration: none; letter-spacing: .02em; }
.cta-band__phone:hover { color: var(--tan-hi); }
.cta-band .btn-row { margin-top: .5rem; }
.cta-band .lede { margin: 1.25rem 0 0; }

/* 10. Page-specific pieces ------------------------------------------------ */
/* Draft-content marker: placeholder text the owner must confirm or replace.
   Deliberately loud so it can't be missed on the preview. Remove each one as it's confirmed. */
.tbc {
  padding: .05em .45em; margin-inline: .1em;
  font: 500 .82em/1.6 var(--font-mono); letter-spacing: .01em; text-transform: none;
  color: var(--tan-hi); background: rgba(210, 169, 142, .1);
  border: 1px dashed var(--tan); border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Spec sheet: label / value rows (like a camera data sheet) */
.specs { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--ink-900); }
.specs dl { margin: 0; }
.specs dl > div { display: grid; gap: .35rem 2rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.specs dl > div:last-child { border-bottom: 0; }
.specs dt { font: 500 .75rem/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.specs dd { margin: 0; }
@media (min-width: 700px) { .specs dl > div { grid-template-columns: minmax(10rem, 16rem) 1fr; align-items: baseline; } }
/* A spec value with logos at the right-hand end of the row (Cloud Workstations: Operating system).
   The logos are only shown at desktop widths. */
.specs .with-icons { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.os-icons { display: none; }
@media (min-width: 1024px) {
  .os-icons { display: flex; flex: none; align-items: center; gap: 1rem; color: var(--fg); }
  .os-icons svg { width: 20px; height: 20px; fill: currentColor; }
}

/* Two routes to one goal (Offsite Backup: cloud backup / offline archive) */
.routes { display: grid; gap: 1.25rem; }
@media (min-width: 800px) { .routes { grid-template-columns: 1fr 1fr; } }
.route {
  position: relative; overflow: hidden; display: grid; gap: .85rem; align-content: start;
  padding: 2rem 1.75rem; background: var(--ink-900); border: 1px solid var(--line-strong); border-radius: var(--radius);
  text-decoration: none; transition: border-color .3s, transform .4s var(--ease);
}
.route:hover { border-color: var(--tan); transform: translateY(-3px); }
.route__letter { position: absolute; top: -1.25rem; right: 1rem; font: 800 10rem/1 var(--font-display); color: rgba(236, 238, 240, .05); pointer-events: none; }
.route__label { font: 500 .75rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tan); }
.route__title { font: 800 clamp(2.4rem, 4vw, 3.25rem)/.9 var(--font-display); text-transform: uppercase; }
.route p { margin: 0; color: var(--fg-muted); position: relative; }
.route .route__best { color: var(--fg); }
.route__best b { display: block; margin-bottom: .3rem; font: 500 .6875rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }

/* "Pairs well with" cross-links */
.pairs { display: grid; gap: 1rem; }
@media (min-width: 800px) { .pairs { grid-template-columns: repeat(3, 1fr); } }
.pair {
  display: grid; gap: .5rem; align-content: start; padding: 1.5rem;
  background: var(--ink-900); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; transition: border-color .3s, transform .4s var(--ease);
}
.pair:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.pair small { font: 500 .6875rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tan); }
.pair b { display: flex; align-items: center; gap: .5rem; font: 800 1.9rem/1 var(--font-display); text-transform: uppercase; }
.pair b .icon { color: var(--tan); width: 22px; height: 22px; transition: transform .25s var(--ease); }
.pair:hover b .icon { transform: translateX(4px); }
.pair span { color: var(--fg-muted); }

/* NAS tiers on a dark "stage" */
.tiers { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier { background: var(--ink-900); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; container-type: inline-size; }
.tier__stage {
  aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 1.5rem;
  background: radial-gradient(55% 60% at 50% 45%, rgba(236, 238, 240, .9), rgba(170, 178, 187, .55) 55%, rgba(64, 73, 83, .35) 100%);
  --frame-color: rgba(13, 16, 20, .45); --frame-inset: 10px; --frame-len: 14px;
}
.tier__stage img { width: 78%; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .45)); }
.tier__body { padding: 1.5rem; display: grid; gap: .6rem; }
.tier__label { font: 500 .75rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
.tier__cap { font: 800 2.75rem/.95 var(--font-display); text-transform: uppercase; color: var(--tan); }
/* The headline scales with its card so "Up to 300 drives" always fits on one line */
.tier .tier__cap { font-size: min(2.75rem, calc((100cqi - 3rem) / 6.3)); }
.tier .tier__spec { font: 500 .75rem/1.45 var(--font-mono); letter-spacing: .02em; color: var(--fg); }
/* ...and so does the spec line (longest is ~24.2em wide), keeping it on one line on narrow cards */
.tier .tier__spec { font-size: min(.75rem, calc((100cqi - 3rem) / 24.6)); }
.tiers__footnote { margin-top: 1.25rem; font-size: .8125rem; color: var(--fg-dim); }
.tier p { margin: 0; color: var(--fg-muted); }
.note { margin-top: 2rem; color: var(--fg-muted); }
/* Small print (e.g. recommended connection): lighter, italic, on its own line */
.fine-print { display: block; margin-top: .6rem; font-size: .8125rem; font-style: italic; line-height: 1.5; color: var(--fg-dim); }

/* Diagram (inline SVG) */
.diagram { background: var(--ink-900); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 3vw, 2rem); --frame-inset: 10px; --frame-len: 14px; --frame-color: rgba(236, 238, 240, .35); }
.diagram svg { width: 100%; height: auto; }
/* Diagram strokes & labels (classes used inside the inline SVGs) */
.diagram .dg-line { fill: none; stroke: var(--fg-dim); stroke-width: 1.5; }
.diagram .dg-line--dash { stroke-dasharray: 5 5; }
.diagram .dg-line--dot { stroke-dasharray: 1 6; stroke-linecap: round; stroke-width: 2.5; stroke: var(--fg-muted); }
.diagram .dg-zone { fill: rgba(210, 169, 142, .04); stroke: var(--tan); stroke-opacity: .55; stroke-width: 1.25; stroke-dasharray: 8 6; }
.diagram .dg-line--accent { stroke: var(--tan); stroke-width: 2; }
.diagram .dg-head { fill: none; stroke: var(--tan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.diagram .dg-head--muted { stroke: var(--fg-dim); }
.diagram .dg-box rect { fill: var(--ink-800); stroke: var(--line-strong); stroke-width: 1.5; }
.diagram .dg-bay rect, .diagram .dg-bay path { fill: var(--ink-950); stroke: var(--tan); stroke-width: 1.25; }
.diagram .dg-ws rect, .diagram .dg-ws path { fill: var(--ink-850); stroke: var(--fg-muted); stroke-width: 1.5; }
.diagram .dg-chip rect { fill: var(--ink-900); }   /* knocks the line out behind a label */
.diagram .dg-cloud { fill: var(--ink-800); stroke: var(--fg-muted); stroke-width: 1.5; }
.diagram text { font-family: var(--font-mono); font-weight: 500; letter-spacing: .08em; }
.diagram .dg-label, .diagram .dg-label text { font-size: 13px; fill: var(--fg-muted); }
.diagram .dg-title { font-size: 15px; fill: var(--fg); letter-spacing: .12em; }
.diagram figcaption { margin-top: 1rem; font: 500 .75rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.diagram--wide { max-width: 980px; margin-inline: auto; }
.diagram .dg-snap rect, .diagram .dg-snap path { fill: var(--ink-950); stroke: var(--tan); stroke-width: 1.75; }
.diagram .dg-snap path { fill: none; }
.diagram .dg-snap--bad rect, .diagram .dg-snap--bad path { stroke: var(--fg-dim); stroke-dasharray: 4 4; }
.diagram .dg-alert, .diagram .dg-alert path { fill: none; stroke: var(--alert); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.diagram .dg-alert-text { font-size: 13px; fill: var(--alert); letter-spacing: .14em; }
.diagram .dg-flame { fill: var(--alert); fill-opacity: .85; }

/* Backup guide: UK figures, the 3-2-1 steps, protection table, checklist and sources */
.ukstats { list-style: none; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 700px) { .ukstats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ukstats { grid-template-columns: repeat(3, 1fr); } }
.ukstat { background: var(--ink-950); padding: 1.75rem 1.75rem 2rem; display: grid; gap: .6rem; align-content: start; }
.ukstat b { font: 800 clamp(2.75rem, 5vw, 3.75rem)/.9 var(--font-display); color: var(--tan); }
.ukstat p { margin: 0; color: var(--fg); }
.ukstat small { font: 500 .6875rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); }
.rule { list-style: none; display: grid; gap: 1.25rem; }
.rule li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; align-items: start; }
.rule b { font: 800 3.5rem/.85 var(--font-display); color: var(--tan); }
.rule h3 { font-size: 1.1875rem; margin-bottom: .35rem; }
.rule p { margin: 0; color: var(--fg-muted); }
.rule-intro { max-width: 46rem; color: var(--fg-muted); }
.rule-intro p { margin: 0 0 1.5rem; }
@media (min-width: 900px) { .rule--row { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.extended { margin-top: clamp(2rem, 4vw, 3rem); padding: 1.5rem 1.75rem; border: 1px solid var(--line-strong); border-left: 3px solid var(--tan); border-radius: var(--radius); background: var(--ink-900); display: grid; gap: .75rem; max-width: 62rem; }
.extended p { margin: 0; color: var(--fg-muted); }
.extended b { color: var(--tan); }
.matrix-wrap { overflow-x: auto; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.matrix { width: 100%; min-width: 640px; border-collapse: collapse; }
.matrix th, .matrix td { padding: .9rem 1rem; border-bottom: 1px solid var(--line); text-align: center; }
.matrix tr:last-child th, .matrix tr:last-child td { border-bottom: 0; }
.matrix thead th { font: 500 .6875rem/1.35 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); background: var(--ink-900); vertical-align: bottom; }
.matrix th[scope="row"], .matrix thead th:first-child { text-align: left; }
.matrix tbody th { font-weight: 600; }
.matrix td { font: 500 .75rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.matrix td::before { content: ""; display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .5rem; vertical-align: .05em; }
.matrix td.y { color: var(--fg); } .matrix td.y::before { background: var(--tan); }
.matrix td.p { color: var(--fg-muted); } .matrix td.p::before { border: 2px solid var(--tan); }
.matrix td.n { color: var(--fg-dim); } .matrix td.n::before { border: 1px solid var(--fg-dim); }
.checklist { list-style: none; counter-reset: step; display: grid; gap: 0; border-top: 1px solid var(--line); }
.checklist li { counter-increment: step; display: grid; grid-template-columns: 2.75rem 1fr; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.checklist li::before { content: counter(step, decimal-leading-zero); font: 500 .8125rem/1.6 var(--font-mono); color: var(--tan); letter-spacing: .1em; grid-row: span 2; }
.checklist h3 { font-size: 1.0625rem; }
.checklist p { margin: .25rem 0 0; color: var(--fg-muted); }
/* FAQ (Support & maintenance): the checklist with each answer in a <details>, first one open */
.checklist--faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; list-style: none; cursor: pointer; }
.checklist--faq summary::-webkit-details-marker { display: none; }
.checklist--faq summary .icon { flex: none; margin-top: .15rem; color: var(--tan); transition: transform .25s var(--ease); }
.checklist--faq details[open] summary .icon { transform: rotate(180deg); }
.checklist--faq summary:hover h3 { color: var(--tan); }
.checklist--faq summary:focus-visible { outline: 2px solid var(--tan); outline-offset: 4px; border-radius: 2px; }
.checklist--faq p { margin-top: .5rem; }
.sources { margin-top: 1.25rem; padding-left: 1.25rem; display: grid; gap: .6rem; color: var(--fg-muted); font-size: .9375rem; max-width: 62rem; }

/* NLE-style timeline for the cloud workflow */
.timeline { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--ink-900); overflow: hidden; }
.timeline__ruler {
  height: 30px; border-bottom: 1px solid var(--line-strong); position: relative;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 25%), repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 5%);
  background-size: 100% 12px, 100% 7px; background-repeat: no-repeat; background-position: bottom;
}
.timeline__ruler span { position: absolute; top: 5px; font: 500 .625rem/1 var(--font-mono); letter-spacing: .08em; color: var(--fg-dim); transform: translateX(4px); }
@media (max-width: 599px) { .timeline__ruler span:nth-child(even) { display: none; } }
.timeline__track { list-style: none; display: grid; gap: .75rem; padding: 1rem; position: relative; }
@media (min-width: 800px) { .timeline__track { grid-template-columns: repeat(3, 1fr); gap: 4px; } }
.clip { position: relative; background: var(--ink-800); border-radius: 3px; border-left: 3px solid var(--tan); padding: 1.1rem 1.25rem 1.3rem; display: grid; gap: .5rem; }
.clip:nth-child(2) { border-left-color: #8fb3c9; }
.clip:nth-child(3) { border-left-color: #a8c49a; }
.clip__tc { font: 500 .6875rem/1 var(--font-mono); letter-spacing: .12em; color: var(--fg-muted); display: flex; align-items: center; gap: .5rem; }
.clip__tc .icon { color: var(--tan); width: 18px; height: 18px; }
.clip h3 { font: 800 1.75rem/1 var(--font-display); text-transform: uppercase; }
.clip p { margin: 0; color: var(--fg-muted); font-size: .98rem; }
.timeline__playhead { display: none; }
@media (min-width: 800px) {
  .timeline__playhead { display: block; position: absolute; top: -30px; bottom: 0; left: calc(100% - 6px); width: 2px; background: var(--tan); z-index: 2; pointer-events: none; }
  .timeline__playhead::before { content: ""; position: absolute; top: 0; left: -6px; border: 7px solid transparent; border-top: 9px solid var(--tan); }
  .js .timeline.reveal .timeline__playhead { left: 6px; transition: left 2.4s var(--ease) .3s; }
  .js .timeline.reveal.is-visible .timeline__playhead { left: calc(100% - 6px); }
}

/* 1GbE vs 10GbE chart styled like level meters */
.meter-chart { display: grid; gap: 1.75rem; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--ink-900); border: 1px solid var(--line); border-radius: var(--radius); }
.meter { display: grid; gap: .6rem; }
.meter__label { display: flex; justify-content: space-between; gap: 1rem; font: 500 .8125rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.meter__label b { color: var(--fg); font-weight: 500; }
.meter__bar { height: 34px; background: repeating-linear-gradient(90deg, var(--ink-800) 0 calc(10% - 3px), var(--ink-950) calc(10% - 3px) 10%); border-radius: 2px; overflow: hidden; }
.meter__fill { display: block; height: 100%; width: var(--w); background: repeating-linear-gradient(90deg, currentColor 0 calc(100% / var(--segs) - 3px), transparent calc(100% / var(--segs) - 3px) calc(100% / var(--segs))); color: var(--fg-muted); }
.meter--hi .meter__fill { color: var(--tan); }
.js .meter-chart.reveal .meter__fill { width: 0; transition: width 1.4s var(--ease) .2s; }
.js .meter-chart.reveal.is-visible .meter__fill { width: var(--w); }
.meter-chart__scale { display: flex; justify-content: space-between; font: 500 .6875rem/1 var(--font-mono); color: var(--fg-dim); }
/* Speed ladder (Do I need 10GbE?): the meter chart with a big figure and a note per row */
.meter-chart--speeds .meter__label { align-items: baseline; }
.meter-chart--speeds .meter__label b { font: 800 clamp(1.75rem, 3.5vw, 2.5rem)/1 var(--font-display); letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--fg); }
.meter-chart--speeds .meter--hi .meter__label b { color: var(--tan); }
.meter__note { margin: 0; color: var(--fg-muted); font-size: .9375rem; }
/* Network check (Networking): the meter chart driven by netcalc.js */
.netcalc { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.netcalc__result { display: grid; gap: 1.25rem; align-content: start; }
.netcalc .meter-chart { margin: 0; }
.netcalc .meter__fill { transition: width .6s var(--ease); }
.netcalc .meter--need .meter__fill { color: var(--fg); }
.netcalc__caption { font: 500 .6875rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); }
.netcalc__verdict { display: grid; gap: .6rem; padding: 1.25rem 1.5rem; border: 1px solid var(--line-strong); border-left: 3px solid var(--tan); border-radius: var(--radius); background: var(--ink-900); }
.netcalc__verdict p { margin: 0; color: var(--fg-muted); }
.netcalc__verdict [data-net-out="advice"] { color: var(--fg); }
.netcalc__status { font: 800 1.75rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.netcalc__status[data-state="ok"] { color: #6fcf97; }
.netcalc__status[data-state="tight"] { color: var(--tan); }
.netcalc__status[data-state="short"] { color: var(--alert); }

/* Case-study video (Networking), hosted on Cloudflare Stream: our poster with frame marks, a mono
   label and a tan play button. main.js swaps in the Stream player when the button is pressed, so
   nothing loads from Stream until then (without JS the <noscript> player is shown instead). */
.case-video {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--ink-950);
  --frame-inset: 14px; --frame-len: 22px; --frame-color: rgba(236, 238, 240, .6);
}
.case-video > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.case-video iframe { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; border: 0; }
.case-video__hud {
  position: absolute; top: 28px; left: 30px; right: 30px; z-index: 2; pointer-events: none;
  display: flex; justify-content: space-between; gap: 1rem;
  font: 500 .75rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(236, 238, 240, .8);
}
.case-video__hud--end { justify-content: flex-end; gap: 1.5rem; }   /* when the film has its own logo top-left */
.case-video__play { display: none; }
.js .case-video__play {
  position: absolute; top: 50%; left: 50%; z-index: 3;
  display: grid; place-items: center;
  width: 88px; height: 88px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--tan); color: var(--ink-950);
  box-shadow: 0 0 0 10px rgba(210, 169, 142, .22);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: background-color .2s, box-shadow .2s var(--ease);
}
.js .case-video__play svg { width: 36px; height: 36px; fill: currentColor; }
.js .case-video__play:hover { background: var(--tan-hi); box-shadow: 0 0 0 14px rgba(210, 169, 142, .28); }
.js .case-video__play:focus-visible { outline-offset: 16px; border-radius: 50%; }
.case-video.is-playing::before, .case-video.is-playing .case-video__hud, .case-video.is-playing .case-video__play { display: none; }
@media (max-width: 699px) {
  .case-video { --frame-inset: 8px; --frame-len: 14px; }
  .case-video__hud { top: 18px; left: 20px; right: 20px; font-size: .6875rem; }
  .js .case-video__play { width: 64px; height: 64px; box-shadow: 0 0 0 7px rgba(210, 169, 142, .22); }
  .js .case-video__play svg { width: 28px; height: 28px; }
}

/* Internet options */
.options { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .options { grid-template-columns: 1fr 1fr; } }
.option { background: var(--ink-900); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.option__media { aspect-ratio: 16 / 7; }
.option__head { padding: 1.75rem 1.75rem 0; display: grid; gap: .6rem; }
.option__head h3 { font: 800 clamp(2.4rem, 4vw, 3.25rem)/.9 var(--font-display); text-transform: uppercase; }
.option__head h3 em { font-style: normal; color: var(--tan); }
.option ul { list-style: none; display: grid; padding: 1rem 1.75rem 1.75rem; }
.option li { display: grid; grid-template-columns: 28px 1fr; gap: .25rem 1rem; padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.option li:last-child { border-bottom: 0; }
.option li .icon { color: var(--tan); width: 24px; height: 24px; grid-row: span 2; margin-top: .1rem; }
.option h4 { font-size: 1.0625rem; }
.option li p { margin: 0; color: var(--fg-muted); grid-column: 2; }

/* 11. Testimonials (film strip) ------------------------------------------- */
.reviews-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: 2.5rem; }
.reviews-head .section-head { margin: 0; }
.carousel-nav { display: flex; gap: .5rem; }
.carousel-nav button {
  width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer;
  background: none; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--fg);
}
.carousel-nav button:hover { border-color: var(--tan); color: var(--tan); }
.carousel-nav button:disabled { opacity: .35; cursor: default; border-color: var(--line); color: var(--fg); }
.filmstrip {
  --sprocket: 18px;
  position: relative; background: #07090b; padding-block: calc(var(--sprocket) + 14px);
}
.filmstrip::before, .filmstrip::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--sprocket);
  background: radial-gradient(circle at 50% 50%, transparent 0, transparent 0) , repeating-linear-gradient(90deg, transparent 0 10px, rgba(236, 238, 240, .14) 10px 24px, transparent 24px 34px);
  -webkit-mask: linear-gradient(#000 0 0) center / 100% 9px no-repeat;
  mask: linear-gradient(#000 0 0) center / 100% 9px no-repeat;
}
.filmstrip::before { top: 6px; }
.filmstrip::after { bottom: 6px; }
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 420px); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: max(var(--gutter), (100% - var(--wrap)) / 2);
  scroll-padding-inline: max(var(--gutter), (100% - var(--wrap)) / 2);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { scroll-snap-align: start; display: flex; }
.quote {
  margin: 0; display: flex; flex-direction: column; gap: 1.25rem; width: 100%;
  background: var(--ink-850); border-radius: 3px; padding: 2rem 1.75rem 1.75rem;
}
.stars { color: var(--tan); letter-spacing: .2em; font-size: .9rem; }
.quote blockquote { margin: 0; flex: 1; font-size: 1.0625rem; line-height: 1.6; color: var(--fg); }
.quote blockquote p { margin: 0; }
.quote blockquote p::before { content: "\201C"; }
.quote blockquote p::after { content: "\201D"; }
.quote figcaption { display: flex; align-items: center; gap: .9rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.quote figcaption img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; filter: grayscale(.35); }
.quote__initials { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-800); border: 1px solid var(--line); font: 500 .9375rem/1 var(--font-mono); letter-spacing: .06em; color: var(--tan); }
.quote cite { display: block; font-style: normal; font-weight: 600; }
.quote figcaption span span { display: block; font: 500 .75rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
/* A single pull quote beside a story (Offsite Backup), larger than the reel's review cards */
.story-quote { padding: clamp(1.75rem, 4vw, 2.75rem); border-left: 3px solid var(--tan); }
.story-quote blockquote { font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.45; }
.story-quote blockquote p + p { margin-top: .9em; }

/* 12. Forms & contact ----------------------------------------------------- */
.contact-grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: 1.35fr 1fr; align-items: start; } }
.form { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .form { grid-template-columns: 1fr 1fr; } .form .full, .form .form-status { grid-column: 1 / -1; } }
.field { display: grid; gap: .45rem; }
.field label { font: 500 .75rem/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.field label .req { color: var(--tan); }
.form input, .form select, .form textarea {
  width: 100%; min-height: 52px; padding: .8rem 1rem;
  background: var(--ink-900); color: var(--fg);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font: 400 1rem/1.4 var(--font-text);
  transition: border-color .2s, background-color .2s;
}
.form select {
  appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d2a98e' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px;
}
.form textarea { min-height: 150px; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: var(--fg-dim); }
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--fg-dim); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--tan); background: var(--ink-850); box-shadow: 0 0 0 3px rgba(210, 169, 142, .25); }
.form .btn { width: 100%; }
@media (min-width: 640px) { .form .btn { width: auto; } }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form__foot small { color: var(--fg-muted); font-size: .875rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 0; font-size: .98rem; }
.form-status:empty { display: none; }
.form-status.is-success { color: #a8d5a0; }
.form-status.is-error { color: #f2a7a7; }

.call-panel { display: grid; gap: 1.5rem; padding: clamp(1.75rem, 4vw, 2.5rem); background: var(--ink-900); border: 1px solid var(--line-strong); border-radius: var(--radius); --frame-inset: 10px; --frame-len: 14px; --frame-color: rgba(210, 169, 142, .6); }
.call-panel h3 { font: 800 2rem/1 var(--font-display); text-transform: uppercase; }
.call-panel p { margin: 0; color: var(--fg-muted); }
.call-panel__phone { font: 800 clamp(2.5rem, 5vw, 3.25rem)/1 var(--font-display); color: var(--tan); text-decoration: none; letter-spacing: .02em; }
.call-panel__phone:hover { color: var(--tan-hi); }
.call-panel dl { margin: 0; display: grid; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.call-panel dt { font: 500 .6875rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: .35rem; }
.call-panel dd { margin: 0; }
.call-panel dd a { color: var(--fg); }
.call-panel dd a:hover { color: var(--tan); }

.next-steps { list-style: none; display: grid; gap: 1rem; counter-reset: n; }
.next-steps li { display: grid; grid-template-columns: 2.5rem 1fr; gap: .75rem; }
.next-steps li::before { counter-increment: n; content: "0" counter(n); font: 800 1.75rem/1 var(--font-display); color: var(--tan); }
.next-steps b { display: block; }
.next-steps span { color: var(--fg-muted); font-size: .98rem; }

/* Storage calculator: the answers on the left, the estimate (a call sheet) on the right */
.calc { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 1000px) { .calc { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; } }
.calc [hidden] { display: none; }
.calc__form { align-content: start; }
.calc__form .eyebrow { margin: 0; }
.calc__hint { margin: 0; font: 400 .8125rem/1.4 var(--font-mono); color: var(--fg-dim); }
/* Brand picker: radio buttons shown as logo tiles (only with JavaScript, which does the filtering) */
.calc__brands { display: none; min-width: 0; margin: 0; padding: 0; border: 0; }
.js .calc__brands { display: block; }
.calc__brands legend { padding: 0; margin-bottom: .6rem; font: 500 .75rem/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.brand-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.calc__brands .brand-tile { position: relative; display: block; cursor: pointer; letter-spacing: normal; text-transform: none; }
.form .brand-tile input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.brand-tile__face {
  display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 60px; padding: .6rem .5rem;
  background: var(--ink-900); border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--fg);
  transition: border-color .2s, background-color .2s;
}
.brand-tile:hover .brand-tile__face { border-color: var(--fg-dim); }
.brand-tile input:checked + .brand-tile__face { color: #fff; border-color: var(--tan); background: rgba(210, 169, 142, .1); box-shadow: inset 0 0 0 1px var(--tan); }
.brand-tile input:focus-visible + .brand-tile__face { outline: 2px solid var(--tan); outline-offset: 2px; }
.brand-tile__logo { flex: none; max-width: 100%; height: auto; fill: currentColor; }
.brand-tile__word { font: 500 .9rem/1 var(--font-text); }
.brand-tile__word--blackmagic { font-size: .8rem; }
.brand-tile__word--red { font: 800 1.6rem/1 var(--font-display); letter-spacing: .04em; }
.brand-tile__word--other { font: 500 .75rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
/* Narrow tiles: logo above the word */
@media (max-width: 560px) {
  .brand-tile__face { flex-direction: column; gap: .35rem; padding-inline: .25rem; }
  .brand-tile__word--prores, .brand-tile__word--blackmagic { font-size: .72rem; }
  .brand-tile__logo--apple, .brand-tile__logo--blackmagic { width: auto; height: 16px; }
}
.calc__range { display: flex; align-items: center; gap: 1rem; min-height: 52px; }
.form .calc__range input { flex: 1; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; accent-color: var(--tan); cursor: pointer; }
.form .calc__range input:focus-visible { outline: 2px solid var(--tan); outline-offset: 6px; }
.calc__range output { min-width: 6.5rem; text-align: right; font: 500 1rem/1 var(--font-mono); color: var(--fg); }
.estimate { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--ink-900); }
.estimate dl { margin: 0; display: grid; }
.estimate dl > div { padding: 1.2rem 1.25rem 1.35rem; border-bottom: 1px solid var(--line); }
.estimate dt { margin-bottom: .6rem; font: 500 .75rem/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tan); }
.estimate dd { margin: 0; color: var(--fg-muted); font-size: .9375rem; line-height: 1.5; }
.estimate__value { display: block; margin-bottom: .4rem; font: 800 clamp(2.1rem, 4vw, 2.75rem)/1 var(--font-display); text-transform: uppercase; color: var(--fg); }
.estimate__value small { font-size: .5em; letter-spacing: .04em; color: var(--fg-muted); }
.estimate__link { white-space: nowrap; color: var(--tan); }
.estimate__link::after { content: " \2192"; }
.estimate__link:hover { color: var(--tan-hi); }
@media (min-width: 560px) {
  .estimate dl { grid-template-columns: 1fr 1fr; }
  .estimate dl > div:nth-child(odd) { border-right: 1px solid var(--line); }
}
.estimate__actions { display: grid; gap: .9rem; padding: 1.25rem; }
.estimate__small { margin: 0; font-size: .875rem; color: var(--fg-muted); }
.estimate__status:empty { display: none; }
.estimate__status { color: var(--fg); overflow-wrap: anywhere; }

/* 13. Footer -------------------------------------------------------------- */
.site-footer { background: #090b0e; border-top: 1px solid var(--line); padding-top: clamp(3.5rem, 7vw, 5.5rem); font-size: .98rem; }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer-brand > img { width: 189px; height: 46px; margin-bottom: 1.5rem; }
.footer-brand p { color: var(--fg-muted); margin-bottom: .75rem; }
.footer-phone { font: 800 2.25rem/1 var(--font-display); color: var(--tan); text-decoration: none; letter-spacing: .02em; }
.footer-phone:hover { color: var(--tan-hi); }
.site-footer h2 { font: 500 .75rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 1.25rem; }
.site-footer ul { list-style: none; display: grid; gap: .6rem; }
.site-footer ul a { text-decoration: none; color: var(--fg); }
.site-footer ul a:hover { color: var(--tan); text-decoration: underline; }
.site-footer ul a .icon { display: inline-block; vertical-align: -.1em; margin-left: .2rem; color: var(--tan); }
.site-footer address { font-style: normal; color: var(--fg-muted); margin-bottom: 1rem; }
.site-footer address a { color: var(--fg); }
.footer-badges { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; margin-top: 1.75rem; }
.footer-badges img { height: 40px; width: auto; }
.footer-badges .on-dark { filter: brightness(0) invert(.85); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: 3.5rem; padding-block: 1.5rem; border-top: 1px solid var(--line);
  font: 500 .75rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted);
}
.social { display: flex; gap: .5rem; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; color: var(--fg-muted); }
.social a:hover { color: var(--tan); border-color: var(--tan); }
.social svg { width: 18px; height: 18px; fill: currentColor; }

/* Cookie banner (only rendered when site.gaId is set; main.js shows it until a choice is made).
   Sits above the mobile action bar, and in the bottom-left corner on desktop. */
.cookie-banner {
  position: fixed; z-index: 90; left: var(--gutter); right: var(--gutter);
  bottom: calc(76px + env(safe-area-inset-bottom));
  display: grid; gap: .9rem; padding: 1.1rem 1.25rem;
  background: var(--ink-850); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45); font-size: .9375rem; line-height: 1.55;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; color: var(--fg-muted); }
.cookie-banner a { color: var(--fg); }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cookie-banner__actions .btn { flex: 1 1 8rem; }
@media (min-width: 1024px) { .cookie-banner { right: auto; bottom: 1.5rem; max-width: 26rem; } }
.link-btn { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.link-btn:hover { color: var(--tan); }
.site-footer .link-btn { color: var(--fg); }
.site-footer .link-btn:hover { color: var(--tan); text-decoration: underline; }

/* 14. Legal (paper) & 404 ------------------------------------------------- */
.paper { background: var(--paper); color: var(--paper-ink); padding-block: clamp(3rem, 7vw, 6rem); }
.prose { max-width: 70ch; margin-inline: auto; font-size: 1.0625rem; line-height: 1.75; }
.prose h2 { font: 600 1.375rem/1.3 var(--font-text); margin: 2.75rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid rgba(26, 31, 38, .15); }
.prose p, .prose ul { margin: 0 0 1.1em; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: .6em; }
.prose li::marker { color: var(--paper-link); }
.prose a { color: var(--paper-link); }
.prose ::selection { background: var(--slate); color: #fff; }
.paper :focus-visible { outline-color: var(--paper-link); }

/* Terms of service (/terms/): numbered clauses with a hanging number, (a)(b) lists, tables.
   tools/terms.py keeps the "Last updated" date and the PDF download in step with the wording. */
.terms-meta { margin: 0; color: var(--fg-muted); font-size: .8125rem; text-transform: uppercase; }
.terms-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.prose.terms { max-width: 78ch; }
.terms h2 { scroll-margin-top: calc(var(--header-h) + 1rem); }
.terms .cl { position: relative; padding-left: 3.4rem; }
.terms .cl__n { position: absolute; left: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.terms ol.alpha { list-style: none; counter-reset: alpha; padding-left: 5.4rem; }
.terms ol.alpha > li { counter-increment: alpha; position: relative; }
.terms ol.alpha > li::before { content: "(" counter(alpha, lower-alpha) ")"; position: absolute; left: -2rem; color: var(--paper-muted); }
.terms-defs { margin: 0 0 1.1em 3.4rem; }
.terms-defs dt { font-weight: 600; }
.terms-defs dd { margin: 0 0 .7em; }
.terms-part { margin: 3.5rem 0 0; font: 500 .8125rem/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-link); }
.terms-part + h2 { margin-top: 1rem; }
.terms-table { overflow-x: auto; margin: 0 0 1.25em; }
.terms-table table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.terms-table th, .terms-table td { text-align: left; vertical-align: top; padding: .6rem .75rem; border-bottom: 1px solid rgba(26, 31, 38, .15); }
.terms-table th { font-weight: 600; border-bottom-color: rgba(26, 31, 38, .4); }
.terms-table td:first-child { font-weight: 600; min-width: 9rem; }
.terms-toc { display: grid; gap: 0 3rem; margin: 2.5rem 0; padding: 1.5rem 1.75rem; border: 1px solid rgba(26, 31, 38, .15); border-radius: var(--radius); }
@media (min-width: 760px) { .terms-toc { grid-template-columns: 1fr 1fr; } }
.terms-toc h2 { margin: 0 0 .5rem; padding: 0; border: 0; font-size: 1rem; }
.terms-toc ol { margin: 0 0 1rem; padding-left: 1.75rem; }
.terms-toc li { margin-bottom: .2em; }
.terms-toc .toc-s { list-style: none; counter-reset: toc-s; }
.terms-toc .toc-s li { counter-increment: toc-s; position: relative; }
.terms-toc .toc-s li::before { content: "S" counter(toc-s) "."; position: absolute; left: -1.75rem; }
.terms-note { margin: 0 0 2rem; padding: 1rem 1.25rem; border: 1px dashed var(--paper-link); border-radius: var(--radius); background: rgba(122, 79, 51, .06); }
.terms-note p { margin: 0; }
@media (max-width: 599px) {
  .terms .cl { padding-left: 0; }
  .terms .cl__n { position: static; margin-right: .35rem; }
  .terms ol.alpha { padding-left: 2rem; }
  .terms-defs { margin-left: 0; }
}

/* Print / PDF (the terms download is made from this page by tools/terms.py): paper only, no chrome */
@page { size: A4; margin: 18mm 16mm 20mm; @bottom-right { content: counter(page) " / " counter(pages); font: 9pt "IBM Plex Sans", sans-serif; color: #4d5661; } }
.terms-print-logo { display: none; }
@media print {
  body { background: #fff; color: var(--paper-ink); font-size: 10pt; }
  body::before, body::after, .skip-link, .site-header, .action-bar, .site-footer, .terms-actions, .terms-toc { display: none !important; }
  .page-hero--plain { padding: 0 0 6mm; min-height: 0; border-bottom: 1px solid rgba(26, 31, 38, .3); }
  .page-hero .display--page { font-size: 26pt; color: var(--paper-ink); }
  .crumbs { display: none; }
  .page-hero--plain .wrap { position: relative; }
  .terms-print-logo { display: block; position: absolute; top: 0; right: 0; width: 46mm; height: auto; }
  .terms-meta { color: var(--paper-muted); }
  .paper { background: #fff; padding-block: 6mm 0; }
  .wrap { width: 100%; }
  .prose.terms { max-width: none; font-size: 10pt; line-height: 1.5; }
  .prose a { color: inherit; text-decoration: none; }
  .prose h2 { break-after: avoid; margin-top: 8mm; }
  .terms .cl, .terms li, .terms-table tr { break-inside: avoid; }
  .js .reveal { opacity: 1; transform: none; }
}

.not-found { min-height: 70vh; display: grid; align-items: center; }
.not-found__slate { max-width: 34rem; margin-bottom: 2.5rem; }
.not-found__links { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 2rem; }
.not-found__links a { color: var(--tan); }

/* 15. Motion & utilities -------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal-d1 { transition-delay: .08s; }
.js .reveal-d2 { transition-delay: .16s; }
.js .reveal-d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .slate.reveal .slate__clapper { transform: none; }
  .js .meter-chart.reveal .meter__fill { width: var(--w); }
  .js .timeline.reveal .timeline__playhead { left: calc(100% - 6px); }
}

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
.muted { color: var(--fg-muted); }