/* ==========================================================================
   Casa Scotia — Home (refresh 2026-07, P1)
   Transcribed from design/refresh-2026-07/"01 Home.dc.html" + "11 Mobile.dc.html".
   Token-pure: authored against main.css tokens (semantic + palette layer) — no
   raw hex, no inline-style tokens, so lint-design.mjs has nothing to flag here.
   Loaded after css/main.css (tokens + reset + component canon: .tape .chip
   .hero-slides .mode-switch). Mobile behaviour (11 Mobile spec + handoff §10)
   lives in the media queries at the foot of this file.
   ========================================================================== */

/* ---- page baseline (Hanken body, Newsreader display; JetBrains mono kept) -- */
body {
  font-family: var(--font-body-grotesk);
  color: var(--color-text);
  background: var(--color-bg);
}
::selection { background: var(--gold-200); }

.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 40px; }

/* ---- buttons ------------------------------------------------------------- */
.btn-gold, .btn-ghost, .btn-dark {
  text-decoration: none; font-family: var(--font-body-grotesk); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 7px; cursor: pointer; border: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn-gold { background: var(--color-accent); color: var(--color-text); box-shadow: 0 2px 6px rgba(196,152,48,0.3); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(196,152,48,0.4); background: var(--color-accent-dark); color: var(--color-text); }
.btn-ghost { color: var(--color-text); font-weight: 600; border: 1.5px solid var(--gray-300); background: transparent; }
.btn-ghost:hover { border-color: var(--color-primary); background: var(--green-100); color: var(--color-text); }
.btn-dark { background: var(--color-text); color: var(--color-bg); }
.btn-dark:hover { background: var(--color-charcoal); color: var(--color-bg); transform: translateY(-1px); }
.btn--lg { font-size: 16px; padding: 17px 30px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  max-width: var(--max-width); margin: 0 auto;
  padding: 76px 40px 84px 40px;
  display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 72px; align-items: center;
}
.hero__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.hero__dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-primary); animation: cs-pulse-green 2.4s ease-out infinite; }
.hero__eyebrow-text { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.18em; color: var(--color-primary-dark); font-weight: 500; }
.hero__title { font-family: var(--font-display-editorial); font-weight: 500; font-size: 63px; line-height: 1.06; letter-spacing: -0.022em; margin: 0 0 28px 0; color: var(--color-charcoal); text-wrap: balance; }
.hero__title em { font-style: italic; font-weight: 400; color: var(--color-primary-dark); }
.hero__sub { font-size: 18px; line-height: 1.65; color: var(--color-gray-600); max-width: 56ch; margin: 0 0 34px 0; }
.hero__sub a.dagger { text-decoration: none; color: var(--gold-700); }
.hero__cta { display: flex; align-items: center; gap: 16px; }
.hero__meta { margin-top: 22px; font-family: var(--font-mono); font-size: 11.5px; color: var(--color-text-light); letter-spacing: 0.06em; }
.hero__router { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 11px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; }
.hero__router-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero__router-label { color: var(--color-gray-400); flex: none; }
.hero__router-link { color: var(--color-primary-dark); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--green-200); padding-bottom: 3px; }
.hero__router-link:hover { border-color: var(--color-primary-dark); color: var(--color-primary-dark); }

.hero__media { position: relative; }
/* floating peak-rate chip (canon .chip--data, positioned) */
.hero__chip { position: absolute; top: 26px; right: -26px; z-index: 5; animation: cs-float 6s ease-in-out infinite; }
.hero__chip[hidden] { display: none; }
.hero__chip .chip__label .cs-blink { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-accent); animation: cs-pulse 2.4s ease-out infinite; }
.hero__reviews { position: absolute; bottom: -28px; left: -30px; z-index: 5; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 13px 17px; box-shadow: 0 16px 36px -14px rgba(44,44,44,0.35); animation: cs-float-b 7s ease-in-out infinite; }
.hero__reviews-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--color-text-light); }
.hero__reviews-score { display: flex; align-items: baseline; gap: 6px; margin-top: 5px; }
.hero__reviews-num { font-family: var(--font-mono); font-size: 24px; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.hero__reviews-stars { color: var(--color-accent); font-size: 15px; letter-spacing: 2px; }
.hero__frame-tag { position: absolute; top: 16px; left: 16px; z-index: 3; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--color-bg); background: rgba(30,30,30,0.72); padding: 6px 11px; border-radius: var(--radius-full); }
.hero__frame-count { position: absolute; bottom: 20px; right: 16px; z-index: 3; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--color-bg); background: rgba(30,30,30,0.6); padding: 5px 9px; border-radius: 5px; font-variant-numeric: tabular-nums; }

@keyframes cs-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes cs-float-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@keyframes cs-pulse { 0% { box-shadow: 0 0 0 0 rgba(230,176,66,0.55); } 70% { box-shadow: 0 0 0 9px rgba(230,176,66,0); } 100% { box-shadow: 0 0 0 0 rgba(230,176,66,0); } }
@keyframes cs-pulse-green { 0% { box-shadow: 0 0 0 0 rgba(93,118,82,0.5); } 70% { box-shadow: 0 0 0 9px rgba(93,118,82,0); } 100% { box-shadow: 0 0 0 0 rgba(93,118,82,0); } }

/* tape — extra label meta colour handled by canon; nothing extra needed here */

/* ==========================================================================
   POSITIONING (01 — WHY US)
   ========================================================================== */
.mod { max-width: var(--max-width); margin: 0 auto; padding: 110px 40px 96px 40px; }
.mod--tight { padding-top: 110px; padding-bottom: 100px; }
.mod__lead-grid { display: grid; grid-template-columns: 88px 1fr; gap: 32px; }
.mod__num { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; color: var(--color-primary); font-weight: 500; padding-top: 14px; }
.mod__num--gold { color: var(--gold-700); }
.mod__h { font-family: var(--font-display-editorial); font-weight: 500; font-size: 46px; line-height: 1.14; letter-spacing: -0.018em; margin: 0 0 22px 0; max-width: 25ch; color: var(--color-charcoal); text-wrap: balance; }
.mod__h em { color: var(--color-primary-dark); font-style: italic; }
.mod__lead { font-size: 17px; color: var(--color-gray-600); max-width: 66ch; margin: 0 0 56px 0; }

.pos__cards { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--color-border); }
.pos__card { padding: 28px 28px 8px 28px; border-right: 1px solid var(--color-border); }
.pos__card:first-child { padding-left: 0; }
.pos__card:last-child { padding-right: 0; border-right: none; }
.pos__card-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--color-primary); margin-bottom: 14px; }
.pos__card-tag--gold { color: var(--gold-700); }
.pos__card-title { font-family: var(--font-display-editorial); font-size: 21px; font-weight: 500; margin-bottom: 10px; color: var(--color-charcoal); }
.pos__card-text { font-size: 14px; color: var(--color-text-light); line-height: 1.6; margin: 0; }
.pos__card-text a { color: var(--gold-700); font-weight: 600; }

/* ==========================================================================
   PROOF BAND
   ========================================================================== */
.proof { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-white); }
.proof__inner { max-width: var(--max-width); margin: 0 auto; padding: 54px 40px 44px 40px; }
.proof__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 32px; }
.proof__num { font-family: var(--font-mono); font-size: 34px; font-weight: 600; color: var(--color-charcoal); font-variant-numeric: tabular-nums; }
.proof__num .star { color: var(--color-accent); font-size: 22px; }
.proof__label { font-size: 12.5px; color: var(--color-text-light); margin-top: 6px; letter-spacing: 0.02em; }
.proof__foot { margin-top: 34px; padding-top: 16px; border-top: 1px dashed var(--color-border); font-family: var(--font-mono); font-size: 10.5px; color: var(--color-gray-400); letter-spacing: 0.04em; }

/* ==========================================================================
   INSTRUMENT SHOWCASE (dark)
   ========================================================================== */
.inst { background: var(--color-charcoal); color: var(--color-bg); }
.inst__inner { max-width: var(--max-width); margin: 0 auto; padding: 110px 40px; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: center; }
.inst__num { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; color: var(--green-300); margin-bottom: 26px; }
.inst__h { font-family: var(--font-display-editorial); font-weight: 500; font-size: 46px; line-height: 1.12; letter-spacing: -0.018em; margin: 0 0 24px 0; color: var(--color-bg); text-wrap: balance; }
.inst__h em { color: var(--gold-400); font-style: italic; }
.inst__text { font-size: 16.5px; line-height: 1.7; color: var(--gray-300); max-width: 54ch; margin: 0 0 34px 0; }
.inst__list { list-style: none; margin: 0 0 40px 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.inst__li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; color: var(--color-border); }
.inst__li span { font-family: var(--font-mono); color: var(--color-accent); font-size: 12px; }

/* mock report card */
.mock { position: relative; }
.mock__card { background: var(--color-bg); color: var(--color-text); border-radius: var(--radius-lg); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.6); overflow: hidden; }
.mock__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--color-border); background: var(--color-white); }
.mock__brand { display: flex; align-items: center; gap: 10px; }
.mock__brand-name { font-family: var(--font-body-grotesk); font-weight: 800; font-size: 13.5px; color: var(--color-primary); letter-spacing: -0.01em; }
.mock__ref { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--color-gray-600); }
.mock__asof { font-family: var(--font-mono); font-size: 10px; color: var(--color-gray-400); }
.mock__body { padding: 26px 24px 24px 24px; }
.mock__spec { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-light); letter-spacing: 0.06em; margin-bottom: 4px; }
.mock__figure { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; }
.mock__figure-num { font-family: var(--font-mono); font-size: 38px; font-weight: 600; color: var(--color-charcoal); font-variant-numeric: tabular-nums; }
.mock__figure-range { font-family: var(--font-mono); font-size: 15px; color: var(--color-text-light); }
.mock__band { margin-bottom: 6px; position: relative; height: 34px; }
.mock__band-track { position: absolute; inset: 12px 0; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--color-bg-alt) 0%, var(--green-200) 30%, var(--color-primary) 55%, var(--green-200) 80%, var(--color-bg-alt) 100%); }
.mock__band-mark { position: absolute; left: 58%; top: 0; width: 3px; height: 34px; background: var(--color-text); border-radius: 2px; }
.mock__band-tag { position: absolute; left: 58%; top: -4px; transform: translateX(-50%) translateY(-100%); background: var(--color-text); color: var(--color-bg); font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; border-radius: 4px; white-space: nowrap; }
.mock__band-scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9.5px; color: var(--color-gray-400); margin-bottom: 22px; }
.mock__tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.mock__tile { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px; }
.mock__tile-label { font-family: var(--font-mono); font-size: 9.5px; color: var(--color-text-light); letter-spacing: 0.08em; }
.mock__tile-val { font-family: var(--font-mono); font-size: 20px; font-weight: 600; margin-top: 4px; }
.mock__foot { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid var(--color-border); }
.mock__foot-src { font-family: var(--font-mono); font-size: 10px; color: var(--color-text-light); letter-spacing: 0.06em; }
.mock__pdf { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; color: var(--color-primary-dark); font-weight: 600; background: var(--green-100); border: 1px solid var(--green-200); padding: 6px 12px; border-radius: var(--radius-full); }
.mock__float { position: absolute; right: -18px; bottom: -20px; background: var(--color-text); border: 1px solid var(--color-border-dark); color: var(--color-bg); border-radius: 9px; padding: 12px 16px; box-shadow: 0 18px 40px -14px rgba(0,0,0,0.6); animation: cs-float 7s ease-in-out infinite; }
.mock__float-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--green-300); }
.mock__float-line { font-family: var(--font-display-editorial); font-size: 16px; margin-top: 3px; }

/* ==========================================================================
   TRACK RECORD
   ========================================================================== */
.track__head { display: grid; grid-template-columns: 88px 1fr; gap: 32px; margin-bottom: 54px; }
.track__head-right { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.track__link { flex: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--color-primary-dark); text-decoration: none; border-bottom: 1px solid var(--green-200); padding-bottom: 4px; }
.track__link:hover { border-color: var(--color-primary-dark); }
.track__cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.track-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.track-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -22px rgba(44,44,44,0.3); }
.track-card__media { height: 210px; overflow: hidden; position: relative; }
.track-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.track-card__badge { position: absolute; top: 14px; left: 14px; background: rgba(30,30,30,0.82); color: var(--gold-400); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; padding: 5px 10px; border-radius: var(--radius-full); }
.track-card__body { padding: 22px 24px 24px 24px; }
.track-card__name { font-family: var(--font-display-editorial); font-size: 23px; font-weight: 500; margin: 0 0 2px 0; color: var(--color-charcoal); }
.track-card__loc { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--color-text-light); margin-bottom: 18px; }
.track-card__metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--color-bg-alt); padding-top: 16px; gap: 8px; }
.track-card__mv { font-family: var(--font-mono); font-size: 19px; font-weight: 600; color: var(--color-charcoal); }
.track-card__ml { font-size: 11px; color: var(--color-text-light); margin-top: 2px; }
.track-card--dark { background: var(--color-text); border: 1px solid var(--color-border-dark); color: var(--color-bg); display: flex; flex-direction: column; }
.track-card--dark:hover { box-shadow: 0 26px 50px -22px rgba(30,30,30,0.5); }
.track-card__dk-body { padding: 26px 26px 0 26px; flex: 1; }
.track-card__dk-tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--green-300); margin-bottom: 16px; }
.track-card__dk-title { font-family: var(--font-display-editorial); font-size: 23px; font-weight: 500; line-height: 1.3; margin-bottom: 24px; }
.track-bar { }
.track-bar__head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--color-gray-400); margin-bottom: 7px; }
.track-bar__head .up { color: var(--gold-400); }
.track-bar__head .down { color: var(--green-300); }
.track-bar__row { display: flex; align-items: center; gap: 10px; }
.track-bar__from { font-family: var(--font-mono); font-size: 13px; color: var(--gray-300); }
.track-bar__meter { flex: 1; height: 8px; border-radius: var(--radius-full); background: var(--color-border-dark); overflow: hidden; }
.track-bar__fill { height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); }
.track-bar__fill--green { background: var(--color-primary); }
.track-bar__to { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--color-bg); }
.track-card__dk-foot { padding: 20px 26px 24px 26px; border-top: 1px solid var(--color-border-dark); margin-top: 24px; display: flex; justify-content: space-between; align-items: center; }
.track-card__dk-foot span:first-child { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--color-text-light); }
.track-card__dk-foot span:last-child { font-family: var(--font-mono); font-size: 11px; color: var(--gold-400); }

/* ==========================================================================
   INVEST teaser
   ========================================================================== */
.invest { background: var(--green-100); border-top: 1px solid var(--green-200); border-bottom: 1px solid var(--green-200); }
.invest__inner { max-width: var(--max-width); margin: 0 auto; padding: 110px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.invest__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.invest__eyebrow-num { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; color: var(--color-primary-dark); font-weight: 500; }
.pill-new { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; background: var(--color-accent); color: var(--color-text); padding: 3px 9px; border-radius: var(--radius-full); font-weight: 600; }
.invest__h { font-family: var(--font-display-editorial); font-weight: 500; font-size: 46px; line-height: 1.12; letter-spacing: -0.018em; margin: 0 0 24px 0; color: var(--color-charcoal); text-wrap: balance; }
.invest__h em { color: var(--color-primary-dark); font-style: italic; }
.invest__text { font-size: 16.5px; line-height: 1.7; color: var(--color-gray-600); max-width: 56ch; margin: 0 0 30px 0; }
.invest__cta-card { background: var(--color-white); border: 1px solid var(--green-200); border-radius: var(--radius-lg); padding: 26px 28px; box-shadow: 0 14px 34px -18px rgba(58,74,51,0.3); }
.invest__cta-title { font-family: var(--font-display-editorial); font-size: 22px; font-weight: 500; color: var(--color-charcoal); margin-bottom: 6px; }
.invest__cta-text { font-size: 14px; color: var(--color-text-light); margin: 0 0 18px 0; }
.invest__cta-note { margin-top: 14px; font-family: var(--font-mono); font-size: 10px; color: var(--color-gray-400); letter-spacing: 0.06em; }
.invest__board { background: var(--color-white); border: 1px solid var(--green-200); border-radius: var(--radius-lg); padding: 28px 30px; box-shadow: 0 24px 60px -28px rgba(58,74,51,0.35); }
.invest__board-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; }
.invest__board-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--color-gray-600); }
.invest__board-meta { font-family: var(--font-mono); font-size: 10px; color: var(--color-gray-400); }
.invest__rows { display: flex; flex-direction: column; gap: 18px; }
.invest__row-top { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 7px; }
.invest__row-top .mkt { font-weight: 600; color: var(--color-charcoal); }
.invest__row-top .rev { font-family: var(--font-mono); font-weight: 600; color: var(--color-charcoal); }
.invest__meter { height: 10px; border-radius: var(--radius-full); background: var(--color-bg-alt); overflow: hidden; }
.invest__fill { height: 100%; border-radius: var(--radius-full); background: var(--color-primary); }
.invest__fill--lead { background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); }
.invest__board-foot { margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--color-border); display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.invest__board-foot a { flex: none; }
.invest__board-foot span { font-family: var(--font-mono); font-size: 10px; color: var(--color-gray-400); letter-spacing: 0.04em; }
.invest__board-foot a { font-family: var(--font-mono); font-size: 11px; color: var(--color-primary-dark); text-decoration: none; font-weight: 600; }
.invest__tiles { margin-top: 16px; display: flex; gap: 10px; }
.invest__tile { flex: 1; background: var(--color-white); border: 1px solid var(--green-200); border-radius: 9px; padding: 14px 16px; text-align: center; }
.invest__tile--dark { background: var(--color-text); border-color: var(--color-text); }
.invest__tile-num { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--color-charcoal); }
.invest__tile--dark .invest__tile-num { color: var(--gold-400); }
.invest__tile-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--color-text-light); margin-top: 3px; }
.invest__tile--dark .invest__tile-label { color: var(--color-gray-400); }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.svc__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 40px; }
.svc-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 34px 36px; position: relative; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.svc-card:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -22px rgba(44,44,44,0.28); }
.svc-card__accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--color-primary); }
.svc-card__accent--gold { background: var(--color-accent); }
.svc-card__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.svc-card__title { font-family: var(--font-display-editorial); font-size: 28px; font-weight: 500; margin: 0; color: var(--color-charcoal); }
.svc-card__tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--color-primary-dark); background: var(--green-100); padding: 5px 11px; border-radius: var(--radius-full); }
.svc-card__tag--gold { color: var(--gold-900); background: var(--gold-100); }
.svc-card__text { font-size: 15px; color: var(--color-gray-600); line-height: 1.65; margin: 0 0 24px 0; }
.svc-card__list { list-style: none; margin: 0 0 26px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.svc-card__list li { display: flex; gap: 9px; font-size: 13.5px; color: var(--color-text); }
.svc-card__list li span { color: var(--color-primary); }
.svc-card__list--gold li span { color: var(--gold-700); }
.svc-card__foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--color-bg-alt); padding-top: 20px; }
.svc-card__terms { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-light); letter-spacing: 0.04em; }
.svc-card__link { font-weight: 700; font-size: 14px; color: var(--color-primary-dark); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.svc-card__link--gold { color: var(--gold-900); }
.svc__steps { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-white); }
.step { padding: 24px 28px; border-right: 1px solid var(--color-bg-alt); display: flex; gap: 16px; align-items: baseline; }
.step:last-child { border-right: none; }
.step__num { font-family: var(--font-display-editorial); font-size: 30px; color: var(--green-200); font-weight: 500; }
.step__title { font-weight: 700; font-size: 15px; margin-bottom: 3px; }
.step__text { font-size: 13px; color: var(--color-text-light); }

/* ==========================================================================
   OPERATORS
   ========================================================================== */
.ops__body-grid { display: grid; grid-template-columns: 88px 1fr; gap: 32px; }
.ops__body { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.ops__photo { position: relative; }
.ops__photo-frame { border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 26px 60px -24px rgba(44,44,44,0.4); aspect-ratio: 3 / 2; }
.ops__photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ops__caption { position: absolute; left: 18px; bottom: 16px; background: rgba(30,30,30,0.78); color: var(--color-bg); border-radius: var(--radius-md); padding: 9px 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; }
.bio { padding: 26px 0 0 0; }
.bio:first-child { padding: 0 0 26px 0; border-bottom: 1px solid var(--color-border); }
.bio__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.bio__name { font-family: var(--font-display-editorial); font-size: 25px; font-weight: 500; color: var(--color-charcoal); }
.bio__link { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--color-primary-dark); text-decoration: none; border-bottom: 1px solid var(--green-200); padding-bottom: 2px; }
.bio__role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--color-text-light); margin-bottom: 12px; }
.bio__text { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--color-gray-600); }

/* ==========================================================================
   REVIEWS (07 — THE GUESTS) — js/reviews.js hydration target
   ========================================================================== */
.reviews { background: var(--color-white); border-top: 1px solid var(--color-border); }
.reviews__inner { max-width: var(--max-width); margin: 0 auto; padding: 100px 40px; }
.reviews__head { display: grid; grid-template-columns: 88px 1fr; gap: 32px; margin-bottom: 50px; }
.reviews__head-right { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.reviews__badge { display: flex; align-items: center; gap: 14px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 14px 20px; }
.reviews__badge-num { font-family: var(--font-mono); font-size: 30px; font-weight: 600; color: var(--color-charcoal); }
.reviews__badge-stars { color: var(--color-accent); font-size: 17px; letter-spacing: 2px; }
.reviews__badge-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-text-light); letter-spacing: 0.06em; line-height: 1.5; }
.reviews-aggregate { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-light); margin: 0 0 24px 0; }
.review-star { color: var(--color-accent); }
.reviews-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
/* review-card styled to the 07 skin so seed + hydrated cards match */
.review-card { margin: 0; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px 30px; display: flex; flex-direction: column; gap: 18px; }
.review-card__meta { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; color: var(--color-text-light); letter-spacing: 0.06em; }
.review-card__stars { color: var(--gold-700); }
.review-card__channel { color: var(--color-text-light); }
.review-card__date { margin-left: auto; }
.review-card__text { margin: 0; font-family: var(--font-display-editorial); font-size: 17.5px; line-height: 1.55; color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.review-card__footer { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--color-bg-alt); padding-top: 14px; margin-top: auto; gap: 12px; }
.review-card__guest { font-weight: 700; font-size: 13.5px; }
.review-card__listing { font-size: 11.5px; color: var(--color-text-light); text-align: right; }
.reviews__foot { margin-top: 26px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.reviews__foot-src { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-gray-400); letter-spacing: 0.05em; }
.reviews__google { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-primary-dark); letter-spacing: 0.05em; }
.reviews__google .star { color: var(--color-accent); }
.reviews-footnote { font-family: var(--font-mono); font-size: 10px; color: var(--color-gray-400); letter-spacing: 0.04em; margin: 18px 0 0 0; }

/* ==========================================================================
   COVERAGE
   ========================================================================== */
.cov__head { display: grid; grid-template-columns: 88px 1fr; gap: 32px; margin-bottom: 46px; }
.cov__head-right { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.cov__lead { font-size: 15px; color: var(--color-text-light); max-width: 40ch; margin: 0; }
.cov__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.cov-col { border-top: 2px solid var(--color-primary); padding-top: 18px; }
.cov-col__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.cov-col__name { font-family: var(--font-display-editorial); font-size: 21px; font-weight: 500; }
.cov-col__count { font-family: var(--font-mono); font-size: 10px; color: var(--color-text-light); }
.cov-col__list { font-size: 13.5px; line-height: 1.9; color: var(--color-gray-600); margin: 0; }

/* ==========================================================================
   ENDING (dark CTA)
   ========================================================================== */
.end { background: var(--color-charcoal); position: relative; overflow: hidden; }
.end__glow { position: absolute; inset: 0; background: radial-gradient(900px 400px at 75% 20%, rgba(93,118,82,0.35), transparent 65%); }
.end__inner { max-width: var(--max-width); margin: 0 auto; padding: 130px 40px; position: relative; text-align: center; }
.end__eyebrow { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.2em; color: var(--green-300); margin-bottom: 26px; }
.end__h { font-family: var(--font-display-editorial); font-weight: 500; font-size: 62px; line-height: 1.06; letter-spacing: -0.02em; color: var(--color-bg); margin: 0 auto 22px auto; max-width: 20ch; text-wrap: balance; }
.end__h em { color: var(--gold-400); font-style: italic; }
.end__text { font-size: 17px; color: var(--gray-300); max-width: 52ch; margin: 0 auto 44px auto; }
.end__cta { display: flex; justify-content: center; gap: 16px; }
.end__cta .btn-ghost { color: var(--color-bg); border-color: var(--color-gray-600); }
.end__cta .btn-ghost:hover { border-color: var(--green-300); background: rgba(93,118,82,0.15); color: var(--color-bg); }
.end__contact { margin-top: 30px; font-family: var(--font-mono); font-size: 11px; color: var(--color-text-light); letter-spacing: 0.08em; }

/* ==========================================================================
   STICKY MOBILE ACTION BAR (11 Mobile spec) — hidden on desktop
   ========================================================================== */
.sticky-bar { display: none; }

/* ==========================================================================
   MOBILE — 11 Mobile.dc.html + handoff §10 (390px canonical)
   ========================================================================== */
@media (max-width: 900px) {
  .inst__inner, .invest__inner, .ops__body { grid-template-columns: 1fr; gap: 40px; }
  .pos__cards { grid-template-columns: 1fr 1fr; }
  .pos__card { border-right: none; padding: 24px 0 8px 0; border-bottom: 1px solid var(--color-border); }
  .proof__grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .svc__cards { grid-template-columns: 1fr; }
  .svc__steps { grid-template-columns: 1fr; }
  .step { border-right: none; border-bottom: 1px solid var(--color-bg-alt); }
  .cov__grid { grid-template-columns: 1fr; }
  .track__cards { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .wrap { padding: 0 20px; }

  /* hero: single column, stacked full-width CTAs */
  .hero { grid-template-columns: 1fr; gap: 30px; padding: 28px 20px 32px 20px; }
  .hero__title { font-size: 37px; margin-bottom: 14px; }
  .hero__sub { font-size: 15px; margin-bottom: 20px; }
  .hero__cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__cta .btn-gold { height: 54px; padding: 0; font-size: 16px; }
  .hero__cta .btn-ghost { height: 50px; padding: 0; }
  .hero__meta { text-align: center; font-size: 9px; }
  /* pain router → 2-col chips, >=44px */
  .hero__router-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero__router-label { grid-column: 1 / -1; margin-bottom: 2px; }
  .hero__router-link { min-height: 44px; display: flex; align-items: center; background: var(--green-100); border: 1px solid var(--green-200); border-radius: 9px; padding: 10px 12px; font-size: 12.5px; }
  /* hero media below the copy; floating chrome simplified */
  .hero__media { order: 2; }
  .hero__chip { top: 12px; right: 12px; bottom: auto; animation: none; }
  .hero__frame-tag { display: none; }
  .hero__chip .chip__value { font-size: 22px; }
  .hero__chip { padding: 10px 14px; }
  .hero__reviews { display: none; }

  /* order: copy, then media */
  .hero__copy { order: 1; }

  /* positioning */
  .mod { padding: 34px 20px; }
  .mod__lead-grid, .track__head, .reviews__head, .cov__head, .ops__body-grid { grid-template-columns: 1fr; gap: 12px; }
  .mod__num { padding-top: 0; }
  .mod__h { font-size: 27px; }
  .mod__lead { font-size: 15px; margin-bottom: 24px; }
  .pos__cards { grid-template-columns: 1fr; border-top: 1px solid var(--color-border); margin-top: 8px; }

  /* proof: 2-col */
  .proof__inner { padding: 26px 20px; }
  .proof__grid { grid-template-columns: 1fr 1fr; gap: 18px 14px; }
  .proof__num { font-size: 22px; }
  .proof__num .star { font-size: 15px; }

  /* instrument */
  .inst__inner { padding: 40px 20px; }
  .inst__h, .invest__h { font-size: 27px; }
  .track__head-right, .cov__head-right { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* track record + reviews: horizontal snap w/ swipe affordance */
  .track__cards, .reviews-grid {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: 8px;
    scroll-padding-left: 20px; margin: 0 -20px; padding-left: 20px; padding-right: 20px;
  }
  .track-card, .review-card { flex: none; width: 82%; max-width: 300px; scroll-snap-align: start; }
  .review-card__text { -webkit-line-clamp: 5; font-size: 15px; }
  .swipe-hint { display: block; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.1em; color: var(--color-gray-400); }

  /* invest */
  .invest__inner { padding: 40px 20px; }
  .invest__tiles { flex-direction: column; }

  /* ops */
  .ops__body { gap: 24px; }

  /* reviews */
  .reviews__inner { padding: 40px 20px; }
  .reviews__foot { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* ending */
  .end__inner { padding: 56px 20px; }
  .end__h { font-size: 30px; }
  .end__text { font-size: 13.5px; }
  .end__cta { flex-direction: column; }
  .end__cta .btn-gold, .end__cta .btn-ghost { height: 54px; padding: 0; }

  /* tape: fewer items via reduced marquee already; compact label */
  .tape__item { padding: 12px 16px; font-size: 11px; }
  .tape__track { animation-duration: 30s; }

  /* sticky action bar — appears after hero scrolls off */
  .sticky-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 8px)) 14px;
    background: rgba(250,250,248,0.96); border-top: 1px solid var(--color-border);
    box-shadow: 0 -8px 24px rgba(44,44,44,0.08);
    transform: translateY(120%); transition: transform .28s ease; pointer-events: none;
  }
  .sticky-bar.is-visible { transform: translateY(0); pointer-events: auto; }
  .sticky-bar.is-hidden-focus { transform: translateY(120%); }
  .sticky-bar__call { flex: none; width: 52px; height: 48px; border: 1.5px solid var(--gray-300); border-radius: 10px; display: grid; place-items: center; text-decoration: none; }
  .sticky-bar__cta { flex: 1; height: 48px; }
  /* keep the last section clear of the bar */
  body { padding-bottom: 0; }
}

.swipe-hint { display: none; }

/* reduced motion — kill float/pulse (canon already handles tape + kenburns) */
@media (prefers-reduced-motion: reduce) {
  .hero__dot, .hero__chip, .hero__reviews, .mock__float,
  .hero__chip .chip__label .cs-blink { animation: none !important; }
  .sticky-bar { transition: none; }
}