/* =========================================================
   Base: reset, typography, layout, shared components
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Keep content clear of phone system bars (zero on desktop) */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Header background behind the phone status bar */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

button, input, textarea, select { font: inherit; color: inherit; }

/* Headings: sentence case (no caps), per client direction */
/* Archivo Black ships one weight (400); never request a heavier one or browsers fake bold */
.h-display,
.h-section {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: var(--lh-heading);
  text-wrap: balance;
}
.h-display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.035em;
}
.h-section {
  font-size: var(--fs-h2);
}
.h-card {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

/* "working." accent: Archivo ExtraBold Italic in a gold box with navy text (7.8:1) */
.highlight {
  display: inline-block;
  padding: 0.02em 0.16em 0.16em 0.1em;
  background: var(--c-gold);
  color: var(--c-navy);
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.02em;
  border-radius: var(--radius-s);
}

.lede {
  font-size: var(--fs-lg);
  line-height: 1.45;
  max-width: var(--measure);
  text-wrap: pretty;
}
.prose p { max-width: var(--measure); text-wrap: pretty; }
.prose p + p { margin-top: var(--space-4); }
.muted { color: var(--text-muted); }

/* Layout */
.container {
  width: 100%;
  max-width: calc(var(--max-w) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--space-9); position: relative; }
.section--dark {
  background: var(--dark-bg);
  color: var(--dark-text);
  --tbd-bg: rgba(243, 241, 236, 0.06);
  --tbd-text: #D6D2C4;
  --tbd-line: rgba(243, 241, 236, 0.14);
  --text-muted: var(--dark-text-muted);
  --accent-text: var(--dark-accent);
  --text: var(--dark-text);
  --surface: rgba(243, 241, 236, 0.06);
  --line: var(--dark-line);
  --line-strong: rgba(243, 241, 236, 0.3);
  --focus: var(--c-gold);
}
.section-head { margin-bottom: var(--space-7); max-width: 56rem; }
.section-head .lede { margin-top: var(--space-5); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  border: 2px solid var(--text);
  border-radius: var(--radius-s);
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); opacity: 0.88; }
.btn--small { min-height: 44px; padding: 0.55rem 1.15rem; }
/* Gold button for dark backgrounds */
.btn--gold { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-navy); }

/* Focus: always visible for keyboard users */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}
.btn:focus-visible { border-radius: var(--radius-s); }

/* Skip link */
/* Skip link: fully hidden (not just moved) until it receives keyboard focus,
   so no browser chrome or translucent bar can reveal it */
.skip-link {
  position: fixed;
  left: var(--space-4);
  top: calc(env(safe-area-inset-top, 0px) + var(--space-3));
  z-index: 100;
  padding: 0.7rem 1rem;
  background: var(--text);
  color: var(--bg);
  font-weight: 700;
  border-radius: var(--radius-s);
}
.skip-link:not(:focus):not(:focus-visible) {
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0; opacity: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Unresolved copy: visible on purpose until the campaign confirms */
/* Deliberately quiet: obvious as a placeholder without shouting */
.tbd {
  display: inline;
  padding: 0.08em 0.4em;
  background: var(--tbd-bg);
  color: var(--tbd-text);
  border: 1px solid var(--tbd-line);
  border-radius: var(--radius-s);
  font-family: var(--font-sans);
  font-size: 0.85em;
  font-weight: 500;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
}

/* Photography / illustration slots, assets supplied by Matt */
.media-slot {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 18rem;
  border-radius: var(--radius-m);
  background: var(--placeholder-bg);
  color: var(--placeholder-text);
  overflow: hidden;
  text-align: center;
}
.media-slot__label {
  max-width: 24rem;
  padding: var(--space-5);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.media-slot__label strong { display: block; margin-bottom: var(--space-1); }

/* Logo-mark bar: the angled brick from the logo, reused as a motif */
.bar-mark {
  display: inline-block;
  width: 0.9em;
  height: 0.36em;
  border-radius: 0; /* square, like the logo blocks */
  background: currentColor;
  transform: rotate(-45deg);
}

/* =========================================================
   Text and content reveal. Every text block fades and rises in
   on load (hero) or when scrolled to. Hidden state only applies
   once JS runs, so content stays visible without JS.
   ========================================================= */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
/* Display lines rise further, from behind a soft mask */
.js .reveal--line { transform: translate3d(0, 0.5em, 0); }
/* Cards settle in with a slight scale */
.js .reveal--card { transform: translate3d(0, 28px, 0) scale(0.98); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Pause control: freezes every looping animation on the page */
.motion-paused *,
.motion-paused *::before,
.motion-paused *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}