/* =============================================================
   Components  ·  v3 "Clear Lab"
   glass nav · swatch hero · texture strip · ink band · form
   ============================================================= */

/* ---------- NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 248, 249, .72);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid transparent;
  height: 76px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav[data-scrolled="true"] {
  border-bottom-color: var(--border);
  background: rgba(247, 248, 249, .9);
}
.nav__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6);
}
.nav__brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--text-primary);
}
/* Mark: a clear lens — glass disc with a champagne meniscus */
.nav__brand-mark {
  width: 22px; height: 22px; flex: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.98), rgba(255,255,255,.35) 48%, rgba(220,230,236,.85) 100%);
  border: 1px solid var(--border-strong);
  position: relative;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.9);
}
.nav__brand-mark::after {
  content: "";
  position: absolute; left: 3px; right: 3px; bottom: 4px;
  height: 6px; border-radius: 0 0 999px 999px;
  background: linear-gradient(180deg, rgba(181,146,95,.25), rgba(181,146,95,.85));
}
.nav__links {
  display: flex; align-items: center; gap: var(--sp-8);
  list-style: none; margin: 0; padding: 0;
}
.nav__link {
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--text-muted);
  padding: 4px 0; position: relative;
  transition: color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--text-primary); }
.nav__link[aria-current="page"] { color: var(--text-primary); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -7px;
  height: 1px; background: var(--accent);
}
.nav__cta { margin-left: var(--sp-2); }

.nav__toggle {
  display: none;
  width: 44px; height: 44px; border: 1px solid var(--border-strong);
  background: rgba(255,255,255,.6); border-radius: var(--r-input);
  align-items: center; justify-content: center;
  color: var(--text-primary);
}
.nav__toggle svg { width: 20px; height: 20px; }

@media (max-width: 1023px) {
  .nav { height: 66px; }
  .nav__toggle { display: inline-flex; }
  .nav__links, .nav__cta { display: none; }
  .nav[data-open="true"] .nav__panel {
    display: flex; flex-direction: column; gap: var(--sp-4);
    position: absolute; top: 66px; left: 0; right: 0;
    background: rgba(247,248,249,.97); border-bottom: 1px solid var(--border);
    padding: var(--sp-6) var(--container-pad) var(--sp-8);
    box-shadow: var(--shadow-2);
    backdrop-filter: blur(16px);
  }
  .nav__panel { display: none; }
  .nav__panel .nav__link { font-size: 13px; padding: 10px 0; letter-spacing: 0.18em; }
  .nav__panel .btn { align-self: stretch; height: 50px; }
}
@media (min-width: 1024px) { .nav__panel { display: none !important; } }

/* ---------- HERO ---------- */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(56px, 7vw, 100px) clamp(72px, 9vw, 120px);
  background:
    radial-gradient(90% 70% at 78% 8%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
    radial-gradient(70% 60% at 8% 90%, #E9F0F4 0%, rgba(233,240,244,0) 60%),
    linear-gradient(180deg, #F9FAFB 0%, #EDF1F4 100%);
}
/* Out-of-focus glassware highlights */
.hero__orb {
  position: absolute; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.95), rgba(255,255,255,.18) 62%, rgba(255,255,255,0) 72%);
  filter: blur(0.5px);
}
.hero__orb--a { width: 190px; height: 190px; top: 6%; right: 30%; opacity: .8; }
.hero__orb--b { width: 120px; height: 120px; bottom: 12%; left: 6%; opacity: .7; }
.hero__orb--c { width: 72px;  height: 72px;  top: 22%; left: 44%; opacity: .55; }

.hero__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(40px, 5vw, 76px);
  align-items: center;
}
@media (max-width: 1023px) { .hero__grid { grid-template-columns: 1fr; gap: var(--sp-12); } }

.hero__copy { max-width: 600px; display: flex; flex-direction: column; gap: var(--sp-6); }
.hero__copy h1 { max-width: 16ch; }
.hero__secondline {
  font-family: var(--font-label);
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--accent-strong);
  margin-top: calc(var(--sp-2) * -1);
}
.hero__ctas { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); }

/* --- Glass swatch panel (the signature component) --- */
.hero__visual { position: relative; }
/* diffuse lab light behind the glass, so the panel has something to refract */
.hero__visual::before {
  content: "";
  position: absolute; inset: -14% -10% -18% -12%;
  background:
    radial-gradient(46% 40% at 26% 22%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%),
    radial-gradient(52% 46% at 78% 74%, rgba(206,226,238,.7), rgba(206,226,238,0) 72%),
    radial-gradient(38% 34% at 88% 16%, rgba(240,228,202,.55), rgba(240,228,202,0) 70%);
  filter: blur(26px);
  pointer-events: none;
}
.hero__visual > * { position: relative; z-index: 1; }
.glasspanel {
  position: relative;
  background: linear-gradient(165deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.5) 45%, rgba(232,240,245,.6) 100%);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3), var(--glass-edge);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  overflow: hidden;
}
.glasspanel::before {  /* edge light */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 32%);
  pointer-events: none;
}
.glasspanel__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--hairline);
  position: relative; z-index: 1;
}
.glasspanel__label, .glasspanel__foot {
  font-family: var(--font-label);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tr-label);
  color: var(--text-muted);
  margin: 0;
}
.glasspanel__label { color: var(--text-primary); }
.glasspanel__foot {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; gap: var(--sp-4);
}

.swatches {
  list-style: none; margin: 0; padding: var(--sp-2) 0 0;
  position: relative; z-index: 1;
}
.swatch-row {
  display: grid;
  grid-template-columns: 26px minmax(72px, auto) 1fr 124px;
  align-items: center;
  gap: var(--sp-3);
  padding-block: 11px;
}
.swatch-row__num {
  font-family: var(--font-label);
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  color: var(--accent-strong);
}
.swatch-row__name {
  font-family: var(--font-label);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--text-secondary);
  white-space: nowrap;
}
.swatch-row__line { height: 1px; background: var(--hairline); }

/* The texture smear itself */
.tex {
  --sw-a: #EDF3F6; --sw-b: #D9E5EC;
  height: 30px; width: 100%;
  border-radius: 62% 38% 48% 52% / 66% 58% 42% 34%;
  background:
    linear-gradient(118deg, rgba(255,255,255,.95) 0%, var(--sw-a) 42%, var(--sw-b) 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.92),
    inset 0 -3px 6px rgba(16,21,26,.07),
    0 6px 14px -9px rgba(16,21,26,.5);
  position: relative;
}
.tex::after {  /* specular streak */
  content: "";
  position: absolute; left: 14%; right: 42%; top: 18%;
  height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.85);
  filter: blur(1.5px);
}
.tex--serum    { --sw-a: #EDF4F8; --sw-b: #D5E4EE; }
.tex--essence  { --sw-a: #F2E2B8; --sw-b: #DCC07F; }
.tex--cream    { --sw-a: #FCFBF8; --sw-b: #EDE9E0; }
.tex--emulsion { --sw-a: #F7EDE0; --sw-b: #E7D5BF; }
.tex--gel      { --sw-a: #EEF5F8; --sw-b: #DBEAF1; }
.tex--ampoule  { --sw-a: #F4F8FA; --sw-b: #E0EAF0; }
.tex--balm     { --sw-a: #F8F0DA; --sw-b: #E9DEBB; }
/* bubbles for the gel */
.tex--gel::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image:
    radial-gradient(circle at 22% 55%, rgba(255,255,255,.95) 1.6px, rgba(255,255,255,0) 2.2px),
    radial-gradient(circle at 46% 34%, rgba(255,255,255,.9) 2.2px, rgba(255,255,255,0) 2.8px),
    radial-gradient(circle at 63% 62%, rgba(255,255,255,.9) 1.4px, rgba(255,255,255,0) 2px),
    radial-gradient(circle at 82% 44%, rgba(255,255,255,.95) 1.9px, rgba(255,255,255,0) 2.5px);
}

@media (max-width: 1023px) {
  .glasspanel { max-width: 560px; }
}
@media (max-width: 519px) {
  .swatch-row { grid-template-columns: 22px 1fr 64px; gap: 10px; }
  .swatch-row__line { display: none; }
}

/* ---------- TRUST BAR ---------- */
.trust-bar {
  background: var(--bg-pure);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: var(--sp-6);
}
.trust-bar__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0; margin: 0; padding: 0; list-style: none;
}
.trust-bar__item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 6px var(--sp-8);
  border-left: 1px solid var(--border);
  font-family: var(--font-label);
  font-size: 10px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1.5;
}
.trust-bar__item:first-child { border-left: 0; padding-left: 0; }
.trust-bar__item svg { color: var(--accent); flex: none; width: 18px; height: 18px; }
@media (max-width: 1023px) {
  .trust-bar__row { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3) 0; }
  .trust-bar__item { border-left: 0; padding: var(--sp-3) 0; border-top: 1px solid var(--border); }
  .trust-bar__item:nth-child(-n+2) { border-top: 0; padding-top: 0; }
}
@media (max-width: 639px) {
  .trust-bar__row { grid-template-columns: 1fr; }
  .trust-bar__item { border-top: 1px solid var(--border); padding: var(--sp-3) 0; }
  .trust-bar__item:first-child { border-top: 0; padding-top: 0; }
}

/* ---------- REASON LIST ---------- */
.reasons { display: flex; flex-direction: column; }
.reason {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--border);
}
.reason:last-child { border-bottom: 1px solid var(--border); }
.reason__num {
  font-family: var(--font-label);
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  color: var(--accent-strong);
  padding-top: 5px;
}
.reason__title { font-size: 1.0625rem; margin-bottom: 7px; }
.reason__body { color: var(--text-secondary); font-size: 14.5px; line-height: 1.62; max-width: 46ch; }
@media (max-width: 639px) { .reason { grid-template-columns: 36px 1fr; gap: var(--sp-3); } }

/* ---------- PROCESS TIMELINE ---------- */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-6);
}
.timeline::before {
  content: "";
  position: absolute;
  top: 21px; left: 21px; right: 21px;
  height: 1px;
  background: var(--hairline);
  z-index: 0;
}
.timeline__step { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); }
.timeline__num {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--bg-pure);
  border: 1px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-label);
  color: var(--accent-strong);
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  position: relative; z-index: 1;
  box-shadow: var(--glass-edge);
}
.timeline__title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.timeline__desc { color: var(--text-secondary); font-size: 13.5px; line-height: 1.6; }

@media (max-width: 1023px) {
  .timeline { grid-template-columns: 1fr; gap: 0; padding-left: 21px; }
  .timeline::before { top: 0; bottom: 0; left: 21px; right: auto; height: auto; width: 1px; }
  .timeline__step { padding-left: 40px; padding-block: var(--sp-4) var(--sp-6); }
  .timeline__num { position: absolute; left: -21px; top: 0; }
}

/* ---------- CONCEPT CARD (texture-led) ---------- */
.concept {
  background: var(--bg-pure);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  display: flex; flex-direction: column;
}
.concept:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.concept__img {
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.85) 0, rgba(255,255,255,.42) 40%, rgba(255,255,255,0) 72%) 0 0 / 190px 190px no-repeat,
    radial-gradient(70% 55% at 30% 22%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
    linear-gradient(165deg, #F6F9FB 0%, #E6EEF3 55%, #DBE6ED 100%);
}
.concept:nth-child(2) .concept__img {
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.85) 0, rgba(255,255,255,.42) 40%, rgba(255,255,255,0) 72%) 0 0 / 190px 190px no-repeat,
    radial-gradient(70% 55% at 30% 22%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
    linear-gradient(165deg, #FBFAF7 0%, #F0ECE2 55%, #E6E0D2 100%);
}
.concept:nth-child(3) .concept__img {
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.85) 0, rgba(255,255,255,.42) 40%, rgba(255,255,255,0) 72%) 0 0 / 190px 190px no-repeat,
    radial-gradient(70% 55% at 30% 22%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
    linear-gradient(165deg, #FAF6EC 0%, #F0E6CE 55%, #E5D8B6 100%);
}
/* out-of-focus highlights */
.concept__img::before {
  content: attr(data-label);
  position: absolute; top: 16px; left: 18px; z-index: 2;
  font-family: var(--font-label);
  font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--text-muted);
}
.concept__img::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.55));
}
/* the smear — reuses v2 markup class names */
.concept__jar {
  position: absolute;
  top: 48%; left: 50%; transform: translate(-50%, -50%) rotate(-5deg);
  width: 66%; height: 21%;
  border-radius: 56% 44% 40% 60% / 70% 62% 38% 30%;
  background: var(--smear, linear-gradient(118deg, rgba(255,255,255,.96) 0%, #F4F8FA 40%, #DDE9F0 100%));
  box-shadow:
    inset 0 3px 5px rgba(255,255,255,.95),
    inset 0 -5px 10px rgba(16,21,26,.08),
    0 14px 26px -16px rgba(16,21,26,.6);
  z-index: 1;
}
.concept__jar::after {
  content: "";
  position: absolute; left: 12%; right: 44%; top: 16%;
  height: 7px; border-radius: 999px;
  background: rgba(255,255,255,.9); filter: blur(2.5px);
}
.concept:nth-child(2) .concept__img {
  --smear: linear-gradient(118deg, rgba(255,255,255,.98) 0%, #FBFAF6 40%, #EAE4D6 100%);
}
.concept:nth-child(3) .concept__img {
  --smear: linear-gradient(118deg, rgba(255,255,255,.96) 0%, #F6EDD4 40%, #E2D0A3 100%);
}
.concept__jar--tall {
  width: 52%; height: 25%;
  border-radius: 66% 34% 46% 54% / 62% 68% 32% 38%;
  transform: translate(-50%, -50%) rotate(-8deg);
}
/* trailing dab — the second touch of the spatula */
.concept__dab {
  position: absolute;
  bottom: 21%; right: 17%;
  width: 16%; height: 8.5%;
  border-radius: 60% 40% 45% 55% / 68% 60% 40% 32%;
  background: var(--smear, linear-gradient(118deg, rgba(255,255,255,.96) 0%, #F4F8FA 40%, #DDE9F0 100%));
  opacity: .92;
  box-shadow: inset 0 2px 3px rgba(255,255,255,.9), 0 8px 16px -12px rgba(16,21,26,.55);
  z-index: 1;
}
.concept__body {
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.concept__title { font-size: 1.0625rem; }
.concept__line { color: var(--text-secondary); font-size: 13.5px; line-height: 1.6; }
.concept__divider { height: 1px; background: var(--border); margin: 2px 0; }

/* ---------- CTA BAND ---------- */
.cta-band {
  background: linear-gradient(170deg, var(--dark-bg) 0%, var(--dark-bg-2) 100%);
  color: var(--dark-text);
  padding-block: 128px;
  position: relative;
  overflow: hidden;
}
.cta-band::before {   /* cool light bloom */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(55% 60% at 50% -10%, rgba(214,232,242,.22), rgba(214,232,242,0) 70%),
    radial-gradient(40% 50% at 88% 110%, rgba(181,146,95,.16), rgba(181,146,95,0) 70%);
  pointer-events: none;
}
.cta-band::after {   /* glassware bokeh */
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 12% 28%, rgba(255,255,255,.13) 0 22px, rgba(255,255,255,0) 23px),
    radial-gradient(circle at 86% 64%, rgba(255,255,255,.10) 0 30px, rgba(255,255,255,0) 31px),
    radial-gradient(circle at 68% 16%, rgba(255,255,255,.08) 0 14px, rgba(255,255,255,0) 15px);
  filter: blur(6px);
  pointer-events: none;
}
.cta-band__inner {
  position: relative; z-index: 1;
  max-width: 720px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-6);
}
.cta-band .eyebrow { color: var(--dark-muted); justify-content: center; }
.cta-band .eyebrow::before { background: var(--accent); }
.cta-band h2 { color: var(--dark-text); max-width: 20ch; font-weight: 250; }
.cta-band h2 em { color: #D9C39B; font-weight: 400; }
.cta-band__body { color: var(--dark-muted); font-size: var(--fs-lede); line-height: 1.62; max-width: 52ch; }
.cta-band .btn { margin-top: var(--sp-2); }

@media (max-width: 767px) { .cta-band { padding-block: 76px; } }

/* ---------- FOOTER ---------- */
.footer {
  background: var(--dark-bg-2);
  color: var(--dark-text);
  padding: 80px 0 26px;
}
.footer .nav__brand { color: var(--dark-text); }
.footer .nav__brand-mark { border-color: rgba(255,255,255,.35); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--sp-10) var(--sp-8);
}
.footer__col h4 {
  color: var(--dark-text); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tr-label);
  margin-bottom: var(--sp-5);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__col a, .footer__col p, .footer__col li {
  color: var(--dark-muted); font-size: 13.5px; line-height: 1.62;
}
.footer__col a:hover { color: var(--dark-text); }
.footer__brand-lead { color: var(--dark-muted); margin-top: var(--sp-5); max-width: 32ch; }
.footer__bottom {
  margin-top: 64px; padding-top: 22px;
  border-top: 1px solid rgba(242,245,247,.1);
  display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  font-family: var(--font-label); font-size: 10px; font-weight: 600;
  color: var(--dark-muted); letter-spacing: var(--tr-label); text-transform: uppercase;
}
@media (max-width: 1023px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- FORM ---------- */
.form-card {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.72));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 48px;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: var(--shadow-2), var(--glass-edge);
  backdrop-filter: blur(10px);
}
@media (max-width: 639px) { .form-card { padding: 26px 20px; } }
.form__row { display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; margin-bottom: var(--sp-4); }
.form__row--single { grid-template-columns: 1fr; }
@media (max-width: 639px) { .form__row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--font-label);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--text-muted);
}
.field input, .field select, .field textarea {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border-radius: var(--r-input);
  border: 1px solid var(--border-strong);
  background: var(--bg-pure);
  color: var(--text-primary);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { height: auto; padding: 13px 14px; min-height: 150px; resize: vertical; line-height: 1.62; }
.field select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23545E68' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text-muted); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--focus-ring);
}
.field .helper { font-size: 12.5px; color: var(--text-muted); }
.field .error { font-size: 12.5px; color: var(--error); display: none; align-items: center; gap: 5px; }
.field[data-error="true"] input,
.field[data-error="true"] select,
.field[data-error="true"] textarea { border-color: var(--error); }
.field[data-error="true"] .error { display: inline-flex; }
.field[data-error="true"] .error::before { content: "⚠"; }

.checks { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-secondary); }
.check input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--text-primary); }

.form__submit-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.form__submit-row .privacy { font-size: 12.5px; color: var(--text-muted); max-width: 40ch; }
.form-success { display: none; text-align: center; padding: var(--sp-10) var(--sp-6); }
.form-success svg { width: 52px; height: 52px; color: var(--success); margin: 0 auto var(--sp-5); }
.form-success h3 { margin-bottom: var(--sp-3); }
.form-success p { color: var(--text-secondary); max-width: 42ch; margin: 0 auto; }
.form-card[data-state="success"] .form-body { display: none; }
.form-card[data-state="success"] .form-success { display: block; }

/* ---------- PAGE HEADER ---------- */
.page-header {
  position: relative; overflow: hidden;
  padding-block: clamp(72px, 8vw, 112px) clamp(56px, 6vw, 80px);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(80% 70% at 85% -15%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #F9FAFB 0%, #EDF1F4 100%);
}
.page-header::before {
  content: "";
  position: absolute; top: 12%; right: 12%;
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.9), rgba(255,255,255,.12) 62%, rgba(255,255,255,0) 72%);
  pointer-events: none;
}
.page-header__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--sp-5); max-width: 820px; }
.page-header__inner > * { margin: 0; }
.page-header h1 { line-height: 1.06; }
.page-header--center .page-header__inner { align-items: center; text-align: center; margin-inline: auto; }
.page-header--center .eyebrow { justify-content: center; }

/* ---------- MISC ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 88px);
  align-items: start;
}
@media (max-width: 1023px) { .two-col { grid-template-columns: 1fr; gap: var(--sp-10); } }

.list-clean { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.list-clean li {
  padding: var(--sp-3) 0 var(--sp-3) 30px;
  position: relative;
  color: var(--text-secondary); line-height: 1.62;
  border-bottom: 1px solid var(--border);
}
.list-clean li:first-child { border-top: 1px solid var(--border); }
.list-clean li::before {
  content: "";
  position: absolute; left: 0; top: 22px;
  width: 16px; height: 1px; background: var(--accent);
}

.mini-process {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3);
}
.mini-process__step {
  padding: var(--sp-6) var(--sp-5);
  background: var(--bg-pure); border: 1px solid var(--border);
  border-radius: var(--r-card);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mini-process__step:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.mini-process__num {
  font-family: var(--font-label); font-size: 10px; font-weight: 600;
  color: var(--accent-strong); letter-spacing: 0.16em;
}
.mini-process__title { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
@media (max-width: 1023px) { .mini-process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .mini-process { grid-template-columns: 1fr; } }

.stat-line {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-label);
  color: var(--text-muted);
  font-size: 10px; font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}
.stat-line::before { content: ""; width: 22px; height: 1px; background: var(--accent); flex: none; }

/* Pull-out statement */
.pullquote {
  font-size: clamp(1.25rem, 1.1vw + 1.05rem, 1.625rem);
  font-weight: 250;
  line-height: 1.45;
  letter-spacing: -0.022em;
  color: var(--text-primary);
  border-left: 1px solid var(--accent);
  padding-left: var(--sp-6);
  max-width: 52ch;
}

/* ---------- TWEAKS PANEL (design-tool only — remove in production) ---------- */
.tweaks {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 300px;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-3);
  padding: 20px;
  display: none;
  backdrop-filter: blur(12px);
}
.tweaks[data-active="true"] { display: block; }
.tweaks__title {
  font-family: var(--font-label);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tr-label);
  color: var(--text-primary);
  margin-bottom: var(--sp-4);
  display: flex; align-items: center; justify-content: space-between;
}
.tweaks__row { display: flex; flex-direction: column; gap: 9px; margin-bottom: var(--sp-4); }
.tweaks__row:last-child { margin-bottom: 0; }
.tweaks__label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.tweaks__swatches { display: flex; gap: 8px; }
.tweaks .swatch {
  width: 32px; height: 32px; border-radius: var(--r-input);
  border: 2px solid transparent; cursor: pointer;
  background: var(--sw); position: relative;
  box-shadow: none;
  transition: transform var(--dur) var(--ease);
}

.tweaks .swatch[aria-pressed="true"] { border-color: var(--text-primary); transform: scale(1.08); }
.toggle {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
  font-size: 13px; color: var(--text-secondary);
}
.toggle input { width: 16px; height: 16px; accent-color: var(--text-primary); }

/* ---------------------------------------------------------------
   Texture film — full-bleed concept band. The reference film the
   Texture Library is read off, used as atmosphere rather than proof.
   Ambient: plays only while on screen, never under reduced motion.
   --------------------------------------------------------------- */
.filmband {
  position: relative;
  background: var(--bg);
  padding: 0;
}
.filmband__stage {
  position: relative;
  width: 100%;
  /* Source is 1920x1080 — follow it so the frame is not cropped.
     max-height keeps the band from swallowing a short viewport. */
  aspect-ratio: 16 / 9;
  max-height: 92vh;
  overflow: hidden;
  background: var(--bg-alt);
}
.filmband__video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Melts the film into the page ground instead of cutting a hard rectangle */
.filmband__veil {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--bg) 0%, rgba(247,248,249,0) 14%,
                    rgba(247,248,249,0) 86%, var(--bg) 100%),
    linear-gradient(to right, rgba(247,248,249,.5) 0%, rgba(247,248,249,0) 18%,
                    rgba(247,248,249,0) 82%, rgba(247,248,249,.5) 100%);
}

/* Hairline corner marks — the only type on the band */
.filmband__mark {
  position: absolute; top: var(--sp-8);
  margin: 0;
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-label);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--text-primary);
  mix-blend-mode: multiply;
}
.filmband__mark--a { left: var(--container-pad); }
.filmband__mark--b { right: var(--container-pad); color: var(--text-muted); }

/* Play / pause — hairline glass chip */
.filmband__toggle {
  position: absolute; left: var(--container-pad); bottom: var(--sp-8);
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: 8px 14px 8px 12px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-input);
  background: rgba(16,21,26,.44);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-label);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.filmband__toggle:hover { background: rgba(16,21,26,.62); }
.filmband__toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.filmband__toggle-icon {
  width: 0; height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
}
.filmband__toggle[aria-pressed="true"] .filmband__toggle-icon {
  width: 8px; height: 10px;
  border: 0;
  background: linear-gradient(to right, currentColor 0 3px, transparent 3px 5px, currentColor 5px 8px);
}

@media (max-width: 720px) {
  .filmband__stage { max-height: 70vh; }
  .filmband__mark { top: var(--sp-5); }
  .filmband__toggle { bottom: var(--sp-5); }
}