@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Your Form — design system
   Rebuilt from the Squarespace site as standalone HTML/CSS/JS.
   All typography is real text; PNGs are used for graphics only.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Voyage (display) is a commercial typeface. The .woff2 files here were
   generated from the desktop OTFs supplied by the client. A WEB licence
   from VJ-Type is required before this goes live — see NOTES.md.
   Body copy in the InDesign source is PingFang TC, which is an Apple system
   font and cannot be served as a webfont. Inter is used as the substitute:
   same humanist-grotesque proportions, and it falls back to the real
   PingFang on Apple devices via the stack below.
--------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Voyage";
  src: url("../fonts/voyage-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Voyage";
  src: url("../fonts/voyage-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Palette: client 4 brand colors (#3d2f2c, #968794, #886961, #a89fa9) */
  --bg: #a89fa9;
  --bg-deep: #968794;
  --display: #886961;
  /* section headings */
  --display-dark: #3d2f2c;
  /* page-hero headings */
  --hero-copy: #886961;
  /* page-hero paragraph */
  --ink: #3d2f2c;
  --body: #3d2f2c;
  --muted: #968794;
  --card-copy: #886961;
  --line: #968794;
  --cream: #efe7db;

  --font-display: "Voyage", "Playfair Display", Georgia, serif;
  --font-body: "Inter", "PingFang TC", "PingFang SC", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Layout tokens taken from the live Squarespace CSS so widths resolve
     identically at every viewport:
       row width = min(site-max-width, 100% - gutter*2 - inset-padding)
     Full-bleed sections use inset-padding 0; inset sections use gutter*2. */
  --site-max-width: 1500px;
  /* --maxPageWidth on the live site */
  --site-gutter: 8vw;
  --inset-padding: 0px;

  --wrap: 1500px;
  /* legacy alias */
  --gutter: 8vw;
  --gap-lg: clamp(16px, calc(var(--canvas) * 0.022), 40px);
  --gap-md: clamp(12px, calc(var(--canvas) * 0.016), 28px);
  /* Fluid measure: shrinks on short screens, not just narrow ones.
     1440x900  -> 1395    1512x982  -> 1512
     1728x1117 -> 1728    1920x1080 -> 1674    1366x768 -> 1190     */
  --canvas: min(100vw, 155svh);
  --header-h: 76px;
  /* sleek header matching reduced logo size */
  /* Space actually available below the sticky header */
  --view: calc(100svh - var(--header-h));
  /* Vertical rhythm now scales with screen HEIGHT, not width, so a short
     laptop screen gets tighter spacing than a tall desktop one. */
  --section-y: 4vw;
  /* 4vw, matching --pagePadding */
}

/* At 1290px and wider every size is frozen, so nothing scales on bigger
   monitors. Below that the measure stays fluid in both width and height. */
/* Device tiers. Sizes step up at each one and stay identical inside it,
   so a 1280 laptop and a 1536 desktop each have their own consistent
   scale, and 1920+ scales fluidly up to a ceiling.
     1280 -> MacBook / large laptop
     1536 -> desktop / large PC
     1920+ -> desktop scale, fluid to a 2100px cap                       */
@media (min-width: 1280px) {
  :root {
    --canvas: 1600px;
  }
}

@media (min-width: 1536px) {
  :root {
    --canvas: 1800px;
  }
}

@media (min-width: 1920px) {
  :root {
    --canvas: min(100vw, 2100px);
  }
}

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  letter-spacing: -1px;

  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

/* Site-wide: body copy runs slightly tight, matching the live site */


a {
  color: inherit;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 20px;
  z-index: 999;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
}

.wrap {
  width: min(var(--site-max-width),
      calc(100% - var(--site-gutter) * 2 - var(--inset-padding)));
  margin-inline: auto;
}

/* Content sections on the live site are background-width--inset, which
   adds a second gutter's worth of padding on each side above 768px. */
.wrap--inset {
  --inset-padding: calc(var(--site-gutter) * 2);
}

@media (max-width: 767px) {
  .wrap--inset {
    --inset-padding: 0px;
  }
}

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

.section--tight {
  padding-block: clamp(20px, 3svh, 46px);
}

/* --- Type ---------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  color: var(--display);
  margin: 0 0 .5rem;
}

.lede {
  color: var(--ink);
  max-width: 80ch;
  margin: 0;
}

/* The page-hero paragraph is larger, lighter in weight, and set in the
   warm brown from the live site rather than the near-black body ink. */
.lede--hero {
  color: #886961;
  max-width: 56ch;
}

.card-title {
  font-family: var(--font-display);
  color: var(--display-dark);
  margin: 0 0 .5rem;
}

.card-copy {
  color: var(--card-copy);
  margin: 0;
  max-width: 42ch;
}

.centered {
  text-align: center;
}

.centered .lede {
  margin-inline: auto;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .85em 1.9em;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--ink);
  color: var(--cream);
}

.btn--nav {
  border-radius: 7px;
  padding: .55em 1.05em;
  font-weight: 400;
  font-size: 1.2rem;
  padding: .7em 1.5em;
  letter-spacing: normal;
  border-color: rgba(61, 47, 44, .45);
}

.btn--solid {
  background: var(--ink);
  color: var(--cream);
}

.btn--solid:hover,
.btn--solid:focus-visible {
  background: transparent;
  color: var(--ink);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 1.4vw, 26px);
  justify-content: center;
  margin-top: 2rem;
}

/* --- Header -------------------------------------------------------------- */

.site-header {
  /* position: sticky; */
  top: 0;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  padding-top: 15px;
  letter-spacing: normal;
  transition: border-color .25s ease, box-shadow .25s ease, transform .3s ease, padding-top .25s ease;
  will-change: transform;
}

/* Scrolling down slides the bar away so the section has the whole screen;
   scrolling up brings it straight back. */
.site-header.is-hidden {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: border-color .25s ease, box-shadow .25s ease;
  }

  .site-header.is-hidden {
    transform: none;
  }
}

.site-header.is-stuck {
  border-bottom-color: rgba(61, 47, 44, .14);
  box-shadow: 0 6px 24px rgba(61, 47, 44, .07);
  padding-top: 0;
}

/* Compact once scrolled, so more of each section is on screen */
.site-header.is-stuck .site-header__inner {
  min-height: 60px;
}

.site-header.is-stuck .brand {
  font-size: 1.85rem;
}

.site-header.is-stuck .btn--nav {
  padding: .45em 1.1em;
  font-size: 1.02rem;
}

.site-header__inner,
.site-header .brand,
.site-header .btn--nav {
  transition: min-height .25s ease, font-size .25s ease, padding .25s ease;
}

.site-header__inner {
  width: calc(100% - var(--site-gutter) * 2);
  margin-inline: auto;
  max-width: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  min-height: var(--header-h);
}

.site-header__inner>.brand {
  justify-self: start;
}

.site-header__inner>.nav {
  grid-column: 2;
  justify-self: center;
}

.site-header__inner>.header-cta {
  grid-column: 3;
  justify-self: end;
}

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.25rem;
  letter-spacing: normal;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 38px);
}

.nav .nav__cta {
  display: none;
}

.nav a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 400;
  font-size: 1.32rem;
  letter-spacing: normal;
  position: relative;
  padding-block: 4px;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.nav a:hover::after,
.nav a:focus-visible::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: var(--ink);
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 1.8px;
  margin: 5px auto;
  background: currentColor;
  transition: transform .28s ease, opacity .2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.8px) rotate(-45deg);
}

@media (max-width: 460px) {
  .brand {
    font-size: 1.85rem;
  }

  .site-header__inner {
    gap: 10px;
  }
}

@media (max-width: 900px) {
  .nav-toggle {
    display: block;
  }

  .header-cta {
    display: none;
  }

  .nav .nav__cta {
    display: inline-flex;
  }

  /* Header collapses to logo + burger; the CTA moves inside the panel. */
  .site-header__inner {
    display: flex;
    justify-content: space-between;
  }

  .site-header__inner>.nav,
  .site-header__inner>.header-cta {
    grid-column: auto;
    justify-self: auto;
  }

  .header-cta {
    order: 3;
  }

  .header-cta .btn--nav {
    padding: .7em 1.3em;
  }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--bg);
    padding: 18px var(--gutter) 34px;
    border-bottom: 1px solid rgba(61, 47, 44, .14);
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .24s ease, transform .24s ease, visibility .24s;
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav a {
    font-size: 1.15rem;
    padding-block: 11px;
    width: 100%;
  }

  .nav .btn {
    margin-top: 10px;
  }
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  padding-block: clamp(26px, 2.4vw, 44px) clamp(28px, 3.2vw, 52px);
}

.hero .display {
  color: var(--display-dark);
  margin-bottom: 1.1rem;
}

/* --- Hero reel -----------------------------------------------------------
   Matches the Squarespace "slideshow reel": full-bleed strip at a fixed
   height, images keep their natural aspect ratio, neighbours peek in at
   the edges, arrows step one image at a time.
-------------------------------------------------------------------------- */

.reel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.reel__track {
  display: flex;
  gap: 0;
  height: 57vh;
  min-height: 320px;
  will-change: transform;
  transition: transform .62s cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .reel__track {
    transition: none;
  }
}

.reel__slide {
  flex: 0 0 auto;
  height: 100%;
  padding: 0;
  margin: 0;
}

.reel__slide img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  display: block;
}

.reel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(61, 47, 44, .18);
  border-radius: 6px;
  background: rgba(244, 240, 234, .92);
  color: var(--ink);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  transition: background-color .2s ease, opacity .2s ease;
}

.reel__btn:hover,
.reel__btn:focus-visible {
  background: var(--cream);
}

.reel__btn[disabled] {
  opacity: .35;
  cursor: default;
}

.reel__btn--prev {
  left: 14px;
}

.reel__btn--next {
  right: 14px;
}

@media (max-width: 700px) {
  .reel__track {
    height: 44vh;
    min-height: 260px;
  }

  .reel__btn {
    width: 38px;
    height: 38px;
  }
}

/* One figure per card in the scan steps */
.trio--figures>div {
  display: flex;
  flex-direction: column;
}

.step-figure {
  height: min(40svh, calc(var(--canvas) * 0.34));
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
  align-self: center;
  margin-bottom: clamp(14px, 2.4svh, 30px);
}

.form-figure {
  height: min(64svh, calc(var(--canvas) * 0.54));
}

@media (max-width: 780px) {
  .step-figure {
    height: min(34svh, 300px);
  }

  .form-figure {
    height: min(50svh, 420px);
  }
}

/* --- Generic three-up grid ---------------------------------------------- */

.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3.4vw, 54px);
  margin-top: clamp(16px, 2.4svh, 34px);
}

@media (max-width: 780px) {
  .trio {
    grid-template-columns: 1fr;
  }
}

/* Figure strip that sits above the three text columns */
.figure-strip {
  margin: clamp(14px, 2.4svh, 30px) auto 0;
  max-width: 82%;
  text-align: center;
}

.figure-strip img {
  max-height: min(34svh, calc(var(--canvas) * 0.30));
  width: auto;
  margin-inline: auto;
}

/* --- Forms (product) ----------------------------------------------------- */

/* Capped: the three-up render was 880px tall at full width */
.forms-visual {
  position: relative;
  margin: clamp(14px, 2.4svh, 30px) auto 0;
  max-width: 62%;
  text-align: center;
}

.forms-visual img {
  max-height: min(38svh, calc(var(--canvas) * 0.33));
  width: auto;
  margin-inline: auto;
}

.badge {
  position: absolute;
  top: 2%;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(.85rem, calc(var(--canvas) * 0.0150), 1.15rem);
  line-height: 1.05;
  text-align: center;
}

.badge--left {
  left: 8%;
}

.badge--right {
  right: 8%;
}

.form-card__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
}

.form-card__price {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--body);
}

/* --- Split layouts ------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
  margin-top: clamp(14px, 2.2svh, 32px);
}

.split--narrow-first {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
}

#patterns-heading~.split .stack {
  gap: clamp(12px, 2svh, 26px);
}

@media (max-width: 860px) {

  .split,
  .split--narrow-first {
    grid-template-columns: 1fr;
  }
}

.stack {
  display: grid;
  gap: clamp(16px, 2.6svh, 32px);
}

.tick-list {
  list-style: none;
  margin: .8rem 0 0;
  padding: 0;
  display: grid;
  gap: clamp(.7rem, 1.6svh, 1.4rem);
}

.tick-list li {
  position: relative;
  padding-left: 1.3rem;
  color: var(--card-copy);
  max-width: 34ch;
}

.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: .3em;
  height: .3em;
  border-radius: 50%;
  background: var(--card-copy);
}

.tick-list strong {
  color: #886961;
  font-weight: 600;
}

/* --- Pattern drawings ---------------------------------------------------- */

.pattern-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(8px, 1.2vw, 18px);
  align-items: center;
  max-width: 88%;
  justify-self: end;
}

.pattern-blocks {
  justify-self: end;
}

.pattern-blocks img {
  max-height: min(50svh, calc(var(--canvas) * 0.44));
  width: auto;
  margin-inline: auto;
}

@media (max-width: 860px) {
  .pattern-blocks {
    justify-self: center;
  }
}

@media (max-width: 860px) {
  .pattern-grid {
    max-width: 100%;
    justify-self: center;
  }
}

/* --- Founder ------------------------------------------------------------- */

.split--founder {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: end;
  /* text sits low against the tall portrait */
  gap: clamp(24px, 3vw, 48px);
}

@media (max-width: 860px) {
  .split--founder {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .founder-photo {
    border-radius: 22px;
  }
}

.founder-photo {
  width: 100%;
  max-width: none;
  max-height: min(48svh, calc(var(--canvas) * 0.42));
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 30px;
}

/* The founder column is wide, so its copy sits a step above the
   three-across card text. */
.founder-copy {
  max-width: 62ch;
}

/* --- Impact --------------------------------------------------------------
   Two columns split by a vertical rule. Left: a 3x2 box grid (filled
   label row over an outlined value row) plus a full-width note. Right:
   the sustainability copy beside the flat dress form.
-------------------------------------------------------------------------- */

.impact-grid .display {
  color: var(--display-dark);
}

.impact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(22px, 2.6vw, 48px);
  align-items: start;
}

.impact-right {
  border-left: 2px solid rgba(61, 47, 44, .38);
  padding-left: clamp(20px, 2.2vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 40%);
  gap: clamp(16px, 2vw, 34px);
  align-items: start;
}

@media (max-width: 900px) {
  .impact-grid .display {
    color: var(--display-dark);
  }

  .impact-grid {
    grid-template-columns: 1fr;
  }

  .impact-right {
    border-left: 0;
    padding-left: 0;
  }
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1vw, 16px);
  margin-top: clamp(12px, 2svh, 24px);
}

.stat-label,
.stat-value {
  border: clamp(2.5px, .21vw, 4px) solid var(--ink);
  border-radius: 10px;
  padding: clamp(11px, 1.9svh, 22px) clamp(10px, 1.1vw, 20px);
  margin: 0;
  text-align: center;
  color: var(--ink);
  display: grid;
  place-items: center;
}

.stat-label {
  background: #968794;
}


.impact-note {
  border: clamp(2px, .16vw, 3px) solid rgba(61, 47, 44, .42);
  border-radius: 10px;
  padding: clamp(12px, 2svh, 24px) clamp(14px, 1.6vw, 28px);
  margin: clamp(8px, 1.4svh, 16px) 0 0;
  max-width: none;
  text-align: center;
  color: var(--card-copy);
}

.sustain-copy {
  color: var(--card-copy);
  margin: clamp(8px, 1.4svh, 16px) 0 0;
  max-width: none;
}

.sustain__form {
  width: 100%;
  max-height: min(40svh, calc(var(--canvas) * 0.35));
  object-fit: contain;
  object-position: top;
  align-self: start;
}

@media (max-width: 560px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }

  .impact-right {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .sustain__form {
    max-width: 200px;
  }
}

.rule {
  border: 0;
  border-top: 2px solid rgba(61, 47, 44, .38);
  margin: clamp(18px, 2.8svh, 38px) 0 0;
}

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

.form-grid {
  display: grid;
  gap: 18px;
  max-width: 620px;
  margin-top: 2rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 560px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.field {
  display: grid;
  gap: .4rem;
}

.field label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
}

.field input,
.field textarea {
  font: inherit;
  color: var(--ink);
  background: rgba(255, 255, 255, .32);
  border: 1.5px solid var(--line);
  border-radius: 4px;
  padding: .8em .9em;
  width: 100%;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: rgba(255, 255, 255, .5);
}

.field textarea {
  min-height: 150px;
  resize: vertical;
}

.field.has-error input,
.field.has-error textarea {
  border-color: #7d2f2f;
}

.field__error {
  color: #6f2626;
  font-size: .82rem;
  min-height: 1em;
}

.form-status {
  font-weight: 600;
  min-height: 1.4em;
}

.form-status[data-state="error"] {
  color: #6f2626;
}

/* --- Footer --------------------------------------------------------------
   Sized against the 1920 reference: oversized wordmark on the left, two
   link columns pushed out to roughly 59% and 84% of the row.
-------------------------------------------------------------------------- */

.site-footer {
  background: var(--bg-deep);
  border-top: 0;
  padding-block: clamp(40px, 4.4vw, 84px) clamp(30px, 3.2vw, 60px);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 2.9fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 3.2vw, 60px);
  align-items: start;
}

@media (max-width: 860px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
  }
}

.footer-brand .brand {
  font-size: clamp(2.6rem, calc(var(--canvas) * 0.0465), 5.6rem);
  display: inline-block;
  margin-bottom: .3rem;
  color: var(--display-dark);
}

.footer-brand p {
  color: var(--hero-copy);
  margin: clamp(10px, 1.1vw, 22px) 0 0;
  padding-left: .55em;
  font-weight: 600;
  font-size: clamp(1.2rem, calc(var(--canvas) * 0.0185), 2.3rem);
}

.footer-col h2 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--display-dark);
  font-size: clamp(1.5rem, calc(var(--canvas) * 0.0210), 2.6rem);
  line-height: 1;
  margin: 0 0 clamp(14px, 1.5vw, 26px);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(10px, 1.15vw, 20px);
}

.footer-col a {
  color: var(--display-dark);
  font-size: clamp(0.88rem, calc(var(--canvas) * 0.0115), 1.35rem);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}

.footer-col a:hover,
.footer-col a:focus-visible {
  text-decoration-thickness: 2px;
}

/* --- Modal --------------------------------------------------------------- */

.modal[hidden] {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(61, 47, 44, .5);
}

.modal__panel {
  background: var(--bg);
  border-radius: 6px;
  padding: clamp(26px, 4vw, 46px);
  width: min(620px, 100%);
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 24px 60px rgba(61, 47, 44, .3);
}

.modal__close {
  float: right;
  border: 0;
  background: transparent;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  padding: 0 4px;
}

/* --- Layout refinements -------------------------------------------------- */

.split--narrow-second {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
}

@media (max-width: 900px) {
  .split--narrow-second {
    grid-template-columns: 1fr;
  }
}



/* The anonymous avatar is a small supporting graphic, not a hero image */
.split>img {
  justify-self: center;
}

.founder-photo {
  justify-self: start;
}

@media (max-width: 860px) {
  .founder-photo {
    justify-self: center;
  }
}

/* Badges sit over the outer two forms */
@media (max-width: 520px) {
  .badge {
    top: 0;
    font-size: .78rem;
  }

  .badge--left {
    left: 3%;
  }

  .badge--right {
    right: 3%;
  }
}

/* Constrain supporting graphics to their column on narrow screens */

/* The reference leaves a clear break between the two lists */


/* --- Learn More CTA ------------------------------------------------------ */

.cta-section .btn-row {
  margin-top: clamp(30px, 4vw, 76px);
}

.cta-section .display {
  color: var(--display-dark);
}

.cta-section .lede {
  color: #886961;
  max-width: 62ch;
}

/* Forced break only where the line is wide enough to want one */
.br-wide {
  display: none;
}

@media (min-width: 900px) {
  .br-wide {
    display: inline;
  }
}

/* Both CTA buttons share the filled mauve treatment */
.btn--cta {
  background: #968794;
  border-color: #968794;
  color: var(--ink);
  font-size: clamp(.95rem, calc(var(--canvas) * 0.0100), 1.22rem);
  padding: .87em 1.85em;
  font-weight: 600;
}

.btn--cta:hover,
.btn--cta:focus-visible {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

/* --- Coming Soon badge --------------------------------------------------
   On the live site this is a soft mauve disc sitting behind the label,
   overlapping the outer two forms. Positioned as a percentage of the
   image so it tracks the artwork at every screen size.
------------------------------------------------------------------------- */
.badge {
  position: absolute;
  top: auto;
  bottom: 13%;
  display: grid;
  place-items: center;
  width: clamp(72px, 11%, 132px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(196, 187, 199, .72);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--display);
  font-size: clamp(.65rem, calc(var(--canvas) * 0.0105), 1.02rem);
  line-height: 1.12;
  text-align: center;
  margin: 0;
  pointer-events: none;
}

.badge--left {
  left: 22%;
  right: auto;
}

.badge--right {
  right: 8%;
  left: auto;
}

@media (max-width: 520px) {
  .badge {
    bottom: 14%;
    font-size: .6rem;
  }

  .badge--left {
    left: 19%;
  }

  .badge--right {
    right: 1%;
  }
}

/* Rule above the founder block, as on the live site */
.founder-rule {
  border: 0;
  border-top: 1.5px solid var(--line);
  margin: clamp(16px, 2vw, 30px) 0 0;
}

/* --- Tutorials page ------------------------------------------------------ */

.tutorial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 62px);
  margin-top: clamp(18px, 2vw, 34px);
}

@media (max-width: 860px) {
  .tutorial-grid {
    grid-template-columns: 1fr;
  }
}

.tutorial__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--fs-h3) + 10px);
  line-height: 1.15;
  letter-spacing: var(--track-display);
  color: var(--display-dark);
  text-align: center;
  margin: 0 0 clamp(14px, 1.5vw, 26px);
}

.tutorial__player {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: var(--bg-deep);
  border: 0;
}

.tutorial__caption {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: -1px;
  font-weight: 400;
  color: var(--card-copy);
  margin: clamp(12px, 1.3vw, 22px) 0 0;
  max-width: none;
}

.tutorial__caption a {
  color: var(--display-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .16em;
}

.tutorial-note {
  font-family: var(--font-body);
  font-size: clamp(21px, 1.6vw, 26px);
  line-height: 1.35;
  letter-spacing: -1px;
  font-weight: 600;
  text-align: center;
  color: var(--display-dark);
  margin: 150px auto 0;
  max-width: none;
}

/* Keep it to a single line wherever there is room for one */
@media (min-width: 1250px) {
  .tutorial-note {
    white-space: nowrap;
  }
}

.request-section {
  text-align: center;
  padding-block: clamp(52px, 5.2vw, 90px);
}

.request-section .display {
  color: var(--display-dark);
  margin-bottom: clamp(12px, 1.2vw, 18px);
}

.request-section .btn--cta {
  padding-inline: 3.6em;
}

.request-section .lede {
  color: #886961;
  max-width: 48ch;
  margin-inline: auto;
}

.request-section .btn-row {
  margin-top: clamp(24px, 3vw, 56px);
}

/* --- Explore Forms page -------------------------------------------------- */

.forms-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 0;
}

.forms-hero .wrap {
  position: relative;
  padding-top: clamp(150px, 15vw, 210px);
  padding-bottom: clamp(60px, 8vw, 100px);
}

.forms-hero .display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--display-dark);
  text-align: center;
  margin: 0 auto clamp(16px, 1.8vw, 22px);
}

.forms-hero .lede {
  font-family: var(--font-body);
  font-size: clamp(21px, 1.65vw, 32px);
  line-height: 1.25;
  letter-spacing: -1px;
  font-weight: 600;
  color: #886961;
  text-align: center;
  max-width: 42ch;
  margin-inline: auto;
  margin-top: 0;
  margin-bottom: 0;
}

/* Positioned inside .forms-hero .wrap so it aligns with the right container edge */
.forms-hero__silhouette {
  position: absolute;
  right: 0;
  top: clamp(0px, 1.5vw, 20px);
  bottom: clamp(60px, 8vw, 100px);
  height: calc(100% - clamp(60px, 8vw, 100px) - clamp(0px, 1.5vw, 20px));
  width: auto;
  max-width: clamp(200px, 24vw, 340px);
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
}

@media (max-width: 860px) {
  .forms-hero__silhouette {
    display: none;
  }
}

.explore-cue {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-sub);
  letter-spacing: -1px;
  font-weight: 600;
  color: var(--display-dark);
  margin-top: clamp(140px, 16vw, 240px);
  margin-bottom: 0;
  text-align: center;
}

.explore-cue span {
  display: block;
  font-size: 1.4em;
  line-height: 1;
}

/* One product block: copy on the left, form photo on the right */
.product-block {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 320px);
  gap: clamp(28px, 3.5vw, 64px);
  align-items: start;
  padding-block: clamp(36px, 4vw, 72px);
}

.product-block img {
  width: 100%;
  max-width: clamp(240px, 24vw, 320px);
  height: auto;
  align-self: start;
  justify-self: end;
}

section[aria-labelledby="essential-heading"] .product-block {
  padding-block: calc(clamp(36px, 4vw, 72px) + 50px);
}

section[aria-labelledby="essential-heading"] .product-block img {
  max-width: clamp(200px, 20vw, 260px);
}

@media (max-width: 900px) {
  .product-block {
    grid-template-columns: 1fr;
  }

  .product-block img {
    justify-self: center;
    max-width: 320px;
  }
}

.product-block__head {
  position: relative;
}

.product-block .display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--display);
  margin-bottom: clamp(10px, 1.1vw, 20px);
}

.product-block__intro {
  font-family: var(--font-body);
  font-size: clamp(20px, 1.55vw, 24px);
  line-height: 1.25;
  letter-spacing: -1px;
  font-weight: 600;
  color: var(--ink);
  max-width: calc(56ch + 60px);
  margin: 0;
}

.product-block__head:has(.badge--inline) .product-block__intro {
  max-width: calc(46ch + 60px);
}

.product-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  max-width: clamp(740px, 56vw, 840px);
  margin-top: clamp(18px, 2.2vw, 36px);
}

@media (max-width: 620px) {
  .product-cols {
    grid-template-columns: 1fr;
  }
}

.product-cols h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--fs-h3) + 10px);
  line-height: 1.15;
  letter-spacing: var(--track-display);
  color: var(--display-dark);
  margin: 0 0 12px;
}

.product-cols .tick-list li {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: -1px;
  font-weight: 400;
  color: var(--card-copy);
  max-width: 100%;
}

/* The badge overlaps the heading block on this page, not an image */
/* Sits in the gap to the right of the intro copy, never over it */
.badge--inline {
  position: absolute;
  top: 50%;
  left: auto;
  right: 4%;
  bottom: auto;
  transform: translateY(-38%);
  width: clamp(88px, 9.5vw, 158px);
}

@media (max-width: 900px) {
  .badge--inline {
    position: static;
    transform: none;
    margin-top: 14px;
  }
}

/* --- Contact page -------------------------------------------------------- */

.contact-hero {
  text-align: center;
  padding-block: clamp(40px, 4.6vw, 88px) 0;
}

.contact-hero .display {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--display-dark);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  margin-bottom: clamp(14px, 1.6vw, 30px);
}

.contact-hero .lede {
  font-family: var(--font-body);
  color: #886961;
  font-size: clamp(21px, 1.65vw, 32px);
  line-height: 1.25;
  letter-spacing: -1px;
  font-weight: 600;
  max-width: 70ch;
  /* wide enough that br-wide controls the break */
  margin-inline: auto;
}

section[aria-label="Contact form"],
section[aria-label="Join the community"] {
  padding-top: max(0px, calc(var(--section-y) - 30px));
}

.contact-form {
  max-width: 1180px;
  padding-inline: clamp(0px, 4.5vw, 70px);
  margin: 0 auto;
  display: grid;
  gap: clamp(9px, 0.85vw, 15px);
}

.field-group>legend,
.field-group__label {
  font-size: clamp(0.85rem, 0.95vw, 1rem);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 .15rem;
  padding: 0;
}

.field-group {
  border: 0;
  padding: 0;
  margin: 0;
}

.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.1vw, 18px);
}

@media (max-width: 620px) {
  .contact-form .form-row {
    grid-template-columns: 1fr;
  }
}

.contact-form .field label {
  font-size: clamp(.72rem, 0.8vw, .82rem);
  font-weight: 400;
  color: var(--ink);
}

.contact-form .field label .req,
.contact-form .field-group__label .req,
.contact-form .req {
  color: var(--ink, #3d2f2c);
  font-size: .82em;
}

.contact-form .field input,
.contact-form .field textarea {
  background: transparent;
  border: 1.5px solid rgba(61, 47, 44, .55);
  border-radius: 999px;
  padding: .35em 1em;
  min-height: 38px;
  font-size: clamp(.88rem, 0.95vw, 1.05rem);
  color: var(--ink);
}

.contact-form .field textarea {
  border-radius: 20px;
  padding: .48em 1em;
  min-height: clamp(42px, 3.8vw, 62px);
  resize: vertical;
}

.contact-form .field input:focus,
.contact-form .field textarea:focus {
  border-color: var(--ink);
  background: rgba(255, 255, 255, .16);
}

.contact-form .field {
  gap: .15rem;
}

.contact-form .field__error:empty {
  display: none;
}

.contact-form .btn--cta {
  justify-self: start;
  padding-inline: 2.2em;
  padding-block: .65em;
  margin-top: .4rem;
}

.modal .contact-form {
  padding-inline: 0 !important;
  max-width: 100% !important;
  margin-top: 1rem !important;
}

.modal .contact-form .field-group>legend,
.modal .contact-form .field-group__label {
  font-size: clamp(0.85rem, 0.95vw, 1rem) !important;
  margin-bottom: .15rem !important;
}

.modal .contact-form .field label {
  font-size: clamp(.72rem, 0.8vw, .82rem) !important;
}

/* --- FAQ page ------------------------------------------------------------ */

.faq-heading {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--display-dark);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  margin-bottom: clamp(20px, 2.4vw, 36px);
}

.faq-list {
  display: grid;
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0;
  max-width: 1240px;
}

.faq-item {
  margin: 0;
}

.faq-item__q {
  font-family: var(--font-body);
  font-size: clamp(20px, 1.55vw, 24px);
  font-weight: 600;
  color: var(--display-dark);
  line-height: 1.25;
  letter-spacing: -1px;
  margin: 0 0 4px;
}

.faq-item__a {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: -1px;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  max-width: 100%;
}

.faq-item__a b {
  font-weight: 600;
  color: var(--display-dark);
}

.faq-item__a ul {
  list-style: none;
  margin: 3px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.faq-item__a li {
  position: relative;
  padding-left: 1.35em;
  max-width: 100%;
  font-size: var(--fs-body);
  line-height: 1.45;
  letter-spacing: -1px;
}

.faq-item__a li::before {
  content: "";
  position: absolute;
  left: .35em;
  top: .58em;
  width: .28em;
  height: .28em;
  border-radius: 50%;
  background: currentColor;
}

.ask-section {
  text-align: center;
}

.ask-section .display {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--display-dark);
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  margin-bottom: clamp(24px, 3vw, 56px);
}

.ask-section .lede {
  font-family: var(--font-body);
  color: #886961;
  font-size: clamp(20px, 1.55vw, 24px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -1px;
  max-width: 42ch;
  margin-inline: auto;
}

.ask-section .btn-row {
  margin-top: clamp(24px, 3vw, 56px);
}

.ask-section .btn--cta {
  padding-inline: 3.6em;
}

/* --- Get Started page ---------------------------------------------------- */

.start-hero {
  text-align: center;
  padding-block: clamp(40px, 4.6vw, 88px) 0;
}

.start-hero .display {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--display-dark);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  margin-bottom: clamp(14px, 1.6vw, 30px);
}

.start-hero .lede {
  font-family: var(--font-body);
  color: #886961;
  font-size: clamp(21px, 1.65vw, 32px);
  line-height: 1.25;
  letter-spacing: -1px;
  font-weight: 600;
  max-width: 70ch;
  margin-inline: auto;
}

.steps {
  list-style: none;
  margin: clamp(26px, 3vw, 56px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(18px, 2vw, 36px);
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: clamp(125px, calc(10vw + 30px), 215px) minmax(0, 1fr) auto;
  gap: clamp(16px, 2.2vw, 42px);
  align-items: center;
}

@media (max-width: 820px) {
  .step {
    grid-template-columns: clamp(110px, calc(16vw + 30px), 165px) minmax(0, 1fr);
  }

  .step__action {
    grid-column: 2;
    justify-self: start;
  }
}

/* The numeral sits on a soft disc, as on the live page */
.step__num {
  counter-increment: step;
  margin: 0;
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--display);
  font-size: clamp(2.9rem, calc(var(--canvas) * 0.0540), 6.7rem);
  line-height: 1;
}

.step__num::before {
  content: "";
  position: absolute;
  inset: 8% 22% 8% 0;
  border-radius: 50%;
  background: rgba(150, 135, 148, .55);
}

.step__num span {
  position: relative;
}

.step__num span::after {
  content: ".";
}

.step__num--img,
.step__num:has(img) {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}

.step__num--img::before,
.step__num:has(img)::before {
  display: none !important;
}

.step__num--img img,
.step__num img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: scale(1.12);
  transform-origin: center;
}

.step__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--fs-h3) + 10px);
  line-height: 1.15;
  letter-spacing: var(--track-display);
  color: var(--display-dark);
  margin: 0 0 .5rem;
}

.step__copy {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: -1px;
  font-weight: 400;
  color: var(--card-copy);
  margin: 0;
  max-width: 68ch;
}

.step__action .btn--cta {
  padding-inline: 2.4em;
  white-space: nowrap;
}

/* --- Taking Your Scan page ----------------------------------------------- */

.scan-hero {
  text-align: center;
  padding-block: clamp(40px, 4.6vw, 88px) 0;
}

.scan-hero .display {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--display-dark);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  margin-bottom: clamp(12px, 1.4vw, 26px);
}

.scan-hero .lede {
  font-family: var(--font-body);
  color: #886961;
  font-size: clamp(21px, 1.65vw, 32px);
  line-height: 1.25;
  letter-spacing: -1px;
  font-weight: 600;
  max-width: 70ch;
  margin-inline: auto;
}

.scan-video {
  width: min(100%, 700px);
  margin: clamp(48px, 5.5vw, 84px) auto 0;
  aspect-ratio: 16 / 9;
  display: block;
  background: var(--bg-deep);
  border: 0;
}

.scan-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 34%);
  gap: clamp(24px, 3.2vw, 60px);
  align-items: center;
  padding-block: clamp(28px, 3.2vw, 58px);
}

@media (max-width: 900px) {
  .scan-step {
    grid-template-columns: 1fr;
  }

  .scan-step img {
    justify-self: center;
    max-width: 300px;
  }
}

.scan-step--wide {
  grid-template-columns: minmax(0, 1fr) minmax(200px, 42%);
}

@media (max-width: 900px) {
  .scan-step--wide {
    grid-template-columns: 1fr;
  }
}

.scan-step .display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--display);
  margin-bottom: clamp(8px, 1vw, 16px);
}

.scan-step__intro {
  font-family: var(--font-body);
  font-size: clamp(20px, 1.55vw, 24px);
  line-height: 1.25;
  letter-spacing: -1px;
  font-weight: 600;
  color: var(--ink);
  max-width: 54ch;
  margin: 0 0 clamp(16px, 1.8vw, 32px);
}

.scan-step .tick-list li {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: -1px;
  font-weight: 400;
  color: var(--card-copy);
  max-width: 52ch;
}

/* --- Legal pages (Terms, Privacy) ---------------------------------------- */

.legal-hero {
  padding-block: clamp(40px, 4.6vw, 88px) 0;
}

.legal-hero .display {
  color: var(--display-dark);
  margin-bottom: clamp(10px, 1.2vw, 22px);
}

.legal-updated {
  color: var(--card-copy);
  margin: 0;
}

.legal {
  max-width: 92ch;
  padding-block: clamp(28px, 3.2vw, 56px) clamp(46px, 5vw, 96px);
}

.legal__intro {
  color: var(--ink);
  margin: 0 0 clamp(24px, 2.8vw, 48px);
}

.legal h2 {
  font-family: var(--font-display);
  color: var(--display-dark);
  margin: clamp(28px, 3vw, 52px) 0 clamp(10px, 1.1vw, 18px);
}

.legal h2:first-of-type {
  margin-top: 0;
}

.legal p {
  color: var(--card-copy);
  margin: 0 0 .9em;
  max-width: none;
}

.legal ul {
  list-style: none;
  margin: 0 0 .9em;
  padding: 0;
  display: grid;
  gap: .55em;
}

.legal li {
  position: relative;
  padding-left: 1.35em;
  color: var(--card-copy);
}

.legal li::before {
  content: "";
  position: absolute;
  left: .35em;
  top: .62em;
  width: .28em;
  height: .28em;
  border-radius: 50%;
  background: currentColor;
}

.legal strong {
  color: var(--body);
  font-weight: 600;
}

.legal a {
  color: var(--display-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .16em;
}


/* --- Private, Precise, Protected ----------------------------------------
   Proportions measured from yourformwebprivatenew.png (6667x3667):
     avatar   left 9.33% of content width, width 21.24%, aspect 0.599
     text col left 38.64%, width 42.58%, starts 3.1% lower than the avatar
     gap between the two columns: 8.07%
------------------------------------------------------------------------- */

/* Heading + subhead sized to the artwork too: subhead glyph band is
   0.0174 of content width, lines 0.0199 apart -> ~0.0235 W font. */
#privacy-heading {
  margin-bottom: .1em;
}

#privacy-heading+.lede {
  max-width: 82ch;
}

.privacy-split {
  display: grid;
  grid-template-columns: 23.43% 46.96%;
  /* 21.24% / 42.58% of the full width */
  column-gap: 8.90%;
  /* 8.07% of the full width */
  padding-left: 9.33%;
  align-items: start;
  margin-top: 5.2%;
}

.privacy-split__avatar {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top center;
}

/* The lists start a little below the top of the avatar, as in the artwork */
.privacy-split__text {
  padding-top: 7.2%;
}

.privacy-split .card-title {
  /* 0.0310 of content width */
  margin-bottom: .62em;
}

.privacy-split .stack {
  gap: 5.2%;
}

.privacy-split .tick-list {
  margin-top: 0;
  gap: 4.6%;
}

.privacy-split .tick-list li {
  /* 0.0235 of content width */
  max-width: none;
  padding-left: 1.55em;
}

.privacy-split .tick-list li::before {
  left: .5em;
}

@media (max-width: 860px) {
  .privacy-split {
    grid-template-columns: 1fr;
    padding-left: 0;
    row-gap: clamp(20px, 4svh, 40px);
    justify-items: center;
  }

  .privacy-split__avatar {
    max-width: 320px;
  }

  .privacy-split__text {
    padding-top: 0;
  }
}


/* --- Custom Patterns Made for You ---------------------------------------
   Measured from the reference crop: text column 17.1% of the content
   width, artwork 70.3%, gap 3.3% — i.e. roughly a 3 / 9 split.
   The three blocks and the artwork are sized so the whole row clears the
   viewport on its own, with the title and subhead scrolling above it.
------------------------------------------------------------------------- */

.split--patterns {
  grid-template-columns: 17.1% 70.3%;
  column-gap: 3.3%;
  align-items: start;
}

.split--patterns .stack {
  gap: clamp(14px, 2.6svh, 32px);
}

.split--patterns .card-title {
  margin-bottom: .4em;
}

.split--patterns .card-copy,
.split--patterns .tick-list li {
  max-width: none;
}

.split--patterns .tick-list {
  margin-top: .3rem;
  gap: clamp(.5rem, 1.2svh, 1rem);
}

.split--patterns .pattern-blocks {
  justify-self: stretch;
}

.split--patterns .pattern-blocks img {
  width: 100%;
  height: auto;
  max-height: min(66svh, calc(var(--canvas) * 0.48));
  object-fit: contain;
  object-position: center;
  margin: 0;
}

@media (max-width: 860px) {
  .split--patterns {
    grid-template-columns: 1fr;
    row-gap: clamp(18px, 3svh, 34px);
  }

  .split--patterns .pattern-blocks img {
    max-height: 40svh;
  }
}


/* Fixed 70px gap under the Find Your Perfect Fit subhead */
#fit-heading~.trio--figures {
  margin-top: max(28px, calc(29 * var(--pt)));
}


/* From Phone to Form styles are centralized in the layout section below */


/* --- Custom Patterns: bigger artwork and copy, 100px under the subhead --- */

#patterns-heading~.split--patterns {
  margin-top: max(34px, calc(42 * var(--pt)));
}

.split--patterns .pattern-blocks img {
  max-height: min(78svh, calc(var(--canvas) * 0.60));
}

@media (max-width: 860px) {
  #patterns-heading~.split--patterns {
    margin-top: clamp(34px, 6svh, 70px);
  }

  .split--patterns .pattern-blocks img {
    max-height: 46svh;
  }
}


/* Tighter tracking on the three pattern cards, and the artwork centred
   against the full height of the text column rather than sitting at the top. */
.split--patterns {
  align-items: stretch;
}

.split--patterns .pattern-blocks {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Trade a little artwork width back to the copy column */
.split--patterns {
  grid-template-columns: 22% 65.4%;
  column-gap: 3.3%;
}

.split--patterns .pattern-blocks img {
  max-height: min(72svh, calc(var(--canvas) * 0.55));
}

@media (max-width: 860px) {
  .split--patterns {
    grid-template-columns: 1fr;
  }
}


/* --- Privacy: larger artwork and copy, tighter gap under the subhead ----- */

.privacy-split {
  margin-top: max(22px, calc(21 * var(--pt)));
}

/* Artwork takes more of the row; the lists keep the remainder */
.privacy-split {
  grid-template-columns: 30% 46.96%;
  column-gap: 6.5%;
  padding-left: 6%;
}


@media (max-width: 860px) {
  .privacy-split {
    grid-template-columns: 1fr;
    padding-left: 0;
    margin-top: clamp(22px, 4svh, 44px);
  }
}


/* --- Who We Are ---------------------------------------------------------- */

/* The photo was cropped by a fixed 4:5 box on tall screens — let it keep
   its own proportions and grow with the row instead. */
.founder-photo {
  aspect-ratio: auto;
  object-fit: contain;
  object-position: top center;
  max-height: none;
  height: auto;
}

/* Breathing room above "About the Founder" */
.split--founder>div>.card-title {
  margin-top: clamp(10px, 2.4svh, 34px);
}

/* The rule above this block was carrying the gap from the section before it */
.founder-rule {
  margin-top: 0;
}

#who-heading+.lede {
  margin-bottom: clamp(10px, 1.8svh, 24px);
}


/* Bigger photo, and the copy centred against it so the space above
   "About the Founder" is balanced rather than all pushed to the top. */
.split--founder {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
}

.split--founder>div>.card-title {
  margin-top: 0;
}

@media (max-width: 860px) {
  .split--founder {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}


/* --- Who We Are: matched to the reference (1920 crop) --------------------
   content 99 -> 1808 (1709 wide)
     photo   left  3.3% of content, width 28.6%, aspect 0.879
     text    left 33.3% (a 4/8 grid), width 61.6%
   Type is fixed so it reads the same on every device.
------------------------------------------------------------------------- */

.split--founder {
  grid-template-columns: 4fr 8fr;
  /* 33.3% / 66.7% */
  column-gap: 0;
  align-items: center;
  margin-top: 2.6%;
}

.founder-photo {
  width: 85.8%;
  /* 28.6% of the full row */
  max-width: none;
  height: auto;
  aspect-ratio: 0.879;
  object-fit: cover;
  object-position: center;
  border-radius: 30px;
  justify-self: start;
  margin-left: 3.3%;
}

#who-heading+.lede {
  /* ~30px, as in the reference */
  max-width: none;
  /* the forced break sets the line, not a cap */
  margin-bottom: 0;
}

.split--founder .card-title {
  margin: 0 0 .35em;
}

.split--founder>div {
  max-width: 92.4%;
}

/* text ends at 94.9% of the row */
.split--founder .founder-copy {
  max-width: none;
  color: #886961 !important;
}

.split--founder .founder-copy+.founder-copy {
  margin-top: 1.1rem !important;
}

/* Close the gap to the section above */
#who-heading {
  margin-top: 0;
}

#who-heading~.founder-rule {
  margin: 2.4% 0 0;
}

@media (max-width: 860px) {
  .split--founder {
    grid-template-columns: 1fr;
    align-items: stretch;
    row-gap: 22px;
  }

  .founder-photo {
    width: 100%;
    margin-left: 0;
    max-width: 420px;
    justify-self: center;
  }
}


/* Founder copy sits flush with the bottom of the photo */
.split--founder {
  align-items: end;
}

@media (max-width: 860px) {
  .split--founder {
    align-items: stretch;
  }
}


/* --- Customer Guarantee: matched to the reference ------------------------
   heading 46px, copy 30px running to 95.6% of the content width (three
   lines), rule 23px above the heading. Fixed sizes, like the section above.
------------------------------------------------------------------------- */

#guarantee-heading {
  color: var(--display-dark);
  /* same near-black as "Want to Learn More?" */
  margin: 0 0 .55rem;
}

.guarantee-copy {
  color: var(--card-copy);
  max-width: 95.6%;
  margin: 0;
}

@media (max-width: 860px) {
  .guarantee-copy {
    max-width: none;
  }
}


/* --- Want to Learn More: matched to the reference ------------------------
   heading 78px, copy 30px regular (not bold), 37px under the heading and
   78px above the buttons.
------------------------------------------------------------------------- */

.cta-section .display {
  margin-bottom: 37px;
}

.cta-section .lede {
  max-width: 62ch;
}

.cta-section .btn-row {
  margin-top: 28px;
}

@media (max-width: 860px) {
  .cta-section .display {
    margin-bottom: clamp(16px, 3svh, 30px);
  }

  .cta-section .btn-row {
    margin-top: clamp(20px, 3vw, 28px);
  }
}


/* Card copy under the scan figures wraps on the same measure in all three
   columns, so the line counts match the live site rather than following
   each column's differing width. */
#scan-heading~.trio--figures .card-copy,
#fit-heading~.trio--figures .card-copy {
  max-width: none;
  text-wrap-style: pretty;
}


/* Stacked layout: the cards are full width, so the figure is no longer
   limited to a third of the row. */
@media (max-width: 900px) {

  #scan-heading~.trio--figures .step-figure,
  #fit-heading~.trio--figures .form-figure {
    height: min(44svh, 360px);
  }
}


/* --- Fashion Industry Impact: matched to the reference -------------------
   Measured from the screenshot (content width 1725px), as fractions:
     left column   0.4881      divider at 0.4858
     right copy    left 0.5223, width 0.2707
     form artwork  left 0.7878, width 0.1751, height 0.3687 (aspect 0.473)
     label box     0.1629 wide, 0.0759 tall
     value box     0.1629 wide, 0.1241 tall
   Type sizes are the same fractions, so the block holds its proportions.
------------------------------------------------------------------------- */

.impact-grid {
  grid-template-columns: 48.81% 44.06%;
  column-gap: 3.42%;
}

.stat-grid {
  gap: 1.85%;
  margin-top: 2.4%;
}

.stat-label {
  padding: 1.9% 1.2%;
}

.stat-value {
  padding: 1.6% 1.2%;
}

.impact-note {
  padding: 1.6% 2%;
  margin-top: 1.85%;
}

/* Right column: copy 61.4% of it, artwork 39.7% */
.impact-right {
  grid-template-columns: 61.4% 39.7%;
  column-gap: 0;
  border-left: 2px solid rgba(61, 47, 44, .38);
  padding-left: 0;
}

.sustain-copy {
  padding-left: 0;
}

.impact-right>div {
  padding-left: 7%;
}

.sustain__form {
  width: 100%;
  max-height: none;
  aspect-ratio: 0.473;
  object-fit: contain;
  object-position: top center;
}

/* The rule under the section, which the reference has and this was missing */
#impact-heading~.rule {
  display: block;
  border-top: 2px solid rgba(61, 47, 44, .38);
  margin-top: 2.8%;
}


/* Box proportions straight from the reference: label 0.1629 x 0.0759 and
   value 0.1629 x 0.1241 of the content width, i.e. these aspect ratios.
   That pins their height without guessing at padding. */
.stat-label {
  aspect-ratio: auto;
  padding: .4em .6em;
}

.stat-value {
  aspect-ratio: auto;
  padding: .4em .6em;
}

.impact-note {
  aspect-ratio: auto;
  padding: .3em 1em;
}

@media (max-width: 900px) {

  .stat-label,
  .stat-value,
  .impact-note {
    aspect-ratio: auto;
    padding: 1em .8em;
  }
}


/* "Sustainable by Design" runs slightly wider than the copy column and sits
   on one line in the reference, overlapping into the artwork's gutter. */
.impact-right .display--sm {
  white-space: nowrap;
  width: max-content;
  max-width: none;
}

@media (max-width: 900px) {
  .impact-right .display--sm {
    white-space: normal;
    width: auto;
  }
}


/* ==========================================================================
   TYPE SYSTEM
   Every text role on the site is defined here and nowhere else.

   Source: the InDesign exports in the client's Drive folder. The artboard
   is 800pt wide and the live site renders it full-bleed, so 1pt of the
   artboard = 100vw / 800. That unit is capped at a 2000px viewport (the
   Squarespace max page width) and each role has a readable floor for
   phones, so the hierarchy holds at every size.

     Role        InDesign spec                    Used for
     --fs-h1     Voyage Bold 49pt                 page + section headings
     --fs-h2     Voyage Bold 36pt                 CTA / inner-page openers
     --fs-h3     Voyage Bold 20pt                 card + block titles
     --fs-label  PingFang Semibold 16pt           impact stat labels
     --fs-sub    PingFang Semibold 15pt / 16pt    subheads, lead copy
     --fs-lead   PingFang Semibold 14pt / 16pt    impact + guarantee copy
     --fs-body   PingFang Regular 12pt / 13pt     body copy
   ========================================================================== */

:root {
  --pt: min(0.125vw, 2.5px);

  --fs-h1: max(2.5rem, calc(49 * var(--pt)));
  --fs-h2: max(2rem, calc(36 * var(--pt)));
  --fs-h3: max(1.3rem, calc(20 * var(--pt)));
  --fs-label: max(1.05rem, calc(16 * var(--pt)));
  --fs-sub: max(1.0625rem, calc(15 * var(--pt)));
  --fs-lead: max(1rem, calc(14 * var(--pt)));
  --fs-body: max(.9375rem, calc(12 * var(--pt)));

  /* Leading straight from the artboard: 16/15, 16/14, 13/12 */
  --lh-display: 1;
  --lh-sub: 1.18;
  --lh-lead: 1.2;
  --lh-body: 1.22;

  --track-display: -0.005em;
  --track-sans: -0.02em;

  /* Spacing between text elements, also in artboard points */
  --gap-title: calc(7 * var(--pt));
  /* title -> its copy            */
  --gap-block: calc(15 * var(--pt));
  /* copy -> next titled block     */
  --gap-group: calc(30 * var(--pt));
  /* between titled groups         */
  --gap-item: calc(8 * var(--pt));
  /* between list items (body)     */
  --gap-item-l: calc(12 * var(--pt));
  /* between list items (sub size) */
}

/* ---- Headings --------------------------------------------------------- */

.display,
.hero .display,
#scan-heading,
#fit-heading,
#patterns-heading,
#privacy-heading,
#who-heading,
.forms-hero .display,
.product-block .display {
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  margin: 0 0 calc(4 * var(--pt));
}

.cta-section .display,
.request-section .display,
.ask-section .display,
.contact-hero .display,
.start-hero .display,
.scan-hero .display,
.legal-hero .display {
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}

.card-title,
.privacy-split .card-title,
.split--patterns .card-title,
.split--founder .card-title,
.display--sm,
.impact-grid .display--sm,
#impact-heading,
#guarantee-heading,
.product-cols h3,
.step__title,
.legal h2 {
  font-size: var(--fs-h3);
  line-height: 1.05;
  letter-spacing: var(--track-display);
  margin-bottom: var(--gap-title);
}

/* ---- Subheads & lead copy (15pt semibold) ------------------------------ */

.lede,
.lede--hero,
#privacy-heading+.lede,
#who-heading+.lede,
.cta-section .lede,
.request-section .lede,
.ask-section .lede,
.contact-hero .lede,
.start-hero .lede,
.scan-hero .lede,
.forms-hero .lede,
.product-block__intro,
.scan-step__intro,
.legal__intro,
.faq-item__q,
.explore-cue,
.split--founder .founder-copy {
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  letter-spacing: var(--track-sans);
  font-weight: 600;
}

/* Privacy bullets are set at subhead size, regular, with a semibold lead-in */
.privacy-split .tick-list li {
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  letter-spacing: var(--track-sans);
  font-weight: 400;
}

.stat-label {
  font-size: var(--fs-label);
  line-height: 1.15;
  letter-spacing: var(--track-sans);
  font-weight: 600;
}

.impact-note,
.sustain-copy,
.guarantee-copy {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--track-sans);
  font-weight: 600;
}

/* ---- Body (12pt regular) ---------------------------------------------- */

.card-copy,
.tick-list li,
.split--patterns .card-copy,
.split--patterns .tick-list li,
#scan-heading~.trio--figures .card-copy,
#fit-heading~.trio--figures .card-copy,
.product-cols .tick-list li,
.scan-step .tick-list li,
.faq-item__a,
.legal p,
.legal li,
.legal-updated,
.step__copy {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-sans);
  font-weight: 400;
}

.stat-value {
  font-size: var(--fs-body);
  line-height: 1.167;
  letter-spacing: var(--track-sans);
  font-weight: 600;
}

/* ---- Spacing between text elements ----------------------------------- */

.split--patterns .stack {
  gap: var(--gap-block);
}

.privacy-split .stack {
  gap: var(--gap-group);
}

.privacy-split .tick-list {
  gap: var(--gap-item-l);
  margin-top: 0;
}

.split--patterns .tick-list,
.product-cols .tick-list,
.scan-step .tick-list {
  gap: var(--gap-item);
  margin-top: 0;
}

.split--founder .founder-copy+.founder-copy {
  margin-top: calc(16 * var(--pt)) !important;
}

.card-copy {
  max-width: none;
}

/* Designed line breaks are set in the markup; this keeps a stray word from
   being orphaned if a browser's metrics differ slightly. */
.card-copy,
.tick-list li,
.lede {
  text-wrap-style: pretty;
}


/* =========================================================================
   CENTRING — equal left and right margins in every section
   -------------------------------------------------------------------------
   Every section sits in the same .wrap (4vw gutter each side). Inside it,
   rows of content are laid out so their outermost ink touches both gutters
   (card rows) or sits centred as a group (privacy), so no row leaves a
   larger empty band on the right than on the left.
   ========================================================================= */

/* Card rows: each card is exactly as wide as its longest line; the first
   card starts on the left gutter, the last ends on the right gutter, and
   the middle one sits between them. Lines are fixed with forced breaks,
   so the line count is the same at every desktop width. */
@media (min-width: 1200px) {

  .trio--figures,
  #scan-heading~.trio--figures,
  #fit-heading~.trio--figures {
    grid-template-columns: repeat(3, max-content);
    justify-content: space-between;
    column-gap: calc(16 * var(--pt));
  }

  .trio--figures .card-title,
  .trio--figures .card-copy {
    white-space: nowrap;
  }

  .trio--figures .step-figure,
  .trio--figures .form-figure {
    align-self: center;
  }
}

/* Below that the row is too narrow for the fixed lines: let text wrap
   naturally inside equal columns instead of forcing a break mid-line. */
@media (max-width: 1199px) {

  .trio--figures br.br-wide,
  .privacy-split br.br-wide,
  .split--patterns br.br-wide {
    display: none;
  }
}

/* Custom Patterns: copy column sized to its longest line, artwork fills the
   rest and is pinned to the right gutter. */
@media (min-width: 1200px) {
  .split--patterns {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: calc(24 * var(--pt));
  }

  .split--patterns .card-copy,
  .split--patterns .tick-list li {
    white-space: nowrap;
  }

  .split--patterns .pattern-blocks {
    justify-content: flex-end;
  }

  .split--patterns .pattern-blocks img {
    object-position: right center;
  }
}

/* Privacy: avatar and lists form one group, centred in the row. */
@media (min-width: 1200px) {
  .privacy-split {
    /* Avatar PNG carries ~22% transparent padding each side; 300pt gives
       the ~170pt visible figure of the 2026 artwork. */
    grid-template-columns: calc(300 * var(--pt)) max-content;
    column-gap: 0;
    justify-content: center;
    padding-left: 0;
  }

  .privacy-split .tick-list li {
    white-space: nowrap;
  }
}

/* Fashion Industry Impact: the two columns fill the row edge to edge
   (same 48.81 : 44.06 proportion as the reference, scaled to 100%), and the
   stat boxes keep equal thirds however long their labels are. */
@media (min-width: 901px) {
  .impact-grid {
    grid-template-columns: minmax(0, 50.69fr) minmax(0, 45.76fr);
    column-gap: 3.55%;
  }

  .stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stat-label {
    padding: .2em .15em;
  }

  .stat-value {
    padding: .3em .35em;
  }
}

@media (min-width: 1200px) {

  .guarantee-copy {
    max-width: none;
  }

  .impact-right {
    grid-template-columns: 60.7% 39.3%;
  }

  .stat-grid {
    gap: 1.2%;
  }

  /* Inter runs ~8% wider than the PingFang in the artwork; a touch more
     tracking keeps the reference line breaks inside the boxes. */
  .stat-value {
    padding: .2em .1em;
    letter-spacing: -0.035em;
  }
}

@media (max-width: 1199px) {

  .impact-grid br.br-wide,
  .guarantee br.br-wide {
    display: none;
  }
}

/* Who We Are: laid out in proportions of the row (photo on the title's
   left edge, 35.3% wide, 2.6% gutter, copy beside
   it, title level with the top of the photo). Because every value is a
   share of the row, the alignment is identical on every desktop screen. */
@media (min-width: 1200px) {
  .split--founder {
    /* photo starts on the same left edge as the section title */
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    /* 3 / 9 of a 12-column row */
    column-gap: 2.6%;
    padding-left: 0;
    justify-content: start;
    align-items: end;
    /* text sits on the bottom of the photo */
  }

  .split--founder>div {
    max-width: none;
  }

  .split--founder .founder-photo {
    width: 100%;
    margin-left: 0;
    justify-self: stretch;
    aspect-ratio: 260 / 318;
    height: auto;
  }

  .split--founder .founder-copy {
    white-space: normal;
    max-width: none;
  }

  .split--founder>div>.card-title {
    margin-top: 0;
  }
}

.split--founder .founder-copy+.founder-copy {
  margin-top: var(--gap-block) !important;
}

@media (max-width: 1199px) {
  .split--founder br.br-wide {
    display: none;
  }
}

@media (max-width: 1199px) {
  .impact-right .display--sm {
    white-space: normal;
    width: auto;
  }
}


/* =========================================================================
   LARGE SCREENS
   -------------------------------------------------------------------------
   The page stays full width with the same 4vw padding left and right on
   every screen. Only the type stops growing past a 1500px screen.
   ========================================================================= */
:root {
  --pt: min(0.125vw, 1.875px);
}

/* 1500 / 800 = 1.875px per pt */

/* The note wraps inside its box on every screen instead of running past the
   border; the box grows in height when the text needs another line. */
.impact-note {
  white-space: normal;
  aspect-ratio: auto;
  min-height: calc(var(--canvas) * 0.035);
  padding: .7em 1.2em;
  text-wrap-style: balance;
}

.sustain-copy {
  white-space: normal;
}

.impact-right .sustain__form {
  object-position: top right;
}

@media (min-width: 901px) {
  .impact-right {
    grid-template-columns: 63% 37%;
  }
}

/* ==========================================================================
   UNIFIED TYPOGRAPHY & CENTERING SYSTEM
   Client adjustments:
     - Hero heading: 90px on devices 1200px+
     - Hero paragraph: 25px on devices 1200px+
     - Whole body paragraph letter-spacing: -1px
     - Equal left & right margins; perfectly centered page layouts.
   ========================================================================== */

:root {
  --pt: min(0.125vw, 1.875px);

  /* Exact typographic scale: balanced title scale on large displays */
  --fs-h1: clamp(44px, 5.2vw, 104px);
  /* Reduced from 144px */
  --fs-h2: clamp(30px, 3.8vw, 76px);
  /* Reduced from 102px */
  --fs-h3: clamp(18px, 1.8vw, 34px);
  /* Reduced from 45px */
  --fs-sub: clamp(16px, 1.67vw, 25px);
  --fs-lead: clamp(20px, 2vw, 34px);
  --fs-body: clamp(15px, 1.4vw, 21px);
  --fs-label: clamp(14px, 1.33vw, 22px);

  /* Leading & Tracking */
  --lh-display: 1.05;
  --lh-sub: 1.28;
  --lh-lead: 1.32;
  --lh-body: 1.55;

  --track-display: -0.02em;
  --track-sans: -1px;
  /* whole body paragraph letter spacing -1px */

  /* Spacing between text elements */
  --gap-title: 10px;
  --gap-block: clamp(18px, 2vw, 30px);
  --gap-group: clamp(28px, 3vw, 44px);
  --gap-item: 12px;
  --gap-item-l: 16px;
}

@media (min-width: 1600px) {
  :root {
    --site-max-width: 1640px;
    --fs-h1: 86px;
    --fs-h2: 64px;
    --fs-h3: 30px;
    --fs-sub: 25px;
    --fs-lead: 30px;
    --fs-body: 21px;
    --fs-label: 20px;
  }

  .reel__track {
    height: 60vh;
    min-height: 480px;
  }

  #scan-heading~.trio--figures .step-figure {
    height: min(26vw, calc(100svh - 240px), 520px);
  }

  .trio--figures .form-figure {
    height: min(33vw, 65svh, 750px);
  }

  .split--patterns {
    grid-template-columns: minmax(320px, 460px) minmax(0, 1fr);
    column-gap: 80px;
  }

  .split--patterns .pattern-blocks img {
    max-height: min(72svh, 780px);
  }

  .privacy-split {
    grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
    max-width: 1140px;
  }

  .privacy-split__avatar {
    max-height: 640px;
  }

  .split--founder {
    grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  }
}

@media (min-width: 1920px) {
  :root {
    --site-max-width: 1800px;
    --fs-h1: 98px;
    --fs-h2: 72px;
    --fs-h3: 34px;
    --fs-sub: 26px;
    --fs-lead: 32px;
    --fs-body: 21px;
    --fs-label: 22px;
  }

  .reel__track {
    height: 64vh;
    min-height: 560px;
  }

  #scan-heading~.trio--figures .step-figure {
    height: min(27vw, calc(100svh - 260px), 620px);
  }

  .trio--figures .form-figure {
    height: min(34vw, 70svh, 860px);
  }

  .split--patterns {
    grid-template-columns: minmax(380px, 540px) minmax(0, 1fr);
    column-gap: 96px;
  }

  .split--patterns .pattern-blocks img {
    max-height: min(76svh, 900px);
  }

  .privacy-split {
    grid-template-columns: minmax(340px, 460px) minmax(0, 1fr);
    max-width: 1280px;
  }

  .privacy-split__avatar {
    max-height: 740px;
  }

  .split--founder {
    grid-template-columns: minmax(340px, 460px) minmax(0, 1fr);
  }
}

/* Global letter-spacing for all paragraph and body copy: -1px */
p,
.card-copy,
.tick-list li,
.lede,
.lede--hero,
.founder-copy,
.faq-item__a,
.faq-item__q,
.step__copy,
.tutorial__caption,
.legal p,
.legal li,
.product-block__intro,
.scan-step__intro {
  letter-spacing: -1px;
}

/* ---- Headings (scales fluidly up to 140px on 1920px+) ------------------- */

.display,
.hero .display,
#scan-heading,
#fit-heading,
#patterns-heading,
#privacy-heading,
#who-heading,
.product-block .display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--display);
  margin: 0 0 0.5rem;
}

@media (min-width: 1200px) {

  .hero .display,
  #scan-heading,
  #fit-heading,
  #patterns-heading,
  #privacy-heading,
  #who-heading,
  .forms-hero .display {
    font-size: var(--fs-h1);
  }
}

.cta-section .display,
.request-section .display,
.ask-section .display,
.contact-hero .display,
.start-hero .display,
.scan-hero .display,
.legal-hero .display {
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--display-dark);
}

.card-title,
.privacy-split .card-title,
.split--patterns .card-title,
.split--founder .card-title,
.display--sm,
.impact-grid .display--sm,
#impact-heading,
#guarantee-heading,
.product-cols h3,
.step__title,
.legal h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: var(--track-display);
  color: var(--display-dark);
  margin: 0 0 var(--gap-title);
}

/* ---- Hero Opener & Subheads (scales fluidly up on 1920px+) -------------- */

.hero.centered {
  text-align: center;
  padding-top: clamp(32px, 3vw, 42px);
  padding-bottom: clamp(36px, 4vw, 52px);
}

.hero.centered .display {
  color: var(--display-dark);
  margin-top: 0;
  margin-bottom: 16px;
}

.hero.centered .lede,
.lede--hero {
  color: #886961;
  max-width: 62ch;
  margin-inline: auto;
  font-size: var(--fs-lead);
  line-height: 1.30;
  letter-spacing: -1px;
  font-weight: 600;
}

@media (min-width: 1200px) {

  .hero.centered .lede,
  .lede--hero {
    font-size: var(--fs-lead);
  }
}

.lede,
.cta-section .lede,
.request-section .lede,
.ask-section .lede,
.contact-hero .lede,
.start-hero .lede,
.scan-hero .lede,
.scan-step__intro,
.legal__intro,
.faq-item__q {
  font-family: var(--font-body);
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  letter-spacing: -1px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 0;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

/* Privacy bullets */
.privacy-split .tick-list li {
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  letter-spacing: -1px;
  font-weight: 400;
}

.stat-label {
  font-size: var(--fs-label);
  line-height: 1.15;
  letter-spacing: -1px;
  font-weight: 600;
  color: var(--ink);
}

.impact-note,
.sustain-copy,
.guarantee-copy {
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  letter-spacing: -1px;
  font-weight: 600;
}

/* ---- Body Copy (12px-15px with -1px letter-spacing) -------------------- */

.card-copy,
.tick-list li,
.split--patterns .card-copy,
.split--patterns .tick-list li,
.product-cols .tick-list li,
.scan-step .tick-list li,
.faq-item__a,
.legal p,
.legal li,
.legal-updated,
.step__copy {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: -1px;
  font-weight: 400;
  color: var(--card-copy);
}

.stat-value {
  font-size: var(--fs-body);
  line-height: 1.2;
  letter-spacing: -1px;
  font-weight: 600;
  color: var(--display);
}

/* Spacing between text elements */
.split--patterns .stack {
  gap: var(--gap-block);
}

.privacy-split .stack {
  gap: var(--gap-group);
}

.privacy-split .tick-list {
  gap: var(--gap-item-l);
  margin-top: 0;
}

.split--patterns .tick-list,
.product-cols .tick-list,
.scan-step .tick-list {
  gap: var(--gap-item);
  margin-top: 0;
}

.card-copy {
  max-width: none;
}

.card-copy,
.tick-list li,
.lede {
  text-wrap-style: pretty;
}

/* =========================================================================
   CENTRED LAYOUTS — Strictly Equal Left and Right Margins
   ========================================================================= */

.wrap {
  width: min(var(--site-max-width), calc(100% - var(--site-gutter) * 2));
  margin-inline: auto;
}

/* =========================================================================
   Section Intro Containers: Title + Paragraph Wrapper with Section-Specific Widths
   ========================================================================= */

.section-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  max-width: 100%;
}

.section-intro .display {
  width: fit-content;
  max-width: 100%;
}

.section-intro .lede {
  width: 100%;
  max-width: 100%;
}

/* 1. Hero: Centered title and paragraph */
.section-intro--hero {
  align-items: center;
  text-align: center;
  margin-inline: auto;
  width: 100%;
}

@media (min-width: 1024px) {
  .section-intro--hero {
    width: 820px;
    max-width: 100%;
  }
}

/* 2. From Phone to Form: Static width across all devices */
.section-intro--scan {
  width: 720px;
  max-width: 100%;
}

/* 3. Find Your Perfect Fit: Static width across all devices */
.section-intro--fit {
  width: 720px;
  max-width: 100%;
}

/* 4. Custom Patterns Made for You: 100% width on mobile, 64vw on desktop */
.section-intro--patterns {
  width: 100% !important;
  max-width: 100% !important;
}

@media (min-width: 781px) {
  .section-intro--patterns {
    width: min(100%, 64vw) !important;
  }
}

/* 5. Private, Precise, Protected: Static width */
.section-intro--privacy {
  width: 800px;
  max-width: 100%;
}

/* 6. Who We Are: Increased width by 150px */
.section-intro--who {
  width: min(100%, calc(40vw + 150px));
}

@media (min-width: 1024px) {
  .section-intro--who {
    width: 725px;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .section-intro--who {
    width: 100%;
  }
}

/* 7. CTA / Want to Learn More?: Centered */
.section-intro--cta {
  align-items: center;
  text-align: center;
  margin-inline: auto;
  width: min(100%, clamp(650px, 52vw, 940px));
}

@media (min-width: 1024px) {
  .section-intro .display {
    white-space: nowrap !important;
  }
}

/* From Phone to Form & Find Your Perfect Fit: Symmetrical 3-Column Grid */
.trio--figures,
.section-intro~.trio--figures,
#scan-heading~.trio--figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(10px, 1.4vw, 20px);
  row-gap: 32px;
  align-items: start;
  width: 100%;
  margin-top: clamp(40px, calc(9vw - 60px), 80px);
}

.section-intro--fit~.trio--figures,
#fit-heading~.trio--figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(10px, 1.4vw, 20px);
  row-gap: 32px;
  align-items: start;
  width: 100%;
  margin-top: clamp(0px, calc(9vw - 110px), 30px);
}

.section-intro--scan~.trio--figures .step-figure,
#scan-heading~.trio--figures .step-figure {
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
  object-position: bottom center;
}

section[aria-labelledby="scan-heading"] {
  padding-top: clamp(48px, 6vw, 90px) !important;
  padding-bottom: clamp(60px, 8vw, 120px) !important;
}

@media (max-width: 780px) {
  section[aria-labelledby="scan-heading"] {
    padding-top: clamp(52px, 14vw, 80px) !important;
  }
}

section[aria-labelledby="fit-heading"] {
  padding-bottom: clamp(60px, 8vw, 120px);
}

/* All Section Intro Lede Paragraphs & Copy: Fluid font size, -1px letter-spacing, and 110% line-height */
.section-intro .lede,
.section-intro--patterns .lede,
.lede,
#scan-heading+.lede,
#fit-heading+.lede,
#patterns-heading+.lede,
#privacy-heading+.lede,
#who-heading+.lede,
#scan-heading~.trio--figures .card-copy,
#fit-heading~.trio--figures .card-copy,
section[aria-labelledby="scan-heading"] p,
section[aria-labelledby="scan-heading"] .lede,
section[aria-labelledby="scan-heading"] .card-copy,
section[aria-labelledby="fit-heading"] p,
section[aria-labelledby="fit-heading"] .lede,
section[aria-labelledby="fit-heading"] .card-copy,
section[aria-labelledby="patterns-heading"] p,
section[aria-labelledby="patterns-heading"] .lede,
section[aria-labelledby="patterns-heading"] .card-copy,
section[aria-labelledby="patterns-heading"] .tick-list li,
section[aria-labelledby="privacy-heading"] p,
section[aria-labelledby="privacy-heading"] .lede,
section[aria-labelledby="who-heading"] p,
section[aria-labelledby="who-heading"] .lede,
.split--patterns .card-copy,
.split--patterns .tick-list li,
.trio--figures .card-copy {
  font-size: clamp(17px, 1.35vw, 24px) !important;
  letter-spacing: -1px !important;
  line-height: 1.1 !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

@media (min-width: 1920px) {

  .section-intro .lede,
  .section-intro--patterns .lede,
  .lede,
  #scan-heading+.lede,
  #fit-heading+.lede,
  #patterns-heading+.lede,
  #privacy-heading+.lede,
  #who-heading+.lede,
  #scan-heading~.trio--figures .card-copy,
  #fit-heading~.trio--figures .card-copy,
  section[aria-labelledby="scan-heading"] p,
  section[aria-labelledby="scan-heading"] .lede,
  section[aria-labelledby="scan-heading"] .card-copy,
  section[aria-labelledby="fit-heading"] p,
  section[aria-labelledby="fit-heading"] .lede,
  section[aria-labelledby="fit-heading"] .card-copy,
  section[aria-labelledby="patterns-heading"] p,
  section[aria-labelledby="patterns-heading"] .lede,
  section[aria-labelledby="patterns-heading"] .card-copy,
  section[aria-labelledby="patterns-heading"] .tick-list li,
  section[aria-labelledby="privacy-heading"] p,
  section[aria-labelledby="privacy-heading"] .lede,
  section[aria-labelledby="who-heading"] p,
  section[aria-labelledby="who-heading"] .lede,
  .split--patterns .card-copy,
  .split--patterns .tick-list li,
  .trio--figures .card-copy {
    font-size: clamp(24px, 1.46vw, 28px) !important;
    line-height: 1.1 !important;
    letter-spacing: -1px !important;
  }
}

/* Enforce unbroken lines and intact words on desktop so lines never break in the middle */
@media (min-width: 1024px) {

  #scan-heading~.trio--figures .card-copy,
  #fit-heading~.trio--figures .card-copy,
  .trio--figures .card-copy {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .trio--figures br.br-wide {
    display: inline !important;
  }
}

@media (max-width: 1023px) {

  #scan-heading~.trio--figures .card-copy,
  #fit-heading~.trio--figures .card-copy,
  .trio--figures .card-copy {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
  }
}

.trio--figures>div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.trio--figures .step-figure {
  height: min(27.3vw, 52svh, 596px);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  align-self: center;
  object-fit: contain;
}

.trio--figures .form-figure {
  height: clamp(480px, 35vw, 690px);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  align-self: center;
  object-fit: contain;
}

@media (max-width: 780px) {

  .trio--figures,
  .section-intro~.trio--figures,
  #fit-heading~.trio--figures,
  #scan-heading~.trio--figures {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-top: clamp(48px, 6svh, 72px);
  }

  #scan-heading~.trio--figures .step-figure {
    height: min(38svh, 300px);
    width: 100%;
    max-width: 280px;
  }

  .trio--figures .step-figure {
    width: 100%;
    max-width: 320px;
  }

  .trio--figures .form-figure {
    width: 100%;
    max-width: 280px;
  }
}

/* Custom Patterns Made for You */
.split--patterns {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1.25fr);
  column-gap: clamp(32px, 4.5vw, 70px);
  row-gap: 32px;
  align-items: center;
  margin-top: clamp(28px, 3.5vw, 48px);
}

.split--patterns .card-title {
  font-size: clamp(26px, 2.2vw, 36px) !important;
  line-height: 1.15;
  margin-bottom: 0.65rem;
}

.split--patterns .pattern-blocks {
  display: flex;
  justify-content: flex-end;
}

.split--patterns .pattern-blocks img {
  width: 100%;
  height: auto;
  max-height: min(78svh, 840px);
  object-fit: contain;
  object-position: right center;
}

@media (max-width: 860px) {
  .split--patterns {
    grid-template-columns: 1fr;
  }

  .split--patterns .pattern-blocks {
    justify-content: center;
  }

  .split--patterns .pattern-blocks img {
    max-height: 40svh;
    margin-inline: auto;
  }
}

/* Private, Precise, and Protected: Left-aligned balanced columns */
.privacy-split {
  display: grid;
  grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
  column-gap: clamp(28px, 3.5vw, 60px);
  row-gap: 32px;
  align-items: center;
  justify-content: start;
  width: 100%;
  max-width: min(100%, 1280px);
  margin-inline: 0 auto;
  padding-left: 100px;
  margin-top: clamp(8px, calc(3.5vw - 20px), 36px);
}

.privacy-split__avatar {
  width: 100%;
  height: auto;
  max-height: clamp(550px, 38vw, 620px);
  object-fit: contain;
  object-position: center left;
  margin-left: 0;
  margin-right: auto;
}

.privacy-split__text {
  padding-top: 0;
}

@media (max-width: 780px) {
  .privacy-split {
    grid-template-columns: 1fr;
    justify-items: center;
    padding-left: 0;
  }

  .privacy-split__avatar {
    max-width: 310px;
  }
}

/* Who We Are */
.split--founder {
  display: grid;
  grid-template-columns: minmax(350px, 500px) minmax(0, 1fr);
  column-gap: clamp(16px, 2.5vw, 36px);
  row-gap: 28px;
  align-items: end;
  margin-top: clamp(24px, 3vw, 44px);
}

.split--founder .founder-photo {
  width: 100%;
  max-width: 470px;
  max-height: min(530px, 57vh);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  border-radius: 20px;
}

.founder-rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: clamp(20px, 2.5vw, 36px) 0;
}

@media (max-width: 780px) {
  .split--founder {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .split--founder .founder-photo {
    max-width: 360px;
    margin-inline: auto;
  }
}

/* Impact Section */
.impact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  margin-top: clamp(24px, 3vw, 44px);
  align-items: start;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.impact-right {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 20px;
  align-items: center;
}

.impact-right .sustain__form {
  object-position: top right;
  max-width: 100%;
  height: auto;
}

.impact-note {
  white-space: normal;
  padding: .7em 1.2em;
}

.sustain-copy {
  white-space: normal;
}

@media (max-width: 860px) {
  .impact-grid {
    grid-template-columns: 1fr;
  }

  .impact-right {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   LARGE SCREENS & 1920px+ OPTIMIZATION: Bigger Images & Proportional Layout
   ========================================================================= */

@media (min-width: 1600px) {
  :root {
    --site-max-width: 1680px;
  }

  /* Hero Reel */
  .reel__track {
    height: 62vh;
    min-height: 520px;
  }

  /* From Phone to Form Figures */
  #scan-heading~.trio--figures .step-figure {
    height: min(28vw, 560px);
  }

  /* Find Your Perfect Fit Dress Forms */
  .trio--figures .form-figure {
    height: min(34vw, 780px);
  }

  /* Custom Patterns */
  .split--patterns {
    grid-template-columns: minmax(320px, 440px) minmax(0, 1.35fr);
    column-gap: 80px;
  }

  .split--patterns .card-title {
    font-size: 38px !important;
  }

  .split--patterns .pattern-blocks img {
    max-height: min(82svh, 960px);
  }

  /* Private, Precise, Protected Avatar */
  .privacy-split {
    grid-template-columns: minmax(310px, 420px) minmax(0, 1fr);
    column-gap: clamp(40px, 4vw, 76px);
    max-width: 1360px;
    align-items: center;
  }

  .privacy-split__avatar {
    max-height: 640px;
  }

  /* Founder Photo */
  .split--founder {
    grid-template-columns: minmax(360px, 500px) minmax(0, 1fr);
  }

  /* Impact section figure */
  .impact-right .sustain__form {
    max-height: 680px;
  }
}

@media (min-width: 1920px) {
  :root {
    --site-max-width: 1840px;
  }

  /* Hero Reel */
  .reel__track {
    height: 66vh;
    min-height: 600px;
  }

  /* From Phone to Form Figures */
  #scan-heading~.trio--figures .step-figure {
    height: min(29vw, 650px);
  }

  /* Find Your Perfect Fit Dress Forms */
  .trio--figures .form-figure {
    height: min(36vw, 900px);
  }

  /* Custom Patterns */
  .split--patterns {
    grid-template-columns: minmax(360px, 480px) minmax(0, 1.45fr);
    column-gap: 96px;
  }

  .split--patterns .card-title {
    font-size: 42px !important;
  }

  .split--patterns .pattern-blocks img {
    max-height: min(86svh, 1100px);
  }

  /* Private, Precise, Protected Avatar */
  .privacy-split {
    grid-template-columns: minmax(340px, 460px) minmax(0, 1fr);
    column-gap: 88px;
    max-width: 1520px;
    align-items: center;
  }

  .privacy-split__avatar {
    max-height: 700px;
  }

  /* Founder Photo */
  .split--founder {
    grid-template-columns: minmax(380px, 520px) minmax(0, 1fr);
  }

  /* Impact section figure */
  .impact-right .sustain__form {
    max-height: 780px;
  }
}

/* About the Founder: Match paragraph text color to #886961, reduced weight, larger responsive size */
.split--founder .founder-copy,
.founder-copy,
.split--founder p.founder-copy {
  color: #886961 !important;
  font-weight: 400 !important;
  font-size: clamp(21px, 1.6vw, 28px) !important;
  line-height: 1.28 !important;
}

.split--founder .card-title {
  font-size: clamp(26px, 2.4vw, 44px) !important;
  margin-bottom: clamp(8px, 1vw, 16px) !important;
}

/* Impact & Customer Guarantee: One unified section with balanced padding */
section[aria-labelledby="impact-heading"] {
  padding-top: clamp(40px, 5vw, 80px) !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

@media (min-width: 1200px) {
  section[aria-labelledby="impact-heading"] {
    padding-top: 80px !important;
    padding-bottom: 0 !important;
  }
}

#impact-heading {
  margin-top: 0 !important;
  margin-bottom: clamp(10px, 1.2vw, 20px) !important;
  font-size: clamp(22px, 2.2vw, 42px) !important;
  line-height: 1.15 !important;
}

.impact-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
  gap: clamp(8px, 1vw, 16px) !important;
  margin-top: 0 !important;
  align-items: start !important;
}

.impact-grid>div {
  min-width: 0 !important;
  max-width: 100% !important;
}

.stat-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(7px, 0.65vw, 10px) !important;
  width: 100% !important;
  margin-bottom: clamp(7px, 0.65vw, 10px) !important;
}

/* Stat Labels: solid 3.5px dark brown border, 14px radius, #968794 fill matching screenshot */
.stat-label {
  border: 3.5px solid #3d2f2c !important;
  border-radius: 14px !important;
  background: #968794 !important;
  color: #3d2f2c !important;
  font-weight: 700 !important;
  font-size: clamp(16.5px, calc(1.4vw + 1.5px), 32px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.5px !important;
  text-align: center !important;
  padding: clamp(12px, 1.4vw, 22px) clamp(8px, 1vw, 16px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  box-sizing: border-box !important;
}

/* Stat Values: solid 3.5px dark brown border, 14px radius matching screenshot */
.stat-value {
  border: 3.5px solid #3d2f2c !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: #3d2f2c !important;
  font-weight: 600 !important;
  font-size: clamp(15px, calc(1.1vw + 2px), 25px) !important;
  line-height: 1.28 !important;
  letter-spacing: -1px !important;
  text-align: center !important;
  padding: clamp(14px, 1.6vw, 28px) clamp(8px, 1vw, 18px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  box-sizing: border-box !important;
}

/* Impact Note: strictly 2 lines, transparent background */
.impact-note {
  border: clamp(1.5px, 0.16vw, 2.5px) solid rgba(61, 47, 44, 0.4) !important;
  border-radius: clamp(8px, 0.9vw, 14px) !important;
  background: transparent !important;
  font-size: clamp(15.5px, 1.3vw, 26px) !important;
  line-height: 1.32 !important;
  letter-spacing: -0.5px !important;
  text-align: center !important;
  padding: clamp(10px, 1.1vw, 20px) clamp(12px, 1.5vw, 28px) !important;
  margin-top: clamp(8px, 0.9vw, 14px) !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  aspect-ratio: auto !important;
  white-space: normal !important;
}

/* Right Column: Sustainable by Design */
.impact-right {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important;
  column-gap: clamp(8px, 1vw, 16px) !important;
  border-left: 2px solid rgba(61, 47, 44, 0.38) !important;
  padding-left: clamp(4px, 0.6vw, 10px) !important;
  align-items: start !important;
  min-width: 0 !important;
}

.impact-right .display--sm {
  margin-top: 0 !important;
  margin-bottom: clamp(10px, 1.2vw, 20px) !important;
  font-size: clamp(22px, 2.2vw, 42px) !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  width: auto !important;
}

.sustain-copy {
  margin: 0 !important;
  font-size: clamp(16.5px, calc(1.3vw + 1px), 27px) !important;
  line-height: 1.28 !important;
}

.impact-right .sustain__form {
  max-height: clamp(290px, 34vw, 550px) !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  margin-inline: auto !important;
  align-self: center !important;
}

/* Horizontal Divider Rule between Impact and Guarantee */
section[aria-labelledby="impact-heading"] .rule,
#impact-heading~.rule {
  margin: clamp(12px, 1.5vw, 22px) 0 clamp(6px, 0.8vw, 12px) !important;
  border: 0 !important;
  border-top: 1.5px solid rgba(61, 47, 44, 0.35) !important;
}

/* Customer Guarantee (inside the same unified section) */
.guarantee {
  margin: 0 !important;
  padding: 0 !important;
}

#guarantee-heading {
  margin-top: 0 !important;
  margin-bottom: clamp(6px, 0.8vw, 14px) !important;
  font-size: clamp(28px, 2.8vw, 56px) !important;
  line-height: 1.15 !important;
}

.guarantee-copy {
  margin: 0 !important;
  font-size: clamp(17.5px, calc(1.3vw + 2px), 28px) !important;
  line-height: 1.22 !important;
  max-width: 96% !important;
}

@media (max-width: 860px) {
  .impact-grid {
    grid-template-columns: 1fr !important;
  }

  .impact-right {
    grid-template-columns: 1fr !important;
    border-left: 0 !important;
    padding-left: 0 !important;
    margin-top: 28px !important;
  }
}

@media (max-width: 560px) {
  .stat-grid {
    grid-template-columns: 1fr !important;
  }
}

/* CTA Section: 140px top padding, 170px bottom padding (+30px), +4px title font-size with 24px bottom space */
.cta-section {
  padding-top: clamp(60px, 9.5vw, 140px) !important;
  padding-bottom: clamp(90px, calc(9.5vw + 30px), 170px) !important;
}

@media (min-width: 1200px) {
  .cta-section {
    padding-top: 140px !important;
    padding-bottom: 170px !important;
  }
}

#cta-heading,
.cta-section .display {
  font-size: calc(var(--fs-h2) + 4px) !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}

.section-intro--cta .lede,
.cta-section .lede,
#cta-heading+.lede {
  font-size: clamp(21px, 1.6vw, 26px) !important;
  line-height: 1.25 !important;
  letter-spacing: -1px !important;
}

@media (min-width: 1024px) {

  .section-intro--cta .lede,
  .cta-section .lede,
  #cta-heading+.lede {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }
}

.cta-section .btn-row {
  margin-top: 28px !important;
}

/* Who We Are: Responsive layout with dedicated mobile 1-column support */
@media (min-width: 781px) {
  .split--founder {
    grid-template-columns: minmax(320px, 440px) minmax(0, 1fr) !important;
    column-gap: clamp(14px, 1.8vw, 24px) !important;
    align-items: end !important;
  }

  .split--founder .founder-photo {
    max-height: min(530px, 57vh) !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    object-position: top center !important;
    border-radius: 20px !important;
  }

  .split--founder .founder-copy {
    font-size: clamp(21px, 1.6vw, 28px) !important;
    line-height: 1.28 !important;
  }
}

@media (min-width: 1440px) {
  .split--founder {
    grid-template-columns: minmax(340px, 460px) minmax(0, 1fr) !important;
    column-gap: 24px !important;
  }
}

@media (max-width: 780px) {

  .section-intro--who,
  .section-intro--who .lede,
  #who-heading+.lede {
    width: 100% !important;
    max-width: 100% !important;
  }

  .founder-rule {
    margin: 18px 0 !important;
    width: 100% !important;
  }

  .split--founder {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    row-gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 18px !important;
    align-items: stretch !important;
  }

  .split--founder .founder-photo {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(440px, 60vh) !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    margin-inline: auto !important;
    object-fit: cover !important;
    object-position: top center !important;
    border-radius: 16px !important;
  }

  .split--founder .card-title {
    font-size: clamp(24px, 6.5vw, 34px) !important;
    margin-top: 4px !important;
    margin-bottom: 12px !important;
    line-height: 1.15 !important;
  }

  .split--founder .founder-copy,
  .founder-copy,
  .split--founder p.founder-copy {
    font-size: clamp(17px, 4.4vw, 21px) !important;
    line-height: 1.35 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Tutorials page overrides */
.tutorial__title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: calc(var(--fs-h3) + 10px) !important;
  line-height: 1.15 !important;
  letter-spacing: var(--track-display) !important;
  color: var(--display-dark) !important;
}

.tutorial__caption {
  font-family: var(--font-body) !important;
  font-size: clamp(17px, 1.35vw, 24px) !important;
  line-height: 1.35 !important;
  letter-spacing: -1px !important;
  font-weight: 400 !important;
  color: var(--card-copy) !important;
}

@media (min-width: 1920px) {
  .tutorial__caption {
    font-size: clamp(24px, 1.46vw, 28px) !important;
  }
}

.tutorial-note {
  font-family: var(--font-body) !important;
  font-size: clamp(21px, 1.6vw, 26px) !important;
  line-height: 1.35 !important;
  letter-spacing: -1px !important;
  font-weight: 600 !important;
  color: var(--display-dark) !important;
  margin-top: 150px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

[aria-label="Tutorial videos"],
.section:has(.tutorial-note) {
  padding-bottom: 0 !important;
}

.request-section {
  padding-block: clamp(52px, 5.2vw, 90px) !important;
}

.request-section .display {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: var(--fs-h2) !important;
  line-height: var(--lh-display) !important;
  letter-spacing: var(--track-display) !important;
  margin-bottom: clamp(12px, 1.2vw, 18px) !important;
}

.request-section .lede {
  font-family: var(--font-body) !important;
  font-size: clamp(20px, 1.55vw, 24px) !important;
  line-height: 1.25 !important;
  letter-spacing: -1px !important;
  font-weight: 600 !important;
}

/* Find Your Perfect Fit: Reduced space after intro by 50px */
.section-intro--fit~.trio--figures,
#fit-heading~.trio--figures {
  margin-top: clamp(50px, calc(9vw - 50px), 90px) !important;
}

/* Community, CTA & Request Tutorial lede text color */
.cta-section .lede,
.section-intro--cta .lede,
.contact-hero .lede,
.request-section .lede,
#modal-request .lede {
  color: #886961 !important;
}

/* Hero intro title & paragraph adjustments */
.hero .display,
.section-intro--hero .display {
  margin-bottom: clamp(20px, 2vw, 36px) !important;
}

.section-intro--hero .lede,
.hero .lede--hero {
  font-size: clamp(21px, 1.65vw, 32px) !important;
  line-height: 1.30 !important;
}

/* Desktop & large devices (1024px and up): hero width 820px, 86px title, 26px paragraph */
@media (min-width: 1024px) {
  .section-intro--hero {
    width: 820px !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  .hero .display,
  .section-intro--hero .display {
    font-size: 86px !important;
    margin-bottom: 32px !important;
    line-height: 1.08 !important;
  }

  .section-intro--hero .lede,
  .hero .lede--hero {
    font-size: 26px !important;
    line-height: 1.22 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 1200px) {
  .section-intro--hero {
    width: 820px !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  .hero .display,
  .section-intro--hero .display {
    font-size: 86px !important;
    margin-bottom: 32px !important;
    line-height: 1.08 !important;
  }

  .section-intro--hero .lede,
  .hero .lede--hero {
    font-size: 26px !important;
    line-height: 1.22 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* From Phone to Form & Find Your Perfect Fit lede paragraphs: Static width across all devices */
.section-intro--scan .lede,
#scan-heading+.lede,
.section-intro--fit .lede,
#fit-heading+.lede {
  font-size: clamp(20px, 1.55vw, 24px) !important;
  line-height: 1.15 !important;
  width: 720px !important;
  max-width: 100% !important;
}

@media (min-width: 1024px) {

  .section-intro--scan .lede,
  #scan-heading+.lede,
  .section-intro--fit .lede,
  #fit-heading+.lede {
    font-size: 24px !important;
    line-height: 1.15 !important;
    width: 720px !important;
    max-width: 100% !important;
  }
}

/* Custom Patterns Made for You lede paragraph: 100% width on mobile */
.section-intro--patterns .lede,
#patterns-heading+.lede {
  font-size: clamp(18px, 1.55vw, 24px) !important;
  line-height: 1.2 !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (min-width: 1024px) {

  .section-intro--patterns .lede,
  #patterns-heading+.lede {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
}

/* Private, Precise, Protected lede paragraph */
.section-intro--privacy .lede,
#privacy-heading+.lede {
  font-size: clamp(19px, 1.5vw, 23px) !important;
  line-height: 1.15 !important;
  letter-spacing: -1px !important;
  width: 800px !important;
  max-width: 100% !important;
}

@media (min-width: 1024px) {

  .section-intro--privacy .lede,
  #privacy-heading+.lede {
    font-size: 23px !important;
    line-height: 1.15 !important;
    letter-spacing: -1px !important;
    width: 800px !important;
    max-width: 100% !important;
  }
}

/* Who We Are lede paragraph */
@media (min-width: 781px) {

  .section-intro--who .lede,
  #who-heading+.lede {
    font-size: clamp(20px, 1.55vw, 24px) !important;
    line-height: 1.15 !important;
    width: min(100%, calc(40vw + 150px)) !important;
  }
}

@media (min-width: 1024px) {

  .section-intro--who .lede,
  #who-heading+.lede {
    font-size: 24px !important;
    line-height: 1.15 !important;
    width: 725px !important;
    max-width: 100% !important;
  }
}

@media (max-width: 780px) {

  .section-intro--who .lede,
  #who-heading+.lede {
    font-size: clamp(18px, 4.4vw, 21px) !important;
    line-height: 1.25 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

.section-intro--privacy~.privacy-split,
#privacy-heading~.privacy-split,
.privacy-split {
  margin-top: clamp(8px, calc(3.5vw - 20px), 36px) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding-left: 100px !important;
  width: 100% !important;
  max-width: min(100%, 1280px) !important;
  grid-template-columns: minmax(280px, 390px) minmax(0, 1fr) !important;
  justify-content: start !important;
  align-items: center !important;
  column-gap: clamp(28px, 3.5vw, 60px) !important;
}

.privacy-split__text {
  padding-top: 0 !important;
}

@media (max-width: 780px) {

  .section-intro--privacy~.privacy-split,
  #privacy-heading~.privacy-split,
  .privacy-split {
    grid-template-columns: 1fr !important;
    padding-left: 0 !important;
  }
}

@media (min-width: 1440px) {

  .section-intro--privacy~.privacy-split,
  #privacy-heading~.privacy-split,
  .privacy-split {
    grid-template-columns: minmax(310px, 420px) minmax(0, 1fr) !important;
    max-width: 1360px !important;
    column-gap: clamp(40px, 4vw, 76px) !important;
    align-items: center !important;
  }
}

@media (min-width: 1920px) {

  .section-intro--privacy~.privacy-split,
  #privacy-heading~.privacy-split,
  .privacy-split {
    grid-template-columns: minmax(340px, 460px) minmax(0, 1fr) !important;
    max-width: 1520px !important;
    column-gap: 88px !important;
    align-items: center !important;
  }
}

.privacy-split__avatar {
  max-height: clamp(550px, 38vw, 620px) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  object-position: center left !important;
  align-self: center !important;
}

@media (min-width: 1440px) {
  .privacy-split__avatar {
    max-height: 640px !important;
  }
}

@media (min-width: 1920px) {
  .privacy-split__avatar {
    max-height: 700px !important;
  }
}

.privacy-split .card-title {
  font-size: calc(var(--fs-h3) + 10px) !important;
  line-height: 1.15 !important;
}

.privacy-split .tick-list li,
.privacy-split .tick-list li strong,
section[aria-labelledby="privacy-heading"] .tick-list li {
  letter-spacing: -1.2px !important;
}

.privacy-split .tick-list strong,
.privacy-split .tick-list li strong {
  color: #886961 !important;
}

section[aria-labelledby="privacy-heading"],
section[aria-labelledby="who-heading"] {
  padding-bottom: calc(var(--section-y) + 30px) !important;
}

/* From Phone to Form: Unified baseline alignment and balanced figures */
.step-figure-box {
  height: clamp(340px, 28vw, 480px);
  width: 100%;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  margin-bottom: clamp(18px, 2vw, 26px) !important;
  position: relative;
}

.step-figure-box .step-figure,
#scan-heading~.trio--figures .step-figure-box .step-figure,
.section-intro--scan~.trio--figures .step-figure-box .step-figure {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: bottom center !important;
  margin-bottom: 0 !important;
  margin-top: auto !important;
  align-self: flex-end !important;
  vertical-align: bottom !important;
  display: block !important;
}

/* 1st figure: full tall presence grounded on bottom line */
.section-intro--scan~.trio--figures>div:nth-child(1) .step-figure-box .step-figure,
#scan-heading~.trio--figures>div:nth-child(1) .step-figure-box .step-figure,
img[src*="step-getready.png"] {
  height: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
  align-self: flex-end !important;
  margin-bottom: 0 !important;
}

/* 2nd figure (middle image, Capture Your Scan): bigger & grounded on bottom line */
.section-intro--scan~.trio--figures>div:nth-child(2) .step-figure-box .step-figure,
#scan-heading~.trio--figures>div:nth-child(2) .step-figure-box .step-figure,
img[src*="step-capture.png"] {
  width: 110% !important;
  max-width: 110% !important;
  height: auto !important;
  max-height: 100% !important;
  align-self: flex-end !important;
  vertical-align: bottom !important;
  margin-bottom: 0 !important;
}

/* 3rd figure: balanced 98% height grounded on bottom line */
.section-intro--scan~.trio--figures>div:nth-child(3) .step-figure-box .step-figure,
#scan-heading~.trio--figures>div:nth-child(3) .step-figure-box .step-figure,
img[src*="step-finalize.png"] {
  height: 98% !important;
  max-height: 98% !important;
  width: auto !important;
  max-width: 100% !important;
  align-self: flex-end !important;
  margin-bottom: 0 !important;
}

/* Card titles & text: perfectly aligned across all 3 columns */
.section-intro--scan~.trio--figures>div,
#scan-heading~.trio--figures>div {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.section-intro--scan~.trio--figures .card-title,
#scan-heading~.trio--figures .card-title,
.section-intro--fit~.trio--figures .card-title,
#fit-heading~.trio--figures .card-title {
  font-size: calc(var(--fs-h3) + 10px) !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  white-space: normal !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

.section-intro--scan~.trio--figures .card-copy,
#scan-heading~.trio--figures .card-copy {
  margin-top: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.15 !important;
  color: #886961 !important;
}

@media (max-width: 780px) {
  .step-figure-box {
    height: min(44svh, 300px);
  }
}

/* Find Your Perfect Fit: Balanced dress form images */
.form-figure,
.trio--figures .form-figure,
.section-intro--fit~.trio--figures .form-figure,
#fit-heading~.trio--figures .form-figure {
  height: clamp(480px, 35vw, 690px) !important;
  max-height: 690px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: bottom center !important;
  align-self: center !important;
  display: block !important;
  margin-bottom: clamp(24px, 2.5vw, 36px) !important;
}

@media (max-width: 780px) {

  .form-figure,
  .trio--figures .form-figure,
  .section-intro--fit~.trio--figures .form-figure,
  #fit-heading~.trio--figures .form-figure {
    height: min(50svh, 410px) !important;
    max-width: 320px !important;
    margin-bottom: 22px !important;
  }
}

/* Explore Forms: Find Your Perfect Fit Hero */
.forms-hero {
  position: relative !important;
  text-align: center !important;
  min-height: calc(100svh - var(--header-h)) !important;
  min-height: calc(100vh - var(--header-h)) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.forms-hero .wrap {
  position: relative !important;
  width: 100% !important;
  padding-top: clamp(24px, 3.5vh, 48px) !important;
  padding-bottom: clamp(24px, 3.5vh, 48px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.forms-hero .display,
.forms-hero .lede,
.forms-hero .explore-cue {
  position: relative !important;
  z-index: 2 !important;
}

.forms-hero .display {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: var(--fs-h1) !important;
  line-height: var(--lh-display) !important;
  letter-spacing: var(--track-display) !important;
  color: var(--display-dark) !important;
  text-align: center !important;
  margin: 0 auto clamp(16px, 1.8vw, 24px) !important;
}

.forms-hero .lede {
  font-family: var(--font-body) !important;
  font-size: clamp(21px, 1.65vw, 26px) !important;
  line-height: 1.25 !important;
  letter-spacing: -1px !important;
  font-weight: 600 !important;
  color: #886961 !important;
  text-align: center !important;
  margin-inline: auto !important;
  max-width: 44ch !important;
}

/* Hero silhouette: moved down slightly, smaller, more toward the center matching original */
.forms-hero__silhouette {
  position: absolute !important;
  top: clamp(35px, 5vh, 65px) !important;
  bottom: auto !important;
  right: clamp(120px, 14vw, 260px) !important;
  left: auto !important;
  height: clamp(460px, 68vh, 680px) !important;
  max-height: 100% !important;
  width: auto !important;
  max-width: clamp(170px, 15vw, 230px) !important;
  object-fit: contain !important;
  object-position: top center !important;
  transform: none !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.explore-cue {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: clamp(24px, 1.9vw, 30px) !important;
  line-height: var(--lh-sub) !important;
  letter-spacing: -1px !important;
  font-weight: 600 !important;
  color: var(--display-dark) !important;
  text-align: center !important;
  margin-top: clamp(130px, 18vh, 220px) !important;
  margin-bottom: 0 !important;
  margin-inline: auto !important;
}

.explore-cue span {
  display: block !important;
  font-size: 1.45em !important;
  line-height: 1 !important;
  margin-top: 10px !important;
}

@media (min-width: 901px) {
  .product-block {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) auto !important;
    column-gap: clamp(36px, 4vw, 70px) !important;
    align-items: center !important;
    max-width: 1440px !important;
    margin-inline: auto !important;
    padding-block: clamp(48px, 5.5vw, 88px) !important;
  }

  .product-block img {
    width: auto !important;
    height: clamp(660px, 72vh, 850px) !important;
    max-height: none !important;
    max-width: clamp(330px, 28vw, 440px) !important;
    object-fit: contain !important;
    align-self: center !important;
    justify-self: center !important;
  }

  /* Consistent section padding across all three forms */
  section[aria-labelledby="custom-heading"] .product-block,
  section[aria-labelledby="essential-heading"] .product-block,
  section[aria-labelledby="pro-heading"] .product-block {
    padding-block: clamp(48px, 5.5vw, 88px) !important;
  }

  /* All three dress form images scaled consistently and larger */
  section[aria-labelledby="essential-heading"] .product-block img,
  section[aria-labelledby="custom-heading"] .product-block img,
  section[aria-labelledby="pro-heading"] .product-block img {
    height: clamp(660px, 72vh, 850px) !important;
    width: auto !important;
    max-height: none !important;
    max-width: clamp(330px, 28vw, 440px) !important;
    object-fit: contain !important;
  }

  /* Essential Form: align top of mannequin neck with top of text, and add space below */
  section[aria-labelledby="essential-heading"] .product-block {
    align-items: start !important;
    padding-bottom: clamp(64px, 7.5vw, 120px) !important;
  }

  section[aria-labelledby="essential-heading"] .product-block img {
    align-self: start !important;
    margin-top: clamp(8px, 1vw, 16px) !important;
  }

  .product-block .display {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: var(--fs-h1) !important;
    line-height: var(--lh-display) !important;
    letter-spacing: var(--track-display) !important;
    color: var(--display) !important;
    margin-bottom: clamp(10px, 1.1vw, 18px) !important;
  }

  .product-block__intro {
    font-family: var(--font-body) !important;
    font-size: clamp(20px, 1.55vw, 24px) !important;
    line-height: 1.25 !important;
    letter-spacing: -1px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    max-width: 65ch !important;
    margin-bottom: clamp(20px, 2.2vw, 32px) !important;
  }

  .product-cols {
    max-width: clamp(860px, 64vw, 980px) !important;
    width: 100% !important;
    gap: clamp(28px, 2.8vw, 44px) !important;
    margin-top: 0 !important;
  }

  /* Subheader "What You Get" & "How It Works": matches "Get Ready" card-title from index page */
  .product-cols h3 {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: calc(var(--fs-h3) + 10px) !important;
    line-height: 1.15 !important;
    letter-spacing: var(--track-display) !important;
    color: var(--display-dark) !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  .product-cols .tick-list {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(12px, 1.1vw, 18px) !important;
  }

  .product-cols .tick-list li {
    font-family: var(--font-body) !important;
    font-size: clamp(17px, 1.35vw, 24px) !important;
    line-height: 1.35 !important;
    letter-spacing: -1px !important;
    font-weight: 400 !important;
    color: var(--card-copy) !important;
    max-width: 100% !important;
  }

  .product-cols .tick-list li strong {
    font-weight: 600 !important;
    color: var(--card-copy) !important;
  }

  @media (min-width: 1920px) {
    .product-cols .tick-list li {
      font-size: clamp(24px, 1.46vw, 28px) !important;
      line-height: 1.35 !important;
    }
  }
}

/* Tablet & Mobile: 100% responsive single-column layout */
@media (max-width: 900px) {
  .forms-hero__silhouette {
    display: none !important;
  }

  .forms-hero .wrap {
    padding-top: clamp(60px, 12vw, 90px) !important;
    padding-bottom: clamp(30px, 6vw, 50px) !important;
  }

  .forms-hero .display {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: clamp(2.2rem, 7.5vw, 3.4rem) !important;
    line-height: var(--lh-display) !important;
    letter-spacing: var(--track-display) !important;
    color: var(--display-dark) !important;
  }

  .forms-hero .lede {
    font-family: var(--font-body) !important;
    font-size: clamp(1.05rem, 3.8vw, 1.25rem) !important;
    line-height: 1.25 !important;
    letter-spacing: -1px !important;
    font-weight: 600 !important;
    color: #886961 !important;
    max-width: 100% !important;
  }

  .explore-cue {
    margin-top: clamp(36px, 8vw, 64px) !important;
    font-size: clamp(1rem, 3.6vw, 1.2rem) !important;
  }

  .product-block {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: clamp(24px, 4vw, 40px) !important;
    padding-block: clamp(32px, 5vw, 48px) !important;
    width: 100% !important;
  }

  .product-block>div {
    width: 100% !important;
  }

  .product-block img {
    width: auto !important;
    max-width: min(100%, 340px) !important;
    height: auto !important;
    margin: 0 auto !important;
    align-self: center !important;
    justify-self: center !important;
    order: 2 !important;
  }

  section[aria-labelledby="essential-heading"] .product-block {
    padding-block: clamp(40px, 6vw, 64px) !important;
  }

  .product-block .display {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: clamp(1.8rem, 6.5vw, 2.5rem) !important;
    line-height: var(--lh-display) !important;
    letter-spacing: var(--track-display) !important;
    color: var(--display) !important;
  }

  .product-block__intro {
    font-family: var(--font-body) !important;
    font-size: clamp(20px, 1.55vw, 24px) !important;
    line-height: 1.25 !important;
    letter-spacing: -1px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    max-width: 100% !important;
  }

  .product-cols {
    max-width: 100% !important;
    gap: clamp(20px, 3vw, 36px) !important;
  }

  .product-cols h3 {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: calc(var(--fs-h3) + 10px) !important;
    line-height: 1.15 !important;
    letter-spacing: var(--track-display) !important;
    color: var(--display-dark) !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  .product-cols .tick-list {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(10px, 2.5vw, 14px) !important;
  }

  .product-cols .tick-list li {
    font-family: var(--font-body) !important;
    font-size: clamp(16px, 3.8vw, 18px) !important;
    line-height: 1.4 !important;
    letter-spacing: -1px !important;
    font-weight: 400 !important;
    color: var(--card-copy) !important;
    max-width: 100% !important;
  }

  .product-cols .tick-list li strong {
    font-weight: 600 !important;
    color: var(--card-copy) !important;
  }
}

/* Mobile Phones: Stack columns vertically */
@media (max-width: 680px) {
  .product-cols {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-top: 20px !important;
  }

  .product-cols h3 {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: calc(var(--fs-h3) + 10px) !important;
    line-height: 1.15 !important;
    letter-spacing: var(--track-display) !important;
    color: var(--display-dark) !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  .product-cols .tick-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .product-cols .tick-list li {
    font-family: var(--font-body) !important;
    font-size: clamp(16px, 4vw, 18px) !important;
    line-height: 1.4 !important;
    letter-spacing: -1px !important;
    font-weight: 400 !important;
    color: var(--card-copy) !important;
    max-width: 100% !important;
  }

  .product-cols .tick-list li strong {
    font-weight: 600 !important;
    color: var(--card-copy) !important;
  }
}

/* --- Get Started Hero Enhancements --- */
.start-hero {
  padding-block: clamp(36px, 4vw, 68px) 0 !important;
  text-align: center !important;
}

.start-hero .display {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: var(--fs-h1) !important;
  line-height: var(--lh-display) !important;
  letter-spacing: var(--track-display) !important;
  color: var(--display-dark) !important;
  margin-bottom: clamp(14px, 1.6vw, 24px) !important;
}

.start-hero .lede {
  font-family: var(--font-body) !important;
  font-size: clamp(21px, 1.65vw, 32px) !important;
  line-height: 1.25 !important;
  letter-spacing: -1px !important;
  font-weight: 600 !important;
  color: #886961 !important;
  max-width: 70ch !important;
  margin-inline: auto !important;
  margin-bottom: 0 !important;
}

.steps-section,
section[aria-label="How to get started"] {
  padding-top: clamp(48px, 5.2vw, 84px) !important;
  padding-bottom: clamp(64px, 7vw, 110px) !important;
}

.steps {
  margin-top: clamp(4px, 0.8vw, 10px) !important;
  gap: clamp(8px, 1.1vw, 18px) !important;
  row-gap: clamp(8px, 1.1vw, 18px) !important;
}

.step {
  grid-template-columns: clamp(100px, calc(8vw + 20px), 160px) minmax(0, 1fr) auto !important;
  gap: clamp(14px, 1.8vw, 32px) !important;
}

@media (max-width: 820px) {
  .step {
    grid-template-columns: clamp(90px, calc(13vw + 15px), 130px) minmax(0, 1fr) !important;
    gap: clamp(10px, 1.5vw, 20px) !important;
  }
}

.step__title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: calc(var(--fs-h3) + 10px) !important;
  line-height: 1.15 !important;
  letter-spacing: var(--track-display) !important;
  color: var(--display-dark) !important;
  margin-bottom: clamp(6px, 0.75vw, 12px) !important;
}

.step__copy {
  font-family: var(--font-body) !important;
  font-size: clamp(17px, 1.35vw, 24px) !important;
  line-height: 1.35 !important;
  letter-spacing: -1px !important;
  font-weight: 400 !important;
  color: var(--card-copy) !important;
  max-width: 68ch !important;
  margin: 0 !important;
}

@media (min-width: 1920px) {
  .step__copy {
    font-size: clamp(24px, 1.46vw, 28px) !important;
  }
}

/* --- Taking Your Scan Hero Enhancements --- */
.scan-hero {
  text-align: center !important;
  padding-block: clamp(40px, 4.6vw, 88px) 0 !important;
}

.scan-hero .display {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: var(--fs-h1) !important;
  line-height: var(--lh-display) !important;
  letter-spacing: var(--track-display) !important;
  color: var(--display-dark) !important;
  margin-bottom: clamp(14px, 1.6vw, 24px) !important;
}

.scan-hero .lede {
  font-family: var(--font-body) !important;
  font-size: clamp(21px, 1.65vw, 32px) !important;
  line-height: 1.25 !important;
  letter-spacing: -1px !important;
  font-weight: 600 !important;
  color: #886961 !important;
  max-width: 70ch !important;
  margin-inline: auto !important;
}

.scan-video {
  margin-top: clamp(48px, 5.5vw, 84px) !important;
}

section[aria-labelledby="ready-heading"] {
  padding-top: clamp(60px, 8vw, 100px) !important;
}

section[aria-labelledby="finalize-heading"] {
  padding-top: clamp(40px, 4.5vw, 70px) !important;
  padding-bottom: clamp(70px, 8vw, 130px) !important;
}

.scan-step .display {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: var(--fs-h1) !important;
  line-height: var(--lh-display) !important;
  letter-spacing: var(--track-display) !important;
  color: var(--display) !important;
  margin-bottom: clamp(8px, 1vw, 16px) !important;
}

.scan-step__intro {
  font-family: var(--font-body) !important;
  font-size: clamp(20px, 1.55vw, 24px) !important;
  line-height: 1.25 !important;
  letter-spacing: -1px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  max-width: 54ch !important;
  margin: 0 0 clamp(16px, 1.8vw, 32px) !important;
}

.scan-step .tick-list li {
  font-family: var(--font-body) !important;
  font-size: clamp(17px, 1.35vw, 24px) !important;
  line-height: 1.35 !important;
  letter-spacing: -1px !important;
  font-weight: 400 !important;
  color: var(--card-copy) !important;
  max-width: 58ch !important;
}

@media (min-width: 1920px) {
  .scan-step .tick-list li {
    font-size: clamp(24px, 1.46vw, 28px) !important;
  }
}

/* --- Contact Page Enhancements --- */
.contact-hero {
  text-align: center !important;
  padding-block: clamp(40px, 4.6vw, 88px) 0 !important;
}

.contact-hero .display {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: var(--fs-h1) !important;
  line-height: var(--lh-display) !important;
  letter-spacing: var(--track-display) !important;
  color: var(--display-dark) !important;
  margin-bottom: clamp(14px, 1.6vw, 24px) !important;
}

.contact-hero .lede {
  font-family: var(--font-body) !important;
  font-size: clamp(21px, 1.65vw, 32px) !important;
  line-height: 1.25 !important;
  letter-spacing: -1px !important;
  font-weight: 600 !important;
  color: #886961 !important;
  max-width: 70ch !important;
  margin-inline: auto !important;
}

section[aria-label="Contact form"],
section[aria-label="Join the community"] {
  padding-top: max(0px, calc(var(--section-y) - 30px)) !important;
}

.contact-form {
  max-width: 1180px !important;
  padding-inline: clamp(0px, 4.5vw, 70px) !important;
  margin-top: 0 !important;
  gap: clamp(9px, 0.85vw, 15px) !important;
}

.field-group>legend,
.field-group__label {
  font-size: clamp(0.85rem, 0.95vw, 1rem) !important;
  margin-bottom: .15rem !important;
}

.contact-form .field label {
  font-size: clamp(.72rem, 0.8vw, .82rem) !important;
}

.contact-form .field input {
  padding: .35em 1em !important;
  min-height: 38px !important;
  font-size: clamp(.88rem, 0.95vw, 1.05rem) !important;
}

.contact-form .field textarea {
  padding: .48em 1em !important;
  min-height: clamp(42px, 3.8vw, 62px) !important;
  font-size: clamp(.88rem, 0.95vw, 1.05rem) !important;
  border-radius: 20px !important;
}

/* Contact page specific: First Name and Last Name same size as Email and Message, required text in brown */
.page-contact .contact-form .field-group>legend,
.page-contact .contact-form .field-group__label,
section[aria-label="Contact form"] .contact-form .field-group>legend,
section[aria-label="Contact form"] .contact-form .field-group__label {
  font-size: calc(clamp(0.92rem, 1.02vw, 1.06rem) + 2px) !important;
  margin-bottom: .25rem !important;
}

.page-contact .contact-form .field label,
section[aria-label="Contact form"] .contact-form .field label {
  font-size: calc(clamp(0.92rem, 1.02vw, 1.06rem) + 2px) !important;
  margin-bottom: .25rem !important;
}

.page-contact .contact-form .field label .req,
.page-contact .contact-form .req,
section[aria-label="Contact form"] .contact-form .field label .req,
section[aria-label="Contact form"] .contact-form .req {
  color: var(--ink, #3d2f2c) !important;
}

/* Ensure modal form labels strictly maintain original compact size */
.modal .contact-form .field-group>legend,
.modal .contact-form .field-group__label {
  font-size: clamp(0.85rem, 0.95vw, 1rem) !important;
  margin-bottom: .15rem !important;
}

.modal .contact-form .field label {
  font-size: clamp(.72rem, 0.8vw, .82rem) !important;
}

/* Join Community form: First Name & Last Name same font size as Email & Message, required text in brown */
.page-community .contact-form .field label,
section[aria-label="Join the community"] .contact-form .field label {
  font-size: clamp(0.85rem, 0.95vw, 1rem) !important;
  margin-bottom: .15rem !important;
}

.page-community .contact-form .field label .req,
.page-community .contact-form .req,
section[aria-label="Join the community"] .contact-form .field label .req,
section[aria-label="Join the community"] .contact-form .req {
  color: var(--ink, #3d2f2c) !important;
}

/* Request a Tutorial modal: exact same form and styling as Contact Us -> Get In Touch form */
#modal-request .modal__panel {
  width: min(680px, 100%);
}

#modal-request .contact-form {
  padding-inline: 0 !important;
  max-width: 100% !important;
  margin-top: 1.25rem !important;
  gap: clamp(10px, 1vw, 16px) !important;
}

#modal-request .contact-form .field-group>legend,
#modal-request .contact-form .field-group__label {
  font-size: calc(clamp(0.92rem, 1.02vw, 1.06rem) + 2px) !important;
  margin-bottom: .25rem !important;
}

#modal-request .contact-form .field label {
  font-size: calc(clamp(0.92rem, 1.02vw, 1.06rem) + 2px) !important;
  margin-bottom: .25rem !important;
}

#modal-request .contact-form .field label .req,
#modal-request .contact-form .req {
  color: var(--ink, #3d2f2c) !important;
}

/* --- FAQ Page Enhancements --- */
.faq-section {
  padding-block: clamp(44px, 4.8vw, 88px) clamp(14px, 1.8vw, 24px) !important;
}

.ask-section {
  padding-top: calc(clamp(10px, 1.2vw, 20px) + 50px) !important;
  padding-bottom: calc(var(--section-y) + 20px) !important;
  text-align: center !important;
}

.ask-section .display {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: var(--fs-h2) !important;
  line-height: var(--lh-display) !important;
  letter-spacing: var(--track-display) !important;
  color: var(--display-dark) !important;
  margin-top: 0 !important;
  margin-bottom: clamp(10px, 1.2vw, 18px) !important;
}

.ask-section .lede {
  font-family: var(--font-body) !important;
  font-size: clamp(20px, 1.55vw, 24px) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -1px !important;
  color: #886961 !important;
  max-width: 46ch !important;
  margin-inline: auto !important;
}

.ask-section .btn-row {
  margin-top: clamp(34px, 4vw, 64px) !important;
}

.faq-heading {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--display-dark) !important;
  font-size: var(--fs-h1) !important;
  line-height: var(--lh-display) !important;
  letter-spacing: var(--track-display) !important;
  margin-top: 0 !important;
  margin-bottom: clamp(20px, 2.4vw, 36px) !important;
}

.faq-list {
  display: grid !important;
  gap: clamp(16px, 1.8vw, 26px) !important;
  margin: 0 !important;
  max-width: 1240px !important;
}

.faq-item {
  margin: 0 !important;
}

.faq-item__q {
  font-family: var(--font-body) !important;
  font-size: clamp(21px, 1.65vw, 26px) !important;
  font-weight: 600 !important;
  color: var(--display-dark) !important;
  line-height: 1.25 !important;
  letter-spacing: -1px !important;
  margin: 0 0 6px !important;
}

.faq-item__a {
  font-family: var(--font-body) !important;
  font-size: clamp(17px, 1.35vw, 24px) !important;
  line-height: 1.5 !important;
  letter-spacing: -1px !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  margin: 0 !important;
  max-width: 100% !important;
}

.faq-item__a b {
  font-weight: 600 !important;
  color: var(--display-dark) !important;
}

.faq-item__a ul {
  list-style: none !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 4px !important;
}

.faq-item__a li {
  position: relative !important;
  padding-left: 1.35em !important;
  max-width: 100% !important;
  font-size: clamp(17px, 1.35vw, 24px) !important;
  line-height: 1.5 !important;
  letter-spacing: -1px !important;
  color: var(--ink) !important;
}

.faq-item__a li::before {
  content: "" !important;
  position: absolute !important;
  left: 0.35em !important;
  top: 0.52em !important;
  width: 0.28em !important;
  height: 0.28em !important;
  border-radius: 50% !important;
  background: currentColor !important;
}

@media (min-width: 1920px) {
  .faq-item__a,
  .faq-item__a li {
    font-size: clamp(24px, 1.46vw, 28px) !important;
  }
}