/* ============================================================
   STYLES — components consume tokens only. No magic numbers.
   V4 deltas (over V3):
   1. Serif accent generalised + optically sized for Baskerville.
   2. .project__chip (colour square) → .project__mark (client logo).
   3. #mentors + #testimonials → ONE .creds section (claim + proof).
   4. Footer Fellini line set in the serif italic.
   ============================================================ */

/* --- Reset / base --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-regular);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--accent-fg);
  padding: var(--space-12) var(--space-16); z-index: 100; border-radius: 0 0 var(--radius-card) 0;
}
.skip-link:focus { left: 0; }

/* --- Layout primitives --- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--space-section); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-48); align-items: start; }
.stack-24 { display: flex; flex-direction: column; gap: var(--space-24); }
.measure { max-width: 62ch; }
.muted { color: var(--fg-muted); }

/* --- Type helpers --- */
.eyebrow {
  font-size: var(--fs-caption); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); font-weight: var(--weight-medium);
  color: var(--fg-muted);
}
.display-lg { font-size: var(--fs-display-lg); line-height: var(--lh-display); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); }
.display    { font-size: var(--fs-display);    line-height: var(--lh-display); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); }
.display-sm { font-size: var(--fs-display-sm); line-height: var(--lh-heading); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: var(--weight-medium); }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: var(--weight-medium); }
.lead { font-size: var(--fs-lead); line-height: 1.35; }

/* --- Serif accent (the one editorial moment) ---
   In a monochrome system, type contrast IS the colour (Lupton). The
   accent now sets in Libre Baskerville italic. Baskerville renders
   optically larger and heavier than Cabinet Grotesk at the same em,
   so accent words are pulled back to ~0.92em and the grotesk's
   negative tracking is reset to 0. One rule, every accent. */
.hero__headline em,
.creds__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: 0.92em;
  letter-spacing: 0;
}

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: 48px; padding: 14px 24px; border-radius: var(--radius-pill);
  font-size: var(--fs-small); font-weight: var(--weight-medium);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translate(3px, -3px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); }
.btn--secondary { background: transparent; color: var(--fg); border-color: var(--border); }
.btn--secondary:hover { border-color: var(--fg); }

/* --- Top bar (Marco-style meta header) --- */
.topbar { padding-block: clamp(28px, 4vw, 48px); }
.topbar__inner { display: flex; justify-content: space-between; gap: var(--space-32); }
.topbar__col { display: flex; flex-direction: column; gap: var(--space-4); }
.topbar__col:last-child { text-align: right; align-items: flex-end; }
.topbar__label { font-size: var(--fs-body); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.topbar__sub { font-size: var(--fs-body); color: var(--fg-muted); }
a.topbar__sub:hover, a.topbar__label:hover { color: var(--fg); }

/* --- Hero --- */
.hero {
  padding-top: clamp(48px, 9vw, 128px);
  /* V4.2: was var(--space-section) (up to 160px). Cut so the hero stops
     reserving a whole section below itself and the first project peeks above
     the fold to tease continuation. Knob: this + #work padding-top below. */
  padding-bottom: clamp(32px, 4vw, 56px);
  /* V4.1: headline size lives here as a shared knob so the avatar can be sized
     OFF it — avatar height = 3 line-heights = the headline block's height. */
  --hero-headline-fs: clamp(2.25rem, 3.4vw, 3rem);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.95fr);
  gap: clamp(40px, 7vw, 140px);
  align-items: center;   /* V4.1: the three hero parts ride one shared centre line */
}
.hero__lead { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.hero__avatar {
  flex-shrink: 0;
  /* V4.1: height now TRACKS the headline. width = 3 × line-height × headline
     font-size = the 3-line headline block's height; aspect-ratio keeps it a
     circle. Resize via --hero-headline-fs above — never a magic px. */
  width: calc(3 * var(--lh-display) * var(--hero-headline-fs)); aspect-ratio: 1;
  border-radius: 50%; object-fit: cover;
  background: var(--surface); border: 1px solid var(--border);
}
.hero__headline {
  /* V4.1: trimmed from --fs-display-lg (~64px) so the line settles to THREE
     rows. The 22ch measure forces a stable 3-line wrap — "company's" lands on
     line 2 — and holds 3 lines from ~1024px up. THE KNOB: --hero-headline-fs on
     .hero (raising it costs a 4th line on narrow windows AND grows the avatar). */
  font-size: var(--hero-headline-fs);
  line-height: var(--lh-display);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight);
  max-width: 22ch;
  text-wrap: balance;
}
/* V4.1: cap lifted so the intro fills column 2 — its right edge now meets the
   container edge, i.e. aligns under the end of "Get in touch" in the top bar. */
.hero__intro { font-size: var(--fs-lead); line-height: 1.5; max-width: none; }

/* --- Projects --- */
/* V4.2: pull the first project up under the hero (the other half of the tease).
   Top padding only — bottom keeps the full section rhythm. */
#work { padding-top: clamp(32px, 4vw, 56px); }
.projects { display: flex; flex-direction: column; gap: var(--space-96); }
.project { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-48); align-items: center; }
.project:nth-child(even) .project__media { order: 2; }
.project__media {
  aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden;
  border: 1px solid var(--border);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  display: grid; place-items: center; color: rgba(255,255,255,.85);
  font-weight: var(--weight-bold); font-size: var(--fs-h2); text-align: center; padding: var(--space-24);
}
.project--featured .project__media { aspect-ratio: 16 / 10; }
.project--featured .project__desc { font-size: var(--fs-h1); }
.project__head { display: flex; align-items: center; gap: var(--space-12); margin-bottom: var(--space-24); }
/* V4: client logo mark replaces the V3 colour-chip placeholder.
   Fixed box so four very different marks read as ONE set; logo
   contained, transparent field, never stretched. */
.project__mark {
  width: var(--mark-size); height: var(--mark-size);
  border-radius: var(--radius-mark);
  flex-shrink: 0; object-fit: contain;
}
.project__name { font-size: var(--fs-h3); font-weight: var(--weight-medium); }
.project__desc { font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: var(--weight-regular); margin-bottom: var(--space-24); }
.project__link {
  display: inline-flex; align-items: center; gap: var(--space-8);
  font-weight: var(--weight-medium); padding-bottom: 2px;
  border-bottom: 2px solid var(--accent); width: fit-content;
}
.project__link:hover { color: var(--accent); }

/* --- Section header --- */
.section-head { margin-bottom: var(--space-48); }

/* --- Services (scannable list) --- */
.services__list { margin-top: var(--space-48); border-bottom: 1px solid var(--border); }
.service {
  display: flex; align-items: baseline; gap: var(--space-24);
  padding-block: var(--space-24); border-top: 1px solid var(--border);
}
.service__num { font-size: var(--fs-caption); color: var(--fg-muted); width: 3ch; flex-shrink: 0; }
.service__name { font-size: var(--fs-display-sm); font-weight: var(--weight-medium); line-height: var(--lh-heading); transition: transform .2s ease, color .2s ease; }
.service:hover .service__name { color: var(--accent); transform: translateX(8px); }

/* --- Badge --- */
.badge { display: inline-flex; align-items: center; gap: var(--space-8); font-size: var(--fs-small); color: var(--fg-muted); }
.badge__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }

/* --- Credibility (V4: mentors framing + testimonials, ONE section) ---
   Two columns, each = a piece of framing text + the proof beneath it.
   They describe each other: the "giants" claim is the context for the
   quotes; the quotes are the evidence for the claim. On mobile this
   linearises to claim → proof → claim → proof. */
.creds__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.creds__col { display: flex; flex-direction: column; gap: var(--space-48); }
.creds__title {
  font-size: var(--fs-display-sm); line-height: var(--lh-heading);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.creds__intro { font-size: var(--fs-h1); line-height: 1.25; font-weight: var(--weight-regular); max-width: 30ch; }

/* Testimonial cards — light on dark. V4: initial-circles dropped to
   match the reference; name + role only, reversible if photos land. */
.testimonial { background: var(--white); color: var(--ink); border-radius: var(--radius-card); padding: clamp(24px, 2.5vw, 40px); display: flex; flex-direction: column; gap: var(--space-24); }
.testimonial__quote { font-size: var(--fs-lead); line-height: 1.5; }
.testimonial__author { margin-top: auto; line-height: 1.4; }
.testimonial__name { font-weight: var(--weight-bold); }
.testimonial__role { font-size: var(--fs-small); color: var(--grey-500); }

/* --- Booking embed slot --- */
.embed-slot {
  min-height: 480px; border: 1px dashed var(--border); border-radius: var(--radius-card);
  display: grid; place-items: center; text-align: center; color: var(--fg-muted);
  padding: var(--space-32);
}

/* --- CTA row --- */
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-16); margin-top: var(--space-32); }

/* --- Footer --- */
.site-footer { padding-block: var(--space-64); }
.footer__grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-48); }
.footer__nav { display: flex; flex-direction: column; gap: var(--space-12); }
.footer__nav a { font-size: var(--fs-h3); font-weight: var(--weight-medium); color: var(--fg); }
.footer__nav a:hover { color: var(--accent); }
.footer__meta { display: flex; flex-direction: column; gap: var(--space-24); justify-content: flex-end; }
/* V4: the Fellini line earns the serif — a third, quiet home for
   Baskerville italic so the serif reads as a system, not a one-off. */
.footer__quote { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lead); line-height: 1.45; color: var(--fg-muted); max-width: 48ch; }

/* --- Motion (scroll reveal) --- */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .topbar__inner { gap: var(--space-24); }
}

@media (max-width: 810px) {
  /* Header stacks; the email column drops its right-alignment */
  .topbar__inner { flex-direction: column; gap: var(--space-24); }
  .topbar__col:last-child { text-align: left; align-items: flex-start; }

  /* Hero: avatar centers above the headline, intro flows below */
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-32); align-items: start; }
  .hero__lead { flex-direction: column; align-items: flex-start; gap: var(--space-24); }

  .project { grid-template-columns: 1fr; gap: var(--space-24); }
  .project:nth-child(even) .project__media { order: -1; }
  .project__media { order: -1; }
  .split { grid-template-columns: 1fr; gap: var(--space-32); }
  .creds__grid { grid-template-columns: 1fr; gap: var(--space-48); }
  .footer__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .btn { width: 100%; }
  .hero__intro { max-width: none; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}