/** Shopify CDN: Minification failed

Line 1069:0 Unexpected "}"

**/
/* ==========================================================================
   The Plank by Modgav — landing page
   Sections alternate dark and light. Copper is an accent, never a glow.
   The motif is the 45 degree chamfer from the Modgav mark, kept as a quiet
   corner detail on imagery only. Buttons are rectangles.
   ========================================================================== */

/* ---------- fonts: bespoke MODGAV_General, self-hosted from client files ---- */
@font-face { font-family: "MODGAV General"; src: url("plank-font-01.woff2")    format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "MODGAV General"; src: url("plank-font-02.woff2")  format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "MODGAV General"; src: url("plank-font-03.woff2")   format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "MODGAV General"; src: url("plank-font-04.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "MODGAV General"; src: url("plank-font-05.woff2")     format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Inter replaced Roboto as the secondary face on the client's instruction.
   Variable, latin subset, self-hosted like every other face here. */
@font-face { font-family: "Inter"; src: url("plank-font-inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --dark:       #232322;
  --dark-deep:  #171716;
  --dark-lift:  #2E2E2C;
  /* Pale Ivory, the brand value Modgav confirmed. Extracting it from the
     source HTML had produced three near-identical shades — F3F0E8 here,
     F5F2EA for text on dark and again in the policy stylesheet. They are
     one colour and now share one value. */
  --bone:       #F3F0E7;
  --bone-2:     #E7E3D8;
  --copper:     #B87333;
  --copper-dk:  #8C5324;
  --copper-lt:  #D9A46F;

  /* set per section by --dark / --light modifiers */
  --ink:      #F3F0E7;
  --ink-mute: #C3BEB4;
  --hair:     rgba(243, 240, 232, .18);
  --accent:   var(--copper-lt);

  --ch: 12px;                 /* chamfer, imagery only */
  --wrap: 1200px;
  --sec-y: clamp(84px, 9.5vw, 150px);

  --fs-min: .875rem;    /* 14px, nothing goes below this */
  --fs-body: 1rem;      /* 16px */
  --fs-sub: 1.125rem;   /* 18px */
  --fs-sub-lg: 1.25rem; /* 20px */
  --fs-display: clamp(2rem, 1.15rem + 2.9vw, 3.6rem);
  --fs-display-sm: clamp(1.6rem, 1.1rem + 1.9vw, 2.5rem);
  --fs-hero: clamp(2.7rem, 1rem + 6.2vw, 5.85rem);

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

  --topbar-max: 1920px;   /* header content stops widening past this */
  --radius: 10px;         /* tiles and media modules — chamfered, not pointy */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--dark);
  color: var(--ink);
  font: 400 var(--fs-body)/1.65 "Inter", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }
input { font: inherit; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* headings keep the bespoke MODGAV face; everything else is Inter */
.display, .tile__title, .ledger__val, .sizelist__d, .topbar__logo, .footer__tag {
  font-family: "MODGAV General", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- layout ---------- */
.wrap  { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 780px); }
.wrap--wide   { width: min(100% - 2.5rem, 1440px); }
.sec { padding-block: var(--sec-y); position: relative; }
.sec--tight { padding-block: clamp(52px, 6vw, 86px); }

/* ---------- the alternating rhythm ---------- */
.sec--dark {
  background: var(--dark); color: var(--ink);
  --ink-mute: #C3BEB4;
  --hair: rgba(243, 240, 232, .18);
  --accent: var(--copper-lt);
  --field-bg: #2E2E2C;
}
.sec--deep { background: var(--dark-deep); }
.sec--light {
  background: var(--bone); color: #2B2B2A;
  --ink: #2B2B2A;
  --ink-mute: #57524A;
  --hair: rgba(43, 43, 42, .18);
  --accent: var(--copper-dk);
  --field-bg: #FFFFFF;
}

/* ---------- chamfer, the one place the motif shows ---------- */
.cham {
  clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
}


/* ==========================================================================
   TOPBAR
   ========================================================================== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 2rem;
  padding-block: 1.1rem;
  /* The stuck background still spans the viewport, but the logo and nav stop
     drifting to the far corners past 1920px — on a wide monitor they were
     sitting most of a metre apart. */
  padding-inline: max(clamp(1.25rem, 3.2vw, 2.75rem), calc((100% - var(--topbar-max)) / 2));
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.topbar.is-stuck,
.topbar--solid {
  background: rgba(23, 23, 22, .93);
  backdrop-filter: blur(14px);
  /* doubled: at .7rem the logo sat squeezed against the opaque bar */
  padding-block: 1.4rem;
  box-shadow: 0 1px 0 rgba(243, 240, 232, .12);
}
/* solid bars never animate their height, so the logo stays put */
.topbar--solid .topbar__logo img { height: 46px; }
@media (max-width: 560px) { .topbar--solid .topbar__logo img { height: 34px; } }
/* the horizontal lockup is wide and short, so it is sized to sit at the same
   optical weight the taller wordmark had rather than to the same height */
.topbar__logo img { height: 60px; width: auto; transition: height .4s var(--ease); }
@media (max-width: 560px) { .topbar__logo img, .topbar.is-stuck .topbar__logo img { height: 34px; } }
.topbar.is-stuck .topbar__logo img { height: 46px; }
.topbar__nav {
  display: none; gap: 2rem; margin-left: auto;
  font-size: var(--fs-min); font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: #D5D0C6;
}
.topbar__nav a { transition: color .25s; }
.topbar__nav a:hover { color: var(--copper-lt); }
@media (min-width: 940px) { .topbar__nav { display: flex; } }


/* ==========================================================================
   CORNER ROUNDING
   The Modgav mark is chamfered, so the tiles and media modules should read
   soft rather than pointy. Kept off buttons, which the design holds as
   rectangles, and off full-bleed bands where a radius would float the section.
   ========================================================================== */
.tile,
.split__media,
.founder__film,
.trailer,
.fullvid figure,
.pickpanel,
.pick__thumb,
.pinshot img,
.hero__product,
.signup__form input {
  border-radius: var(--radius);
  overflow: hidden;
}
.tile__media img,
.tile__media video,
.pickpanel img { border-radius: inherit; }

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
.eyebrow {
  font-size: var(--fs-min); font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.2rem;
}
.eyebrow--center { text-align: center; }

.lede { font-size: clamp(var(--fs-sub), .95rem + .5vw, var(--fs-sub-lg)); font-weight: 300; color: var(--ink-mute); max-width: 50ch; }

.display {
  font-size: var(--fs-display); font-weight: 600; line-height: 1.02;
  letter-spacing: -.012em; text-transform: uppercase;
}
.display--sm { font-size: var(--fs-display-sm); }
/* 600 is MODGAV SemiBold — the hero headline was 700 and read heavy against
   the video once it moved off copper onto ivory */
.display--xl { font-size: var(--fs-hero); line-height: .94; letter-spacing: -.022em; font-weight: 600; }

/* Headlines run the brand copper on light grounds, where it has the contrast
   to carry. On dark it drops to the pale ivory the body copy already uses:
   #B87333 on #232322 is only 4.15:1, under the 4.5:1 AA floor the accessibility
   statement commits to, and copper on dark read as redundant beside the copper
   accents. The class is still .grad because 16 elements carry it; nothing here
   is a gradient. */
.grad { color: var(--copper); }
.sec--dark .grad { color: var(--ink); }

.body { font-size: var(--fs-body); color: var(--ink-mute); max-width: 58ch; margin-top: 1.4rem; }
.body--center { margin-inline: auto; text-align: center; }

/* deliberate, visible placeholder for anything the client has not supplied */
.tbc { color: var(--accent); border-bottom: 1px dotted currentColor; cursor: help; }
/* a reserved field for a figure the client has not supplied: reads as
   deliberately blank rather than as a broken rule */
.tbc--slot {
  display: inline-block; min-width: 2.4ch; height: .68em;
  border-bottom: 0; background: currentColor; opacity: .2;
  vertical-align: baseline;
}
.grad .tbc { color: inherit; border-bottom-color: currentColor; }

.flagnote {
  margin-top: 1.4rem; font-size: var(--fs-min); line-height: 1.55; color: var(--ink-mute);
  border-left: 2px solid var(--accent); padding-left: .85rem; max-width: 54ch;
}

/* ==========================================================================
   BUTTONS — rectangles
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.05rem 2.3rem;
  background: var(--copper); color: #1B1006; border: 1px solid var(--copper);
  font-weight: 600; font-size: var(--fs-min); letter-spacing: .11em; text-transform: uppercase;
  white-space: nowrap;
  transition: background .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease);
}
.btn:hover { background: var(--copper-dk); border-color: var(--copper-dk); color: #FFF; }
.btn--lg { padding: 1.2rem 2.8rem; font-size: var(--fs-body); }
.btn--sm { padding: .68rem 1.3rem; font-size: var(--fs-min); }
.btn--block { width: 100%; }
.btn--ghost { background: transparent; color: currentColor; border-color: currentColor; }
.btn--ghost:hover { background: currentColor; color: var(--dark); }
.sec--light .btn--ghost:hover { color: var(--bone); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  overflow: hidden; padding-block: 11.5rem 4.5rem;
  background: var(--dark);
}

/* the column has to be minmax(0, 1fr) at every width: an auto track floors at
   the min-content of the form row, which pushed the hero copy past the phone
   viewport and the hero's own overflow:hidden then clipped it */
.hero__grid {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.4rem, 5vw, 4.5rem); align-items: center;
}
.hero__body { min-width: 0; }

.hero__body { max-width: 760px; margin-inline: auto; text-align: center; }
.hero .display--xl { margin: 1rem 0 0; }
.hero__lede {
  font-size: clamp(var(--fs-min), .82rem + .18vw, var(--fs-body));
  font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: #C6C1B7; max-width: 52ch; margin-inline: auto;
}

/* the product sits on bone so the studio shot reads clean against the dark hero */
.hero__product {
  background: var(--bone); padding: clamp(1.1rem, 2.2vw, 1.9rem); overflow: hidden;
  display: flex; align-items: center;
}
.hero__product img { width: 100%; height: auto; mix-blend-mode: multiply; }

.specstrip {
  display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 1rem 2.8rem;
  font-size: var(--fs-min); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #CFCAC0;
  padding-top: 1.6rem; margin-top: 2rem; border-top: 1px solid rgba(243,240,232,.2);
}
.specstrip li { display: flex; align-items: center; gap: .6rem; }
.specstrip svg { width: 20px; height: 20px; flex: none; color: var(--copper-lt); }
/* two columns of this copy will not fit a phone, so the 2x2 stacks */
@media (max-width: 760px) { .specstrip { gap: 1rem 1.6rem; } }
@media (max-width: 560px) {
  .specstrip { grid-template-columns: max-content; justify-content: center; gap: .85rem; }
}


/* ==========================================================================
   FEATURE MARQUEE + SQUARES
   ========================================================================== */
.marquee { overflow: hidden; border-block: 1px solid var(--hair); padding-block: 1.15rem; }
.marquee__track { display: flex; gap: 4.5rem; width: max-content; animation: slide 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track li {
  flex: none; display: flex; align-items: center; gap: .6rem;
  font-size: var(--fs-min); font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-mute);
}
.marquee__track svg { width: 19px; height: 19px; flex: none; color: var(--copper-lt); }
@keyframes slide { to { transform: translateX(-50%); } }

.bento { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 3.2rem; }
@media (min-width: 860px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .b-2 { grid-column: span 2; }
  .b-3 { grid-column: span 3; }
  .b-4 { grid-column: span 4; }
  .b-6 { grid-column: span 6; }
}

.tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  min-height: 265px; background: var(--dark-deep); color: #F3F0E7;
}
.tile--pale { background: var(--bone-2); color: #2B2B2A; }
.b-6 { min-height: 360px; }

/* overlay tiles: media fills the frame, copy sits on a scrim at the foot */
.tile--overlay .tile__media { position: absolute; inset: 0; }
.tile--overlay .tile__media img,
.tile--overlay .tile__media video { width: 100%; height: 100%; object-fit: cover; }
.tile--overlay .tile__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,16,15,.12) 0%, rgba(16,16,15,.52) 42%, rgba(16,16,15,.93) 100%);
}
.tile--overlay .tile__body { position: relative; z-index: 1; margin-top: auto; padding: 1.6rem 1.5rem 1.5rem; }

/* stack tiles: copy first, media contained beneath it so no subject is cropped */
.tile--stack .tile__body { padding: 1.6rem 1.5rem .8rem; }
.tile--stack .tile__media { flex: 1; min-height: 150px; padding: 0; overflow: hidden; }
.tile--stack .tile__media img,
.tile--stack .tile__media video { width: 100%; height: 100%; object-fit: cover; }

.tile__title { font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.12; }
.tile__sub { margin-top: .55rem; font-size: var(--fs-body); line-height: 1.5; color: rgba(245,242,234,.8); max-width: 48ch; }
.tile--pale .tile__sub { color: #57524A; }
/* studio shots are on white: multiply drops that onto the pale tile */
.tile--pale .tile__media img,
.tile--pale .tile__media video { mix-blend-mode: multiply; }

/* the wide tile runs copy beside the media instead of stacking, so a 2:1 clip
   fills the frame rather than floating in dead space */
@media (min-width: 860px) {
  .tile--wide { flex-direction: row; align-items: stretch; }
  .tile--wide .tile__body {
    flex: 0 0 36%; display: flex; flex-direction: column; justify-content: center;
    padding: 2.2rem 2rem;
  }
  .tile--wide .tile__media { flex: 1; padding: 0; }
  .tile--wide .tile__media img,
  .tile--wide .tile__media video { max-height: none; height: 100%; object-fit: cover; }
}

/* ==========================================================================
   SPLIT ROWS
   ========================================================================== */
.split { display: grid; gap: clamp(2.4rem, 5vw, 4.6rem); align-items: center; }
@media (min-width: 920px) {
  .split { grid-template-columns: 1fr 1.05fr; }
  .split__text .display { font-size: clamp(1.8rem, 1rem + 2.2vw, 2.9rem); }
}
.split--rev .split__media { order: -1; }
@media (max-width: 919px) {
  /* Once the row stacks, the copy always leads. Reversed rows put the media
     first in source order for the desktop layout, which on a phone dropped
     the reader onto a clip before they had read what it was showing. */
  .split .split__text { order: 0; }
  .split .split__media,
  .split .founder__film { order: 1; }
}
.split__media img, .split__media video { width: 100%; }

/* ==========================================================================
   FULL-BLEED BANDS
   ========================================================================== */
.band { padding-block: clamp(6rem, 13vw, 12rem); overflow: hidden; color: var(--ink); }
.band__media { position: absolute; inset: 0; z-index: 0; }
.band__media img, .band__media video { width: 100%; height: 100%; object-fit: cover; }
.band__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,20,19,.93) 0%, rgba(20,20,19,.70) 48%, rgba(20,20,19,.20) 100%);
}
.band__body { position: relative; z-index: 1; max-width: 800px; }
.band .display { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.35rem); }

/* ==========================================================================
   STEPS (video-led)
   ========================================================================== */
.steps { display: grid; gap: 1.5rem; margin-top: 3rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.step figure { margin-bottom: 1.2rem; background: var(--dark-deep); }
.step video, .step img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.step__n { font-size: var(--fs-min); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: .5rem; }
.step p { font-size: var(--fs-sub); font-weight: 500; }

/* ==========================================================================
   TABS
   ========================================================================== */
.picker { display: grid; gap: 1.25rem; margin-top: 3rem; }
@media (min-width: 940px) { .picker { grid-template-columns: minmax(300px, 30%) 1fr; align-items: start; } }

.picker__list { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.pick {
  display: flex; align-items: center; gap: 1rem; text-align: left; width: 100%;
  padding: .9rem; background: var(--bone);
  transition: background .3s var(--ease);
}
.pick:hover { background: var(--bone-2); }
.pick.is-on { background: var(--dark); color: var(--bone); }
.pick__thumb { flex: none; width: 92px; height: 62px; overflow: hidden; background: var(--bone-2); }
.pick__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pick__meta { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.pick__n { font-size: var(--fs-min); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--copper-dk); }
.pick.is-on .pick__n { color: var(--copper-lt); }
.pick__name {
  font-family: "MODGAV General", sans-serif;
  font-size: var(--fs-sub); font-weight: 600; letter-spacing: -.01em; line-height: 1.15;
}

.picker__stage { position: relative; background: var(--bone-2); overflow: hidden; }
.pickpanel { opacity: 0; visibility: hidden; position: absolute; inset: 0; transition: opacity .5s var(--ease); }
.pickpanel.is-on { opacity: 1; visibility: visible; position: relative; }
.pickpanel img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }

/* ==========================================================================
   SIZES
   ========================================================================== */
.sizelist { margin-top: 2rem; border-top: 1px solid var(--hair); }
.sizelist li { display: flex; align-items: baseline; gap: 1.3rem; padding: 1.05rem 0; border-bottom: 1px solid var(--hair); }
.sizelist__d { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -.02em; min-width: 4.6ch; }
.sizelist__t { font-size: var(--fs-min); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }

/* ==========================================================================
   VIDEO SHOWCASE
   ========================================================================== */
.showcase { margin-top: 3rem; background: var(--dark-deep); }
.showcase video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vgrid { display: grid; gap: 1.25rem; margin-top: 3rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.vgrid figure { background: var(--dark-deep); }
.vgrid video { width: 100%; aspect-ratio: 1; object-fit: cover; }
.vgrid figcaption { padding: .9rem 1.1rem; font-size: var(--fs-min); font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-mute); }

/* ==========================================================================
   VALUE
   ========================================================================== */
.value { text-align: center; }
.value__sub { margin-top: 1.2rem; font-size: clamp(var(--fs-sub), 2vw, 1.5rem); font-weight: 300; color: var(--ink-mute); }

/* ==========================================================================
   SPECS
   ========================================================================== */
.specs { display: grid; gap: clamp(2.4rem, 5vw, 4.4rem); margin-top: 3rem; }
@media (min-width: 920px) {
  .specs { grid-template-columns: .92fr 1.08fr; align-items: start; }
  .specs__media { position: sticky; top: 6rem; }
}
.specs__media { background: var(--bone-2); }
.specs__media img { padding: 2rem; mix-blend-mode: multiply; }
.specs__list { border-top: 1px solid var(--hair); }
.specs__list > div { display: grid; gap: .3rem 2rem; padding: 1.05rem 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 580px) { .specs__list > div { grid-template-columns: 12.5rem 1fr; } }
.specs__list dt { font-size: var(--fs-min); font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); padding-top: .2rem; }
.specs__list dd { color: var(--ink-mute); font-size: var(--fs-body); }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; margin-top: 3rem; background: var(--hair); border: 1px solid var(--hair); }
.gal { overflow: hidden; background: var(--dark-deep); }
.gal img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .85s var(--ease); }
.gal:hover img { transform: scale(1.06); }
@media (min-width: 760px) { .gal--wide { grid-column: span 2; } .gal--wide img { aspect-ratio: 8 / 3; } }
/* clips carry their own burned-in captions, so show the whole frame, never crop */
.gal--video video { width: 100%; aspect-ratio: 2 / 1; object-fit: contain; background: #0E0E0D; }
@media (min-width: 760px) { .gal--video video { aspect-ratio: 8 / 3; } }

/* ==========================================================================
   FOUNDER
   ========================================================================== */
.founder__media { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1rem; align-items: start; }
.founder__media figure:last-child { margin-top: 2.6rem; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { margin-top: 2.6rem; border-top: 1px solid var(--hair); }
.faq__item { border-bottom: 1px solid var(--hair); }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 1.4rem 2.6rem 1.4rem 0; position: relative;
  font-size: var(--fs-sub); font-weight: 500; transition: color .25s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent); }
.faq__item summary::after {
  content: ""; position: absolute; right: .4rem; top: 50%; width: 12px; height: 12px;
  background: var(--accent); transform: translateY(-50%);
  clip-path: polygon(0 42%, 42% 42%, 42% 0, 58% 0, 58% 42%, 100% 42%, 100% 58%, 58% 58%, 58% 100%, 42% 100%, 42% 58%, 0 58%);
  transition: transform .35s var(--ease);
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(135deg); }
.faq__a { padding: 0 0 1.5rem; color: var(--ink-mute); max-width: 64ch; }

/* ==========================================================================
   SIGNUP
   ========================================================================== */
.signup__card { text-align: center; max-width: 700px; margin-inline: auto; }
.signup__sub { margin: 1.1rem auto 2rem; color: var(--ink-mute); max-width: 54ch; font-size: var(--fs-sub); }
.signup__form { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.signup__form input {
  flex: 1 1 270px; min-width: 0; padding: 1.15rem 1.3rem;
  background: var(--field-bg); border: 1px solid var(--hair); color: var(--ink); font-size: var(--fs-body);
  transition: border-color .25s;
}
.signup__form input:focus { outline: none; border-color: var(--accent); }
/* the label is visible rather than screen-reader only: a placeholder
   disappears as soon as someone types, so it is not a label */
.signup__form .signup__label {
  flex: 1 1 100%; margin-bottom: -.1rem;
  font-size: var(--fs-min); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-mute); text-align: left;
}
#signup .signup__form .signup__label { color: #C6C1B7; }
.signup__msg { min-height: 1.4rem; margin-top: 1rem; font-size: var(--fs-min); color: var(--accent); }
/* Shopify's {% form %} wraps the row, so the status line sits inside it and
   takes a full-width basis to break onto its own line under the input */
.signup__form .signup__msg { flex: 1 1 100%; margin-top: .4rem; }
.signup__form .signup__msg:empty { min-height: 0; margin-top: 0; }

/* consent notice under the signup form — deliberately quiet, but it has to
   stay legible: this is the disclosure the signup relies on */
.signup__consent {
  margin-top: 1.1rem; font-size: var(--fs-min); line-height: 1.55;
  color: var(--ink-mute); max-width: 56ch; margin-inline: auto;
}
.signup__consent p { margin: 0; }
.signup__consent a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.signup__consent a:hover { color: var(--copper-lt); }
#signup .signup__consent { color: #C6C1B7; }

/* the field and button stack on a phone, so the desktop block padding made
   the pair take up most of the viewport */
@media (max-width: 640px) {
  .signup__form input { padding-block: .8rem; }
  .signup__form .btn--lg { padding-block: .65rem; }
  /* the field runs the full width here, so a left-aligned label would sit
     off to one side of a card that is otherwise centred */
  .signup__form .signup__label { text-align: center; }
}


/* ==========================================================================
   MOTION
   ========================================================================== */
/* fade + rise */
[data-r] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-r].is-in { opacity: 1; transform: none; }

/* headline wipe: the line uncovers left to right */
[data-mask] { clip-path: inset(0 100% 0 0); transition: clip-path 1.05s var(--ease); }
[data-mask].is-in { clip-path: inset(0 0 0 0); }

/* imagery uncovers, then settles */
/* overflow:hidden keeps the pre-reveal scale() from widening the document */
[data-wipe] { clip-path: inset(0 0 100% 0 round var(--radius)); transition: clip-path 1.1s var(--ease); overflow: hidden; }
[data-wipe].is-in { clip-path: inset(0 0 0 0 round var(--radius)); }
[data-wipe] > img, [data-wipe] > video { transform: scale(1.14); transition: transform 1.5s var(--ease); }
[data-wipe].is-in > img, [data-wipe].is-in > video { transform: none; }

/* staggered children */
[data-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-stagger].is-in > * { opacity: 1; transform: none; }

/* counters and small emphasis */
[data-count] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-r], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  [data-mask], [data-wipe] { clip-path: none !important; }
  [data-wipe] > img, [data-wipe] > video { transform: none !important; }
  .marquee__track { animation: none !important; }
}

/* ==========================================================================
   INTRO + TRAILER + FULL-WIDTH VIDEO
   ========================================================================== */
.intro { text-align: center; max-width: 820px; margin-inline: auto; margin-bottom: clamp(2.6rem, 5vw, 4rem); }
.intro .eyebrow { text-align: center; }
.intro .body { margin-inline: auto; }

/* follows the bento section on the same light ground, so its own top padding
   stacked on the section above and read as a double gap */
.plank-section--feature > .sec { padding-top: 0; }
.trailer { background: var(--dark-deep); overflow: hidden; }
.trailer video { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
.trailer__note { margin-inline: auto; }

.fullvid { background: var(--dark-deep); }
.fullvid figure { overflow: hidden; }
.fullvid video { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
@media (max-width: 760px) { .fullvid video { aspect-ratio: 16 / 9; } .trailer video { aspect-ratio: 16 / 9; } }

/* 50/50 rows: the clip fills its half rather than floating */
.split__media video { width: 100%; display: block; background: var(--dark-deep); }

/* gallery tiles carry no copy, so they need no scrim */
.galtile .tile__media::after { display: none; }
.galtile { min-height: 230px; }

.rowsub { font-size: var(--fs-sub-lg); font-weight: 600; margin-top: .7rem; }

/* closing CTA sits on a lifestyle band, so the scrim is centred not side-weighted */
#signup.band .band__media::after {
  background:
    linear-gradient(180deg, rgba(16,16,15,.72) 0%, rgba(16,16,15,.62) 50%, rgba(16,16,15,.82) 100%),
    radial-gradient(80% 70% at 50% 50%, rgba(16,16,15,.35) 0%, rgba(16,16,15,.8) 100%);
}
.signup__wrap { position: relative; z-index: 1; }
/* copyright and origin line pinned to the corners of the closing band */
.bandfoot {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: clamp(3rem, 8vw, 6rem); padding-top: 1.2rem;
  border-top: 1px solid rgba(243,240,232,.16);
  font-size: var(--fs-min); color: #B4AFA6;
}
@media (max-width: 560px) { .bandfoot { flex-direction: column; text-align: center; gap: .4rem; } }
#signup .signup__form input { background: #FFFFFF; border-color: #FFFFFF; color: #2B2B2A; }
#signup .signup__sub { color: #D5D0C6; }

/* the six gif+text rows run back to back, so they need half the usual gap */
.rowsec { padding-block: calc(var(--sec-y) / 2); }
/* every row clip shares one frame, so the square stop-motion crops to match
   the 2:1 promo clips rather than towering over them */
.split__media video { aspect-ratio: 2 / 1; object-fit: cover; }

/* copyright now sits under the closing email CTA */

/* hero render sits behind the copy, cropped from the right so the planks
   fill the space beside the headline */
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* video is listed alongside img because without it the clip falls back to its
   intrinsic width — 1440px — and simply stops there on a wider monitor,
   leaving the rest of the hero empty. Every other background media rule on the
   page already covers both. */
.hero__media img,
.hero__media video {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
}
.hero__grid { position: relative; z-index: 1; }

/* Below 940px the media used to be pinned to a 30% strip along the bottom,
   with 34vh of padding reserving the space. That was built for a cut-out
   product still standing on the floor of the hero. The section renders a
   lifestyle film now, so the strip left four fifths of the hero as flat
   dark with no footage in it at all — stacked, and darker than the desktop
   view it was meant to match. The film covers the whole hero at every
   width, as it does on the campaign page. */

/* numeral tiles: the bespoke face's figures carry these, no imagery needed */
.tile--stat {
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: .2rem; padding: 1.6rem 1.5rem 1.4rem; min-height: 265px;
}
.stat__fig {
  font-family: "MODGAV General", sans-serif;
  /* sized so the longest figure, 100%, clears its tile at every width */
  font-size: clamp(2.6rem, 1.2rem + 3.5vw, 4.05rem); font-weight: 700;
  line-height: .88; letter-spacing: -.03em;
}
.tile--copper { background: linear-gradient(140deg, var(--copper-lt) 0%, var(--copper) 60%, var(--copper-dk) 100%); color: #17110A; }
.tile--bone   { background: var(--bone-2); color: #2B2B2A; }
.tile--ink    { background: var(--dark); color: var(--bone); }
.tile--ink .stat__fig { color: var(--copper-lt); }
.tile--stat .tile__title { font-size: var(--fs-sub); font-weight: 600; letter-spacing: 0; }

/* a claim carrying a sentence rather than a figure — same box as a stat tile,
   but the title leads and the copy sits under it */
.tile--note {
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: .7rem; padding: 1.6rem 1.5rem 1.4rem; min-height: 265px;
}
.tile--note .tile__title {
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  font-weight: 600; line-height: 1.2; letter-spacing: 0; text-wrap: balance;
}
.tile--note .tile__note { font-size: var(--fs-min); line-height: 1.6; opacity: .82; max-width: 46ch; }
.tile--note .tile__note p { margin: 0; }
/* run full width and the copy would trail off into empty space, so the claim
   and its supporting sentence sit side by side once there is room */
@media (min-width: 860px) {
  .tile--note.b-6 {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: end; gap: 1rem 3rem;
    padding: 2.2rem 2.2rem 2rem;
  }
  .tile--note.b-6 .tile__title { font-size: clamp(1.4rem, 1rem + 1.1vw, 2rem); margin: 0; }
  .tile--note.b-6 .tile__note { max-width: 52ch; }
}
.tile--clip .tile__media video { width: 100%; height: 100%; object-fit: cover; }

/* underline sits transparent and is revealed on hover — a colour shift alone
   was too quiet against the dark band */
.bandfoot__links a {
  --button-color: currentColor;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  transition: color .22s var(--ease), text-decoration-color .22s var(--ease);
}
.bandfoot__links a:hover,
.bandfoot__links a:focus-visible {
  --button-color: var(--ink);
  color: var(--ink);
  text-decoration-color: var(--copper-lt);
  text-decoration-thickness: 2px;
}
/* separators are not links and must not react */
.bandfoot__links span { opacity: .45; margin: 0 .35rem; pointer-events: none; }
.bandmark a { display: inline-block; transition: opacity .22s var(--ease); }
.bandmark a:hover { opacity: .78; }

/* ==========================================================================
   LEGAL / LONG-FORM PAGES
   Warranty, accessibility, registration. These are read start to finish, so
   the column sets the measure and everything fills it — headings and body on
   the same left and right edge, rather than body capping short of the column
   and leaving a ragged gutter.
   ========================================================================== */
.plank-legal { padding-top: calc(var(--sec-y) + 3rem); }
.plank-legal .wrap--narrow { width: min(100% - 2.5rem, 52rem); }

.plank-legal .display { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem); }
.plank-legal .eyebrow { margin-bottom: .9rem; }

/* standfirst carries the promise, so it sits clearly above the section
   headings rather than matching them */
.plank-legal .rowsub {
  margin-top: 1.1rem; max-width: 40ch;
  font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem);
  font-weight: 500; line-height: 1.4; color: var(--ink);
}

/* near-full ink and a longer leading: muted grey is for a caption, not for
   two thousand words of terms */
.legal__body {
  margin-top: 1.5rem;
  font-size: 1.0625rem; line-height: 1.72; color: #3E3A34;
}
.legal__body p { margin: 0 0 1.15em; }
.legal__body p:last-child { margin-bottom: 0; }
.legal__body ul { margin: 0 0 1.15em; padding-left: 1.25em; list-style: disc; }
.legal__body li { margin-bottom: .6em; padding-left: .15em; }
.legal__body li::marker { color: var(--copper-dk); }
.legal__body a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.legal__body a:hover { color: var(--copper); }
.legal__body strong { color: var(--ink); font-weight: 600; }

/* a hairline gives sixteen sections a rhythm to scroll through. The space
   sits on both sides of it: all of it below and none above left the rule
   hanging off the last line of the section it was meant to close. */
.legal__block { margin-top: clamp(2.6rem, 5vw, 3.8rem); }
.legal__block + .legal__block {
  margin-top: clamp(1.6rem, 5vw, 2.8rem);
  padding-top: clamp(2.6rem, 5vw, 2.8rem);
  border-top: 1px solid var(--hair);
}
.legal__h2 {
  font-family: "MODGAV General", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.3rem, 1.1rem + .55vw, 1.6rem);
  font-weight: 600; line-height: 1.22;
  text-transform: uppercase; letter-spacing: .005em; color: var(--ink);
  text-wrap: balance;
}
.legal__h2 + .legal__body { margin-top: 1rem; }
.legal__updated {
  margin-top: clamp(2.6rem, 5vw, 3.6rem); padding-top: 1.4rem;
  border-top: 1px solid var(--hair);
  font-size: var(--fs-min); color: var(--ink-mute);
}

/* ---------- registration form ---------- */
.regform { margin-top: clamp(2rem, 4vw, 2.8rem); max-width: 34rem; }
.regform__row { display: grid; gap: .45rem; margin-bottom: 1.2rem; }
.regform__row label { font-size: var(--fs-min); font-weight: 600; letter-spacing: .04em; color: var(--ink); }
.regform__row input {
  padding: .95rem 1.1rem; background: var(--field-bg);
  border: 1px solid var(--hair); border-radius: var(--radius);
  color: var(--ink); font-size: var(--fs-body);
  transition: border-color .25s var(--ease);
}
.regform__row input:focus { outline: none; border-color: var(--accent); }
.regform__check { display: flex; align-items: flex-start; gap: .65rem; margin: 1.4rem 0 1.8rem; }
.regform__check input { margin-top: .22rem; width: 1.05rem; height: 1.05rem; accent-color: var(--copper-dk); flex: none; }
.regform__check label { font-size: var(--fs-min); color: var(--ink-mute); line-height: 1.5; }
.regform__note { margin-top: 1.1rem; font-size: var(--fs-min); color: var(--ink-mute); }
.regform__note p { margin: 0; }
.regform__note a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.regform__ok {
  padding: 1.2rem 1.3rem; border: 1px solid var(--accent); border-radius: var(--radius);
  color: var(--ink); font-size: var(--fs-sub);
}
.regform__err { margin-bottom: 1.2rem; color: #A6362B; font-size: var(--fs-min); }

/* ---------- footer-only variant ----------
   On legal pages the capture card is switched off, which left a wordmark
   floating in a band sized for a form. Tightened so it reads as a footer. */
.band--footer-only { padding-block: clamp(2.8rem, 6vw, 4.2rem); }
/* no image behind a plain footer, so the scrim would only tint the band unevenly */
.band--footer-only .band__media { display: none; }
.band--footer-only .bandmark { margin: 0 0 clamp(1.6rem, 3.5vw, 2.4rem); }
.band--footer-only .bandmark img { width: clamp(118px, 13vw, 158px); }
.band--footer-only .bandfoot { margin-top: 0; padding-top: clamp(1.4rem, 3vw, 2rem); border-top: 1px solid rgba(243, 240, 232, .14); }

/* ---------- thank you ---------- */
.plank-thanks { min-height: 100svh; display: flex; align-items: center; }
.plank-thanks .signup__card .eyebrow { margin-bottom: .9rem; }
.thanks__next {
  display: grid; gap: .9rem; margin: 2.2rem auto 0; max-width: 34rem;
  text-align: left;
}
.thanks__next li {
  display: grid; grid-template-columns: 2.2rem 1fr; gap: .2rem .9rem;
  align-items: start; padding-block: .8rem;
  border-top: 1px solid rgba(243, 240, 232, .16);
}
.thanks__step { grid-row: 1 / 3; font-weight: 700; color: var(--copper-lt); font-size: var(--fs-min); padding-top: .18rem; }
.thanks__copy b { display: block; font-weight: 600; line-height: 1.3; }
.thanks__copy em { font-style: normal; font-size: var(--fs-min); color: var(--ink-mute); }
.thanks__cta { margin-top: 2.4rem; }
/* .bandmark carries no top margin — on the signup section the card above it
   provides the gap, but here the button sits directly against the wordmark */
.plank-thanks .bandmark { margin-top: clamp(2.6rem, 7vw, 4.5rem); }

/* the closing band ends on its footer row, so it needs no trailing padding */
#signup.band { padding-bottom: clamp(1.6rem, 3vw, 2.4rem); }
#signup .bandfoot { margin-top: clamp(2.6rem, 7vw, 5rem); }

/* ==========================================================================
   SPEC PINS — numbered circles on the product, short leader to each label
   ========================================================================== */
.pinstage { position: relative; aspect-ratio: 16 / 9; margin-top: 2.4rem; }
/* the frame is the dots' positioning box; on the diagram it simply fills the
   stage, so the pin coordinates are unchanged from the original layout */
.pinstage__frame { position: absolute; inset: 0; }
.pinstage__img {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 84%; mix-blend-mode: multiply;
}
.pinstage__pins { position: absolute; inset: 0; margin: 0; }
.pin { position: absolute; inset: 0; }

.pin__dot {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--copper); background: var(--bone);
  display: grid; place-items: center; z-index: 2;
  font-family: "MODGAV General", sans-serif;
  font-size: var(--fs-min); font-weight: 700; color: var(--copper-dk);
}
.pin__line { position: absolute; left: var(--x); width: 1px; background: var(--copper); opacity: .8; }
.pin--up   .pin__line { top: var(--ly); bottom: calc(100% - var(--y) + 17px); }
.pin--down .pin__line { top: calc(var(--y) + 17px); bottom: calc(100% - var(--ly)); }

.pin__label { position: absolute; left: var(--x); width: 200px; text-align: center; }
.pin--up   .pin__label { top: var(--ly); transform: translate(-50%, -100%); padding-bottom: .5rem; }
.pin--down .pin__label { top: var(--ly); transform: translate(-50%, 0); padding-top: .5rem; }
.pin__label b { display: block; font-size: var(--fs-body); font-weight: 600; line-height: 1.25; }
.pin__label em { font-style: normal; font-size: var(--fs-min); color: var(--ink-mute); }


/* the dot is a button on every width so it can be tapped on phones; the reset
   keeps it looking identical to the span it replaced */
.pin__dot { appearance: none; -webkit-appearance: none; padding: 0; cursor: default; }

/* phone presentation of the same pins, hidden on the diagram layout.
   The list wrapper stays in flow because the inset close-up is one of its
   items and has to be liftable onto the diagram at desktop width. */
.pinwrap { position: relative; }
.pinstage__cap { display: none; }
.pinlist { display: block; margin: 0; padding: 0; list-style: none; }
.pinlist__item { display: none; }

@media (max-width: 860px) {
  /* ------------------------------------------------------------------
     The diagram does not survive being scaled to a phone: labels overlap
     and the leader lines cross. So the stage pins itself to the top of
     the viewport and the annotations become a list that scrolls under
     it, with the active dot and row tracking each other.
     ------------------------------------------------------------------ */
  .pinwrap { position: static; }

  .pinstage {
    /* clears the fixed topbar. plank.js keeps --topbar-h in step with the
       real header height, which changes when it sticks and the logo shrinks;
       the fallback covers the moment before the first measurement lands. */
    position: sticky; top: var(--topbar-h, 78px); z-index: 30;
    aspect-ratio: auto; margin-top: 1.6rem;
    padding: .7rem 0 .8rem;
    background: var(--bone);
    border-bottom: 1px solid rgba(35, 35, 34, .12);
  }
  .pinstage__frame { position: relative; inset: auto; }
  .pinstage__img { position: static; transform: none; width: 100%; }

  /* pins stay on the product, but only as dots — labels move to the list */
  .pinstage__pins { position: absolute; inset: 0; }
  .pin { position: absolute; inset: 0; }
  .pin__line,
  .pin__label { display: none; }

  /* smaller than the diagram dots: at phone width the six markers sit close
     enough together that 28px circles overlapped each other */
  .pin__dot {
    /* falls back to the diagram position when a pin has no phone override */
    left: var(--mx, var(--x)); top: var(--my, var(--y));
    width: 20px; height: 20px; border-width: 1px; cursor: pointer;
    font-size: 9.5px; letter-spacing: -.02em;
    opacity: .55; transition: opacity .25s var(--ease), transform .3s var(--ease),
      background .25s var(--ease), color .25s var(--ease);
  }
  .pin__dot.is-on {
    opacity: 1; background: var(--copper); color: var(--bone);
    transform: translate(-50%, -50%) scale(1.18); z-index: 3;
  }

  .pinstage__cap {
    display: flex; align-items: baseline; gap: .5rem;
    margin: .7rem 0 0; min-height: 1.2em;
    font-size: var(--fs-min); letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-mute);
  }
  .pinstage__cap-num { color: var(--copper-dk); font-weight: 700; }
  .pinstage__cap b { color: var(--ink); font-weight: 600; letter-spacing: .04em; }

  .pinlist__item {
    position: relative; cursor: pointer;
    display: grid; grid-template-columns: 2.5rem 1fr; gap: .15rem .75rem;
    padding: 1.3rem .5rem 1.3rem 1rem;
    border-bottom: 1px solid rgba(35, 35, 34, .12);
    transition: background .3s var(--ease);
  }
  .pinlist__item::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: var(--copper); transform: scaleY(0); transform-origin: top;
    transition: transform .4s var(--ease);
  }
  .pinlist__item.is-on { background: rgba(184, 115, 51, .07); }
  .pinlist__item.is-on::before { transform: scaleY(1); }

  .pinlist__num {
    grid-row: 1 / 3; padding-top: .15rem;
    font-size: var(--fs-min); font-weight: 700; color: var(--ink-mute);
    transition: color .3s var(--ease);
  }
  .pinlist__item.is-on .pinlist__num { color: var(--copper-dk); }

  .pinlist__title { margin: 0 0 .25rem; font-size: var(--fs-sub); font-weight: 600; line-height: 1.25; }
  .pinlist__detail { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--ink-mute); }
  .pinlist__tag {
    display: inline-block; margin-top: .6rem; padding: .25rem .6rem;
    border: 1px solid rgba(35, 35, 34, .18); border-radius: 999px;
    font-size: var(--fs-min); letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-mute);
  }
  .pinlist__item.is-on .pinlist__tag { border-color: rgba(184, 115, 51, .45); color: var(--copper-dk); }
}

/* ---------- hero ground: a fine worn grain, no colour wash ----------
   feTurbulence is generated inline, so there is no extra request. Kept very
   low so it reads as tooth on the surface rather than visible noise. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 260px 260px;
  opacity: .055;
  mix-blend-mode: overlay;
}
/* a second, much coarser pass gives the grain some unevenness so it does not
   read as a uniform screen */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  background-size: 700px 700px;
  opacity: .05;
  mix-blend-mode: soft-light;
}

/* hero ground: the 60-second cut, dimmed enough to carry centred copy */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(18,18,17,.86) 0%, rgba(18,18,17,.62) 34%, rgba(18,18,17,.72) 68%, rgba(18,18,17,.92) 100%),
    radial-gradient(120% 90% at 50% 50%, rgba(18,18,17,.30) 0%, rgba(18,18,17,.78) 100%);
}

/* comment 9: the supporting line now sits under the large text */
.valuesub {
  margin-top: 1.1rem; font-size: var(--fs-sub); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}

/* comment 10: the founder film replaces the two stills */
.founder__film { background: var(--bone-2); overflow: hidden; }
.founder__film video { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #171716; display: block; }

/* a YouTube embed in place of an uploaded file. The iframe has no intrinsic
   size, so the ratio is held by the wrapper rather than the frame. */
.embed {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #171716; border-radius: inherit; overflow: hidden;
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* the fixed header can cover an anchor target, so give sections clearance */
section[id] { scroll-margin-top: 110px; }

/* the bento sits inside the centred intro wrap, so it must opt back out */
.bento, .bento .tile, .bento .tile__body { text-align: left; }

/* ==========================================================================
   CLIENT ROUND 2
   ========================================================================== */

/* 18: the founder's own "So Metal" lockup, sat between the name and the specs */
.sometal { margin-top: clamp(.9rem, 1.8vw, 1.3rem); }
.sometal img {
  width: clamp(104px, 12vw, 148px); height: auto; display: inline-block;
}

/* 41: the stacked lockup closes the page above the legal line */
/* 20% smaller than it was, with matched clear space above and below — it was
   sitting hard against the email field */
.bandmark {
  margin: clamp(2.8rem, 6vw, 4.4rem) 0 clamp(2.8rem, 6vw, 4.4rem);
  text-align: center;
}
.bandmark img {
  width: clamp(144px, 17.6vw, 208px); height: auto; display: inline-block;
}

/* 35: cable management is the feature no competitor has, so callout 03 gets
   the channel in close-up. It is a list item so phones can slot it between
   the spec rows; at desktop width it is lifted onto the empty quarter of the
   diagram beside its own label. */
.pinlist__shot { list-style: none; }
.pinshot {
  position: absolute; top: 3%; right: 0; width: min(23%, 268px); margin: 0;
}
.pinshot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.pinshot figcaption {
  margin-top: .5rem; font-size: var(--fs-min); color: var(--ink-mute);
  letter-spacing: .02em;
}
@media (max-width: 860px) {
  /* in the list, between the spec rows */
  .pinshot { position: static; width: auto; max-width: 420px; margin: 1.6rem auto; }
  .pinshot figcaption { text-align: center; }
}
}

/* ==========================================================================
   FOCUS VISIBLE  (WCAG 2.4.7)
   Two input rules were stripping the browser ring and replacing it with only
   a border tint, and nothing else on the page had a focus style at all — a
   keyboard visitor could move through the page but not see where they were.
   :focus-visible shows the ring for keyboard use without putting it on mouse
   clicks. Declared last so it beats the outline:none rules above.
   ========================================================================== */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
/* controls that sit on photography need separation from whatever is behind */
.pin__dot:focus-visible,
.pick:focus-visible,
.topbar__logo:focus-visible {
  outline: 2px solid var(--copper-lt);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(23, 23, 22, .55);
}
/* inputs already carry a border, so the ring sits tighter on them */
.signup__form input:focus-visible,
.regform__row input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}