/* ═══════════════════════════════════════════════════════════════════════════
   THEME STYLES
   ---------------------------------------------------------------------------
   The source stylesheet minus its :root block, copied verbatim. Tokens live in
   tokens.css (loaded first). WordPress-specific additions are appended at the
   very end under a "WORDPRESS" section (source: tools/wp-additions.css), so
   the original stylesheet remains diffable against the source file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ==========================================================================
   Home Sketchery — Core stylesheet
   Structure: 1 Tokens · 2 Reset/Base · 3 Layout · 4 Typography · 5 Buttons
              6 Header · 7 Footer · 8 Hero · 9 Cards & grids · 10 Bands
              11 Forms · 12 Stepper · 13 Order flow · 14 Cart/Checkout
              15 Utilities
   Breakpoint rules live in responsive.css
   ========================================================================== */

/* 0 · WEBFONTS ============================================================ */
/* Brittany Signature is the brand's handwritten face — the one used for every
   script accent in the approved mocks. Self-hosted; see
   assets/fonts/BrittanySignature-LICENCE.txt (personal-use licence: a
   commercial licence is needed before this goes live). */
@font-face {
  font-family: "Brittany Signature";
  src: url("../fonts/BrittanySignature.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 1 · DESIGN TOKENS ======================================================= */


/* 2 · RESET & BASE ======================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-nav-open { overflow: hidden; }

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

/* [hidden] must beat component display rules */
[hidden] { display: none !important; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--spacing-lg) 0; }

:focus-visible {
  outline: 3px solid rgba(250, 60, 5, .45);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: 1rem; top: -100%;
  z-index: 1000;
  padding: .75rem 1.25rem;
  background: var(--color-secondary);
  color: #fff;
  border-radius: var(--radius-sm);
  transition: top var(--transition);
}
.skip-link:focus { top: 1rem; text-decoration: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 3 · LAYOUT ============================================================== */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

.section { padding-block: var(--spacing-2xl); }
.section--tight { padding-block: var(--spacing-xl); }
.section--flush-top { padding-top: 0; }
.section--alt   { background: var(--color-surface-sand); }
.section--blue  { background: var(--color-surface-blue); }
.section--cream { background: var(--color-surface-cream); }

.section__head {
  text-align: center;
  max-width: 52rem;
  margin: 0 auto var(--spacing-lg);
}
.section__head--narrow { max-width: 42rem; }
.section__head--wide { max-width: 62rem; }
.section__head > *:last-child { margin-bottom: 0; }

.stack > * + * { margin-top: var(--spacing-md); }

/* 4 · TYPOGRAPHY ========================================================== */
h1, h2, h3, h4, h5 {
  margin: 0 0 var(--spacing-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--color-heading);
  letter-spacing: -0.005em;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-body); }

p { margin: 0 0 var(--spacing-md); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }

.eyebrow {
  display: block;
  margin: 0 0 var(--spacing-sm);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-secondary);
}
.eyebrow--primary { color: var(--color-primary); }
.eyebrow--light   { color: var(--color-on-dark-muted); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.text-sm    { font-size: var(--fs-small); }
.text-muted { color: var(--color-muted); }
.text-primary { color: var(--color-primary); }
.text-center { text-align: center; }

.script {
  display: block;
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--color-secondary);
  line-height: 1.25;
  letter-spacing: .01em;
}
.script--lg { font-size: clamp(2.125rem, 1.45rem + 2.2vw, 3.1875rem); }
/* The receipt sign-off is set noticeably larger in the approved design */
/* long descenders need clearance from the line beneath */
.script--xl { font-size: clamp(3rem, 1.875rem + 3.75vw, 6.25rem); margin-bottom: .75rem; }
/* Brittany Signature has a very tall ascender, so a heading carrying an
   inline script accent needs extra leading or the capital rides up into the
   line above ("Love" over "House"). */
.h2--has-script { line-height: 1.5; }
.h2--has-script .script--inline { font-size: 1.3em; }

.script--inline {
  display: inline;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.45em;
  line-height: 0.8;
  letter-spacing: .01em;
}
.script--md { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 1.96875rem); }
.script--angled { transform: rotate(-9deg); text-align: left; }
.script__heart { display: block; width: 1.75rem; height: 1.75rem; margin-top: .375rem; color: var(--color-secondary); }
.script--sm { font-size: 2.125rem; }
.script--light { color: #fff; }
.script--primary { color: var(--color-primary); }

.rule-accent {
  width: 4.5rem;
  height: 3px;
  margin: 0 0 var(--spacing-md);
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}
.rule-accent--center { margin-inline: auto; }

/* Icons ------------------------------------------------------------------ */
.icon {
  width: 1.5rem; height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 1.125rem; height: 1.125rem; }
.icon--lg { width: 2.25rem; height: 2.25rem; }
.icon--xl { width: 3rem; height: 3rem; }
.icon--solid { fill: currentColor; stroke: none; }

.icon-well {
  display: grid;
  place-items: center;
  width: 3.75rem; height: 3.75rem;
  flex: none;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-secondary);
}
.icon-well--blue { background: var(--color-surface-blue-2); }
.icon-well--solid { background: var(--color-secondary); color: #fff; }
.icon-well--sm { width: 3.25rem; height: 3.25rem; }
/* The well owns its icon colour, whatever context it sits in */
.icon-well .icon, .callout .icon-well .icon { color: inherit; }

/* 5 · BUTTONS ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: .875rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 1.125rem; height: 1.125rem; stroke-width: 2.2; }

.btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.btn--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-primary);
}

.btn--secondary {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}
.btn--secondary:hover { background: #071A44; border-color: #071A44; }

.btn--outline {
  background: transparent;
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}
.btn--outline:hover { background: var(--color-secondary); color: #fff; }

.btn--outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
}
.btn--outline-light:hover { background: rgba(255, 255, 255, .14); }

.btn--white {
  background: #fff;
  border-color: var(--color-border-strong);
  color: var(--color-secondary);
}
.btn--white:hover { border-color: var(--color-secondary); }

.btn--link {
  padding: 0;
  border: 0;
  border-bottom: 2px solid var(--color-primary);
  border-radius: 0;
  background: none;
  color: var(--color-secondary);
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
}
.btn--link:hover { color: var(--color-primary); }

.btn--lg { padding: 1.0625rem 2.25rem; font-size: 1rem; }
.btn--sm { padding: .625rem 1.125rem; font-size: .8125rem; }
.btn--block { display: flex; width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .55;
  pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
}
.btn-row--center { justify-content: center; }

/* Small inline text action (Edit / Remove) -------------------------------- */
.link-action {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--color-secondary);
  background: none;
  border: 0;
}
.link-action:hover { color: var(--color-primary); text-decoration: underline; }
.link-action .icon { width: 1rem; height: 1rem; }

.link-sep { color: var(--color-border-strong); padding-inline: .5rem; }

/* 6 · SITE HEADER ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  /* caps nav needs the room; a wide gap pushed the actions past the gutter */
  gap: var(--spacing-md);
  min-height: var(--header-height);
  padding-block: .5rem;
}

.brand { display: flex; align-items: center; flex: none; }
.brand img { width: 11.5rem; height: auto; }
.brand:hover { text-decoration: none; }

.main-nav { margin-left: auto; }
.main-nav__list {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.main-nav__link {
  position: relative;
  display: block;
  padding: .375rem 0;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-secondary);
  white-space: nowrap;
}
.main-nav__link:hover { color: var(--color-primary); text-decoration: none; }
.main-nav__link[aria-current="page"] { color: var(--color-secondary); font-weight: 600; }
.main-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.125rem;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex: none;
}

/* Surfaced inside the slide-down panel once the header CTA is hidden */
.main-nav__cta { display: none; }

.cart-link {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  color: var(--color-secondary);
  border-radius: var(--radius-sm);
}
.cart-link:hover { color: var(--color-primary); }
.cart-link .icon { width: 1.75rem; height: 1.75rem; }
.cart-badge {
  position: absolute;
  top: .125rem; right: .125rem;
  min-width: 1.125rem;
  height: 1.125rem;
  padding-inline: .25rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1;
}

.nav-toggle {
  display: none;
  width: 2.75rem; height: 2.75rem;
  place-items: center;
  color: var(--color-secondary);
  border-radius: var(--radius-sm);
}
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* 7 · SITE FOOTER ========================================================= */
/* The approved mocks use five footer treatments that share one set of parts.
   README §9 lists which page carries which. */
.site-footer {
  background: var(--color-navy-footer);
  color: var(--color-on-dark);
  padding-block: var(--spacing-xl);
}
.site-footer__inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: nowrap;
}
.site-footer__brand { flex: none; }
.site-footer__brand img { width: 15rem; height: auto; }

.footer-nav { flex: 1 1 auto; min-width: 0; }
.footer-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .875rem;
}
.footer-nav__list a {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-on-dark);
}
.footer-nav__list a:hover { color: var(--color-primary); text-decoration: none; }

.social-list { display: flex; align-items: center; gap: .5rem; flex: none; }
.social-list a {
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  color: #fff;
}
.social-list a:hover { color: var(--color-primary); }
.social-list .icon { width: 1.75rem; height: 1.75rem; }

.site-footer__meta {
  flex: 0 0 19rem;
  padding-left: var(--spacing-lg);
  border-left: 1px solid rgba(255, 255, 255, .22);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--color-on-dark-muted);
}

.site-footer__meta a{ color: inherit; }
.site-footer__meta a:hover { color: #fff; }
.site-footer__legal { margin-top: .5rem; display: block; font-size: .8125rem; }
.site-footer__links { line-height: 1.8; }
/* wrap between links, never inside one ("Usage &" / "Licensing") */
.site-footer__links a { white-space: nowrap; }
.site-footer__sep { margin-inline: .375rem; opacity: .7; }

/* 8 · HERO ================================================================ */
.hero {
  position: relative;
  background: var(--color-surface-warm);
  overflow: hidden;
}
/* Column split matches the approved mocks: copy ~43%, media ~57% of the
   container. The media then bleeds right, so it renders at ~55% of the
   viewport — the same proportion the 1024px artboards use. */
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  align-items: center;
  gap: var(--spacing-lg);
  min-height: 19rem;
}
.hero__content { padding-block: var(--spacing-md); max-width: 36rem; }
.hero__content .btn-row { row-gap: var(--spacing-sm); }
.hero__title { margin-bottom: var(--spacing-sm); }
.hero__subtitle {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: var(--spacing-md);
}
.hero__lead { max-width: 30rem; margin-bottom: var(--spacing-md); }
.hero__media { position: relative; align-self: stretch; background: var(--color-surface-warm); }
/* Intrinsic height from the photo's own aspect ratio, so the band is exactly
   as tall as the artwork — the artboards place each hero photo at native size.
   The grid row still grows if the copy column is taller; the image then covers,
   anchored right (see object-position below). Pages set --hero-ar. */
.hero__media::before {
  content: "";
  display: block;
  padding-top: calc(100% / var(--hero-ar, 1.6));
}
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Every hero photo carries baked-in copy on its right edge ("SIMPLE.
     MEANINGFUL. TIMELESS.", "SAME ADDRESSES…", the script accents). Anchoring
     the crop right keeps that copy on screen at any viewport — residual
     cropping is taken off the left, which is plain wall. Pages override
     --hero-pos only when the subject genuinely sits elsewhere. */
  object-position: var(--hero-pos, 98% 50%);
}

/* Full-bleed media: image runs flush to the right edge of the viewport */
.hero--bleed .hero__media { margin-right: calc(-1 * var(--bleed)); }

/* Hero variants ---------------------------------------------------------- */
.hero--cream { background: linear-gradient(90deg, #F7F1EA 0%, #FBF6F1 100%); }
.hero--story .hero__title { font-family: var(--font-heading); text-transform: uppercase; }
.hero--story .hero__title .accent { color: var(--color-primary); display: block; }

/* Trust badges sitting under the hero copy */
.hero__badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem 1rem;
}
.hero__badges li {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  font-family: var(--font-heading);
  font-size: .8375rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-heading);
}
.hero__badges .icon { width: 1.75rem; height: 1.75rem; color: var(--color-primary); }

/* Page hero (compact, centred) ------------------------------------------- */
.page-hero {
  padding-block: var(--spacing-xl);
  text-align: center;
  background: linear-gradient(180deg, #FBF7F2 0%, #FFFFFF 100%);
}
/* This is the page's display heading in the artboards — set well above the
   standard h1, with the strapline wide enough to hold one line. */
.page-hero h1 { font-size: clamp(2.5rem, 1.7rem + 3vw, 4.5rem); }
.page-hero p { max-width: 46rem; margin-inline: auto; }
.page-hero .hero__subtitle { max-width: 60rem; }
.page-hero--wash {
  background:
    radial-gradient(60% 90% at 18% 0%, rgba(250, 190, 150, .30) 0%, rgba(250, 190, 150, 0) 70%),
    radial-gradient(55% 90% at 85% 5%, rgba(255, 214, 180, .32) 0%, rgba(255, 214, 180, 0) 70%),
    linear-gradient(180deg, #FCF4EC 0%, #FFFFFF 78%);
}

/* Three style thumbnails with script captions (how-it-works step 2) ------- */
.style-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.style-trio li { text-align: center; }
.style-trio img {
  width: 100%;
  aspect-ratio: 6 / 5;
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: .375rem;
}

.style-price-list { margin-bottom: var(--spacing-lg); }
.style-price-list dt {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-heading);
}
.style-price-list dd { margin: 0 0 .625rem; font-size: .9375rem; }

/* 9 · CARDS & GRIDS ======================================================= */
.grid { display: grid; gap: var(--spacing-md); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--wide-narrow { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.grid--table-script { display: grid; grid-template-columns: minmax(0, 1fr) minmax(7rem, 11rem); align-items: center; }
.grid--addons { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); }
.grid--narrow-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.grid--gap-lg { gap: var(--spacing-lg); }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.card__body { padding: var(--spacing-lg); }
.card__media { background: var(--color-surface-sand); }
.card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* Split columns separated by hairlines (mock 1/2 “three ways”) ------------ */
.split-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.split-3 > * {
  padding-inline: var(--spacing-lg);
  border-right: 1px solid var(--color-border);
}
.split-3 > *:last-child { border-right: 0; }
/* One panel split into thirds — the artboards butt the three style cards
   together on a warm off-white ground and separate them with white rules,
   rather than floating three cards with gaps between them. */
.split-3--cards {
  background: #F9F7F4;
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.split-3--cards > * { padding-inline: 0; margin-inline: 0; border-right: 2px solid #fff; }
.split-3--cards > *:last-child { border-right: 0; }

/* Add-on tiles (portraits page) ------------------------------------------ */
.addon-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .25rem .875rem; padding: var(--spacing-md); }
.addon-tile .icon { grid-row: 1 / span 3; color: var(--color-primary); margin-bottom: 0; }
.addon-tile h3 { font-size: 1.125rem; font-family: var(--font-primary); margin-bottom: 0; align-self: center; }
.addon-tile__price {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: .5rem;
}

.underline-accent {
  background-image: linear-gradient(var(--color-primary), var(--color-primary));
  background-size: 100% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
}

/* Style cards (three portrait styles) ------------------------------------ */
.style-card { text-align: center; }
.style-card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.style-card__name { margin-bottom: .25rem; }
.style-card__traits {
  font-size: .9375rem;
  color: var(--color-text);
  margin-bottom: .375rem;
}
.style-card__price { font-weight: 700; color: var(--color-heading); margin-bottom: var(--spacing-md); }

/* Detailed style card (portraits page) ----------------------------------- */
.style-detail { display: flex; flex-direction: column; height: 100%; }
.style-detail__head { text-align: center; padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm); }
.style-detail__head h3 { margin-bottom: .125rem; font-size: clamp(1.25rem, 1rem + 1.1vw, 2rem); }
.style-detail__tagline { font-family: var(--font-heading); font-size: 1.0625rem; color: var(--color-text); }
/* The artboards inset the artwork by roughly 4% of the card, not a full gutter */
.style-detail__media { padding-inline: var(--spacing-md); }
.style-detail__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-sm); }
.style-detail__body { padding: var(--spacing-md); flex: 1; display: flex; flex-direction: column; }
.style-detail__body .check-list { gap: .375rem; margin-bottom: var(--spacing-md); }
.style-detail__body > p { margin-bottom: var(--spacing-sm); }
.style-detail__body .btn { margin-top: auto; font-size: .8125rem; letter-spacing: .04em; padding-inline: 1rem; }

/* Check list ------------------------------------------------------------- */
.check-list { display: grid; gap: .625rem; margin-bottom: var(--spacing-lg); }
.check-list li { display: flex; align-items: flex-start; gap: .625rem; line-height: 1.45; }
.check-list .icon { color: var(--color-primary); margin-top: .1875rem; }
/* :not() keeps this off icons carrying an .icon--* modifier, so the dark
   "Why Home Sketchery?" panel keeps its oversized ticks. Bare ticks are drawn
   with a heavy stroke in the artboards. */
.check-list .icon:not([class*="icon--"]) { width: 1.25rem; height: 1.25rem; stroke-width: 3; }
.check-list--navy .icon { color: var(--color-secondary); }
.check-list--light { color: #fff; }
.check-list--light .icon { color: var(--color-primary); }

.bullet-list { display: grid; gap: .375rem; padding-left: 1.125rem; }
.bullet-list li { list-style: disc; }
.bullet-list li::marker { color: var(--color-primary); }

/* Feature strip (icon + title + copy, hairline separated) ----------------- */
.feature-strip { background: #fff; }
.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
  padding-inline: var(--spacing-md);
}
.feature .icon { color: var(--color-primary); }
/* The order builder's "Every Portrait Includes" strip draws these in navy,
   unlike the orange feature icons used on the marketing pages. */
.includes-panel .feature .icon { color: var(--color-secondary); }
.feature__title {
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0;
}
.feature__text { font-size: .9375rem; margin: 0; }
.feature--caps .feature__title { text-transform: uppercase; letter-spacing: .04em; font-size: 1.0625rem; }
.feature--row { flex-direction: row; align-items: flex-start; text-align: left; }

/* Inline icon list (mock 4 benefits column) ------------------------------ */
.icon-list { display: grid; gap: var(--spacing-md); }
.icon-list li { display: flex; align-items: center; gap: .875rem; font-size: .8375rem; }
.icon-list .icon { color: var(--color-secondary); }
.icon-list--divided {
  align-content: center;
  padding-left: var(--spacing-lg);
  border-left: 1px solid var(--color-border);
}

/* Full-bleed media beside a copy block (mock 1 realtor band) -------------- */
.feature-split {
  display: grid;
  grid-template-columns: minmax(0, .52fr) minmax(0, 1fr);
  align-items: stretch;
}
.feature-split__media { position: relative; align-self: center; }
.feature-split__media::before { content: ""; display: block; padding-top: calc(100% / var(--media-ar, 1.6)); }
.feature-split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.feature-split__body {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg) var(--bleed) var(--spacing-lg) var(--spacing-lg);
}
.feature-split--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.feature-split--reverse .feature-split__media { order: 2; }
.feature-split--reverse .feature-split__body {
  grid-template-columns: 1fr;
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) var(--bleed);
}

.memories-band { background: linear-gradient(90deg, #F6EFE7 0%, #FBF6F1 100%); }

/* Occasion cards --------------------------------------------------------- */
.occasion-card { text-align: center; }
.occasion-card img { width: 100%; aspect-ratio: 13 / 10; object-fit: cover; }
.occasion-card__body { padding: var(--spacing-md); }
.occasion-card h3 { font-size: 1.125rem; margin-bottom: .375rem; }
.occasion-card p { font-size: .875rem; margin: 0; }

/* Review cards ----------------------------------------------------------- */
.review-card { display: flex; flex-direction: column; }
.review-card img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.review-card__body { padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg); display: flex; flex-direction: column; flex: 1; }
.review-card__quote { margin-bottom: var(--spacing-md); }
.review-card__person { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.review-avatar {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  flex: none;
  border-radius: 50%;
  background: var(--color-surface-sand);
  font-weight: 600;
  font-size: .875rem;
  color: var(--color-secondary);
}
.review-card__role { font-weight: 700; color: var(--color-heading); font-size: .9375rem; }
.review-card__place { font-size: .875rem; color: var(--color-text); }

.stars { display: flex; gap: .1875rem; color: var(--color-primary); margin-bottom: .75rem; }
.stars .icon { width: 1.125rem; height: 1.125rem; fill: currentColor; stroke: none; }
.stars--center { justify-content: center; }

/* Compact testimonial (home page) ---------------------------------------- */
.testimonial { text-align: center; padding: var(--spacing-lg); }
.testimonial__quote { font-size: .9375rem; margin-bottom: .75rem; }
.testimonial__name { font-weight: 600; color: var(--color-heading); font-size: .9375rem; margin-bottom: .5rem; }

/* Numbered process steps ------------------------------------------------- */
.process { display: grid; gap: var(--spacing-lg); }
.process__item { display: flex; align-items: flex-start; gap: .875rem; }
.process__num {
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  flex: none;
  border-radius: 50%;
  background: var(--color-secondary);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}
.process__num--primary { background: var(--color-primary); }
.process__item h3 { font-size: 1.1875rem; margin-bottom: .1875rem; }
.process__item p { font-size: 1.0625rem; margin: 0; }

/* Horizontal “from photo to portrait” flow -------------------------------- */
.flow { display: flex; align-items: stretch; gap: var(--spacing-sm); }
.flow__step { flex: 1 1 0; min-width: 0; }
.flow__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .625rem; }
.flow__badge {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  flex: none;
  border-radius: 50%;
  background: var(--color-secondary);
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
}
.flow__step h3 {
  font-size: .9375rem;
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: .25rem;
}
.flow__step p { font-size: .8125rem; line-height: 1.45; margin: 0; }
.flow__icon { color: var(--color-secondary); }
.flow__arrow {
  display: grid;
  place-items: center;
  align-self: center;
  color: var(--color-border-strong);
  flex: none;
}

.flow-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-lg);
}
.flow-band__cta {
  text-align: center;
  padding-left: var(--spacing-lg);
  border-left: 1px solid var(--color-border);
}

/* Numbered “how it works” rows ------------------------------------------- */
.step-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: start;
  gap: var(--spacing-lg);
  padding-block: var(--spacing-xl);
  border-top: 1px solid var(--color-border);
}
.step-row:first-child { border-top: 0; padding-top: 0; }
.step-row__num {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  color: #C9C2BA;
}
.step-row__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); }
.step-row__body h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); margin-bottom: .75rem; }

/* Comparison table ------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: .9375rem;
  min-width: 44rem;
}
.compare-table tbody th { width: 11%; }
.compare-table thead td { width: 11%; background: #fff; border-color: transparent transparent var(--color-border) transparent; }
.compare-table th, .compare-table td {
  padding: .75rem 1rem;
  border: 1px solid var(--color-border);
  text-align: center;
}
.compare-table thead th { font-family: var(--font-heading); font-size: 1rem; color: var(--color-heading); }
.compare-table thead th:nth-child(2) { background: #FBEFE2; }
.compare-table thead th:nth-child(3) { background: #EEF1F5; }
.compare-table thead th:nth-child(4) { background: #E7F0FA; }
.compare-table tbody th { text-align: left; font-weight: 700; color: var(--color-heading); background: #FAFBFD; }
.compare-table tbody tr:last-child td { font-weight: 700; color: var(--color-heading); }

/* Pricing cards (realtors) ----------------------------------------------- */
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: var(--spacing-lg);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.price-card--featured {
  background: var(--color-primary-tint);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.price-card__flag {
  position: absolute;
  top: -1rem; left: 50%;
  transform: translateX(-50%);
  padding: .4375rem 1.125rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.price-card__name {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-heading);
  margin-bottom: .5rem;
}
.price-card__amount {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-heading);
}
.price-card__amount sup { font-size: .46em; vertical-align: .62em; top: auto; position: static; }
.price-card__qty { font-size: .9375rem; margin: .5rem 0 var(--spacing-md); }
.price-card .check-list { text-align: left; font-size: .9375rem; }
.price-card .btn { margin-top: auto; }

/* Four-up split with hairline dividers ----------------------------------- */
.split-3--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Realtor hero heading: two stacked words, second in accent -------------- */
.hero__title--stacked {
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.02;
}
.hero__title--stacked span { display: block; }
.hero__title--stacked .accent { color: var(--color-primary); }

/* For Realtors sets its wordmark far larger than the other stacked heroes and
   renders the first line in charcoal rather than the heading navy. */
.hero__title--display {
  font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem);
  color: var(--color-charcoal);
}
.hero__subtitle--sans {
  font-family: var(--font-primary);
  font-size: clamp(1.125rem, .95rem + .7vw, 1.5rem);
  font-weight: 500;
}

/* Dark “why us” panel beside the package grid ---------------------------- */
.packages-split {
  display: grid;
  /* ~39/61, the split used in the approved realtor artboard */
  grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
  align-items: stretch;
}
/* The dark "Why Home Sketchery?" list is set large; the price cards beside it are not */
.packages-split .panel-dark .check-list { gap: 1rem; font-size: 1.1875rem; }
.packages-split__body .section__head h2 { text-transform: uppercase; letter-spacing: .02em; }
.packages-split__body {
  padding: var(--spacing-2xl) var(--gutter) var(--spacing-2xl) var(--spacing-lg);
  background: #fff;
}

/* Portrait styles + process columns -------------------------------------- */
.styles-process {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
}
.styles-process__styles {
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl)
           var(--bleed);
}
.styles-process__how {
  padding: var(--spacing-xl) var(--bleed) var(--spacing-xl) var(--spacing-xl);
  background: var(--color-surface-cream);
  height: 100%;
}

/* Closing CTA band with photo + quote ------------------------------------ */
.closing-split {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) minmax(0, .9fr);
  align-items: stretch;
}
.closing-split__media { position: relative; align-self: center; }
.closing-split__media::before { content: ""; display: block; padding-top: calc(100% / var(--media-ar, 1.897)); }
.closing-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.closing-split__body {
  padding: var(--spacing-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.closing-split__quote {
  margin: 0;
  padding: var(--spacing-xl);
  background: var(--color-surface-cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.closing-split__quote blockquote { margin: .5rem 0 0; }
.closing-split__quote blockquote p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--color-heading);
}
.closing-split__quote figcaption { font-weight: 600; color: var(--color-heading); margin-bottom: .5rem; }


/* Contact page ----------------------------------------------------------- */
.contact-form-col { padding-right: var(--spacing-lg); border-right: 1px solid var(--color-border); }

.contact-list { display: grid; gap: var(--spacing-lg); }
.contact-list li { display: flex; align-items: flex-start; gap: var(--spacing-md); }
.contact-list h3 { margin-bottom: .125rem; }
.contact-list p { font-size: .9375rem; margin: 0; }
.contact-list a { color: var(--color-text); }

.social-list--dark a { color: var(--color-secondary); width: auto; height: auto; }
.social-list--dark a:hover { color: var(--color-primary); }

/* Warm paper-textured story section (our story) -------------------------- */
.story-section {
  background:
    radial-gradient(70% 120% at 15% 30%, rgba(238, 214, 186, .55) 0%, rgba(238, 214, 186, 0) 65%),
    radial-gradient(60% 110% at 88% 70%, rgba(243, 223, 199, .5) 0%, rgba(243, 223, 199, 0) 65%),
    #F7EFE4;
}

/* Dark panel ------------------------------------------------------------- */
.panel-dark {
  background: var(--color-charcoal);
  color: #fff;
  padding: var(--spacing-2xl) var(--spacing-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.panel-dark h2, .panel-dark .script { color: #fff; }
.panel-dark__footnote {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, .25);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}

.h2--compact { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); }

.pane-divided {
  padding-left: var(--spacing-lg);
  border-left: 1px solid var(--color-border);
}

/* Split feature (image + copy) ------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--spacing-xl);
}
.split--even { gap: var(--spacing-lg); }
.split__media img { width: 100%; border-radius: var(--radius-sm); }

/* Quote / callout blocks -------------------------------------------------- */
.callout {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  background: var(--color-surface-blue);
}
.callout--cream   { background: var(--color-surface-cream); }
.callout--success { background: var(--color-success-soft); }
.callout--warning { background: var(--color-warning-soft); }
.callout--danger  { background: var(--color-danger-soft); }
.callout .icon { color: var(--color-secondary); }
.callout h3 { font-size: 1.0625rem; margin-bottom: .25rem; }
.callout p { font-size: .9375rem; margin: 0; }
.callout--success .icon { color: var(--color-success); }
.callout--warning .icon { color: var(--color-warning); }

.note-strip {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-surface-sand);
  border-radius: var(--radius-sm);
}
.note-strip h3 { font-size: .9375rem; font-family: var(--font-primary); letter-spacing: .06em; text-transform: uppercase; margin-bottom: .25rem; }
.note-strip p { font-size: .875rem; margin: 0; }

.pull-quote {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--color-heading);
  text-align: center;
}

/* FAQ / accordion --------------------------------------------------------- */
.faq-item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: background var(--transition), border-color var(--transition);
}
/* The artboards tint one card as a highlight — being open is not itself a
   change of state, since every answer is shown expanded by default. */
.faq-item--featured { background: var(--color-surface-blue); border-color: #CFE0F2; }
.faq-item__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
  width: 100%;
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-sm);
  font-family: var(--font-heading);
  font-size: 1.4375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-heading);
  text-align: left;
}
.faq-item__q .icon { transition: transform var(--transition); margin-top: .3125rem; }
.faq-item__a {
  padding: 0 var(--spacing-lg) var(--spacing-lg);
  font-size: 1.0625rem;
}
.faq-item__a p:last-child { margin-bottom: 0; }

/* Legal / terms rows ----------------------------------------------------- */
.legal-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.legal-item h3 { display: flex; gap: .5rem; align-items: baseline; }
.legal-item h3 .num { color: var(--color-heading); }
.legal-item p, .legal-item li { font-size: .9375rem; }

.legal-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: start;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: #fff;
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
}
.legal-row__num {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-primary);
  padding-left: var(--spacing-lg);
  border-left: 2px solid var(--color-primary);
  line-height: 1.2;
}
.legal-row h3 { margin-bottom: .375rem; }
.legal-row p { font-size: .9375rem; }

/* 10 · CTA BANDS ========================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #F3EBE2 0%, #FBF6F1 45%, #F3EBE2 100%);
  padding-block: var(--spacing-2xl);
  text-align: center;
  isolation: isolate;
}
.cta-band__inner { position: relative; z-index: 2; }
.cta-band h2 { margin-bottom: .625rem; }
/* :not() so the band lead does not out-specify the script accent inside it */
.cta-band p:not(.script) { margin-bottom: var(--spacing-lg); font-size: var(--fs-lead); }

.cta-band__decor {
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: clamp(11rem, 25vw, 26rem);
  pointer-events: none;
  user-select: none;
}
/* Decor photos fade into the band so they read as one continuous scene */
.cta-band__decor--left {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%);
          mask-image: linear-gradient(to right, #000 55%, transparent 100%);
}
.cta-band__decor--right {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%);
          mask-image: linear-gradient(to left, #000 55%, transparent 100%);
}
.cta-band__decor--fill { top: 0; bottom: 0; height: 100%; object-fit: cover; }

.cta-band--photo { background-size: cover; background-position: center; }
.cta-band--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255, 255, 255, .55);
}
.cta-band--desert { background-image: url("../images/band-desert.png"); }
.cta-band--story  { background-image: url("../images/band-story.png"); }
.cta-band--tree   { background: linear-gradient(90deg, #EFE2CE 0%, #FAF3E8 50%, #F3E9DA 100%); }

.cta-band__script {
  position: absolute;
  top: 50%;
  right: 2vw;
  transform: translateY(-50%) rotate(-6deg);
  z-index: 2;
  text-align: left;
}
/* Bands whose right-hand decor is the framed artwork leave no clear wall for
   the accent, so it sits just inside the decor rather than on top of it. */
.cta-band__script--inset {
  /* tuck against the decor and cap the width, so the accent can never reach
     the centred button no matter how the band reflows */
  right: calc(clamp(11rem, 25vw, 26rem) + .5rem);
  max-width: 11rem;
  /* drop level with the button, where the centred block is narrowest, so the
     accent never runs into the lead line */
  top: auto;
  bottom: 14%;
  transform: rotate(-6deg);
}


/* Our Story long-read (mock 24) --------------------------------------------
   Alternating rows: the photograph runs flush to the page edge on its side,
   the numbered copy sits in the container on the other. */
.story-hero { background: #F9F5EE; }
.story-hero .hero__title--stacked span:not(.accent) { color: var(--color-secondary); }
/* the artboard sets this title larger than the standard hero */
.story-hero .hero__title { font-size: clamp(1.875rem, 1.25rem + 2.2vw, 3rem); }
.story-hero .hero__lead { font-size: var(--fs-lead); max-width: 34rem; }
.story-row__body p { font-size: 1.0625rem; }

.story-row {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  align-items: center;
  background: #fff;
}
.story-row--tint { background: #FAF6EF; }

.story-row__media { position: relative; align-self: stretch; overflow: hidden; }
.story-row__media::before {
  content: "";
  display: block;
  padding-top: calc(100% / var(--story-ar, 1.6));
}
.story-row__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-row__body { padding-block: var(--spacing-xl); }
.story-row__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}
.story-row__num {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}
.story-row__head h3 {
  margin: 0;
  font-size: clamp(1.5rem, 1.15rem + 1.25vw, 2.125rem);
  line-height: 1.15;
}
.story-row__body .btn { margin-top: var(--spacing-md); }

/* Photo on the left: the copy keeps the container gutter on its right only */
.story-row__body { padding-right: var(--bleed); padding-left: var(--spacing-xl); max-width: none; }
.story-row--reverse { grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); }
.story-row--reverse .story-row__media { order: 2; }
.story-row--reverse .story-row__body { padding-left: var(--bleed); padding-right: var(--spacing-xl); }

/* 11 · FORMS ============================================================== */
.form-panel {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.form-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-surface-blue);
  border-bottom: 1px solid var(--color-border);
}
.form-panel__head h2, .form-panel__head h3 { margin: 0; font-size: 1.375rem; }
.form-panel__head .hint { font-size: .875rem; color: var(--color-muted); }
.form-panel__body { padding: var(--spacing-lg); }

.field { margin-bottom: var(--spacing-md); }
.field:last-child { margin-bottom: 0; }
.field__label {
  display: block;
  margin-bottom: .375rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-heading);
}
.field__label .req { color: var(--color-primary); }
.field__label .opt { font-weight: 400; color: var(--color-muted); }
.field__hint { display: block; margin-top: .375rem; font-size: .8125rem; color: var(--color-muted); }
.field__counter { display: block; margin-top: .25rem; font-size: .8125rem; color: var(--color-muted); text-align: right; }

.field__control { position: relative; display: flex; align-items: center; gap: .5rem; }

.input, .select, .textarea {
  width: 100%;
  padding: .8125rem 1rem;
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input::placeholder, .textarea::placeholder { color: #93A3BC; }
.input:focus, .select:focus, .textarea:focus {
  outline: 0;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(11, 35, 87, .1);
}
.textarea { min-height: 7.5rem; resize: vertical; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2357' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.125rem;
  padding-right: 2.75rem;
}

.field--invalid .input,
.field--invalid .select,
.field--invalid .textarea { border-color: var(--color-danger); background: #FFFBFA; }

.field__error {
  display: none;
  align-items: center;
  gap: .375rem;
  margin-top: .375rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--color-danger);
}
.field--invalid .field__error { display: flex; }
.field__error .icon { width: 1rem; height: 1rem; }

.field-row { display: grid; gap: var(--spacing-md); }
.field-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-row--4 { grid-template-columns: 1.4fr .8fr 1fr 1.3fr; }

.form-section-title {
  margin: var(--spacing-lg) 0 var(--spacing-sm);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  font-size: 1.375rem;
}
.form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* Checkbox / radio ------------------------------------------------------- */
.check {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  cursor: pointer;
  font-size: .9375rem;
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  display: grid;
  place-items: center;
  width: 1.375rem; height: 1.375rem;
  flex: none;
  margin-top: .0625rem;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  transition: background var(--transition), border-color var(--transition);
}
.check__box .icon { width: .875rem; height: .875rem; stroke-width: 3.2; color: #fff; opacity: 0; }

/* Works for any control paired with a .check__box, not just .check */
input:checked + .check__box { background: var(--color-secondary); border-color: var(--color-secondary); }
input:checked + .check__box .icon { opacity: 1; }
input:focus-visible + .check__box { outline: 3px solid rgba(250, 60, 5, .45); outline-offset: 2px; }

.check--radio .check__box,
.check__box--radio { border-radius: 50%; }

/* Radio-style box used by the payment options */
.payment-option .check__box--radio .icon { width: .625rem; height: .625rem; }
.payment-option input:checked + .check__box--radio { background: var(--color-secondary); border-color: var(--color-secondary); }
.payment-option input:checked + .check__box--radio .icon { opacity: 1; }
.payment-option input:focus-visible + .check__box--radio { outline: 3px solid rgba(250, 60, 5, .45); outline-offset: 2px; }
.check--radio .check__box::after {
  content: "";
  width: .625rem; height: .625rem;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform var(--transition);
}
.check--radio input:checked + .check__box::after { transform: scale(1); }

.check--invalid .check__box { border-color: var(--color-danger); }

/* Choice card (portrait style selector) ---------------------------------- */
.choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.choice-card:hover { border-color: var(--color-border-strong); }
.choice-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice-card__media { padding: var(--spacing-md) var(--spacing-md) 0; }
.choice-card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); }
.choice-card__body { padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg); text-align: center; flex: 1; display: flex; flex-direction: column; }
.choice-card__name { margin-bottom: .125rem; }
.choice-card__price { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; color: var(--color-heading); margin-bottom: .625rem; }
.choice-card__desc { font-size: .9375rem; margin-bottom: var(--spacing-md); }
.choice-card .check-list { text-align: left; font-size: .9375rem; margin-bottom: var(--spacing-md); }
.choice-card__select {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  margin-top: auto;
  padding-top: var(--spacing-sm);
  font-weight: 600;
  color: var(--color-heading);
}
.choice-card__dot {
  display: grid;
  place-items: center;
  width: 1.5rem; height: 1.5rem;
  border: 2px solid var(--color-border-strong);
  border-radius: 50%;
  transition: border-color var(--transition);
}
.choice-card__dot::after {
  content: "";
  width: .625rem; height: .625rem;
  border-radius: 50%;
  background: var(--color-secondary);
  transform: scale(0);
  transition: transform var(--transition);
}
.choice-card:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-tint);
  box-shadow: var(--shadow-sm);
}
.choice-card:has(input:checked) .choice-card__dot { border-color: var(--color-secondary); }
.choice-card:has(input:checked) .choice-card__dot::after { transform: scale(1); }
.choice-card:has(input:focus-visible) { outline: 3px solid rgba(250, 60, 5, .45); outline-offset: 2px; }

/* Add-on rows ------------------------------------------------------------ */
.addon {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.addon:hover { border-color: var(--color-border-strong); }
.addon:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-tint); }
.addon input { position: absolute; opacity: 0; width: 0; height: 0; }
.addon .icon-art { color: var(--color-secondary); width: 2.25rem; height: 2.25rem; }
.addon h3 { font-size: 1.0625rem; margin-bottom: .125rem; }
.addon p { font-size: .875rem; margin: 0; }
.addon__price {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-heading);
  white-space: nowrap;
}

/* Upload dropzone -------------------------------------------------------- */
.dropzone {
  display: grid;
  place-items: center;
  gap: .5rem;
  padding: var(--spacing-2xl) var(--spacing-lg);
  text-align: center;
  background: var(--color-surface-blue);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), background var(--transition);
}
.dropzone.is-dragover { border-color: var(--color-primary); background: var(--color-primary-tint); }
.dropzone .icon-art { color: var(--color-secondary); width: 4rem; height: 4rem; }
.dropzone h2 { margin-bottom: .25rem; }
.dropzone p { margin-bottom: var(--spacing-md); }
.dropzone__hint { font-size: .875rem; color: var(--color-muted); margin: var(--spacing-sm) 0 0; }

.photo-preview { position: relative; }
.photo-preview img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-sm); }
.photo-preview__remove {
  position: absolute;
  top: .625rem; right: .625rem;
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--color-secondary);
  color: #fff;
}
.photo-preview__remove:hover { background: var(--color-primary); }
.photo-preview__remove .icon { width: 1.125rem; height: 1.125rem; stroke-width: 2.6; }

.thumb-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.thumb-row img { width: 4.5rem; height: 4rem; object-fit: cover; border-radius: var(--radius-sm); }
.thumb-row figure { margin: 0; }
.thumb-row figcaption { font-size: .8125rem; text-align: center; margin-top: .25rem; }

.example-box { padding: var(--spacing-md); border-radius: var(--radius-md); }
.example-box--good { background: var(--color-success-soft); }
.example-box--bad  { background: var(--color-danger-soft); }
.example-box__title { display: flex; align-items: center; gap: .5rem; font-weight: 700; margin-bottom: .75rem; }
.example-box--good .example-box__title { color: var(--color-success); }
.example-box--bad  .example-box__title { color: var(--color-danger); }

/* 12 · STEPPER ============================================================ */
.stepper { padding-block: var(--spacing-lg); background: #fff; }
.stepper__list { display: flex; align-items: flex-start; }
.stepper__item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
  min-width: 0;
}
.stepper__item::before,
.stepper__item::after {
  content: "";
  position: absolute;
  top: 1.375rem;
  height: 2px;
  background: var(--color-border-strong);
}
.stepper__item::before { left: 0;  right: 50%; margin-right: 1.625rem; }
.stepper__item::after  { left: 50%; right: 0;  margin-left: 1.625rem; }
.stepper__item:first-child::before,
.stepper__item:last-child::after { display: none; }

.stepper__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: #E3E8F0;
  color: var(--color-muted);
  font-weight: 700;
  font-size: 1.0625rem;
  transition: background var(--transition), color var(--transition);
}
.stepper__label {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--color-text);
  padding-inline: .25rem;
}
.stepper__item[data-state="current"] .stepper__dot { background: var(--color-secondary); color: #fff; }
.stepper__item[data-state="current"] .stepper__label { font-weight: 700; color: var(--color-heading); }
.stepper__item[data-state="done"] .stepper__dot { background: #fff; color: var(--color-secondary); border: 2px solid var(--color-secondary); }
.stepper__item[data-state="done"] .stepper__num { display: none; }
.stepper__item[data-state="done"] .stepper__check { display: block; }
.stepper__item[data-state="done"]::before,
.stepper__item[data-state="current"]::before { background: var(--color-secondary); }
.stepper__check { display: none; width: 1.125rem; height: 1.125rem; stroke-width: 3; }

/* Progress tracker (order tracking page) --------------------------------- */
.tracker { display: flex; align-items: flex-start; }
.tracker__item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
  padding-inline: .5rem;
}
.tracker__item::before {
  content: "";
  position: absolute;
  top: 2.25rem;
  left: -50%; right: 50%;
  margin-inline: 2.5rem;
  height: 3px;
  background: #DDD8D0;
}
.tracker__item:first-child::before { display: none; }
.tracker__dot {
  display: grid;
  place-items: center;
  width: 4.5rem; height: 4.5rem;
  border-radius: 50%;
  background: #E7E2DA;
  color: var(--color-secondary);
  border: 3px solid transparent;
}
.tracker__item h3 { font-size: 1.3125rem; margin: 0; }
.tracker__item p { font-size: 1rem; line-height: 1.45; margin: 0; }
.tracker__item[data-state="done"] .tracker__dot { background: var(--color-primary); color: #fff; }
.tracker__item[data-state="done"]::before { background: var(--color-primary); }
.tracker__item[data-state="current"] .tracker__dot { background: #fff; border-color: var(--color-primary); color: var(--color-primary); }
.tracker__item[data-state="current"]::before { background: var(--color-primary); }
.tracker__item[data-state="current"] h3 { color: var(--color-heading); }

/* Order tracking page ----------------------------------------------------- */
.tracking-page .eyebrow--primary { letter-spacing: .16em; }

.tracking-hero__figure { margin: 0; text-align: center; }
.tracking-hero__figure img {
  width: 100%;
  border: 8px solid #fff;
  box-shadow: var(--shadow-sm);
  border-radius: 2px;
}
.tracking-hero__figure figcaption { margin-top: var(--spacing-sm); transform: rotate(-4deg); }

.tracker-panel {
  padding: var(--spacing-xl) var(--spacing-lg);
  background: var(--color-surface-cream);
  border-radius: var(--radius-md);
}
/* display:flex would otherwise beat the UA's [hidden] rule */
.tracker-demo[hidden] { display: none; }
.tracker-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px dashed var(--color-border-strong);
}
.tracker-demo .btn[aria-pressed="true"] {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}

.panel-soft { padding: var(--spacing-lg); border-radius: var(--radius-md); height: 100%; }
.panel-soft--blue  { background: var(--color-surface-blue); }
.panel-soft--cream { background: var(--color-surface-cream); }
.panel-soft__title {
  margin-bottom: var(--spacing-md);
  padding-bottom: .5rem;
  border-bottom: 3px solid var(--color-primary);
  display: inline-block;
  font-size: 1.125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-family: var(--font-primary);
  font-weight: 700;
}
.panel-soft .detail-table { background: #fff; border-radius: var(--radius-sm); overflow: hidden; }

.status-head { display: flex; align-items: flex-start; gap: var(--spacing-md); }
.status-head__title { font-size: 1.625rem; margin-bottom: .25rem; }

.rule-flanked {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
}
.rule-flanked::before, .rule-flanked::after {
  content: "";
  flex: 1 1 auto;
  max-width: 10rem;
  height: 2px;
  background: var(--color-primary);
}


/* Terms of purchase page -------------------------------------------------- */
.terms-page {
  background:
    radial-gradient(55% 60% at 88% 4%, rgba(252, 229, 205, .55) 0%, rgba(252, 229, 205, 0) 70%),
    linear-gradient(180deg, #FEFAF5 0%, #FDF7F0 100%);
}
.terms-hero__figure { margin: 0; text-align: center; }
.terms-hero__figure img { width: 100%; }
.terms-hero__figure figcaption { margin-top: -.5rem; transform: rotate(-4deg); }
.terms-page .legal-row { box-shadow: var(--shadow-xs); }

/* 13 · ORDER FLOW ========================================================= */
.order-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--spacing-lg);
}
.order-layout--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.order-step { display: none; }
.order-step.is-active { display: block; animation: fade-in 320ms ease both; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Back and Continue sit side by side beneath the main column in the approved
   steps — not flung to opposite edges of the page. The pair spans the same
   width as the left column of .order-layout (~61.5%). */
.order-nav {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  align-items: start;
  gap: var(--spacing-md);
  max-width: 61.5%;
  margin-top: var(--spacing-xl);
}
.order-nav__side { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.order-nav__side--start { align-items: flex-start; }
.order-nav__side--end   { align-items: flex-end; }
.order-nav__hint { font-size: .9375rem; color: var(--color-text); }
.order-nav .btn { width: 100%; min-width: 0; }
.order-nav--single {
  display: flex;
  justify-content: center;
  position: relative;
  max-width: none;
}
.order-nav--single .order-nav__side { flex: 0 1 auto; }
.order-nav--single .btn { width: auto; min-width: 18rem; }
.order-nav__script {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-5deg);
  margin: 0;
  text-align: left;
}

/* Compact hero used above the order builder ------------------------------ */
.hero--compact .hero__inner { min-height: 0; }
.hero--compact .hero__content { padding-block: var(--spacing-lg); }

/* “Every portrait includes” panel (step 1) ------------------------------- */
.includes-panel {
  padding: var(--spacing-lg);
  background: var(--color-surface-blue-2);
  border-radius: var(--radius-md);
}
.includes-panel h3 { margin-bottom: var(--spacing-md); font-size: 1.375rem; }
.split-3--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.split-3--five .feature__text { font-size: .875rem; }

.secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: var(--spacing-lg) 0 var(--spacing-md);
  font-weight: 600;
  color: var(--color-heading);
}
.secure-note .icon { color: var(--color-secondary); }

/* Choice-card feature list uses spans so it can live inside a <label> ---- */
.choice-card .check-list { display: grid; gap: .5rem; }
.choice-card .check-list > span { display: flex; align-items: flex-start; gap: .5rem; }
.h3-like {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--color-heading);
}

.field__help { display: grid; place-items: center; color: var(--color-secondary); flex: none; }

.script-quote { margin: 0; text-align: center; }
.script-quote .script { margin-bottom: .5rem; }

.sticky-aside { position: sticky; top: calc(var(--header-height) + 1rem); }

/* Summary panel ---------------------------------------------------------- */
.summary {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-surface-blue);
  border-bottom: 1px solid var(--color-border);
}
.summary__head h2 { margin: 0; font-size: 1.75rem; }
.summary__body { padding: var(--spacing-lg); }
.summary__media { margin-bottom: var(--spacing-md); }
.summary__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }

.summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding-block: .5rem;
  font-size: .9375rem;
}
.summary__row--head { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 700; color: var(--color-heading); }
.summary__row--muted { color: var(--color-muted); }
.summary__divider { height: 1px; background: var(--color-border); margin-block: .625rem; }
.summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding-top: .875rem;
  border-top: 2px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-heading);
}
.summary__total--lg { font-size: 1.875rem; }
.summary__empty { color: var(--color-muted); font-size: .9375rem; }

/* Selected style preview ------------------------------------------------- */
.selected-style {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
}
.selected-style img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); }
.selected-style__price { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--color-heading); margin-bottom: .5rem; }

/* Review page rows ------------------------------------------------------- */
.review-block { margin-bottom: var(--spacing-md); }
/* The artboards give the artwork ~57% of the card, not an even split. */
.review-block__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
}
.review-block__grid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); }

.data-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-md); }
.data-list dt { font-weight: 700; color: var(--color-heading); font-size: .9375rem; }
.data-list dd { margin: 0; font-size: .9375rem; }

/* Definition table (order tracking) -------------------------------------- */
.detail-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.detail-table th, .detail-table td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--color-border); }
.detail-table th { font-weight: 500; color: var(--color-text); width: 45%; }
.detail-table td { font-weight: 600; color: var(--color-heading); }
.detail-table tr:last-child th, .detail-table tr:last-child td { border-bottom: 0; }

/* 14 · CART & CHECKOUT ==================================================== */
.line-item {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}
.line-item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); }
.line-item h3 { margin-bottom: .375rem; }
.line-item__price { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; color: var(--color-heading); }
.line-item__actions { display: flex; align-items: center; margin-top: var(--spacing-md); }

.addon-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}
.addon-line__name { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: var(--color-heading); }
.addon-line__price { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 700; color: var(--color-heading); }
.addon-line .icon-art { color: var(--color-secondary); }

.upsell-card { text-align: left; }
.upsell-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.upsell-card__body { padding: var(--spacing-md); }
.upsell-card h3 { font-size: 1.0625rem; font-family: var(--font-primary); margin-bottom: .25rem; }
.upsell-card__price { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 700; color: var(--color-heading); margin-bottom: .75rem; }

.payment-option {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: start;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.payment-option:has(input:checked) { border-color: var(--color-secondary); background: var(--color-surface-blue); }
.payment-option h3 { font-size: 1.0625rem; margin-bottom: .125rem; }
.payment-option p { font-size: .9375rem; margin: 0; }
.payment-logo { font-weight: 700; font-style: italic; color: #253B80; }
.payment-logo span { color: #179BD7; }

.card-brands { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.card-brand {
  display: grid;
  place-items: center;
  width: 3.25rem; height: 2.125rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--color-secondary);
  text-align: center;
  line-height: 1.1;
}

.confirm-hero { text-align: center; padding-block: var(--spacing-2xl) var(--spacing-xl); }
.confirm-hero__icon {
  display: grid;
  place-items: center;
  width: 7rem; height: 7rem;
  margin: 0 auto var(--spacing-lg);
  border-radius: 50%;
  background: #DCE9F8;
  color: var(--color-secondary);
}
.confirm-hero__icon .icon { width: 3.5rem; height: 3.5rem; stroke-width: 3; }
.confirm-hero h1 { font-size: var(--fs-display); margin-bottom: .25rem; }
.confirm-hero h2 { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); margin-bottom: .5rem; }

.thanks-block {
  padding: var(--spacing-xl);
  text-align: center;
  background: var(--color-surface-blue);
  border-radius: var(--radius-md);
}
.thanks-block__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: var(--spacing-md);
  color: var(--color-primary);
}
.thanks-block__divider::before,
.thanks-block__divider::after {
  content: "";
  width: 4.5rem;
  height: 2px;
  background: var(--color-primary);
}

.payment-receipt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-md);
}
.payment-receipt h3 { margin-bottom: .25rem; }

.step-index {
  display: inline-grid;
  place-items: center;
  width: 1.5rem; height: 1.5rem;
  margin-right: .375rem;
  border-radius: 50%;
  background: var(--color-secondary);
  color: #fff;
  font-family: var(--font-primary);
  font-size: .75rem;
  font-weight: 700;
  vertical-align: 2px;
}

/* Empty state ------------------------------------------------------------ */
.empty-state {
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-lg);
  background: var(--color-surface-blue);
  border-radius: var(--radius-md);
}
.empty-state .icon-art { width: 4rem; height: 4rem; margin: 0 auto var(--spacing-md); color: var(--color-secondary); }

/* Toast ------------------------------------------------------------------ */
.toast-region {
  position: fixed;
  right: 1.25rem; bottom: 1.25rem;
  z-index: 300;
  display: grid;
  gap: .625rem;
  max-width: calc(100vw - 2.5rem);
}
.toast {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1.25rem;
  border-radius: var(--radius-md);
  background: var(--color-secondary);
  color: #fff;
  box-shadow: var(--shadow-lg);
  font-size: .9375rem;
  animation: toast-in 260ms ease both;
}
.toast--success { background: #10743B; }
.toast--error   { background: var(--color-danger); }
.toast .icon { color: #fff; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Badges ----------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .625rem;
  border-radius: var(--radius-pill);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.badge--success { background: var(--color-success-soft); color: #10743B; }
.badge--free    { background: transparent; color: var(--color-heading); font-family: var(--font-heading); font-size: 1.125rem; }

/* Standalone marketing documents (flyer + outreach email) ---------------- */
.doc-page { background: var(--color-surface-sand); }

.doc-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-block: .75rem;
  background: var(--color-navy-deep);
  color: var(--color-on-dark);
}
.doc-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.flyer, .email-doc {
  max-width: 64rem;
  margin: var(--spacing-xl) auto;
  background: #fff;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Flyer ------------------------------------------------------------------ */
.flyer__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg) var(--spacing-xl) 0;
}
.flyer__logo { width: 17rem; height: auto; }
.flyer__tagline {
  font-size: 3.125rem;
  flex: 1 1 18rem;
  margin: 0;
  padding-left: var(--spacing-lg);
  border-left: 3px solid var(--color-primary);
  font-size: clamp(1.625rem, 1.1rem + 1.5vw, 2.25rem);
}
.flyer__tagline sup, .email-doc__tagline sup { font-size: .4em; vertical-align: .9em; }
/* The flyer is a fixed 1024px document: its type is sized from the artboard
   directly rather than inheriting the site's screen scale, which left every
   element around 40% too small. */
.flyer__hero {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-xl);
}
/* Artwork bleeds to the top and right edges of the sheet, as in the artboard */
.flyer__hero img {
  width: calc(100% + var(--spacing-xl));
  margin: calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-xl)) calc(-1 * var(--spacing-lg)) 0;
  max-width: none;
}
.flyer__hero .eyebrow { font-size: 1.1875rem; letter-spacing: .16em; }
.flyer__hero .lead { font-size: 1.625rem; line-height: 1.32; }
.flyer__title {
  font-size: 3.875rem;
  line-height: 1.02;
  margin-bottom: var(--spacing-md);
}
.flyer .rule-accent { width: 15rem; height: 5px; margin-block: .75rem 1rem; }
.flyer .check-list { gap: .5rem; font-size: 1.1875rem; }
.flyer .check-list .icon:not([class*="icon--"]) { width: 1.5rem; height: 1.5rem; }
.flyer .eyebrow { font-size: 1.1875rem; letter-spacing: .14em; }
.flyer__qr .script--md { font-size: 1.8125rem; }
.flyer__qr .btn { font-size: .9375rem; }
.flyer__qr .text-sm { font-size: 1rem; }
.flyer__benefits {
  margin-inline: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-md);
  background: var(--color-surface-cream);
  border-radius: var(--radius-md);
}
.flyer__benefits .icon { color: var(--color-secondary); width: 2.75rem; height: 2.75rem; }
.flyer__benefits .split-3 > * { border-right-color: var(--color-primary); }
.flyer__benefits .feature__title { font-size: 1.1875rem; line-height: 1.3; }
.flyer__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .75fr);
  gap: var(--spacing-xl);
  padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);
}
.flyer__bottom img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); }
.flyer__style-name {
  margin: .5rem 0 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-heading);
}
.flyer__list-divided { padding-left: var(--spacing-lg); border-left: 1px solid var(--color-border); }
.flyer__qr { text-align: center; }
/* The artboard sets the call-out in orange with a hand-drawn arrow curving
   into the code, and frames the code itself in orange. */
.flyer__qr-label { position: relative; display: inline-block; }
.flyer__qr-arrow {
  position: absolute;
  right: -3.25rem;
  bottom: -1rem;
  width: 3.5rem;
  height: 3rem;
  color: var(--color-primary);
}
.flyer__qr img {
  /* the 3:2 crop on .flyer__bottom img is for the style thumbnails — applied
     to a QR it clips the finder patterns and the code stops scanning */
  aspect-ratio: 1;
  object-fit: contain;
  width: 100%;
  max-width: 13rem;
  margin: .75rem auto 0;
  border: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
}

/* Outreach email --------------------------------------------------------- */
.email-doc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--color-navy-deep);
}
.email-doc__logo {
  width: 17rem; height: auto;
  background: #fff;
  padding: .625rem .875rem;
  border-radius: var(--radius-sm);
}
.email-doc__tagline {
  flex: 1 1 18rem;
  margin: 0;
  padding-left: var(--spacing-lg);
  border-left: 3px solid var(--color-primary);
  color: #fff;
  font-size: 2.3125rem;  /* fixed 1024px sheet, so sized from the artboard */
}
.email-doc__body { padding: var(--spacing-xl); font-size: 1.0625rem; }
.email-doc__benefits {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-lg);
  background: var(--color-surface-cream);
}
.email-doc__benefits .icon { color: var(--color-secondary); }
.email-doc__benefits .feature__title { font-size: 1rem; }
.email-doc__signature { margin: .25rem 0; }
.email-doc__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
}
.email-doc__contacts li { display: flex; align-items: center; gap: .625rem; }
.email-doc__contacts .icon { color: var(--color-secondary); }
.email-doc__contacts a { color: var(--color-text); }
.email-doc__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-md) var(--spacing-xl) var(--spacing-lg);
  border-top: 2px solid var(--color-primary);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-heading);
}
.email-doc__foot span + span { padding-left: var(--spacing-lg); border-left: 2px solid var(--color-primary); }

/* 15 · UTILITIES ========================================================== */
.items-center { align-items: center !important; }
.items-start  { align-items: start !important; }
.span-all     { grid-column: 1 / -1; }
.gap-sm       { gap: var(--spacing-sm) !important; }
.stack--tight { --spacing-md: .75rem; }
.pt-0         { padding-top: 0 !important; }
.radius-0     { border-radius: 0 !important; }

.u-caps       { text-transform: uppercase; letter-spacing: .02em; }
.u-caps-sm    { text-transform: uppercase; font-size: 1rem; letter-spacing: .04em; }
.u-normal     { font-weight: 400; }
.u-reset-fieldset { border: 0; padding: 0; margin: 0; }

.icon--navy   { color: var(--color-secondary); }
.icon--center { margin-inline: auto; }
.icon--inline { display: inline-block; vertical-align: -3px; }

.img-16x9 {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.headline-sm {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-heading);
}

.cta-band__script--left { left: 3vw; right: auto; }


.p-lg { padding: var(--spacing-lg); }
.mb-sm { margin-bottom: var(--spacing-sm) !important; }

.quote-mark { color: var(--color-primary); opacity: .55; }
.pull-quote--sm { font-size: 1.125rem; }
.card--cream { background: var(--color-surface-cream); }
.icon-well--white { background: #fff; }
.field__error--block { display: flex; }
.summary__body--ruled { border-top: 1px solid var(--color-border); }
.payment-logo--lg { font-size: 2rem; }
.payment-logo--md { font-size: 1.5rem; }
.review-block__grid--media { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }

.mt-0  { margin-top: 0 !important; }
.mt-sm { margin-top: var(--spacing-sm) !important; }
.mt-md { margin-top: var(--spacing-md) !important; }
.mt-lg { margin-top: var(--spacing-lg) !important; }
.mt-xl { margin-top: var(--spacing-xl) !important; }
.mb-0  { margin-bottom: 0 !important; }
.mb-md { margin-bottom: var(--spacing-md) !important; }
.mb-lg { margin-bottom: var(--spacing-lg) !important; }
.mb-xl { margin-bottom: var(--spacing-xl) !important; }

.is-hidden { display: none !important; }
.no-bleed  { overflow: hidden; }

/* Reveal-on-scroll (progressively enhanced; safe without JS) -------------- */
.reveal { opacity: 0; transform: translateY(18px); }
.js .reveal { transition: opacity 620ms ease, transform 620ms ease; }
.reveal.is-visible, .no-js .reveal { opacity: 1; transform: none; }

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

@media print {
  .site-header, .site-footer, .cta-band, .order-nav, .toast-region { display: none !important; }
  body { color: #000; }
}

/* ==========================================================================
   Home Sketchery — Responsive rules
   Desktop 1440+ / 1200 / 1024 · Tablet 834 / 768 · Mobile 430 / 390 / 375
   Written desktop-first so the core sheet stays the canonical desktop design.
   ========================================================================== */

/* ---- 1440px and up: allow the layout a little more breathing room ------- */
@media (min-width: 1440px) {
  /* The artboards are a single 1024px canvas whose type fills it. Holding the
     type at 16px while the container grows makes a large monitor read small
     and sparse next to the mock, so above 1440 the root scales with the
     viewport and every rem-based size — type, spacing, header — follows it.
     The clamp resolves to exactly 16px at 1440, so that breakpoint is
     unchanged. */
  html { font-size: clamp(16px, 0.9vw + 3px, 20px); }

  :root {
    /* cap chosen so container ÷ root font stays ~84 at every width, the ratio
       the 1440 layout was tuned at — otherwise type outgrows its columns */
    --container-width: min(93vw, 1680px);
    --gutter: 2rem;
  }
  .hero__content { max-width: 38rem; }
}

/* ---- 1201-1439: caps nav is wider, and the container is still capped at
       1200 here, so tighten the tracking to keep it on one row ------------ */
@media (min-width: 1201px) and (max-width: 1439px) {
  .brand img { width: 15rem; }
  .main-nav__list { gap: 1.375rem; }
  .main-nav__link { font-size: .8125rem; letter-spacing: .04em; }

  /* container is still capped at 1200 here, so the meta takes its own row and
     the caps footer nav stays on one line like every other desktop width */
  .site-footer__inner { flex-wrap: wrap; }
  .site-footer__meta {
    flex: 1 1 100%;
    padding-left: 0;
    border-left: 0;
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, .18);
  }
}

/* ---- below 1280 the band decor shrinks faster than the centred button, so
       the inset accent would sit on the button; drop it rather than crowd it */
@media (max-width: 1279px) {
  .cta-band__script--inset { display: none; }
}

/* ---- 1200px: pull the nav in ------------------------------------------- */
@media (max-width: 1200px) {
  .brand img { width: 12rem; }

  .site-footer__inner { flex-wrap: wrap; gap: var(--spacing-lg); }
  .site-footer__meta {
    flex: 1 1 100%;
    padding-left: 0;
    border-left: 0;
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, .18);
    text-align: left;
  }

  .site-header__inner { gap: var(--spacing-md); }

  /* Collapse the main navigation into the slide-down panel */
  .nav-toggle { display: grid; }
  .header-actions { margin-left: auto; }

  .main-nav {
    position: fixed;
    inset: var(--header-height) 0 0;
    z-index: 90;
    margin: 0;
    padding: var(--spacing-lg) var(--gutter) var(--spacing-2xl);
    background: #fff;
    overflow-y: auto;
    transform: translateY(-1rem);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .main-nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .main-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: var(--container-width);
    margin-inline: auto;
  }
  .main-nav__link {
    padding: 1rem .25rem;
    font-size: 1.125rem;
    border-bottom: 1px solid var(--color-border);
  }
  .main-nav__link[aria-current="page"]::after { display: none; }
  .main-nav__link[aria-current="page"] { color: var(--color-primary); }

  .header-actions .btn { padding: .75rem 1.125rem; font-size: .8125rem; }
}

/* ---- 1100px: dense marketing grids relax ------------------------------- */
@media (max-width: 1100px) {
  :root { --header-height: 4.5rem; }

  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split-3--five { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--spacing-lg); }
  .split-3--five > *:nth-child(3n) { border-right: 0; }
  .field-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .flow { flex-wrap: wrap; row-gap: var(--spacing-lg); }
  .flow__step { flex: 0 0 calc(50% - var(--spacing-md)); }
  .flow__arrow { display: none; }
  .flow-band { grid-template-columns: 1fr; }
  .flow-band__cta { padding-left: 0; border-left: 0; padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border); }

  .cta-band__decor { width: 13rem; }
  .cta-band__script { display: none; }

  .order-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .line-item { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto; }
}

/* ---- 1024px: tablet landscape ------------------------------------------ */
@media (max-width: 1024px) {
  :root {
    --spacing-2xl: 3.5rem;
    --spacing-3xl: 4.5rem;
  }

  /* Marketing layout */
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-3 { grid-template-columns: 1fr; gap: var(--spacing-lg); }
  .split-3 > * { border-right: 0; border-bottom: 1px solid var(--color-border); padding: 0 0 var(--spacing-lg); }
  .split-3 > *:last-child { border-bottom: 0; padding-bottom: 0; }
  .split-3--cards > * { margin-inline: 0; }

  .split-3--four,
  .split-3--five { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--spacing-lg); }
  .split-3--four > *,
  .split-3--five > * { border-right: 1px solid var(--color-border); border-bottom: 0; padding-bottom: 0; }
  .split-3--four > *:nth-child(2n),
  .split-3--five > *:nth-child(2n) { border-right: 0; }
  .split-3--five > *:last-child { border-right: 0; }

  .hero__inner { gap: var(--spacing-lg); min-height: 0; }
  .hero__content { padding-block: var(--spacing-xl); }

  .step-row { grid-template-columns: 3.5rem minmax(0, 1fr); row-gap: var(--spacing-md); }
  .step-row__media { grid-column: 2; }
  .step-row__body  { grid-column: 2; }

  .order-layout,
  .order-layout--even { grid-template-columns: 1fr; }
  /* single column, so the step controls span it rather than the desktop 61.5% */
  .order-nav { max-width: none; }
  .sticky-aside { position: static; }

  .review-block__grid,
  .review-block__grid--media,
  .selected-style { grid-template-columns: 1fr; }
}

/* ---- 900px ------------------------------------------------------------- */
@media (max-width: 900px) {
  /* the script captions are set large on desktop; they must not outgrow
     their column once the layout narrows */
  .script--sm { font-size: 1.75rem; }

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

  .split { grid-template-columns: 1fr; gap: var(--spacing-lg); }
  .panel-dark { padding: var(--spacing-xl) var(--spacing-lg); }
  .pane-divided { padding-left: 0; border-left: 0; padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border); }

  .packages-split,
  .styles-process,
  .closing-split { grid-template-columns: 1fr; }
  .packages-split__body,
  .styles-process__styles,
  .styles-process__how { padding: var(--spacing-xl) var(--gutter); }
  .closing-split__media img { min-height: 0; aspect-ratio: 16 / 9; }

  /* Our Story rows stack: photo above its copy */
  .story-row,
  .story-row--reverse { grid-template-columns: 1fr; }
  .story-row--reverse .story-row__media { order: 0; }
  .story-row__media { --story-ar: 1.7; }
  .story-row__body,
  .story-row--reverse .story-row__body {
    padding-inline: var(--gutter);
    max-width: var(--container-width);
    margin-inline: auto;
    padding-block: var(--spacing-lg);
  }

  .feature-split { grid-template-columns: 1fr; }
  .feature-split__media img { min-height: 0; aspect-ratio: 16 / 9; }
  .feature-split__body { grid-template-columns: 1fr; padding: var(--spacing-xl) var(--gutter); }
  .icon-list--divided { padding-left: 0; border-left: 0; padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border); }


  .data-list { grid-template-columns: 1fr; }
}

/* ---- 834px / 768px: tablet portrait ------------------------------------ */
@media (max-width: 834px) {
  :root {
    --gutter: 1.25rem;
    --spacing-2xl: 3rem;
  }

  .hero__inner { grid-template-columns: 1fr; }
  .hero--bleed .hero__media { margin-inline: calc(-1 * var(--bleed)); }
  .hero__content { padding-block: var(--spacing-xl) var(--spacing-lg); max-width: none; }
  .hero__lead { max-width: none; }
  .hero__media { order: -1; }
  /* Stacked: the photo runs full width, so give it a landscape ratio
     rather than its native one. */
  .hero__media { --hero-ar: 1.6; }

  .hero--media-below .hero__media { order: 0; }

  /* Stepper becomes a compact horizontal scroller */
  .stepper__list { overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; }
  .stepper__item { flex: 0 0 8.5rem; }
  .stepper__label { font-size: .8125rem; }

  .tracker { flex-wrap: wrap; row-gap: var(--spacing-lg); }
  .tracker__item { flex: 0 0 33.333%; }
  .tracker__item::before { display: none; }

  .order-nav__script { display: none; }
  /* stack with the primary action on top (grid at desktop, flex here) */
  .order-nav { display: flex; flex-direction: column-reverse; align-items: stretch; max-width: none; }
  .order-nav__side { align-items: stretch !important; }
  .order-nav .btn { min-width: 0; width: 100%; }
  .order-nav__hint { text-align: center; }

  .line-item { grid-template-columns: 1fr; }
  .line-item__price-col { order: -1; }

  .addon { grid-template-columns: auto auto minmax(0, 1fr); row-gap: .5rem; }
  .addon__price { grid-column: 3; justify-self: end; }

  .addon-line { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: .5rem; }
  .addon-line__actions { grid-column: 2 / -1; justify-self: end; }

  .cta-band__decor { width: 10rem; opacity: .85; }
  .confirm-hero__icon { width: 5.5rem; height: 5.5rem; }
  .confirm-hero__icon .icon { width: 2.75rem; height: 2.75rem; }

  .legal-row { grid-template-columns: auto minmax(0, 1fr); }
  .legal-row .icon-well { grid-row: span 2; }
  .legal-row__num { grid-column: 2; padding-left: var(--spacing-md); }
  .legal-row__body { grid-column: 2; }
}

@media (max-width: 900px) {
  .grid--wide-narrow, .grid--narrow-wide, .grid--table-script, .grid--addons { grid-template-columns: 1fr; }
  .script--angled { transform: none; text-align: center; }
  .script__heart { margin-inline: auto; }
}

@media (max-width: 768px) {
  .grid--2 { grid-template-columns: 1fr; }
  .contact-form-col { padding-right: 0; border-right: 0; padding-bottom: var(--spacing-xl); border-bottom: 1px solid var(--color-border); }
  .field-row--2 { grid-template-columns: 1fr; }
  .form-panel__head { flex-direction: column; align-items: flex-start; gap: .25rem; }
}

/* ---- 640px: small tablet → phone --------------------------------------- */
@media (max-width: 640px) {
  :root {
    --spacing-xl: 2.25rem;
    --spacing-2xl: 2.75rem;
    --header-height: 4.25rem;
  }

  .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; }

  .brand img { width: 10.5rem; }
  .header-actions { gap: .25rem; }
  .header-actions .btn--primary { display: none; }
  .cart-link { width: 2.5rem; height: 2.5rem; }
  .cart-link .icon { width: 1.5rem; height: 1.5rem; }

  /* Order Now is surfaced at the bottom of the mobile nav panel instead */
  .main-nav__cta { display: block; margin-top: var(--spacing-lg); }
  .main-nav__cta .btn { width: 100%; }

  .hero__badges { grid-template-columns: 1fr; gap: .625rem; }

  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
  .btn--link { width: auto; }
  .link-action { width: auto; }

  .cta-band { padding-block: var(--spacing-xl); }
  .cta-band__decor { display: none; }

  .feature-strip .split-3 > * { padding-bottom: var(--spacing-md); }

  .step-row { grid-template-columns: 1fr; padding-block: var(--spacing-lg); }
  .step-row__num { grid-column: 1; }
  .step-row__media, .step-row__body { grid-column: 1; }

  .form-panel__body,
  .summary__body,
  .card__body,
  .line-item,
  .addon,
  .addon-line,
  .legal-item,
  .legal-row,
  .selected-style,
  .review-block__grid { padding: var(--spacing-md); }

  .faq-item__q { padding: var(--spacing-md); font-size: 1.0625rem; }
  .faq-item__a { padding: 0 var(--spacing-md) var(--spacing-md); }

  .legal-item { grid-template-columns: 1fr; gap: var(--spacing-md); }

  .tracker__item { flex: 0 0 50%; }
  .tracker__dot { width: 3rem; height: 3rem; }

  .thumb-row img { width: 4.25rem; height: 3.75rem; }

  .dropzone { padding: var(--spacing-xl) var(--spacing-md); }
  .dropzone .icon-art { width: 3rem; height: 3rem; }

  .script--sm { font-size: 1.3125rem; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: var(--spacing-md); }
  .footer-nav__list { gap: .875rem 1.125rem; }

  .compare-table { min-width: 34rem; font-size: .875rem; }
  .compare-table th, .compare-table td { padding: .625rem .75rem; }

  .toast-region { right: 1rem; left: 1rem; bottom: 1rem; }
}

/* ---- 430px / 390px / 375px: handset tuning ----------------------------- */
@media (max-width: 430px) {
  :root {
    --gutter: 1rem;
    --fs-lead: 1.0625rem;
  }

  .hero__content { padding-block: var(--spacing-lg); }
  .hero__media { --hero-ar: 1.333; }

  .section { padding-block: var(--spacing-xl); }
  .section__head { margin-bottom: var(--spacing-lg); }

  .stepper__item { flex: 0 0 7rem; }
  .stepper__dot { width: 2.125rem; height: 2.125rem; font-size: .875rem; }
  .stepper__label { font-size: .75rem; }

  .choice-card__body { padding: var(--spacing-md); }
  .addon { grid-template-columns: auto minmax(0, 1fr); }
  .addon .icon-art { display: none; }

  .price-card { padding: var(--spacing-md); }
  .panel-dark { padding: var(--spacing-lg) var(--spacing-md); }

  .summary__total { font-size: 1.375rem; }
  .summary__total--lg { font-size: 1.625rem; }

  .payment-option { grid-template-columns: auto minmax(0, 1fr); }
  .payment-option .payment-art { display: none; }

  .thumb-row img { width: 3.5rem; height: 3.25rem; }
}

@media (max-width: 375px) {
  :root { --gutter: .875rem; }
  .brand img { width: 9.5rem; }
  .tracker__item { flex: 0 0 100%; }
  .stepper__item { flex: 0 0 6.25rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   16 · WORDPRESS
   ---------------------------------------------------------------------------
   Everything above this line is the approved design system, unchanged. The
   rules below are only what WordPress itself needs: the admin bar, the
   alignment classes the editor writes, rich-text pages and the editor's own
   empty-block note. Nothing here introduces a new colour, radius or size.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Core utility classes WordPress outputs ───────────────────────────────── */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A box the design shows with display:flex must still obey [hidden]. */
[hidden] { display: none !important; }

/* ── Admin bar: the sticky header and anchor targets sit below it ─────────── */
.admin-bar .site-header { top: 32px; }
.admin-bar main [id] { scroll-margin-top: calc(var(--header-height, 5rem) + 32px); }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .admin-bar main [id] { scroll-margin-top: calc(var(--header-height, 5rem) + 46px); }
}

/* ── Alignment classes the block editor writes into rich text ─────────────── */
.alignleft { float: left; margin: 0 var(--spacing-md) var(--spacing-sm) 0; }
.alignright { float: right; margin: 0 0 var(--spacing-sm) var(--spacing-md); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { max-width: none; }
.wp-caption { max-width: 100%; }
.wp-caption-text, figcaption { font-size: var(--fs-small); color: var(--color-muted); }

/* ── Rich text (policy pages, posts, FAQ answers) ─────────────────────────── */
.rich-text > * + * { margin-top: var(--spacing-md); }
.rich-text h2 { margin-top: var(--spacing-xl); }
.rich-text h3 { margin-top: var(--spacing-lg); }
.rich-text ul, .rich-text ol { padding-left: 1.25rem; }
.rich-text li + li { margin-top: .375rem; }
.rich-text img { height: auto; max-width: 100%; }
.rich-text table { width: 100%; border-collapse: collapse; }
.rich-text :where(th, td) { padding: .625rem .75rem; border-bottom: 1px solid var(--color-border); text-align: left; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-notes { list-style: none; margin: var(--spacing-sm) 0 0; padding: 0; font-size: var(--fs-small); color: var(--color-muted); }
.form-notes li + li { margin-top: .25rem; }
.btn.is-busy { opacity: .65; pointer-events: none; }

/* ── The editor's note when a block has nothing to show yet ───────────────── */
.hs-empty {
  margin: 0;
  padding: var(--spacing-lg);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-muted);
  text-align: center;
  font-size: var(--fs-small);
}

/* ── Shop: the photo uploading state ─────────────────────────────────────── */
.dropzone { cursor: pointer; }
.dropzone.is-uploading { opacity: .7; pointer-events: none; }