/* ==========================================================================
   Booti® — booti.co.uk
   Static build. No framework, no build step, no external requests.

   Contents
   1.  Fonts
   2.  Tokens
   3.  Reset & base
   4.  Layout primitives
   5.  Components  — tag, button, frame, swing tag
   6.  Sections
   7.  Footer
   8.  Responsive
   9.  Motion
   ========================================================================== */


/* 1. Fonts ================================================================= */
/* Cabinet Grotesk & Satoshi by Indian Type Foundry, via Fontshare.
   Self-hosted under the ITF Free Font Licence — see assets/fonts/LICENCE.txt */

@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('assets/fonts/cabinet-grotesk-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('assets/fonts/cabinet-grotesk-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('assets/fonts/cabinet-grotesk-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('assets/fonts/satoshi-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('assets/fonts/satoshi-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('assets/fonts/satoshi-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}


/* 2. Tokens ================================================================ */

:root {
  /* Palette, drawn from the Booti mark.
     Two rules hold everywhere:
       · white text never sits on --teal (2.6:1)
       · --peach is a fill only, and always carries --ink (9.2:1) */
  --white:     #ffffff;
  --ink:       #0c1d33;   /* headings + body ....... 16.4:1 on white */
  --ink-soft:  #48586e;   /* secondary copy ........  7.3:1 on white */
  --teal:      #09b1b8;   /* fills and graphics only */
  --teal-ink:  #05777c;   /* headings, links, CTA ..  5.3:1 on white */
  --teal-deep: #05666b;   /* CTA hover */
  --peach:     #ffae75;   /* fills only */
  --cream:     #f8f5ee;   /* soft section framing */
  --hairline:  #e8e4da;

  --font-display: 'Cabinet Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: clamp(1.25rem, 5vw, 3rem);
  --shell:  74rem;                          /* 1184px */
  --bay:    clamp(3.25rem, 6vw, 5.5rem);    /* vertical section rhythm — doubles between sections */

  /* One radius language, taken from the logo's tag cards:
     three soft corners, one tight. */
  --tag-r:   10px 10px 10px 3px;
  --btn-r:   14px 14px 14px 4px;
  --card-r:  20px 20px 20px 5px;
  --frame-r: 32px 32px 32px 8px;
}


/* 3. Reset & base ========================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); line-height: 1; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
img, picture, svg { max-width: 100%; }
img { height: auto; }

a { color: var(--teal-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal-deep); }

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

.skip {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: .8rem 1.2rem;
  background: var(--ink);
  color: #fff;
  border-radius: var(--btn-r);
  font-weight: 700;
  text-decoration: none;
  transition: top .18s ease;
}
.skip:focus { top: 1rem; color: #fff; }


/* 4. Layout primitives ===================================================== */

.wrap {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--bay); }

/* Anchor targets clear the sticky masthead. */
[id] { scroll-margin-top: 6.5rem; }

/* A line break that only applies once there's room for it. */
.brk { display: none; }
@media (min-width: 55rem) { .brk { display: inline; } }

.eyebrow { margin: 0 0 1.4rem; }

.h2 {
  font-weight: 700;
  font-size: clamp(2.1rem, 5.2vw, 4.25rem);
  line-height: .98;
  letter-spacing: -.035em;
  color: var(--teal-ink);
}
.h2--xl { font-size: clamp(2.6rem, 7.2vw, 5.75rem); }

.lead {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
  max-width: 34ch;
}

/* The oversized closing lines. Used sparingly — three times on the page. */
.statement {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--ink);
  max-width: 18ch;
}
.statement--sm { font-size: clamp(1.35rem, 2.4vw, 1.85rem); max-width: none; }


/* 5. Components ============================================================ */

/* -- The tag ---------------------------------------------------------------
   The signature device, lifted straight from the logo: a slightly tilted
   card with three soft corners and one tight one. Used for section eyebrows,
   step numbers and the sell-category list. Nothing else on the page is
   decorated. */

.tag {
  display: inline-block;
  padding: .5em .85em;
  border-radius: var(--tag-r);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .1em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--ink);
  transform: rotate(-1.4deg);
}
.tag--teal  { background: var(--teal); }
.tag--peach { background: var(--peach); }
.tag--cream { background: var(--cream); box-shadow: inset 0 0 0 1px var(--hairline); }
.tag--navy  { background: var(--ink); color: #fff; }

/* -- Buttons --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .85rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--btn-r);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn--primary { background: var(--teal-ink); color: #fff; }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--teal-deep); color: #fff; }

.btn--ghost {
  background: var(--white);
  color: var(--teal-ink);
  border-color: var(--teal-ink);
}
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--cream); color: var(--teal-deep); }

.btn--sm { min-height: 2.75rem; padding: .6rem 1.15rem; font-size: .9375rem; }
.btn--block { width: 100%; }

/* -- Image frames ----------------------------------------------------------
   No square corners, and the edges feather into the page rather than cutting
   against it. A gradient overlay rather than mask-image: universally
   supported, and it works because the canvas is guaranteed white. */

.frame {
  position: relative;
  margin: 0;
  border-radius: var(--frame-r);
  overflow: hidden;
}
.frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(108% 108% at 50% 48%,
      rgba(255,255,255,0) 50%, rgba(255,255,255,.5) 78%, rgba(255,255,255,.97) 100%),
    linear-gradient(90deg,
      rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 12%,
      rgba(255,255,255,0) 88%, rgba(255,255,255,.92) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 12%,
      rgba(255,255,255,0) 88%, rgba(255,255,255,.9) 100%);
}

.frame--hero  { aspect-ratio: 4 / 3.05; }
.frame--proof { aspect-ratio: 4 / 3; }
.frame--wide  { aspect-ratio: 4 / 3; }
.frame--tile  { aspect-ratio: 1 / 1; max-width: 22rem; }

/* -- The swing tag ---------------------------------------------------------
   The one flourish. It carries the promise on the hero and the question on
   the clutter tile, and appears nowhere else. */

.swing {
  position: absolute;
  z-index: 2;
  width: 8.75rem;
  transform: rotate(var(--swing-rot, -8deg));
  /* Pivot where the cord meets the tag, so it swings like it's hanging. */
  transform-origin: 3.6rem -1.3rem;
}
.swing__cord {
  position: absolute;
  top: -1.45rem;
  left: 1.9rem;
  width: 3.4rem;
  height: 2.75rem;
}
.swing__body {
  position: relative;
  padding: 1.65rem .9rem 1.05rem;
  background: var(--cream);
  border-radius: 16px 16px 16px 5px;
  box-shadow:
    0 14px 34px rgba(12,29,51,.16),
    inset 0 0 0 1px rgba(12,29,51,.07);
  text-align: center;
}
.swing__body::before {           /* the punched hole */
  content: '';
  position: absolute;
  top: .68rem;
  left: 50%;
  transform: translateX(-50%);
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: rgba(12,29,51,.24);
  box-shadow: inset 0 1px 2px rgba(12,29,51,.5);
}
.swing__label,
.swing__note { display: block; font-size: .625rem; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.swing__label { font-weight: 700; color: var(--ink-soft); }
.swing__note  { font-weight: 500; color: var(--ink-soft); margin-top: .2rem; }
.swing__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--teal-ink);
  margin: .12rem 0 .1rem;
}


/* 6. Sections ============================================================== */

/* -- Masthead -------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
}
.masthead__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 4.75rem;
  padding-block: .7rem;
}
.masthead__logo { display: block; line-height: 0; flex: none; }
.masthead__logo img { width: 118px; height: auto; }

.masthead__nav {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2rem);
  margin-left: auto;
}
.masthead__nav a {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: .5rem 0;
}
.masthead__nav a:hover { color: var(--teal-ink); text-decoration: underline; }

.masthead__cta { flex: none; }

/* -- Hero ------------------------------------------------------------------
   Sits inside the same shell as everything below it, so the copy's left edge
   lines up with the logo and the photo's right edge with the masthead CTA.
   (An earlier build let the photo bleed to the viewport edge, which read as
   the whole hero being shoved right on wide screens.) */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(3rem, 7vw, 6.5rem) clamp(4rem, 9vw, 8rem);
}
.hero__copy  { grid-column: 1; }
.hero__media { grid-column: 2; position: relative; }

.hero__title {
  font-weight: 800;
  font-size: clamp(2.9rem, 7.4vw, 6.1rem);
  line-height: .9;
  letter-spacing: -.042em;
  color: var(--ink);
  margin-bottom: 1.5rem;
}
.hero__title em { font-style: normal; color: var(--teal-ink); }

.hero__lead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 1.1rem;
}
.hero__body { color: var(--ink-soft); max-width: 40ch; }

/* Wraps by item, never mid-item, with a teal dot between neighbours. The dot
   is drawn in the gap to the left of each item; when an item starts a new
   line its dot lands outside the box and overflow:hidden clips it. */
.hero__nots {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.1rem;
  row-gap: .2rem;
  overflow: hidden;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
}
.hero__nots span { position: relative; white-space: nowrap; }
.hero__nots span::before {
  content: '·';
  position: absolute;
  left: -.72rem;
  color: var(--teal);
  font-weight: 700;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
  margin-bottom: 0;
}

.hero .swing { --swing-rot: -8deg; left: -3.1rem; bottom: 2.25rem; }

/* -- Problem ---------------------------------------------------------------- */

.problem__title { margin-bottom: 3rem; }

.problem__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.problem__copy p { color: var(--ink-soft); max-width: 48ch; }
.problem__copy p:last-child { color: var(--ink); font-weight: 500; }

.problem__chore-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .9rem;
}

/* The drudgery, deliberately drab — grey tags against the brand's coloured
   ones, so the contrast does the arguing. */
.chores { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.chores li {
  padding: .42rem .72rem;
  background: #fbfaf7;
  border: 1px solid var(--hairline);
  border-radius: 8px 8px 8px 3px;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.chores li:nth-child(odd)  { transform: rotate(-.9deg); }
.chores li:nth-child(even) { transform: rotate(.7deg); }
.chores .chores__repeat {
  background: var(--white);
  border-color: var(--ink);
  color: var(--ink);
  font-weight: 700;
}

.problem .statement { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* -- Steps ------------------------------------------------------------------ */

.steps__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
  list-style: none;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.steps__list > li:nth-child(2) { margin-top: 3rem; }
.steps__list > li:nth-child(3) { margin-top: 6rem; }

.step__num {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .02em;
  padding: .3em .6em;
  margin-bottom: 1.1rem;
}
.step__title {
  font-size: clamp(1.3rem, 2.1vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: .7rem;
}
.step p { color: var(--ink-soft); font-size: 1rem; }

.steps__proof {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-top: clamp(2.75rem, 5.5vw, 4.5rem);
}
.steps__proof-copy p { color: var(--ink-soft); }
.steps__proof-copy .lead { color: var(--ink); margin-bottom: 1.1rem; }
.steps__proof-copy .statement { color: var(--ink); margin: 1.6rem 0; }

/* -- Money ------------------------------------------------------------------ */

.money__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.money .h2 { margin-bottom: .6rem; }
.money__sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.8vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--ink);
  margin-bottom: 2rem;
}
.places { list-style: none; margin-bottom: 1.75rem; }
.places li {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  line-height: 1.75;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--hairline);
  max-width: 16rem;
}
.places li:last-child { border-bottom: 0; }
.money__ask { font-weight: 500; color: var(--ink); max-width: 32ch; }

.money__media { position: relative; justify-self: end; }
.money .swing { --swing-rot: 6deg; right: -1.75rem; bottom: -1.5rem; width: 7.75rem; }

/* -- Catalogue -------------------------------------------------------------- */

.catalogue__lead { margin: 1.4rem 0 2.5rem; }

.cats {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  list-style: none;
  max-width: 58rem;
}
.cats .tag {
  font-size: .9375rem;
  letter-spacing: -.005em;
  text-transform: none;
  font-weight: 500;
  padding: .6em 1em;
}
.cats .tag:nth-child(3n)   { transform: rotate(1.1deg); }
.cats .tag:nth-child(3n+1) { transform: rotate(-1.6deg); }
.cats .tag:nth-child(3n+2) { transform: rotate(.5deg); }

.cats__more {
  align-self: center;
  font-size: .9375rem;
  font-weight: 500;
  font-style: italic;
  color: var(--ink-soft);
  padding-left: .35rem;
}

.catalogue__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
  margin-top: 2.75rem;
  font-size: 1.125rem;
}

/* -- Reasons ---------------------------------------------------------------- */

.reasons__title { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.reasons__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3.5rem);
  list-style: none;
}
.reason { padding-top: 1.1rem; border-top: 2px solid var(--teal); }
.reason:nth-child(even) { border-top-color: var(--peach); }
.reason h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: .5rem;
}
.reason p { color: var(--ink-soft); font-size: .9688rem; }

.reasons .statement { margin-top: clamp(2.75rem, 5vw, 4.25rem); }

/* -- Making space (soft cream band) ----------------------------------------- */

.space { background: var(--cream); }
.space__lead { margin: 1.5rem 0 3rem; max-width: 46ch; }

.space__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  list-style: none;
}
.spacecard {
  background: var(--white);
  border-radius: var(--card-r);
  padding: 1.75rem 1.6rem;
}
.spacecard h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--teal-ink);
  margin-bottom: .6rem;
}
.spacecard p { color: var(--ink-soft); font-size: .9688rem; }

.space__foot {
  margin-top: 2.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  letter-spacing: -.02em;
  color: var(--ink);
}

/* -- Asides: "Got something valuable?" and "Donate your items" ---------------
   Two short, quieter sections. Same two-column rhythm as Collection, but a
   smaller heading and a photo capped at 26rem so they read as side notes
   rather than another headline moment. */

.aside { padding-block: calc(var(--bay) * .8); }
.aside__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.aside--flip .aside__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.aside--flip .aside__media { order: -1; }

.aside__media { justify-self: end; width: 100%; max-width: 26rem; }
.aside--flip .aside__media { justify-self: start; }

.aside .h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); margin-bottom: 1.1rem; }
.aside__copy p { color: var(--ink-soft); max-width: 46ch; }
.aside__copy .aside__lead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 1rem;
}
.aside__copy .aside__chant {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 1.5rem 0 .5rem;
}
.aside__copy .aside__strong { color: var(--ink); font-weight: 500; }
.aside__foot { margin-top: 1.4rem; font-size: .8125rem; color: var(--ink-soft); }
.aside__actions { margin-top: 1.4rem; }

/* -- Collection ------------------------------------------------------------- */

.collect__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.collect__copy p { color: var(--ink-soft); max-width: 40ch; }
.collect__copy .h2 { margin-bottom: 1.4rem; }
.collect__copy .collect__chant {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--ink);
  margin-top: 1.75rem;
}

/* -- FAQs ------------------------------------------------------------------- */

.faq__list {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--hairline);
  max-width: 52rem;
}
.qa { border-bottom: 1px solid var(--hairline); }
.qa summary {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--ink);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: '+';
  margin-left: auto;
  flex: none;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 500;
  color: var(--teal-ink);
}
.qa[open] summary::after { content: '–'; }
.qa summary:hover { color: var(--teal-ink); }
.qa__body { padding: 0 3rem 1.5rem 0; }
.qa__body p { color: var(--ink-soft); max-width: 62ch; }

/* -- Closer + valuation form ------------------------------------------------ */

.closer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.closer__nots { list-style: none; margin: 2rem 0 1.75rem; }
.closer__nots li {
  padding: .55rem 0 .55rem 1.6rem;
  position: relative;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--hairline);
}
.closer__nots li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.28rem;
  width: .7rem; height: 2px;
  background: var(--peach);
}
.closer__nots em { font-style: italic; }
.closer__line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--ink);
}

.closer__form {
  background: var(--cream);
  border-radius: var(--card-r);
  padding: clamp(1.6rem, 3.5vw, 2.5rem);
}
.vform__intro { font-size: .9688rem; color: var(--ink-soft); margin-bottom: 1.5rem; }

.field { margin-bottom: 1.1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label {
  display: block;
  margin-bottom: .38rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.field__opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-soft); }

.field input,
.field textarea {
  width: 100%;
  padding: .8rem .9rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 10px 10px 10px 3px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input:focus, .field textarea:focus { border-color: var(--teal-ink); }
.field input::placeholder, .field textarea::placeholder { color: #97a1ae; }
.field__hint { margin: .4rem 0 0; font-size: .8125rem; color: var(--ink-soft); }

.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.closer__form .btn { margin-top: .6rem; }
.vform__foot { margin: .9rem 0 0; font-size: .8438rem; color: var(--ink-soft); text-align: center; }


/* 7. Footer ================================================================ */

.footer {
  border-top: 1px solid var(--hairline);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  margin-top: var(--bay);
}
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.footer__brand img { width: 112px; height: auto; }
.footer__strap {
  margin: 1.1rem 0 .2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -.02em;
  color: var(--ink);
}
.footer__sub { font-size: .9375rem; color: var(--ink-soft); }

.footer__h {
  font-size: .75rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .9rem;
}
.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: .5rem; }
.footer__col a {
  font-size: .9688rem;
  color: var(--ink);
  text-decoration: none;
}
.footer__col a:hover { color: var(--teal-ink); text-decoration: underline; }

.footer__base {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-block: 1.5rem;
}
.footer__base p {
  border-top: 1px solid var(--hairline);
  padding-top: 1.5rem;
  margin: 0;
  font-size: .8438rem;
  color: var(--ink-soft);
}


/* 8. Responsive ============================================================ */

@media (max-width: 62rem) {
  .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps__list > li:nth-child(2) { margin-top: 2.5rem; }
  .steps__list > li:nth-child(3) { margin-top: 0; }
  .reasons__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 55rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(2.5rem, 7vw, 3.5rem);
  }
  .hero__copy, .hero__media { grid-column: 1; }
  .hero .swing { --swing-rot: 6deg; left: auto; right: .5rem; bottom: -1.75rem; }

  .problem__grid,
  .steps__proof,
  .money__grid,
  .aside__grid,
  .aside--flip .aside__grid,
  .collect__grid,
  .closer__grid { grid-template-columns: minmax(0, 1fr); }

  .money__media { justify-self: start; }
  .money .swing { right: auto; left: 16rem; bottom: 1rem; }

  .aside__media, .aside--flip .aside__media { justify-self: start; order: 2; max-width: 24rem; }

  .collect__media { order: 2; }
  .frame--tile { max-width: 20rem; }
}

@media (max-width: 48rem) {
  .masthead__nav { display: none; }
  .masthead__cta { margin-left: auto; }
  .steps__list { grid-template-columns: minmax(0, 1fr); }
  .steps__list > li:nth-child(2) { margin-top: 0; }
  .reasons__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qa__body { padding-right: 1.5rem; }
}

@media (max-width: 34rem) {
  .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero__actions .btn { width: 100%; }
  .money .swing { left: auto; right: 1rem; }
  .footer__inner { grid-template-columns: minmax(0, 1fr); }
  .catalogue__foot { display: block; }
  .catalogue__foot .btn { margin-top: 1rem; }
}

/* Small phones. The masthead keeps the full "Get my free valuation" label —
   the action is named the same everywhere — so it wraps rather than shrinks
   the page. */
@media (max-width: 26rem) {
  :root { --gutter: 1rem; }
  .masthead__inner { gap: .75rem; }
  .masthead__logo img { width: 96px; }
  .masthead__cta {
    min-width: 0;
    padding: .5rem .8rem;
    font-size: .875rem;
    line-height: 1.15;
    white-space: normal;
  }
}


/* 9. Motion ================================================================ */
/* Everything is visible by default. Animation is added only when the visitor
   hasn't asked for reduced motion and the observer actually ran. */

@media (prefers-reduced-motion: no-preference) {
  .motion .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s ease;
  }
  .motion .reveal.is-in { opacity: 1; transform: none; }
  .motion .steps__list > li:nth-child(2) { transition-delay: .09s; }
  .motion .steps__list > li:nth-child(3) { transition-delay: .18s; }

  /* The one orchestrated moment: the hero's tag and swing tag settle into
     their tilt on load, the way the letters do in the logo. */
  .hero .tag   { animation: settle .55s cubic-bezier(.2,.8,.3,1) both; }
  .hero .swing { animation: settle-swing .8s .12s ease-out both; }

  @keyframes settle {
    from { opacity: 0; transform: rotate(6deg) translateY(-6px); }
    to   { opacity: 1; transform: rotate(-1.4deg) translateY(0); }
  }
  /* A damped pendulum: drops in past its resting tilt, swings back through
     it twice, and settles. Pivot is set on .swing. */
  @keyframes settle-swing {
    0%   { opacity: 0; transform: rotate(calc(var(--swing-rot, -8deg) + 14deg)) translateY(-14px); }
    15%  { opacity: 1; transform: rotate(calc(var(--swing-rot, -8deg) + 9deg)) translateY(0); }
    42%  { transform: rotate(calc(var(--swing-rot, -8deg) - 7deg)); }
    68%  { transform: rotate(calc(var(--swing-rot, -8deg) + 3.5deg)); }
    86%  { transform: rotate(calc(var(--swing-rot, -8deg) - 1.2deg)); }
    100% { transform: rotate(var(--swing-rot, -8deg)); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}