/* ==========================================================================
   Keystone Web Systems — homepage
   --------------------------------------------------------------------------
   Written against the AI-design-slop audit of variant A. The constraints this
   file holds itself to, deliberately:

     · Typefaces      system stack for body/UI; Fraunces (Undercase Type,
                      Phaedra Charles & Flavia Zimbardi) for display only.
                      None of the four faces every AI template ships with.
     · Colour fills   flat only — nothing glowing behind anything, no fades.
     · Translucency   none. Depth is one hairline or one flat shadow.
     · Colour         light by default, dark only when the visitor's system
                      asks for it. Body text on dark sits at #e8eef3.
     · Elevation      one level, ever. No card inside a card.
     · Labels         sentence case. No uppercase + tracking.
   ========================================================================== */

/* ---------- display face (self-hosted, already in the repo) ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-var-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* Client brand faces, used only inside the recreations of their sites. */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('/assets/fonts/BarlowCondensed-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/assets/fonts/Barlow-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/assets/fonts/Barlow-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('/assets/fonts/karla-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('/assets/fonts/karla-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- tokens: light is the default ---------- */
:root {
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;

  --paper: #f7f8fa;         /* page */
  --paper-2: #eaeef3;       /* alternate band */
  --surface: #ffffff;       /* the one card level */
  --ink: #0a1b26;           /* body text — 16.5:1 on --paper */
  --ink-2: #44556a;         /* secondary text — 7.2:1 on --paper */
  --line: #d6dde5;
  --line-strong: #abb6c3;
  --accent: #2f6396;        /* 5.9:1 on --paper */
  --accent-deep: #042c43;
  --accent-ink: #ffffff;
  --shadow: 0 1px 2px rgba(10, 27, 38, 0.06);
  --shadow-lift: 0 14px 30px rgba(10, 27, 38, 0.14); /* photos lying on the page */
  --shadow-card: 0 12px 32px rgba(10, 27, 38, 0.08); /* the one lifted plan */
  --accent-wash: #e3ebf4;

  /* the two client palettes, for the site recreations only */
  --els-band: #12160f;
  --els-green: #6fb043;
  --els-bright: #83c95a;
  --els-text: #f4f5f0;
  --els-muted: #c6cdbb;
  --stc-cream: #faf6ee;
  --stc-clay: #2b2620;
  --stc-stone: #6f6759;
  --stc-forest: #2f4636;

  --maxw: 1180px;
  --pad: clamp(1.25rem, 4.5vw, 3rem);
  --head-h: 136px;
  /* logo colour roles (V2_Logos/keystone-*.svg) */
  --mark-field: #ffffff;
  --mark-deep: #042c43;
  --mark-pale: #a1bbd8;
  --mark-mid: #2f6396;
}

/* Dark only when the visitor's system asks. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0c161d;
    --paper-2: #122029;
    --surface: #14242e;
    --ink: #e8eef3;
    --ink-2: #cfdae3;
    --line: #263845;
    --line-strong: #3b515f;
    --accent: #a1bbd8;
    --accent-deep: #c2d5e9;
    --accent-ink: #04202f;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-lift: 0 14px 34px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.45);
    --accent-wash: #17303f;
    /* logo colour roles (V2_Logos/keystone-*.svg) */
    --mark-field: #14242e;
    --mark-deep: #cfe0f0;
    --mark-pale: #5b7fa6;
    --mark-mid: #a1bbd8;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; letter-spacing: -0.015em; margin: 0; }
p { margin: 0; }
em.q { font-style: italic; }

.container { width: min(100%, var(--maxw)); margin-inline: auto; padding-inline: var(--pad); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink); padding: 0.7rem 1rem;
}
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- section label: sentence case, small, dimmed ---------- */
.label {
  font-size: 0.9rem;
  color: var(--ink-2);
  margin-bottom: 0.7rem;
}
.label b { font-weight: 600; color: var(--ink); }

/* ---------- buttons: flat, opaque ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: 600 1rem/1 var(--sans);
  padding: 0.95rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-solid { background: var(--accent); color: var(--accent-ink); }
.btn-solid:hover { background: var(--accent-deep); }
.btn-line { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-line:hover { border-color: var(--ink); }
.btn-big { padding: 1.05rem 1.7rem; font-size: 1.05rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- header ---------- */
.head {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);                 /* opaque — no blur layer */
  border-bottom: 1px solid var(--line);
  transition: transform 0.28s ease, opacity 0.28s ease;
}
/* home.js adds .is-hidden once the page leaves the top; it comes back at the
   top, and whenever something inside it takes keyboard focus. */
.head.is-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.head.is-hidden:focus-within { transform: none; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .head { transition: none; } }
.head-row {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: var(--head-h);
}
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-decoration: none; font-weight: 700; font-size: 1.02rem;
}
.head .brand { gap: 1rem; font-family: var(--display); font-size: 1.9rem; letter-spacing: -0.01em; }
.brand img, .brand svg { flex: none; }
/* Keystone lockup: the mark is inlined so it takes the palette through the
   --mark-* tokens; the name is set in the display face beside it. */
.brand svg { width: auto; display: block; }
.head .brand svg { height: 72px; }
.head .brand .ks-word { white-space: nowrap; }
@media (max-width: 480px) {
  .head-row { gap: 0.75rem; }
  .head .brand { gap: 0.6rem; font-size: 1.3rem; }
  .head .brand svg { height: 56px; }
  .head-cta { white-space: nowrap; padding: 0.55rem 0.8rem; font-size: 0.9rem; }
  /* two-line lockup so the brand stays large beside the CTA */
  .head .brand .ks-word { white-space: normal; line-height: 1.05; max-width: 6.5em; }
}
@media (max-width: 374px) {
  .head-row { gap: 0.6rem; }
  .head .brand { gap: 0.45rem; font-size: 0.95rem; }
  .head .brand svg { height: 34px; }
  .head-cta { padding: 0.5rem 0.65rem; font-size: 0.86rem; }
}
.foot .brand { align-items: center; gap: 0.8rem; }
.foot .brand svg { height: 40px; }
.head-nav { margin-left: auto; display: flex; gap: 1.4rem; }
.head-nav a { text-decoration: none; color: var(--ink-2); font-size: 0.97rem; }
.head-nav a:hover { color: var(--ink); }
.head-cta { padding: 0.62rem 1.05rem; font-size: 0.95rem; }
@media (max-width: 820px) { .head-nav { display: none; } .head-cta { margin-left: auto; } }

/* ---------- hero ---------- */
.hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero-head { container-type: inline-size; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* The label above the headline: larger and in ink, led in by a short accent
   rule, so it holds its own against the display type instead of reading as a
   stray caption. Sentence case, no tracking. Chosen from three treatments
   compared on /b (Oct 2026). */
.hero-kicker {
  display: flex; align-items: flex-start; gap: 0.75rem;
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.18rem);
  font-weight: 600; color: var(--ink);
  margin-bottom: 0.35rem;
}
.hero-kicker::before {
  content: ""; flex: none; width: 32px; height: 2px; background: var(--accent);
  margin-top: 0.8em;            /* level with the first line if it wraps */
}
.hero-grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }

/* The headline is two sentences and it gets exactly two lines. Each is sized
   in container units so it fills the measure and never wraps — the long line
   sets the smaller size, which puts the emphasis on the short one. Below the
   breakpoint the sizes converge and wrapping comes back, because a nowrap
   line that can't fit is worse than a break. */
.hero-title { margin: 0; letter-spacing: -0.03em; }
.hero-title span { display: block; }
@media (min-width: 720px) {
  .hero-title span { white-space: nowrap; }
  .hero-title .ht-1 { font-size: 12.4cqi; line-height: 1.0; }
  .hero-title .ht-2 { font-size: 6.68cqi; line-height: 1.12; color: var(--ink-2); }
}
@media (max-width: 719px) {
  .hero-title { font-size: clamp(2.1rem, 8.4vw, 3rem); line-height: 1.06; }
  .hero-title .ht-2 { color: var(--ink-2); }
}
.hero-lede { font-size: clamp(1.08rem, 1.5vw, 1.24rem); color: var(--ink-2); max-width: 34rem; }
.hero-price {
  margin-top: 1.4rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  max-width: 34rem;
}
.hero-price b { display: block; font-size: 1.06rem; }
.hero-price span { color: var(--ink-2); font-size: 0.99rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
.hero-note {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 1.1rem; color: var(--ink-2); font-size: 0.96rem;
}
.hero-note svg { color: var(--accent); flex: none; }

.hero-shots { display: grid; gap: 1rem; }
.hero-shots-row { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1rem; align-items: end; }
.hero-cap { color: var(--ink-2); font-size: 0.93rem; }
.hero-cap b { color: var(--ink); font-weight: 600; }

/* ---------- device frames: one level of elevation, flat shadow ---------- */
.browser, .phone {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.browser-bar {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.b-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.b-url {
  margin-left: 0.6rem; flex: 1;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.74rem; color: var(--ink-2);
}
.b-bar { display: block; height: 6px; width: min(180px, 40%); background: var(--line); border-radius: 3px; }
.browser-view { container-type: inline-size; background: var(--els-band); }

.phone { border-radius: 22px; padding: 8px; position: relative; }
.phone-notch {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 62px; height: 5px; border-radius: 3px; background: var(--line-strong); z-index: 2;
}
.phone-view { container-type: inline-size; border-radius: 15px; overflow: hidden; background: var(--stc-cream); }

/* --- recreation: ELS fencing site --- */
.els-site { font-family: 'Barlow', system-ui, sans-serif; color: var(--els-text); font-size: 2.5cqw; }
.els-nav {
  display: flex; align-items: center; gap: 1em; white-space: nowrap;
  padding: 1.1em 1.5em; border-bottom: 1px solid rgba(244, 245, 240, 0.14);
}
.els-logo { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 700; font-size: 1.5em; }
.els-logo em { color: var(--els-green); font-style: normal; }
.els-links { margin-left: auto; display: flex; gap: 1.1em; }
.els-links i { font-style: normal; font-size: 0.95em; color: var(--els-muted); }
.els-phone { color: var(--els-bright); font-weight: 600; font-size: 0.95em; }
.els-hero { position: relative; }
.els-hero img { width: 100%; height: auto; }
.els-copy { position: absolute; inset: auto auto 7% 5%; z-index: 2; max-width: 66%; }
.els-eyebrow {
  display: block; font-size: 0.85em; color: var(--els-bright); margin-bottom: 0.5em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}
.els-h1 {
  display: block; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 700; font-size: 2.9em; line-height: 0.95;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.els-h1 em { color: var(--els-bright); font-style: normal; }
.els-btns { display: flex; gap: 0.6em; margin-top: 0.9em; }
.els-btns i {
  font-style: normal; font-size: 0.9em; font-weight: 600;
  padding: 0.55em 1em; border-radius: 4px;
}
.els-btn-solid { background: var(--els-green); color: #0b0f08; }
.els-btn-line { border: 1px solid rgba(244, 245, 240, 0.5); }

/* --- recreation: Sara Thomson Ceramics shop --- */
.stc-site { font-family: 'Karla', system-ui, sans-serif; color: var(--stc-clay); padding: 3.4cqw 3cqw 5cqw; font-size: 4.2cqw; }
.stc-nav { display: flex; align-items: center; padding-top: 1.4em; }
.stc-logo { font-family: var(--display); font-weight: 600; font-size: 1.05em; }
.stc-logo em { font-style: italic; }
.stc-cart { margin-left: auto; display: inline-flex; align-items: center; gap: 0.25em; color: var(--stc-stone); }
.stc-cart i {
  font-style: normal; font-size: 0.62em; font-weight: 700;
  background: var(--stc-forest); color: var(--stc-cream);
  border-radius: 999px; padding: 0.15em 0.45em;
}
.stc-cats { display: flex; gap: 0.8em; margin: 1em 0; color: var(--stc-stone); font-size: 0.72em; }
.stc-cats i { font-style: normal; }
.stc-cats i.on { color: var(--stc-forest); font-weight: 700; }
.stc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8em; }
.stc-card img { width: 100%; height: auto; border-radius: 3px; margin-bottom: 0.4em; }
.stc-name { display: block; font-size: 0.68em; line-height: 1.3; }
.stc-price { display: block; font-size: 0.68em; font-weight: 700; margin-top: 0.15em; }
.stc-add {
  display: block; margin-top: 0.45em; text-align: center;
  font-size: 0.62em; font-weight: 700;
  background: var(--stc-forest); color: var(--stc-cream);
  border-radius: 3px; padding: 0.45em 0;
}

/* ---------- filmstrip ---------- */
.strip-clip { overflow: hidden; }
.strip {
  padding: clamp(1.4rem, 3vw, 2.4rem) 0;
  transform: rotate(-1.6deg);
  margin-inline: -2%; width: 104%;
}
.strip-track { display: flex; width: max-content; animation: strip-roll 46s linear infinite; }
.strip-set {
  display: flex; list-style: none; margin: 0; padding: 0;
  gap: clamp(0.8rem, 1.6vw, 1.4rem); padding-right: clamp(0.8rem, 1.6vw, 1.4rem);
}
.strip-set li { flex: none; }
.strip-set img {
  height: clamp(170px, 24vw, 280px); width: auto;
  border-radius: 12px; object-fit: cover;
  box-shadow: var(--shadow-lift);
}
@keyframes strip-roll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .strip-track { animation: none; }
  .strip { transform: none; margin-inline: 0; width: 100%; }
  .strip-clip { overflow-x: auto; }
}
@media (max-width: 760px) { .strip { transform: rotate(-2.2deg); } }

/* ---------- generic section ---------- */
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section--alt { background: var(--paper-2); border-block: 1px solid var(--line); }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 0.8rem; text-wrap: balance; }
.section-head p { color: var(--ink-2); font-size: 1.07rem; }

/* ---------- three promises: text blocks, hairlines, no boxes ---------- */
.promises { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
.promises li { padding: 1.6rem 0; border-top: 1px solid var(--line); }
.promises li:last-child { border-bottom: 1px solid var(--line); }
.promises h3 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.promises p { color: var(--ink-2); max-width: 38rem; }
@media (min-width: 860px) {
  .promises { grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; }
  .promises li:last-child { border-bottom: 0; }
}

/* ---------- case study ---------- */
.study + .study { border-top: 1px solid var(--line); }
.study-head { max-width: 48rem; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.study-head h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 0.9rem; }
.study-lede { color: var(--ink-2); font-size: 1.08rem; }
.study-grid { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
@media (min-width: 980px) { .study-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }

/* the "what we built" list — plain text rows, no nested panels */
.built { list-style: none; padding: 0; margin: 0; }
.built li { padding: 1rem 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.built li:first-child { border-top: 0; padding-top: 0; }
.built b { display: block; color: var(--ink); font-weight: 600; }
/* the ceramics list runs full width, so it reads in two columns */
@media (min-width: 861px) {
  .built--two { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 3.5rem); }
  .built--two li:nth-child(-n+2) { border-top: 0; padding-top: 0; }
}
.study-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.study-foot p { font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.5rem); }
.study-foot .btn { margin-left: auto; }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1.2rem; }
.shots img { border-radius: 6px; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.figure-cap { color: var(--ink-2); font-size: 0.9rem; margin-top: 0.7rem; }
figure { margin: 0; }

/* ---------- the composed graphic (ST Ceramics) ----------
   The phone she runs the shop from, the stall it replaced, and the two lines
   her customers ask about. Everything here is a sibling laid over the same
   ground — nothing is a panel inside another panel, and the chips are opaque,
   so the depth comes from the overlap rather than from blur. */
.compose {
  position: relative;
  max-width: 880px;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 2.5rem);
  align-items: start;
}
.compose-phone { width: 100%; }

.polaroid {
  width: clamp(190px, 22vw, 270px);
  background: var(--surface);
  padding: 10px 10px 4px;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow-lift);
}
.polaroid img { border-radius: 2px; }
.polaroid figcaption {
  font-family: var(--display); font-style: italic;
  font-size: 0.88rem; color: var(--ink-2);
  padding: 0.7rem 0.2rem; text-align: center;
}
.compose-right { position: relative; justify-self: end; }
.compose-polaroid { margin-top: 6%; z-index: 2; transform: rotate(3.2deg); }

.chip {
  position: absolute; z-index: 3; margin: 0;
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.86rem; line-height: 1.35;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 0.6rem 0.9rem;
  box-shadow: var(--shadow-lift);
}
.chip b { font-weight: 600; }
.chip-ico {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
}
/* each chip laps over the thing it belongs to, so the pieces read as one
   picture rather than three objects sharing a row */
.chip-pay { left: clamp(7.5rem, 19vw, 17.5rem); top: 12%; max-width: 19rem; }
.chip-ship { left: -2.25rem; bottom: 14%; border-radius: 999px; }

@media (max-width: 860px) {
  /* the overlap needs room; below it the pieces simply stack */
  .compose { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1.2rem; }
  .compose-phone { width: min(300px, 74vw); }
  .compose-right { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
  .compose-polaroid { margin-top: 0; transform: rotate(-2deg); }
  .chip-ship { left: auto; }
  .chip { position: static; }
  .chip-pay, .chip-ship { max-width: none; }
  .chip-ship { right: auto; }
}

/* ---------- services ---------- */
.svc { list-style: none; padding: 0; margin: 0; }
.svc li {
  display: grid; gap: 0.4rem 2rem; align-items: baseline;
  padding: 1.7rem 0; border-top: 1px solid var(--line);
}
.svc li:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .svc li { grid-template-columns: 3.5rem minmax(0, 1fr) 15rem; } }
.svc-num { font-family: var(--display); color: var(--ink-2); font-size: 1.1rem; }
.svc h3 { font-size: 1.45rem; margin-bottom: 0.4rem; }
.svc p { color: var(--ink-2); max-width: 44rem; }
.svc-tags { color: var(--ink-2); font-size: 0.94rem; }

/* ---------- who it's for ---------- */
.aud { display: grid; gap: 2.5rem; }
@media (min-width: 880px) { .aud { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
.aud h3 { font-size: 1.5rem; margin-bottom: 0.9rem; }
.aud ul { list-style: none; padding: 0; margin: 0; }
.aud li { padding: 0.7rem 0; border-top: 1px solid var(--line); color: var(--ink-2); }

/* ---------- process ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.steps li { padding: 1.4rem 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps b { display: block; color: var(--ink); font-family: var(--display); font-size: 1.15rem; font-weight: 600; margin-bottom: 0.25rem; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); column-gap: 2rem; }
  .steps li:last-child { border-bottom: 0; }
}

/* ---------- pricing: the only card in the design ----------
   Structure and copy come from the brief's own markup; the colours, type and
   dark theme are B's tokens, so it flips with the rest of the page and needs
   no web font of its own. The banned all-caps kicker is dropped — the h2 says
   "Pricing" better than a label above it could. */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
.plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2.5rem 2rem 2rem;
  display: flex; flex-direction: column; gap: 1.4rem;
}
.plan--featured { border: 2px solid var(--accent); box-shadow: var(--shadow-card); }
.plan-badge {
  align-self: flex-start; margin: 0; min-height: 1.4rem;
  display: inline-flex; align-items: center;
  padding: 0.15rem 0.65rem; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent-deep);
  font-size: 0.82rem; font-weight: 600; line-height: 1.2;
}
/* keeps the three plan names level across the row, badge or no badge */
.plan-badge-space { height: 1.4rem; }
.plan-name { font-family: var(--display); font-size: 1.6rem; margin-bottom: 0.5rem; }
.plan-desc { color: var(--ink-2); font-size: 1.02rem; line-height: 1.45; }
.plan-price { display: flex; align-items: baseline; gap: 0.35rem; }
.plan-amount { font-family: var(--display); font-size: 3.1rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.plan-per { font-size: 1.02rem; font-weight: 600; color: var(--ink-2); }
.plan-terms { margin-top: 0.4rem; font-size: 0.93rem; color: var(--ink-2); }
.plan-features {
  list-style: none; margin: 0; padding: 0;
  flex-grow: 1; border-bottom: 1px solid var(--line);
}
.plan-features li {
  padding: 0.8rem 0; border-top: 1px solid var(--line);
  font-size: 1.02rem; line-height: 1.4; color: var(--ink-2);
}
.plan-features .is-key { font-weight: 600; color: var(--ink); }
.plan-features .is-lead { color: var(--ink); font-weight: 600; }
.plan-cta {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; border-radius: 10px; text-decoration: none;
  font: 600 1.02rem/1 var(--sans);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.plan-cta:hover { border-color: var(--ink); }
.plan-cta--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.plan-cta--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
@media (prefers-reduced-motion: reduce) { .plan-cta { transition: none; } }

/* what every plan comes with, on a band rather than in more cards */
.trust {
  list-style: none; margin: 2.5rem 0 0; padding: 2rem;
  border-radius: 16px; background: var(--paper-2); border: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem;
}
.trust li { display: flex; flex-direction: column; gap: 0.6rem; }
.trust svg { width: 28px; height: 28px; stroke: var(--accent); }
.trust-title { font-weight: 600; font-size: 1.06rem; }
.trust-text { font-size: 0.98rem; line-height: 1.45; color: var(--ink-2); }
.trust-text a { color: var(--accent); font-weight: 600; }

.pricing-notes { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.6rem; color: var(--ink-2); }
.pricing-notes a { color: var(--accent); font-weight: 600; }
.pricing-notes a:hover { color: var(--accent-deep); }

@media (max-width: 980px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
  .plan-badge-space { display: none; }
  .plan--featured { order: -1; }          /* the one most people pick, first */
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .plan { padding: 1.75rem 1.4rem 1.5rem; }
  .trust { grid-template-columns: minmax(0, 1fr); padding: 1.5rem; }
}

/* ---------- onboarding / brief ---------- */
.brief-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 940px) { .brief-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); } }
.brief h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 0.9rem; }
.brief-lede { color: var(--ink-2); font-size: 1.08rem; }
.brief-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1.4rem 0; color: var(--ink-2); }
.brief-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.5rem; }
.brief-list { list-style: none; padding: 0; margin: 0; }
.brief-list li { padding: 0.85rem 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.brief-list li:last-child { border-bottom: 1px solid var(--line); }
.brief-list b { color: var(--ink); font-weight: 600; }

/* ---------- contact ---------- */
.contact-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 940px) { .contact-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); } }
.contact-copy h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 0.9rem; }
.contact-copy p { color: var(--ink-2); }
.contact-list { list-style: none; padding: 0; margin: 1.6rem 0 0; }
.contact-list li { padding: 0.8rem 0; border-top: 1px solid var(--line); display: flex; gap: 1rem; }
.contact-list span { color: var(--ink-2); min-width: 6rem; }

.form { display: grid; gap: 1rem; }
.form label { display: grid; gap: 0.4rem; font-size: 0.97rem; font-weight: 600; }
.form label em { font-weight: 400; font-style: normal; color: var(--ink-2); }
.form input, .form textarea {
  font: inherit; font-weight: 400;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 6px;
  padding: 0.8rem 0.9rem;
}
.form input:focus-visible, .form textarea:focus-visible { border-color: var(--accent); }
.form textarea { resize: vertical; }
.form-status { padding: 0.9rem 1rem; border-radius: 6px; border: 1px solid var(--line-strong); }
.form-ok { border-color: var(--accent); color: var(--accent); }
.form-err { border-color: #b04a27; color: #b04a27; }
@media (prefers-color-scheme: dark) { .form-err { border-color: #e79c7f; color: #e79c7f; } }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 2.5rem 0; }
.foot-row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.foot a { color: var(--ink-2); text-decoration: none; font-size: 0.95rem; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot-copy { margin-left: auto; color: var(--ink-2); font-size: 0.92rem; }
.foot-demos { display: flex; gap: 0.25rem; margin-top: 1.25rem; padding-left: calc(var(--pad) - 8px); }
.foot .foot-demos a {
  display: grid; place-items: center; width: 32px; height: 32px;
  color: var(--ink-2); opacity: 0.45;
}
.foot .foot-demos a:hover, .foot .foot-demos a:focus-visible { opacity: 1; color: var(--ink); }
.foot .foot-demos a[hidden] { display: none; }

/* ---------- reveal (JS adds .in; without JS everything is visible) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(12px); }
  .js [data-reveal].in { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s ease; }
}

/* ==========================================================================
   Full-bleed layout (was the /b experiment, promoted to the homepage Oct 2026)
   --------------------------------------------------------------------------
   Everything above still holds; this section only changes where the work
   sits. The words keep their reading measure, but the design work runs edge
   to edge with no browser chrome. It comes last so it wins the cascade, as
   it did when it was a separate stylesheet loaded after this one.

   Images are never stretched: each one either keeps its own aspect ratio
   (height: auto) or is cropped to a fixed one with object-fit: cover.
   ========================================================================== */

/* a wider column, so text lines up closer to the bleeds on big screens */
:root { --maxw: 1440px; }

/* ---------- hero: copy in the measure, the work across the page ---------- */
.hero { padding-bottom: 0; }
.hero-intro {
  display: grid; gap: 1.6rem clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 980px) {
  .hero-intro { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .hero-intro .hero-ctas { margin-top: 0; }
}

.hero-bleed { position: relative; }
.bleed-site { margin: 0; background: var(--els-band); }
.bleed-site-view { container-type: inline-size; }
/* the recreation was sized for a framed screenshot (2.5cqw); full width it
   would shout, so it scales more gently and stops growing on big screens */
.bleed-site .els-site { font-size: clamp(11px, 1.35cqw, 22px); }
.bleed-site .els-nav { padding-inline: var(--pad); }
.bleed-site .els-copy { left: var(--pad); max-width: min(62%, 44em); }
.bleed-site .els-hero img {
  width: 100%; height: auto;
  aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 60%;
}
@media (max-width: 719px) {
  .bleed-site .els-links { display: none; }
  .bleed-site .els-hero img { aspect-ratio: 4 / 3.4; }
  .bleed-site .els-copy { max-width: 58%; bottom: 9%; }
}

/* the phone laps the bottom edge of the band, aligned to the text column */
.hero-bleed-over {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: flex-end;
  pointer-events: none;
}
.hero-bleed-phone {
  width: clamp(130px, 19vw, 270px);
  transform: translateY(18%);
  box-shadow: var(--shadow-lift);
  pointer-events: auto;
}
.hero-cap--b {
  padding-top: 1.4rem; padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
  /* keeps the caption clear of the phone hanging below the band */
  padding-right: calc(var(--pad) + clamp(130px, 19vw, 270px) + 1.5rem);
  max-width: none;
}

/* ---------- full-bleed photo rows ---------- */
.photo-bleed { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.photo-bleed img { width: 100%; height: auto; border-radius: 0; }

/* ELS: four job photos, each at its own 900 × 660 shape */
.photo-bleed--four { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .photo-bleed--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.photo-bleed--four .figure-cap { grid-column: 1 / -1; margin-top: 0.9rem; }

/* STC: three pieces, then the stall, cropped to one portrait shape so the row
   sits level (the swan is 680 × 772, the rest 3:4) */
.photo-bleed--stc {
  position: relative;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0;
}
@media (min-width: 900px) { .photo-bleed--stc { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stc-tile { margin: 0; position: relative; }
.stc-tile img { aspect-ratio: 3 / 4; object-fit: cover; }
.stc-tile figcaption {
  position: absolute; left: 0.8rem; bottom: 0.8rem; right: 0.8rem;
  font-family: var(--display); font-style: italic; font-size: 0.9rem;
  color: var(--ink); background: var(--surface);
  border-radius: 4px; padding: 0.4rem 0.65rem; width: fit-content;
}
/* sits on the ocean bowl, clear of the stall's own sign */
.photo-bleed--stc .chip-ship { left: auto; right: calc(25% + 1.4rem); bottom: auto; top: 1.4rem; }

/* the phone climbs up into the photo row; the spec list sits beside it */
.stc-b {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin-bottom: 0.5rem;
}
.stc-b-phone { width: min(300px, 74vw); justify-self: center; margin-top: 2rem; position: relative; z-index: 2; box-shadow: var(--shadow-lift); }
.stc-b-copy { padding-top: 1.6rem; }
.stc-b-copy .chip-pay { position: static; margin-bottom: 1.6rem; max-width: none; }
@media (min-width: 900px) {
  .stc-b { grid-template-columns: 300px minmax(0, 1fr); }
  .stc-b-phone { width: 100%; justify-self: start; margin-top: -14vw; }
  .stc-b-copy { padding-top: 2.2rem; }
}
@media (min-width: 1500px) { .stc-b-phone { margin-top: -210px; } }
@media (max-width: 899px) {
  /* two-up: top right of the stag, so the stall caption below stays clear */
  .photo-bleed--stc .chip-ship { position: absolute; top: 0.8rem; right: 0.8rem; left: auto; font-size: 0.8rem; }
  .stc-tile figcaption { font-size: 0.8rem; }
}