/* ============================================================
   CentraSpark — public site stylesheet.
   Composes the CentraSpark Design System tokens (tokens/*.css, copied
   verbatim from the design-system package). Nothing below introduces a
   colour, radius or duration that the tokens do not already define.
   ============================================================ */
@import "tokens/fonts.css";
@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";
@import "tokens/base.css";

/* Site-level defaults ------------------------------------------ */
body { font-size: 1rem; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--cs-copper-soft); color: var(--text-strong); }

.wrap { max-width: var(--wrap-max); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; }
.center { text-align: center; margin-inline: auto; }

/* Lucide-style inline icons */
.i { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.75;
     stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* Header ------------------------------------------------------- */
.chrome {
  position: sticky; top: 0; z-index: 30;
  background: rgba(5, 5, 8, 0.72);
  backdrop-filter: blur(var(--cs-glass-blur));
  -webkit-backdrop-filter: blur(var(--cs-glass-blur));
  border-bottom: 1px solid var(--line);
}
.chrome .bar {
  max-width: var(--wrap-max); margin-inline: auto;
  padding: var(--s4) var(--gutter);
  display: flex; align-items: center; gap: var(--s8);
}
.lockup { display: flex; align-items: center; gap: var(--s3); text-decoration: none; flex: 0 0 auto; }
.lockup img { width: 32px; height: 32px; }
.lockup .word {
  font-size: 1.3rem; font-weight: var(--fw-bold); letter-spacing: var(--tracking-display); line-height: 1;
  background: linear-gradient(160deg, #fff, var(--cs-periwinkle));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lockup .div {
  font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--text-faint); padding-left: var(--s3);
  border-left: 1px solid var(--line); line-height: 1.2;
}
nav.tabs { display: flex; gap: var(--s6); margin-left: auto; }
nav.tabs a {
  font-size: var(--t-sm); font-weight: var(--fw-medium); color: var(--text-muted);
  text-decoration: none; padding: var(--s1) 0; border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
nav.tabs a:hover { color: var(--text-strong); }
nav.tabs a[aria-current] { color: var(--text-strong); border-bottom-color: var(--cs-copper); }
@media (max-width: 640px) {
  .lockup .div { display: none; }
  .lockup .word { font-size: 1.1rem; }
  .chrome .bar { gap: var(--s4); padding-inline: var(--s4); }
  nav.tabs { gap: var(--s4); }
  nav.tabs a { font-size: var(--t-xs); }
}

/* Buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: .7rem 1.2rem; border-radius: var(--r-sm); font-family: var(--font-sans);
  font-size: var(--t-sm); font-weight: var(--fw-semibold); line-height: 1.2;
  border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: filter var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn:hover { filter: brightness(1.15); }
.btn.primary { background: linear-gradient(135deg, var(--cs-copper), var(--cs-copper-deep)); color: var(--text-on-action); box-shadow: var(--glow-action); }
.btn.primary:hover { box-shadow: var(--glow-action-hover); }
.btn.ghost { background: var(--surface-raised); color: var(--text-strong); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--line-strong); }
.btn .i { width: 16px; height: 16px; }

/* Type --------------------------------------------------------- */
.eyebrow { font-family: var(--font-mono); font-size: var(--t-eyebrow); font-weight: var(--fw-medium);
           letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--s4); }
.eyebrow.live { color: var(--cs-copper-bright); }
.eyebrow .dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-pill); margin-right: var(--s2); vertical-align: middle; position: relative; top: -1px; }
h1.hero { font-size: var(--t-hero); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-hero); line-height: var(--lh-tight); margin: 0 0 var(--s6); text-wrap: balance; }
h1.title { font-size: var(--t-h1); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-display); line-height: var(--lh-tight); margin: 0 0 var(--s4); text-wrap: balance; }
h2 { font-size: var(--t-h2); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-display); line-height: var(--lh-snug); margin: 0 0 var(--s4); text-wrap: balance; }
h3 { font-size: var(--t-h3); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-h); margin: 0 0 var(--s2); }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--text-body); line-height: var(--lh-body); max-width: 62ch; margin: 0 0 var(--s8); }
.lede.center { margin-inline: auto; }
p { color: var(--text-body); line-height: var(--lh-body); margin: 0 0 var(--s4); }
p.muted, .muted { color: var(--text-muted); }
p.faint, .faint { color: var(--text-faint); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-mono); }
.tagline { font-family: var(--font-sans); font-weight: var(--fw-regular); letter-spacing: var(--tracking-tagline);
           text-transform: uppercase; color: var(--cs-slate-400); font-size: var(--t-sm); }
.grad { background: linear-gradient(160deg, #fff 0%, var(--cs-periwinkle) 100%);
        -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Sections ----------------------------------------------------- */
section.sec { padding-block: var(--s16); }
section.sec.tight { padding-block: var(--s12); }
.sec-head { max-width: 760px; margin-bottom: var(--s10); }
.sec-head.center { text-align: center; margin-inline: auto; }
.seam { position: relative; }

/* Hero --------------------------------------------------------- */
.hero-wrap { position: relative; overflow: hidden; }
.hero-wrap .bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-wrap .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero-wrap .bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,5,8,.55) 0%, rgba(5,5,8,.35) 40%, var(--cs-void) 100%),
    linear-gradient(90deg, rgba(5,5,8,.7) 0%, transparent 60%);
}
.hero-wrap .fg { position: relative; z-index: 1; }
.hero-block { padding-block: clamp(5rem, 12vw, 9rem) clamp(4rem, 9vw, 7rem); }
.hero-block .actions { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.hero-block.center { text-align: center; }
.hero-block.center .actions { justify-content: center; }
.hero-block.center .lede { margin-inline: auto; }

/* The landing lockup — mark + wordmark, big */
.big-lockup { display: inline-flex; align-items: center; gap: clamp(.9rem, 2vw, 1.4rem); margin: 0 auto var(--s6); }
.big-lockup img { width: clamp(64px, 9vw, 96px); height: auto; }
/* Above ~200px wide the wordmark is the official setting — Helvetica Neue Bold,
   white → periwinkle — not the Outfit approximation used in the chrome. */
.big-lockup .word { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: clamp(2.6rem, 7vw, 5rem);
                    font-weight: 700; letter-spacing: -0.016em; line-height: 1; }

/* Panels ------------------------------------------------------- */
.panel {
  background: var(--surface);
  backdrop-filter: blur(var(--cs-glass-blur)); -webkit-backdrop-filter: blur(var(--cs-glass-blur));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--el-1); padding: var(--s6);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.panel.hoverable:hover { background: rgba(30,41,59,.62); border-color: var(--line-strong); box-shadow: var(--el-2); }
.panel.rule { border-left: 3px solid var(--tier, var(--line-strong)); }
.panel p:last-child { margin-bottom: 0; }
.panel .icon { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center;
               background: var(--surface-raised); border: 1px solid var(--line); margin-bottom: var(--s4); color: var(--text-strong); }
.panel .icon .i { width: 18px; height: 18px; }
a.panel { text-decoration: none; color: inherit; display: block; }
.panel .go { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); font-weight: var(--fw-medium);
             color: var(--text-strong); margin-top: var(--s5); }
.panel .go .i { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease); }
a.panel:hover .go .i { transform: translateX(3px); }

/* Tiles + grids ------------------------------------------------ */
.grid-tiles  { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-tile), 100%), 1fr)); }
.grid-panels { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-panel), 100%), 1fr)); }
.grid-quad   { display: grid; gap: var(--s5); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1120px) { .grid-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .grid-quad { grid-template-columns: minmax(0, 1fr); } }
.grid-two { display: grid; gap: var(--s5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-two { grid-template-columns: minmax(0, 1fr); } }

/* Stat --------------------------------------------------------- */
.stat { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.stat .l { font-family: var(--font-mono); font-size: var(--t-eyebrow); font-weight: var(--fw-medium);
           letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.stat .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-metric-lg);
           font-weight: var(--fw-semibold); letter-spacing: var(--tracking-mono); line-height: var(--lh-tight); color: var(--text-strong); }
.stat .s { font-size: var(--t-xs); color: var(--text-faint); line-height: 1.45; }

/* Tier atoms --------------------------------------------------- */
.tier-dot { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-mono);
            font-size: var(--t-eyebrow); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.tier-dot i { width: 8px; height: 8px; border-radius: var(--r-pill); display: block; background: var(--tier); }
.t-manufacturer { --tier: var(--cs-manufacturer); }
.t-distributor  { --tier: var(--cs-distributor); }
.t-dealer       { --tier: var(--cs-dealer); }
.t-customer     { --tier: var(--cs-customer); }
.tier-strip { display: flex; gap: var(--s6); flex-wrap: wrap; justify-content: center; }
.tier-ring { width: 10px; height: 10px; border-radius: var(--r-pill); border: 2px solid var(--tier); display: inline-block; }

/* Rows (the disciplines list) ---------------------------------- */
.rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 2.25rem minmax(0, 14rem) minmax(0, 1fr); gap: var(--s5); align-items: start;
       padding: var(--s5) var(--s2); border-top: 1px solid var(--line); }
.row:last-child { border-bottom: 1px solid var(--line); }
.row .n { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-faint); padding-top: .2rem; }
.row h3 { margin: 0; font-size: var(--t-h4); font-weight: var(--fw-semibold); }
.row p { margin: 0; font-size: var(--t-sm); color: var(--text-muted); }
@media (max-width: 700px) { .row { grid-template-columns: 2.25rem minmax(0, 1fr); } .row p { grid-column: 2; } }

/* Feature list (checks) --------------------------------------- */
ul.feat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
ul.feat li { position: relative; padding-left: 1.1rem; font-size: var(--t-sm); color: var(--text-body); line-height: 1.5; }
ul.feat li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--tier, var(--text-faint)); }
ul.feat b { color: var(--text-strong); font-weight: var(--fw-semibold); }

/* Quote / statement band --------------------------------------- */
.band { padding-block: var(--s16); text-align: center; }
.band .big { font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: var(--fw-medium); letter-spacing: var(--tracking-display); line-height: 1.25; margin: 0 auto var(--s4); max-width: 24ch; text-wrap: balance; }

/* Image figure ------------------------------------------------- */
.figure { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--el-1); }
.figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.figure .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s6);
               background: linear-gradient(180deg, transparent, rgba(5,5,8,.85)); }
.figure .cap .eyebrow { margin: 0 0 var(--s1); }
.figure .cap p { margin: 0; color: var(--text-strong); font-size: var(--t-sm); }

/* Spark demo — "How a Spark travels" ------------------------------ */
.spark-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "stage copy" "stage foot"; gap: var(--s4) var(--s8); align-items: center; padding: var(--s8); }
.spark-demo .sd-stage { grid-area: stage; }
.spark-demo .sd-copy { grid-area: copy; align-self: end; }
.spark-demo .sd-foot { grid-area: foot; align-self: start; }
@media (max-width: 900px) {
  .spark-demo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "foot" "copy"; gap: var(--s5); padding: var(--s5); }
  .sd-stage { max-width: min(62vw, 300px); }
  .spark-demo .sd-foot { justify-content: center; }
  .sd-copy .sd-body { min-height: 0; }
  .sd-label { font-size: var(--t-micro); }
}
.sd-stage { position: relative; width: 100%; max-width: 440px; margin-inline: auto; aspect-ratio: 1; }
.sd-stage svg { width: 100%; height: 100%; overflow: visible; }
.sd-label { position: absolute; display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-mono);
            font-size: var(--t-eyebrow); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.sd-label i { width: 6px; height: 6px; border-radius: var(--r-pill); display: block; }
/* Node centres sit at 16% / 50% / 84% of the stage, radius 10%. Labels sit one node-radius clear. */
.sd-label-manufacturer { left: 50%; top: 2%;  transform: translate(-50%, -100%); }
.sd-label-distributor  { left: 84%; top: 64%; transform: translate(-50%, 0); }
.sd-label-dealer       { left: 50%; top: 98%; transform: translate(-50%, 0); }
.sd-label-customer     { left: 16%; top: 64%; transform: translate(-50%, 0); }
.sd-copy { min-width: 0; }
.sd-copy .sd-title { font-size: var(--t-h2); margin-bottom: var(--s3); }
.sd-copy .sd-body { min-height: 5.5em; }
.sd-sees[hidden] { display: none; }
.sd-sees { list-style: none; margin: 0 0 var(--s5); padding: var(--s3) 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s2); }
.sd-sees li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s3); font-size: var(--t-sm); color: var(--text-body); align-items: baseline; }
.sd-sees li .tier-dot { font-size: var(--t-micro); }
@media (max-width: 480px) { .sd-sees li { grid-template-columns: minmax(0, 1fr); gap: var(--s1); } }
.sd-foot { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.sd-btn:disabled { cursor: progress; filter: none; opacity: .85; }
.sd-dots { display: inline-flex; gap: 6px; }
.sd-dots i { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--line-strong); transition: background var(--dur-fast) var(--ease); }
.sd-dots i.on { background: var(--cs-copper-bright); }
.sd-dots i:first-child { display: none; }

/* Footer ------------------------------------------------------- */
footer.site { margin-top: var(--s10); }
footer.site .inner { max-width: var(--wrap-max); margin-inline: auto; padding: var(--s10) var(--gutter) var(--s12);
                     display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s8); }
footer.site h4 { margin: 0 0 var(--s3); font-family: var(--font-mono); font-size: var(--t-eyebrow); font-weight: var(--fw-medium);
                 letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); }
footer.site ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
footer.site a { color: var(--text-body); text-decoration: none; font-size: var(--t-sm); }
footer.site a:hover { color: var(--text-strong); }
footer.site .legal { font-size: var(--t-xs); color: var(--text-faint); }
footer.site .tagline { margin-top: var(--s3); font-size: var(--t-xs); }
@media (max-width: 900px) { footer.site .inner { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { footer.site .inner { grid-template-columns: minmax(0,1fr); } }

/* Reveal ------------------------------------------------------- */
.rv { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* Skip link */
.skip { position: absolute; left: -999px; top: var(--s2); background: var(--surface-solid); color: var(--text-strong);
        padding: var(--s2) var(--s3); border-radius: var(--r-sm); z-index: 99; }
.skip:focus { left: var(--s2); }

/* Header dropdown (Management services) ------------------------- */
.menu { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.menu-btn { background: none; border: 0; color: var(--text-muted); padding: 2px; border-radius: var(--r-sm); cursor: pointer; display: inline-grid; place-items: center; }
.menu-btn .i { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease); }
.menu:hover .menu-btn, .menu.open .menu-btn { color: var(--text-strong); }
.menu.open .menu-btn .i { transform: rotate(180deg); }
.menu-panel { display: none; position: absolute; top: calc(100% + 10px); left: -12px; min-width: 260px; z-index: 40;
  background: rgba(15, 23, 42, 0.92); backdrop-filter: blur(var(--cs-glass-blur)); -webkit-backdrop-filter: blur(var(--cs-glass-blur));
  border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--el-3); padding: var(--s2); }
.menu:hover .menu-panel, .menu.open .menu-panel, .menu:focus-within .menu-panel { display: block; }
.menu-panel::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } /* hover bridge */
.menu-panel a { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-sm); border-bottom: 0;
  font-size: var(--t-sm); color: var(--text-body); }
.menu-panel a:hover, nav.tabs .menu-panel a[aria-current] { background: var(--surface-raised); color: var(--text-strong); border-bottom: 0; }
@media (max-width: 1000px) { .menu-panel { left: auto; right: -12px; } }
.menu-panel a .n { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--text-faint); width: 1.4rem; }
.menu-panel a.all { color: var(--text-strong); font-weight: var(--fw-medium); border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: var(--s2); padding-bottom: var(--s3); }
@media (max-width: 640px) {
  .menu:hover .menu-panel, .menu:focus-within .menu-panel { display: none; }
  .menu.open .menu-panel { display: block; }
  .menu-panel { position: fixed; left: var(--s3); right: var(--s3); top: 60px; min-width: 0; }
}

/* Contact form ------------------------------------------------- */
.form-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s8); padding: var(--s8); }
@media (max-width: 900px) { .form-panel { grid-template-columns: minmax(0, 1fr); padding: var(--s6); } }
.form-intro a { color: var(--text-strong); }
.cs-form { display: flex; flex-direction: column; gap: var(--s4); }
.cs-form .f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 560px) { .cs-form .f2 { grid-template-columns: minmax(0, 1fr); } }
.cs-form label { display: flex; flex-direction: column; gap: var(--s2); font-size: var(--t-sm); color: var(--text-muted); font-weight: var(--fw-medium); }
.cs-form label .opt { font-family: var(--font-mono); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-faint); margin-left: var(--s1); }
.cs-form input, .cs-form select, .cs-form textarea {
  font: inherit; font-size: var(--t-body); color: var(--text-strong); background: var(--surface-sunken);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: .65rem .8rem; width: 100%; min-width: 0;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.cs-form input:hover, .cs-form select:hover, .cs-form textarea:hover { border-color: rgba(255,255,255,.24); }
.cs-form input:focus-visible, .cs-form select:focus-visible, .cs-form textarea:focus-visible { border-color: var(--cs-copper); box-shadow: none; outline: 0; }
.cs-form textarea { resize: vertical; min-height: 7rem; }
.cs-form select { appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }
.cs-form option { background: var(--cs-slate-800); color: var(--text-strong); }
.f-foot { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s2); }

/* Service link grid + discipline rows as links ---------------- */
.svc-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .svc-grid { grid-template-columns: minmax(0, 1fr); } }
.svc-link { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); text-decoration: none; font-size: var(--t-sm); font-weight: var(--fw-medium); color: var(--text-strong); }
.svc-link .n { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--text-faint); }
a.row { text-decoration: none; color: inherit; transition: background var(--dur-fast) var(--ease); border-radius: var(--r-sm); }
a.row:hover { background: var(--surface-raised); }
a.row:hover h3 { color: var(--cs-copper-bright); }
a.row h3 { transition: color var(--dur-fast) var(--ease); }
a.row { grid-template-columns: 2.25rem minmax(0, 14rem) minmax(0, 1fr) auto; }
a.row .go { justify-self: end; align-self: center; color: var(--text-faint); }
a.row .go .i { width: 16px; height: 16px; }
@media (max-width: 700px) { a.row { grid-template-columns: 2.25rem minmax(0, 1fr); } a.row .go { display: none; } }

/* Checkbox group in the contact form */
.chks { border: 0; padding: 0; margin: 0; min-width: 0; }
.chks legend { padding: 0; margin: 0 0 var(--s3); font-size: var(--t-sm); color: var(--text-muted); font-weight: var(--fw-medium); }
.chk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s4); }
@media (max-width: 480px) { .chk-grid { grid-template-columns: minmax(0, 1fr); } }
.chk { display: flex !important; flex-direction: row !important; align-items: center; gap: var(--s3) !important; cursor: pointer;
       padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-sunken);
       color: var(--text-body) !important; font-weight: var(--fw-regular) !important; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.chk:hover { border-color: var(--line-strong); }
.chk:has(input:checked) { border-color: var(--cs-copper); background: var(--cs-copper-soft); color: var(--text-strong) !important; }
.chk input { appearance: none; -webkit-appearance: none; width: 16px !important; height: 16px; margin: 0; padding: 0 !important; flex: 0 0 auto;
             border: 1px solid var(--line-strong) !important; border-radius: 4px; background: transparent !important; display: grid; place-items: center; }
.chk input:checked { background: var(--cs-copper) !important; border-color: var(--cs-copper) !important; }
.chk input:checked::after { content: ""; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.chk input:focus-visible { box-shadow: var(--ring); }
.cs-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Brand film ---------------------------------------------------- */
.film { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--el-2); background: #000; aspect-ratio: 16 / 9; }
.film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-play { position: absolute; inset: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(5,5,8,.05), rgba(5,5,8,.45)); border: 0; cursor: pointer;
             display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s4); color: var(--text-strong);
             transition: background var(--dur-mid) var(--ease); }
.film-play:hover { background: linear-gradient(180deg, rgba(5,5,8,0), rgba(5,5,8,.35)); }
.film-play .ring { width: 76px; height: 76px; border-radius: var(--r-pill); display: grid; place-items: center;
                   background: rgba(5,5,8,.55); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
                   transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.film-play:hover .ring { border-color: rgba(255,255,255,.7); background: rgba(5,5,8,.7); }
.film-play .ring svg { width: 30px; height: 30px; fill: #fff; margin-left: 3px; }
.film-play .lbl { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--cs-slate-300); }
.film.playing .film-play { display: none; }
.film-play:focus-visible { box-shadow: inset var(--ring); border-radius: var(--r-lg); }