@charset "utf-8";

/* =========================================================================
   Sow & Settle — Home & Garden
   Design system + site styles  —  "soft daylight" theme

   Palette: a chalk canvas with the faintest green cast, pale sage panels,
   deep-olive ink. Sage is the brand and carries the browse actions; a
   saturated terracotta is reserved for the two things we actually want
   tapped — the phone and the free catalog. Two-tier CTA colour, so the
   high-intent action is never competing with a dozen equal buttons.

   Type: Literata (a screen-reading serif, warm and sturdy at display size)
   over Hanken Grotesk (tall x-height, wide apertures, holds up at 19px+).

   Audience is 55+, mostly iPhone/iPad. Every size here is a floor.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */

:root {
  /* --- Color -------------------------------------------------------- */
  --bg:            oklch(0.982 0.007 97);
  --surface:       oklch(0.950 0.013 126);
  --surface-2:     oklch(0.914 0.019 127);
  --ink:           oklch(0.305 0.017 131);
  --ink-deep:      oklch(0.253 0.016 129);
  --muted:         oklch(0.484 0.023 123);

  --primary:       oklch(0.473 0.060 133);   /* sage — browse actions      */
  --primary-deep:  oklch(0.397 0.050 134);
  --primary-tint:  oklch(0.938 0.017 129);
  --on-primary:    oklch(1 0 0);

  --accent:        oklch(0.545 0.119 44);    /* terracotta — call/catalog  */
  --accent-deep:   oklch(0.478 0.104 45);
  --accent-light:  oklch(0.628 0.114 46);
  --accent-on-dark: oklch(0.680 0.110 48);  /* 5.26:1 on --ink-deep */
  --accent-tint:   oklch(0.945 0.018 54);
  --on-accent:     oklch(1 0 0);

  --border:        oklch(0.900 0.017 122);
  --border-strong: oklch(0.797 0.026 124);
  --focus:         oklch(0.491 0.128 259);

  --danger:        oklch(0.472 0.170 27);
  --danger-tint:   oklch(0.958 0.028 30);

  /* --- Type --------------------------------------------------------- */
  --font-display: "Literata", "Iowan Old Style", Georgia, serif;
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;

  --text-xs:   1rem;
  --text-sm:   1.0625rem;
  --text-base: clamp(1.1875rem, 1.14rem + 0.24vw, 1.3125rem);
  --text-lg:   clamp(1.375rem, 1.30rem + 0.35vw, 1.5625rem);
  --text-xl:   clamp(1.625rem, 1.50rem + 0.60vw, 2rem);
  --text-2xl:  clamp(1.9375rem, 1.72rem + 1.05vw, 2.625rem);
  --text-3xl:  clamp(2.375rem, 1.98rem + 1.95vw, 3.5rem);
  --text-4xl:  clamp(2.75rem, 2.10rem + 3.20vw, 4.25rem);

  --leading-tight: 1.14;
  --leading-snug:  1.3;
  --leading-body:  1.65;

  /* --- Space -------------------------------------------------------- */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: clamp(3rem, 2.2rem + 4vw, 5rem);
  --space-8: clamp(4rem, 2.8rem + 6vw, 7rem);
  --space-9: clamp(5rem, 3.2rem + 9vw, 9.5rem);

  --gutter: clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);
  --measure: 66ch;
  --page-max: 80rem;

  /* --- Shape -------------------------------------------------------- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --tap: 3rem;

  --shadow-sm: 0 1px 2px oklch(0.305 0.017 131 / 0.07),
               0 2px 6px oklch(0.305 0.017 131 / 0.05);
  --shadow-md: 0 2px 4px oklch(0.305 0.017 131 / 0.05),
               0 10px 24px oklch(0.305 0.017 131 / 0.10);
  --shadow-lg: 0 4px 10px oklch(0.305 0.017 131 / 0.07),
               0 24px 56px oklch(0.305 0.017 131 / 0.15);

  /* --- Motion ------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur:      240ms;
  --dur-slow: 460ms;

  /* --- Z-index (semantic) ------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-callbar: 300;
  --z-overlay: 400;
}

/* -------------------------------------------------------------------------
   2. Reset / base
   ---------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  -webkit-tap-highlight-color: oklch(0.545 0.119 44 / 0.16);
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); letter-spacing: -0.008em; }
h4 { font-size: var(--text-lg); letter-spacing: 0; }

p, li { text-wrap: pretty; }

a { color: var(--accent-deep); text-underline-offset: 0.18em; }
a:hover { color: var(--accent); }

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

::selection { background: var(--primary-tint); color: var(--ink); }

/* -------------------------------------------------------------------------
   3. Utilities
   ---------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 46rem; }

.section { padding-block: var(--space-8); }
.section--tight { padding-block: var(--space-7); }
.section--surface { background: var(--surface); }
.section--dark { background: var(--ink-deep); color: oklch(0.93 0.01 120); }
.section--dark h2, .section--dark h3 { color: var(--bg); }

.lede { font-size: var(--text-lg); color: var(--muted); max-width: 46ch; }
.prose { max-width: var(--measure); }

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100%;
  z-index: var(--z-overlay);
  background: var(--ink-deep);
  color: var(--bg);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus-visible { top: var(--space-3); color: var(--bg); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.head { margin-bottom: var(--space-6); max-width: 44rem; }
.head > * + * { margin-top: var(--space-3); }
.head--center { text-align: center; margin-inline: auto; }
.head--center .lede { margin-inline: auto; }

/* A short sage rule under a section heading. One repeated device, used as
   the section marker instead of an uppercase eyebrow on every block. */
.head h2::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: var(--space-3);
  border-radius: 2px;
  background: var(--accent);
}
.head--center h2::after { margin-inline: auto; }

/* -------------------------------------------------------------------------
   4. Buttons
   ---------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0.875rem 1.625rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

/* sage = browse */
.btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--primary-deep); color: var(--on-primary); box-shadow: var(--shadow-md); }

/* terracotta = call / catalog. Used sparingly so it keeps its pull. */
.btn--action { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.btn--action:hover { background: var(--accent-deep); color: var(--on-accent); box-shadow: var(--shadow-md); }

.btn--outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--ink);
}
.btn--outline:hover { border-color: var(--ink); background: var(--surface); color: var(--ink); }

.btn--on-dark {
  background: var(--bg);
  color: var(--ink);
}
.btn--on-dark:hover { background: var(--surface); color: var(--ink); }

.btn--ghost-dark {
  background: transparent;
  border-color: oklch(1 0 0 / 0.45);
  color: var(--bg);
}
.btn--ghost-dark:hover { background: oklch(1 0 0 / 0.12); border-color: var(--bg); color: var(--bg); }

.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn-row--spaced { margin-top: var(--space-5); }

.stack-sm { margin-top: 0.75rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap);
  font-weight: 600;
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.link-arrow svg { transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   5. Header
   ---------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: oklch(0.982 0.007 97 / 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top);
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
.brand__mark { flex-shrink: 0; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.brand__name span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-top: 3px;
}

.nav { display: none; }
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--space-3);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nav__link:hover { background: var(--surface); color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--primary-deep); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--space-3); right: var(--space-3);
  bottom: 0.55rem;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}

.header__actions { display: flex; align-items: center; gap: var(--space-2); }

/* Below ~768px the brand, the CTA and the menu button cannot all fit without
   pushing past the viewport. The CTA is the one to drop: it is repeated in
   the menu panel and again in the sticky call bar. */
.header__actions > .btn { display: none; }
@media (min-width: 48rem) { .header__actions > .btn { display: inline-flex; } }

.header__phone {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap);
  padding-inline: var(--space-3);
  border-radius: var(--radius);
  color: var(--ink);
  font-weight: 700;
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
}
.header__phone:hover { background: var(--surface); color: var(--ink); }
.header__phone svg { color: var(--accent); flex-shrink: 0; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap);
  padding: 0 var(--space-3);
  background: transparent;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
}
.menu-toggle:hover { background: var(--surface); }
.menu-toggle__bars { display: block; }
.menu-toggle__bars rect {
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars rect:nth-child(1) {
  transform: translateY(6px) rotate(45deg); transform-origin: center;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars rect:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars rect:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg); transform-origin: center;
}

.mobile-nav {
  display: none;
  border-top: 1px solid var(--border);
  padding-block: var(--space-3) var(--space-4);
}
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav__list { list-style: none; padding: 0; display: grid; gap: 2px; }
.mobile-nav__link {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding-inline: var(--space-3);
  border-radius: var(--radius);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.mobile-nav__link:hover { background: var(--surface); color: var(--ink); }
.mobile-nav__link[aria-current="page"] { background: var(--primary-tint); color: var(--primary-deep); }
.mobile-nav .btn { margin-top: var(--space-3); }

@media (min-width: 62rem) {
  .nav { display: block; }
  .header__phone { display: inline-flex; }
  .menu-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* -------------------------------------------------------------------------
   6. Hero — full-bleed photograph with an overlapping chalk card.
   The card is a solid surface, so the headline never sits on a photo and
   contrast is guaranteed regardless of what the picture is doing.
   ---------------------------------------------------------------------- */

.hero { position: relative; }

.hero__media {
  position: relative;
  height: clamp(20rem, 46vw, 34rem);
  background: var(--surface-2);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero__card {
  position: relative;
  z-index: var(--z-raised);
  margin-inline: auto;
  margin-top: -3.5rem;
  max-width: min(100% - (2 * var(--gutter)), 46rem);
  background: var(--bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6) clamp(1.5rem, 4vw, 3.25rem) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.hero__card h1 { font-size: var(--text-3xl); letter-spacing: -0.022em; }
.hero__card p { font-size: var(--text-lg); color: var(--muted); max-width: 40ch; }
.hero__card .btn-row { margin-top: var(--space-1); }

.hero__seal {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  align-self: flex-start;
  padding: 0.4rem 1rem 0.4rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--primary-tint);
  color: var(--primary-deep);
  font-size: var(--text-sm);
  font-weight: 700;
}

@media (min-width: 60rem) {
  /* The card is absolutely placed against the padding box, so it hangs
     below the photo by exactly this padding. Keep the photo tall enough
     that a longer headline can never push the card up under the header. */
  .hero { padding-bottom: var(--space-7); }
  .hero__media { height: min(78vh, 43rem); }
  .hero__card {
    position: absolute;
    left: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));
    bottom: 0;
    margin: 0;
    width: min(38rem, 52%);
  }
}

/* Interior page banner */
.pagehead {
  position: relative;
  padding-block: var(--space-7);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.pagehead__inner { max-width: 52rem; }
.pagehead h1::after {
  content: "";
  display: block;
  width: 3.5rem; height: 3px;
  margin-top: var(--space-3);
  border-radius: 2px;
  background: var(--accent);
}
.pagehead p { color: var(--muted); font-size: var(--text-lg); margin-top: var(--space-3); }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--muted);
}
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  color: var(--muted);
  text-decoration: underline;
}
.crumbs a:hover { color: var(--ink); }
.crumbs li[aria-current] { font-weight: 600; color: var(--ink); }

/* -------------------------------------------------------------------------
   7. Trust strip — a quiet ruled row rather than a saturated colour band
   ---------------------------------------------------------------------- */

.trust {
  background: var(--surface);
  border-block: 1px solid var(--border);
  padding-block: var(--space-5);
}
.trust__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4) 0;
  list-style: none;
  padding: 0;
}
.trust__item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding-inline: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--muted);
}
.trust__item:first-child { padding-left: 0; }
.trust__item svg { flex-shrink: 0; margin-top: 1px; color: var(--accent); }
.trust__item b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1px;
}
@media (min-width: 48rem) {
  .trust__item + .trust__item { border-left: 1px solid var(--border-strong); }
}

/* -------------------------------------------------------------------------
   8. Two doors — asymmetric, photo above, caption on the page
   ---------------------------------------------------------------------- */

.doors { display: grid; gap: var(--space-6); }
@media (min-width: 48rem) {
  .doors { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-5); }
  /* the second door drops, so the pair reads as a composition not a row */
  .doors > *:nth-child(2) { margin-top: var(--space-7); }
}

.door {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: var(--bg);
  min-height: 21rem;
  background: var(--ink);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--dur-slow) var(--ease-out);
}
.door:hover { box-shadow: var(--shadow-lg); color: var(--bg); }

.door img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.door:hover img { transform: scale(1.04); }

/* Bottom-anchored scrim: only the heading and the cue sit over the photo,
   in the band where alpha is high enough to clear contrast on even the
   brightest picture. Prose lives below, on the page. */
.door::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    oklch(0.25 0.02 130 / 0) 25%,
    oklch(0.22 0.02 130 / 0.62) 55%,
    oklch(0.16 0.02 130 / 0.93) 100%
  );
}

.door__body {
  position: relative;
  z-index: var(--z-raised);
  height: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
  padding: var(--space-5);
}
.door__body h3 { font-size: var(--text-2xl); color: var(--bg); letter-spacing: -0.018em; }
.door__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.door__cue svg { transition: transform var(--dur) var(--ease-out); }
.door:hover .door__cue svg { transform: translateX(5px); }

.door__note {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--text-base);
  max-width: 38ch;
}

/* -------------------------------------------------------------------------
   9. Product grid — sage panels, no outline boxes
   ---------------------------------------------------------------------- */

.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: var(--space-5);
}

.product {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  transition: box-shadow var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.product:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.product__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  overflow: hidden;
}
.product__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 640ms var(--ease-out);
}
.product:hover .product__media img { transform: scale(1.05); }

.tag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-raised);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 1rem;
  font-weight: 700;
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.tag--accent { background: var(--primary); color: var(--on-primary); }
.tag--primary { background: var(--accent); color: var(--on-accent); }

.product__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.6rem;
  padding: var(--space-4) var(--space-4) var(--space-5);
}

.product__body h3 { font-size: var(--text-lg); }
.product__desc { color: var(--muted); font-size: var(--text-sm); line-height: 1.5; flex: 1; }

.product__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
}
.product__specs li {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--primary-deep);
  background: var(--bg);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.7rem;
}

.product__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-3);
  margin-top: auto;
  border-top: 1px solid var(--border-strong);
}

.price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.price s { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--muted); }

/* -------------------------------------------------------------------------
   10. Feature band — photograph runs to the viewport edge
   ---------------------------------------------------------------------- */

/* The band clips the bleed; the media escapes its container's gutter with a
   negative margin sized to exactly reach the viewport edge, so no DOM
   restructuring is needed to break out of the centred page grid. */
.feature-band { padding-block: var(--space-8); overflow: hidden; }
.feature-band--surface { background: var(--surface); }

.feature { display: grid; gap: var(--space-5); align-items: center; }

.feature__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  overflow: hidden;
  margin-left: calc(-1 * var(--gutter));
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; }

.feature__body > * + * { margin-top: var(--space-4); }

@media (min-width: 60rem) {
  .feature { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); }
  .feature__media {
    aspect-ratio: 5 / 4;
    margin-left: calc(-1 * max(var(--gutter), (100vw - var(--page-max)) / 2 + var(--gutter)));
  }
  /* flipped: photo on the right, bleeding off that edge instead */
  .feature--flip .feature__media {
    order: 2;
    margin-left: 0;
    margin-right: calc(-1 * max(var(--gutter), (100vw - var(--page-max)) / 2 + var(--gutter)));
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  }
  .feature--flip .feature__body { order: 1; }
}

.checklist { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.checklist li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: var(--text-base);
}
.checklist svg { color: var(--accent); margin-top: 0.3rem; }
.checklist b { font-weight: 700; }
.checklist span { color: var(--muted); }

/* -------------------------------------------------------------------------
   11. Testimonials — ruled columns on a sage field, no boxes
   ---------------------------------------------------------------------- */

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-6) 0;
}
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-inline: var(--space-5);
}
.quote:first-child { padding-left: 0; }
@media (min-width: 56rem) {
  .quote + .quote { border-left: 1px solid var(--border-strong); }
}
.quote blockquote {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.45;
  font-weight: 400;
  color: var(--ink);
}
.quote figcaption {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: auto;
}
.quote img {
  width: 3.25rem; height: 3.25rem;
  border-radius: var(--radius-pill);
  object-fit: cover;
  flex-shrink: 0;
}
.quote__who { font-size: var(--text-sm); line-height: 1.35; }
.quote__who b { display: block; font-size: var(--text-base); font-weight: 700; }
.quote__who span { color: var(--muted); }

.stars { display: flex; gap: 2px; color: var(--accent); }

/* -------------------------------------------------------------------------
   12. Callback band — the one drenched, dark moment on the page
   ---------------------------------------------------------------------- */

.callband { background: var(--ink-deep); color: oklch(0.90 0.012 120); }
.callband .wrap {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-8);
}
@media (min-width: 58rem) {
  .callband .wrap {
    grid-template-columns: 1fr minmax(24rem, 27rem);
    gap: var(--space-8);
    align-items: start;
  }
}
.callband h2 { color: var(--bg); letter-spacing: -0.018em; }
.callband h2::after { background: var(--accent-light); }
.callband__copy > * + * { margin-top: var(--space-4); }
.callband__copy p { color: oklch(0.88 0.012 120); font-size: var(--text-lg); }

.phone-big {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  min-height: var(--tap);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--bg);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.phone-big:hover { color: var(--bg); text-decoration: underline; }
.phone-big svg { flex-shrink: 0; color: var(--accent-light); }

.hours { font-size: var(--text-sm); color: oklch(0.82 0.012 120); }

/* Form card */
.form-card {
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
}
.form-card h3 { margin-bottom: var(--space-1); }
.form-card > p { color: var(--muted); font-size: var(--text-sm); margin-bottom: var(--space-4); }

.field { margin-bottom: var(--space-4); }
.field label { display: block; font-size: var(--text-sm); font-weight: 700; margin-bottom: 0.4rem; }
.field .hint {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: 1.0625rem;
  margin-top: 0.15rem;
}

.field input, .field select, .field textarea {
  width: 100%;
  min-height: var(--tap);
  /* 17px floor: under 16px makes iOS Safari zoom the page on focus */
  font-size: 1.0625rem;
  padding: 0.75rem 0.9rem;
  background: var(--bg);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px oklch(0.491 0.128 259 / 0.24);
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea {
  border-color: var(--danger);
  background: var(--danger-tint);
}
.field__error {
  display: none;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.45rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--danger);
}
.field[data-invalid="true"] .field__error { display: flex; }
.field__error svg { flex-shrink: 0; margin-top: 3px; }

.field-row { display: grid; gap: 0; }
@media (min-width: 30rem) { .field-row { grid-template-columns: 1fr 1fr; gap: var(--space-3); } }

.form-note { font-size: 1.0625rem; color: var(--muted); margin-top: var(--space-3); line-height: 1.5; }

/* Checkbox group. The whole row is the target, not a 16px square. */
.checks { display: grid; gap: var(--space-2); border: 0; padding: 0; margin: 0 0 var(--space-4); }
.checks legend { font-size: var(--text-sm); font-weight: 700; padding: 0; margin-bottom: 0.55rem; }
.check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.85rem;
  min-height: var(--tap);
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.check:hover { border-color: var(--border-strong); background: var(--surface); }
.check:has(input:checked) { border-color: var(--primary); background: var(--primary-tint); }
.check:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.check input {
  width: 1.5rem; height: 1.5rem;
  min-height: 0;
  margin-top: 0.15rem;
  accent-color: var(--primary);
  flex-shrink: 0;
}
.check span { font-size: var(--text-sm); line-height: 1.45; }
.check b { display: block; font-size: var(--text-base); font-weight: 600; }
.check span span { color: var(--muted); }

.form-success {
  display: none;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--primary-tint);
  border: 2px solid var(--primary);
  color: var(--ink);
}
.form-success[data-shown="true"] { display: flex; }
.form-success svg { flex-shrink: 0; color: var(--primary); margin-top: 3px; }
.form-success b { display: block; margin-bottom: 0.2rem; }
.form-success p { font-size: var(--text-sm); color: var(--ink); }

/* Contact detail blocks */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-5);
}
.contact-card { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); }
.contact-card h3 {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
.contact-card h3 svg { color: var(--accent); flex-shrink: 0; }
.contact-card p { color: var(--muted); font-size: var(--text-sm); }
.contact-card a {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  font-weight: 600;
}
.contact-card address { font-style: normal; color: var(--muted); font-size: var(--text-sm); }

/* -------------------------------------------------------------------------
   12b. Plain catalog listing
   ---------------------------------------------------------------------- */

.listing { list-style: none; padding: 0; border-top: 2px solid var(--border-strong); max-width: 56rem; }
.listing li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.listing__name { font-weight: 700; font-size: var(--text-base); }
.listing__name span {
  display: block;
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: 0.15rem;
}
.listing__price {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   13. FAQ
   ---------------------------------------------------------------------- */

.faq { display: grid; gap: var(--space-2); max-width: 52rem; }
.faq details {
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: background-color var(--dur) var(--ease-out);
}
.faq details[open] { background: var(--surface-2); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-lg);
  font-weight: 600;
  font-family: var(--font-display);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-lg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--primary-deep); }
.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 1.5rem; height: 1.5rem;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details > div { padding: 0 var(--space-4) var(--space-4); color: var(--muted); max-width: 62ch; }

/* -------------------------------------------------------------------------
   14. Footer
   ---------------------------------------------------------------------- */

.footer {
  background: var(--ink-deep);
  color: oklch(0.88 0.012 120);
  padding-block: var(--space-8) var(--space-5);
  padding-bottom: calc(var(--space-5) + 5rem + env(safe-area-inset-bottom));
}
@media (min-width: 62rem) { .footer { padding-bottom: var(--space-5); } }

.footer a { color: oklch(0.88 0.012 120); text-decoration: none; }
.footer a:hover { color: var(--bg); text-decoration: underline; }

.footer__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  padding-bottom: var(--space-6);
  border-bottom: 1px solid oklch(1 0 0 / 0.16);
}
.footer__brand { grid-column: 1 / -1; max-width: 30rem; }
/* Explicit tracks so the three link columns always sit on one row beside
   the brand block, instead of auto-fit orphaning the last one. */
@media (min-width: 62rem) {
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .footer__brand { grid-column: auto; }
}
.footer__brand .brand__name { color: var(--bg); }
.footer__brand .brand__name span { color: var(--accent-on-dark); }
.footer__brand p { margin-top: var(--space-3); color: oklch(0.82 0.012 120); font-size: var(--text-sm); }

.footer h4 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: oklch(0.76 0.02 120);
  margin-bottom: var(--space-3);
}
.footer ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.footer ul a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--text-sm); }

.footer__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--bg) !important;
  min-height: var(--tap);
}
.footer__phone svg { color: var(--accent-light); }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-4);
  font-size: var(--text-xs);
  color: oklch(0.74 0.012 120);
}
.footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer__legal ul a { min-height: 2.25rem; font-size: var(--text-xs); }

/* -------------------------------------------------------------------------
   15. Sticky call bar (mobile only)
   ---------------------------------------------------------------------- */

.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-callbar);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-2) var(--gutter);
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
  background: oklch(0.982 0.007 97 / 0.96);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--border);
}
.callbar .btn { padding-inline: var(--space-3); font-size: var(--text-sm); }
@media (min-width: 62rem) { .callbar { display: none; } }

/* -------------------------------------------------------------------------
   16. Motion
   Reveals ENHANCE an already-visible default: the base state is fully
   visible, and JS opts elements into the hidden-then-reveal treatment only
   when it is running and motion is allowed. No JS -> no blank sections.
   ---------------------------------------------------------------------- */

[data-reveal] { opacity: 1; }

html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
html.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
html.js-reveal [data-reveal-delay="1"] { transition-delay: 70ms; }
html.js-reveal [data-reveal-delay="2"] { transition-delay: 140ms; }
html.js-reveal [data-reveal-delay="3"] { transition-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html.js-reveal [data-reveal] { opacity: 1; transform: none; }
  .door:hover img, .product:hover .product__media img { transform: none; }
}

/* -------------------------------------------------------------------------
   17. Print
   ---------------------------------------------------------------------- */

@media print {
  .header, .callbar, .hero__media, .btn { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  a[href^="tel:"]::after { content: " (" attr(href) ")"; }
}