/* ==========================================================================
   Woodpecker Solutions — design system (light)

   Charcoal and gold. The gold is lifted from the logo's beak; the crimson of
   the crest is deliberately NOT used anywhere in the interface, so the logo
   stays the only red on the page and reads as the focal point.

   The site is light throughout, including the WebGL sculpting sequence. Three
   surfaces stay dark on purpose, as punctuation rather than inconsistency:
   the deploy console (it is a terminal), the CTA band, and the footer.

   CONTRAST RULE, easy to get wrong: --accent (#e0a316) is only 2.2:1 on
   white, so it must never carry text on a light surface. Use --accent-deep
   (#7d5a06, 6.3:1) for gold-coloured text, --accent for fills and rules, and
   --gold only on the dark surfaces listed above.

   Hand-written; no build step (server has no Node).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --accent:      #e0a316;   /* fills, rules, icon glyphs. Not text on white. */
  --accent-deep: #7d5a06;   /* text-safe gold on light, 6.3:1 */
  --gold:        #ffc72c;   /* dark surfaces only */
  --gold-soft:   #f7cda4;

  /* Surfaces, lightest first */
  --paper:       #ffffff;
  --paper-2:     #fbf9f9;
  --paper-3:     #f4f0f0;

  /* Dark surfaces used as punctuation */
  --ink:         #171314;
  --ink-2:       #241d1f;
  --ink-3:       #3a3033;

  /* Text */
  --text:        #171314;   /* headings */
  --text-2:      #524649;   /* body */
  --text-3:      #857a7e;   /* muted, labels */

  /* Lines */
  --line:        #e6e0e1;
  --line-soft:   #f2eeef;

  /* Semantic */
  --ok:          #1c8a5a;
  --ok-bg:       #e8f6ef;
  --err:         #c0202e;
  --err-bg:      #fdeced;

  /* Type */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Space & shape */
  --gap:      1.5rem;
  --radius:   14px;
  --radius-s: 9px;
  --radius-l: 22px;
  --shell:    1180px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(23, 19, 20, .06), 0 1px 3px rgba(23, 19, 20, .05);
  --sh-2: 0 4px 12px rgba(23, 19, 20, .07), 0 2px 4px rgba(23, 19, 20, .04);
  --sh-3: 0 18px 40px rgba(23, 19, 20, .10), 0 6px 14px rgba(23, 19, 20, .05);
  --sh-ink: 0 10px 26px rgba(23, 19, 20, .26);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  background: var(--paper);
  color-scheme: light;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  color: var(--text);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.022em;
}

h1 { font-size: clamp(2.25rem, 5.2vw, 3.75rem); }
h2 { font-size: clamp(1.85rem, 3.7vw, 2.65rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); letter-spacing: -.014em; }
h4 { font-size: 1.0625rem; letter-spacing: -.008em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-deep); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--ink); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }

strong { color: var(--text); font-weight: 700; }

hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff;
  padding: .8rem 1.2rem; border-radius: 0 0 var(--radius-s) 0;
  z-index: 400; font-weight: 700;
}
.skip-link:focus { left: 0; top: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 1.5rem;
  position: relative;
  z-index: 1;
}

.section { padding: clamp(4rem, 8vw, 6.5rem) 0; position: relative; }
.section--tight { padding: clamp(3rem, 5vw, 4rem) 0; }

.section--paper  { background: var(--paper-2); }
.section--paper3 { background: var(--paper-3); }

/* The dark band. Used sparingly for rhythm — stats, engagement models,
   the process strip. */
.section--ink { background: var(--ink); color: #c9bfc2; }
.section--ink h2,
.section--ink h3,
.section--ink h4 { color: #fff; }
.section--ink p { color: #b3a7ab; }
.section--ink a { color: var(--gold); }
.section--ink a:hover { color: #fff; }
.section--ink .eyebrow { color: var(--gold); }
.section--ink .eyebrow::before { background: var(--gold); }
.section--ink .section-head p { color: #b3a7ab; }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }
.measure { max-width: 68ch; }
.measure-narrow { max-width: 54ch; }
.center .measure,
.center .measure-narrow { margin-inline: auto; }

/* --------------------------------------------------------------------------
   4. Section headings
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.section-head { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.section-head p { color: var(--text-2); font-size: 1.125rem; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.6rem;
  font-family: inherit;
  font-size: .975rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.004em;
  border: 1.5px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Charcoal is the primary action on light. Gold fills cannot carry legible
   dark text at button size and fail contrast with white. */
.btn--primary {
  background: var(--ink-2);
  border-color: var(--ink-2);
  color: #fff;
  box-shadow: var(--sh-ink);
}
.btn--primary:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(23, 19, 20, .32);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn--ghost:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
  transform: translateY(-2px);
}

.btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.btn--gold:hover {
  background: #ffd45c;
  border-color: #ffd45c;
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(255, 199, 44, .3);
}

.btn--onink {
  background: transparent;
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}
.btn--onink:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
  transform: translateY(-2px);
}

.btn--lg { padding: 1.05rem 2rem; font-size: 1.03rem; }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  align-items: center;
}
.center .btn-row { justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 650;
  font-size: .95rem;
  color: var(--accent-deep);
}
.link-arrow svg { transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.section--ink .link-arrow { color: var(--gold); }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--sh-1);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 74px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-right: auto;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
}
.brand:hover { color: var(--ink); }
.brand img { width: 42px; height: 42px; flex: none; }
.brand-text { display: flex; flex-direction: column; }
.brand-name { font-size: 1.06rem; }
.brand-sub {
  font-size: .655rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links li { margin: 0; }
.nav-links a {
  display: block;
  padding: .55rem .85rem;
  border-radius: var(--radius-s);
  color: var(--ink-3);
  font-size: .945rem;
  font-weight: 600;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.nav-links a:hover { color: var(--ink); background: var(--paper-3); }
.nav-links a.is-active { color: var(--accent-deep); }

.nav-cta { margin-left: .5rem; }

/* `.nav-links a` (0-1-1) out-specifies `.btn--primary` (0-1-0), so without
   these the header CTA renders as dark text on its own dark pill. */
.nav-links .btn--primary { color: #fff; }
.nav-links .btn--primary:hover { color: #fff; background: var(--ink); }
.nav-links .btn--ghost:hover { color: #fff; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
  cursor: pointer;
  color: var(--ink);
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed;
    inset: 74px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem 1.5rem 1.75rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-3);
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  }
  .nav-links.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-links a { padding: .9rem .25rem; font-size: 1.05rem; border-radius: 0; }
  .nav-links a:hover { background: transparent; }
  .nav-cta { margin: .9rem 0 0; }
  .nav-cta .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
/* position: relative is load-bearing — atmosphere.js prepends an absolutely
   positioned .atmos canvas as the first child of this element. */
.hero {
  position: relative;
  padding: clamp(4.25rem, 10vw, 8rem) 0 clamp(3.75rem, 8vw, 6.5rem);
  /* Flat paper. The warm radial bloom and the ruled grid that used to sit
     here are both gone by request — the headline carries the fold on its
     own, with nothing washed behind it. */
  background: var(--paper);
  overflow: hidden;
  text-align: center;
}
.hero > .shell { position: relative; z-index: 1; }

/* Narrower than the shell. Centred text needs a tighter measure than
   left-aligned text to stay readable — the eye has to find the start of each
   line rather than returning to a fixed margin. */
.hero-copy {
  max-width: 62rem;
  margin: 0 auto;
}

.hero h1 {
  /* Larger than the global h1 scale: with the mock gone this is the only
     thing carrying the fold. */
  font-size: clamp(2.15rem, 6.2vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -.032em;
  margin-bottom: 1.3rem;
}
/* One line per span, so the rag is authored rather than left to the wrap. */
.hero h1 .hl { display: block; }
/* .accent stays inline inside the line: background-clip paints across the
   element box, so promoting it to block would stretch the gradient to the
   full column and wash the sweep out. */

@media (max-width: 640px) {
  /* The authored rag fights the viewport down here. Going inline lets the
     three lines reflow as one sentence — and unlike hiding a <br>, the
     whitespace between the spans survives as the word space. */
  .hero h1 .hl { display: inline; }
  .hero h1 { text-wrap: balance; }
}
.hero h1 .accent {
  background: linear-gradient(100deg, var(--ink) 0%, #5c4204 52%, #a8781a 118%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-lede {
  font-size: clamp(1.06rem, 1.6vw, 1.26rem);
  color: var(--text-2);
  max-width: 58ch;
  margin: 0 auto clamp(2rem, 3.5vw, 2.6rem);
}

/* .btn-row is shared, so centre it here rather than changing it globally. */
.hero .btn-row { justify-content: center; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem .95rem .42rem .5rem;
  margin-bottom: 1.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .83rem;
  font-weight: 600;
  color: var(--ink-3);
  box-shadow: var(--sh-1);
}
/* Once the label wraps to two lines a 999px radius stops reading as a pill
   and starts reading as a blob, so square it off and let it be a tag block. */
@media (max-width: 560px) {
  .pill {
    max-width: 100%;
    border-radius: var(--radius);
    padding: .5rem .8rem;
    font-size: .78rem;
    text-align: left;
  }
}

.pill-tag {
  padding: .18rem .55rem;
  background: var(--ink);
  border-radius: 999px;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.75rem, 5vw, 3.75rem);
  /* Narrower than the copy above it: the rule reads as a deliberate closing
     line under the hero rather than a full-width divider. */
  max-width: 44rem;
  margin: clamp(2.6rem, 5.5vw, 3.9rem) auto 0;
  padding-top: clamp(1.7rem, 3.5vw, 2.4rem);
  border-top: 1px solid var(--line);
}
.hero-proof .stat-n {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.03em;
  line-height: 1;
}
.hero-proof .stat-l {
  font-size: .82rem;
  color: var(--text-3);
  margin-top: .35rem;
}

/* --------------------------------------------------------------------------
   8. Trust strip
   -------------------------------------------------------------------------- */
.trust {
  padding: 2.4rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.trust-label {
  text-align: center;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1.5rem;
}
.trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.6rem, 5vw, 3.4rem);
}
.trust-row span {
  font-size: 1.02rem;
  font-weight: 750;
  letter-spacing: -.01em;
  color: #a99ea2;
  transition: color .2s var(--ease);
}
.trust-row span:hover { color: var(--ink-3); }

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  padding: 1.85rem 1.7rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--sh-3);
}
.card h3 { margin-bottom: .55rem; }
.card p { color: var(--text-2); font-size: .965rem; margin-bottom: 0; }
.card > p + .link-arrow { margin-top: 1.1rem; }

.card-icon {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 1.2rem;
  background: linear-gradient(140deg, rgba(224, 163, 22, .14), rgba(255, 199, 44, .22));
  border-radius: 12px;
  color: var(--accent-deep);
}
.card-icon svg { width: 23px; height: 23px; }

/* Card on the dark band */
.card--ink {
  background: var(--ink-2);
  border-color: rgba(255, 255, 255, .09);
}
.card--ink h3 { color: #fff; }
.card--ink p { color: #a99ea2; }
.card--ink:hover { border-color: rgba(255, 255, 255, .18); }
.card--ink .card-icon {
  background: rgba(255, 199, 44, .13);
  color: var(--gold);
}
.card--ink .ticks li { color: #b3a7ab; }
.card--ink .ticks li::before { background-color: var(--gold); }

/* Numbered process cards */
.step { position: relative; padding-top: .4rem; }
.step-n {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: 1.1rem;
  background: var(--ink);
  border-radius: 12px;
  color: #fff;
  font-size: .95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.section--ink .step-n { background: var(--accent); color: var(--ink); }
.step h3 { margin-bottom: .5rem; }
.step p { color: var(--text-2); font-size: .95rem; margin: 0; }
.section--ink .step p { color: #a99ea2; }

/* Feature list with checkmarks */
.ticks { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.ticks li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: .65rem;
  font-size: .965rem;
  color: var(--text-2);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 17px; height: 17px;
  border-radius: 50%;
  -webkit-mask: no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask: no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-color: var(--accent-deep);
}
.section--ink .ticks li { color: #b3a7ab; }
.section--ink .ticks li::before { background-color: var(--gold); }

/* --------------------------------------------------------------------------
   10. Stats band
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius);
  overflow: hidden;
}
.stats .stat {
  padding: 2rem 1.5rem;
  background: var(--ink);
  text-align: center;
}
.stats .stat-n {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  color: #fff;
}
.stats .stat-n em { font-style: normal; color: var(--gold); }
.stats .stat-l {
  margin-top: .55rem;
  font-size: .85rem;
  color: #9c9095;
}
@media (max-width: 780px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------------------
   11. Split feature rows
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split + .split { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split .split-media { order: -1; }
}
.split--flip .split-media { order: -1; }
@media (max-width: 900px) { .split--flip .split-media { order: -1; } }

.split-media {
  padding: 2rem;
  background: linear-gradient(150deg, var(--paper-3), var(--paper-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.spec { display: grid; gap: .1rem; }
.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .85rem .2rem;
  border-bottom: 1px solid var(--line);
  font-size: .93rem;
}
.spec-row:last-child { border-bottom: 0; }
.spec-row dt { color: var(--text-2); margin: 0; }
.spec-row dd {
  margin: 0;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.spec-row dd.up { color: var(--ok); }

/* --------------------------------------------------------------------------
   12. Portfolio / case study cards
   -------------------------------------------------------------------------- */
.work {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.work:hover { transform: translateY(-5px); box-shadow: var(--sh-3); }

.work-top {
  position: relative;
  padding: 1.6rem 1.6rem 1.4rem;
  color: #fff;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.work-top::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .6;
}
.work-top > * { position: relative; z-index: 1; }
.work-kind {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .85;
}
.work-name {
  font-size: 1.42rem;
  font-weight: 800;
  letter-spacing: -.025em;
  color: #fff;
  margin: 0;
}

.wt-bronze{ background: linear-gradient(135deg, #a8751a, #543a06); }
.wt-ink   { background: linear-gradient(135deg, #35292c, #171314); }
.wt-gold  { background: linear-gradient(135deg, #e0a316, #a86f0c); }
.wt-olive { background: linear-gradient(135deg, #5c6b25, #2b3310); }
.wt-teal  { background: linear-gradient(135deg, #16706b, #0a3b38); }
.wt-slate { background: linear-gradient(135deg, #4a5568, #262d3a); }

.work-body { padding: 1.5rem 1.6rem 1.7rem; flex: 1; display: flex; flex-direction: column; }
.work-body p { color: var(--text-2); font-size: .95rem; }

.work-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin: 1.2rem 0 1.3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.work-metrics .m-n {
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--accent-deep);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.work-metrics .m-l { font-size: .76rem; color: var(--text-3); margin-top: .15rem; }

.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }
.tag {
  padding: .3rem .7rem;
  background: var(--paper-3);
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   13. Testimonial
   -------------------------------------------------------------------------- */
.quote {
  padding: 2.2rem 2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
}
.quote blockquote {
  margin: 0 0 1.4rem;
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--ink-3);
}
.quote blockquote::before {
  content: "";
  display: block;
  width: 30px; height: 3px;
  margin-bottom: 1.1rem;
  background: var(--accent);
  border-radius: 2px;
}
.quote-by { display: flex; align-items: center; gap: .8rem; margin-top: auto; }
.avatar {
  width: 42px; height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--ink-3), var(--ink));
  color: #fff;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: -.01em;
}
.quote-by .qn { font-weight: 700; color: var(--ink); font-size: .93rem; line-height: 1.3; }
.quote-by .qr { font-size: .81rem; color: var(--text-3); }

/* --------------------------------------------------------------------------
   14. Team
   -------------------------------------------------------------------------- */
.person { text-align: center; }
.person .avatar {
  width: 88px; height: 88px;
  margin: 0 auto 1rem;
  font-size: 1.6rem;
}
.person .avatar--alt { background: linear-gradient(140deg, #35292c, #171314); }
.person .avatar--gold {
  background: linear-gradient(140deg, #e0a316, #a86f0c);
  color: var(--ink);
}
.person h3 { margin-bottom: .2rem; font-size: 1.08rem; }
.person .role { font-size: .87rem; color: var(--accent-deep); font-weight: 600; }
.person .bio { font-size: .9rem; color: var(--text-2); margin-top: .7rem; }

/* --------------------------------------------------------------------------
   15. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem .25rem;
  font-size: 1.03rem;
  font-weight: 650;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color .16s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-deep); }
.faq summary::after {
  content: "";
  flex: none;
  width: 20px; height: 20px;
  background: currentColor;
  -webkit-mask: no-repeat center / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  mask: no-repeat center / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition: transform .22s var(--ease);
}
.faq details[open] summary { color: var(--accent-deep); }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq .faq-a {
  padding: 0 .25rem 1.5rem;
  color: var(--text-2);
  font-size: .975rem;
  max-width: 74ch;
}

/* --------------------------------------------------------------------------
   16. Forms
   -------------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.field--full { grid-column: 1 / -1; }

.field { display: grid; gap: .45rem; }
.field label {
  font-size: .875rem;
  font-weight: 650;
  color: var(--ink);
}
.field .req { color: var(--accent-deep); }
.field .hint { font-size: .8rem; color: var(--text-3); font-weight: 400; }

.input, .textarea, .select {
  width: 100%;
  padding: .8rem .95rem;
  font-family: inherit;
  font-size: .975rem;
  color: var(--ink);
  background-color: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease),
              background-color .16s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: #b6abae; }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--ink);
  background-color: var(--paper);
  box-shadow: 0 0 0 4px rgba(23, 19, 20, .10);
}
.textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  /* background-color is set separately from the arrow image so the focus
     state can change one without wiping the other. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23524649' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 17px;
  padding-right: 2.5rem;
  cursor: pointer;
}

.input.has-error, .textarea.has-error, .select.has-error {
  border-color: var(--err);
  background-color: var(--err-bg);
}
.field-error { font-size: .83rem; font-weight: 600; color: var(--err); }

/* Honeypot — hidden from humans, visible to naive bots */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.alert {
  display: flex;
  gap: .8rem;
  padding: 1.05rem 1.2rem;
  margin-bottom: 1.6rem;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  font-size: .95rem;
}
.alert svg { flex: none; margin-top: .15rem; }
.alert-title { font-weight: 700; margin-bottom: .15rem; }
.alert--ok  { background: var(--ok-bg);  border-color: #bfe5d3; color: #14603f; }
.alert--ok .alert-title { color: #0f4c32; }
.alert--err { background: var(--err-bg); border-color: #f4c3c7; color: #8e1621; }
.alert--err .alert-title { color: #741018; }

.form-note { font-size: .84rem; color: var(--text-3); margin-top: 1rem; }

.contact-grid {
  display: grid;
  grid-template-columns: 1.35fr .8fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.info-list { display: grid; gap: 1.35rem; }
.info-item { display: flex; gap: .95rem; }
.info-item .ii-icon {
  width: 40px; height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, rgba(224, 163, 22, .14), rgba(255, 199, 44, .22));
  border-radius: 10px;
  color: var(--accent-deep);
}
.info-item .ii-icon svg { width: 19px; height: 19px; }
.info-item .ii-l {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .15rem;
}
.info-item .ii-v { font-weight: 650; color: var(--ink); font-size: .97rem; }
.info-item .ii-v a { color: var(--ink); }
.info-item .ii-v a:hover { color: var(--accent-deep); }
.info-item .ii-s { font-size: .86rem; color: var(--text-2); margin-top: .1rem; }

.panel {
  padding: 1.7rem 1.6rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.panel + .panel { margin-top: 1.25rem; }

/* --------------------------------------------------------------------------
   17. CTA band — dark on purpose, the loudest moment on the page
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.75rem, 5vw, 4rem);
  background: linear-gradient(125deg, #171314 0%, #3f3209 54%, #8a6407 100%);
  border-radius: var(--radius-l);
  color: #fff;
  overflow: hidden;
  text-align: center;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(520px 300px at 82% 110%, rgba(255, 199, 44, .30), transparent 60%),
    radial-gradient(420px 260px at 10% -20%, rgba(255, 255, 255, .12), transparent 60%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
/* The band centres its text, but .btn-row is a flex container and would
   otherwise pack its buttons to the left edge. */
.cta-band .btn-row { justify-content: center; }
.cta-band h2 { color: #fff; margin-bottom: .8rem; }
.cta-band p {
  color: rgba(255, 255, 255, .88);
  font-size: 1.09rem;
  max-width: 56ch;
  margin: 0 auto 2rem;
}

/* --------------------------------------------------------------------------
   18. Page header (inner pages)
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-head h1 { margin-bottom: .7rem; }
.page-head p {
  font-size: clamp(1.03rem, 1.6vw, 1.16rem);
  color: var(--text-2);
  max-width: 62ch;
  margin: 0;
}

/* Live atmosphere canvas, mounted by atmosphere.js. The shader renders with
   alpha, so it tints whatever surface sits behind it.

   DORMANT: motion.js no longer mounts this — the gold sweep it painted over
   the hero and the page headers was dropped from the design. Kept so that
   restoring the effect is a single change in motion.js and nothing else. */
.atmos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  pointer-events: none;
}
.atmos.is-live { opacity: 1; }

.crumbs {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.1rem;
  font-size: .84rem;
  color: var(--text-3);
}
.crumbs a { color: var(--text-3); font-weight: 600; }
.crumbs a:hover { color: var(--accent-deep); }
.crumbs span[aria-current] { color: var(--ink-3); font-weight: 600; }

/* --------------------------------------------------------------------------
   18b. Long-form documents (privacy, terms)
   -------------------------------------------------------------------------- */
.doc .measure { max-width: 62ch; }
.doc p, .doc li { line-height: 1.78; font-size: 1.03rem; }
.doc h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  margin-top: 2.4rem;
}
.doc h2:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   19. Footer — dark, anchoring the foot of the page
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: #9c9095;
  padding: clamp(3rem, 6vw, 4.5rem) 0 0;
  font-size: .93rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: 3rem;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; }
.footer-brand img { width: 44px; height: 44px; }
.footer-brand .fb-name {
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.footer-brand .fb-sub {
  font-size: .655rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gold);
}
.footer-about { max-width: 34ch; margin-bottom: 1.3rem; line-height: 1.6; }

.social { display: flex; gap: .55rem; }
.social a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .07);
  border-radius: 10px;
  color: #b9adb1;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              transform .18s var(--ease);
}
.social a:hover { background: var(--accent); color: var(--ink); transform: translateY(-2px); }
.social svg { width: 18px; height: 18px; }

.footer-col h3 {
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .68rem; }
.footer-col a { color: #9c9095; }
.footer-col a:hover { color: #fff; }

.footer-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: .86rem;
  color: #7d7175;
}
.footer-bar-links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer-bar a { color: #7d7175; }
.footer-bar a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   19b. Scroll-driven build sequence
   --------------------------------------------------------------------------
   A sticky WebGL stage with four full-height copy blocks scrolling over it.
   Section height = stage (100vh) + 4 acts (400vh) - 100vh overlap = 400vh,
   which is the range journey.js maps its timeline onto.

   Base state is a plain stacked section — what a visitor gets with JS off,
   WebGL missing, or reduced motion on. The tall sticky layout is opted into
   via a .gl-ok class set on <html> before first paint, so the enhancement is
   never assumed and never causes a reflow.
   -------------------------------------------------------------------------- */
.journey {
  position: relative;
  /* A shade below the page so the stage reads as a lit studio rather than a
     hole in the page. Must match VOID_BG in journey.js or the canvas edges
     show as a seam. */
  background: #dcd6d5;
  color: var(--text-2);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}

.journey-stage { display: none; }

.gl-ok .journey { padding: 0; }
.gl-ok .journey-stage {
  display: block;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;          /* avoids the mobile URL-bar resize jitter */
  z-index: 0;
  overflow: hidden;
}

.journey-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .9s var(--ease);
}
.journey--live .journey-canvas { opacity: 1; }

/* Poster shown before the scene loads, and permanently when it will not run. */
.journey-poster {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #dcd6d5;
}
.journey--live .journey-poster { opacity: 0; transition: opacity 1s var(--ease); }

.journey-copy { position: relative; z-index: 1; }

.gl-ok .journey-copy {
  margin-top: -100vh;
  margin-top: -100svh;
  pointer-events: none;    /* never block interaction with the stage */
}

.act { padding: 2.4rem 0; }

.gl-ok .act {
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  display: flex;
  align-items: center;
}

.act-inner { max-width: 62ch; }

.gl-ok .act-inner {
  max-width: 27rem;
  padding: 2rem 2.1rem;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(23, 19, 20, .08);
  box-shadow: var(--sh-2);
  border-radius: var(--radius-l);
  backdrop-filter: blur(9px) saturate(140%);
  -webkit-backdrop-filter: blur(9px) saturate(140%);
  pointer-events: auto;
}

/* Alternate sides so the eye moves and the structure stays visible. */
.gl-ok .act:nth-child(even) .act-inner { margin-left: auto; }

.act-n {
  display: inline-block;
  margin-bottom: .85rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
.act h3 {
  color: var(--text);
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  margin-bottom: .6rem;
}
.act p { color: var(--text-2); font-size: 1.02rem; margin: 0; }

@media (max-width: 700px) {
  .gl-ok .act-inner,
  .gl-ok .act:nth-child(even) .act-inner { margin: 0 auto; max-width: 100%; }
}

/* --------------------------------------------------------------------------
   20. Motion: reveal, parallax, card tilt
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Depth layers driven by scroll — --par is written by motion.js. */
.parallax { will-change: transform; transform: translate3d(0, var(--par, 0px), 0); }

/* Real 3D tilt with a specular sweep. Angles arrive from JS as custom
   properties, so the whole effect stays declarative here. */
.tilt {
  transform: perspective(900px)
             rotateX(var(--tilt-x, 0deg))
             rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform .35s var(--ease);
}
.tilt.is-tilting { transition: transform .08s linear; }
.tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--sheen, 0);
  transition: opacity .3s var(--ease);
  /* Lighter touch than on a dark surface — a strong wash reads as a smudge
     against white. */
  background: radial-gradient(
    340px circle at var(--sheen-x, 50%) var(--sheen-y, 0%),
    rgba(255, 199, 44, .20), transparent 62%);
}
/* On the dark band the sweep needs more presence to register at all. */
.section--ink .tilt::after,
.work .tilt::after {
  background: radial-gradient(
    340px circle at var(--sheen-x, 50%) var(--sheen-y, 0%),
    rgba(255, 199, 44, .16), transparent 62%);
}

/* --------------------------------------------------------------------------
   21. Boot loader
   --------------------------------------------------------------------------
   The mark, the wordmark, and a bar driven by real load progress.

   Runs on EVERY page load — it is the site's page transition, which is why
   the gold wipe in section 22 was removed rather than kept alongside it.

   Inert by default. The <head> script adds .is-booting before first paint, so
   a visitor with JS off never sees it, and the failsafe animation hands the
   page back even if site.js is blocked or throws.
   -------------------------------------------------------------------------- */
.loader { display: none; }

.is-booting .loader {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 400;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--paper);
  /* Last resort. Nothing else will ever take this overlay down if the script
     that owns it never runs, so the stylesheet does it: one shot, ten seconds
     in. Only the delay matters — the reduced-motion block clamps durations,
     not delays, so this still fires there. */
  animation: loader-failsafe 1ms 10s forwards;
}
/* pointer-events as well as visibility: between them, whichever the browser
   holds in the fill state, what is left behind cannot swallow a click. */
@keyframes loader-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.9rem;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}

.loader-brand {
  display: flex;
  align-items: center;
  gap: .95rem;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
}
.loader-brand .brand-name { font-size: 1.45rem; }
.loader-brand .brand-sub  { font-size: .72rem; }

.loader-mark { width: 62px; height: 62px; flex: none; display: block; }
.is-booting .loader-mark { animation: loader-breathe 2.6s var(--ease) infinite; }
@keyframes loader-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.04); }
}

.loader-track {
  position: relative;
  width: min(240px, 56vw);
  height: 3px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
/* Scaled rather than resized: width would lay out on every frame, and this
   bar is repainted for the whole of the load. */
.loader-bar {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent) 55%, var(--gold));
}

.loader-pct {
  font-size: .72rem;
  font-weight: 600;
  /* Looser than body copy to match .brand-sub above it, but well short of
     that .17em — on digits it starts reading as "4 4 %". The padding puts
     back the trailing letter-space so the number stays optically centred. */
  letter-spacing: .09em;
  padding-left: .09em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* Dismissal. Equal specificity to the .is-booting rule above and declared
   after it, so these win; `display` is left alone and stays flex. */
.loader.is-done {
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease), visibility 0s .45s;
}
.loader.is-done .loader-inner { opacity: 0; transform: translateY(-8px); }

/* --------------------------------------------------------------------------
   22. Page transition
   --------------------------------------------------------------------------
   The loader in section 21 IS the page transition — it runs on every page
   load. The gold wipe that used to live here is gone: two full-screen covers
   in a row is a stall, not a transition.
   -------------------------------------------------------------------------- */

/* Content settling in as the loader lifts — site.js adds .page-arrive at that
   moment, so this plays in front of the visitor rather than behind the
   overlay. */
@keyframes arrive {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.page-arrive main { animation: arrive .6s var(--ease) both; }

/* --------------------------------------------------------------------------
   23. Utilities
   -------------------------------------------------------------------------- */
/* Heading that must sit at h3 in the outline for correct heading order, but
   read at h4 size visually — used for the small panel titles. */
.h-sm { font-size: 1.0625rem; letter-spacing: -.008em; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   24. Reduced motion
   --------------------------------------------------------------------------
   Declared once, last, so it overrides every animation above.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .parallax { transform: none; }
  .tilt { transform: none; }
}

/* --------------------------------------------------------------------------
   25. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle,
  .journey-stage, .atmos { display: none; }
  /* Beats `.is-booting .loader` — a print fired mid-boot must not put a
     splash screen on the paper. */
  .is-booting .loader { display: none; }
  html, body { background: #fff; color: #000; }
  h1, h2, h3, h4 { color: #000; }
  p, li, .card p, .work-body p { color: #222; }
  .card, .work, .panel, .quote {
    break-inside: avoid;
    box-shadow: none;
    border-color: #ccc;
    background: #fff;
  }
}