/*
Theme Name:   Aveya (Layerly)
Template:     layerly-base
Version:      1.0.0
Layerly Site: aveya-layerly-dev
Description:  Per-site theme for Aveya. Holds ONLY this site's own CSS, bespoke sections and page templates. The framework lives in the parent and is updated fleet-wide — never copy a framework file in here without recording it as a fork.
*/

/* Per-site tokens and CSS below. Override the NUMBERED tokens; never edit the framework's own table. */
:root {
    /* Aveya brand tokens — carried from the pre-migration style.css :root table, where they
       were edited IN PLACE and therefore carry no marker of their own (runbook step 6). */
    --color-1: #FFFFFF;
    --color-2: #F6F3EB;
    --color-3: #280905;
    --color-4: #E6501B;
    --color-5: rgba(2,2,2,.6);
    --color-6: rgba(2,2,2,.4);
    --color-7: #020202;
    --color-8: #740A03;
    --color-bg: var(--color-2);
    --color-border: rgba(2,2,2,.12);
    --color-primary: var(--color-4);
    --color-surface: #FFFFFF;
    --color-text: #020202;
    --color-text-muted: #280905;
    --font-1: 'Libre Franklin', sans-serif;
    --font-2: 'Bricolage Grotesque', sans-serif;
    --font-body: var(--font-1);
    --weight-semibold: 600;
}

/* ── Per-site CSS, carried verbatim from the pre-migration style.css (line 1073 onward).
   Every block below was appended by a build run and is marked with its own date. ── */

/* Layerly — Aveya design tokens — colors + fonts from Figma — 2026-07-23 21:57:30 */



/* Layerly — Bespoke section CSS for Aveya home page — hero, text-intro, showcase, material-grid, stone-picker, pillars, app-showcase, plus feature_blocks/cta_banner knob overrides — 2026-07-23 22:04:08 */
/* ════════════════════════════════════════════════════════════════════
   AVEYA — bespoke section families (home page)
   ════════════════════════════════════════════════════════════════════ */

/* ── section-headers/centered-divider — heading + muted subheading + a
   short vertical divider line beneath. Recurring "chapter head" motif. ── */
.section-head--divider { text-align: center; margin-bottom: var(--space-xl); }
.section-head--divider .section-head__inner { max-width: 620px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-xl); }
.section-head--divider .section-head__heading {
    font-family: var(--font-2);
    font-weight: var(--weight-med);
    font-size: var(--text-h1);
    line-height: 1.05;
    color: var(--color-text);
    margin: 0;
}
.section-head--divider .section-head__sub {
    font-family: var(--font-1);
    font-size: var(--text-sm);
    color: var(--color-primary);
    max-width: 300px;
    margin: 0;
}
.section-head--divider .section-head__divider {
    width: 1px;
    height: 80px;
    background: var(--color-6);
    display: block;
}

/* ── heroes/inset-overlay — rounded inset image, cream headline overlaid
   bottom, CTA + companion line split bottom-left / bottom-right. ── */
.hero--inset-overlay {
  padding-block: var(--space-xl);
  padding: var(--space-lg) 40px;
}
.hero--inset-overlay .hero__frame {
  position: relative;
  overflow: hidden;
  background: var(--color-1);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-2);
  aspect-ratio: 1360 / 752;
  min-height: 560px;
  margin-inline: 0;
  /* The shared .hero__frame (line ~786) carries the heroes/centered treatment:
     clamp() padding, align-items:center and text-align:center. None of it
     belongs here — the photo is the fill, the overlay owns padding+alignment. */
  padding: 0;
  align-items: stretch;
  text-align: left;
  /* Blend-group root. The overlay's ::before multiplies with the photo, and
     both are children of this element, so the group has to be here. Also
     stops the multiply escaping onto the dark page ground behind the card. */
  isolation: isolate;
}
.hero--inset-overlay .hero__media { position: absolute; inset: 0; margin: 0; }
.hero--inset-overlay .hero__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hero--inset-overlay .hero__title {
  font-family: var(--font-2);
  font-size: 64px;
  line-height: 58px;
  font-weight: 500;
  /* Figma 6001:1503 is #FFFFFF. With the gradient now multiplying into the
     photo the ink sits on a darkened image rather than the flat opaque cream,
     so white is both the design value and legible. */
  color: var(--color-3);
  max-width: 646px;
  margin: 0;
  text-align: left;
}
.hero--inset-overlay .hero__bottom-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-lg);
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: var(--space-md);
}

/* Hero responsive. The Figma frame is desktop-only (1440) and its title is a
   fixed 64px/58px pair, so it overflows the card badly below ~900px.
   Scale type + padding down; the desktop values above are untouched.
   NOTE: at-rules must go through edit_file — write_css strips the @media
   wrapper and leaks these out as global rules. */
@media (max-width: 1023px) {
  .hero--inset-overlay { padding: var(--space-lg); }
  .hero--inset-overlay .hero__overlay { padding: var(--space-xl); }
  .hero--inset-overlay .hero__title {
    font-size: clamp(32px, 6vw, 56px);
    line-height: 1.02;
    max-width: 100%;
  }
  .hero--inset-overlay .hero__subtitle { max-width: 100%; }
}

@media (max-width: 767px) {
  .hero--inset-overlay { padding: var(--space-md); }
  .hero--inset-overlay .hero__frame {
    aspect-ratio: auto;
    min-height: 520px;
  }
  .hero--inset-overlay .hero__overlay {
    padding: var(--space-lg);
    justify-content: flex-end;
    background: none;
  }
  /* The cream stop sits left at 270deg; on a narrow card the text spans the
     full width, so fade bottom-up instead. Stays on ::before so it keeps
     multiplying into the photo rather than flattening over the text. */
  .hero--inset-overlay .hero__overlay::before {
    background: linear-gradient(0deg, #D8C3B0 0%, #D8C3B0 55%, rgba(216, 195, 176, 0) 100%);
  }
  .hero--inset-overlay .hero__title {
    font-size: clamp(30px, 8.5vw, 40px);
    line-height: 1.04;
  }
  .hero--inset-overlay .hero__subtitle {
    font-size: var(--text-md);
    line-height: 1.45;
  }
}
.hero--inset-overlay .hero__cta {
    background: var(--color-4); color: var(--color-1);
    font-family: var(--font-1); font-weight: var(--weight-semibold, 600);
    font-size: var(--text-md); text-transform: none; letter-spacing: .04em;
    padding: var(--space-md) var(--space-xl); border-radius: var(--radius-md);
    white-space: nowrap; text-decoration: none;
}
.hero--inset-overlay .hero__subtitle {
  font-family: var(--font-1);
  font-size: 18px;
  line-height: 25px;
  font-weight: 400;
  /* Figma 6001:1504 is #FFFFFF — see the title note above. */
  color: var(--color-3);
  max-width: 330px;
  flex: 0 0 auto;
  text-align: left;
  margin: 0;
}
@media (max-width: 767px) {
    .hero--inset-overlay .hero__bottom-row { flex-direction: column; align-items: flex-start; }
    .hero--inset-overlay .hero__subtitle { text-align: left; }
}

/* ── text-intros/quote-divider — eyebrow, divider line, large serif quote,
   supporting body text. Centered narrow column. ── */
.text-intro {
  padding-block: var(--space-xxl);
  padding-left: clamp(20px, 8.4vw, 120px);
  padding-right: clamp(20px, 8.4vw, 120px);
}
.text-intro__inner { max-width: 868px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); text-align: center; }
.text-intro__eyebrow { font-family: var(--font-1); font-size: var(--text-sm); color: var(--color-primary); margin: 0; max-width: 320px; }
.text-intro__divider { width: 1px; height: 80px; background: var(--color-6); display: block; }
.text-intro__quote { font-family: var(--font-1); font-size: var(--text-h3); line-height: 1.2; color: var(--color-primary); margin: 0; }
.text-intro__body { font-family: var(--font-1); font-size: var(--text-md); line-height: 1.4; color: var(--color-text); margin: 0; max-width: 800px; }

/* ── showcase/dual-mode ("states") — two images side by side, labeled
   tabs beneath (active = dark), then a quote + body + CTA below. ── */
.showcase--dual-mode { padding-block: var(--space-xxl); }
.showcase__images { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-md); }
.showcase__img { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 684/800; }
.showcase__img img { width: 100%; height: 100%; object-fit: cover; }
.showcase__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.showcase__tab {
    text-align: center; padding: var(--space-sm) 0; border-radius: var(--radius-md);
    font-family: var(--font-2); font-weight: var(--weight-semibold, 600); font-size: var(--text-xl);
    background: var(--color-6); color: var(--color-7);
}
.showcase__tab--active {
  background: var(--color-7);
  color: var(--color-6);
}
.showcase__body { max-width: 956px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; gap: var(--space-md); }
.showcase__quote { font-family: var(--font-1); font-size: var(--text-h3); line-height: 1.2; color: var(--color-primary); margin: 0; }
.showcase__text { font-family: var(--font-1); font-size: var(--text-md); color: var(--color-text); margin: 0 0 var(--space-md); }
.showcase__cta { display: flex; justify-content: center; }

/* ── feature-grids/material-list ("materials") — intro line + a
   bordered 3×2 grid of material items with a circular icon slot. ── */
.material-grid { padding-block: var(--space-xxl); }
.material-grid__intro { max-width: 454px; margin: 0 auto var(--space-xxl); text-align: center; font-family: var(--font-1); font-size: var(--text-lg); line-height: 1.4; color: var(--color-text); }
.material-grid__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl) var(--space-xl); max-width: 1200px; margin-inline: auto; }
.material-grid__item { border-top: 1px solid var(--color-6); padding-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xl); justify-content: space-between; min-height: 160px; }
.material-grid__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); }
.material-grid__title { font-family: var(--font-2); font-weight: var(--weight-reg); font-size: var(--text-h3); line-height: 1.1; color: var(--color-text); margin: 0; white-space: pre-line; }
.material-grid__icon { width: 72px; height: 70px; border: 2px solid var(--color-6); border-radius: var(--radius-lg); flex-shrink: 0; }
.material-grid__desc { font-family: var(--font-1); font-size: var(--text-sm); color: var(--color-primary); margin: 0; }
@media (max-width: 900px) { .material-grid__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .material-grid__list { grid-template-columns: 1fr; } }

/* ── product-gallery/stone-picker ("stones") — quote + bold line, a row
   of round gemstone swatches, CTA below. ── */
.stone-picker { padding-block: var(--space-xxl); }
.stone-picker__intro { max-width: 634px; margin: 0 auto var(--space-xl); text-align: center; display: flex; flex-direction: column; gap: var(--space-md); }
.stone-picker__lede { font-family: var(--font-1); font-size: var(--text-md); color: var(--color-text); margin: 0; }
.stone-picker__cta-line { font-family: var(--font-1); font-weight: var(--weight-bold); font-size: 24px; color: var(--color-text); margin: 0; }
.stone-picker__list { list-style: none; margin: 0 0 var(--space-xl); padding: var(--space-lg) 0; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-lg); }
.stone-picker__stone { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-lg); width: 221px; }
.stone-picker__swatch { width: 133px; height: 148px; border-radius: var(--radius-full); overflow: hidden; box-shadow: 0 12px 28px rgba(140,122,105,.3); }
.stone-picker__swatch img { width: 100%; height: 100%; object-fit: cover; }

.stone-picker__cta { display: flex; justify-content: center; }

/* ── pillars/stacked-cards ("pillars") — a centered column of large
   colored feature cards, each a big heading + supporting line. ── */
.pillars--stacked { padding-block: var(--space-xxl); }
.pillars__list { list-style: none; margin: 0; padding: 0; max-width: 440px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-lg); }

.pillars__title {
  font-family: var(--font-2);
  font-weight: var(--weight-reg);
  font-size: var(--text-h1);
  line-height: 1;
  margin: 0;
  color: var(--color-7);
}
.pillars__desc {
  font-family: var(--font-1);
  font-size: var(--text-lg);
  line-height: 1.4;
  margin: 0;
  color: var(--color-on-surface);
}

/* ── app-showcase/phone-mockup ("one tap") — a rounded content card:
   text left, phone mockup image right; CTA button below the card. ── */
.app-showcase { padding-block: var(--space-xxl); }
.app-showcase__card {
    max-width: 1200px; margin: 0 auto var(--space-xl);
    background: var(--color-surface); border-radius: var(--radius-lg);
    display: grid; grid-template-columns: 1fr 220px 1fr; align-items: center;
    padding: var(--space-xl) var(--space-xxl); gap: var(--space-xl);
}
.app-showcase__text { font-family: var(--font-2); font-weight: var(--weight-reg); font-size: var(--text-h2); line-height: 1.1; color: var(--color-text); margin: 0; }
.app-showcase__caption { font-family: var(--font-1); font-size: var(--text-md); line-height: 1.4; color: var(--color-text); margin: 0; }
.app-showcase__media { display: flex; justify-content: center; align-items: center; background: var(--color-6); border-radius: var(--radius-lg); padding: var(--space-lg); align-self: stretch; }
.app-showcase__media img { max-width: 260px; width: 100%; height: auto; }
.app-showcase__cta { display: flex; justify-content: center; }
@media (max-width: 767px) {
    .app-showcase__card { grid-template-columns: 1fr; text-align: center; }
}

/* ── feature_blocks (composed component) — add the divider-line under
   the section head to match the Figma "chapter head" motif on this page,
   without touching the locked component file. ── */
.section--feature_blocks .section-head--center .section-head__inner::after {
    content: ''; display: block; width: 1px; height: 80px; background: var(--color-6);
    margin: var(--space-lg) auto 0;
}
.section--feature_blocks .section-head__heading { font-family: var(--font-2); font-weight: var(--weight-med); font-size: var(--text-h1); line-height: 1.05; }
.section--feature_blocks .feature-blocks__content { background: var(--color-surface); border-radius: var(--radius-md); }
.section--feature_blocks .feature-blocks__title { font-family: var(--font-2); font-weight: var(--weight-reg); font-size: var(--text-h3); color: var(--color-primary); text-align: center; }
.section--feature_blocks .feature-blocks__body { font-family: var(--font-1); text-align: center; }
.section--feature_blocks .feature-blocks__body p:last-child { font-weight: var(--weight-bold); color: var(--color-text); }

/* ── cta_banner (composed component) — full-bleed image + dark overlay,
   centered cream text, single primary button. ── */
.section--cta_banner.cta-banner { color: var(--color-4); }
.section--cta_banner .cta-banner__inner { flex-direction: column; text-align: center; justify-content: center; padding-block: var(--space-xxl); }
.section--cta_banner .cta-banner__heading { font-family: var(--font-2); font-weight: var(--weight-med); font-size: var(--text-h1); color: var(--color-4); max-width: 768px; margin-inline: auto; }
.section--cta_banner .cta-banner__body { font-family: var(--font-1); color: var(--color-3); max-width: 634px; margin-inline: auto; opacity: 1; }
.section--cta_banner .cta-banner__ctas { justify-content: center; margin-top: var(--space-md); }
.section--cta_banner .btn--primary { background: var(--color-3); color: var(--color-1); text-transform: none; font-family: var(--font-2); letter-spacing: .04em; }



/* Layerly — Style the new showcase__mode article card (wear_mode CPT loop) — 2026-07-23 22:10:34 */
/* Wear-mode card (showcase/dual-mode CPT loop) — image + its tab label stacked */
.showcase__mode { display: flex; flex-direction: column; gap: var(--space-md); }



/* Layerly — Real-image CTA banner background + overlay styling — 2026-07-23 22:10:43 */
/* ── ctas/photo-banner — real <img> full-bleed background + overlay ── */
.cta-banner--photo { position: relative; overflow: hidden; padding-block: var(--space-xl); }
.cta-banner--photo .cta-banner__bg { position: absolute; inset: 0; z-index: 0; }
.cta-banner--photo .cta-banner__bg-img { width: 100%; height: 100%; object-fit: cover; }
.cta-banner--photo .cta-banner__overlay { position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.45); pointer-events: none; }
.cta-banner--photo .cta-banner__inner { position: relative; z-index: 2; }



/* Layerly — Fix button weight (600 not 700) sitewide, muted-text color alias to match Figma's tan eyebrow color, and feature_blocks body copy back to black — 2026-07-23 22:12:09 */
/* Font-weight token used by Figma's buttons/tab labels (600, distinct from the t-shirt bold=700) */
:root {
  --color-success: #059669;
  --color-error: #DC2626;
  --color-warning: #F59E0B;
  --color-accent: var(--color-6);
  --color-highlight: var(--color-7);
  --font-3: system-ui, -apple-system, sans-serif;
  --font-subheading: var(--font-3);
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: clamp(28px, 4vw, 40px);
  --space-xxl: clamp(48px, 7vw, 80px);
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 28px;
  --text-h3: clamp(22px, 3vw, 32px);
  --text-h2: clamp(30px, 4vw, 44px);
  --text-h1: clamp(38px, 5.5vw, 64px);
  --weight-reg: 400;
  --weight-med: 500;
  --weight-bold: 700;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --sh-sm: 0 1px 2px rgba(0,0,0,.08);
  --sh-md: 0 4px 12px rgba(0,0,0,.12);
  --sh-lg: 0 12px 32px rgba(0,0,0,.18);
  --container-max: 1200px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --font-2: 'Bricolage Grotesque', sans-serif;
  --weight-semibold: 600;
  --color-1: #FFFFFF;
  --color-2: #F6F3EB;
  --color-3: #280905;
  --color-4: #E6501B;
  --color-5: rgba(2,2,2,.6);
  --color-6: rgba(2,2,2,.4);
  --color-7: #020202;
  --color-8: #740A03;
  --color-text: #020202;
  --color-text-muted: #280905;
  --color-bg: var(--color-2);
  --color-surface: #FFFFFF;
  --color-primary: var(--color-4);
  --color-border: rgba(2,2,2,.12);
  --font-1: 'Libre Franklin', sans-serif;
  --font-display: var(--font-1);
  --font-body: var(--font-1);
}

.section--feature_blocks .feature-blocks__body { color: var(--color-text); }



/* Layerly — Fix remaining minor type deltas: button font-family, feature_blocks subheading + bold line sizes — 2026-07-23 22:12:43 */
/* Buttons use the display font (Bricolage), not the body serif */

.section--feature_blocks .section-head__sub { font-size: 14px; }
.section--feature_blocks .feature-blocks__body p:last-child { font-size: 20px; }



/* Layerly — Targeted fix pass: header nav cream bg + dark Shop Aveya CTA, bespoke cream footer with copyright/social pill, spacing increases for features/cta/pillars/one-tap sections toward Figma proportions — 2026-07-23 23:07:12 */
/* FIX 2 — header nav: cream bar matching page bg + dark filled "SHOP AVEYA" CTA */
.nav {
  background: var(--nav-bg);
  color: var(--nav-fg);
  --nav-bg: var(--color-2);
  --nav-fg: var(--color-3);
  --nav-height: 84px;
  --nav-link-weight: var(--weight-med);
  --nav-link-hover: var(--color-primary);
  --nav-gap: var(--space-lg);
}
.nav__list a { padding: var(--space-sm); display: inline-block; }

.nav__cta.btn--primary:hover {
  filter: brightness(1.08);
}

/* FIX 4 — bespoke footer: logo + inline nav row, then a white pill with
   the copyright credit + social icons, matching Figma node 4121:1545 */
.footer { --footer-bg: var(--color-4); --footer-fg: var(--color-text); }
.footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    padding-block: var(--space-xxl) var(--space-lg);
    padding-inline: clamp(var(--space-md), 8vw, 120px);
}
.footer__nav-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }
.footer__logo-text { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--color-text); }
.footer__menu-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.footer__menu-list a { display: inline-block; padding: var(--space-sm); color: var(--color-text-muted); font-family: var(--font-2); font-size: var(--text-md); text-decoration: none; }
.footer__menu-list a:hover { color: var(--color-text); }
.footer__bottom {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
    background: var(--color-3);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    flex-wrap: wrap;
}
.footer__copyright-line .layerly-copyright__line { margin: 0; font-family: var(--font-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.footer__social { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--space-sm); }
.footer__social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--radius-full);
    background: var(--color-text-muted); color: var(--color-3); font-size: var(--text-sm);
}
.footer__social-link:hover { opacity: .85; }
@media (max-width: 600px) {
    .footer__nav-row { flex-direction: column; align-items: flex-start; }
    .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* FIX 5 — section proportions toward Figma height. Fluid clamp()s, not fixed
   desktop px, so mobile spacing still scales down correctly. */
.section--feature_blocks { padding-block: clamp(48px, 8vw, 120px); }
.section--feature_blocks .feature-blocks__row { gap: var(--space-lg); }
.section--feature_blocks .feature-blocks__media { aspect-ratio: 684 / 800; border-radius: var(--radius-lg); overflow: hidden; }
.section--feature_blocks .feature-blocks__media img { width: 100%; height: 100%; object-fit: cover; }
.section--feature_blocks .feature-blocks__content { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-lg); padding: clamp(24px, 4vw, 40px); min-height: clamp(320px, 40vw, 800px); }

.section--cta_banner.cta-banner--photo { min-height: clamp(480px, 55vw, 800px); display: flex; align-items: center; }

.pillars--stacked { padding-block: clamp(48px, 10vw, 120px); }


.app-showcase { padding-block: clamp(60px, 10vw, 120px); }
.app-showcase__card { padding: var(--space-xxl); min-height: clamp(420px, 45vw, 680px); }


/* Layerly — Fix pass 2 — render actual per-item icon inside materials icon circle — 2026-07-24 11:34:48 */
/* FIX PASS 2 — item 4: material icon image sizing (fills the existing circular icon slot) */
.material-grid__icon { display: flex; align-items: center; justify-content: center; }
.material-grid__icon-img { width: 55%; height: 55%; object-fit: contain; display: block; }


/* Layerly — Fix pass 2 — unify primary button padding (16/80 fluid) and color (black/white) sitewide — 2026-07-24 11:34:48 */
/* FIX PASS 2 — item 6: buttons — one consistent primary button spec across the page.
   Figma's button component uses padding 16/80 (fluid via --space-xxl so it scales down on
   mobile instead of forcing an 80px-wide gutter on a 375px screen), radius-md, and a
   black-fill/white-text default — the taupe fill + 16/24 padding some CTAs had was the bug. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  text-decoration: none;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .1s;
  font-family: var(--font-2);
  padding: var(--space-md) var(--space-xxl);
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
}
.btn--primary {
  background: var(--color-primary);
  color: #FFFFFF;
}
.btn--primary:hover {
  filter: brightness(1.12);
}
/* hero's on-photo CTA uses the same button spec, just inverted (cream/black) — align its padding */
.hero--inset-overlay .hero__cta { padding: var(--space-md) var(--space-xxl); }


/* Layerly — Fix pass 2 — per-heading font sizes, tighter H1 line-height, chapter-head gap correction — 2026-07-24 11:34:49 */
/* FIX PASS 2 — item 7: typography — per-heading sizing + line-height + chapter-head spacing.

   "Wear as a Necklace" / "Wear as a Bracelet" (showcase tab labels) are 24px/600 in the
   Figma — smaller than the page's 64px H1s, not a flat 64px everywhere. */
.showcase__tab { font-size: 24px; line-height: 1.21; }

/* H1-scale headings (Bricolage 500, 64px desktop) read with a tighter line-height in the
   Figma (58/64 ≈ 0.906) than the generic h-tag default (1.15) — tighten each occurrence. */
/* Hero title/subtitle removed from this group: Figma 6001:1501 specifies
   58px line-height on the 64px title and 25px on the 18px subtitle, which the
   hero's own rules now set. 0.906 would crush the Baskerville subtitle. */
.section-head--divider .section-head__heading,
.section--feature_blocks .section-head__heading,
.section--cta_banner .cta-banner__heading { line-height: 0.906; }

/* stone-picker bold call-to-browse line: Figma is 24px/700 with line-height 30/24 = 1.25 */
.stone-picker__cta-line { line-height: 1.25; }
.stone-picker__label {
  font-family: var(--font-1);
  font-size: 18px;
  margin: 0;
  line-height: 1.39;
  color: var(--color-7);
}

/* Chapter-head spacing (states/materials/stones/one_tap via section-headers/centered-divider):
   Figma nests a 40px gap (heading→subhead) inside an outer 24px gap (subhead→divider) — our
   single flex gap applied 40px to both. Drop the shared gap to 24px and add the extra 16px
   back onto the heading only, so heading→sub totals 40px while sub→divider stays 24px. */
.section-head--divider .section-head__inner { gap: var(--space-lg); }
.section-head--divider .section-head__heading { margin-bottom: var(--space-md); }
.section--feature_blocks .section-head__heading { margin-bottom: var(--space-xl); }


/* Layerly — Fix pass 2 — desktop full-bleed breakout for hero/states-images/features-row/one-tap-card — 2026-07-24 11:35:07 */
/* FIX PASS 2 — item 1: full-bleed sections. The Figma canvas is 1440 edge-to-edge for the
   hero image, the states image-pair, the features image+card row, and the one-tap card —
   only the surrounding text (headings/quote/body) stays at the ~1200px reading width. Desktop
   only (min-width:1024px) so the current, correct mobile containment is untouched. */
@media (min-width: 1024px) {
    .hero--inset-overlay .hero__frame {
        /* Was a full-bleed escape hatch from when .wrap still capped this
           section at 1200px: it pulled the card out to viewport width with
           margin-left: calc(50% - 50vw + 20px). That cap is now released on
           .hero--inset-overlay > .wrap, so the hatch is redundant — and it
           shifted the card 18px LEFT (50% of the 1204px container - 50vw
           + 20 = -18), making the right gap 57px against a 20px left gap.
           100vw also counts the scrollbar while the container does not, so
           the two sides can never line up. The section's own
           clamp(16px, 3vw, 40px) padding does the insetting now. */
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }
    .showcase--dual-mode .showcase__images {
        width: calc(100vw - 2 * var(--space-lg));
        max-width: calc(100vw - 2 * var(--space-lg));
        margin-left: calc(50% - 50vw + var(--space-lg));
    }
    .section--feature_blocks .feature-blocks__list {
        width: calc(100vw - 2 * var(--space-lg));
        max-width: calc(100vw - 2 * var(--space-lg));
        margin-left: calc(50% - 50vw + var(--space-lg));
    }
    .app-showcase__card {
        width: calc(100vw - 2 * var(--space-lg));
        max-width: calc(100vw - 2 * var(--space-lg));
        margin-left: calc(50% - 50vw + var(--space-lg));
    }
}


/* Layerly — Fix pass 2 — hero overlay space-between distribution + mobile responsiveness (390/768) — 2026-07-24 11:35:08 */
/* FIX PASS 2 — item 9: hero flex distribution + responsiveness.
   Figma's overlay title-frame is SPACE-BETWEEN top-to-bottom (headline pinned to the top,
   the CTA/subtitle row pinned to the bottom) — ours packed both to the bottom (flex-end). */
.hero--inset-overlay .hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  padding: 80px;
  /* Figma 6001:1503/1504 are both align:left. */
  text-align: left;
  /* No background here — the gradient lives on ::before so it can blend with
     the photo WITHOUT blending the text. mix-blend-mode on this element would
     multiply the text too, and white multiplied is identity: the headline
     would disappear entirely.
     NOT isolated: isolation here would make THIS element the blend-group root,
     and since it has no background the ::before gradient would multiply
     against transparency — visually identical to no blend. The photo is a
     SIBLING (.hero__media), so the group must be .hero__frame instead. */
  background: none;
}

/* The gradient overlay as its own blended layer (Figma: gradientOverImage). */
.hero--inset-overlay .hero__overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(216, 195, 176, 0) 0%, #D8C3B0 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

/* Text sits above the blended layer, unblended. */
.hero--inset-overlay .hero__title,
.hero--inset-overlay .hero__subtitle,
.hero--inset-overlay .hero__bottom-row {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
    .hero--inset-overlay .hero__overlay { padding: var(--space-lg) var(--space-lg); }
    .hero--inset-overlay .hero__subtitle { flex: 1 1 auto; max-width: 100%; }
}
@media (max-width: 480px) {
    .hero--inset-overlay .hero__frame { min-height: 340px; }
}


/* Layerly — Fix pass 2 — one-tap: top/bottom text alignment, full-bleed phone image, cream media backdrop — 2026-07-24 11:35:08 */
/* FIX PASS 2 — item 10: "Choose your circle" (one-tap) — top/bottom text alignment matching
   the Figma (left column top-aligned, right column bottom-aligned), the real phone-in-hand
   photo filling its column edge-to-edge, and a cream (not tan) backdrop behind it. */
.app-showcase__card { grid-template-columns: 1fr 220px 1fr; overflow: hidden; }
.app-showcase__text { align-self: flex-start; }
.app-showcase__caption { align-self: flex-end; }
.app-showcase__media { background: transparent; padding: 0; border-radius: 0; }
.app-showcase__media img { width: 100%; height: 100%; max-width: none; object-fit: cover; }

@media (min-width: 1024px) {
    .app-showcase__card { grid-template-columns: 1fr 1fr 1fr; }
}


/* Layerly — Fix pass 2 — closing CTA gets the Figma's inset rounded framing instead of edge-to-edge — 2026-07-24 11:35:09 */
/* FIX PASS 2 — item 11: closing CTA — the Figma band is an INSET rounded photographic card
   (~20px gutter, 16px radius) on the cream page, not a full-bleed edge-to-edge square block. */
.section--cta_banner.cta-banner--photo {
    margin-inline: clamp(12px, 3vw, 20px);
    border-radius: var(--radius-lg);
}


/* Layerly — Fix pass 2 — never-underline Made-by-Layerly credit + center footer content on mobile — 2026-07-24 11:35:09 */
/* FIX PASS 2 — item 12: footer polish.
   (a) "Made by Layerly" must never render underlined on any Layerly site.
   (b) footer content must center on mobile, matching the rest of the site (it was left-aligned). */
.layerly-copyright a,
.layerly-copyright__line a { text-decoration: none; }
.layerly-copyright a:hover,
.layerly-copyright__line a:hover,
.layerly-copyright a:focus-visible,
.layerly-copyright__line a:focus-visible { text-decoration: underline; }

@media (max-width: 600px) {
    .footer__nav-row { align-items: center; text-align: center; justify-content: center; }
    .footer__menu-list { justify-content: center; }
    .footer__bottom { align-items: center; text-align: center; justify-content: center; }
    .footer__social { justify-content: center; }
}


/* Layerly — Fix pass 2 — features: stretch media column to match text column height exactly — 2026-07-24 11:39:39 */
/* FIX PASS 2 — item 8: features media column must match the text column's height exactly
   (stretch both grid columns instead of a fixed aspect-ratio racing a separate min-height). */
.section--feature_blocks .feature-blocks__row { align-items: stretch; }
.section--feature_blocks .feature-blocks__media { aspect-ratio: auto; height: 100%; }
.section--feature_blocks .feature-blocks__media img { height: 100%; object-fit: cover; }


/* Layerly — Fix pass 2 — real fix for hero horizontal overflow on mobile/tablet (aspect-ratio + min-height width derivation bug) — 2026-07-24 11:44:21 */
/* FIX PASS 2 — item 9 (real root cause): below the desktop breakout, hero__frame had
   width:auto with both aspect-ratio AND min-height set — the browser derives width FROM
   the enforced min-height via the ratio (480px * 1.75 = 840px), overflowing a 375px viewport
   horizontally. Pin width so aspect-ratio never drives it wider than the container. */
@media (max-width: 1023px) {
    .hero--inset-overlay .hero__frame { width: 100%; max-width: 100%; }
}


/* Layerly — Buttons use nav-link font-family (--font-1) instead of --font-2, and are never underlined in any state — 2026-07-24 16:34:12 */
/* Buttons: match nav-link font-family (var(--font-1), inherited body font), never underlined */
.btn,
.btn:link,
.btn:visited,
.btn:hover,
.btn:focus,
.btn:active {
    font-family: var(--font-1);
    text-decoration: none;
}

.section--cta_banner .btn--primary,
.nav__cta.btn--primary {
    font-family: var(--font-1);
}


/* Layerly — Make pillars/stacked-cards items sticky under the nav, stacking with a small peek margin as each next card scrolls over the previous — 2026-07-24 16:43:14 */
/* Pillars — sticky stacking cards: each card sticks under the nav, then the
   next card scrolls over it with a small offset "peek" margin, until the
   list container ends (bounding the sticky effect to this section). */
.pillars__item {
  background: var(--color-6);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: clamp(320px, 34vw, 520px);
  position: sticky;
  top: 96px;
  color: var(--color-on-surface);
}
.pillars__item:nth-child(1) { z-index: 1; }
.pillars__item:nth-child(2) { z-index: 2; top: 120px; }
.pillars__item:nth-child(3) { z-index: 3; top: 144px; }
.pillars__item:nth-child(4) { z-index: 4; top: 168px; }
.pillars__item:nth-child(5) { z-index: 5; top: 192px; }
.pillars__item:nth-child(6) { z-index: 6; top: 216px; }


/* Layerly — Widen the stone-picker section's container so all 5 gemstone cards fit on one row on desktop; flex-wrap on .stone-picker__list still reflows to multiple lines on narrower viewports — 2026-07-24 17:05:00 */
.section--stones .wrap { max-width: 1320px; }

/* Layerly — Pillars: TRUE sticky card stack (centred, peeking, tilting) — 2026-07-24
   Supersedes the 16:43 attempt, which set `position:sticky` but left .pillars__list as
   `display:flex; gap:…`. Sticky needs SCROLL RUNWAY: in a flex column each card sits in a
   slot its own height, so it has almost no distance to stay pinned. The layout model — not
   just the position property — has to change. Cards also now pin to the CENTRE, not the nav.
   Desktop-only: on phones the original stacked flow reads better than a 500px pinned card. */
@media (min-width: 900px) {
  .pillars--stacked .pillars__list {
    display: block;                 /* out of flex → normal flow, so sticky has a runway */
    max-width: 560px;
    margin-inline: auto;
  }
  .pillars--stacked .pillars__item {
    position: sticky;
    top: max(96px, calc(50vh - 245px));   /* centre a ~490px card; never slide under the nav */
    margin-bottom: 26vh;                  /* THE RUNWAY — scroll distance between pins */
    transform-origin: 50% 0%;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .14);
  }
  .pillars--stacked .pillars__item:last-child { margin-bottom: 0; }

  /* Each card pins 16px lower than the one before, so a sliver of the card underneath
     stays visible and the stack reads as depth rather than a single swap. */
  .pillars--stacked .pillars__item:nth-child(1) { z-index: 1; }
  .pillars--stacked .pillars__item:nth-child(2) { z-index: 2; top: max(112px, calc(50vh - 229px)); }
  .pillars--stacked .pillars__item:nth-child(3) { z-index: 3; top: max(128px, calc(50vh - 213px)); }
  .pillars--stacked .pillars__item:nth-child(4) { z-index: 4; top: max(144px, calc(50vh - 197px)); }
  .pillars--stacked .pillars__item:nth-child(5) { z-index: 5; top: max(160px, calc(50vh - 181px)); }
  .pillars--stacked .pillars__item:nth-child(6) { z-index: 6; top: max(176px, calc(50vh - 165px)); }

  /* Scroll-driven tilt: as a card gets covered it rotates a touch and eases back.
     Native CSS scroll-driven animation — no JS, so nothing to enqueue and nothing to break. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .pillars--stacked .pillars__item {
        animation: layerly-pillar-tilt linear both;
        animation-timeline: view();
        animation-range: contain 35% exit 100%;
      }
      @keyframes layerly-pillar-tilt {
        from { transform: rotate(0deg)    scale(1);   }
        to   { transform: rotate(-2.5deg) scale(.94); }
      }
    }
  }
  /* Where scroll-driven animation isn't supported, a static alternating tilt still reads
     as a hand-placed stack rather than a flat pile. */
  @supports not (animation-timeline: view()) {
    .pillars--stacked .pillars__item:nth-child(odd)  { transform: rotate(-1.2deg); }
    .pillars--stacked .pillars__item:nth-child(even) { transform: rotate(1.2deg);  }
  }
}

/* Accessibility floor: motion off means NO pinning and NO transform — plain document flow. */
@media (prefers-reduced-motion: reduce) {
  .pillars--stacked .pillars__list { display: flex; flex-direction: column; gap: var(--space-lg); }
  .pillars--stacked .pillars__item { position: static; transform: none; animation: none; margin-bottom: 0; }
}

/* Layerly — ROOT CAUSE of the sticky stack not pinning — 2026-07-24
   layerly-base sets `.section { overflow: hidden }` ("keep decorations/dividers contained").
   `overflow: hidden` makes the element a SCROLL CONTAINER, and a scroll container becomes the
   sticky containing block for its descendants — so the cards had zero travel and slid straight
   past their `top`. Verified by scrolling: every card moved ~645px per step, never pinning.
   `overflow: clip` clips identically but does NOT create a scroll container, so sticky works.
   The `visible` line is the fallback for engines without `clip` — both permit sticky. */
@media (min-width: 900px) {
  .section.pillars--stacked { overflow: visible; overflow: clip; }
}


/* Layerly — CSS for the how-it-works page's 6 bespoke sections + knob overrides for the composed process-steps/numbered and disclosures/accordion catalog parts — 2026-07-24 18:43:42 */

/* ════════════════════════════════════════════════════════════════════
   HOW-IT-WORKS PAGE — bespoke section families
   ════════════════════════════════════════════════════════════════════ */

/* ── heroes/statement-card ── */
.hero--statement-card { padding-block: var(--space-xl); }
.hero__frame {
    margin-inline: var(--space-lg);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: clamp(40px, 6vw, 80px) clamp(24px, 8vw, 96px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    text-align: center;
}
.hero--statement-card .hero__title-block { display: flex; flex-direction: column; align-items: center; gap: var(--space-xl); max-width: 610px; }
.hero--statement-card .hero__title {
    font-family: var(--font-2); font-weight: var(--weight-med);
    font-size: var(--text-h1); line-height: 0.906; color: var(--color-text); margin: 0;
}
.hero--statement-card .hero__subtitle { font-family: var(--font-1); font-size: var(--text-sm); color: var(--color-primary); max-width: 350px; margin: 0; }
.hero--statement-card .hero__divider { width: 1px; height: 80px; background: var(--color-6); display: block; }
.hero--statement-card .hero__statement { font-family: var(--font-1); font-size: var(--text-h3); line-height: 1.19; color: var(--color-primary); max-width: 840px; margin: 0; }
@media (max-width: 600px) { .hero__frame { margin-inline: var(--space-md); } }

/* ── text-blocks/twin-paragraph ── */
.text-block--twin { padding-block: var(--space-xxl); }
.text-block__inner { max-width: 732px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-lg); text-align: center; }
.text-block__body { font-family: var(--font-1); font-size: var(--text-md); line-height: 1.4; color: var(--color-text); margin: 0; }
.text-block__lede { font-family: var(--font-1); font-weight: var(--weight-bold); font-size: var(--text-lg); line-height: 1.4; color: var(--color-primary); max-width: 576px; margin: 0 auto; }

/* ── process-steps/numbered — knob overrides for this page's card look ── */
.section--process_steps .section-head--center .section-head__inner::after {
    content: ''; display: block; width: 1px; height: 80px; background: var(--color-6);
    margin: var(--space-lg) auto 0;
}
.section--process_steps .section-head__heading { font-family: var(--font-2); font-weight: var(--weight-med); font-size: var(--text-h1); line-height: 0.906; }
.section--process_steps .process-steps__list { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); counter-reset: none; }
.section--process_steps .process-steps__item {
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    gap: var(--space-lg); text-align: center;
    background: transparent; border: 1px solid var(--color-primary); border-radius: var(--radius-lg);
    padding: var(--space-xl); min-height: clamp(420px, 40vw, 600px);
}
.section--process_steps .process-steps__number { font-family: var(--font-2); font-weight: var(--weight-reg); font-size: var(--text-h2); line-height: 1; opacity: 1; color: var(--color-text); margin: 0; }
.section--process_steps .process-steps__title { font-family: var(--font-2); font-weight: var(--weight-reg); font-size: var(--text-h3); color: var(--color-primary); margin: var(--space-sm) 0 0; }
.section--process_steps .process-steps__desc { font-family: var(--font-1); font-size: var(--text-md); line-height: 1.4; color: var(--color-text); margin: 0; }
@media (max-width: 900px) { .section--process_steps .process-steps__list { grid-template-columns: 1fr; } }

/* ── app-showcase/checklist-split ── */
.app-showcase--checklist .app-showcase__grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-xl); align-items: stretch;
    background: var(--color-surface); border-radius: var(--radius-lg);
    padding: var(--space-xxl) var(--space-xl); margin-bottom: var(--space-xl);
}
.app-showcase--checklist .app-showcase__col--left { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-xl); text-align: left; }
.app-showcase--checklist .app-showcase__col--right {
  display: flex;
  text-align: left;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}
.app-showcase--checklist .app-showcase__col--media { display: flex; align-items: center; justify-content: center; }
.app-showcase--checklist .app-showcase__col--media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.app-showcase--checklist .app-showcase__heading { font-family: var(--font-2); font-weight: var(--weight-reg); font-size: var(--text-h2); line-height: 0.94; color: var(--color-text); margin: 0; }
.app-showcase--checklist .app-showcase__checklist-wrap { display: flex; flex-direction: column; gap: var(--space-lg); }
.app-showcase--checklist .app-showcase__checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.app-showcase--checklist .app-showcase__checklist-item {
    display: flex; align-items: center; gap: var(--space-sm); padding-block: var(--space-sm);
    border-bottom: 1px solid var(--color-6); font-family: var(--font-2); font-size: var(--text-sm); color: var(--color-text);
}
.app-showcase--checklist .app-showcase__check { color: var(--color-primary); }
.app-showcase--checklist .app-showcase__caption-bold { font-family: var(--font-1); font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--color-text); margin: 0; }
.app-showcase--checklist .app-showcase__body { font-family: var(--font-1); font-size: var(--text-lg); line-height: 1.4; color: var(--color-text); margin: 0; }
@media (max-width: 900px) {
    .app-showcase--checklist .app-showcase__grid { grid-template-columns: 1fr; }
    .app-showcase--checklist .app-showcase__col--right { align-items: flex-start; }
}

/* ── feature-highlights/clasp-detail ── */
.feature-highlight--clasp { padding-block: var(--space-xxl); }
.feature-highlight__inner { max-width: 956px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-xxl); text-align: center; }
.feature-highlight__lede { display: flex; flex-direction: column; gap: var(--space-lg); align-items: center; }
.feature-highlight__lede-quote { font-family: var(--font-1); font-size: var(--text-h3); line-height: 1.19; color: var(--color-primary); margin: 0; max-width: 956px; }
.feature-highlight__lede-body { font-family: var(--font-1); font-size: var(--text-md); line-height: 1.4; color: var(--color-text); margin: 0; max-width: 548px; }
.feature-highlight__pillar { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-xxl); display: flex; align-items: center; justify-content: center; min-height: 220px; width: 100%; max-width: 440px; }
.feature-highlight__pillar-text { font-family: var(--font-2); font-weight: var(--weight-reg); font-size: var(--text-h3); line-height: 1.1; color: var(--color-primary); margin: 0; max-width: 280px; }
.feature-highlight__details { display: flex; flex-direction: column; gap: var(--space-xl); align-items: center; }
.feature-highlight__details-intro { font-family: var(--font-1); font-size: var(--text-lg); line-height: 1.4; color: var(--color-text); margin: 0; max-width: 516px; }
.feature-highlight__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-lg); }
.feature-highlight__tag { border: none; border-top: 1px solid var(--color-primary); border-bottom: 1px solid var(--color-primary); border-radius: 0; padding: var(--space-md) var(--space-lg); font-family: var(--font-2); font-weight: var(--weight-semibold); font-size: var(--text-xl); color: var(--color-text); }
.feature-highlight__closing { font-family: var(--font-1); font-size: var(--text-h3); line-height: 1.19; color: var(--color-primary); margin: 0; max-width: 550px; }

/* ── split-panels/photo-statement ── */
.split-panel--photo-statement { padding-block: var(--space-xxl); }
.split-panel__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: stretch; margin-bottom: var(--space-xl); }
.split-panel__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 684 / 800; }
.split-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.split-panel__card { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-xl) var(--space-xxl); display: flex; align-items: center; justify-content: center; text-align: center; }
.split-panel__statement {
  font-family: var(--font-2);
  font-weight: var(--weight-reg);
  font-size: var(--text-h2);
  line-height: 1.09;
  margin: 0;
  max-width: 524px;
  color: var(--color-on-surface);
}
.split-panel__closing { font-family: var(--font-1); font-size: var(--text-h3); line-height: 1.19; color: var(--color-primary); text-align: center; max-width: 956px; margin: 0 auto; }
@media (max-width: 900px) { .split-panel__row { grid-template-columns: 1fr; } }

/* ── disclosures/accordion — knob overrides matching this page's card look ── */
.section--disclosures .section-head--center .section-head__inner::after {
    content: ''; display: block; width: 1px; height: 80px; background: var(--color-6);
    margin: var(--space-lg) auto 0;
}
.section--disclosures .section-head__heading { font-family: var(--font-2); font-weight: var(--weight-med); font-size: var(--text-h1); line-height: 0.906; }
.section--disclosures .accordion { border-top: none; display: flex; flex-direction: column; gap: var(--space-md); }
.section--disclosures .accordion__item { background: var(--color-6); border: none; border-radius: var(--radius-lg); overflow: hidden; }
.section--disclosures .accordion__item[open] { background: var(--color-surface); }
.section--disclosures .accordion__summary { padding: var(--space-md) var(--space-lg); font-family: var(--font-1); font-weight: var(--weight-bold); font-size: var(--text-lg); }
.section--disclosures .accordion__icon { background: var(--color-3); border-radius: var(--radius-full); width: 36px; height: 36px; }
.section--disclosures .accordion__item[open] .accordion__icon { background: var(--color-6); }
.section--disclosures .accordion__answer { padding: 0 var(--space-lg) var(--space-lg); font-family: var(--font-1); font-size: var(--text-md); color: var(--color-text); }

/* ── ctas/photo-banner-closing — same typography treatment as home's cta_banner ── */
.section--hiw_cta.cta-banner { color: var(--color-4); }
.section--hiw_cta.cta-banner--photo { min-height: clamp(480px, 55vw, 800px); display: flex; align-items: center; margin-inline: clamp(12px, 3vw, 20px); border-radius: var(--radius-lg); }
.section--hiw_cta .cta-banner__inner { flex-direction: column; text-align: center; justify-content: center; padding-block: var(--space-xxl); }
.section--hiw_cta .cta-banner__heading { font-family: var(--font-2); font-weight: var(--weight-med); font-size: var(--text-h1); line-height: 0.906; color: var(--color-4); max-width: 768px; margin-inline: auto; }
.section--hiw_cta .cta-banner__body { font-family: var(--font-1); color: var(--color-3); max-width: 634px; margin-inline: auto; opacity: 1; }
.section--hiw_cta .cta-banner__ctas { justify-content: center; margin-top: var(--space-md); }
.section--hiw_cta .btn--primary { background: var(--color-3); color: var(--color-1); }



/* Layerly — Fidelity fix pass for how-it-works page — section padding precision, line-height corrections per Figma type spec, tag pill padding, button font on this page's CTAs, grid column min-width fix — 2026-07-24 18:50:43 */

/* ════════════════════════════════════════════════════════════════════
   HOW-IT-WORKS — fidelity fix pass (measured against Figma)
   ════════════════════════════════════════════════════════════════════ */

/* Hero — Figma has ZERO outer vertical padding (card sits flush), 24px
   horizontal gutter as SECTION padding (not child margin) */
.hero--statement-card { padding-block: 0; padding-inline: var(--space-lg); }
.hero--statement-card .hero__frame { margin-inline: 0; }
@media (max-width: 600px) { .hero--statement-card { padding-inline: var(--space-md); } }

/* Section vertical padding — match each section's exact Figma T/B (asymmetric
   in a couple of cases), scaled fluidly so mobile still compresses correctly */
.section--process_steps { padding-top: clamp(60px, 10vw, 120px); padding-bottom: clamp(48px, 7vw, 80px); }
.feature-highlight--clasp { padding-block: clamp(60px, 10vw, 120px); }
.split-panel--photo-statement { padding-top: clamp(60px, 10vw, 120px); padding-bottom: clamp(48px, 7vw, 80px); }
.section--disclosures { padding-block: clamp(60px, 10vw, 120px); }

/* Small muted "subheading" line — shared by section-headers/centered AND
   centered-divider — Figma spec across this page is consistently 14px tan,
   line-height 18/14. centered-divider's own subhead already had the right
   size/color; both variants were missing the precise line-height. */
.section-head--divider .section-head__sub,
.section--process_steps .section-head__sub,
.section--disclosures .section-head__sub {
    font-family: var(--font-1); font-size: var(--text-sm); color: var(--color-primary);
    line-height: 1.286; max-width: 400px; margin: 0 auto;
}
.hero--statement-card .hero__subtitle { line-height: 1.286; }

/* 44px-scale headings (Bricolage 400, Figma lineHeight 48/44 ≈ 1.09) — looser
   than the tight 0.906 used for the 64px H1-scale headings elsewhere. */
.app-showcase--checklist .app-showcase__heading { line-height: 1.09; }
.section--process_steps .process-steps__number { line-height: 1.09; }

/* 32px-scale titles (Bricolage 400 tan, Figma lineHeight 35/32 ≈ 1.094) */
.section--process_steps .process-steps__title { line-height: 1.094; }
.feature-highlight__pillar-text { line-height: 1.094; }

/* Tag pills — Figma frame padding is vertical-only (16/0), width hugs the
   text exactly; our added horizontal padding was inflating each pill ~50px.
   Text itself is 28px/600 Bricolage, Figma lineHeight 34/28 ≈ 1.214. */
.feature-highlight__tag { padding: var(--space-md) 0; line-height: 1.214; }

/* FAQ — question (20px/700 serif, lineHeight 28/20 = 1.4) + answer body
   (16px/400 serif, lineHeight 22/16 = 1.375) */
.section--disclosures .accordion__summary { line-height: 1.4; }
.section--disclosures .accordion__answer,
.section--disclosures .accordion__answer p { line-height: 1.375; }

/* Twin-paragraph body — Figma lineHeight 22/16 = 1.375 (was 1.4) */
.text-block__body { line-height: 1.375; }

/* This page's two primary CTA buttons — Figma's button text is explicitly
   Bricolage Grotesque 600, lineHeight 19/16 ≈ 1.1875 (site-wide .btn was
   tuned to the nav-link serif font for the home page; this page's Figma
   spec calls for the display font on its buttons instead). */
.app-showcase--checklist .btn--primary,
.section--hiw_cta .btn--primary {
    font-family: var(--font-1);
    font-weight: var(--weight-semibold);
    line-height: 1.1875;
}

/* Split-panel row — grid items were growing past their 1fr share because
   the media child had no explicit min-width:0 (classic CSS Grid overflow
   gotcha), pushing the two columns uneven vs Figma's equal 684/684. */
.split-panel__row > * { min-width: 0; }



/* Layerly — Fix split-panel image column width being driven by stretched row height instead of its own grid track — 2026-07-24 18:51:31 */

/* Split-panel media — aspect-ratio was resolving from the grid row's
   STRETCHED height (driven by the taller text card) rather than from its
   own grid-track width, over-widening the image column vs the card column.
   Pin width to 100% of its track first so height derives from that instead. */
.split-panel__media { width: 100%; height: auto; }



/* Layerly — Bespoke section CSS for the Shop page — product-hero/configurator, text-blocks/twin-paragraph-shop, pricing/plan-cards, feature-grids/spec-grid, gift-guide/twin-photo — 2026-07-24 19:04:58 */

/* ════════════════════════════════════════════════════════════════════
   SHOP PAGE — bespoke section families
   ════════════════════════════════════════════════════════════════════ */

/* ── product-hero/configurator ── */
.product-hero { padding: var(--space-lg); }
.product-hero__card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    display: grid;
    grid-template-columns: 1fr 440px 1fr;
    gap: var(--space-xl);
    padding: var(--space-xl) clamp(24px, 6vw, 96px);
    align-items: start;
}
.product-hero__info { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-xl); height: 100%; padding-top: var(--space-xl); }
.product-hero__title-block { display: flex; flex-direction: column; gap: var(--space-lg); }
.product-hero__title { font-family: var(--font-2); font-weight: var(--weight-med); font-size: var(--text-h1); line-height: 0.906; color: var(--color-text); margin: 0; }
.product-hero__subtitle { font-family: var(--font-1); font-size: var(--text-sm); color: var(--color-primary); margin: 0; max-width: 220px; }
.product-hero__body { font-family: var(--font-1); font-size: var(--text-sm); line-height: 1.43; color: var(--color-text); margin: 0; }
.product-hero__media { display: flex; flex-direction: column; gap: var(--space-md); padding-top: var(--space-lg); }
.product-hero__photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 440/460; }
.product-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.product-hero__details { display: flex; flex-direction: column; gap: var(--space-md); }
.product-hero__gallery { display: flex; gap: var(--space-sm); }
.product-hero__gallery-item { width: 65px; height: 68px; border-radius: var(--radius-lg); overflow: hidden; }
.product-hero__gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.product-hero__specs { background: var(--color-4); border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); align-items: center; }
.product-hero__specs-heading { font-family: var(--font-2); font-weight: var(--weight-semibold); font-size: var(--text-md); color: var(--color-primary); margin: 0; text-align: center; }
.product-hero__specs-list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-lg); justify-content: center; flex-wrap: wrap; }
.product-hero__spec { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-2); font-weight: var(--weight-semibold); font-size: var(--text-xs); color: var(--color-text); text-align: center; }
.product-hero__action { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-xl); height: 100%; padding-top: var(--space-xl); }
.product-hero__options { display: flex; flex-direction: column; gap: var(--space-lg); }
.product-hero__intro { font-family: var(--font-2); font-size: var(--text-md); line-height: 1.22; color: var(--color-text); margin: 0; }
.product-hero__option-group { display: flex; flex-direction: column; gap: var(--space-sm); }
.product-hero__option-label { font-family: var(--font-2); font-weight: var(--weight-bold); font-size: var(--text-xs); color: var(--color-primary); margin: 0; }
.product-hero__pills { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.product-hero__pill { flex: 1; text-align: center; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-lg); border: 1px solid var(--color-4); font-family: var(--font-2); font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--color-text); background: transparent; }
.product-hero__pill--active { background: var(--color-3); border-color: var(--color-6); }
.product-hero__pill--sm { flex: none; border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-md); }
.product-hero__stones { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.product-hero__stone { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); }
.product-hero__stone-swatch { width: 32px; height: 32px; border-radius: var(--radius-full); display: block; box-shadow: 0 4px 10px rgba(140,122,105,.3); }
.product-hero__stone-label { font-family: var(--font-1); font-size: 10px; color: var(--color-primary); }
.product-hero__closing { display: flex; flex-direction: column; gap: var(--space-md); }
.product-hero__reassurance { font-family: var(--font-1); font-size: var(--text-xs); line-height: 1.42; color: var(--color-primary); margin: 0; }
.product-hero__cta { width: 100%; }
@media (max-width: 1023px) {
    .product-hero__card { grid-template-columns: 1fr; }
    .product-hero__info, .product-hero__action { padding-top: 0; }
}

/* ── text-blocks/twin-paragraph-shop ── */
.text-block--twin-shop { padding-block: var(--space-xxl); }
.text-block--twin-shop .text-block__inner { max-width: 624px; }
.text-block__lede-dark { font-family: var(--font-1); font-weight: var(--weight-bold); font-size: var(--text-lg); line-height: 1.4; color: var(--color-text); max-width: 600px; margin: 0 auto; }

/* ── pricing/plan-cards ── */
.pricing--plan-cards { padding-block: var(--space-xxl); }
.pricing__intro { max-width: 850px; margin: 0 auto var(--space-xl); text-align: center; display: flex; flex-direction: column; gap: var(--space-lg); }
.pricing__intro-body { font-family: var(--font-1); font-size: var(--text-md); color: var(--color-text); margin: 0; max-width: 548px; margin-inline: auto; }
.pricing__intro-lede { font-family: var(--font-1); font-size: var(--text-h3); line-height: 1.19; color: var(--color-primary); margin: 0; }
.pricing__intro-fine { font-family: var(--font-1); font-weight: var(--weight-bold); font-size: var(--text-lg); line-height: 1.4; color: var(--color-text); margin: 0; max-width: 742px; margin-inline: auto; }
.pricing__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); max-width: 1200px; margin-inline: auto; }
.pricing__card { border: 1px solid var(--color-primary); border-radius: var(--radius-lg); padding: var(--space-xl); display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: var(--space-lg); text-align: center; min-height: 320px; }
.pricing__card--filled { background: var(--color-3); }
.pricing__card-head { display: flex; flex-direction: column; gap: var(--space-md); align-items: center; }
.pricing__card-title { font-family: var(--font-2); font-weight: var(--weight-reg); font-size: var(--text-h2); line-height: 1.09; color: var(--color-text); margin: 0; max-width: 420px; }
.pricing__card-price { font-family: var(--font-2); font-weight: var(--weight-reg); font-size: var(--text-h3); line-height: 1.094; color: var(--color-primary); margin: 0; }
.pricing__card-cta { width: 100%; max-width: 500px; }
.pricing__card-cta--muted { background: var(--color-4); color: var(--color-1); }
@media (max-width: 900px) { .pricing__list { grid-template-columns: 1fr; } }

/* ── feature-grids/spec-grid ── */
.feature-grids--spec-grid { padding-block: var(--space-xxl); }
.spec-grid__intro { max-width: 850px; margin: 0 auto var(--space-xl); text-align: center; display: flex; flex-direction: column; gap: var(--space-md); }
.spec-grid__lede { font-family: var(--font-1); font-size: var(--text-h3); line-height: 1.19; color: var(--color-primary); margin: 0; }
.spec-grid__bold { font-family: var(--font-1); font-weight: var(--weight-bold); font-size: var(--text-lg); line-height: 1.4; color: var(--color-text); margin: 0; max-width: 702px; margin-inline: auto; }
.spec-grid__body { font-family: var(--font-1); font-size: var(--text-md); color: var(--color-text); margin: 0; max-width: 548px; margin-inline: auto; }
.spec-grid__list { list-style: none; margin: 0 0 var(--space-xl); padding: var(--space-xl) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-xl); max-width: 1200px; margin-inline: auto; }
.spec-grid__item { border-top: 1px solid var(--color-6); padding-top: var(--space-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.spec-grid__title { font-family: var(--font-2); font-weight: var(--weight-semibold); font-size: var(--text-h3); line-height: 1.21; color: var(--color-text); max-width: 174px; white-space: pre-line; }
.spec-grid__icon { width: 72px; height: 70px; border: 2px solid var(--color-6); border-radius: var(--radius-lg); flex-shrink: 0; display: inline-block; }
.spec-grid__closing { font-family: var(--font-1); font-size: var(--text-h3); line-height: 1.19; color: var(--color-primary); text-align: center; max-width: 702px; margin: 0 auto; }
@media (max-width: 900px) { .spec-grid__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .spec-grid__list { grid-template-columns: 1fr; } }

/* ── gift-guide/twin-photo ── */
.gift-guide--twin-photo { padding-block: var(--space-xxl); }
.gift-guide__lede { font-family: var(--font-1); font-size: var(--text-h3); line-height: 1.19; color: var(--color-primary); text-align: center; max-width: 956px; margin: 0 auto var(--space-xl); }
.gift-guide__images { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.gift-guide__img { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 684/800; }
.gift-guide__img img { width: 100%; height: 100%; object-fit: cover; }
.gift-guide__closing { max-width: 956px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: var(--space-lg); }
.gift-guide__statement { font-family: var(--font-1); font-weight: var(--weight-bold); font-size: var(--text-h3); line-height: 1.25; color: var(--color-text); margin: 0; }
.gift-guide__quote { font-family: var(--font-1); font-size: var(--text-h3); line-height: 1.19; color: var(--color-primary); margin: 0; max-width: 540px; margin-inline: auto; }
.gift-guide__cta { margin-inline: auto; }

@media (max-width: 767px) {
    .pricing__intro-fine, .spec-grid__bold { max-width: 100%; }
    .gift-guide__images, .showcase__images { grid-template-columns: 1fr; }
}



/* Layerly — Shop page fidelity fix pass — button font/line-height on this page's CTAs, product-hero column widths + line-height/size corrections, spec-grid title size — 2026-07-24 19:06:46 */

/* Shop page CTAs use the display font (Bricolage), matching this page's Figma spec
   (other pages deliberately use --font-1 for buttons; this page's Figma calls for --font-2) */
/* Scoped to the configurator variant: .product-hero__cta is shared with
   product-heroes/bordered-split (homepage), whose Figma spec is Bricolage
   (--font-2). Unscoped, this rule restyled that section's buttons too. */
.product-hero--configurator .product-hero__cta,
.pricing__card-cta,
.gift-guide__cta {
    font-family: var(--font-1);
    font-weight: var(--weight-semibold);
    line-height: 1.1875;
}

/* product-hero — exact Figma column widths (340/440/340) instead of fr-based */
@media (min-width: 1024px) {
    /* minmax(0, ...) instead of a literal 340px: the fixed-px version summed wider
       than the card's actual available width (340+440+340+gaps+padding > container),
       forcing real horizontal overflow that clipped "Bracelet"/"Ruby"/button text past
       the card's right edge. minmax(0,1fr) lets the side columns shrink to fit instead. */
    .product-hero__card { grid-template-columns: minmax(0, 1fr) 440px minmax(0, 1fr); }
}

/* product-hero — type deltas: subtitle + specs-heading + intro line-heights/size */
.product-hero__subtitle { line-height: 1.286; }
.product-hero__specs-heading { line-height: 1.1875; }
.product-hero__intro { font-size: 18px; line-height: 1.222; }

/* feature-grids/spec-grid — item title is 28px in the Figma (this page's grid uses
   4 wider items, not the 3-col material-list's --text-h3 clamp which resolves to 32) */
.spec-grid__title { font-size: 28px; }



/* Layerly — Shop page fidelity fix pass 2 — section padding to match Figma (0 vertical on hero, 120 horizontal + 120/80 vertical on the other sections), and force button font-family with !important in case of a cascade conflict — 2026-07-24 19:08:57 */

/* product-hero — Figma section has ZERO outer vertical padding (24px horizontal only) */
.product-hero { padding: 0 var(--space-lg); }

/* pricing / spec-grid — Figma sections have 120px padding on all sides */
.pricing--plan-cards,
.feature-grids--spec-grid {
    padding-block: clamp(60px, 10vw, 120px);
    padding-inline: clamp(var(--space-md), 8vw, 120px);
}
/* gift-guide — Figma padding is 120 top / 80 bottom */
.gift-guide--twin-photo { padding-top: clamp(60px, 10vw, 120px); padding-bottom: clamp(48px, 7vw, 80px); }
/* twin-paragraph-shop intro — Figma has 120px horizontal padding too */
.text-block--twin-shop { padding-inline: clamp(var(--space-md), 8vw, 120px); }

/* Force the display font on this page's CTA buttons (defensive: !important in
   case another equal-specificity .btn rule wins the cascade tie elsewhere) */
/* Same scoping as above. The !important was presumably added to beat an
   earlier competing rule; kept for the Shop-page components that rely on it,
   but no longer applied to the homepage bordered-split variant. */
.product-hero--configurator .product-hero__cta,
.pricing__card-cta,
.gift-guide__cta {
    font-family: var(--font-1) !important;
}



/* Layerly — Shop page fidelity fix pass 3 — correct closing paragraph type specs (spec-grid closing was wrongly sized/colored as a quote; gift-guide statement was too large) — 2026-07-24 19:09:17 */

/* spec-grid closing line is a plain 20px/400 black paragraph in the Figma, not a
   32px brand-color quote (that treatment belongs to spec-grid__lede, not __closing) */
.spec-grid__closing { font-family: var(--font-1); font-weight: var(--weight-reg); font-size: var(--text-lg); line-height: 1.4; color: var(--color-text); }

/* gift-guide statement is 24px/700 serif in the Figma, not the 32px --text-h3 scale */
.gift-guide__statement { font-size: 24px; line-height: 1.25; }



/* Layerly — Bump product-hero gemstone swatch label to the 12px accessibility floor on mobile (was 10px) — 2026-07-24 19:09:32 */
.product-hero__stone-label { font-size: var(--text-xs); }


/* Layerly — Fix product-hero grid column overflow — min-width:0 on grid/flex children so the action column's pills/gemstones/text wrap within their 340px track instead of overflowing past the card edge — 2026-07-24 19:13:35 */

/* FIX — product-hero grid columns were overflowing their tracks. Grid items (and
   flex items inside them) default to min-width:auto, which lets their content
   (the pill row, gemstone row, long paragraphs) force the column wider than its
   340px/440px/340px track — pushing the right column's content past the card's
   right edge (cut off "Bracelet"/"Ruby"/button text). Same root cause as the
   split-panel__row fix on the how-it-works page. */
.product-hero__card > * { min-width: 0; }
.product-hero__pills,
.product-hero__stones,
.product-hero__gallery,
.product-hero__specs-list { min-width: 0; flex-wrap: wrap; }
.product-hero__pill { min-width: 0; }
.product-hero__intro,
.product-hero__reassurance,
.product-hero__body { overflow-wrap: break-word; }



/* Layerly — How-it-works targeted fix pass: full-bleed app-showcase/911 media, stroked accordion chevron, trigger pillar image slot, per-step icon image slot — 2026-07-24 20:51:27 */
/* Layerly — Targeted fix pass (how-it-works): full-bleed media panels for
   app-showcase + 911-split (matching hero/CTA which were already correct),
   stroked accordion chevron, and image slots for trigger pillar + step icons */

/* FIX 1 — app-showcase (checklist-split, "app" section) and split-panel
   (photo-statement, "911" section) media panels were capped at the 1200px
   .wrap instead of the Figma's near-full-bleed 1392/1440 width. Same
   viewport-relative breakout technique already used elsewhere on this site. */
@media (min-width: 1024px) {
    .app-showcase--checklist .app-showcase__grid {
        width: calc(100vw - 2 * var(--space-lg));
        max-width: calc(100vw - 2 * var(--space-lg));
        margin-left: calc(50% - 50vw + var(--space-lg));
    }
    .split-panel--photo-statement .split-panel__row {
        width: calc(100vw - 2 * var(--space-lg));
        max-width: calc(100vw - 2 * var(--space-lg));
        margin-left: calc(50% - 50vw + var(--space-lg));
    }
}

/* FIX 3 — accordion chevron must be a clean stroked line, never a filled
   wedge (an open V-path filled instead of stroked reads as a solid triangle).
   Force stroke rendering defensively regardless of the shared icon markup. */
.accordion__icon svg { fill: none; }
.accordion__icon svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* FIX 2a — trigger pillar card: quote text + a rendered product graphic
   stacked with the Figma's 80px gap (was a single centered text item only) */
.feature-highlight__pillar { flex-direction: column; gap: var(--space-xxl); }
.feature-highlight__pillar-media { display: flex; justify-content: center; align-items: center; }
.feature-highlight__pillar-media img { max-width: 256px; width: 100%; height: auto; }

/* FIX 2b — process step icons: distinct rendered icon art per card, sized
   to sit above the title the same way the icon-font slot did */
.section--process_steps .process-steps__icon { display: flex; align-items: center; justify-content: center; min-height: 84px; }
.section--process_steps .process-steps__icon img { max-width: 180px; max-height: 140px; width: auto; height: auto; object-fit: contain; }


/* Layerly — accordion chevron: the icon path carries fill="currentColor" on a chevron
   (M6 9l6 6 6-6) meant to be STROKED, so it rendered as a filled wedge. Force stroke-only.
   Applied 2026-07-24 (fix-pass missed it). — all sites: belongs in layerly-base eventually. */
.accordion__icon svg,
.accordion__icon svg path {
    fill: none !important;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Layerly — Shop page targeted fix pass: full-bleed hero/gift/pricing/spec-grid panels, reassurance icon images, gemstone swatch images, metal-pill radius correction — 2026-07-24 21:06:01 */

/* ── Shop page targeted fix pass — full-bleed panels, reassurance icons,
   gemstone swatch images, option-chip border correction — 2026-07-24 */

/* FIX 1 — full-bleed media panels matching the Figma's near-edge-to-edge
   layout: hero card + gift images row break out past the 1200px reading
   container to viewport-48px (the Figma's own 24px outer gutter). The
   pricing/reassurance "bands" lose the WRAP's redundant duplicate
   padding-inline (the section itself already carries the exact clamped
   120px Figma gutter) so their content reaches the true 1200px width
   instead of being double-pinched to ~1152px. */
@media (min-width: 1024px) {
    .product-hero__card {
        width: calc(100vw - 2 * var(--space-lg));
        max-width: calc(100vw - 2 * var(--space-lg));
        margin-left: calc(50% - 50vw + var(--space-lg));
    }
    .gift-guide__images {
        width: calc(100vw - 2 * var(--space-lg));
        max-width: calc(100vw - 2 * var(--space-lg));
        margin-left: calc(50% - 50vw + var(--space-lg));
    }
}
.pricing--plan-cards .wrap,
.feature-grids--spec-grid .wrap {
    padding-inline: 0;
}

/* FIX 3 — reassurance icons: real image fills the existing circular slot
   (same pattern as the home page's material-grid icons) */
.spec-grid__icon { display: flex; align-items: center; justify-content: center; }
.spec-grid__icon-img { width: 55%; height: 55%; object-fit: contain; display: block; }

/* FIX 4a — gemstone swatch: bordered chip containing the real gem image,
   replacing the flat color circle (Figma: 58x64, radius-lg, 1px color-4 border) */
.product-hero__stone-swatch {
    width: 58px;
    height: 64px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-4);
    background: var(--color-3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: none;
}
.product-hero__stone-img { width: 70%; height: 70%; object-fit: contain; display: block; }

/* FIX 4b — metal pill radius: Figma spec is 8px (radius-md), not 4px (radius-sm) */
.product-hero__pill--sm { border-radius: var(--radius-md); }



/* Layerly — Style footer legal links (Privacy/Terms) to match copyright line typography — 2026-07-28 20:41:45 */
.footer__copyright-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); }
.footer__legal { display: flex; align-items: center; gap: var(--space-sm); }
.footer__legal-link { font-family: var(--font-1); font-size: var(--text-xs); color: var(--color-text-muted); text-decoration: none; }
.footer__legal-link:hover { color: var(--color-text); text-decoration: underline; }
.footer__legal-sep { font-family: var(--font-1); font-size: var(--text-xs); color: var(--color-text-muted); }


/* Layerly — Burke Flooring design tokens + shared chapter-head heading motif — 2026-07-30T16:47:28.904Z */
.chapter-head {
  margin-bottom: var(--space-xl);
}

.chapter-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.chapter-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 44px);
  line-height: 1.09;
  color: var(--color-primary);
  margin: 0;
  max-width: 620px;
}



.chapter-head__rule {
  height: 1px;
  background: var(--color-primary);
  margin-top: var(--space-md);
  width: 100%;
}

.chapter-head--invert .chapter-head__sub {
  color: var(--color-2);
}

.chapter-head__row {
  flex-direction: column;
  align-items: flex-start;
}

.chapter-head__sub {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 0;
  text-align: left;
  max-width: 100%;
  font-size: 18px;
  line-height: 1.39;
}


/* Layerly — Burke Flooring: hero, text-intro dual-panel, before-after, services photo-cards CSS — 2026-07-30T16:50:47.982Z */
.hero--photo-split {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(480px, 56vw, 800px);
  padding-block: 0;
  overflow: hidden;
  background: var(--color-2);
}

.hero--photo-split .hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero--photo-split .hero__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero--photo-split .hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(2,2,2,.7) 100%);
  pointer-events: none;
}



.hero--photo-split .hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5.5vw, 64px);
  line-height: 1;
  color: var(--color-2);
  margin: 0;
  max-width: 700px;
}

.hero--photo-split .hero__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 360px;
}

.hero--photo-split .hero__subtitle {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-2);
  margin: 0;
  font-size: 18px;
  line-height: 1.39;
}

.hero--photo-split .hero__cta {
  align-self: flex-start;
}

.hero--photo-split .hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
  padding-block: clamp(var(--space-xl), 6vw, 80px);
  flex-direction: column;
  display: grid;
  grid-template-columns: minmax(0, 66%) minmax(0, 34%);
  align-items: flex-end;
  text-align: left;
}

@media (max-width: 767px) {
  .hero--photo-split .hero__side {
    max-width: 100%;
  }
}

.text-intro--dual-panel {
  background: var(--color-2);
  padding-block: clamp(48px, 7vw, 80px);
}

.text-intro__panel {
  display: flex;
  gap: var(--space-xl);
  justify-content: space-between;
  flex-wrap: wrap;
  background: var(--color-3);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.text-intro__panel-text {
  margin: 0;
  flex: 1 1 320px;
  color: var(--color-2);
}

.text-intro__panel-text--reg {
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.375;
  flex: 1 1 40%;
  max-width: 445px;
}

.text-intro__panel-text--bold {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.3;
  flex: 1 1 55%;
  max-width: 660px;
}

.text-intro__statement-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.text-intro__statement {
  font-size: 24px;
  line-height: 1.29;
  font-weight: 700;
  color: var(--color-3);
  margin: 0;
  max-width: 820px;
}

@media (max-width: 640px) {
  .text-intro__statement-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

.before-after {
  background: var(--color-2);
  padding-block: clamp(48px, 7vw, 80px);
}

.before-after__lede-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.before-after__lede {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.19;
  color: var(--color-3);
  margin: 0;
  white-space: pre-line;
  max-width: 680px;
}

.before-after__body {
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-3);
  margin: 0;
  max-width: 900px;
}

.before-after__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.before-after__figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 588/600;
}

.before-after__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.before-after__chip {
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  bottom: var(--space-md);
  background: var(--color-5);
  border: 1px solid rgba(246,243,235,.3);
  color: var(--color-2);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.29;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  text-align: center;
}

.before-after__closing {
  font-size: var(--text-md);
  line-height: 1.375;
  color: var(--color-3);
  margin: 0 0 var(--space-xl);
  max-width: 700px;
}

.before-after__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
  background: var(--color-3);
  border-radius: var(--radius-md);
  padding: var(--space-xl) clamp(var(--space-lg), 4vw, 40px);
}

.before-after__card-text {
  color: var(--color-2);
  font-weight: 700;
  margin: 0;
  max-width: 760px;
  font-size: 24px;
  line-height: 1.29;
}

@media (max-width: 767px) {
  .before-after__images {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .before-after__card {
    flex-direction: column;
    align-items: flex-start;
  }
}

.service-grid--photo-cards {
  background: var(--color-1);
  padding-block: clamp(60px, 10vw, 120px);
}

.section--services .chapter-head__rule {
  background: var(--color-primary);
}

.service-grid__lede-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.service-grid__lede {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.19;
  color: var(--color-3);
  margin: 0;
}

.service-grid__body {
  font-size: var(--text-md);
  line-height: 1.375;
  color: var(--color-3);
  margin: 0;
  max-width: 700px;
}

.service-grid--photo-cards .service-grid__list {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.service-grid--photo-cards .service-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 384/520;
  box-shadow: none;
}

.service-grid--photo-cards .service-card:hover {
  transform: none;
  box-shadow: none;
}

.service-grid--photo-cards .service-card__media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

.service-grid--photo-cards .service-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-grid--photo-cards .service-card__body {
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  bottom: var(--space-md);
  background: var(--color-6);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.service-grid--photo-cards .service-card__title {
  color: #fff;
  font-weight: 700;
  margin: 0;
  font-size: 24px;
  line-height: 1.29;
}

.service-grid--photo-cards .service-card__excerpt {
  color: #fff;
  font-size: var(--text-sm);
  margin: 0;
}

@media (max-width: 900px) {
  .service-grid--photo-cards .service-grid__list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .service-grid--photo-cards .service-grid__list {
    grid-template-columns: 1fr;
  }
}


/* Layerly — Burke Flooring: complete-work carousel, service-areas map, cta-contact CSS — 2026-07-30T16:51:08.745Z */
.complete-work {
  background: var(--color-2);
  padding-block: clamp(60px, 10vw, 120px) clamp(48px, 7vw, 80px);
}

.complete-work__lede-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.complete-work__lede {
  font-weight: 400;
  color: var(--color-3);
  margin: 0;
  max-width: 720px;
  font-size: 16px;
  line-height: 1.375;
}

.complete-work__body {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.29;
  color: var(--color-3);
  margin: 0;
  max-width: 730px;
}

.complete-work__carousel {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-md);
}

.complete-work__track {
  grid-column: 2;
  display: flex;
  gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.complete-work__track::-webkit-scrollbar {
  display: none;
}

.complete-work__slide {
  position: relative;
  flex: 0 0 calc(46.6% - var(--space-lg));
  scroll-snap-align: start;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 560/480;
}

.complete-work__media {
  position: absolute;
  inset: 0;
}

.complete-work__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.complete-work__quote {
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  bottom: var(--space-md);
  margin: 0;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  color: var(--color-text);
  font-size: var(--text-md);
  line-height: 1.375;
  text-align: center;
}

.complete-work__quote p {
  margin: 0;
}

.complete-work__nav {
  grid-row: 1;
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: 0;
  border: 1px solid var(--color-3);
  background: transparent;
  color: var(--color-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.complete-work__nav--next {
  background: var(--color-3);
  color: var(--color-2);
  border-color: var(--color-3);
  grid-column: 3;
}

.complete-work__nav--prev {
  grid-column: 1;
}

.complete-work__dots {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

@media (max-width: 720px) {
  .complete-work__slide {
    flex-basis: 85%;
  }
}

@media (max-width: 720px) {
  .complete-work__carousel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .complete-work__nav {
    display: none;
  }
}

@media (max-width: 720px) {
  .complete-work__track {
    grid-column: 1;
  }
}

.service-areas {
  background: var(--color-3);
  padding-block: clamp(60px, 10vw, 120px) clamp(48px, 7vw, 80px);
}

.service-areas .chapter-head__title {
  color: var(--color-primary);
}

.service-areas__map {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1200/640;
  margin-bottom: var(--space-xl);
}

.service-areas__map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-areas__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 120px var(--space-lg) var(--space-lg);
  background: linear-gradient(180deg, rgba(2,2,2,0) 0%, rgba(2,2,2,.75) 100%);
}

.service-areas__badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.service-areas__badge {
  background: var(--color-5);
  border: 1px solid var(--color-3);
  border-radius: var(--radius-full);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: var(--space-xs) var(--space-md);
  line-height: 1.25;
}

.service-areas__cta-row {
  display: flex;
  justify-content: center;
}

.cta-contact {
  position: relative;
  overflow: hidden;
  padding-block: clamp(60px, 10vw, 120px);
  background: var(--color-8);
}

.cta-contact__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cta-contact__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-contact__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(116,10,3,.82);
  pointer-events: none;
}

.cta-contact__inner {
  position: relative;
  z-index: 2;
}

.cta-contact .chapter-head__title {
  color: var(--color-2);
}

.cta-contact__lede {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.29;
  color: var(--color-2);
  margin: 0 0 var(--space-xl);
  max-width: 700px;
}

.cta-contact__panel {
  display: flex;
  gap: clamp(var(--space-xl), 5vw, 80px);
  justify-content: space-between;
  flex-wrap: wrap;
  background: #C3110C;
  border-radius: var(--radius-md);
  padding: clamp(var(--space-lg), 4vw, 40px);
}

.cta-contact__panel-text {
  flex: 1 1 320px;
  color: var(--color-2);
  font-weight: 500;
  margin: 0;
  font-size: 18px;
  line-height: 1.39;
}

.cta-contact__form {
  flex: 1 1 400px;
  max-width: 560px;
}

.cta-contact__form .form {
  --field-bg: #FFFFFF;
  --field-border: rgba(255,255,255,.5);
  --field-radius: var(--radius-sm);
  --label-color: var(--color-2);
  --field-focus: var(--color-2);
}

.cta-contact__form .field__label {
  color: var(--color-2);
}

.cta-contact__form .btn--primary {
  background: #FFFFFF;
  color: var(--color-8);
  border-color: #E2E8F0;
}

.cta-contact__form .btn--primary:hover {
  filter: brightness(.95);
}

@media (max-width: 767px) {
  .cta-contact__panel {
    flex-direction: column;
  }
}


/* Layerly — Burke Flooring: bespoke footer styling + nav knob overrides (win over prior contaminated overrides) — 2026-07-30T16:51:50.516Z */
.site-footer--burke {
  background: var(--color-3);
  color: var(--color-2);
  --footer-copyright-bg: var(--color-3);
  --footer-copyright-fg: rgba(246,243,235,.7);
}

.site-footer--burke .site-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-xl);
  padding-block: var(--space-xxl);
}

.site-footer--burke .site-footer__logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-2);
}

.site-footer--burke .site-footer__tagline {
  color: rgba(246,243,235,.75);
  margin: var(--space-md) 0 0;
  max-width: 32ch;
}

.site-footer--burke .site-footer__heading {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-2);
  margin: 0 0 var(--space-md);
}

.site-footer--burke .site-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}

.site-footer--burke .site-footer__nav-list a {
  color: rgba(246,243,235,.75);
  text-decoration: none;
}

.site-footer--burke .site-footer__nav-list a:hover {
  color: var(--color-2);
}

.site-footer--burke .site-footer__contact p {
  margin: 0 0 var(--space-sm);
  color: rgba(246,243,235,.75);
}

.site-footer--burke .site-footer__contact a {
  color: inherit;
  text-decoration: none;
}

.site-footer--burke .site-footer__contact a:hover {
  color: var(--color-2);
}

.site-footer--burke .site-footer__credit-row {
  border-top: 1px solid rgba(246,243,235,.15);
  padding-block: var(--space-md);
  font-size: var(--text-sm);
}

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

@media (max-width: 600px) {
  .site-footer--burke .site-footer__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

@media (max-width: 600px) {
  .site-footer--burke .site-footer__nav-list {
    justify-items: center;
  }
}


/* Layerly — Fidelity fix pass 1: button color/weight, hero grid columns, cta heading color, panel proportions — 2026-07-30T16:55:33.425Z */
@media (max-width: 767px) {
  .hero--photo-split .hero__inner {
    grid-template-columns: 1fr;
  }
}

.cta-contact .chapter-head__rule {
  background: var(--color-primary);
}


/* Layerly — Burke Flooring intro (text-intros/dual-panel): the shared .text-intro__inner base rule (868px max-width, centered, text-align:center) is tuned for the quote-divider variant and was bleeding into this bespoke dual-panel variant — squeezing the 1200px-wide two-column dark panel down to 820px usable width, forcing its two text columns to wrap/stack instead of sitting side-by-side per Figma, and centering text that should be left-aligned. — 2026-07-30T17:27:33.147Z */
.text-intro--dual-panel .text-intro__inner {
  max-width: none;
  align-items: stretch;
  text-align: left;
}

/* ═══ AVEYA PALETTE RESTORE (2026-08-12) ═══
   Re-asserts the Aveya design tokens after the 2026-07-30 cross-site build wrote
   Burke Flooring tokens into this sandbox. Block copied verbatim from backup
   revision 1 (2026-07-24 02:02). Appended (not edited in place) so it wins the
   cascade over the Burke :root above and can be removed by deleting this block. */
/* Layerly — Aveya design tokens — colors + fonts from Figma — 2026-07-23 21:57:30 */
:root {
    /* Colors — exact, design-derived (Aveya) */
    --color-1: #000000;
    --color-2: #8C7A69;
    --color-3: #FFFFFF;
    --color-4: #ECE7DC;
    --color-5: #FBFAF6;
    --color-6: #D8C3B0;
    --color-7: #372426;
    --color-8: #EA4335;

    /* Functional aliases — DARK GROUND (Figma 6001:1472 "home").
       The page root frame is #372426 and every section grounds to it, so the
       roles inverted from the old cream scheme. The NUMBERED tokens above are
       unchanged — every Figma hex already existed in the table, so no section
       CSS referencing var(--color-N) shifts meaning. Measured on #372426:
         #FFFFFF                  14.6:1  body text
         #D8C3B0                   8.6:1  headings / accent
         rgba(216,195,176,.78)     5.8:1  muted text
         #8C7A69                   3.5:1  hairlines + strokes ONLY (non-text) */
    --color-text: var(--color-3);
    --color-bg: var(--color-7);
    --color-surface: var(--color-6);
    --color-primary: var(--color-4);
    --color-text-muted: rgba(216, 195, 176, .78);
    --color-border: var(--color-2);
    /* Ink ON the cream surface/button fills — black, 16.8:1 on #ECE7DC. */
    --color-on-surface: var(--color-1);
    /* Display headings on the dark ground — 8.6:1. */
    --color-heading: var(--color-6);
    /* Pressed/hover shade of the maroon ground — ~35% darker than --color-7.
       Measured on it: #FFFFFF 17.3:1, #ECE7DC 14.1:1. Used for button hover
       states so a filled cream button inverts to dark-on-hover. */
    --color-7-dark: #241719;

    /* Fonts — exact families. Headlines (44-64px) are Bricolage Grotesque;
       body copy + quote-style paragraphs are Libre Baskerville. */
    --font-1: 'Libre Baskerville', serif;
    --font-2: 'Bricolage Grotesque', sans-serif;
    --font-display: var(--font-2);
    --font-body: var(--font-1);
}

/* ═══ AVEYA HEADER + BUTTONS (Alexander, 2026-08-12) ═══
   1. Header background removed. --nav-fg has to flip with it: it was #FFFFFF,
      legible only against the bronze bar. On the cream page background white links
      would vanish, and the supplied logo is black artwork.
   2. One button treatment everywhere. The nav CTA was bronze-on-bronze so it read
      as plain text, and the hero CTA used an inverted cream/black spec at 16px/600.
      Both now match .btn--primary. Nav padding stays compact deliberately — an
      80px-padded button cannot sit inside an 84px nav bar. */
.nav {
  --nav-bg: transparent;
  --nav-fg: var(--color-1);
}
.hero__cta,
.hero--inset-overlay .hero__cta {
  /* Figma 6001:1505: fill #ECE7DC, radius 8, padding "8 24 8 24",
     label Bricolage 14/17 weight 500 UPPERCASE #000000 (16.8:1).
     --color-4 is #ECE7DC; --color-5 (#FBFAF6) was a near-white miss. */
  background: var(--color-4);
  color: var(--color-on-surface);
  font-family: var(--font-2);
  font-size: var(--text-sm);
  line-height: 17px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
}
.nav__cta.btn--primary {
  text-transform: none;
  letter-spacing: .04em;
  background: var(--color-primary);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-1);
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  color: var(--color-on-surface);
}

/* ═══ AVEYA STICKY NAV (Alexander, 2026-08-12) ═══
   The nav is transparent at rest so it sits on the cream page. Once scrolled it has
   to become readable over whatever section is passing under it. main.js already
   toggles .is-scrolled past 10px (it was only drawing a shadow) — this gives that
   state a translucent, blurred background and a shorter bar.
   Tint via color-mix off the token, not a hard-coded rgba, so it tracks the palette. */
.nav {
  transition: background-color .25s ease, backdrop-filter .25s ease, box-shadow .2s;
}
.nav__inner { transition: min-height .25s ease; }
.nav__logo-img { transition: width .25s ease; }

.nav.is-scrolled {
  /* --color-bg is now the maroon ground (dark-scheme flip), so this resolves
     to maroon rather than the cream it was authored for. The 10% --color-1
     hairline is black-on-dark and invisible; use a tint of the brand hairline. */
  --nav-bg: color-mix(in srgb, var(--color-bg) 92%, transparent);
  --nav-height: 62px;
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid color-mix(in srgb, var(--color-2) 40%, transparent);
}
.nav.is-scrolled .nav__logo-img { width: 84px; }
.nav.is-scrolled .nav__cta.btn--primary { padding: 6px 20px; }

/* Older engines without color-mix still get a readable bar rather than a clear one. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .nav.is-scrolled { --nav-bg: rgba(236, 231, 220, .85); }
}


/* Layerly — Add image support to app-showcase right column (circle of protection image) — 2026-08-25T23:14:35.728Z */
.app-showcase__right-image {
  width: 100%;
}

.app-showcase__right-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
  object-fit: cover;
}


/* Layerly — Client feedback: necklace showcase photo should be smaller and better designed, focused on the product not the model — shrink into a framed card and shift crop toward the pendant" — 2026-08-25T23:36:58.643Z */
.showcase--dual-mode .showcase__mode:first-child .showcase__img {
  aspect-ratio: 4/5;
  max-width: 380px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-md);
  padding: var(--space-xs);
  background: var(--color-surface);
  box-sizing: border-box;
}

.showcase--dual-mode .showcase__mode:first-child .showcase__img img {
  border-radius: var(--radius-md);
  object-position: center 78%;
}


/* Layerly — Shrink the second showcase image (comment #8, pin 8) so it no longer requires scrolling to view in full — 2026-08-25T23:37:53.770Z */
.showcase--dual-mode .showcase__mode:nth-child(2) .showcase__img {
  max-width: 380px;
  margin-inline: auto;
}


/* Layerly — Reserve a placeholder media area in the how-it-works hero for the (pending) Aveya jewelry + app video graphic, replacing the former statement text per approved feedback — 2026-08-26T17:04:45.725Z */
.hero--statement-card .hero__media--placeholder {
  width: 100%;
  max-width: 840px;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-lg);
  border: 1px dashed var(--color-6);
  border-radius: var(--radius-md, 12px);
  background: var(--color-surface, transparent);
}

.hero--statement-card .hero__media-placeholder-label {
  font-family: var(--font-1);
  font-size: var(--text-sm);
  color: var(--color-primary);
}

.hero--statement-card .hero__media {
  width: 100%;
  max-width: 840px;
}

.hero--statement-card .hero__media-video, .hero--statement-card .hero__media img {
  width: 100%;
  border-radius: var(--radius-md, 12px);
  display: block;
}


/* Layerly —  — 2026-08-26T17:06:23.129Z */
.section--pillars.section--pillars .pillars__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  max-width: var(--container-max);
}

.section--pillars.section--pillars .pillars__item {
  position: static;
  top: auto;
  margin-bottom: 0;
  transform: none;
  animation: none;
}


/* Layerly — Add a highlight glow/ring around the scrunchie/button photo in the hiw_safety split panel, per client request to highlight the button on the scrunchie image — 2026-08-31T17:23:38.940Z */
.section--hiw_safety .split-panel__media {
  box-shadow: 0 0 0 4px var(--color-highlight, var(--color-7)), 0 8px 24px rgba(0,0,0,0.18);
}


/* Layerly — Client feedback: too much empty space in the 'discrete safety necklace' feature block content — it was stretching full row height (matching the tall image) with a large gap between title and paragraph; now it sizes to its own content instead of stretching. — 2026-09-07T17:30:37.584Z */
#main > section.section.section--feature_blocks:nth-child(6) > div.wrap > div.feature-blocks__list > div.feature-blocks__row.feature-blocks__row--image-left > div.feature-blocks__content:nth-child(2) {
  align-self: flex-start;
  min-height: auto;
}


/* Layerly — Dark-ground migration: cream-surfaced pillar cards and primary/nav buttons get black/plum ink instead of inheriting the new white --color-text (was 1.1-1.7:1) — 2026-09-14T18:50:57.033Z */
.btn.btn--primary {
  color: var(--color-on-surface);
}


/* Layerly — Exact Figma geometry for the three new homepage sections: ornament divider, states triptych, and the alternating bordered-split product hero — 2026-09-14T18:56:43.272Z */
.divider--ornament-rule {
  padding: var(--space-xs) 120px;
  /* Maroon by default: the botanical ground would otherwise read as a banded
     texture strip between content sections. Still consumes
     --section-bg-color so the anatomy control can override per section. */
  background: var(--section-bg-color, var(--color-7));
}

/* The divider directly below the hero is the exception — it stays transparent
   so the page's botanical ground (body, root frame 6001:1472) reads through
   as the hero card lifts off it. Scoped by adjacency rather than nth-child so
   it tracks the hero if the section order changes. */
.hero--inset-overlay + .divider--ornament-rule {
  background: var(--section-bg-color, transparent);
}

.divider--ornament-rule .divider__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  max-width: 1200px;
  margin: 0 auto;
  min-height: 40px;
}

.divider--ornament-rule .divider__rule {
  flex: 1 1 504px;
  max-width: 504px;
  height: 1px;
  background: var(--color-2);
  display: block;
}

.divider--ornament-rule .divider__ornament {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 145px;
  height: 40px;
}

.divider--ornament-rule .divider__ornament--mark {
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: var(--color-2);
}

.divider--ornament-rule .divider__ornament img {
  max-width: 100%;
  height: auto;
  display: block;
}

.states--triptych-statement {
  padding: 80px 120px;
  /* Consume the section anatomy control so a bg_type:color prop wins;
     fall back to the Figma gradient fade into the page ground. */
  background: var(--section-bg-color, linear-gradient(180deg, rgba(55, 36, 38, 0) 0%, var(--color-7) 100%));
}

.states--triptych-statement .states__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.states--triptych-statement .states__list {
  list-style: none;
  margin: 0;
  padding: 0 80px;
  display: flex;
  justify-content: center;
  gap: 40px;
  width: 100%;
  padding-left: clamp(0px, 4vw, 80px);
  padding-right: clamp(0px, 4vw, 80px);
}

.states--triptych-statement .states__item {
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  flex: 1 1 min(100%, 240px);
  min-width: 0;
}

.states--triptych-statement .states__media {
  width: 100%;
}

.states--triptych-statement .states__media img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.states--triptych-statement .states__label {
  font-family: var(--font-1);
  font-size: 18px;
  line-height: 25px;
  color: var(--color-3);
  text-align: center;
}

.states--triptych-statement .states__statement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 0 120px;
  text-align: center;
}

.states--triptych-statement .states__drop {
  width: 1px;
  height: 80px;
  background: var(--color-2);
  display: block;
}

.states--triptych-statement .states__title {
  font-family: var(--font-2);
  font-size: 64px;
  line-height: 58px;
  font-weight: 500;
  color: var(--color-heading);
  margin: 0;
  max-width: 589px;
}

.states--triptych-statement .states__title p {
  margin: 0 0 var(--space-lg);
}

.states--triptych-statement .states__title p:last-child {
  margin-bottom: 0;
}

.states--triptych-statement .states__body {
  font-family: var(--font-1);
  font-size: var(--text-sm);
  line-height: 18px;
  color: var(--color-3);
  max-width: 372px;
  margin: 0;
}

.states--triptych-statement .states__body p {
  margin: 0;
}

.product-hero--bordered-split {
  padding: var(--space-lg) 120px;
  /* Consume the section anatomy control so a bg_type:color prop wins.
     Default IS the opaque maroon: Figma 6001:1537 specifies fill #372426 on
     the section frame. The engraved botanical lives on the ROOT frame
     (6001:1472) and is only meant to show through the divider bands and page
     margins — not through content sections. */
  background: var(--section-bg-color, var(--color-7));
}

.product-hero--bordered-split .product-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: var(--space-lg);
}

.product-hero--bordered-split.product-hero--media-left .product-hero__inner {
  flex-direction: row-reverse;
}

.product-hero--bordered-split .product-hero__panel {
  flex: 1 1 588px;
  min-width: 0;
  border: 1px solid var(--color-2);
  border-radius: var(--radius-lg);
}

.product-hero--bordered-split .product-hero__panel--content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-lg);
  padding: 40px 80px;
  min-height: 652px;
}

.product-hero--bordered-split .product-hero__title {
  font-family: var(--font-2);
  font-size: 64px;
  line-height: 58px;
  font-weight: 500;
  color: var(--color-heading);
  margin: 0;
}

.product-hero--bordered-split .product-hero__lede {
  font-family: var(--font-1);
  font-size: 18px;
  line-height: 25px;
  color: var(--color-3);
  margin: 0;
}

.product-hero--bordered-split .product-hero__specs {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: none;
  border-radius: 0;
  padding: 0;
  align-items: stretch;
}

.product-hero--bordered-split .product-hero__spec {
  display: flex;
  /* Explicit: the legacy .product-hero__spec (line 951, from
     product-hero/configurator) sets flex-direction:column and would otherwise
     fall through, stacking the 24px hairline above its text as a square. */
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: var(--space-sm);
}

.product-hero--bordered-split .product-hero__spec-rule {
  flex: 0 0 24px;
  width: 24px;
  height: 1px;
  background: var(--color-2);
  display: block;
}

.product-hero--bordered-split .product-hero__spec-text {
  font-family: var(--font-1);
  font-size: 18px;
  line-height: 25px;
  color: var(--color-3);
}

.product-hero--bordered-split .product-hero__cta {
  align-self: flex-start;
  margin-top: var(--space-md);
  /* Figma button fill is #ECE7DC = --color-4. --color-5 (#FBFAF6) was a
     near-white miss, same slip already corrected on the hero CTA. */
  background: var(--color-4);
  color: var(--color-on-surface);
  font-family: var(--font-2);
  font-size: var(--text-sm);
  line-height: 17px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
}

.product-hero--bordered-split .product-hero__panel--media {
  overflow: hidden;
  padding: 0;
}

.product-hero--bordered-split .product-hero__panel--media img {
  width: 100%;
  height: 100%;
  min-height: 652px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
}


/* Layerly — Add the Figma page background: engraved botanical (attachment 138) as a fixed cover layer under a 90% plum scrim, on a new body rule (none existed) — 2026-09-14T19:36:37.529Z */
body {
  /* Figma applies "Plus Darker" (linear burn) to the engraved botanical over
     the maroon fill. CSS has no linear-burn, so blend the artwork INTO the
     fill with multiply — the closest well-supported equivalent and the same
     behaviour in kind: the asset is light cream with dark engraved lines, so
     open areas multiply to the maroon unchanged while the linework darkens
     it. The previous 90% flat scrim COVERED the image instead of blending it,
     which is why the texture read as washed out.
     Layer order is topmost-first: the gradient sits above with `normal` to
     pull the engraving back to a ground texture rather than a foreground
     illustration; lower its alpha to reveal more of the linework. */
  background-color: var(--color-bg);
  background-image: linear-gradient(rgba(55, 36, 38, 0.55), rgba(55, 36, 38, 0.55)),
    url("/wp-content/uploads/2026/09/20e0de4aa0e3b961fffe49596d53b0fd.webp");
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center top;
  background-size: cover, cover;
  background-attachment: fixed, fixed;
  background-blend-mode: normal, multiply;
}


/* Layerly — Give the states, process-steps, materials and text-intro sections the opaque maroon ground per their Figma frames, so the botanical texture only shows through dividers and margins — 2026-09-14T19:45:51.027Z */
/* NOTE: .states--triptych-statement is deliberately NOT in this group.
   Figma 6001:1520 gives it a transparent-to-maroon vertical gradient, and
   including it here flattened that to solid maroon. Its own rule (line ~2449)
   owns the gradient. */
.process-steps--numbered, .material-grid, .text-intro {
  background: var(--section-bg-color, var(--color-7));
}


/* Layerly — Build the step-split (centered title + steps card left, photo right) and the closing CTA (mirror of the inset-overlay hero with multiply gradient) to exact Figma geometry — 2026-09-14T19:50:59.845Z */
.step-split--card-photo {
  padding: 120px;
  background: var(--section-bg-color, var(--color-7));
}

.step-split--card-photo .step-split__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.step-split--card-photo .step-split__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 0 120px;
  text-align: center;
}

.step-split--card-photo .step-split__title {
  font-family: var(--font-2);
  font-size: 64px;
  line-height: 58px;
  font-weight: 500;
  color: var(--color-heading);
  max-width: 589px;
  margin: 0;
}

.step-split--card-photo .step-split__subtitle {
  font-family: var(--font-1);
  font-size: 18px;
  line-height: 25px;
  color: var(--color-3);
  max-width: 372px;
  margin: 0;
}

.step-split--card-photo .step-split__drop {
  width: 1px;
  height: 80px;
  background: var(--color-2);
  display: block;
}

.step-split--card-photo .step-split__row {
  display: flex;
  align-items: stretch;
  gap: var(--space-lg);
}

.step-split--card-photo.step-split--media-left .step-split__row {
  flex-direction: row-reverse;
}

.step-split--card-photo .step-split__panel {
  flex: 1 1 588px;
  min-width: 0;
  border: 1px solid var(--color-2);
  border-radius: var(--radius-lg);
}

.step-split--card-photo .step-split__panel--content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 80px;
  min-height: 700px;
}

.step-split--card-photo .step-split__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.step-split--card-photo .step-split__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: var(--space-lg);
  text-align: left;
}

.step-split--card-photo .step-split__label {
  font-family: var(--font-1);
  font-size: var(--text-xs);
  line-height: 17px;
  /* --color-2 (#8C7A69) on the maroon ground measures 3.54:1 — below the
     4.5:1 floor for 12px text. It is the hairline/rule colour, not a text
     colour. --color-6 (#D8C3B0) measures 8.6:1 on #372426. */
  color: var(--color-6);
}

.step-split--card-photo .step-split__item-title {
  font-family: var(--font-2);
  font-size: 24px;
  line-height: 26px;
  font-weight: 400;
  color: var(--color-heading);
  margin: 0;
}

.step-split--card-photo .step-split__body {
  font-family: var(--font-1);
  font-size: var(--text-sm);
  line-height: 20px;
  color: var(--color-3);
  margin: 0;
}

.step-split--card-photo .step-split__body p {
  margin: 0;
}

.step-split--card-photo .step-split__panel--media {
  overflow: hidden;
  padding: 0;
}

.step-split--card-photo .step-split__panel--media img {
  width: 100%;
  height: 100%;
  min-height: 700px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
}

.closing-cta--inset-overlay {
  padding: var(--space-lg) 40px;
  background: var(--section-bg-color, linear-gradient(180deg, var(--color-7) 0%, rgba(55, 36, 38, 0) 100%));
}

.closing-cta--inset-overlay .closing-cta__frame {
  position: relative;
  overflow: hidden;
  background: var(--color-1);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-2);
  aspect-ratio: 1360 / 752;
  min-height: 560px;
  isolation: isolate;
}

.closing-cta--inset-overlay .closing-cta__media {
  position: absolute;
  inset: 0;
}

.closing-cta--inset-overlay .closing-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.closing-cta--inset-overlay .closing-cta__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  padding: 80px;
  text-align: left;
  background: none;
}

.closing-cta--inset-overlay .closing-cta__overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(216, 195, 176, 0) 0%, #D8C3B0 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

.closing-cta--inset-overlay .closing-cta__title, .closing-cta--inset-overlay .closing-cta__body, .closing-cta--inset-overlay .closing-cta__actions {
  position: relative;
  z-index: 1;
}

.closing-cta--inset-overlay .closing-cta__title {
  font-family: var(--font-2);
  font-size: 64px;
  line-height: 58px;
  font-weight: 500;
  color: var(--color-3);
  max-width: 646px;
  margin: 0;
}

.closing-cta--inset-overlay .closing-cta__body {
  font-family: var(--font-1);
  font-size: 18px;
  line-height: 25px;
  color: var(--color-3);
  max-width: 442px;
  margin: 0;
}

.closing-cta--inset-overlay .closing-cta__body p {
  margin: 0;
}

.closing-cta--inset-overlay .closing-cta__actions {
  margin-top: var(--space-md);
}

.closing-cta--inset-overlay .closing-cta__button {
  display: inline-block;
  background: var(--color-4);
  color: var(--color-on-surface);
  font-family: var(--font-2);
  font-size: var(--text-sm);
  line-height: 17px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
}


/* Layerly — Build the centered-logo header and columns+legal-bar footer to exact Figma geometry, both over the shared texture — 2026-09-14T20:10:13.502Z */
.nav--centered-logo {
  /* Transparent at rest: the Figma header has no maroon band of its own — it
     sits on the page's engraved botanical ground (body, root frame 6001:1472)
     so the background runs continuously behind it. The maroon only appears in
     the sticky scrolled state below. */
  background-color: transparent;
  background-image: none;
  min-height: 80px;
  border-bottom: 0;
}

/* Sticky scrolled state: main.js toggles .is-scrolled past 10px. Maroon at 92%
   with a blur so the chrome separates from content scrolling under it.
   Cream/white nav text on this measures 13.4:1. */
.nav--centered-logo.is-scrolled {
  background-color: color-mix(in srgb, var(--color-7) 92%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid color-mix(in srgb, var(--color-2) 40%, transparent);
}

.nav--centered-logo .nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-lg);
  max-width: 1200px;
  padding: var(--space-xs) 0;
  min-height: 80px;
}

/* The rule above zeroes .wrap's own horizontal inset. At desktop that is
   invisible — max-width: 1200px centres the row in a wider viewport and
   yields ~40px of margin — but below 1200 the cap never engages, so the
   burger and CTA sat flush against the screen edges (measured: padding 0,
   burger x=0, CTA flush right at both 768 and 375).
   Same clamp as the hero/closing-CTA section inset, so the header's
   left/right edges line up with the hero card beneath it. Desktop is left
   untouched deliberately: adding padding there would inset the nav inside
   the 1200 wrap and break that alignment. */
@media (max-width: 1023px) {
  .nav--centered-logo .nav__inner {
    padding-left: clamp(16px, 3vw, 40px);
    padding-right: clamp(16px, 3vw, 40px);
  }
}

.nav--centered-logo .nav__menu {
  grid-column: 1;
  justify-self: start;
}

.nav--centered-logo .nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav--centered-logo .nav__list a {
  display: block;
  padding: var(--space-sm);
  font-family: var(--font-2);
  font-size: var(--text-md);
  line-height: 22px;
  font-weight: 400;
  color: var(--color-4);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
}

.nav--centered-logo .nav__list a:hover, .nav--centered-logo .nav__list a:focus-visible {
  color: var(--color-6);
}

.nav--centered-logo .nav__logo {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
}

.nav--centered-logo .nav__logo-img {
  width: 80px;
  max-width: 100%;
  height: auto;
  min-height: 30px;
  display: block;
}

.nav--centered-logo .nav__actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
}

.nav--centered-logo .nav__cta--outline {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--color-3);
  color: var(--color-3);
  font-family: var(--font-2);
  font-size: var(--text-sm);
  /* Normalised to 500 to match every other button on the site. Figma 6001:1474
     specifies w600 for the outlined header button, but a three-button system
     reads as one system at a single weight; client approved the change. */
  line-height: 17px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
}

.nav--centered-logo .nav__cta--outline:hover, .nav--centered-logo .nav__cta--outline:focus-visible {
  /* Fills with the same darker maroon the filled buttons invert to, so the
     whole button system shares one hover language. Cream label on
     #241719 = 14.1:1. Previously inverted to a white fill, which broke from
     that system and flashed bright against the dark chrome. */
  background: var(--color-7-dark);
  color: var(--color-4);
  border-color: var(--color-6);
}

.footer--columns-legal-bar {
  background-color: transparent;
  background-image: none;
  padding: 80px 0;
  padding-left: clamp(20px, 8.4vw, 120px);
  padding-right: clamp(20px, 8.4vw, 120px);
}

.footer--columns-legal-bar .footer__inner {
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.footer--columns-legal-bar .footer__nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
}

.footer--columns-legal-bar .footer__logo-img {
  width: 109px;
  max-width: 100%;
  height: auto;
  min-height: 40px;
  display: block;
}

.footer--columns-legal-bar .footer__columns {
  display: flex;
  gap: clamp(24px, 5vw, 72px);
}

.footer--columns-legal-bar .footer__column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer--columns-legal-bar .footer__eyebrow {
  font-family: var(--font-2);
  font-size: var(--text-xs);
  line-height: 17px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--color-text-muted);
  margin: 0;
}

.footer--columns-legal-bar .footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer--columns-legal-bar .footer__list a {
  font-family: var(--font-2);
  font-size: var(--text-md);
  line-height: 22px;
  font-weight: 400;
  color: var(--color-6);
  text-decoration: none;
}

.footer--columns-legal-bar .footer__list a:hover, .footer--columns-legal-bar .footer__list a:focus-visible {
  color: var(--color-4);
  text-decoration: underline;
}

.footer--columns-legal-bar .footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: var(--space-md);
  /* Opaque maroon (Figma 6029:93 fill #372426). Now that the footer itself is
     transparent this finally reads as a distinct bar — it was previously
     maroon-on-maroon and invisible. It also keeps the copyright legible over
     the botanical rather than sitting on busy texture. */
  background: var(--color-7);
  border-radius: var(--radius-md);
}

.footer--columns-legal-bar .footer__copyright {
  font-family: var(--font-1);
  font-size: var(--text-xs);
  line-height: 17px;
  color: var(--color-6);
  margin: 0;
}

.footer--columns-legal-bar .footer__socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.footer--columns-legal-bar .footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-4);
  color: var(--color-7);
  border-radius: var(--radius-full);
  text-decoration: none;
}

.footer--columns-legal-bar .footer__social-link svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.footer--columns-legal-bar .footer__social-link:hover, .footer--columns-legal-bar .footer__social-link:focus-visible {
  background: var(--color-6);
}


/* Layerly — Add hover/focus states to all filled buttons: invert to darker maroon (--color-7-dark) with cream text, plus focus-visible rings and a shared transition — 2026-09-14T20:38:04.611Z */
.hero--inset-overlay .hero__cta:hover, .hero--inset-overlay .hero__cta:focus-visible, .product-hero--bordered-split .product-hero__cta:hover, .product-hero--bordered-split .product-hero__cta:focus-visible, .closing-cta--inset-overlay .closing-cta__button:hover, .closing-cta--inset-overlay .closing-cta__button:focus-visible, .btn.btn--primary:hover, .btn.btn--primary:focus-visible {
  background: var(--color-7-dark);
  color: var(--color-4);
  border-color: var(--color-7-dark);
}

.hero--inset-overlay .hero__cta:focus-visible, .product-hero--bordered-split .product-hero__cta:focus-visible, .closing-cta--inset-overlay .closing-cta__button:focus-visible, .btn.btn--primary:focus-visible, .nav--centered-logo .nav__cta--outline:focus-visible {
  outline: 2px solid var(--color-6);
  outline-offset: 3px;
}

.hero--inset-overlay .hero__cta, .product-hero--bordered-split .product-hero__cta, .closing-cta--inset-overlay .closing-cta__button, .nav--centered-logo .nav__cta--outline, .btn.btn--primary {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}


/* Layerly — Responsive: make all bespoke sections fluid (clamp padding/type, wrapping cards, no fixed min-heights) so tablet and mobile stop overflowing and growing; fix footer/nav logo 0x0 collapse — 2026-09-14T21:23:30.182Z */
/* Hero + closing CTA are NOT in this group: Figma 6001:1501 / 6026:3099 both
   specify padding "24 40", not 120. Sweeping them in here inset the card by
   120px a side and shrank the hero image. Their own 40px rule (scaled below)
   applies instead. */
.states--triptych-statement, .step-split--card-photo, .product-hero--bordered-split, .divider--ornament-rule {
  padding-left: clamp(20px, 8.4vw, 120px);
  padding-right: clamp(20px, 8.4vw, 120px);
}

/* Figma: 40px each side at desktop, scaling down on small screens. */
.hero--inset-overlay, .closing-cta--inset-overlay {
  padding-left: clamp(16px, 3vw, 40px);
  padding-right: clamp(16px, 3vw, 40px);
}

.states--triptych-statement, .step-split--card-photo {
  padding-top: clamp(48px, 8.4vw, 120px);
  padding-bottom: clamp(48px, 8.4vw, 120px);
}

.states--triptych-statement .states__title, .step-split--card-photo .step-split__title, .product-hero--bordered-split .product-hero__title, .closing-cta--inset-overlay .closing-cta__title {
  font-size: clamp(30px, 4.6vw, 64px);
  line-height: 1.06;
}

.product-hero--bordered-split .product-hero__inner, .step-split--card-photo .step-split__row, .states--triptych-statement .states__list {
  flex-wrap: wrap;
}

.product-hero--bordered-split .product-hero__panel, .step-split--card-photo .step-split__panel {
  flex: 1 1 min(100%, 440px);
  min-width: 0;
}

.product-hero--bordered-split .product-hero__panel--content, .product-hero--bordered-split .product-hero__panel--media img, .step-split--card-photo .step-split__panel--content, .step-split--card-photo .step-split__panel--media img {
  min-height: 0;
}

.product-hero--bordered-split .product-hero__panel--media img, .step-split--card-photo .step-split__panel--media img {
  height: auto;
  aspect-ratio: 588 / 700;
}

.product-hero--bordered-split .product-hero__panel--content, .step-split--card-photo .step-split__panel--content {
  padding: clamp(24px, 4.5vw, 40px) clamp(24px, 6.5vw, 80px);
}

.states--triptych-statement .states__statement, .step-split--card-photo .step-split__head {
  padding-left: clamp(0px, 4vw, 120px);
  padding-right: clamp(0px, 4vw, 120px);
}

.hero--inset-overlay .hero__overlay, .closing-cta--inset-overlay .closing-cta__overlay {
  padding: clamp(24px, 5.5vw, 80px);
}

/* max-width is safe at every viewport; min-height:0 is NOT — unwrapped it
   beat the 560px at line 77 (equal specificity, later in file) and collapsed
   the desktop hero card from 752px to 562px. */
.hero--inset-overlay .hero__frame, .closing-cta--inset-overlay .closing-cta__frame {
  max-width: 100%;
}
@media (max-width: 767px) {
  /* NOT min-height: 0 — at mobile the aspect-ratio is deliberately dropped
     (line 140), so min-height is the ONLY thing giving these cards height.
     Zeroing it collapsed the hero to 343x2px, because the media and overlay
     children are both position:absolute and leave no content to size to.
     The horizontal overflow this was meant to fix is handled by the
     max-width: 100% above, which is the correct lever for a width problem. */
  .hero--inset-overlay .hero__frame, .closing-cta--inset-overlay .closing-cta__frame {
    min-height: 520px;
  }
}

/* Hero photo crop at tablet + mobile: the frame drops from a 1360/752
   landscape to a near-portrait card, so object-fit: cover crops the sides.
   object-position was never declared (default: center), which cut the subject
   off both edges. Anchor the crop to the RIGHT so the card keeps the right of
   the frame as it narrows. Desktop is untouched — it keeps the default centre
   crop at the Figma aspect ratio. */
@media (max-width: 1023px) {
  .hero--inset-overlay .hero__media img {
    object-position: right center;
  }
}

.hero--inset-overlay, .closing-cta--inset-overlay, .states--triptych-statement, .step-split--card-photo, .product-hero--bordered-split {
  max-width: 100%;
  overflow-x: clip;
}

.footer--columns-legal-bar .footer__logo, .nav--centered-logo .nav__logo {
  flex: 0 0 auto;
  display: block;
}

.footer--columns-legal-bar .footer__nav, .footer--columns-legal-bar .footer__columns, .footer--columns-legal-bar .footer__legal {
  flex-wrap: wrap;
}


/* Layerly — Fix the mobile menu panel: maroon ground instead of pure black, stacked full-width links with dividers, edge shadow — replaces the 164px black strip over the hero — 2026-09-14T21:23:57.129Z */
/* MUST stay inside this media query: [data-mobile-menu] is static markup
   present at EVERY viewport, not a mobile-only hook. Unwrapped, these rules
   stacked the desktop nav into a vertical column in the top-left corner. */
@media (max-width: 1023px) {
.nav--centered-logo .nav__menu[data-mobile-menu] {
  background: var(--color-7);
  border-left: 1px solid color-mix(in srgb, var(--color-2) 45%, transparent);
  box-shadow: -12px 0 32px rgba(0, 0, 0, .38);
  /* The base panel is ~164px wide — too narrow to hold "How It Works" on one
     line, so it read as a black strip over the hero rather than a menu.
     Give it a real panel width, capped so it never covers the whole screen. */
  width: min(320px, 82vw);
  max-width: none;
  padding-top: var(--space-xl);

  /* CLOSED BY DEFAULT. Nothing in this theme hid the drawer, so it sat open
     over the page at every small viewport even though the burger reports
     aria-expanded="false". Anchor it to the right edge, below the header, and
     slide it off-screen; the open state below brings it back. Also fixes the
     mobile case where the panel was half off-page. */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 200;
  overflow-y: auto;
  transform: translateX(101%);
  visibility: hidden;
  transition: transform .28s ease, visibility 0s linear .28s;
}

/* OPEN: main.js flips aria-expanded on the toggle. Support both that and an
   is-open class, so whichever mechanism the base chrome uses, the drawer
   opens — and it can never be trapped shut. */
.nav--centered-logo .nav__menu[data-mobile-menu].is-open,
.nav--centered-logo .nav__menu[data-mobile-menu][data-open],
.ly-burger[aria-expanded="true"] ~ .nav__menu[data-mobile-menu],
.nav--centered-logo:has(.ly-burger[aria-expanded="true"]) .nav__menu[data-mobile-menu] {
  transform: translateX(0);
  visibility: visible;
  transition: transform .28s ease, visibility 0s linear 0s;
}

.nav--centered-logo .nav__menu[data-mobile-menu] .nav__list {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-lg);
}

.nav--centered-logo .nav__menu[data-mobile-menu] .nav__list li {
  width: 100%;
}

.nav--centered-logo .nav__menu[data-mobile-menu] .nav__list a {
  display: block;
  width: 100%;
  padding: var(--space-md) var(--space-sm);
  font-size: var(--text-md);
  line-height: 1.4;
  color: var(--color-4);
  border-bottom: 1px solid color-mix(in srgb, var(--color-2) 22%, transparent);
}

.nav--centered-logo .nav__menu[data-mobile-menu] .nav__list li:last-child a {
  border-bottom: 0;
}

.nav--centered-logo .nav__menu[data-mobile-menu] .nav__list a:hover, .nav--centered-logo .nav__menu[data-mobile-menu] .nav__list a:focus-visible {
  color: var(--color-6);
}
} /* end @media (max-width: 1023px) — mobile menu panel */


/* Layerly — Colour the burger icon cream via currentColor — it was inheriting near-black and rendering invisible on the dark header — 2026-09-14T21:36:41.231Z */
.nav--centered-logo .ly-burger {
  color: var(--color-4);
  position: relative;
  z-index: 210;
}

.nav--centered-logo .ly-burger:focus-visible {
  outline: 2px solid var(--color-6);
  outline-offset: 3px;
}


/* Layerly — Hero: release the framework .wrap 1200px cap so the card reaches the Figma 1360x752 instead of 1152x637 — 2026-09-15T10:29:16.879Z */
.hero--inset-overlay > .wrap {
  max-width: none;
  padding-inline: 0;
  margin-inline: 0;
  width: 100%;
}