/* ════════════════════════════════════════════════════════════════
   TRUE NORTH IT — pages.css
   New home sections (how-it-works · client voice · rules) +
   subpage components (page hero, service sections, tiers, timeline,
   contact, business-it groups). Extends main.css tokens.
   ════════════════════════════════════════════════════════════════ */

/* ───────── HOME · how it works ───────── */
.scene-hiw { padding-block: clamp(110px, 15vh, 190px); background: var(--vellum); }
.hiw-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(22px, 3vw, 40px);
  margin-top: clamp(28px, 4vh, 48px);
}
.hiw-step { position: relative; padding-top: 18px; border-top: 1px solid var(--line-paper); }
.hiw-n {
  display: block; font-size: clamp(40px, 4vw, 60px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(19, 29, 44, 0.3);
  margin-bottom: 14px;
}
.hiw-step h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; }
.hiw-step p { font-size: 14.5px; color: var(--mute-paper); }
.hiw-close {
  display: flex; align-items: center;
  margin-top: clamp(36px, 5vh, 56px); padding-top: 26px;
  border-top: 1px solid var(--line-paper);
  font-weight: 600; font-size: 16.5px;
}

/* ───────── HOME · client voice ───────── */
.scene-voice {
  padding-block: clamp(90px, 12vh, 150px);
  background: var(--ink);
}
.voice-wrap { max-width: 900px; }
.voice-quote {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(22px, 2.6vw, 34px); line-height: 1.22; letter-spacing: -0.008em;
  margin-bottom: 26px;
}
.voice-quote::before { content: ""; }
.voice-attr { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; color: var(--mute-night); }
.voice-attr strong { color: var(--phos); font-weight: 600; }

/* ───────── HOME · the rules ───────── */
.scene-rules {
  padding-block: clamp(100px, 13vh, 170px);
  background: linear-gradient(180deg, var(--ink), var(--abyss) 55%, var(--ink));
}
.rules-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(28px, 4vh, 48px);
}
.rule-tile {
  border: 1px solid var(--line-night); border-radius: var(--r-card);
  padding: clamp(22px, 2.6vw, 32px);
  background: rgba(234, 240, 248, 0.02);
  position: relative;
}
.rule-tile::before {
  content: ""; position: absolute; left: 0; top: 22px; bottom: 22px;
  width: 2px; background: linear-gradient(180deg, var(--phos), transparent);
}
.rule-tile h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.01em; }
.rule-tile p { font-size: 14px; color: var(--mute-night); }

/* ───────── SUBPAGE · compact hero ───────── */
.page-hero {
  position: relative;
  padding: clamp(150px, 20vh, 220px) 0 clamp(64px, 9vh, 110px);
  background:
    radial-gradient(110% 130% at 82% -10%, var(--pine) 0%, transparent 55%),
    linear-gradient(180deg, var(--abyss), var(--ink));
  overflow: clip;
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(38px, 5.6vw, 76px); margin-bottom: 24px; max-width: 16ch; }
.page-hero .lead { color: var(--mute-night); margin-bottom: 34px; }
.page-hero .cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.ph-mark {
  position: absolute; right: calc(var(--gut) * -1); top: 50%; transform: translateY(-42%);
  width: clamp(280px, 30vw, 460px); opacity: 0.08; color: var(--text-night); pointer-events: none;
}
.ph-mark svg { width: 100%; height: auto; }

/* ───────── SUBPAGE · generic sections ───────── */
.page-section { padding-block: clamp(90px, 12vh, 150px); }
.page-section.tight { padding-block: clamp(64px, 8vh, 100px); }
.sec-h2 { font-size: clamp(30px, 3.8vw, 50px); margin-bottom: 22px; }
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.muted-p { color: var(--mute-paper); }
.theme-night .muted-p { color: var(--mute-night); }

/* numbered step list (services · discovery) */
.step-list { display: grid; gap: 22px; margin-block: 30px; }
.step-item { display: flex; gap: 18px; align-items: flex-start; }
.step-item .sn {
  font-family: var(--mono); font-weight: 600; font-size: 12px;
  color: var(--phos-deep); border: 1px solid var(--line-paper); border-radius: 50%;
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
}
.step-item h4 { font-size: 16.5px; font-weight: 700; margin-bottom: 4px; }
.step-item p { font-size: 15px; color: var(--mute-paper); }

/* example / feature list */
.x-list { list-style: none; display: grid; gap: 12px; margin-block: 26px; }
.x-list li { position: relative; padding-left: 26px; font-size: 15.5px; color: var(--mute-paper); }
.x-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 8px; height: 8px; background: var(--phos); transform: rotate(45deg);
}
.theme-night .x-list li { color: var(--mute-night); }

/* callout band inside a page */
.callout {
  border: 1px solid var(--line-paper); border-radius: var(--r-card);
  background: var(--vellum);
  padding: clamp(26px, 3.4vw, 44px);
  margin-top: clamp(30px, 4vh, 48px);
}
.callout h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 700; margin-bottom: 12px; letter-spacing: -0.01em; }
.callout p { color: var(--mute-paper); max-width: 62ch; }
.callout .btn, .callout .tlink { margin-top: 20px; }

/* ───────── SERVICES · tier cards ───────── */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); margin-block: 34px 10px; }
.tier-card {
  border: 1px solid var(--line-paper); border-radius: var(--r-card);
  background: var(--vellum); padding: clamp(24px, 2.8vw, 36px);
  display: flex; flex-direction: column; gap: 12px;
}
.tier-card .tk { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--phos-deep); }
.tier-card h4 { font-family: var(--display); font-weight: 900; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.01em; }
.tier-card p { font-size: 14.5px; color: var(--mute-paper); }
.tier-note { font-size: 15px; font-weight: 500; margin-top: 18px; max-width: 62ch; }

/* ───────── ABOUT · timeline ───────── */
.timeline { position: relative; display: grid; gap: clamp(30px, 4vh, 44px); margin-top: 40px; padding-left: 34px; }
.timeline::before {
  content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px;
  background: repeating-linear-gradient(180deg, var(--line-paper) 0 5px, transparent 5px 10px);
}
.tl-item { position: relative; }
.tl-item::before {
  content: ""; position: absolute; left: -34px; top: 7px;
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid var(--phos-deep); background: var(--paper);
}
.tl-item.now::before { background: var(--phos); box-shadow: 0 0 0 5px var(--phos-dim); }
.tl-when { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--phos-deep); margin-bottom: 6px; }
.tl-item h4 { font-size: 18px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; }
.tl-item p { font-size: 15px; color: var(--mute-paper); max-width: 62ch; }

/* portrait slot */
.portrait-slot {
  border: 1px dashed var(--line-paper); border-radius: var(--r-card);
  aspect-ratio: 4/5; display: grid; place-items: center;
  color: var(--mute-paper); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  background: var(--vellum); text-align: center; padding: 20px;
}

/* ───────── CONTACT ───────── */
.contact-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
.form-card {
  border: 1px solid var(--line-paper); border-radius: var(--r-card);
  background: var(--vellum); padding: clamp(26px, 3vw, 40px);
}
.form-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.f-row { display: grid; gap: 6px; margin-bottom: 18px; }
.f-row label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute-paper); }
.f-row input, .f-row select, .f-row textarea {
  font: inherit; color: var(--ink-paper);
  background: #fff; border: 1px solid var(--line-paper); border-radius: 9px;
  padding: 13px 14px; width: 100%;
}
.f-row textarea { min-height: 130px; resize: vertical; }
.f-row input:focus, .f-row select:focus, .f-row textarea:focus { outline: 2px solid var(--phos); outline-offset: 1px; border-color: transparent; }
.form-note { font-size: 13px; color: var(--mute-paper); margin-top: 14px; }
.direct-card { display: grid; gap: 10px; font-size: 15.5px; }
.direct-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.direct-card a { color: var(--phos-deep); font-weight: 600; }
.direct-card .dl { color: var(--mute-paper); }
.book-band {
  background: var(--vellum); border-block: 1px solid var(--line-paper);
  padding-block: clamp(70px, 9vh, 110px);
}

/* ───────── BUSINESS-IT · tools strip ───────── */
.tools-strip {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(18px, 3vw, 40px);
  margin-top: clamp(28px, 4vh, 44px);
  padding: clamp(18px, 2.4vh, 26px) clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--line-paper); border-radius: var(--r-card);
  background: var(--paper);
}
.tool-chip { display: flex; align-items: center; gap: 12px; }
.tool-chip svg { width: 30px; height: 30px; flex: none; }
.tool-chip span {
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap;
}
.tools-note {
  margin-top: 10px; font-size: 11.5px; color: var(--mute-paper); opacity: 0.75;
}

/* ───────── BUSINESS-IT · service groups ───────── */
.group-label {
  font-family: var(--mono); font-weight: 600; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--phos-deep);
  display: flex; align-items: center; gap: 14px;
  margin: clamp(36px, 5vh, 54px) 0 20px;
}
.group-label::after { content: ""; flex: 1; height: 1px; background: var(--line-paper); }
.svc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.svc-card {
  border: 1px solid var(--line-paper); border-radius: var(--r-card);
  background: var(--vellum); padding: clamp(22px, 2.4vw, 30px);
}
.svc-card h4 { font-size: 16.5px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
.svc-card p { font-size: 14px; color: var(--mute-paper); }
.bridge-block {
  margin-top: clamp(40px, 6vh, 64px);
  border-radius: var(--r-card);
  background: var(--pine); color: var(--text-night);
  padding: clamp(30px, 4vw, 52px);
}
.bridge-block h3 { font-family: var(--display); font-weight: 900; font-size: clamp(22px, 2.6vw, 32px); margin-bottom: 12px; letter-spacing: -0.01em; }
.bridge-block p { color: var(--mute-night); max-width: 62ch; }
.bridge-block .btn { margin-top: 22px; }

/* proof row (business-it / about) */
.proof-row {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em;
  color: var(--mute-paper); margin-top: 18px; line-height: 2;
}

/* ───────── responsive ───────── */
@media (max-width: 980px) {
  .hiw-grid, .rules-grid { grid-template-columns: 1fr 1fr; }
  .tier-grid, .svc-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  .split-2, .contact-grid { grid-template-columns: 1fr; }
  .ph-mark { display: none; }
}
@media (max-width: 620px) {
  .hiw-grid, .rules-grid, .tier-grid, .svc-cards { grid-template-columns: 1fr; }
}

/* anchor jumps clear the fixed header */
[id] { scroll-margin-top: 100px; }