/* ==========================================================================
   Fort Mill Wallpaper Installer — "Wallpaper as architecture for the room"
   Design system: Piazzolla (display serif) + Host Grotesk (UI / body)
   Palette: plaster ivory, beige, taupe, warm charcoal, earth brown, ink indigo
   ========================================================================== */

@font-face {
  font-family: "Piazzolla";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/piazzolla-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Piazzolla";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/piazzolla-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/host-grotesk-latin.woff2") format("woff2");
}

:root {
  /* surfaces */
  --cream: #FBF8F2;
  --ivory: #F6F1E8;
  --beige: #EAE1D2;
  --taupe-tint: #DDD1BE;
  --charcoal: #282520;
  --onyx: #1C1A17;

  /* text */
  --ink: #221F1B;
  --body: #46403A;
  --muted: #5F574D;
  --on-dark: #F2ECE2;
  --on-dark-muted: #BDB3A5;

  /* accents */
  --indigo: #33406A;          /* accent text + filled buttons */
  --indigo-hover: #27325A;
  --indigo-light: #B4C0DD;    /* on dark only */
  --earth: #6E4F33;           /* eyebrows, numerals */
  --earth-light: #D8BC98;     /* on dark only */
  --taupe: #A8957C;           /* DECORATIVE ONLY — never text */

  /* lines */
  --rule: #DCD2C2;
  --rule-dark: #3E3A33;
  --line: #857A6A;            /* control borders (3:1+) */
  --error: #A32B22;

  --serif: "Piazzolla", Georgia, "Times New Roman", serif;
  --sans: "Host Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
  --section: clamp(84px, 11vw, 168px);
  --header-h: 76px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--body);
  font-family: var(--sans);
  font-size: clamp(16px, 0.35vw + 15px, 18px);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: var(--indigo); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--indigo-hover); }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--serif); color: var(--ink); font-weight: 400; margin: 0; line-height: 1.08; letter-spacing: -0.01em; }
h1 { font-size: clamp(40px, 3.6vw + 16px, 74px); font-variation-settings: "opsz" 30; }
h2 { font-size: clamp(34px, 3vw + 16px, 62px); font-variation-settings: "opsz" 30; }
h3 { font-size: clamp(21px, 0.6vw + 18px, 27px); line-height: 1.2; font-weight: 500; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
em { font-style: italic; }
h1 em, h2 em { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--indigo); }

::selection { background: var(--indigo); color: var(--cream); }

:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 2px; }
.band-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--earth-light); }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--ink); color: var(--cream); padding: 12px 18px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--cream); }

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

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--earth);
  margin: 0 0 22px;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .7; }
.band-dark .eyebrow { color: var(--earth-light); }

.lede { font-size: clamp(18px, 0.5vw + 16px, 21px); line-height: 1.62; color: var(--body); }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--indigo); --fg: var(--cream); --bd: var(--indigo);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 14px 28px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: .04em;
  color: var(--fg); background: var(--bg); border: 1px solid var(--bd); border-radius: 0;
  text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--indigo-hover);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .45s var(--ease);
}
.btn:hover { color: var(--cream); border-color: var(--indigo-hover); }
.btn:hover::after { transform: scaleY(1); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--ghost { --bg: transparent; --fg: var(--ink); --bd: var(--line); }
.btn--ghost::after { background: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--light { --bg: var(--earth-light); --fg: var(--ink); --bd: var(--earth-light); }
.btn--light::after { background: var(--cream); }
.btn--light:hover { color: var(--ink); border-color: var(--cream); }
.btn--ghost-light { --bg: transparent; --fg: var(--on-dark); --bd: #6E665B; }
.btn--ghost-light::after { background: var(--on-dark); }
.btn--ghost-light:hover { color: var(--ink); border-color: var(--on-dark); }
.btn--block { width: 100%; }

.text-link {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px;
  letter-spacing: .03em; color: var(--indigo); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.text-link svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.text-link:hover svg { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246, 241, 232, .94);
  -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--rule); box-shadow: 0 10px 30px -24px rgba(34, 31, 27, .45); }
.header-inner { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand svg { width: 38px; height: 38px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--serif); font-size: 21px; font-weight: 500; letter-spacing: -.005em; }
.brand-sub { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.brand:hover { color: var(--ink); }

.primary-nav ul { display: flex; gap: clamp(18px, 2vw, 34px); }
.primary-nav a {
  position: relative; display: inline-block; padding: 8px 0;
  font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none;
}
.primary-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--indigo);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.primary-nav a:hover::after, .primary-nav a[aria-current="true"]::after { transform: scaleX(1); }
.primary-nav a[aria-current="true"] { color: var(--indigo); }

.header-phone {
  display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.header-phone svg { width: 18px; height: 18px; color: var(--earth); }
.header-phone:hover { color: var(--indigo); }
.header-cta { min-height: 46px; padding: 10px 20px; font-size: 14px; }

.menu-toggle {
  display: none; align-items: center; justify-content: center; gap: 10px;
  min-width: 48px; min-height: 48px; padding: 0 4px 0 12px; margin-right: -4px;
  background: none; border: 0; color: var(--ink); font: 600 14px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.menu-toggle .bars { position: relative; width: 24px; height: 14px; }
.menu-toggle .bars span {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
  transition: transform .35s var(--ease), opacity .2s, top .35s var(--ease);
}
.menu-toggle .bars span:nth-child(1) { top: 0; }
.menu-toggle .bars span:nth-child(2) { top: 6px; }
.menu-toggle .bars span:nth-child(3) { top: 12px; }
.menu-toggle[aria-expanded="true"] .bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.mobile-call {
  display: none; align-items: center; justify-content: center; width: 48px; height: 48px;
  border: 1px solid var(--line); color: var(--ink);
}
.mobile-call svg { width: 20px; height: 20px; }

/* Drawer */
.drawer {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: var(--ivory); overflow-y: auto; padding: 28px var(--gutter) 40px;
  display: flex; flex-direction: column;
}
.drawer[hidden] { display: none; }
.drawer nav ol { counter-reset: d; border-top: 1px solid var(--rule); }
.drawer nav li { border-bottom: 1px solid var(--rule); counter-increment: d; }
.drawer nav a {
  display: flex; align-items: baseline; gap: 18px; padding: 16px 0;
  font-family: var(--serif); font-size: 32px; line-height: 1.15; color: var(--ink); text-decoration: none;
}
.drawer nav a::before { content: "0" counter(d); font: 600 12px/1 var(--sans); letter-spacing: .14em; color: var(--earth); }
.drawer-foot { margin-top: auto; padding-top: 32px; display: grid; gap: 14px; }
.drawer-foot p { font-size: 15px; color: var(--muted); margin: 6px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .drawer:not([hidden]) { animation: drawerIn .45s var(--ease); }
  @keyframes drawerIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
}
body.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--ivory); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-height: min(calc(100vh - var(--header-h)), 880px);
}
.hero-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(48px, 7vw, 110px) clamp(28px, 4vw, 72px) clamp(48px, 6vw, 90px) max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
}
.hero-copy h1 { margin-bottom: 30px; }
.hero-copy .lede { max-width: 34em; margin-bottom: 38px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-location {
  display: flex; align-items: center; gap: 12px; margin-top: 42px; padding-top: 22px;
  border-top: 1px solid var(--rule); font-size: 15px; color: var(--muted);
}
.hero-location svg { width: 18px; height: 18px; color: var(--earth); flex: none; }

.hero-media { position: relative; overflow: hidden; background: var(--charcoal); }
.hero-media picture, .hero-media img { width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: 60% 50%; }
.hero-caption {
  position: absolute; right: 0; bottom: 0; max-width: 360px;
  background: var(--ivory); color: var(--body); padding: 18px 22px; font-size: 14px; line-height: 1.5;
}
.hero-caption strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--ink); margin-bottom: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .enhance .hero-media img { animation: heroReveal 1.6s var(--ease) both; }
  @keyframes heroReveal { from { transform: scale(1.06); opacity: .4; } to { transform: none; opacity: 1; } }
}

/* ---------- Statement ---------- */
.statement { padding: var(--section) 0 calc(var(--section) * .8); position: relative; }
.statement-grid { display: grid; grid-template-columns: 2fr 10fr; gap: 0 clamp(24px, 4vw, 64px); }
.statement-mark {
  position: relative; font: 600 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--earth);
}
.plumb { display: block; width: 1px; height: 150px; background: var(--taupe); margin: 18px 0 0 6px; position: relative; }
.plumb::after { content: ""; position: absolute; left: -5px; bottom: -12px; border: 5.5px solid transparent; border-top: 12px solid var(--taupe); border-bottom: 0; }
.statement-text {
  font-family: var(--serif); font-weight: 300; color: var(--ink);
  font-size: clamp(28px, 2.4vw + 14px, 50px); line-height: 1.22; letter-spacing: -.01em; margin: 0 0 48px; max-width: 22em;
  font-variation-settings: "opsz" 30;
}
.statement-text em { color: var(--indigo); }
.statement-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 56px); border-top: 1px solid var(--rule); padding-top: 32px; }
.statement-cols h3 { font-size: 22px; margin-bottom: 10px; }
.statement-cols p { font-size: 16px; color: var(--muted); }
.statement-cols .idx { display: block; font: 600 12px/1 var(--sans); letter-spacing: .16em; color: var(--earth); margin-bottom: 14px; }

/* ---------- Services: specification sheet ---------- */
.services { background: var(--cream); padding: var(--section) 0; border-top: 1px solid var(--rule); }
.services-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px clamp(32px, 6vw, 110px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.services-head p { color: var(--muted); }
.services-banner { position: relative; margin: 0 0 clamp(48px, 6vw, 88px); }
.services-banner img { width: 100%; aspect-ratio: 2.2 / 1; object-fit: cover; }
.services-banner figcaption {
  position: absolute; left: 0; bottom: 0; background: var(--cream); padding: 16px 24px 0 0;
  font-size: 14px; color: var(--muted); max-width: 70%;
}
.services-banner figcaption b { color: var(--ink); font-weight: 600; }

.spec { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px clamp(24px, 4vw, 64px); }
.spec + .spec { margin-top: clamp(56px, 6vw, 88px); }
.spec-label { position: relative; }
.spec-label h3 { font-size: clamp(26px, 1vw + 20px, 34px); font-weight: 400; margin-bottom: 12px; }
.spec-label p { font-size: 15px; color: var(--muted); max-width: 22em; }
.spec-label-inner { position: sticky; top: calc(var(--header-h) + 32px); }
.spec-list { border-top: 1px solid var(--ink); }
.spec-row {
  display: grid; grid-template-columns: 64px minmax(0, 4fr) minmax(0, 6fr); gap: 8px 28px; align-items: baseline;
  padding: 26px 0; border-bottom: 1px solid var(--rule);
  transition: background-color .35s var(--ease), padding .35s var(--ease);
}
.spec-row .no { font: 500 15px/1 var(--serif); font-style: italic; color: var(--earth); }
.spec-row h4 { margin: 0; font-family: var(--serif); font-size: clamp(20px, .5vw + 17px, 25px); font-weight: 500; color: var(--ink); line-height: 1.25; }
.spec-row p { margin: 0; font-size: 16px; color: var(--body); }
@media (hover: hover) {
  .spec-row:hover { background: var(--ivory); padding-left: 16px; padding-right: 16px; }
}

/* ---------- Rooms rail ---------- */
.rooms { background: var(--beige); padding: var(--section) 0 calc(var(--section) * .85); overflow: hidden; }
.rooms-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: clamp(36px, 4vw, 60px); }
.rooms-head .intro { max-width: 640px; }
.rooms-head .intro p { color: var(--body); margin-top: 20px; }
.rail-controls { display: flex; gap: 10px; flex: none; }
.rail-btn {
  width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); color: var(--ink); cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.rail-btn svg { width: 20px; height: 20px; }
.rail-btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.rail-btn:disabled { opacity: .35; cursor: default; background: transparent; color: var(--ink); border-color: var(--line); }

.rail {
  display: flex; gap: clamp(16px, 2vw, 28px);
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))) 26px;
  scroll-padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  scrollbar-width: thin; scrollbar-color: var(--taupe) transparent;
}
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--taupe); }
.rail:focus-visible { outline-offset: -2px; }
.plate { flex: none; scroll-snap-align: start; margin: 0; }
.plate-media { overflow: hidden; background: var(--taupe-tint); height: clamp(360px, 38vw, 560px); }
.plate--wide .plate-media { aspect-ratio: 3 / 2; }
.plate--tall .plate-media { aspect-ratio: 4 / 5; }
.plate-media picture, .plate-media img { height: 100%; width: 100%; }
.plate-media img { object-fit: cover; transition: transform 1.2s var(--ease); }
@media (hover: hover) { .plate:hover .plate-media img { transform: scale(1.035); } }
.plate figcaption { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; padding-top: 18px; max-width: 460px; }
.plate .plate-no { grid-row: span 2; font: italic 400 30px/1 var(--serif); color: var(--earth); padding-top: 2px; }
.plate h3 { font-size: 22px; }
.plate p { font-size: 15px; color: var(--muted); margin: 4px 0 0; }

/* ---------- Why (dark band) ---------- */
.band-dark { background: var(--charcoal); color: var(--on-dark-muted); }
.band-dark h2, .band-dark h3 { color: var(--on-dark); }
.band-dark h2 em { color: var(--indigo-light); }
.why { padding: var(--section) 0; position: relative; }
.why-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px clamp(40px, 7vw, 120px); }
.why-media { position: relative; }
.why-media-inner { position: sticky; top: calc(var(--header-h) + 40px); }
.why-detail { position: relative; }
.why-detail img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
/* measuring marks around the pattern detail */
.measure { position: absolute; font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--earth-light); }
.measure--v { top: 0; bottom: 0; left: -28px; width: 1px; background: var(--rule-dark); }
.measure--v::before, .measure--v::after { content: ""; position: absolute; left: -5px; width: 11px; height: 1px; background: var(--earth-light); }
.measure--v::before { top: 0; } .measure--v::after { bottom: 0; }
.measure--h { left: 0; right: 0; bottom: -28px; height: 1px; background: var(--rule-dark); }
.measure--h::before, .measure--h::after { content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: var(--earth-light); }
.measure--h::before { left: 0; } .measure--h::after { right: 0; }
.measure--h span { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); background: var(--charcoal); padding: 0 10px; white-space: nowrap; }
.why-note { margin-top: 64px; font-size: 15px; color: var(--on-dark-muted); max-width: 30em; }

.why-intro { margin-bottom: 48px; }
.why-intro h2 { margin-bottom: 24px; }
.why-intro p { font-size: 18px; max-width: 36em; }
.why-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); counter-reset: w; }
.why-list li { counter-increment: w; padding: 26px 0 28px; border-top: 1px solid var(--rule-dark); }
.why-list h3 { display: flex; align-items: baseline; gap: 14px; font-size: 21px; margin-bottom: 10px; }
.why-list h3::before { content: counter(w, decimal-leading-zero); font: 600 12px/1 var(--sans); letter-spacing: .12em; color: var(--earth-light); }
.why-list p { font-size: 16px; line-height: 1.62; }
.why-wide { margin-top: 56px; position: relative; }
.why-wide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.why-wide figcaption { font-size: 14px; color: var(--on-dark-muted); padding-top: 14px; }

/* ---------- Process: five drops ---------- */
.process { padding: var(--section) 0; }
.process-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px clamp(32px, 6vw, 100px); align-items: center; margin-bottom: clamp(48px, 6vw, 88px); }
.process-head h2 { margin-bottom: 24px; }
.process-head p { color: var(--body); max-width: 34em; }
.process-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.process-photo { position: relative; }
.process-photo::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border: 1px solid var(--taupe); z-index: -1; }
.process-head-photo { position: relative; z-index: 0; }

.drops { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); counter-reset: s; }
.drop { position: relative; padding: 30px clamp(16px, 1.6vw, 28px) 40px; border-left: 1px solid var(--rule); }
.drop:first-child { border-left: 0; padding-left: 0; }
.drop .num { display: block; font: 300 clamp(48px, 3.4vw, 68px)/1 var(--serif); color: var(--earth); margin-bottom: 28px; font-variation-settings: "opsz" 30; }
.drop h3 { font-size: 22px; margin-bottom: 12px; }
.drop p { font-size: 15.5px; color: var(--body); line-height: 1.6; }
.drops-wrap { padding-bottom: 28px; }

/* ---------- About ---------- */
.about { background: var(--cream); padding: var(--section) 0; border-top: 1px solid var(--rule); }
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px clamp(40px, 8vw, 140px); align-items: center; }
.about-photo { position: relative; padding: 0 0 48px 48px; }
.about-photo::before { content: ""; position: absolute; left: 0; bottom: 0; width: 72%; height: 70%; background: var(--beige); }
.about-photo picture { position: relative; }
.about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about-copy h2 { margin-bottom: 28px; }
.owner { display: flex; align-items: center; gap: 18px; margin: 36px 0 40px; padding: 22px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.owner-mono {
  width: 64px; height: 64px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--taupe); font: italic 400 24px/1 var(--serif); color: var(--indigo);
}
.owner-name { font-family: var(--serif); font-size: 24px; color: var(--ink); line-height: 1.2; }
.owner-role { font-size: 14px; color: var(--muted); letter-spacing: .04em; }
.values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 36px; margin-bottom: 40px; }
.values li { position: relative; padding-left: 22px; font-size: 16px; }
.values li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; background: var(--indigo); transform: rotate(45deg); }
.values strong { display: block; color: var(--ink); font-weight: 600; }

/* ---------- Local + map ---------- */
.local { padding: var(--section) 0; }
.local-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px clamp(40px, 6vw, 96px); align-items: start; }
.local-copy h2 { margin-bottom: 26px; }
.local-copy .lede { margin-bottom: 20px; }
.local-photo { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: end; }
.local-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.local-photo p { font-size: 15px; color: var(--muted); }
.map-card { background: var(--charcoal); color: var(--on-dark-muted); position: relative; }
.map-frame { position: relative; aspect-ratio: 4 / 5; background: var(--onyx); overflow: hidden; }
.map-fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px;
  text-align: center; padding: 32px; color: var(--on-dark-muted); font-size: 15px;
  background-image: linear-gradient(var(--rule-dark) 1px, transparent 1px), linear-gradient(90deg, var(--rule-dark) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center;
}
.map-fallback svg { width: 34px; height: 34px; color: var(--earth-light); }
.map-fallback strong { font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--on-dark); }
.map-frame iframe { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.map-meta { display: grid; grid-template-columns: 1fr auto; gap: 18px 24px; align-items: center; padding: 26px 28px 28px; }
.map-meta address { font-style: normal; color: var(--on-dark); font-size: 17px; line-height: 1.5; }
.map-meta address span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--earth-light); margin-bottom: 6px; }

/* ---------- Contact ---------- */
.contact { background: var(--beige); padding: var(--section) 0; position: relative; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px clamp(40px, 6vw, 100px); align-items: start; }
.contact-copy h2 { margin-bottom: 26px; }
.contact-copy .lede { margin-bottom: 36px; }
.contact-details { border-top: 1px solid var(--ink); margin-bottom: 40px; }
.contact-details li { display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--taupe-tint); align-items: baseline; }
.contact-details .k { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--earth); }
.contact-details a, .contact-details .v { font-size: 17px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.contact-details a { border-bottom: 1px solid var(--line); }
.contact-details a:hover { color: var(--indigo); border-color: var(--indigo); }
.contact-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; max-height: 460px; }

.form-card { background: var(--cream); padding: clamp(28px, 4vw, 60px); position: relative; border-top: 3px solid var(--indigo); }
.form-card h3 { font-size: clamp(26px, 1vw + 20px, 34px); font-weight: 400; margin-bottom: 8px; }
.form-card > p.form-intro { color: var(--muted); font-size: 16px; margin-bottom: 32px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 22px; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; letter-spacing: .01em; }
.field label .opt { font-weight: 400; color: var(--muted); }
.field label .req { color: var(--error); }
.field input, .field textarea {
  width: 100%; min-height: 54px; padding: 14px 16px;
  font: 400 16px/1.4 var(--sans); color: var(--ink);
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 0; appearance: none; -webkit-appearance: none;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #7A7064; opacity: 1; }
.field input:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(51, 64, 106, .22); }
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 6px; }
.form-actions p { font-size: 14px; color: var(--muted); margin: 0; flex: 1 1 220px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Error messages injected by js/form-validation.js — color overridden for AA contrast */
.error-message { color: var(--error) !important; font-weight: 500; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

#form-success {
  display: none; text-align: left; padding: 8px 0;
}
.success-inner { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; }
.success-mark { width: 60px; height: 60px; display: grid; place-items: center; background: var(--indigo); color: var(--cream); }
.success-mark svg { width: 28px; height: 28px; }
#form-success h3 { font-size: clamp(26px, 1vw + 20px, 32px); margin-bottom: 10px; }
#form-success p { color: var(--body); }

/* ---------- Footer ---------- */
.site-footer { background: var(--onyx); color: var(--on-dark-muted); padding: clamp(64px, 8vw, 110px) 0 36px; font-size: 16px; }
.footer-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 48px clamp(32px, 5vw, 80px); padding-bottom: 56px; border-bottom: 1px solid var(--rule-dark); }
.footer-brand .brand { color: var(--on-dark); margin-bottom: 20px; }
.footer-brand .brand-sub { color: var(--on-dark-muted); }
.footer-brand p { max-width: 26em; }
.footer-title { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--earth-light); margin: 0 0 18px; }
.site-footer nav li + li { margin-top: 8px; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--earth-light); text-decoration: underline; }
.footer-contact li + li { margin-top: 10px; }
.footer-contact address { font-style: normal; color: var(--on-dark); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 28px; font-size: 14px; }
.footer-bottom p { margin: 0; }

/* ---------- Reveal (progressive enhancement) ---------- */
.reveal, .reveal-img { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .enhance .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .enhance .reveal.is-in { opacity: 1; transform: none; }
  .enhance .reveal-img img { clip-path: inset(0 0 100% 0); transition: clip-path 1.25s var(--ease); }
  .enhance .reveal-img.is-in img { clip-path: inset(0 0 0 0); }
  .enhance .reveal[data-delay="1"] { transition-delay: .1s; }
  .enhance .reveal[data-delay="2"] { transition-delay: .2s; }
  .enhance .reveal[data-delay="3"] { transition-delay: .3s; }
  .enhance .reveal[data-delay="4"] { transition-delay: .4s; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .primary-nav ul { gap: 20px; }
  .header-phone span { display: none; }
}
@media (max-width: 1024px) {
  :root { --header-h: 68px; }
  .primary-nav, .header-phone, .header-cta { display: none; }
  .menu-toggle, .mobile-call { display: inline-flex; }
  .header-inner { gap: 10px; }

  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: 44px var(--gutter) 48px; order: 1; }
  .hero-media { order: 2; aspect-ratio: 3 / 2; }
  .hero-caption { position: static; max-width: none; background: var(--beige); }

  .statement-grid { grid-template-columns: 1fr; }
  .statement-mark { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
  .plumb { display: none; }

  .services-head, .process-head, .about-grid, .local-grid, .contact-grid, .why-grid { grid-template-columns: 1fr; }
  .spec { grid-template-columns: 1fr; gap: 22px; }
  .spec-label-inner { position: static; }
  .why-media-inner { position: static; }
  .why-media { max-width: 560px; margin-left: 28px; }
  .why-note { margin-top: 56px; }

  .drops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drop, .drop:first-child { padding: 28px 24px 34px; border-left: 0; border-top: 1px solid var(--rule); }
  .drop:nth-child(odd) { padding-left: 0; }
  .drop:nth-child(even) { border-left: 1px solid var(--rule); }
  .drop:nth-child(-n+2) { border-top: 0; }
  .drop:last-child { grid-column: 1 / -1; padding-left: 0; }
  .drops-wrap { padding-bottom: 0; }
  .process-photo { max-width: 520px; }

  .about-photo { max-width: 560px; }
  .map-frame { aspect-ratio: 4 / 3; }
  .contact-photo { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  body { line-height: 1.64; }
  .brand-name { font-size: 18px; }
  .brand-sub { font-size: 9.5px; letter-spacing: .16em; }
  .brand svg { width: 34px; height: 34px; }
  .menu-toggle .label { display: none; }

  .hero-actions .btn { flex: 1 1 100%; }
  .hero-media { aspect-ratio: 4 / 5; }

  .statement-cols { grid-template-columns: 1fr; gap: 26px; }
  .services-banner img { aspect-ratio: 4 / 3; }
  .services-banner figcaption { position: static; max-width: none; padding: 14px 0 0; }
  .spec-row { grid-template-columns: 44px minmax(0, 1fr); padding: 22px 0; }
  .spec-row p { grid-column: 2; }

  .rooms-head { flex-direction: column; align-items: flex-start; }
  .plate-media { height: 380px; }
  .plate--wide .plate-media { aspect-ratio: auto; width: calc(100vw - 2 * var(--gutter) - 20px); height: auto; }
  .plate--wide .plate-media picture, .plate--wide .plate-media img { aspect-ratio: 3 / 2; height: auto; }
  .plate--tall .plate-media { width: min(304px, calc(100vw - 2 * var(--gutter) - 20px)); aspect-ratio: auto; }
  .plate figcaption { max-width: 300px; }
  .plate--wide figcaption { max-width: calc(100vw - 2 * var(--gutter) - 20px); }

  .why-list { grid-template-columns: 1fr; }
  .why-media { margin-left: 22px; }
  .measure--v { left: -20px; }

  .drops { grid-template-columns: 1fr; }
  .drop, .drop:first-child, .drop:nth-child(even), .drop:nth-child(odd), .drop:last-child { padding: 24px 0 28px; border-left: 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 64px 1fr; gap: 0 16px; }
  .drop:first-child { border-top: 0; }
  .drop .num { font-size: 42px; margin: 0; grid-row: span 2; }
  .drop h3 { margin-bottom: 6px; }
  .process-photo::before { inset: 14px -14px -14px 14px; }
  .process-photo { margin-right: 14px; }

  .about-photo { padding: 0 0 28px 28px; }
  .values { grid-template-columns: 1fr; gap: 16px; }
  .local-photo { grid-template-columns: 1fr; }
  .map-frame { aspect-ratio: 1 / 1; }
  .map-meta { grid-template-columns: 1fr; padding: 22px; }
  .map-meta .btn { width: 100%; }

  .form-grid { grid-template-columns: 1fr; }
  .form-actions .btn { width: 100%; }
  .contact-details li { grid-template-columns: 1fr; gap: 4px; }
  .success-inner { grid-template-columns: 1fr; }

  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}

@media print {
  .site-header, .drawer, .rail-controls, .map-frame iframe, .form-card { display: none !important; }
  .reveal, .reveal-img, .reveal-img img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  body { background: #fff; }
}