/* =============================================================
   RISE & OWN — Web layer
   Website-specific components built on tokens.css.
   Import order:  tokens.css  →  web.css
   ---------------------------------------------------------------
   The core token file (tokens.css) is deck/proposal-oriented.
   This layer adds the patterns a marketing site needs — nav,
   hero, sections, footer, buttons, cards — while obeying every
   house rule: Georgia throughout, black-dominant, amber as a
   hairline accent only, sharp corners, generous whitespace.
   ============================================================= */

@import url("tokens.css");

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--fg-2);
  background: var(--bg-1);          /* dark by default */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga", "kern", "onum";
}

img { max-width: 100%; display: block; }

/* Global link default so nothing renders browser-blue. */
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

/* -------------------------------------------------------------
   LAYOUT — sections & container
   Sections alternate dark ↔ light by adding .ro-light.
   ------------------------------------------------------------- */
.section {
  padding: var(--sp-10) var(--page-gutter);
  background: var(--bg-1);
  color: var(--fg-2);
}
.section--light { /* convenience: pair with class="section section--light ro-light" */ }

.container {
  max-width: var(--page-max);       /* 1280px */
  margin: 0 auto;
}
.measure { max-width: 680px; }       /* reading column */
.measure-center { max-width: 680px; margin-inline: auto; text-align: center; }

/* Eyebrow / eyeline label — amber, uppercase, letter-spaced. */
.eyebrow {
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: var(--sp-4);
}

/* Amber signature rule — max once per section. */
.rule-amber { width: 72px; height: 4px; background: var(--accent); border: 0; }
.rule-hair  { border: 0; border-top: 1px solid var(--rule); }

/* -------------------------------------------------------------
   NAVBAR — dark, wordmark left, links right.
   Sits over the dark hero; no shadow, hairline underline only.
   ------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--page-gutter);
  background: var(--ro-black);
  border-bottom: 1px solid var(--rule);
}
.nav__brand img { height: 34px; width: auto; }   /* logo-dark-transparent.png */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
  list-style: none;
}
.nav__links a {
  font-size: var(--fs-body-s);
  color: var(--fg-2);
  letter-spacing: 0.01em;
  transition: color var(--dur-base) var(--ease-standard);
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--accent); }

/* -------------------------------------------------------------
   HERO — dark, two-line strapline, display type, amber rule.
   .hero--banner is the shorter interior-page variant (Approach).
   ------------------------------------------------------------- */
.hero {
  background: var(--ro-black);
  color: var(--ro-white);
  padding: var(--sp-10) var(--page-gutter);
  min-height: 78vh;
  display: flex;
  align-items: center;
}
.hero--banner { min-height: 52vh; padding-block: var(--sp-9); }

.hero__inner { max-width: var(--page-max); margin: 0 auto; width: 100%; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-l);           /* 72px; scales down below */
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--ro-white);
  max-width: 15ch;
  text-wrap: balance;
}
.hero__title em { font-style: italic; font-weight: 400; }

.hero__sub {
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.45;
  color: #CFCFCF;
  max-width: 52ch;
  margin-top: var(--sp-5);
}
.hero .rule-amber { margin: var(--sp-6) 0 0; }

/* -------------------------------------------------------------
   TYPE HELPERS (web-scaled)
   ------------------------------------------------------------- */
.h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1);
      line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--fg-1); }
.h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2);
      line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--fg-1); }
.h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3);
      line-height: var(--lh-snug); color: var(--fg-1); }
.lede { font-style: italic; font-size: var(--fs-h3); line-height: 1.5; color: var(--fg-2); }
.body { font-size: var(--fs-body-l); line-height: var(--lh-body); color: var(--fg-2);
        text-wrap: pretty; }
.body + .body { margin-top: var(--sp-4); }
.mute { color: var(--fg-3); }

/* Positioning statement — big centred serif line. */
.statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display-m);           /* 52px */
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  max-width: 20ch;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}
.statement em { font-style: italic; font-weight: 400; }

/* -------------------------------------------------------------
   THREE-TERM STRIP — three short values, hairline dividers.
   ------------------------------------------------------------- */
.terms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.terms__item { padding: var(--sp-7) var(--sp-6); }
.terms__item + .terms__item { border-left: 1px solid var(--rule); }
.terms__item .num {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
}
.terms__item .term-title { font-family: var(--font-display); font-size: var(--fs-h3);
  color: var(--fg-1); margin: var(--sp-3) 0 var(--sp-2); }
.terms__item .term-body { font-size: var(--fs-body); color: var(--fg-3); }

/* -------------------------------------------------------------
   BULLET LIST — editorial en-dash marker (never a glyph bullet).
   ------------------------------------------------------------- */
.ro-list { list-style: none; padding: 0; margin: var(--sp-4) 0 0; }
.ro-list li {
  position: relative;
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.ro-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 12px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* -------------------------------------------------------------
   BUTTONS — primary (amber, rare), secondary (outline), text.
   14px, weight 600, +0.04em, sharp 2px corners.
   ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 14px 22px;
  border-radius: var(--r-1);
  border: 0;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn--primary { background: var(--accent); color: var(--ro-black); }
.btn--primary:hover { background: var(--accent-deep); color: var(--ro-black); }

.btn--secondary {
  background: transparent;
  color: var(--fg-1);
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.ro-light .btn--secondary { color: var(--fg-1); border-color: rgba(0,0,0,0.4); }
.btn--secondary:hover { border-color: var(--accent); color: var(--accent); }

.btn--text {
  padding: 4px 0;
  background: transparent;
  color: var(--fg-1);
  border: 0;
  border-bottom: 1px solid var(--accent);
  border-radius: 0;
}
.btn--text:hover { color: var(--accent); }

/* -------------------------------------------------------------
   "LED BY EXPERIENCE" BLOCK — subhead + bullets + headshot.
   ------------------------------------------------------------- */
.founder {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--sp-9);
  align-items: center;
}
.founder__photo {
  aspect-ratio: 4 / 5;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  object-fit: cover;
  width: 100%;
  filter: grayscale(1) contrast(1.05);      /* B&W portrait direction */
}

/* -------------------------------------------------------------
   CLIENT CARDS — flat, hairline, anonymised property references.
   ------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}
.card {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  padding: var(--sp-7);
}
.ro-light .card { background: var(--bg-2); }
.card__eyebrow {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: var(--sp-4);
}
.card__title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--fg-1);
  margin-bottom: var(--sp-3); }
.card__body { font-size: var(--fs-body); color: var(--fg-3); }

/* -------------------------------------------------------------
   TESTIMONIAL — editorial pull-quote.
   ------------------------------------------------------------- */
.quote {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
.quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 1.3;
  color: var(--fg-1);
  text-wrap: balance;
}
.quote figcaption {
  margin-top: var(--sp-6);
  font-size: var(--fs-body-s);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-4);
}

/* -------------------------------------------------------------
   ALTERNATING IMAGE / TEXT BLOCKS (Approach: Discover/Build/Run).
   Add .split--reverse to flip image to the right.
   ------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9);
  align-items: center;
}
.split + .split { margin-top: var(--sp-10); }
.split--reverse .split__media { order: 2; }
.split__media {
  aspect-ratio: 4 / 3;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  filter: grayscale(1) contrast(1.05);
  width: 100%;
}
.split__gate {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  font-style: italic;
  color: var(--fg-3);
}
.split__gate strong { font-style: normal; color: var(--accent); font-weight: 600; }

/* -------------------------------------------------------------
   FOOTER — dark "Work With Us", mailto CTA, logomark.
   ------------------------------------------------------------- */
.footer {
  background: var(--ro-black);
  color: var(--ro-white);
  padding: var(--sp-10) var(--page-gutter) var(--sp-7);
}
.footer__inner { max-width: var(--page-max); margin: 0 auto; }
.footer__cta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-m);
  line-height: 1.1;
  letter-spacing: var(--ls-display);
  color: var(--ro-white);
  max-width: 16ch;
  text-wrap: balance;
}
.footer__cta .amber { color: var(--accent); }
.footer__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-top: var(--sp-9);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.footer__mark img { height: 40px; width: auto; }   /* logomark-dark-transparent.png */

/* -------------------------------------------------------------
   RESPONSIVE — single set of sensible breakpoints.
   Georgia holds up small; reduce display sizes, stack grids.
   ------------------------------------------------------------- */
@media (max-width: 900px) {
  .section { padding: var(--sp-9) var(--page-gutter); }
  .founder, .split, .split--reverse .split__media { grid-template-columns: 1fr; order: 0; }
  .terms { grid-template-columns: 1fr; }
  .terms__item + .terms__item { border-left: 0; border-top: 1px solid var(--rule); }
  .cards { grid-template-columns: 1fr; }
  .founder__photo { max-width: 360px; }
}

@media (max-width: 640px) {
  :root {
    --page-gutter: 24px;
    --fs-display-l: 3rem;      /* 48px hero */
    --fs-display-m: 2.25rem;   /* 36px statement/footer cta */
    --fs-h1: 1.875rem;
  }
  .nav__links { gap: var(--sp-5); }
  .hero { min-height: 70vh; }
  .quote blockquote { font-size: var(--fs-h2); }
}

/* =============================================================
   SITE ADDITIONS — locked homepage V1.1 (18 Jul 2026)
   Minimal, additive extensions to the shared component layer for
   the four places the locked copy asks the deck system to flex.
   Nothing above this line is modified.
   ============================================================= */

/* Hero strapline: widen the measure so the two authored lines break
   as written rather than forcing extra wraps at the 15ch deck default. */
.hero__title { max-width: 22ch; }

/* Positioning statement: longer than the deck's short statement default,
   and left-aligned on the homepage (not centred). Widen the measure so it
   settles into a few balanced lines. */
.statement--wide { max-width: 34ch; }
.statement--left { text-align: left; margin-inline: 0; }

/* Three-term strip as three bare value phrases — no number, no body.
   Amber hairline top and bottom; column dividers made clearly visible. */
.terms--values { border-top-color: var(--accent); border-bottom-color: var(--accent); }
.terms--values .terms__item { text-align: center; padding-block: var(--sp-8); }
.terms--values .terms__item + .terms__item { border-left-color: var(--rule-strong); }
.terms--values .term-title { margin: 0; }

/* Led-by-experience with no headshot yet: full-width single column, capped
   at a comfortable reading measure. (Re-add the photo column when the real
   B&W headshot lands — the .founder grid handles it.) */
.founder--textonly { display: block; }
.founder--textonly > div { max-width: 820px; }

/* Founder photo placeholder styling — retained for when the headshot returns. */
.founder__photo { position: relative; }
.founder__photo::after {
  content: "Placeholder\A B&W portrait · 4:5";
  white-space: pre-line;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-4);
}

/* Footer strapline slot — sits between the heading and the CTA button. */
.footer__strap {
  margin-top: var(--sp-4);
  font-style: italic;
  font-size: var(--fs-h4);
  color: #CFCFCF;
  max-width: 40ch;
}

/* Even, tightened vertical rhythm. Sections step down from 128px to 96px;
   the footer loses its heavy 128px top band so the page ends cleanly. */
.section { padding-block: var(--sp-9); }
.footer  { padding-block: var(--sp-8) var(--sp-7); }