/* ════════════════════════════════════════════════════════════════════════════
   Components shared by index.html and the inner pages (services, about, team, careers, contact, legal, 404).
   Only class selectors live here; tokens (--bg, --text, --accent, --px, --gutter …) come from each page.
   Sizes use max(floor, n * --px) so they follow the home page's design scale but stay readable on short screens.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── content section: opaque, above the fixed 3D canvas (like the [04] gallery) ── */
.sec { position: relative; z-index: 4; background: var(--bg); padding: max(88px, calc(170 * var(--px))) var(--gutter);
  border-top: 1px solid var(--hair-subtle); }
:root[data-theme="light"] .sec { border-top-color: var(--border); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: calc(80 * var(--px)); row-gap: 20px; align-items: end; }
.sec-head h2 { margin-top: max(14px, calc(30 * var(--px))); font: 500 max(32px, calc(76 * var(--px))) / 1.1 var(--font-display); letter-spacing: -0.02em; }
.sec-head .sub { font-size: max(15px, calc(25 * var(--px))); line-height: 1.4; color: var(--dim); max-width: 46ch; }
.sec .eyebrow, .page .eyebrow { font-size: max(13px, calc(24 * var(--px))); }
.sec .eyebrow .idx, .page .eyebrow .idx { font-size: max(20px, calc(40 * var(--px))); }

/* ── [05] client logos: vertically scrolling marquee columns; shared.js deals every logo into 4 / 3 / 2 columns ── */
.logo-cols { margin-top: max(40px, calc(80 * var(--px))); display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 12px;
  height: clamp(420px, calc(720 * var(--px)), 640px); overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.logo-col { min-width: 0; }
.logo-track { animation: logo-up var(--dur, 26s) linear infinite; }
.logo-col:nth-child(even) .logo-track { animation-direction: reverse; }
.logo-cols:hover .logo-track { animation-play-state: paused; }
@keyframes logo-up { to { transform: translateY(-50%); } }        /* each track holds its list twice → seamless loop */
.logo-card { margin-bottom: 12px; padding: 12px; display: grid; gap: 12px; border: 1px solid var(--hair); border-radius: 14px;
  background: color-mix(in oklab, var(--text) 3%, var(--bg)); }
:root[data-theme="light"] .logo-card { border-color: var(--border); background: #fff; }
.logo-card .plate { aspect-ratio: 16 / 9; border-radius: 9px; background: var(--plate, #fff); display: grid; place-items: center; overflow: hidden; }
.logo-card img { max-width: 70%; max-height: 66%; object-fit: contain; display: block; }
.logo-card span { padding: 0 4px 2px; font: 400 max(11px, calc(16 * var(--px))) / 1.3 var(--font-mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } .logo-track [aria-hidden] { display: none; } .logo-cols { height: auto; -webkit-mask-image: none; mask-image: none; } }

/* ── stat tiles (team page; same numbers as the home band) ── */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat { padding: max(20px, calc(34 * var(--px))); border: 1px solid var(--hair); border-radius: 14px; }
:root[data-theme="light"] .stat { border-color: var(--border); }
.stat strong { display: block; font: 300 max(36px, calc(76 * var(--px))) / 1 var(--font-display); letter-spacing: -0.02em; }
.stat strong sup { font-size: .45em; vertical-align: top; color: var(--accent); }
.stat b { display: block; margin-top: 14px; font: 500 max(15px, calc(22 * var(--px))) / 1.3 var(--font-body); }
.stat small { display: block; margin-top: 6px; font: 400 max(11px, calc(16 * var(--px))) / 1.45 var(--font-mono); color: var(--dim); }

/* ── numbered cards: engagement models, capability pillars, services ── */
.cards { margin-top: max(40px, calc(80 * var(--px))); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(40 * var(--px)); row-gap: max(28px, calc(56 * var(--px))); }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-n { padding-top: max(18px, calc(28 * var(--px))); border-top: 1px solid var(--hair); }
:root[data-theme="light"] .card-n { border-top-color: var(--border); }
.card-n .n { font: 300 max(18px, calc(30 * var(--px))) / 1 var(--font-display); color: var(--accent); }
.card-n h3 { margin-top: max(14px, calc(24 * var(--px))); font: 500 max(19px, calc(34 * var(--px))) / 1.2 var(--font-display); letter-spacing: -0.01em; }
.card-n .kicker { display: block; margin-top: 8px; font: 400 max(11px, calc(17 * var(--px))) / 1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--dim); }
.card-n p { margin-top: 12px; font-size: max(14px, calc(22 * var(--px))); line-height: 1.5; color: var(--dim); }

/* ── FAQ accordion (native <details>) ── */
.faq { margin-top: max(36px, calc(70 * var(--px))); border-bottom: 1px solid var(--hair); }
.faq details { border-top: 1px solid var(--hair); }
:root[data-theme="light"] .faq, :root[data-theme="light"] .faq details { border-color: var(--border); }
.faq summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: max(14px, calc(30 * var(--px)));
  padding: max(18px, calc(30 * var(--px))) 0; cursor: pointer; font: 500 max(17px, calc(30 * var(--px))) / 1.3 var(--font-display); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q-n { font: 400 max(11px, calc(16 * var(--px))) var(--font-mono); color: var(--accent); }
.faq summary::after { content: '+'; font: 300 max(22px, calc(36 * var(--px))) / 1 var(--font-display); color: var(--dim); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--text); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.faq details p { padding: 0 0 max(22px, calc(36 * var(--px))); margin-left: calc(max(11px, calc(16 * var(--px))) * 2.4 + max(14px, calc(30 * var(--px))));
  max-width: 70ch; font-size: max(14px, calc(22 * var(--px))); line-height: 1.6; color: var(--dim); }

/* ── forms: <select>, success panel, contact links ── */
.field select { width: 100%; padding: 10px 24px 10px 0; border: 0; border-bottom: 1px solid var(--hair-strong); border-radius: 0; appearance: none;
  background: none; color: var(--text); font: 400 max(15px, calc(24 * var(--px))) / 1.35 var(--font-body); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field select:focus { outline: none; border-bottom-color: var(--accent); }
.field select option { color: #101416; }
:root[data-theme="light"] .field select { border-bottom-color: #9AA0A6; }
.form-done { margin-top: max(36px, calc(48 * var(--px))); padding: max(24px, calc(40 * var(--px))); border: 1px solid var(--hair); border-radius: 14px; }
.form-done[hidden] { display: none; }
.form-done h3 { font: 500 max(22px, calc(40 * var(--px))) / 1.1 var(--font-display); }
.form-done h3::before { content: '✓ '; color: var(--accent); }
.form-done p { margin: 12px 0 24px; font-size: max(14px, calc(22 * var(--px))); line-height: 1.5; color: var(--dim); }
.reach { margin-top: max(18px, calc(28 * var(--px))); display: flex; flex-wrap: wrap; gap: 8px 28px; font: 400 max(12px, calc(19 * var(--px))) var(--font-mono); }
.reach a { color: var(--text); border-bottom: 1px solid var(--hair-strong); padding-bottom: 2px; transition: border-color .2s; }
.reach a:hover { border-bottom-color: var(--accent); }

/* ── site footer (replaces the old one-line footer) ── */
.site-foot { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); column-gap: calc(48 * var(--px)); row-gap: 36px;
  padding-top: max(32px, calc(56 * var(--px))); border-top: 1px solid var(--hair); font-size: max(13px, calc(20 * var(--px))); color: var(--dim); }
:root[data-theme="light"] .site-foot { border-top-color: var(--border); }
.foot-brand .brand { color: var(--text); }
.foot-brand p { margin-top: 18px; max-width: 46ch; line-height: 1.55; }
.foot-brand .foot-tagline { margin-top: 14px; color: var(--text); font-weight: 500; }
.foot-mail { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; color: var(--text); font-family: var(--font-mono); font-size: max(12px, calc(18 * var(--px))); }
.foot-mail svg { width: 18px; height: 18px; }
.foot-phone, .foot-social { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--font-mono); font-size: max(12px, calc(18 * var(--px))); }
.foot-social svg { width: 18px; height: 18px; }
/* the office address (name, address, phone must read the same everywhere: tools/parts.py BIZ) */
.foot-addr { margin-top: 18px; max-width: 46ch; font-style: normal; line-height: 1.55; }
.foot-addr strong { color: var(--text); font-weight: 500; }
.foot-addr a { color: var(--text); text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 3px; }
/* tap targets: the footer's contact links are at least 44px tall on touch screens */
:root[data-input="touch"] .foot-phone, :root[data-input="touch"] .foot-social, :root[data-input="touch"] .foot-mail { min-height: 44px; }
:root[data-input="touch"] .foot-social { min-width: 44px; justify-content: center; }
.site-foot .foot-h { font: 400 max(11px, calc(16 * var(--px))) var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.site-foot ul { margin-top: 16px; display: grid; gap: 12px; }
.site-foot a { transition: color .2s; }
.site-foot a:hover { color: var(--text); }
.foot-directory { grid-column: 1 / -1; padding-top: 28px; border-top: 1px solid var(--hair-subtle); }
.foot-directory ul { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 32px; row-gap: 10px; }
.foot-bar { grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding-top: 24px; border-top: 1px solid var(--hair-subtle); }
:root[data-theme="light"] .foot-bar { border-top-color: var(--border); }
.foot-bar nav { display: flex; gap: 24px; }
.brand b { font-weight: inherit; color: var(--accent); }

/* ── hero: two CTAs side by side ── */
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: calc(66 * var(--px)); }
.hero-ctas .btn-terminal { margin-top: 0 !important; }
.btn-terminal.ghost { border-color: var(--hair-strong); }
.hl { color: var(--accent); }

@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* mobile composition (assets/device.js decides: phones, portrait tablets, narrow windows) */
:root[data-layout="mobile"] .sec { padding: max(72px, calc(120 * var(--px))) var(--m-gutter, 16px); }
:root[data-layout="mobile"] .sec-head { grid-template-columns: 1fr; }
:root[data-layout="mobile"] .logo-cols { height: 460px; gap: 8px; }
:root[data-layout="mobile"] .logo-card { padding: 8px; gap: 8px; margin-bottom: 8px; }
:root[data-layout="mobile"] .cards, :root[data-layout="mobile"] .cards.two { grid-template-columns: 1fr; }
:root[data-layout="mobile"] .site-foot { grid-template-columns: 1fr 1fr; }
:root[data-layout="mobile"] .foot-brand { grid-column: 1 / -1; }
:root[data-layout="mobile"] .foot-directory ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[data-layout="mobile"] .foot-bar { display: grid; }
:root[data-layout="mobile"] .faq details p { margin-left: 0; }
.faq details p a, .prose a { color: var(--text); text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 3px; }
.faq details p a:hover, .prose a:hover { text-decoration-color: var(--accent); }

/* portrait tablets have room for two columns */
:root[data-scale="tablet"] .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* form honeypot (assets/shared.js): off-screen rather than display:none, which some bots skip */
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }