/* ============================================================
   Well Known — client information pack
   Shared styles. Edit here, every client pack updates.
   Visual language matches the Well Known slide deck.
   ============================================================ */

@font-face {
  font-family: 'Super X';
  src: url('/assets/fonts/superx-extrabold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('/assets/fonts/InterTight-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Saans';
  src: url('/assets/fonts/saans-medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  --paper:  #F8F2EA;   /* page */
  --card:   #FCF8E7;   /* the pale yellow panels in the deck */
  --white:  #FFFFFF;
  --ink:    #0A0A0A;
  --ink-2:  #55504A;
  --ink-3:  #8A8279;
  --rule:   rgba(10, 10, 10, .14);
  --rule-soft: rgba(10, 10, 10, .08);
  --flame:  #FE3F00;
  --forest: #3F6D52;
  --amber:  #C67A00;

  --display: 'Super X', ui-sans-serif, system-ui, sans-serif;
  --body:    'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --label:   'Saans', ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }

p { margin: 0; }

/* ============ the sheet: one "slide" per section ============ */
.sheet {
  padding: clamp(46px, 7vw, 88px) 0;
  border-top: 1px solid var(--rule-soft);
}
.sheet:first-of-type { border-top: 0; }

.sheet-num {
  font-family: var(--label);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--ink-3);
  margin-bottom: clamp(26px, 4vw, 44px);
}

/* the short orange bar that sits above every heading */
.bar {
  width: 92px; height: 5px; background: var(--flame);
  margin-bottom: 22px;
}

h1, h2 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: .96;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 8vw, 5.4rem); }
h2 { font-size: clamp(2rem, 5vw, 3.2rem); }

.subline {
  font-size: clamp(1rem, 1.7vw, 1.15rem);
  color: var(--ink-2);
  margin-top: 16px;
  max-width: 58ch;
}

.sheet-body { margin-top: clamp(30px, 4.5vw, 52px); display: flex; flex-direction: column; gap: 22px; }

/* The italic statement that closes a sheet.
   Body face, not display: in Super X a capital I and a lowercase l are the
   same stroke, so a sentence like "A clinic with..." reads as gibberish.
   Display is kept for headings and numerals, where size carries it. */
.statement {
  font-family: var(--body);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.1rem, 2.3vw, 1.55rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  margin-top: clamp(26px, 4vw, 40px);
  padding-top: 26px;
  border-top: 5px solid var(--flame);
  border-image: none;
  max-width: 70ch;
}
.statement em { font-style: italic; color: var(--flame); }

.foot-note { font-family: var(--label); font-size: .78rem; color: var(--ink-3); line-height: 1.5; }

/* ============ cover ============ */
.cover { padding: clamp(40px, 6vw, 70px) 0 clamp(56px, 8vw, 100px); }
.cover .kicker { font-family: var(--label); font-size: .85rem; color: var(--ink-2); margin-top: 20px; }
.cover .date {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  letter-spacing: -.02em; margin-top: clamp(40px, 7vw, 90px);
}
.cover .who { font-size: 1.02rem; color: var(--ink-2); margin-top: 10px; }

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 26px; font-family: var(--label); font-size: .72rem;
  letter-spacing: .1em; color: var(--ink-3);
}
/* The wordmark is cream letters with a black extrude, so it reads on the
   cream page by its shadow. Height, not width, controls its size. */
.wordmark { display: block; height: 22px; width: auto; }

.topbar-left { display: inline-flex; align-items: center; gap: 18px; }

/* Small, quiet, and only assertive on hover: the rule wipes in from the left
   and the arrow steps out, so it reads as a live link without shouting over
   the page number beside it. */
.sitelink {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ink-2); text-decoration: none;
  letter-spacing: .06em;
}
.sitelink svg {
  width: 9px; height: 9px;
  transition: transform .18s ease;
}
.sitelink::after {
  content: ""; position: absolute; left: 0; right: 12px; bottom: -4px;
  height: 1.5px; background: var(--flame);
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.sitelink:hover { color: var(--flame); }
.sitelink:hover::after { transform: scaleX(1); }
.sitelink:hover svg { transform: translate(1.5px, -1.5px); }
.sitelink:focus-visible { outline: 2px solid var(--flame); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .sitelink svg, .sitelink::after { transition: none; }
  .sitelink:hover svg { transform: none; }
}

/* The W anchors the bottom-right of the cover, part-bleeding off the page
   the way it does on the deck. Sits behind the type. */
.cover { position: relative; overflow: hidden; }
.cover-w {
  position: absolute;
  right: clamp(-40px, -3vw, -10px);
  bottom: clamp(-56px, -5vw, -20px);
  width: clamp(150px, 26vw, 300px);
  height: auto;
  pointer-events: none;
  z-index: 0;
}
.cover > *:not(.cover-w) { position: relative; z-index: 1; }

/* ============ cards ============ */
.card { background: var(--card); padding: clamp(22px, 3vw, 32px); }

.grid-2 { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; }
@media (min-width: 680px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 680px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* big sourced stat */
.stat b {
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.8rem, 6.4vw, 4.2rem); line-height: .92;
  letter-spacing: -.03em; color: var(--flame);
  font-variant-numeric: tabular-nums;
}
.stat b .dim { color: var(--ink); }
.stat .say { font-weight: 600; font-size: 1.05rem; margin-top: 18px; }
.stat .src { font-family: var(--label); font-size: .76rem; color: var(--ink-3); margin-top: 10px; line-height: 1.5; }

/* numbered card (services) */
.numcard .n {
  font-family: var(--label); font-size: .74rem; font-weight: 500;
  color: var(--flame); letter-spacing: .08em;
}
/* Body face — these are sentences, and the display face can't distinguish
   a lowercase l from a capital I. */
.numcard .t {
  font-family: var(--body); font-weight: 700; font-size: 1.16rem;
  line-height: 1.32; letter-spacing: -.005em; margin-top: 14px;
}
/* The plain-English line under a service title. */
.numcard .d {
  font-family: var(--body); font-size: .93rem; line-height: 1.45;
  color: var(--ink-2); margin-top: 10px;
}

/* Ads: the optional add-on line under the six deliverables. Deliberately not a
   card — a strip, so it reads as "and also", not a seventh equal thing. */
.ads-line {
  display: flex; gap: 16px; align-items: baseline;
  margin-top: 16px; padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.ads-tag {
  flex: none;
  font-family: var(--label); font-size: .72rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--flame);
  padding-top: 3px;
}
.ads-line p { font-size: .95rem; line-height: 1.5; color: var(--ink-2); max-width: 62ch; }

/* 90-day plan card */
.plan-card { display: flex; flex-direction: column; }
.plan-card .when {
  font-family: var(--label); font-size: .74rem; font-weight: 500;
  color: var(--flame); letter-spacing: .08em;
}
.plan-card .head {
  font-family: var(--body); font-weight: 700; font-size: 1.16rem;
  line-height: 1.25; letter-spacing: -.005em; margin-top: 12px;
}
.plan-card ul {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.plan-card li {
  position: relative; padding-left: 18px;
  font-size: .93rem; line-height: 1.4; color: var(--ink-2);
}
.plan-card li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--flame);
}

/* numbered rows (how we work) */
.rows { display: flex; flex-direction: column; }
.rows .row {
  display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 16px;
  align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--rule-soft);
}
.rows .row:first-child { border-top: 1px solid var(--rule-soft); }
.rows .n { font-family: var(--label); font-size: .74rem; color: var(--flame); letter-spacing: .08em; }
.rows .t { font-size: clamp(1.05rem, 2vw, 1.3rem); }

/* quote */
.quote { background: var(--card); padding: clamp(24px, 3.4vw, 38px); display: flex; gap: 20px; align-items: flex-start; }
.quote .mark { font-family: var(--display); font-weight: 800; font-size: 2rem; color: var(--flame); line-height: .7; flex: none; }
.quote p { font-size: 1.05rem; max-width: 76ch; }

/* ============ the map grid ============ */
.map-block { display: grid; grid-template-columns: minmax(0,1fr); gap: 30px; align-items: center; }
@media (min-width: 760px) { .map-block { grid-template-columns: auto minmax(0,1fr); gap: 48px; } }

.pin-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
@media (min-width: 760px) { .pin-grid { width: 340px; } }
.pin {
  aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--label); font-size: .78rem; color: #fff;
  font-variant-numeric: tabular-nums;
}
.pin[data-b="top"]  { background: var(--forest); }
.pin[data-b="mid"]  { background: var(--amber); }
.pin[data-b="low"]  { background: var(--flame); }
.pin[data-b="none"] { background: transparent; border: 1.5px dashed var(--rule); color: var(--ink-3); }

.big {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(3.4rem, 9vw, 5rem); line-height: .86;
  letter-spacing: -.03em; color: var(--flame); font-variant-numeric: tabular-nums;
}
.big-cap { font-size: 1.05rem; color: var(--ink-2); margin-top: 12px; max-width: 30ch; }

.legend { display: flex; flex-direction: column; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.legend li { display: flex; align-items: baseline; gap: 11px; font-size: .93rem; color: var(--ink-2); }
.swatch { width: 11px; height: 11px; border-radius: 50%; flex: none; translate: 0 1px; }
.legend b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ============ the real map (packs with scan.map) ============ */
.geo-map-card {
  margin-top: 26px; position: relative; overflow: hidden;
  border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: 0 0 24px rgba(0, 0, 0, .08);
}
.geo-map { height: clamp(380px, 56vw, 560px); background: var(--card); }
.geo-legend {
  position: absolute; left: 14px; bottom: 14px; z-index: 2; margin: 0;
  background: rgba(255, 255, 255, .94); border: 1px solid var(--rule);
  border-radius: 8px; padding: 12px 14px; gap: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.geo-legend li { font-size: .82rem; }

/* rank pins: colour carries the band, the number keeps the granularity,
   and a white ring lifts each pin off the greyscale basemap. */
.geo-pin {
  display: grid; place-items: center; border-radius: 50%; color: #fff;
  font-family: var(--label); font-weight: 700; font-size: 12px;
  font-variant-numeric: tabular-nums;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); cursor: pointer;
}
.geo-pin-top3 { width: 36px; height: 36px; background: var(--forest); box-shadow: 0 0 0 4px rgba(63, 109, 82, .22), 0 1px 4px rgba(0, 0, 0, .4); }
.geo-pin-close { width: 30px; height: 30px; background: var(--amber); }
.geo-pin-buried { width: 30px; height: 30px; background: var(--flame); }
.geo-pin-missing { width: 13px; height: 13px; background: rgba(120, 120, 120, .28); border: 1.5px dashed #6f6f6f; box-shadow: none; }

.geo-you { position: relative; width: 30px; height: 40px; cursor: pointer; }
.geo-you svg { display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.geo-you span {
  position: absolute; top: 4px; left: 0; right: 0; text-align: center;
  color: #fff; font-family: var(--label); font-weight: 700; font-size: 9px; letter-spacing: .04em;
}
.maplibregl-popup-content { font-family: var(--body); font-size: .9rem; padding: 8px 12px; border-radius: 6px; }

/* ============ tables ============ */
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 440px; font-size: 1rem; }
th, td { text-align: left; padding: 16px 18px; border: 1px solid var(--ink); }
th {
  font-family: var(--label); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2); font-weight: 500;
}
td { font-style: italic; }
td.val { font-style: normal; font-family: var(--display); font-weight: 800; letter-spacing: -.01em; }
td.val[data-s="bad"]  { color: var(--flame); }
td.val[data-s="mid"]  { color: var(--amber); }
td.val[data-s="good"] { color: var(--forest); }
tr[data-you] td { background: var(--card); }

/* plain competitor table variant */
.plain table { min-width: 480px; }
.plain th, .plain td { border: 0; border-bottom: 1px solid var(--rule-soft); padding: 13px 16px 13px 0; font-style: normal; }
.plain th { border-bottom: 1px solid var(--ink); }
.plain td.num { font-variant-numeric: tabular-nums; width: 1%; white-space: nowrap; }

/* ============ pricing ============ */
.price b {
  display: block; font-family: var(--display); font-weight: 800; font-style: italic;
  font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; letter-spacing: -.03em; color: var(--flame);
}
.price .lab { font-family: var(--label); font-size: .82rem; color: var(--ink); font-weight: 500; margin-bottom: 18px; }
.price .unit { font-family: var(--body); font-weight: 700; font-size: clamp(1rem, 1.8vw, 1.25rem); font-style: italic; }

/* ============ close ============ */
.close {
  background: var(--flame); color: #FFFAEE;
  padding: clamp(28px, 4.5vw, 44px);
  display: flex; flex-wrap: wrap; gap: 14px 36px; align-items: baseline;
}
.close b { font-family: var(--body); font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 1.7rem); letter-spacing: -.01em; }
.close a { color: #FFFAEE; font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 5px; white-space: nowrap; }
.close a:focus-visible { outline: 2px solid #FFFAEE; outline-offset: 4px; }

.method {
  padding: clamp(30px, 4vw, 48px) 0 80px;
  font-family: var(--label); font-size: .76rem; color: var(--ink-3);
  line-height: 1.6; max-width: 84ch;
}

/* ============ the demo build (section 03) ============ */
/* Reads as the thing to click, not a footnote — it's the one place in the
   pack where the client can go and see the work for themselves. */
.demo-link {
  /* The sheet body is a flex column, so without this the link stretches the
     full measure and stops reading as a button. */
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 22px;
  background: var(--ink); color: #FFFAEE;
  text-decoration: none;
  font-weight: 600; font-size: clamp(.95rem, 1.8vw, 1.08rem);
  transition: background .18s ease;
}
.demo-link svg { width: 13px; height: 13px; flex: none; transition: transform .18s ease; }
.demo-link:hover { background: var(--flame); }
.demo-link:hover svg { transform: translate(2px, -2px); }
.demo-link:focus-visible { outline: 3px solid var(--flame); outline-offset: 3px; }
.demo-label { word-break: break-word; }

/* Tighter than the sourced stat cards in section 04 — these are four short
   figures read across, not four claims read down. */
.stat.compact b { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.stat.compact .say {
  font-family: var(--label); font-size: .82rem; font-weight: 500;
  color: var(--ink-3); margin-top: 10px; line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .demo-link, .demo-link svg { transition: none; }
  .demo-link:hover svg { transform: none; }
}

/* ============ inline booker ============ */
/* Calendly injects its own iframe, so this only owns the frame around it. */
.booker { margin-top: clamp(30px, 4vw, 44px); }
.booker-head {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem); letter-spacing: -.02em;
  margin-bottom: 18px;
}
.booker .calendly-inline-widget {
  background: var(--card);
  border: 1px solid var(--rule-soft);
}

/* ============ FAQ ============ */
/* Native <details>, so it collapses without any JavaScript and keeps the
   page short until someone actually wants the answer. */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule-soft); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 22px 46px 22px 0; position: relative;
  font-size: clamp(1.02rem, 1.9vw, 1.2rem); font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 15px; height: 3px; background: var(--flame); translate: 0 -50%;
}
.faq summary::before {
  content: ""; position: absolute; right: 12px; top: 50%;
  width: 3px; height: 15px; background: var(--flame); translate: 0 -50%;
  transition: opacity .18s ease;
}
.faq details[open] summary::before { opacity: 0; }
.faq summary:focus-visible { outline: 3px solid var(--flame); outline-offset: -3px; }
.faq .a { padding: 0 clamp(40px, 8vw, 90px) 24px 0; color: var(--ink-2); max-width: 78ch; }
.faq .a strong { color: var(--ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .faq summary::before { transition: none; }
}

/* index page */
.list { display: flex; flex-direction: column; margin-top: 34px; }
.list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 20px 0; border-bottom: 1px solid var(--rule-soft);
  color: var(--ink); text-decoration: none; font-size: 1.1rem; font-weight: 600;
}
.list a:hover { color: var(--flame); }
.list a span { font-family: var(--label); font-size: .76rem; letter-spacing: .1em; color: var(--ink-3); white-space: nowrap; font-weight: 500; }