/* Way Better Studios
   Built to the Brand Guide v2.0, 28 July 2026.
   Black, white, and tan. Work Sans only, weights 700 and 400 only.
   Uppercase and negative tracked for structure, sentence case for reading.
   Zero radius, no shadows, no blur, no accent colour.
   Portraits run in full colour, which departs from the guide's grayscale rule
   at Kyler's direction, 29 July 2026. Everything else still holds. */

/* Work Sans is served from this origin, not from Google. A visitor's IP
   address never reaches a third party just to read the page. Both files are
   the variable cut, so 400 and 700 come out of one download per subset. */

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/work-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/work-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --black: #000000;
  --ink:   #111111;
  --ink2:  #222222;
  --white: #FFFFFF;

  /* Tan in three depths. Bone is the default page surface. */
  --bone:  #FAF9F6;
  --sand:  #F2F0EB;
  --stone: #EAE8E3;

  /* Grey, for hierarchy only. */
  --g1: #4B5563;   /* secondary body, standfirsts */
  --g2: #6B7280;   /* labels, captions, metadata */
  --g3: #9CA3AF;   /* the one expressive move: a muted line in a headline */
  --g4: #E5E7EB;   /* body type on dark */

  --line: rgba(17, 17, 17, 0.10);   /* hairlines at ten percent Ink */
  --line-dk: #222222;

  --f: "Work Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --max: 1180px;
  --pad: clamp(20px, 5vw, 56px);
  --gap: clamp(60px, 9vw, 128px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--f);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
/* Browsers default figure to margin: 1em 40px. Left unreset it silently steals
   80px of width from every quote card, squeezing the text to a 22 character
   measure. Only the testimonial cards are figures, so zero it globally. */
figure { margin: 0; }

/* ---------- type ----------
   Uppercase and negative tracked for anything structural. Sentence case and
   normal tracking for anything read. That contrast is the identity. */

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}
h1 { font-size: clamp(2.5rem, 6.4vw, 3.75rem); line-height: 1.0; }
h2 { font-size: clamp(1.7rem, 4vw, 2.25rem); line-height: 1.02; }
h3 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.1; }
h1, h2, h3 { overflow-wrap: break-word; }

/* The one expressive move: a muted line inside a headline. Once per page. */
.mute { color: var(--g3); }

/* Small tracked label. The studio's most repeatable signature after the
   palette. Wide as it gets small. */
.lab {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--g2);
  margin: 0 0 14px;
}

.lede {
  font-size: clamp(1.05rem, 1.4vw, 1.19rem);
  line-height: 1.45;
  color: var(--g1);
  max-width: 620px;
}
.muted { color: var(--g2); }

p { margin: 0 0 14px; max-width: 66ch; }
p:last-child { margin-bottom: 0; }

/* ---------- layout ----------
   Sections are divided by changing the background, never by drawing a line.
   Bands alternate Bone, Sand, Stone, with full black for weight. */

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

section { padding: var(--gap) 0; }
.section-tight { padding: clamp(48px, 6vw, 80px) 0; }

.sand  { background: var(--sand); }
.stone { background: var(--stone); }

.dark { background: var(--black); color: var(--g4); }
.dark h1, .dark h2, .dark h3, .dark strong { color: var(--white); }
.dark .lede { color: var(--g4); }
.dark .lab, .dark .muted { color: var(--g2); }

hr, .rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Two column: heading left, body right. The heading sticks while its body
   scrolls past. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 6vw, 90px);
  align-items: start;
}
@media (min-width: 861px) {
  .split > div:first-child { position: sticky; top: 108px; }
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ---------- header ---------- */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--black); color: var(--white); padding: 12px 18px;
}
.skip:focus { left: 8px; top: 8px; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bone);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 72px;
}

/* The mark is type, not a logo. WAY BETTER reads as the mark; Studios is a
   subline at label scale, never at equal weight. */
.wordmark { display: block; text-decoration: none; line-height: 1; }
.wordmark .wm-main {
  display: block;
  font-weight: 700; font-size: 16px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
}
.wordmark .wm-sub {
  display: block;
  font-weight: 700; font-size: 9px;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--g2); margin-top: 4px;
}

.nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 36px); }
.nav a {
  text-decoration: none;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--ink);
  padding: 8px 0;
  border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a:focus-visible { border-bottom-color: var(--ink); }
.nav a.is-current { border-bottom-color: var(--ink); }
/* .nav a is more specific than .btn, so the button is restated here. */
.nav a.btn {
  border-bottom: 0; padding: 13px 22px;
  background: var(--black); color: var(--white); letter-spacing: 0.2em;
}
.nav a.btn:hover, .nav a.btn:focus-visible { background: var(--ink2); border-bottom: 0; }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 10px; margin-right: -10px; color: inherit;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: currentColor;
  margin: 5px 0; transition: transform .22s ease, opacity .22s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bone); border-bottom: 1px solid var(--line);
    padding: 8px var(--pad) 20px;
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav a:last-child { border-bottom: 0; margin-top: 12px; }
  .nav a.btn { text-align: center; }
}

/* ---------- buttons ----------
   Solid black with white uppercase type, or bare type. No outline button,
   no third style, zero radius. */

.btn {
  display: inline-block;
  background: var(--black);
  color: var(--white);
  text-decoration: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 18px 32px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.btn:hover, .btn:focus-visible { background: var(--ink2); }
.dark .btn { background: var(--white); color: var(--black); }
.dark .btn:hover, .dark .btn:focus-visible { background: var(--g4); }

/* Bare type, the only other button. */
.link-btn {
  display: inline-block;
  background: none;
  border: 0;
  text-decoration: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 18px 0;
  cursor: pointer;
}
.link-btn:hover, .link-btn:focus-visible { color: var(--g1); }
.dark .link-btn { color: var(--white); }
.dark .link-btn:hover, .dark .link-btn:focus-visible { color: var(--g4); }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px; margin-top: clamp(28px, 4vw, 44px); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.dark :focus-visible { outline-color: var(--white); }

/* ---------- hero ---------- */

.hero { padding-top: clamp(52px, 7vw, 84px); padding-bottom: clamp(40px, 5vw, 64px); }
.hero h1 { max-width: 17ch; }
.hero .lede { margin-top: clamp(22px, 3vw, 32px); }

/* The home hero. Display type at full scale, the supporting line and the
   single button held at the base. */
.hero-lg {
  min-height: min(82vh, 760px);
  display: flex;
  align-items: stretch;
  padding-top: clamp(60px, 11vh, 140px);
  padding-bottom: clamp(44px, 7vh, 76px);
}
.hero-lg .wrap { width: 100%; display: flex; flex-direction: column; justify-content: space-between; }

/* The hero photograph: a cantilevered eave against overcast sky. The diagonal
   runs beneath the headline and the timber mass sits behind the button.
   Pair with .dark, which already supplies white display type, a grey lede, and
   the inverted button, so this rule only has to carry the image and the scrim.
   The sky is light, so the frame is scrimmed rather than trusting the crop to
   land dark behind the type at every viewport. Heavier at the base, where the
   supporting line and the button sit over open sky. */
.hero-photo {
  position: relative;
  background-color: var(--black);
  /* Phones get the frame in its native 2:3 portrait. Cropping the landscape
     version to a tall viewport reduces it to a vertical strip and throws the
     diagonal away, which is the whole subject. */
  background-image: url("/assets/img/hero-mobile.jpg");
  background-position: 50% 38%;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (min-width: 1000px) {
  .hero-photo {
    background-image: url("/assets/img/hero-2000.jpg");
    background-position: 50% 42%;
  }
}
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.46) 44%,
    rgba(0, 0, 0, 0.76) 100%
  );
}
/* The scrim is a sibling that paints first, so the content only needs a
   position to sit above it. No z-index anywhere. */
.hero-photo > .wrap { position: relative; }
.hero-lg h1 {
  font-size: clamp(2.8rem, 8.6vw, 6rem);
  line-height: 1.0;
}
/* The headline is locked to three lines on desktop so the muted line is
   exactly one line. On narrow screens it wraps naturally instead. */
@media (max-width: 720px) {
  .hero-lg h1 br { display: none; }
}
.hero-foot {
  display: grid;
  gap: clamp(26px, 4vw, 40px);
  margin-top: clamp(48px, 8vh, 100px);
}
.hero-foot .lede { margin-top: 0; max-width: 46ch; }
.hero-foot .btn { justify-self: start; }
@media (min-width: 880px) {
  .hero-foot {
    grid-template-columns: minmax(0, 46ch) auto;
    align-items: end;
    justify-content: space-between;
  }
  .hero-foot .btn { justify-self: end; }
}

/* ---------- the offer: what the engagement includes ----------
   A tile grid, so the list reads as scope rather than as a sequence. Eight
   items land on four columns exactly at desktop and reflow to two, then one. */

.svc {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin: clamp(40px, 5.5vw, 70px) 0 0;
  padding: 0;
}

/* Hairlines sit on the items, not on the container behind them. A container
   background showing through 1px gaps paints any empty cell as a solid block,
   so the tile count could not change safely. This way it can. */
.svc-item {
  padding: clamp(22px, 2.6vw, 32px);
  box-shadow: 0 0 0 1px var(--line-dk);
}
.svc-item dt {
  margin-bottom: 9px;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.25vw, 1.05rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--white);
}
.svc-item dd {
  margin: 0;
  color: var(--g4);
  font-size: 15px;
  line-height: 1.55;
}

.offer-terms {
  margin: clamp(26px, 3.4vw, 40px) 0 0;
  color: var(--g4);
  max-width: 58ch;
}

/* ---------- selected work, home page ----------
   Three portraits at the same crop, each one a link into its case study.
   Grayscale is the rule here as everywhere else. */

.work-grid { display: grid; gap: clamp(22px, 3vw, 36px); }
@media (min-width: 760px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }

.work-card { display: block; text-decoration: none; color: inherit; }
.work-shot {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink);
}
.work-shot img {
  width: 100%; height: 100%; object-fit: cover;
  /* Subjects sit high in frame, so the crop holds the head, not the floor. */
  object-position: 50% 22%;
}
.work-name {
  display: inline-block;
  margin-top: 18px;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
}
.work-card:hover .work-name,
.work-card:focus-visible .work-name { border-bottom-color: var(--ink); }
.work-client {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--g2);
}
.work-figure {
  display: block;
  margin-top: clamp(16px, 2vw, 22px);
  padding-top: clamp(14px, 1.8vw, 18px);
  border-top: 1px solid var(--line);
}
.work-stat {
  display: block;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.work-statlab {
  display: block;
  margin-top: 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--g2);
}

/* ---------- work index ---------- */

.index { border-top: 1px solid var(--line); }
.index-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: clamp(22px, 3.4vw, 40px) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: padding-left .4s cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 760px) {
  .index-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) auto;
    align-items: baseline;
    gap: 24px;
  }
  .index-row:hover, .index-row:focus-visible { padding-left: clamp(14px, 1.8vw, 26px); }
}
.index-name {
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.index-meta { color: var(--g2); font-size: 13px; }
.index-stat {
  font-size: 14px;
  color: var(--g1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.index-row:hover .index-stat, .index-row:focus-visible .index-stat { color: var(--ink); }

/* ---------- case studies ---------- */

.case { padding: var(--gap) 0; }
.case-head { display: grid; gap: clamp(24px, 4vw, 56px); }
@media (min-width: 900px) { .case-head { grid-template-columns: 1.1fr 1fr; align-items: center; } }
.case-shot { overflow: hidden; background: var(--ink); aspect-ratio: 3 / 2; }
.case-shot img { width: 100%; height: 100%; object-fit: cover; }
.case-client { margin: 12px 0 0; font-size: 14px; color: var(--g2); }

.case .metrics {
  margin-top: clamp(26px, 3.4vw, 40px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
  max-width: 460px;
}
.case-body { margin-top: clamp(32px, 4vw, 56px); }
.case-body h4 {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--g1); margin: 0 0 10px;
}
.case-body .block + .block { margin-top: clamp(24px, 3vw, 34px); }

.metrics { display: flex; flex-wrap: wrap; gap: 24px 34px; margin: 0; padding: 0; }
.metrics div { margin: 0; }
.metrics dt {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--g2); margin-bottom: 6px;
}
.metrics dd {
  margin: 0;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Where the numbers come from, set quietly under the metrics. */
.source {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--g2);
  max-width: 46ch;
}

/* ---------- testimonials ----------
   White is a material for cards lifted off tan. */

.quotes { display: grid; gap: clamp(18px, 2.4vw, 26px); }
@media (min-width: 780px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote {
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(24px, 3vw, 34px);
  display: flex; flex-direction: column;
}
.quote blockquote {
  margin: 0 0 22px;
  font-size: 1rem;
  line-height: 1.55;
}
.quote figcaption {
  margin-top: auto;
  font-size: 13px;
  display: flex; align-items: center; gap: 14px;
}
.quote .who { font-weight: 700; }
.quote .role { color: var(--g2); }

/* Headshot sits beside the attribution, square like every other portrait here.
   A card with no photo simply omits .shot and the row closes up.
   Avatars are pre-cropped square to head and shoulders and served at 192px, so
   there is no object-position to tune: a new one just needs the same crop. */
.quote .shot {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  overflow: hidden;
  background: var(--ink);
}
.quote .shot img {
  width: 100%; height: 100%; object-fit: cover;
}

/* Placeholder state, deliberately obvious so it cannot ship unnoticed. */
.quote.is-placeholder { border-style: dashed; background: transparent; }
.quote.is-placeholder blockquote { color: var(--g2); }
.placeholder-note {
  margin-top: clamp(24px, 3vw, 32px);
  font-size: 13px; color: var(--g2);
  border-left: 2px solid var(--ink); padding-left: 14px;
}

/* ---------- team ---------- */

.team { display: grid; gap: clamp(22px, 3vw, 40px); }
@media (min-width: 640px) {
  .team { grid-template-columns: repeat(3, 1fr); }
  .team-2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
}
.member .shot { aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink); }
.member .shot img {
  width: 100%; height: 100%; object-fit: cover;
  /* Portraits taller than the tile crop from the bottom, not the head. */
  object-position: 50% 12%;
}
.member h3 { margin: 18px 0 8px; }
.member .role {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--g2);
}
.member .bio {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--g1);
  max-width: 46ch;
}

/* ---------- form ---------- */

.form-section { max-width: 720px; }
fieldset { border: 0; padding: 0; margin: 0 0 clamp(36px, 5vw, 52px); }
legend {
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink);
  padding: 0 0 14px; margin-bottom: 26px; width: 100%;
  border-bottom: 1px solid var(--line);
}
.field { margin-bottom: 20px; }
.field-row { display: grid; gap: 20px; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field-row .field { margin-bottom: 0; }

label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 7px; }
.req { color: var(--g2); font-weight: 400; }

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 13px 14px;
  transition: border-color .16s ease;
}
textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B7280' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.consent { display: flex; gap: 12px; align-items: flex-start; margin: 8px 0 28px; }
.consent input { margin-top: 4px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--black); }
.consent label { font-size: 13px; font-weight: 400; color: var(--g2); line-height: 1.55; margin: 0; }

.form-msg {
  border: 1px solid var(--line);
  padding: clamp(24px, 3vw, 34px);
  background: var(--white);
}
.form-msg h2 { margin-bottom: 10px; }
[hidden] { display: none !important; }

.calendar-embed {
  border: 1px solid var(--line); overflow: hidden;
  background: var(--white); margin-top: 24px;
}
.calendar-embed iframe { width: 100%; height: 620px; border: 0; display: block; }

/* Honeypot. Off screen rather than display:none so bots still fill it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--black); color: var(--g4);
  padding: clamp(48px, 6vw, 76px) 0 clamp(28px, 3vw, 40px);
}
.footer-top {
  display: grid; gap: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--line-dk);
}
@media (min-width: 760px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-top h4 {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--g2); margin: 0 0 16px;
}
.footer-top p { color: var(--g4); font-size: 14px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-links a { text-decoration: none; font-size: 14px; color: var(--g4); border-bottom: 1px solid transparent; }
.footer-links a:hover, .footer-links a:focus-visible { border-bottom-color: var(--white); color: var(--white); }

/* Social marks. Square hairline boxes that invert on hover, so the row reads as
   part of the system rather than as borrowed brand colour. The glyphs inherit
   currentColor, which is why the swap needs no separate icon rule. */
.social {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.social a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  color: var(--g4);
  box-shadow: 0 0 0 1px var(--line-dk);
}
.social a:hover, .social a:focus-visible {
  color: var(--black);
  background: var(--white);
  box-shadow: 0 0 0 1px var(--white);
}
.social svg { display: block; width: 17px; height: 17px; fill: currentColor; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  padding-top: clamp(20px, 2.5vw, 28px);
  font-size: 13px; color: var(--g2);
}
.footer-bottom a { text-decoration: none; border-bottom: 1px solid transparent; }
.footer-bottom a:hover { border-bottom-color: var(--g2); }

/* ---------- legal pages ---------- */

.legal { max-width: 74ch; }
.legal h2 { margin-top: clamp(44px, 5vw, 64px); }
.legal h3 { margin-top: clamp(28px, 3vw, 38px); margin-bottom: 8px; }
.legal .updated { color: var(--g2); font-size: 13px; margin-top: 10px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; max-width: 64ch; }

/* ---------- reveal on scroll ---------- */

.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; }
}