/* ShelfControl marketing site — shared design system.
 *
 * Tokens, type, and components lifted from Brand Kit.html. Loaded on
 * every page via <link rel="stylesheet" href="/styles.css">. Served as a
 * static file by nginx; CSP allows style-src 'self'. Page-specific tweaks
 * live in a small inline <style> per page where needed.
 *
 * Palette rule (from the brand kit): Gold and Blue are co-equal
 * primaries — never let one overpower the other in a single layout.
 * Grass green and neutrals support; they never lead.
 */

/* ───────────────── Tokens ───────────────── */
:root {
  --gold:       #C29A2B;
  --gold-deep:  #9A7A1F;
  --gold-soft:  #E6C969;
  --blue:       #1A52C4;
  --blue-deep:  #143C8C;
  --blue-ink:   #0B2563;
  --green:      #3A8A3A;
  --ink:        #0E0E0E;
  --ink-2:      #2A2A2A;
  --ink-3:      #5A5A5A;
  --kraft:      #F4EEDE;
  --paper:      #FAF7EE;
  --off:        #FFFEFA;
  --rule:       #1F1F1F;
  --rule-soft:  #D8D2C3;

  --display: "Red Hat Display", system-ui, sans-serif;
  --text:    "Red Hat Text", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --maxw: 1240px;
  --pad: 56px;
}
@media (max-width: 760px) { :root { --pad: 24px; } }

/* ───────────────── Base ───────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--text);
  color: var(--ink);
  background: var(--off);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); }

h1, h2, h3, h4 { font-family: var(--display); margin: 0; letter-spacing: -0.02em; line-height: 1.02; }
p { margin: 0 0 1em; max-width: 64ch; }

.page { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue); flex: none;
}
.label {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.mono { font-family: var(--mono); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper); padding: 12px 18px;
  font-family: var(--mono); font-size: 12px; z-index: 200;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ───────────────── Buttons ───────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: -0.01em; text-decoration: none;
  padding: 14px 24px; border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--off);
  cursor: pointer; transition: transform .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-deep); }
.btn--gold { background: var(--gold); border-color: var(--ink); color: var(--ink); }
.btn--gold:hover { background: var(--gold-soft); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--paper); }
.btn-arrow { font-family: var(--mono); }

/* ───────────────── Header / nav ───────────────── */
header.site-head {
  background: var(--off);
  border-bottom: 1.5px solid var(--ink);
  position: sticky; top: 0; z-index: 100;
}
.site-head .page {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.brand-lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-lockup img { height: 34px; width: auto; }
.brand-lockup .name {
  font-family: var(--display); font-weight: 800; font-size: 19px;
  color: var(--blue); letter-spacing: -0.01em;
}

.nav-links {
  display: flex; align-items: center; gap: 28px;
  list-style: none; margin: 0; padding: 0;
}
.nav-links > li { position: relative; }
.nav-links a {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.nav-links a:hover { color: var(--blue); }
.nav-links a[aria-current="page"] { color: var(--blue); }
.nav-links a.nav-cta {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.01em;
  text-transform: none; font-size: 14px;
  background: var(--blue); color: #fff; padding: 10px 18px;
  border: 1.5px solid var(--blue);
}
.nav-links a.nav-cta:hover { background: var(--blue-deep); color: #fff; }

/* Services dropdown */
.nav-dropdown-trigger {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink);
  background: none; border: 0; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger[aria-current="page"] { color: var(--blue); }
.nav-dropdown-trigger::after {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px);
  transition: transform .15s ease;
}
.nav-item-dropdown.is-open .nav-dropdown-trigger::after { transform: rotate(225deg) translateY(-2px); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 14px); left: 0; min-width: 230px;
  background: var(--off); border: 1.5px solid var(--ink);
  list-style: none; margin: 0; padding: 8px;
  display: none; flex-direction: column; gap: 2px; z-index: 110;
}
.nav-item-dropdown.is-open .nav-dropdown-menu { display: flex; }
.nav-dropdown-menu a {
  display: block; padding: 10px 12px; text-transform: none;
  font-family: var(--text); font-size: 14px; letter-spacing: 0;
}
.nav-dropdown-menu a:hover { background: var(--paper); }
.nav-dropdown-menu .menu-desc {
  display: block; font-family: var(--text); font-size: 12px;
  color: var(--ink-3); letter-spacing: 0; text-transform: none; margin-top: 2px;
}

/* Hamburger */
.nav-toggle {
  display: none; width: 44px; height: 44px; border: 1.5px solid var(--ink);
  background: var(--off); cursor: pointer; position: relative; padding: 0;
  z-index: 110; /* stay above the open drawer (95) so the X shows + is tappable */
}
.nav-toggle span,
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; width: 20px; height: 2px;
  background: var(--ink); transition: transform .2s ease, opacity .2s ease;
}
/* Middle bar centred in the button; the ::before/::after bars sit at the
   span's own left edge (left:0) so all three align vertically. */
.nav-toggle span { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.nav-toggle span::before, .nav-toggle span::after { left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span::after { transform: translateY(-6px) rotate(-45deg); }

.nav-scrim {
  position: fixed; inset: 0; background: rgba(14,14,14,.45);
  opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 90;
}
.nav-scrim.is-open { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; top: 0; right: 0; height: 100dvh; width: min(86vw, 360px);
    background: var(--off); border-left: 1.5px solid var(--ink);
    flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 88px 28px 28px; transform: translateX(100%);
    transition: transform .25s ease; z-index: 95; overflow-y: auto;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links > li { width: 100%; }
  .nav-links a, .nav-dropdown-trigger { font-size: 14px; padding: 8px 0; }
  .nav-links a.nav-cta { margin-top: 12px; width: 100%; justify-content: center; }
  .nav-dropdown-menu {
    position: static; border: 0; padding: 0 0 0 16px; min-width: 0;
    display: none;
  }
  .nav-item-dropdown.is-open .nav-dropdown-menu { display: flex; }
}

/* ───────────────── Sections ───────────────── */
.section { padding: 88px 0; border-top: 1.5px solid var(--ink); }
.section--alt { background: var(--paper); }
.section--dark { background: var(--ink); color: var(--paper); }
.section--dark p { color: #cfcfcf; }
.section--dark .label { color: #8b8b8b; }
.section--gold { background: var(--gold); color: var(--ink); }
.section:first-of-type { border-top: 0; }

.section-head {
  display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: end;
  margin-bottom: 56px;
}
@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; gap: 12px; align-items: start; margin-bottom: 32px; }
}
.section-head .num {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3);
}
.section--dark .section-head .num { color: #8b8b8b; }
.section-head h2 { font-size: clamp(34px, 5vw, 60px); font-weight: 800; }
.section-head .lede {
  font-family: var(--text); color: var(--ink-2); font-size: 18px;
  max-width: 56ch; margin-top: 10px;
}
.section--dark .section-head .lede { color: #cfcfcf; }

/* ───────────────── Hero ───────────────── */
.hero { padding: 96px 0 80px; }
.hero h1 {
  font-size: clamp(52px, 8vw, 116px); font-weight: 900; line-height: 0.92;
  margin-top: 0; color: var(--ink);
}
.hero h1 .em { color: var(--blue); }
.hero h1 .gold { color: var(--gold-deep); }
.hero .sub {
  font-size: 20px; color: var(--ink-2); max-width: 60ch; margin-top: 28px;
}
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
.hero .meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  border-top: 1.5px solid var(--ink); margin-top: 56px; padding-top: 20px;
}
@media (max-width: 760px) { .hero .meta { grid-template-columns: repeat(2, 1fr); } }
.hero .meta dt {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
.hero .meta dd { font-family: var(--display); font-weight: 600; font-size: 16px; margin: 0; }

/* ───────────────── Cards / grids ───────────────── */
.grid { display: grid; gap: 16px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

.card {
  border: 1.5px solid var(--ink); background: var(--off);
  padding: 32px; display: flex; flex-direction: column; gap: 16px;
}
.card .card-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.card h3 { font-size: 26px; font-weight: 800; }
.card p { font-size: 15px; color: var(--ink-2); margin: 0; }
.card .feature-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.card .feature-list li {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--ink-2); padding-left: 20px; position: relative;
}
.card .feature-list li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px;
  background: var(--gold); border: 1px solid var(--ink);
}
.card .card-foot { margin-top: auto; padding-top: 8px; }
.card .card-link {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; color: var(--blue);
  display: inline-flex; gap: 8px; align-items: center;
}
.card .card-link:hover { gap: 12px; }
.card--feature { border-color: var(--ink); }
.card--feature.is-gold { background: var(--gold); overflow: hidden; transition: color .25s ease; }
.card--feature.is-gold p, .card--feature.is-gold .feature-list li { color: var(--ink); }
/* RootControl card greets its brand colour on hover — green floods out from the
   logo badge (green leads here, by design). The flood is a circle seeded at the
   badge's position that scales up to fill the card. */
.card--feature.is-gold::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  /* Origin = the logo badge's centre (card padding 32px + ~half the badge),
     in px so it tracks the logo regardless of how wide the bento cell gets. */
  left: 80px; top: 96px; width: 4px; height: 4px; margin: -2px 0 0 -2px;
  border-radius: 50%; background: var(--green);
  transform: scale(0); transform-origin: center;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.card--feature.is-gold:hover::before { transform: scale(620); }
/* Keep all card content above the flood. */
.card--feature.is-gold > * { position: relative; z-index: 1; }
.card--feature.is-gold:hover { color: #fff; }
.card--feature.is-gold:hover h3,
.card--feature.is-gold:hover p,
.card--feature.is-gold:hover .feature-list li { color: #fff; }
.card--feature.is-gold:hover .card-num,
.card--feature.is-gold:hover .card-link { color: rgba(255,255,255,.9); }
.card--feature.is-gold:hover .feature-list li::before { background: #fff; border-color: #fff; }
.card--feature.is-blue { background: var(--blue); color: #fff; }
.card--feature.is-blue h3, .card--feature.is-blue p { color: #fff; }
.card--feature.is-blue .card-num { color: rgba(255,255,255,.7); }
.card--feature.is-blue .feature-list li { color: rgba(255,255,255,.9); }
.card--feature.is-blue .card-link { color: #fff; }

/* Metrics strip — each cell carries an icon + a brand-colour accent
   (alternating blue / gold so the two primaries stay co-equal). */
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1.5px solid var(--ink); }
@media (max-width: 760px) { .metrics { grid-template-columns: 1fr; } }
.metric {
  padding: 34px 30px 32px; border-right: 1.5px solid var(--ink);
  position: relative; --accent: var(--blue);
}
.metric:nth-child(2) { --accent: var(--gold-deep); }
.metric:last-child { border-right: 0; }
@media (max-width: 760px) { .metric { border-right: 0; border-bottom: 1.5px solid var(--ink); } .metric:last-child { border-bottom: 0; } }
/* colour tab along the top of each cell */
.metric::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent); }
.m-icon {
  width: 46px; height: 46px;
  border: 1.5px solid var(--ink); background: var(--off); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.m-icon svg { width: 24px; height: 24px; }
.metric .m-icon { margin-bottom: 22px; }
.metric .n { font-family: var(--display); font-weight: 900; font-size: clamp(38px, 5.4vw, 58px); line-height: 1; color: var(--accent); letter-spacing: -0.02em; margin: 0; }
.metric .k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-top: 10px; }
.metric p { font-size: 14px; color: var(--ink-2); margin-top: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .metric { transition: transform .14s ease, box-shadow .14s ease; }
  .metric:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(14,14,14,.10); }
}

/* ───────────────── Partners strip ───────────────── */
.partners { padding: 56px 0; border-top: 1.5px solid var(--ink); background: var(--paper); }
.partners-head { text-align: center; margin-bottom: 30px; }
.partners .lead {
  display: inline-flex; align-items: center; gap: 16px; margin: 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3);
}
.partners .lead::before, .partners .lead::after { content: ""; width: 40px; height: 1.5px; background: var(--rule-soft); }

.partner-row { display: grid; grid-template-columns: repeat(4, 1fr); border: 1.5px solid var(--ink); background: #fff; }
.partner-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 34px 22px; border-right: 1.5px solid var(--ink); min-height: 152px;
  background: #fff; transition: background .25s ease;
}
.partner-cell:last-child { border-right: 0; }
.partner-cell img {
  max-height: 40px; max-width: 82%; width: auto; height: auto; display: block;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
.partner-cell .tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); transition: color .25s ease;
}
/* Logos always show in full colour; hover just lifts the logo, tints the
   category tag, and warms the cell background. */
@media (hover: hover) {
  .partner-cell:hover { background: var(--paper); }
  .partner-cell:hover img { transform: translateY(-3px); }
  .partner-cell:hover .tag { color: var(--blue); }
}
@media (max-width: 760px) {
  .partner-row { grid-template-columns: 1fr 1fr; }
  .partner-cell { border-bottom: 1.5px solid var(--ink); }
  .partner-cell:nth-child(2n) { border-right: 0; }
  .partner-cell:nth-child(n+3) { border-bottom: 0; }
}

/* Prose (legal pages, service detail) */
.prose { max-width: 760px; }
.prose h2 { font-size: 30px; font-weight: 800; margin: 48px 0 16px; }
.prose h3 { font-size: 20px; font-weight: 700; margin: 28px 0 10px; }
.prose p, .prose li { color: var(--ink-2); font-size: 16px; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose .updated { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

/* ───────────────── FAQ ───────────────── */
.faq { display: grid; gap: 0; border: 1.5px solid var(--ink); }
.faq-item { border-bottom: 1.5px solid var(--ink); }
.faq-item:last-child { border-bottom: 0; }
.faq-item > summary {
  list-style: none; cursor: pointer; padding: 24px 28px;
  font-family: var(--display); font-weight: 700; font-size: 19px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+"; font-family: var(--mono); font-size: 22px; color: var(--blue); flex: none;
}
.faq-item[open] > summary::after { content: "–"; }
.faq-item .faq-body { padding: 0 28px 24px; color: var(--ink-2); font-size: 15px; }
.faq-item .faq-body p { margin: 0; }

/* ───────────────── Contact form ───────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }
.form-field { display: grid; gap: 6px; margin-bottom: 18px; }
.form-field label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.form-field input, .form-field textarea {
  font-family: var(--text); font-size: 15px; color: var(--ink);
  border: 1.5px solid var(--ink); background: var(--off); padding: 12px 14px;
}
.form-field input:focus, .form-field textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.form-field textarea { min-height: 140px; resize: vertical; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 8px; }
.form-error { display: none; background: #FDECEC; border: 1.5px solid #C82323; color: #8a1717; padding: 12px 14px; font-size: 14px; margin-bottom: 16px; }
.form-success { display: none; border: 1.5px solid var(--green); background: #EEF7EE; padding: 24px; }
.contact-block { display: grid; gap: 18px; }
.contact-block .row { border-top: 1px solid var(--rule-soft); padding-top: 14px; }
.contact-block .row:first-child { border-top: 0; padding-top: 0; }
.contact-block .row .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.contact-block .row .v { font-family: var(--display); font-weight: 600; font-size: 18px; }
.contact-block .row .v a { text-decoration: none; }

/* ───────────────── CTA band ───────────────── */
.cta-band {
  background-color: var(--blue);
  background-image:
    linear-gradient(180deg, rgba(11,37,99,.86), rgba(20,60,140,.92)),
    url("/assets/blue-wave.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}
.cta-band .page { padding-top: 80px; padding-bottom: 80px; text-align: center; }
.cta-band h2 { font-size: clamp(34px, 5vw, 60px); font-weight: 900; color: #fff; }
.cta-band p { color: rgba(255,255,255,.85); max-width: 52ch; margin: 16px auto 0; }
.cta-band .cta-row { display: flex; gap: 16px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }

/* ───────────────── Statement band (dark, modern-wave) ───────────────── */
.statement {
  border-top: 1.5px solid var(--ink);
  background-color: var(--ink);
  background-image:
    linear-gradient(90deg, rgba(14,14,14,.94) 0%, rgba(14,14,14,.78) 42%, rgba(14,14,14,.5) 100%),
    url("/assets/modern-wave.jpg");
  background-size: cover; background-position: center;
  color: var(--paper); padding: 100px 0;
}
.statement .eyebrow { color: var(--gold-soft); margin-bottom: 22px; }
.statement .eyebrow::before { display: none; }
.statement h2 {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(30px, 4.6vw, 56px); line-height: 1.06; max-width: 20ch;
}
.statement h2 .gold { color: var(--gold-soft); }

/* ───────────────── Footer ───────────────── */
footer.site-foot {
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(14,14,14,.88), rgba(14,14,14,.93)),
    url("/assets/dark-wave.jpg");
  background-size: cover; background-position: center;
  color: var(--paper); padding: 64px 0 40px;
}
.site-foot .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { .site-foot .cols { grid-template-columns: 1fr 1fr; gap: 28px; } }
.site-foot .brand-lockup .name { color: var(--off); }
.site-foot .foot-tag { color: #8b8b8b; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; margin-top: 16px; max-width: 30ch; }
.site-foot h4 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #8b8b8b; margin-bottom: 14px; }
.site-foot .links { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.site-foot .links a { color: var(--paper); text-decoration: none; font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; }
.site-foot .links a:hover { color: var(--gold-soft); }
.site-foot .foot-bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid #2a2a2a; margin-top: 48px; padding-top: 24px;
  font-family: var(--mono); font-size: 12px; color: #8b8b8b;
}

/* ───────────────── Bento (services) ───────────────── */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.bento > .card { margin: 0; height: 100%; }
.bento--lead { grid-column: span 7; grid-row: span 2; }
.bento--a { grid-column: span 5; }
.bento--b { grid-column: span 5; }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; }
  .bento--lead, .bento--a, .bento--b { grid-column: auto; grid-row: auto; }
}

/* Feature-list bullet contrast on colored cards */
.card--feature.is-gold .feature-list li::before { background: var(--ink); border-color: var(--ink); }
.card--feature.is-blue .feature-list li::before { background: #fff; border-color: #fff; }

/* RootControl mark inside its bento card — sits in a clean white tile so
   the detailed green logo reads cleanly against the gold card. */
.rc-badge {
  align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1.5px solid var(--ink);
  padding: 12px 18px; margin: 2px 0 6px;
  box-shadow: 5px 5px 0 var(--green);
  transition: transform .16s ease, box-shadow .16s ease;
}
/* On the green hover state, the green shadow would vanish — drop to ink. */
.card--feature.is-gold:hover .rc-badge { transform: translate(-1px, -1px); box-shadow: 7px 7px 0 var(--ink); }
.rc-badge img { height: 42px; width: auto; display: block; }

/* Generic product/partner logo tile (e.g. Splashtop on the support card) —
   a clean white plate so a vendor logo reads on any card colour. */
.logo-badge {
  align-self: flex-start; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1.5px solid var(--ink); padding: 12px 16px; margin-bottom: 4px;
}
.logo-badge img { height: 44px; width: auto; display: block; }
/* compact variant to sit alongside .m-icon tiles in a card grid */
.logo-badge--sm { padding: 8px 12px; margin-bottom: 0; }
.logo-badge--sm img { height: 26px; }

/* Splashtop support banner — content panel + logo panel side by side */
.support-banner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 760px) { .support-banner { grid-template-columns: 1fr; } }
.support-banner > .card { margin: 0; height: 100%; }
.support-logo {
  border: 1.5px solid var(--ink);
  /* match the Splashtop logo's baked-in light-grey background so the
     non-transparent JPG blends into the panel instead of showing as a
     box-in-a-box. */
  background: #f0efed;
  display: flex; align-items: center; justify-content: center;
  padding: 0; overflow: hidden; min-height: 220px;
}
.support-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Soft topographic hero wash (white-wave), text stays dark-readable */
.hero--soft {
  background-image:
    linear-gradient(180deg, rgba(255,254,250,.35), rgba(255,254,250,.92)),
    url("/assets/white-wave.jpg");
  background-size: cover; background-position: center; background-repeat: no-repeat;
}

/* Live status / spec strip (lead bento cell) */
.spec-strip {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}
.spec-strip .live { display: inline-flex; align-items: center; gap: 8px; color: var(--green); }
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }

/* ───────────────── Annotated photo frame (e.g. IT hero) ───────────────── */
.hero-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
/* Split heroes have a ~590px text column. Keep the headline big and fluid
   (it's meant to wrap "One local partner." to two lines), but cap it where
   the column stops growing past the 1240px page max — otherwise at ultra-wide
   widths it pins at the full-width 116px size and balloons every word onto
   its own line, dropping the manifest panel down. */
.hero-split h1 { font-size: clamp(44px, 6vw, 76px); line-height: 0.96; }
@media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; gap: 36px; } }

/* Text column for the local-presence band (reuses section-head styling
   outside a .section-head wrapper). */
.local-copy .num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.local-copy h2 { font-size: clamp(34px, 5vw, 60px); font-weight: 800; margin-top: 10px; }
.local-copy .lede { font-family: var(--text); color: var(--ink-2); font-size: 18px; max-width: 56ch; margin: 14px 0 0; }
.local-copy .cta-row { margin-top: 28px; }

.photo-frame {
  position: relative; margin: 0; border: 1.5px solid var(--ink); background: var(--ink);
  box-shadow: 12px 12px 0 var(--gold);
}
.photo-frame > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-frame .ph-tag {
  position: absolute; top: 14px; left: 14px;
  background: var(--off); border: 1.5px solid var(--ink); padding: 6px 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink);
}
.photo-frame .ph-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--ink); color: var(--paper); padding: 11px 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.photo-frame .ph-caption .live { display: inline-flex; align-items: center; gap: 8px; color: #7ad17a; }
.photo-frame .ph-caption .live .live-dot { background: #7ad17a; }

/* Panel variant: caption sits in flow (used when the frame holds a UI
   panel instead of a photo, e.g. the ERP product dashboard). */
.photo-frame--panel { display: flex; flex-direction: column; }
.photo-frame--panel .ph-caption { position: static; }

/* Product dashboard mock (ERP hero) — a believable ERP cockpit: top bar with
   a user chip, a left icon rail, a KPI row, a revenue-trend chart, and a
   recent-invoices list. Static/decorative; the panel carries role=img +
   aria-label, so the inner UI is aria-hidden noise. Token palette only. */
.erp-dash { background: var(--paper); display: flex; flex-direction: column; flex: 1; min-width: 0; }
.erp-dash .dash-top {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 14px; border-bottom: 1.5px solid var(--ink); background: var(--off);
}
.erp-dash .dash-lock { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 800; color: var(--blue); font-size: 14px; }
.erp-dash .dash-lock img { height: 20px; width: auto; }
.erp-dash .dash-nav { display: flex; gap: 14px; margin-right: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.erp-dash .dash-nav .on { color: var(--blue); border-bottom: 2px solid var(--blue); padding-bottom: 2px; }
.erp-dash .dash-user {
  flex: none; margin-left: auto; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--ink); background: var(--paper); color: var(--blue);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em;
}

.erp-dash .dash-shell { display: grid; grid-template-columns: 46px 1fr; flex: 1; min-height: 0; }
.erp-dash .dash-side {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 0; border-right: 1.5px solid var(--ink); background: var(--off);
}
.erp-dash .ds-item { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); }
.erp-dash .ds-item svg { width: 16px; height: 16px; }
.erp-dash .ds-item.is-on { color: var(--blue); background: var(--paper); border: 1.5px solid var(--ink); }
.erp-dash .dash-main { padding: 13px; display: flex; flex-direction: column; gap: 11px; min-width: 0; }

.erp-dash .kpi-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 9px; }
.erp-dash .tile {
  border: 1.5px solid var(--ink); background: var(--off); padding: 11px 12px;
  display: flex; flex-direction: column; gap: 7px; min-width: 0;
}
.erp-dash .tile .k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.erp-dash .tile .n { font-family: var(--display); font-weight: 800; font-size: 23px; line-height: 1; letter-spacing: -0.02em; }
.erp-dash .tile .n.amber { color: var(--gold-deep); }
.erp-dash .tile .delta { font-family: var(--mono); font-size: 10px; color: var(--green); }
.erp-dash .tile.blue { background: var(--blue); color: #fff; border-color: var(--blue); }
.erp-dash .tile.blue .k, .erp-dash .tile.blue .delta { color: rgba(255,255,255,.85); }

.erp-dash .dash-card { border: 1.5px solid var(--ink); background: var(--off); padding: 11px 12px; }
.erp-dash .dc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.erp-dash .dc-head .k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.erp-dash .dc-head .k--up { color: var(--green); }
.erp-dash .dc-bars { display: flex; align-items: flex-end; gap: 7px; height: 52px; }
.erp-dash .dc-bars span { flex: 1; background: var(--blue); opacity: .8; }
.erp-dash .dc-bars span.on { background: var(--gold); opacity: 1; }
.erp-dash .dc-bars span:nth-child(1) { height: 38%; }
.erp-dash .dc-bars span:nth-child(2) { height: 54%; }
.erp-dash .dc-bars span:nth-child(3) { height: 46%; }
.erp-dash .dc-bars span:nth-child(4) { height: 67%; }
.erp-dash .dc-bars span:nth-child(5) { height: 58%; }
.erp-dash .dc-bars span:nth-child(6) { height: 92%; }

.erp-dash .dc-list { list-style: none; margin: 0; padding: 0; }
.erp-dash .dc-list li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 7px 0; border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 10.5px;
}
.erp-dash .dc-list li:first-child { padding-top: 0; border-top: 0; }
.erp-dash .dc-list .li-co { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-dash .dc-list .li-amt { color: var(--ink); }
.erp-dash .pill { font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 6px; border: 1px solid; }
.erp-dash .pill--ok { color: var(--green); border-color: var(--green); }
.erp-dash .pill--due { color: var(--blue); border-color: var(--blue); }

@media (max-width: 560px) {
  .erp-dash .dash-nav { display: none; }
  .erp-dash .dash-shell { grid-template-columns: 1fr; }
  .erp-dash .dash-side { display: none; }
  .erp-dash .kpi-row { grid-template-columns: 1fr; }
}

/* ───────────────── Team / founders ───────────────── */
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 56px; }
@media (max-width: 820px) { .team-grid { grid-template-columns: 1fr; gap: 40px; } }

/* Photo-beside-bio layout (old-site style): a small oval next to the text,
   two founders per row. The photos no longer sit in one comparison row, so
   the differing source framings are no longer noticeable. */
.team-card { display: grid; grid-template-columns: 132px 1fr; gap: 28px; align-items: start; }
@media (max-width: 480px) { .team-card { grid-template-columns: 100px 1fr; gap: 18px; } }
.team-card .portrait { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper); border: 1.5px solid var(--ink); }
.team-card .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.team-card .initials {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 900; font-size: 56px; letter-spacing: -0.02em;
}
.team-card .initials.is-gold { background: var(--gold); color: var(--ink); }
.team-card .initials.is-blue { background: var(--blue); color: #fff; }
.team-card .who { padding: 0; }
.team-card .who .nm { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -0.01em; }
.team-card .who .rl { font-family: var(--text); font-size: 15px; color: var(--ink-3); margin: 4px 0 14px; }
.team-card .who .bio { font-size: 14px; color: var(--ink-2); line-height: 1.65; margin: 0; max-width: 52ch; }

/* ───────────────── Motion polish ───────────────── */
.site-head { transition: box-shadow .25s ease; }
.site-head.is-scrolled { box-shadow: 0 1px 0 var(--rule-soft), 0 12px 28px rgba(14,14,14,.07); }

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0; transform: translateY(20px);
    transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  }
  [data-reveal].is-visible { opacity: 1; transform: none; }

  .card { transition: transform .14s ease, box-shadow .14s ease; }
  .card--feature:hover, .bento > .card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(14,14,14,.10); }

  .live-dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: currentColor; animation: sc-pulse 1.9s ease-out infinite;
  }
  @keyframes sc-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3.2); opacity: 0; } }
}

/* ───────────────── Manifest panel (animated hero ticker) ───────────────── */
.hero .hero-split { align-items: stretch; }
.manifest {
  display: flex; flex-direction: column; min-height: 340px;
  border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper);
  box-shadow: 12px 12px 0 var(--gold); font-family: var(--mono);
  align-self: center; width: 100%;
}
.manifest-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1.5px solid #2a2a2a;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #8b8b8b;
}
.manifest-bar .m-live { display: inline-flex; align-items: center; gap: 8px; color: #7ad17a; }
.manifest-feed {
  flex: 1; padding: 18px 16px; display: flex; flex-direction: column;
  gap: 9px; justify-content: flex-end; overflow: hidden; font-size: 12.5px;
}
.manifest-line { display: flex; gap: 12px; align-items: baseline; }
.manifest-line .t { color: var(--gold-soft); flex: none; }
.manifest-line .m { color: var(--paper); }
.manifest-line .ok { color: #7ad17a; }
.manifest-foot {
  display: flex; justify-content: space-between; padding: 11px 16px;
  border-top: 1.5px solid #2a2a2a;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #8b8b8b;
}
@media (prefers-reduced-motion: no-preference) {
  .manifest-line.is-new { animation: mf-in .4s cubic-bezier(.2,.7,.2,1); }
  @keyframes mf-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .manifest-cursor::after { content: "▋"; color: #7ad17a; margin-left: 2px; animation: mf-blink 1.1s step-end infinite; }
  @keyframes mf-blink { 50% { opacity: 0; } }
}

/* ───────────────── Testimonials (shipping-label quotes) ───────────────── */
.testimonial { border: 1.5px solid var(--ink); background: var(--off); display: flex; flex-direction: column; }
.testimonial .t-quote {
  padding: 30px 28px 24px; font-family: var(--display); font-weight: 700;
  font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; flex: 1;
}
.testimonial .t-quote::before { content: "\201C"; color: var(--gold-deep); }
.testimonial .t-label {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
  padding: 14px 28px; border-top: 1.5px solid var(--ink); background: var(--paper);
  font-family: var(--mono); text-transform: uppercase;
}
.testimonial .t-label .who { font-size: 12px; letter-spacing: 0.06em; color: var(--ink); }
.testimonial .t-label .co { font-size: 11px; letter-spacing: 0.08em; color: var(--ink-3); }
.testimonial .t-label .ref { grid-row: span 2; font-size: 10px; letter-spacing: 0.12em; color: var(--blue); border: 1.5px solid var(--blue); padding: 4px 8px; }
.testimonial.is-gold { background: var(--gold); }
.testimonial.is-gold .t-quote::before { color: var(--blue-deep); }
.testimonial.is-gold .t-label { background: rgba(0,0,0,.08); border-top-color: var(--ink); }

/* Client spotlight (social proof) */
.clients-row { text-align: center; margin: 0 0 48px; }
.clients-row .clients-label {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 22px;
}
.client-card {
  display: inline-flex; align-items: center; gap: 36px; text-align: left;
  border: 1.5px solid var(--ink); background: var(--off);
  padding: 28px 40px; box-shadow: 8px 8px 0 var(--gold);
}
.client-card img { height: 132px; width: auto; flex: none; display: block; }
.client-card .client-meta { border-left: 1.5px solid var(--rule-soft); padding-left: 36px; }
.client-card .cm-name { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.01em; }
.client-card .cm-role { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }
@media (max-width: 620px) {
  .client-card { flex-direction: column; gap: 20px; text-align: center; padding: 26px 28px; box-shadow: 6px 6px 0 var(--gold); }
  .client-card img { height: 104px; }
  .client-card .client-meta { border-left: 0; border-top: 1.5px solid var(--rule-soft); padding: 18px 0 0; }
}

/* utility */
.anchor { display: block; height: 0; scroll-margin-top: 88px; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }

/* ───────────────── Depth + life layer ─────────────────
 * Additive polish so the airy light sections read as an intentional
 * surface rather than empty white, and so the page keeps a little ambient
 * life below the hero. Token-only (no new hex); all motion is gated on
 * prefers-reduced-motion. Safe to dial back by trimming this block.
 *
 *  1. Blueprint dot-grid behind light sections + plain (non-soft) heroes,
 *     so cards visibly float above a textured surface. The :not() guards
 *     keep dots off the dark/gold/alt bands that paint their own fills;
 *     .section--alt gets its own (slightly stronger) grid on paper.
 *  2. Card hover accent — a top bar that draws in, gold by default and
 *     blue on gold cards so the two primaries stay co-equal.
 *  3. Ambient drift glow on the dark statement + CTA bands.
 *  4. Testimonial hover-lift (cards already lift; testimonials didn't).
 */

/* 1 · Blueprint texture */
.section:not(.section--alt):not(.section--dark):not(.section--gold) {
  background-color: var(--off);
  background-image: radial-gradient(rgba(14,14,14,.045) 1px, transparent 1.6px);
  background-size: 24px 24px;
}
.section.section--alt {
  background-color: var(--paper);
  background-image: radial-gradient(rgba(14,14,14,.05) 1px, transparent 1.6px);
  background-size: 24px 24px;
}
.hero:not(.hero--soft) {
  background-color: var(--off);
  background-image: radial-gradient(rgba(14,14,14,.045) 1px, transparent 1.6px);
  background-size: 24px 24px;
}

/* 2 · Card hover accent (draws in from the left over the top border) */
.card { position: relative; }
.card::after {
  content: ""; position: absolute; top: -1.5px; left: -1.5px; right: -1.5px;
  height: 3px; background: var(--gold);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.card:hover::after { transform: scaleX(1); }
/* On gold cards the gold bar would vanish — use blue (co-equal primary).
   Inset to 0 (no overhang) so the card's overflow:hidden — needed for the green
   flood — doesn't clip the bar. z-index keeps it above the flood. */
.card--feature.is-gold::after { background: var(--blue); top: 0; left: 0; right: 0; z-index: 2; }
/* …but the card itself turns green on hover, so switch the bar to gold there. */
.card--feature.is-gold:hover::after { background: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .card--feature.is-gold::before { transition: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* 3 · Ambient drift glow — slow, low-opacity, top-right so it never
     washes the left-aligned statement headline. */
  .statement, .cta-band { position: relative; overflow: hidden; }
  .statement::after, .cta-band::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(58% 80% at 82% 0%, rgba(255,255,255,.08), transparent 62%);
    animation: sc-drift 16s ease-in-out infinite alternate;
  }
  @keyframes sc-drift {
    from { transform: translate3d(-5%, -3%, 0); }
    to   { transform: translate3d(6%, 4%, 0); }
  }

  /* 4 · Testimonial hover-lift, matching the card lift */
  .testimonial { transition: transform .14s ease, box-shadow .14s ease; }
  .testimonial:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(14,14,14,.10); }
}

/* ───────────────── Unboxing — Why-partner section ─────────────────
 * The ShelfControl mark IS a shipping box, so the "why partner" reasons
 * literally ship out of one. The box is rebuilt in CSS 3D (token palette
 * only) so its top flaps open and the three reason cards rise + fan into
 * the normal 3-column grid.
 *
 * Progressive enhancement (see initUnbox in site.js):
 *   - default / no-JS / reduced-motion → box rendered already-open, cards
 *     in their normal grid. Fully static; content always in the DOM.
 *   - .unbox--ready  (added only when motion is allowed) sets the closed +
 *     hidden START state.
 *   - .unbox--play   (added when the section scrolls into view) runs the
 *     one-shot open + emerge, holding the end state via animation-fill.
 * The box is decorative (aria-hidden); all card copy stays readable.    */

/* The box is overlaid on the cards (no layout space) and only shown once
   the JS animation arms it; it fades out at the end, leaving just the row. */
.unbox__cards-wrap { position: relative; }
.unbox__stage {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: none; justify-content: center; align-items: center;
  /* large perspective ~ orthographic, so edges stay parallel like the flat
     isometric logo instead of visibly tapering. */
  perspective: 3600px; perspective-origin: 50% 42%;
  pointer-events: none;
}
.unbox--ready .unbox__stage { display: flex; }

.unbox__shadow {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 56%; max-width: 280px; height: 22px; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(14,14,14,.30), transparent 72%);
  filter: blur(3px);
}

/* The 3D box */
.box3d {
  --bs: 178px;                 /* box edge */
  --h: calc(var(--bs) / 2);
  position: relative; width: var(--bs); height: var(--bs);
  transform-style: preserve-3d;
  transform: translateZ(-30px) rotateX(-22deg) rotateY(-34deg);
}
@media (max-width: 760px) { .box3d { --bs: 134px; } }

.box3d__face, .box3d__flap {
  position: absolute; top: 0; left: 0; width: var(--bs); height: var(--bs);
  box-sizing: border-box; border: 5px solid var(--ink);
  background: var(--gold);
}
.bx-front  { transform: translateZ(var(--h)); }
.bx-back   { transform: translateZ(calc(-1 * var(--h))) rotateY(180deg); background: var(--gold-deep); }
.bx-right  { transform: translateX(var(--h)) rotateY(90deg);  background: var(--gold-deep); }
.bx-left   { transform: translateX(calc(-1 * var(--h))) rotateY(-90deg); background: var(--gold-deep); }
.bx-bottom { transform: translateY(var(--h)) rotateX(90deg); background: var(--ink); }

/* Two top flaps, hinged at the front-top and back-top rims, meeting at the
   centre seam when closed (matching the logo's top). Height = half depth. */
/* Pivot from the flap's bottom edge so the hinge sits exactly on the top
   rim (a top-edge origin floats the flap up by half the box). Thinner
   border so the centre seam where the two flaps meet stays light. */
.box3d__flap { height: var(--h); transform-origin: 50% 100%; background: var(--gold-soft); border-width: 3px; }
/* OPEN (the static default): standing up, tipped outward. */
.bx-flap-a { transform: translateY(calc(-1 * var(--h))) translateZ(var(--h))          rotateX(-38deg); }
.bx-flap-b { transform: translateY(calc(-1 * var(--h))) translateZ(calc(-1 * var(--h))) rotateX(38deg); }

/* Blue packing tape, like the logo: ONE continuous strip — a diagonal band
   across the top (back-left to front-right) that folds down the front of the
   right face and tears off. */
.bx-tape { position: absolute; background: var(--blue); }
/* the band across the top, drawn on a plane sitting just above the closed
   flaps; the gradient angle sets the back-left -> front-right diagonal. */
.bx-tapetop {
  position: absolute; top: 0; left: 0; width: var(--bs); height: var(--bs);
  transform: translateY(calc(-1 * var(--h) - 2px)) rotateX(90deg);
  background: linear-gradient(0deg, transparent 44%, var(--blue) 44%, var(--blue) 57%, transparent 57%);
  pointer-events: none;
}
/* the short torn length continuing down the front of the right face,
   aligned under where the top band folds over the edge */
.bx-tape--right {
  top: 0; left: 43%; width: 13%; height: 33%;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 87% 100%, 74% 82%, 61% 100%, 48% 82%, 35% 100%, 22% 82%, 9% 100%, 0 82%);
}

/* SC monogram on the front face — letters knocked out in the box colour,
   in upright blue rounded squares; accent squares small and pulled toward
   the centre (the dot after the S, the dot before the C). */
.sc-mark {
  position: absolute; left: 25%; top: 24%; width: 50%; height: 52%;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 9%;
}
.sc-cell { background: var(--blue); border-radius: 16%; display: flex; align-items: center; justify-content: center; }
.sc-cell--s, .sc-cell--c {
  color: var(--gold); font-family: var(--display); font-weight: 900; line-height: 1;
  font-size: calc(var(--bs) * 0.20);
  /* caps sit high in the line box — nudge down to optically centre */
  padding-top: 0.12em;
}
.sc-cell--dot { width: 46%; height: 46%; }
.sc-cell--dot:nth-child(2) { place-self: end start; }
.sc-cell--dot:nth-child(3) { place-self: start end; }

/* The reason cards are "packed" in the box (which is centred over the row):
   each starts stacked at the box centre (--fx pulls it in horizontally),
   pops up out of the open top, then settles into its column as the box fades. */
.unbox__cards .card:nth-child(1) { --fx: 105%;  --rot: -3deg; }
.unbox__cards .card:nth-child(2) { --fx: 0%;    --rot: 0deg; }
.unbox__cards .card:nth-child(3) { --fx: -105%; --rot: 3deg; }

/* Icon + alternating blue/gold accent on reason/feature card grids: the
   homepage why-partner cards, plus any grid marked .grid--accent on the
   inner pages. The .m-icon is optional per card — a grid can take the accent
   (tab + coloured index + hover lift) with or without icons. Other cards —
   bento, testimonials, team — are untouched. */
.unbox__cards .card,
.grid--accent > .card { --accent: var(--blue); }
.unbox__cards .card:nth-child(even),
.grid--accent > .card:nth-child(even) { --accent: var(--gold-deep); }
.unbox__cards .card .card-num,
.grid--accent > .card .card-num { color: var(--accent); }
.unbox__cards .card::after,
.grid--accent > .card::after { background: var(--accent); transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .grid--accent > .card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(14,14,14,.10); }
}
@media (max-width: 900px) {
  /* Single column — the overlay box is skipped (see below); cards just do a
     gentle staggered rise, no horizontal fan. */
  .unbox__cards .card { --fx: 0% !important; --rot: 0deg !important; }
}

/* START state (only set once motion is allowed) */
.unbox--ready .bx-flap-a { transform: translateY(calc(-1 * var(--h))) translateZ(var(--h))          rotateX(90deg); }
.unbox--ready .bx-flap-b { transform: translateY(calc(-1 * var(--h))) translateZ(calc(-1 * var(--h))) rotateX(-90deg); }
.unbox--ready .unbox__cards .card { opacity: 0; }

/* PLAY — flaps open, then cards ship out and hold (fill: both/forwards) */
/* Tape is "cut" (fades) first, then the flaps open. */
.unbox--play .bx-tapetop,
.unbox--play .bx-tape--right { animation: sc-tapecut .3s ease forwards; }
@keyframes sc-tapecut { to { opacity: 0; } }
.unbox--play .bx-flap-a { animation: sc-flap-a .6s cubic-bezier(.34,1.2,.4,1) .2s forwards; }
.unbox--play .bx-flap-b { animation: sc-flap-b .6s cubic-bezier(.34,1.2,.4,1) .2s forwards; }
.unbox--play .unbox__cards .card { position: relative; z-index: 2; animation: sc-ship .9s cubic-bezier(.2,.72,.2,1) both; }
.unbox--play .unbox__cards .card:nth-child(1) { animation-delay: .45s; }
.unbox--play .unbox__cards .card:nth-child(2) { animation-delay: .62s; }
.unbox--play .unbox__cards .card:nth-child(3) { animation-delay: .79s; }

/* Once the cards are out, the box has done its job — fade + shrink it away. */
.unbox--play .unbox__stage { animation: sc-boxgone .6s ease forwards; animation-delay: 1.55s; }
@keyframes sc-boxgone {
  to { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
}

@keyframes sc-flap-a {
  from { transform: translateY(calc(-1 * var(--h))) translateZ(var(--h)) rotateX(90deg); }
  to   { transform: translateY(calc(-1 * var(--h))) translateZ(var(--h)) rotateX(-38deg); }
}
@keyframes sc-flap-b {
  from { transform: translateY(calc(-1 * var(--h))) translateZ(calc(-1 * var(--h))) rotateX(-90deg); }
  to   { transform: translateY(calc(-1 * var(--h))) translateZ(calc(-1 * var(--h))) rotateX(38deg); }
}
@keyframes sc-ship {
  /* tucked inside the box (tiny, hidden, stacked at the box centre) */
  0%   { opacity: 0; transform: translate(var(--fx), 26px) scale(.16) rotate(var(--rot)); }
  16%  { opacity: 1; }
  /* popped up clear of the open top, still small */
  42%  { opacity: 1; transform: translate(var(--fx), -48px) scale(.52) rotate(var(--rot)); }
  /* settles into its column where the box was */
  100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
}

/* Mobile (single column): box stays centred behind the whole stack and uses
   the same overlay + fade as desktop; only the horizontal fan is off
   (--fx:0 above), so cards rise straight up over the box as it fades. */