/* =====================================================================
   PLAYBOOK — pages-a.css (31 Oct 2026)
   Page-specific styles for about, services, brand-strategy,
   digital-design, growth-marketing and approach. Loaded after site.css.
   Only components Home lacks live here; everything else reuses site.css.
   ===================================================================== */

/* ---------- Nav: current page ---------- */
.nav-links a[aria-current] { background-size: 100% 1px; }

/* ---------- Page head (light opener) ---------- */
.page-head { padding-top: calc(var(--nav-h) + 56px + env(safe-area-inset-top, 0px)); padding-bottom: 0; }
.page-head .wrap { gap: 40px; }
.page-head h1 { font-size: clamp(3rem, 1.2rem + 5.6vw, 7rem); line-height: .9; max-width: 1300px; }
.page-head .page-intro { font: 500 var(--fs-quote)/1.1 var(--font-text); letter-spacing: var(--ls-tight); max-width: 900px; }
.page-head .btn-row { gap: 8px; }
.ph-wide { width: 100%; aspect-ratio: 16 / 7; }
.page-head .ph-wide { margin-top: 24px; }
.page-head + .sec { padding-top: var(--section-y); }
@media (min-width: 810px) {
  .page-head { padding-top: calc(var(--nav-h) + 96px + env(safe-area-inset-top, 0px)); }
}

/* ---------- Discipline hero (framed, dark) ---------- */
.disc-media { position: absolute; inset: 0; background: radial-gradient(80% 70% at 30% 70%, #6A6966, var(--media) 70%); }
.disc .hero-in { padding-top: calc(var(--nav-h) + 48px); }
.disc .hero-block { flex: 0 0 auto; margin-top: auto; gap: 28px; max-width: 1100px; }
.disc .hero-block .hero-btns { margin-top: 0; padding-top: 4px; }
.disc .hero-h1 { font-size: clamp(3rem, 1.2rem + 5.6vw, 7rem); line-height: .9; }
.disc .hero-block .hero-quote { max-width: 820px; }
.disc .hero-crumb { color: var(--pb-mist); }
.disc .hero-tags { color: var(--pb-paper); font-size: var(--fs-label); }
.disc .hero-tags i { color: var(--accent); }
.disc .hero-note { max-width: 520px; }
.disc .btn:not(.btn-light) { box-shadow: inset 0 0 0 1px rgba(244,244,244,.25); }

/* ---------- Two columns + why grid (About) ---------- */
.why-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 32px; align-items: start; }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.col { display: flex; flex-direction: column; gap: 12px; }

/* ---------- The name (framed, dark) ---------- */
.name-frame { background: var(--pb-ink); color: var(--pb-paper); min-height: min(760px, calc(100svh - var(--inset) * 2)); display: grid; place-items: center; padding: 96px var(--page-x); }
.name-in { display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; max-width: 1100px; }
.name-label { color: var(--pb-mist); }
.name-words { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(32px, 8vw, 120px); text-align: left; }
.name-word { display: flex; flex-direction: column; gap: 16px; }
.name-word .display { font-size: clamp(4.5rem, 2rem + 9vw, 10.875rem); line-height: .95; }
.name-word .lead { color: var(--pb-mist); max-width: 420px; }
.dot { color: var(--accent); }

/* ---------- Split grid: intro left, list right ---------- */
.sg { display: grid; grid-template-columns: 450px minmax(0, 1fr); gap: 100px; align-items: start; }
.sg-intro { display: flex; flex-direction: column; gap: 24px; }
.sg-intro .lead { max-width: 450px; }
.defs { border-bottom: 1px solid var(--fg); }
.def { display: grid; grid-template-columns: 56px 300px minmax(0, 1fr); gap: 20px; padding: 20px 0; border-top: 1px solid var(--fg); align-items: start; }
.def .label { color: var(--muted); }
.def p { max-width: 560px; }

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.person { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.person .ph { width: 100%; }
.r-portrait { aspect-ratio: 4 / 5; }

/* ---------- Service rows: link button inside the row ---------- */
.srow-foot .btn { margin-top: 8px; }
.choose { display: flex; flex-direction: column; gap: 16px; }
.choose .btn-row { gap: 8px; }

/* ---------- Approach: the margin, large ---------- */
.margin-grid { display: grid; grid-template-columns: minmax(0, 820px) minmax(0, 1fr); gap: 100px; align-items: start; }
.margin-lg { max-width: 420px; gap: 16px; }
.margin-lg .strike, .margin-lg .after { font: 500 var(--fs-quote)/1.1 var(--font-text); letter-spacing: var(--ls-tight); }

/* ---------- Approach: step sections ---------- */
.step-grid { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 32px; align-items: start; }
.step-lead { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.step-lead .lead { max-width: 560px; }
.big-word { font-size: clamp(5rem, 2rem + 10vw, 10.875rem); line-height: .95; }
.step-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.step-col { border-top: 1px solid var(--fg); padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.arrows { display: flex; flex-direction: column; gap: 12px; }
.arrows li { max-width: 40ch; }
.step-grid + .ph-wide { margin-top: 0; }

/* ---------- Footer: Cookie settings control ---------- */
.ftr-legal button.ul { font: inherit; color: inherit; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1279px) {
  .sg { grid-template-columns: 1fr 1.6fr; gap: 56px; }
  .def { grid-template-columns: 56px 200px minmax(0, 1fr); }
  .margin-grid { gap: 56px; }
  .step-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .step-grid { grid-template-columns: minmax(0, 1fr); }
  .margin-grid { grid-template-columns: 1fr; gap: 40px; }
  .margin-lg { max-width: 640px; }
}
@media (max-width: 809px) {
  .why-grid, .cols-2, .sg, .name-words, .team, .step-cols, .margin-grid { grid-template-columns: minmax(0, 1fr); }
  .sg { gap: 48px; }
  .def { grid-template-columns: 56px minmax(0, 1fr); gap: 8px 16px; }
  .def p { grid-column: 2; }
  .name-frame { padding: 72px var(--page-x); min-height: 0; }
  .name-in { align-items: flex-start; text-align: left; gap: 32px; }
  .ph-wide { aspect-ratio: 4 / 3; }
  .page-head .wrap { gap: 28px; }
  .disc .hero-in { padding-top: calc(var(--nav-h) + 24px); }
  .disc .hero-note { display: none; }
  .disc .hero-block { gap: 20px; }
  .disc .hero-tags { font-size: var(--fs-chip); }
  .choose .btn-row { flex-direction: column; align-items: flex-start; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .disc-media { transform: none !important; }
}