/* Meera Iyer: warm paper, ink, persimmon and forest green. Fraunces for headings, Manrope for text.
   Change the colours and fonts here; base.css reads these variables. */
:root {
  --bg: #F7F3EE;
  --surface: #FFFDF9;
  --soft: #EFE6DA;
  --ink: #1F1B16;
  --muted: #625A51;
  --line: #E2D8CB;
  --line-strong: #C9BCAB;
  --brand: #C7431F;
  --brand-hover: #A93719;
  --brand-ink: #FFFDF9;
  --brand-text: #B13B1A;
  --forest: #2E5E4E;
  --eyebrow: #2E5E4E;
  --ok: #2E7D5B;
  --head: "Fraunces", Georgia, serif;
  --body: "Manrope", system-ui, sans-serif;
  --radius: 10px;
  --radius-lg: 20px;
  --btn-radius: 999px;
  --wrap: 1200px;
  --gap: 26px;
  --est-bg: #2E5E4E;
  --est-ink: #FFFDF9;
}
h1, h2, h3 { font-weight: 600; letter-spacing: -.015em; font-variation-settings: "opsz" 120; }
h1 em, h2 em, .f-statement em { font-style: italic; color: var(--brand); font-weight: 500; }
.eyebrow { letter-spacing: .14em; }
.btn { font-weight: 700; }
.w-tags span { background: var(--soft); border-color: transparent; }

/* header */
.header { background: rgba(247,243,238,.92); backdrop-filter: blur(8px); }
.logo { display: grid; line-height: 1.05; text-decoration: none; }
.logo b { font: 600 1.45rem var(--head); }
.logo span { font-size: .78rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.nav a { font-weight: 600; color: var(--muted); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 8px; }

/* hero */
.hero { padding-block: clamp(36px, 6vw, 88px) clamp(48px, 7vw, 96px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 920px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.02; margin: 16px 0 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cmp-note { margin-top: 12px; font-size: .9rem; color: var(--muted); }

/* before/after */
.compare { position: relative; aspect-ratio: 640 / 440; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(31,27,22,.35); user-select: none; }
.cmp-layer { position: absolute; inset: 0; margin: 0; }
.cmp-layer svg { width: 100%; height: 100%; }
.cmp-after { clip-path: inset(0 0 0 var(--pos)); }
.cmp-layer figcaption { position: absolute; top: 14px; padding: 4px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cmp-before figcaption { left: 14px; background: #3B3B3B; color: #fff; }
.cmp-after figcaption { right: 14px; background: var(--brand); color: #fff; }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none; }
.cmp-handle::after { content: "⟷"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--ink); font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cmp-range:focus-visible + .cmp-handle, .compare:focus-within .cmp-handle::after { outline: 3px solid var(--brand); }

/* principles */
.principles { background: var(--forest); color: #F1EDE4; }
.principles .sec-title { color: #fff; }
.pr-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 32px; counter-reset: pr; }
.pr-list li { counter-increment: pr; display: grid; gap: 10px; }
.pr-list li::before { content: counter(pr); font: italic 500 3rem/1 var(--head); color: #F4B79F; }
.pr-list h3 { font-size: 1.4rem; color: #fff; }
.pr-list p { color: #D3DDD6; }

/* process page */
.pp { display: grid; gap: 24px; }
.pp-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .pp-tabs { grid-template-columns: minmax(0, 1fr); } }
.pp-tabs button { display: grid; gap: 2px; text-align: left; padding: 16px 18px; border-radius: var(--radius-lg); border: 1.5px solid var(--line-strong); background: var(--surface); font: 600 1.3rem var(--head); cursor: pointer; }
.pp-tabs button span { font: 500 .88rem var(--body); color: var(--muted); }
.pp-tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pp-tabs button[aria-selected="true"] span { color: #CFC6BA; }
.pp-panel { padding: clamp(20px, 3vw, 32px); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.pp-total { font-size: 1.1rem; margin-bottom: 18px; }
.pp-total b { font: 600 2.6rem/1 var(--head); color: var(--brand); margin-right: 6px; }
.pp-gantt { display: grid; gap: 8px; }
.pp-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: center; }
@media (max-width: 520px) { .pp-row { grid-template-columns: 96px minmax(0, 1fr); font-size: .9rem; } }
.pp-track { position: relative; height: 30px; border-radius: 8px; background: repeating-linear-gradient(90deg, var(--soft) 0 calc(var(--wk) - 2px), var(--bg) calc(var(--wk) - 2px) var(--wk)); }
.pp-bar { position: absolute; top: 0; bottom: 0; border-radius: 8px; display: flex; align-items: center; padding-inline: 10px; color: #fff; font-size: .78rem; font-weight: 700; white-space: nowrap; overflow: hidden; transition: left .35s, width .35s; }
.pp-phases { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px; margin-top: 28px; }
.pp-phases li { display: grid; gap: 6px; padding-top: 14px; border-top: 3px solid var(--c); }
.pp-phases h3 { font-size: 1.15rem; }
.pp-phases p { color: var(--muted); font-size: .95rem; }
.pp-phases ul { list-style: none; display: grid; gap: 4px; font-size: .9rem; }
.pp-phases ul li { padding: 0; border: 0; display: block; }
.pp-phases ul li::before { content: "✓ "; color: var(--forest); font-weight: 700; }
.needs { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.needs li { padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); font-weight: 600; }

/* inner pages */
.page-head { padding-bottom: clamp(24px, 3vw, 40px); }
.page-head h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
.process-band { background: var(--soft); }
.quotes li { background: var(--surface); }
.quotes blockquote p { font: 500 1.2rem/1.45 var(--head); }

/* CTA + footer */
.cta-band { padding-block: clamp(56px, 8vw, 104px); text-align: center; background: var(--soft); }
.cta-band h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 18ch; margin-inline: auto; }
.cta-band p { color: var(--muted); margin: 14px auto 0; max-width: 52ch; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.footer { background: var(--ink); color: #BDB4A8; --footer-line: rgba(255,255,255,.14); }
.f-statement { font: 500 clamp(2.2rem, 6vw, 4.2rem)/1.02 var(--head); color: #FFFDF9; margin-bottom: 48px; max-width: 16ch; }
.f-statement em { color: #F4B79F; }
.footer .logo b { color: #FFFDF9; }
.footer .logo span { color: #9E958A; }
.footer h2 { color: #FFFDF9; }
.f-about { margin-top: 12px; max-width: 34ch; }
.footer .credit a { color: #FFFDF9; }