/* assets/css/services.css — "The Board"
   Page-scoped styles for services.html. Inherits every token, face and
   component from style.css; this file only adds the board surface.
   Loaded after style.css and only on this page. */

.svc-page {
  --board-ink: #0c0d0a;
  --board-ink-2: #15170f;
  --board-line: #2a2d22;
  --board-dim: #8b8f80;
  --rule: #e6e5e0;
  --lane-gap: clamp(28px, 4vw, 56px);
  /* kept as an alias: --muted itself is now the accessible tone site-wide */
  --muted-ok: var(--muted);
}

/* icon sprite is markup-only */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico {
  width: 1em; height: 1em; display: block; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ============================================================
   BOARD HEAD — the live surface. Dark on purpose: this is the
   one "system" moment before the page turns to daylight reading.
   ============================================================ */
.board {
  position: relative;
  background: var(--board-ink);
  color: #edefe6;
  padding-block: calc(var(--head-h) + clamp(38px, 6vw, 76px)) clamp(30px, 4vw, 48px);
  overflow: hidden;
}
.board::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 78% 6%, rgba(169, 254, 1, .13) 0%, transparent 58%),
    radial-gradient(90% 70% at 8% 96%, rgba(169, 254, 1, .06) 0%, transparent 60%);
}
.board > .container { position: relative; z-index: 2; }

.board-status {
  display: flex; align-items: center; gap: 10px;
  font-size: .72rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--board-dim);
  margin-bottom: clamp(22px, 3vw, 34px);
}
.board-status .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 0 0 rgba(169, 254, 1, .55);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(169, 254, 1, .5); }
  70%  { box-shadow: 0 0 0 11px rgba(169, 254, 1, 0); }
  100% { box-shadow: 0 0 0 0 rgba(169, 254, 1, 0); }
}
.board-status .sep { color: #4a4d40; }

.board-head h1 {
  color: #fff;
  font-size: clamp(2.5rem, 1.1rem + 5.1vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.035em;
  max-width: 17ch;
  text-wrap: balance;
}
.board-head h1 em {
  font-style: normal;
  color: var(--lime);
}
.board-lede {
  margin-top: clamp(20px, 2.6vw, 30px);
  max-width: 56ch;
  font-size: clamp(1.02rem, .96rem + .35vw, 1.22rem);
  line-height: 1.62;
  color: #b9bdae;
}
.board-lede b { color: #fff; font-weight: 600; }

.board-actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: clamp(28px, 3.4vw, 40px);
}
.board-actions .btn { border-radius: 3px; }
.btn--wa { background: var(--lime); color: var(--ink); }
.btn--wa:hover { background: var(--lime-hover); transform: translateY(-2px); }
.btn--quiet {
  background: transparent; color: #edefe6;
  border-color: #3b3f31;
}
.btn--quiet:hover { border-color: var(--lime); color: var(--lime); }
.btn .ico { font-size: 1.15em; }

/* ---- verified-figure bank: digits read as instrument, not stat card ---- */
.ticker {
  margin-top: clamp(40px, 5vw, 68px);
  padding-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--board-line);
  display: grid; gap: clamp(18px, 2.4vw, 30px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tick .num {
  display: flex; align-items: baseline; gap: 1px;
  font-family: var(--font);
  font-size: clamp(1.75rem, 1.1rem + 2vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 26px rgba(169, 254, 1, .34);
}
.tick .num .unit { font-size: .52em; letter-spacing: 0; }
.tick .lbl {
  margin-top: 10px;
  font-size: .78rem; line-height: 1.4; color: var(--board-dim);
}
@media (max-width: 760px) {
  .ticker { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
}

/* ============================================================
   LANES — daylight reading. Hairline rules, no cards.
   ============================================================ */
.lanes { padding-block: clamp(56px, 7vw, 96px); }

.lanes-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 2px solid var(--ink);
}
.lanes-head h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); }
.lanes-head p { color: var(--muted-ok); font-size: .95rem; max-width: 40ch; }

.lane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--lane-gap);
  align-items: start;
  padding-block: clamp(38px, 5vw, 68px);
  border-bottom: 1px solid var(--rule);
}
.lane--textled { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }

.lane-mark {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.lane-mark .ico { font-size: 26px; color: var(--ink); }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--line); border-radius: 20px;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft);
  white-space: nowrap;
}
.chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime); flex: none;
}
.chip--quiet::before { background: var(--muted); }

.lane h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 144, 'WONK' 1;
  font-weight: 600;
  font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.5rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--ink);
}
.lane-say {
  margin-top: 14px; max-width: 46ch;
  font-size: 1.02rem; line-height: 1.66; color: var(--ink-soft);
}
.lane-does {
  margin: 22px 0 0; padding: 0; list-style: none;
  display: grid; gap: 9px;
}
.lane-does li {
  display: grid; grid-template-columns: 15px 1fr; gap: 11px;
  align-items: start;
  font-size: .96rem; color: var(--ink-soft);
}
.lane-does li::before {
  content: ''; width: 9px; height: 1px; background: var(--ink);
  margin-top: .72em;
}
.lane-cta {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 26px;
  font-weight: 600; font-size: .95rem; color: var(--ink);
  padding-bottom: 5px;
  border-bottom: 2px solid var(--lime);
  transition: gap .2s ease, border-color .2s ease;
}
.lane-cta:hover { gap: 15px; border-bottom-color: var(--ink); }
.lane-cta .ico { font-size: 1.05em; }

/* ---- shingled client creatives ---- */
.shingle {
  display: flex; align-items: flex-start;
  padding-top: 6px;
}
/* widths solve to exactly 100%: n cards of W overlapping by 13% => nW - (n-1)13 = 100 */
.shingle a {
  flex: 0 0 auto; width: 42%;
  border-radius: 10px; overflow: hidden;
  background: #0b0b0b;
  box-shadow: 0 12px 30px rgba(20, 20, 19, .17);
  transition: transform .38s cubic-bezier(.22, .8, .3, 1),
              box-shadow .38s ease;
  will-change: transform;
}
.shingle a + a { margin-left: -13%; }
.shingle a:nth-child(1) { transform: rotate(-2.1deg); z-index: 1; }
.shingle a:nth-child(2) { transform: rotate(1.3deg);  z-index: 2; }
.shingle a:nth-child(3) { transform: rotate(3deg);    z-index: 3; }
.shingle a:hover {
  transform: rotate(0deg) translateY(-12px) scale(1.045);
  box-shadow: 0 26px 52px rgba(20, 20, 19, .3);
  z-index: 6;
}
.shingle--two a { width: 56.5%; }
.shingle img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; display: block; }
.shingle--tall img { aspect-ratio: 3/4; }

/* a 9:16 reel would run ~900px tall at full column width */
.lane-media > .reel { max-width: 320px; }

.lane-still {
  max-width: 420px;
  border-radius: 12px; overflow: hidden; background: #0b0b0b;
  box-shadow: 0 14px 34px rgba(20, 20, 19, .18);
}
.lane-still img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }

.shot-note {
  margin-top: 14px; font-size: .8rem; color: var(--muted-ok);
  display: flex; align-items: center; gap: 8px;
}
.shot-note .ico { font-size: 14px; }

/* ---- authored diagram panels (lanes with no photographic asset) ---- */
.panel {
  border: 1px solid var(--line); border-radius: 12px;
  padding: clamp(22px, 3vw, 32px);
  background: var(--bg-alt);
}
.panel-title {
  font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted-ok); margin-bottom: 18px;
}
.panel svg { width: 100%; height: auto; display: block; }
.panel-foot {
  margin-top: 18px; font-size: .9rem; line-height: 1.55; color: var(--ink-soft);
}
.panel-foot b { color: var(--ink); font-weight: 700; }

/* ============================================================
   RHYTHM — how a month actually runs
   ============================================================ */
.rhythm { background: var(--bg-alt); padding-block: clamp(56px, 7vw, 96px); }
.rhythm-head { max-width: 46ch; margin-bottom: clamp(34px, 4vw, 52px); }
.rhythm-head h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); }
.rhythm-head p { margin-top: 14px; color: var(--muted-ok); font-size: 1.02rem; }

.beats { position: relative; display: grid; gap: 2px; grid-template-columns: repeat(4, 1fr); }
.beats::before {
  content: ''; position: absolute; left: 0; right: 0; top: 26px;
  height: 2px; background: var(--line);
}
.beats-run {
  position: absolute; left: 0; top: 26px; height: 2px;
  background: var(--lime); transform-origin: left center;
  transform: scaleX(0); width: 100%;
}
.beat { position: relative; padding: 0 20px 0 0; }
.beat .knot {
  position: relative; z-index: 2;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg-alt); border: 2px solid var(--ink);
  margin: 20px 0 22px;
  transition: background .3s ease, border-color .3s ease;
}
.beat.on .knot { background: var(--lime); border-color: var(--lime); }
.beat .when {
  font-size: .7rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lime-deep); margin-bottom: 8px;
}
.beat h4 { font-size: 1.06rem; margin-bottom: 7px; color: var(--ink); }
.beat p { font-size: .93rem; line-height: 1.55; color: var(--muted-ok); max-width: 26ch; }
@media (max-width: 780px) {
  .beats { grid-template-columns: 1fr; gap: 0; }
  .beats::before, .beats-run { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .beats-run { transform-origin: top center; transform: scaleY(0); height: 100%; }
  .beat { padding: 0 0 26px 34px; }
  .beat .knot { position: absolute; left: 0; top: 2px; margin: 0; }
}

/* ============================================================
   PROOF
   ============================================================ */
.proof { padding-block: clamp(56px, 7vw, 92px); }
.proof-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.proof-head h2 { font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.4rem); }
.roster {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  grid-template-columns: repeat(4, 1fr);
}
.roster div {
  background: #fff; padding: 22px 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.roster b { font-size: 1rem; color: var(--ink); letter-spacing: -.01em; }
.roster span { font-size: .84rem; color: var(--muted-ok); }
@media (max-width: 900px) { .roster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .roster { grid-template-columns: 1fr; } }

/* ============================================================
   CLOSE
   ============================================================ */
.close-band {
  background: var(--board-ink); color: #edefe6;
  padding-block: clamp(60px, 8vw, 108px);
  position: relative; overflow: hidden;
}
.close-band::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 120% at 50% 120%, rgba(169, 254, 1, .16) 0%, transparent 62%);
}
.close-band .container { position: relative; z-index: 2; text-align: center; }
.close-band h2 {
  color: #fff; max-width: 19ch; margin-inline: auto;
  font-size: clamp(2rem, 1.3rem + 2.7vw, 3.4rem); letter-spacing: -.025em;
}
.close-band p { margin: 20px auto 0; max-width: 48ch; color: #b9bdae; font-size: 1.04rem; }
.close-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }
.close-alt { margin-top: 26px; font-size: .92rem; color: var(--board-dim); }
.close-alt a { color: #edefe6; border-bottom: 1px solid #3b3f31; padding-bottom: 2px; }
.close-alt a:hover { color: var(--lime); border-bottom-color: var(--lime); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .lane, .lane--textled { grid-template-columns: 1fr; gap: 30px; }
  .lane-media { order: 2; }
}
@media (max-width: 560px) {
  .board-actions .btn { width: 100%; justify-content: center; }
}
/* NOTE: card width and overlap are deliberately NOT overridden per breakpoint —
   they solve to exactly 100% together, and changing one without the other
   pushes the shingle outside its column. */

/* ============================================================
   MOTION — default state is visible; JS opts in to animating.
   ============================================================ */
/* Only [data-rise] needs a CSS start state (it is animated with gsap.to).
   Lane content is animated with fromTo, whose immediateRender sets the start
   state itself — hiding it here too would leave parents stuck at opacity 0. */
.js-anim [data-rise] { opacity: 0; transform: translateY(22px); }

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-rise] { opacity: 1 !important; transform: none !important; }
  .board-status .dot { animation: none; }
  .beats-run { transform: none !important; }
}