/* ==========================================================================
   HomePlus Stone
   Palette sampled from the logo: #000000 / #C5362D / #FFFFFF
   Type: Archivo (display, variable wdth+wght) + Hanken Grotesk (body)
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var-latin.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/hanken-var-latin.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* surfaces — warm-tinted toward the brand hue, never pure white */
  --paper: oklch(98.6% 0.004 62);
  --paper-raised: oklch(100% 0 0);
  --surface: oklch(96.2% 0.005 58);
  --surface-deep: oklch(93.2% 0.006 54);
  --ink-surface: oklch(21% 0.008 45);

  /* ink — warm near-black, never pure */
  --ink: oklch(19.5% 0.008 42);
  --ink-2: oklch(41% 0.010 42);
  /* 52% is the darkest this can be while still reading as tertiary, and the
     lightest that clears 4.5:1 against --surface-deep */
  --ink-3: oklch(52% 0.011 45);
  --ink-on-dark: oklch(96% 0.004 62);
  --ink-2-on-dark: oklch(78% 0.008 50);

  /* brand — #C5362D */
  --brand: oklch(54.5% 0.176 30);
  --brand-deep: oklch(46% 0.152 30);
  --brand-wash: oklch(96.5% 0.020 32);

  /* lines */
  --line: oklch(89% 0.006 50);
  --line-strong: oklch(80% 0.008 48);
  --line-on-dark: oklch(32% 0.008 45);

  /* spacing — 4pt scale */
  --s-3xs: 0.25rem;
  --s-2xs: 0.5rem;
  --s-xs: 0.75rem;
  --s-sm: 1rem;
  --s-md: 1.5rem;
  --s-lg: 2rem;
  --s-xl: 3rem;
  --s-2xl: 4rem;
  --s-3xl: 6rem;
  --s-4xl: 8rem;
  --s-5xl: 10rem;

  /* fluid section rhythm */
  --section-y: clamp(4.5rem, 2.2rem + 7.5vw, 9.5rem);
  --section-y-tight: clamp(3rem, 1.8rem + 4.5vw, 6rem);
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);
  --measure: 68ch;

  /* type */
  --font-display: 'Archivo', 'Archivo Fallback', ui-sans-serif, sans-serif;
  --font-body: 'Hanken Grotesk', 'Hanken Fallback', ui-sans-serif, sans-serif;

  --t-display: clamp(2.4rem, 1.05rem + 5.6vw, 5.5rem);
  --t-h1: clamp(2.3rem, 1.25rem + 4.3vw, 5rem);
  --t-h2: clamp(1.95rem, 1.25rem + 2.9vw, 3.6rem);
  --t-h3: clamp(1.4rem, 1.1rem + 1.3vw, 2.1rem);
  --t-h4: clamp(1.125rem, 1.03rem + 0.42vw, 1.4rem);
  --t-lead: clamp(1.1rem, 1.02rem + 0.45vw, 1.35rem);
  --t-body: 1.0625rem;
  --t-sm: 0.9375rem;
  --t-xs: 0.8125rem;
  --t-label: 0.6875rem;

  /* radii — squircle-ish, restrained */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* One radius and one frame for every framed photograph on the site, so a
     gallery thumbnail and a full feature image read as the same object.
     Full-bleed images (hero, CTA band) stay square by nature.
     The frame is a hairline ring, a soft bezel band outside it, then a
     diffused lift: the nested-enclosure look without extra markup. */
  --r-img: 22px;
  --frame:
    0 0 0 1px oklch(19.5% 0.008 42 / 0.09),
    0 0 0 5px oklch(19.5% 0.008 42 / 0.045),
    0 2px 4px oklch(30% 0.02 45 / 0.04),
    0 24px 56px -26px oklch(30% 0.02 45 / 0.20);
  --frame-on-dark:
    0 0 0 1px oklch(100% 0 0 / 0.14),
    0 0 0 5px oklch(100% 0 0 / 0.06),
    0 24px 56px -26px oklch(0% 0 0 / 0.55);

  /* elevation — diffuse and warm, never a hard grey drop */
  --lift-1: 0 1px 2px oklch(30% 0.02 45 / 0.04), 0 8px 24px -12px oklch(30% 0.02 45 / 0.10);
  --lift-2: 0 2px 4px oklch(30% 0.02 45 / 0.04), 0 26px 60px -28px oklch(30% 0.02 45 / 0.20);
  --lift-3: 0 3px 6px oklch(30% 0.02 45 / 0.05), 0 48px 100px -40px oklch(30% 0.02 45 / 0.28);

  /* motion */
  --ease-slab: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-q: cubic-bezier(0.22, 1, 0.36, 1);

  --nav-h: 4.5rem;
}

/* metric-matched fallbacks so swap does not shift layout */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Segoe UI Semibold'), local('Helvetica Neue'), local('Arial');
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Hanken Fallback';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Arial');
  size-adjust: 101%;
  ascent-override: 96%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* --- Reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 2rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }

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

::selection { background: oklch(54.5% 0.176 30 / 0.16); }

/* --- Film grain: fixed, pointer-events none, never on scrolling content ---- */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.028;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Layout primitives ---------------------------------------------------- */

.shell {
  width: min(100% - (var(--gutter) * 2), 84rem);
  margin-inline: auto;
}

.shell--narrow { width: min(100% - (var(--gutter) * 2), 62rem); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--ink { background: var(--ink-surface); color: var(--ink-on-dark); }
.section--surface { background: var(--surface); }

.section--ink p { color: var(--ink-2-on-dark); line-height: 1.68; }

.stack { display: grid; gap: var(--s-md); }
.stack--sm { gap: var(--s-2xs); }
.stack--lg { gap: var(--s-lg); }

.skip {
  position: absolute;
  left: var(--s-sm);
  top: var(--s-sm);
  z-index: 1000;
  transform: translateY(-200%);
  background: var(--ink);
  color: var(--ink-on-dark);
  padding: 0.65rem 1.1rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  transition: transform 0.35s var(--ease-slab);
}
.skip:focus { transform: translateY(0); }

/* --- Type helpers --------------------------------------------------------- */

.label {
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.label--brand { color: var(--brand); }
.label--dark { color: var(--ink-2-on-dark); }

/* Section marker, built like the title block on a shop drawing: the lot number
   boxed the way a slab gets tagged, the caption beside it, and a rule running
   off to the right. Replaces the hairline-plus-caps eyebrow. */
.tag {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.tag__no {
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  padding: 0.3rem 0.35rem 0.26rem;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  letter-spacing: 0.06em;
  color: var(--ink);
  flex: none;
}
.tag::after {
  content: '';
  flex: 1 1 auto;
  max-width: 6.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong) 0%, transparent 100%);
}
/* the rule reads as decoration only when something follows it */
.tag--plain::after { max-width: 4rem; }

.section--ink .tag { color: var(--ink-2-on-dark); }
.section--ink .tag__no { border-color: var(--line-on-dark); color: var(--ink-on-dark); }
.section--ink .tag::after { background: linear-gradient(90deg, var(--line-on-dark) 0%, transparent 100%); }


.display {
  font-size: var(--t-display);
  font-weight: 600;
  font-stretch: 103%;
  letter-spacing: -0.045em;
  line-height: 0.94;
}

.h1 { font-size: var(--t-h1); letter-spacing: -0.04em; line-height: 0.98; }
.h2 { font-size: var(--t-h2); letter-spacing: -0.037em; line-height: 1.0; }
.h3 { font-size: var(--t-h3); letter-spacing: -0.03em; line-height: 1.08; }
.h4 { font-size: var(--t-h4); letter-spacing: -0.02em; line-height: 1.22; font-weight: 600; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.58;
  color: var(--ink-2);
  max-width: 46ch;
  font-weight: 380;
}
.section--ink .lead { color: var(--ink-2-on-dark); }

.prose { max-width: var(--measure); color: var(--ink-2); }
.prose > * + * { margin-top: 1.15em; }
.prose strong { color: var(--ink); font-weight: 600; }

.muted { color: var(--ink-3); }
.accent { color: var(--brand); }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--ink-on-dark);
  --btn-nest: oklch(100% 0 0 / 0.14);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.6rem 0.6rem 1.35rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.012em;
  cursor: pointer;
  transition: background 0.5s var(--ease-slab), transform 0.5s var(--ease-slab),
    box-shadow 0.5s var(--ease-slab);
  will-change: transform;
}
.btn__nest {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: var(--btn-nest);
  flex: none;
  transition: transform 0.5s var(--ease-slab), background 0.5s var(--ease-slab);
}
.btn__nest svg { width: 0.85rem; height: 0.85rem; }
.btn:hover { background: var(--brand); box-shadow: var(--lift-2); }
.btn:hover .btn__nest { transform: translate3d(2px, -2px, 0) scale(1.06); background: oklch(100% 0 0 / 0.22); }
.btn:active { transform: scale(0.982); }

.btn--brand { --btn-bg: var(--brand); }
.btn--brand:hover { background: var(--brand-deep); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-nest: oklch(19.5% 0.008 42 / 0.07);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn--ghost:hover {
  background: transparent;
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.btn--ghost:hover .btn__nest { background: var(--brand-wash); }

.btn--on-dark {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  --btn-nest: oklch(19.5% 0.008 42 / 0.08);
}
.btn--on-dark:hover { background: var(--brand); color: var(--ink-on-dark); }
.btn--on-dark:hover .btn__nest { background: oklch(100% 0 0 / 0.22); }

.btn--lg { padding: 0.8rem 0.8rem 0.8rem 1.7rem; font-size: 1rem; }
.btn--lg .btn__nest { width: 2.5rem; height: 2.5rem; }

/* text link with a rule that wipes in */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--brand), var(--brand));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.55s var(--ease-slab), color 0.3s var(--ease-slab);
}
.tlink:hover { color: var(--brand); background-size: 100% 1px; }
.tlink svg { width: 0.75rem; height: 0.75rem; transition: transform 0.45s var(--ease-slab); }
.tlink:hover svg { transform: translate3d(3px, -3px, 0); }
.section--ink .tlink { color: var(--ink-on-dark); }
.section--ink .tlink:hover { color: var(--paper); }

/* --- Navigation ----------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 700;
  padding-top: clamp(0.65rem, 0.3rem + 1.1vw, 1.4rem);
  transition: transform 0.6s var(--ease-slab);
}
.nav[data-hidden='true'] { transform: translate3d(0, -140%, 0); }

.nav__bar {
  width: min(100% - (var(--gutter) * 2), 84rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--s-md);
  padding: 0.55rem 0.55rem 0.55rem 1.25rem;
  border-radius: var(--r-pill);
  background: oklch(98.6% 0.004 62 / 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  backdrop-filter: blur(20px) saturate(1.7);
  box-shadow: inset 0 0 0 1px oklch(19.5% 0.008 42 / 0.07), var(--lift-1);
  transition: box-shadow 0.6s var(--ease-slab), background 0.6s var(--ease-slab);
}
.nav[data-scrolled='true'] .nav__bar {
  background: oklch(98.6% 0.004 62 / 0.9);
  box-shadow: inset 0 0 0 1px oklch(19.5% 0.008 42 / 0.09), var(--lift-2);
}

.brand { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.brand__mark { width: 2rem; height: 1.9rem; flex: none; }
.brand__word {
  font-family: var(--font-display);
  font-size: clamp(0.86rem, 0.78rem + 0.3vw, 1rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.brand__word em { font-style: normal; font-weight: 700; }

/* the <nav> element is the flex item, so the auto margin belongs on it */
.nav__bar > nav { margin-left: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
}
.nav__links a {
  display: block;
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink-2);
  transition: color 0.4s var(--ease-slab), background 0.4s var(--ease-slab);
}
.nav__links a:hover { color: var(--ink); background: oklch(19.5% 0.008 42 / 0.05); }
.nav__links a[aria-current='page'] { color: var(--ink); }
.nav__links a[aria-current='page']::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand);
  margin: 3px auto 0;
}

.nav__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: var(--s-xs); }

.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow 0.4s var(--ease-slab), color 0.4s var(--ease-slab);
  white-space: nowrap;
}
.nav__phone:hover { color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.nav__phone svg { width: 0.8rem; height: 0.8rem; }

/* hamburger that morphs to an X */
.burger {
  display: none;
  position: relative;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 0;
  background: var(--ink);
  cursor: pointer;
  flex: none;
}
.burger span {
  position: absolute;
  left: 50%;
  width: 1.05rem;
  height: 1.5px;
  border-radius: 2px;
  background: var(--ink-on-dark);
  transition: transform 0.55s var(--ease-slab), opacity 0.3s var(--ease-slab);
}
.burger span:nth-child(1) { top: calc(50% - 4px); transform: translateX(-50%); }
.burger span:nth-child(2) { top: calc(50% + 3px); transform: translateX(-50%); }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translate(-50%, 3.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { transform: translate(-50%, -3.5px) rotate(-45deg); }

/* full-screen menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 690;
  display: grid;
  align-content: center;
  padding: calc(var(--nav-h) + 2rem) var(--gutter) var(--s-2xl);
  background: oklch(98.6% 0.004 62 / 0.86);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  backdrop-filter: blur(28px) saturate(1.5);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s var(--ease-slab), visibility 0s linear 0.5s;
  overflow-y: auto;
}
.menu[data-open='true'] {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s var(--ease-slab), visibility 0s;
}
.menu__list { list-style: none; display: grid; gap: 0.15rem; }
.menu__list li { overflow: hidden; }
.menu__list a {
  display: block;
  padding: 0.25rem 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.1rem + 4.6vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.14;
  transform: translate3d(0, 110%, 0);
  transition: transform 0.7s var(--ease-slab), color 0.3s var(--ease-slab);
}
.menu[data-open='true'] .menu__list a { transform: translate3d(0, 0, 0); }
.menu__list li:nth-child(1) a { transition-delay: 0.06s; }
.menu__list li:nth-child(2) a { transition-delay: 0.11s; }
.menu__list li:nth-child(3) a { transition-delay: 0.16s; }
.menu__list li:nth-child(4) a { transition-delay: 0.21s; }
.menu__list li:nth-child(5) a { transition-delay: 0.26s; }
.menu__list li:nth-child(6) a { transition-delay: 0.31s; }
.menu__list a:hover { color: var(--brand); }
.menu__foot {
  margin-top: var(--s-xl);
  padding-top: var(--s-md);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--s-2xs);
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
  transition: opacity 0.6s var(--ease-slab) 0.34s, transform 0.6s var(--ease-slab) 0.34s;
}
.menu[data-open='true'] .menu__foot { opacity: 1; transform: none; }
.menu__foot a { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.menu__foot a:hover { color: var(--brand); }

@media (max-width: 63.99em) {
  .nav__links { display: none; }
  .burger { display: block; }
  .nav__bar { padding-left: 1rem; }
}
/* icon only on narrow phones, sized as a proper 44px tap target */
@media (max-width: 30rem) {
  .nav__phone span { display: none; }
  .nav__phone {
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .nav__phone svg { width: 1rem; height: 1rem; }
}

body[data-locked='true'] { overflow: hidden; }

/* --- Hero ----------------------------------------------------------------- */

/* Full-bleed photograph carries the hero, unobstructed. The type sits on its
   own paper panel rising off the bottom edge rather than floating over the
   picture: these photographs are mostly white stone, so no scrim light enough
   to keep them reading as luxury also clears AA for white text on top. */
.hero {
  position: relative;
  min-height: min(100dvh, 50rem);
  display: grid;
  align-items: end;
  padding-top: calc(var(--nav-h) + var(--s-lg));
  overflow: hidden;
  isolation: isolate;
  background: var(--surface-deep);
}
.hero__bg { position: absolute; inset: 0; z-index: -2; display: block; }
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 60%;
}
@media (max-width: 56em) {
  .hero__bg img { object-position: 45% 62%; }
}
/* barely-there darkening at the very top so the glass nav pill has an edge to
   sit against on the lightest crops */
.hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 24%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, oklch(20% 0.008 42 / 0.22) 0%, transparent 100%);
}

.hero__panel {
  background: var(--paper);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: clamp(1.5rem, 1rem + 2.4vw, 2.75rem) clamp(1.5rem, 0.9rem + 2.6vw, 3rem) 0;
  max-width: 46rem;
  /* pushed right so the gold-veined waterfall island on the left of the
     photograph stays visible instead of sitting behind the panel */
  margin-left: auto;
  box-shadow: var(--lift-3);
  display: grid;
  gap: var(--s-md);
}
.hero__title {
  font-size: clamp(1.95rem, 1.15rem + 2.6vw, 3.1rem);
  font-stretch: 100%;
  letter-spacing: -0.038em;
  line-height: 1.04;
}
.hero__panel .lead { max-width: 42ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.65rem; }

/* fact rail closes the panel */
.hero__rail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem clamp(1rem, 0.4rem + 2vw, 2.25rem);
  margin-top: var(--s-2xs);
  padding-block: clamp(0.9rem, 0.6rem + 1.2vw, 1.35rem);
  border-top: 1px solid var(--line);
}
.hero__rail span {
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero__rail .is-price {
  margin-left: auto;
  letter-spacing: -0.02em;
  text-transform: none;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hero__rail .is-price em {
  font-style: normal;
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 0.5rem;
}
@media (max-width: 40em) {
  .hero__rail .is-price { margin-left: 0; width: 100%; }
}
@media (max-width: 30rem) {
  .hero__cta { display: grid; gap: 0.6rem; }
  .hero__cta .btn { justify-content: space-between; padding-left: 1.5rem; }
}
/* a phone cannot show a large photograph and a full copy block at once, so
   tighten the panel to buy back some picture */
@media (max-width: 40em) {
  .hero { min-height: 100dvh; }
  .hero__panel { gap: var(--s-sm); }
  .hero__panel .lead { font-size: 1.0625rem; line-height: 1.5; }
}

/* Phone layout: panel moves to the TOP and enters from the right edge.
   A portrait viewport crops this landscape source horizontally only, never
   vertically, so the full height of the photograph is always on screen. With
   the panel anchored at the bottom it covered the lower half of the frame,
   which is where the countertops are, leaving only ceiling and upper cabinets
   visible. Anchoring it to the top exposes the island surfaces instead. */
@media (max-width: 47.99em) {
  .hero { align-items: start; }

  .hero__panel {
    max-width: none;
    margin-left: clamp(1rem, 5vw, 3rem);
    margin-right: calc(var(--gutter) * -1);
    border-radius: var(--r-xl) 0 0 var(--r-xl);
    padding: clamp(1.25rem, 0.9rem + 1.8vw, 1.85rem);
    padding-right: calc(clamp(1.25rem, 0.9rem + 1.8vw, 1.85rem) + (var(--gutter) * 0.55));
    padding-bottom: clamp(1.1rem, 0.85rem + 1.2vw, 1.5rem);
    gap: var(--s-sm);
  }
  .hero__title { font-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.5rem); }
  .hero__panel .lead { font-size: 1rem; line-height: 1.46; }

  /* The rail restates the ledger row sitting immediately below the hero
     (materials, starting price, SGS, service area), so on a phone it costs
     ~90px of photograph to say the same thing twice. Dropped here only. */
  .hero__rail { display: none; }

  /* reframe onto the waterfall island now that the lower half is visible */
  .hero__bg img { object-position: 28% 50%; }
}

/* --- Framed imagery --------------------------------------------------------
   Every photograph that is not full-bleed uses this. Restored after the hero
   rebuild dropped the .slab rules, which had left the duo feature images
   (including "Why HomePlus") rendering square and unframed. */

.slab {
  position: relative;
  padding: 5px;
  border-radius: calc(var(--r-img) + 5px);
  background: oklch(19.5% 0.008 42 / 0.04);
  box-shadow: inset 0 0 0 1px oklch(19.5% 0.008 42 / 0.07);
}
.slab__core {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-img);
  background: var(--surface-deep);
  box-shadow:
    0 2px 4px oklch(30% 0.02 45 / 0.04),
    0 24px 56px -26px oklch(30% 0.02 45 / 0.20);
}
.slab__core img { width: 100%; height: 100%; object-fit: cover; }

.duo__media .slab__core { aspect-ratio: 4 / 5; }

/* single-element equivalent of the slab, for grid items that cannot carry a
   wrapper without breaking their layout */
.tile,
.shot,
.masonry figure,
.mapcard {
  border-radius: var(--r-img);
  box-shadow: var(--frame);
}
.section--ink .tile,
.section--ink .shot,
.section--ink .masonry figure {
  box-shadow: var(--frame-on-dark);
}

/* --- Statement + fact ledger ----------------------------------------------
   Sits where the scrolling marquee used to. A marquee is motion standing in
   for content; this says something and holds still. Also absorbs the old
   big-number metric row, which was the most templated block on the page. */

.statement {
  padding-top: clamp(3rem, 1.8rem + 4.4vw, 5.75rem);
  padding-bottom: clamp(1.5rem, 0.9rem + 2.2vw, 2.75rem);
}

.statement__line {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 0.95rem + 1.9vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -0.032em;
  line-height: 1.18;
  max-width: 26ch;
  text-wrap: balance;
}
.statement__line b { font-weight: 600; }

.ledger-row {
  display: grid;
  gap: 0 clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  margin-top: clamp(2rem, 1.2rem + 3vw, 3.75rem);
  border-top: 1px solid var(--line);
}
.ledger-row > div {
  display: grid;
  gap: 0.3rem;
  padding-block: clamp(1rem, 0.7rem + 1vw, 1.5rem);
}
.ledger-row dt {
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ledger-row dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3rem);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.28;
}

/* --- Edge profile drawings -------------------------------------------------
   Cross-sections rather than another title-and-a-sentence grid. The drawing is
   the content; the words are the caption. */

.profiles {
  display: grid;
  gap: clamp(1.5rem, 0.8rem + 2.4vw, 2.75rem) clamp(1.5rem, 0.4rem + 3vw, 3.5rem);
  grid-template-columns: repeat(2, 1fr);
}
/* six profiles, so two rows of three rather than a five-wide row and an orphan */
@media (min-width: 60em) {
  .profiles { grid-template-columns: repeat(3, 1fr); }
}
.profile { display: grid; gap: 0.85rem; align-content: start; }
.profile__draw {
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--line-on-dark);
  padding-bottom: 0.85rem;
}
.profile__draw .stone { fill: oklch(100% 0 0 / 0.08); stroke: oklch(84% 0.006 55); stroke-width: 1.25; }
.profile__draw .joint { stroke: var(--brand); stroke-width: 1.25; stroke-dasharray: 4 3; fill: none; }
.profile__draw .datum { stroke: oklch(100% 0 0 / 0.28); stroke-width: 1; }
.profile b {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -0.022em;
}
.profile span { font-size: var(--t-sm); color: var(--ink-2-on-dark); line-height: 1.55; }

/* --- Run-in definition list ------------------------------------------------
   Term and description on one line, hairline between. Reads like a glossary
   instead of a repeating card grid. */

.runin { display: grid; }
@media (min-width: 56em) {
  .runin { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 0.5rem + 4vw, 4.5rem); }
}
.runin > div {
  padding-block: clamp(0.9rem, 0.7rem + 0.8vw, 1.3rem);
  border-top: 1px solid var(--line);
}
.section--ink .runin > div { border-color: var(--line-on-dark); }
.runin dt {
  display: inline;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.022em;
}
.runin dd {
  display: inline;
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.section--ink .runin dd { color: var(--ink-2-on-dark); }
.runin dt::after {
  content: '';
  display: inline-block;
  width: 1.1rem;
  height: 1px;
  margin: 0 0.5rem 0.32em;
  background: var(--brand);
  vertical-align: middle;
}

/* --- Section headers ------------------------------------------------------ */

.shead {
  display: grid;
  gap: var(--s-md);
  margin-bottom: clamp(2.25rem, 1.2rem + 3.2vw, 4rem);
}
@media (min-width: 56em) {
  .shead--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: end;
    gap: clamp(2rem, 0.5rem + 4vw, 5rem);
  }
  .shead--split .lead { max-width: 42ch; padding-bottom: 0.4rem; }
}

/* --- Bento: services ------------------------------------------------------ */

.bento {
  display: grid;
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.6rem);
  grid-template-columns: 1fr;
}
@media (min-width: 48em) { .bento { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 64em) { .bento { grid-template-columns: repeat(12, 1fr); } }

.tile {
  position: relative;
  display: grid;
  align-content: end;
  gap: 0.55rem;
  min-height: 17rem;
  padding: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
  overflow: hidden;
  background: var(--surface-deep);
  color: var(--ink-on-dark);
  isolation: isolate;
  grid-column: span 1;
}
@media (min-width: 48em) { .tile { grid-column: span 3; } }
@media (min-width: 64em) { .tile { grid-column: span 4; } }

.tile__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-slab);
}
.tile:hover .tile__img { transform: scale(1.07); }
/* photographs here are mostly white stone, so the scrim has to work hard for
   the caption text to clear AA contrast */
.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    oklch(17% 0.008 42 / 0.93) 0%,
    oklch(17% 0.008 42 / 0.78) 34%,
    oklch(17% 0.008 42 / 0.42) 66%,
    oklch(17% 0.008 42 / 0.16) 100%
  );
}
.tile h3 { color: var(--ink-on-dark); }
.tile p {
  color: oklch(88% 0.006 55);
  font-size: var(--t-sm);
  line-height: 1.5;
  max-width: 34ch;
}
.tile__idx {
  position: absolute;
  top: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
  right: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-pill);
  background: oklch(17% 0.008 42 / 0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  color: oklch(100% 0 0 / 0.9);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

@media (min-width: 64em) {
  .tile--wide { grid-column: span 8; min-height: 24rem; }
  .tile--tall { grid-column: span 4; min-height: 24rem; }
  .tile--half { grid-column: span 6; min-height: 19rem; }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .tile--wide { grid-column: span 6; }
  .tile--half { grid-column: span 3; }
}

/* --- Materials: spec rows ------------------------------------------------- */

.specs { display: grid; }
.spec {
  display: grid;
  gap: var(--s-sm);
  padding-block: clamp(1.75rem, 1.1rem + 2.2vw, 3rem);
  border-top: 1px solid var(--line);
  align-items: start;
}
.spec:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 56em) {
  .spec {
    grid-template-columns: 4.5rem minmax(0, 15rem) minmax(0, 1fr) minmax(0, 15rem);
    gap: clamp(1.25rem, 0.4rem + 2.4vw, 3rem);
    align-items: baseline;
  }
}
.spec__no {
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  padding-top: 0.4rem;
}
.spec__name { font-size: var(--t-h3); }
.spec__name small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-3);
  margin-top: 0.45rem;
}
.spec__body { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.62; max-width: 52ch; }
.spec__facts { display: grid; gap: 0.4rem; }
.spec__fact {
  display: flex;
  justify-content: space-between;
  gap: var(--s-sm);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-xs);
}
.spec__fact dt { color: var(--ink-3); }
.spec__fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: right;
}

/* --- Work grid ------------------------------------------------------------ */

/* Row-span composition rather than per-item aspect ratios. Mixing
   aspect-ratio with grid-row spans left every tile sized by its own width and
   the rows full of holes. */
.work {
  display: grid;
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.6rem);
  grid-template-columns: repeat(2, 1fr);
}

.shot {
  position: relative;
  overflow: hidden;
  background: var(--surface-deep);
  grid-column: span 1;
  aspect-ratio: 1 / 1;
}
.shot--a { grid-column: span 2; aspect-ratio: 4 / 3; }

@media (min-width: 56em) {
  .work {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: clamp(7rem, 5rem + 3.4vw, 10.5rem);
  }
  .shot {
    aspect-ratio: auto;
    height: 100%;
    grid-column: span 4;
    grid-row: span 2;
  }
  .shot--a { grid-column: span 7; grid-row: span 3; aspect-ratio: auto; }
  .shot--b { grid-column: span 5; grid-row: span 3; }
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-slab);
}
.shot figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1.1rem 1rem;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: oklch(97% 0 0);
  background: linear-gradient(to top, oklch(19.5% 0.008 42 / 0.78), transparent);
  opacity: 0;
  transform: translate3d(0, 0.6rem, 0);
  transition: opacity 0.55s var(--ease-slab), transform 0.55s var(--ease-slab);
}
.shot:hover img { transform: scale(1.05); }
.shot:hover figcaption, .shot:focus-within figcaption { opacity: 1; transform: none; }

/* --- Process -------------------------------------------------------------- */

.steps { display: grid; }
.step {
  display: grid;
  gap: 0.6rem var(--s-lg);
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.6rem);
  border-top: 1px solid var(--line-on-dark);
  align-items: start;
}
@media (min-width: 56em) {
  .step { grid-template-columns: 5rem minmax(0, 18rem) minmax(0, 1fr); align-items: baseline; }
}
.step:last-child { border-bottom: 1px solid var(--line-on-dark); }
.step__no {
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.step h3 { color: var(--ink-on-dark); font-size: var(--t-h4); }
.step p { max-width: 54ch; font-size: var(--t-sm); }

/* --- Two-up editorial block ----------------------------------------------- */

.duo {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 56em) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .duo--flip .duo__media { order: -1; }
}
.duo__media .slab__core { aspect-ratio: 4 / 5; }
.duo__copy { display: grid; gap: var(--s-md); align-content: start; }

.ledger { display: grid; gap: 0; margin-top: var(--s-2xs); }
.ledger div {
  display: grid;
  gap: 0.2rem;
  padding-block: 0.95rem;
  border-top: 1px solid var(--line);
}
.ledger div:last-child { border-bottom: 1px solid var(--line); }
.ledger dt {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.ledger dd { margin: 0; font-size: var(--t-sm); color: var(--ink-2); max-width: 56ch; }

/* --- Quote / testimonial -------------------------------------------------- */

.quote { display: grid; gap: var(--s-md); max-width: 34ch; }
.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.22;
}
.quote figcaption { font-size: var(--t-sm); color: var(--ink-3); }

/* --- Contact panel -------------------------------------------------------- */

.panel {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
}
@media (min-width: 62em) {
  .panel { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

.form { display: grid; gap: var(--s-sm); }
.field { display: grid; gap: 0.4rem; }
.field label {
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: var(--r-md);
  background: var(--paper-raised);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: box-shadow 0.4s var(--ease-slab);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field select { appearance: none; cursor: pointer; padding-right: 2.6rem; background-image: none; }
.field--select { position: relative; }
.field--select::after {
  content: '';
  position: absolute;
  right: 1.1rem;
  bottom: 1.35rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg);
  pointer-events: none;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0;
  box-shadow: inset 0 0 0 1.5px var(--brand);
}
.field[data-invalid='true'] input,
.field[data-invalid='true'] textarea {
  box-shadow: inset 0 0 0 1.5px var(--brand);
}
.field__err {
  font-size: var(--t-xs);
  color: var(--brand-deep);
  display: none;
}
.field[data-invalid='true'] .field__err { display: block; }

.row2 { display: grid; gap: var(--s-sm); }
@media (min-width: 34em) { .row2 { grid-template-columns: 1fr 1fr; } }

.form__note { font-size: var(--t-xs); color: var(--ink-3); max-width: 46ch; }
.form__status {
  display: none;
  padding: 1rem 1.15rem;
  border-radius: var(--r-md);
  background: var(--surface-deep);
  color: var(--ink);
  font-size: var(--t-sm);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.form__status[data-show='true'] { display: block; }
.form__status[data-tone='err'] {
  background: var(--brand-wash);
  box-shadow: inset 0 0 0 1px oklch(54.5% 0.176 30 / 0.3);
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Info list ------------------------------------------------------------ */

.info { display: grid; gap: 0; }
.info div { padding-block: 1.15rem; border-top: 1px solid var(--line); display: grid; gap: 0.25rem; }
.info div:last-child { border-bottom: 1px solid var(--line); }
.info dt {
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.info dd { margin: 0; font-size: 1.0625rem; }
.info dd a:hover { color: var(--brand); }
.section--ink .info div { border-color: var(--line-on-dark); }
.section--ink .info dt { color: var(--ink-2-on-dark); }

/* --- CTA band ------------------------------------------------------------- */

.band {
  position: relative;
  overflow: hidden;
  color: var(--ink-on-dark);
  background: var(--ink-surface);
}
.band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}
.band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, oklch(21% 0.008 45 / 0.94) 30%, oklch(21% 0.008 45 / 0.55) 100%);
}
.band__inner { position: relative; z-index: 1; display: grid; gap: var(--s-lg); }
@media (min-width: 56em) {
  .band__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-2xl); }
}
.band h2 { color: var(--ink-on-dark); max-width: 20ch; }
.band .eyebrow { color: var(--ink-2-on-dark); }

/* --- Footer --------------------------------------------------------------- */

.foot { background: var(--ink-surface); color: var(--ink-2-on-dark); padding-block: var(--s-2xl) var(--s-lg); }
.foot__grid {
  display: grid;
  gap: var(--s-xl);
  padding-bottom: var(--s-2xl);
}
@media (min-width: 48em) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 68em) { .foot__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.foot h2 {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2-on-dark);
  margin-bottom: var(--s-sm);
}
.foot ul { list-style: none; display: grid; gap: 0.55rem; }
.foot a { font-size: var(--t-sm); transition: color 0.35s var(--ease-slab); }
.foot a:hover { color: var(--paper); }
.foot .brand__word { color: var(--ink-on-dark); font-size: 1.05rem; }
.foot__blurb { font-size: var(--t-sm); max-width: 34ch; margin-top: var(--s-sm); line-height: 1.6; }
.foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  padding-top: var(--s-md);
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--t-xs);
}

/* sticky mobile call bar */
.callbar {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0.85rem;
  z-index: 680;
  display: none;
  gap: 0.5rem;
  padding: 0.4rem;
  border-radius: var(--r-pill);
  background: oklch(21% 0.008 45 / 0.92);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: var(--lift-3);
  transform: translate3d(0, 150%, 0);
  transition: transform 0.6s var(--ease-slab);
}
.callbar[data-show='true'] { transform: translate3d(0, 0, 0); }
.callbar a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.75rem 0.5rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink-on-dark);
}
.callbar a svg { width: 0.85rem; height: 0.85rem; }
.callbar a.is-primary { background: var(--brand); }
@media (max-width: 47.99em) {
  .callbar { display: flex; }
  /* so the last footer row can clear the fixed call bar */
  body { padding-bottom: 4.75rem; }
}

/* --- Page header (interior pages) ----------------------------------------- */

.phead {
  padding-top: calc(var(--nav-h) + clamp(2rem, 1rem + 4vw, 4.5rem));
  padding-bottom: var(--section-y-tight);
  background: linear-gradient(180deg, var(--surface) 0%, var(--paper) 100%);
}
.phead__grid { display: grid; gap: var(--s-md); }
@media (min-width: 56em) {
  .phead__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: end;
    gap: clamp(2rem, 0.5rem + 4vw, 5rem);
  }
}
.crumbs { font-size: var(--t-xs); color: var(--ink-3); display: flex; gap: 0.45rem; flex-wrap: wrap; }
.crumbs a:hover { color: var(--brand); }

/* --- Gallery masonry ------------------------------------------------------ */

.masonry { columns: 1; column-gap: clamp(1rem, 0.5rem + 1.5vw, 1.6rem); }
@media (min-width: 40em) { .masonry { columns: 2; } }
@media (min-width: 68em) { .masonry { columns: 3; } }
.masonry figure {
  break-inside: avoid;
  margin: 0 0 clamp(1rem, 0.5rem + 1.5vw, 1.6rem);
  position: relative;
  overflow: hidden;
  background: var(--surface-deep);
}
.masonry img { width: 100%; transition: transform 1.4s var(--ease-slab); }
.masonry figure:hover img { transform: scale(1.04); }
.masonry figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1.1rem 1rem;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 500;
  color: oklch(97% 0 0);
  background: linear-gradient(to top, oklch(19.5% 0.008 42 / 0.8), transparent);
  opacity: 0;
  transform: translate3d(0, 0.6rem, 0);
  transition: opacity 0.55s var(--ease-slab), transform 0.55s var(--ease-slab);
}
.masonry figure:hover figcaption { opacity: 1; transform: none; }

/* --- FAQ ------------------------------------------------------------------ */

.faq { display: grid; }
.faq details {
  border-top: 1px solid var(--line);
  padding-block: 0.3rem;
}
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  padding-block: 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -0.022em;
  transition: color 0.35s var(--ease-slab);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand); }
.faq summary::after {
  content: '';
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.45s var(--ease-slab);
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq__body {
  display: grid;
  grid-template-rows: 1fr;
  padding-bottom: 1.4rem;
}
.faq__body > div { overflow: hidden; }
.faq p { color: var(--ink-2); font-size: var(--t-sm); max-width: 62ch; }
.faq p + p { margin-top: 0.8em; }

/* --- Reveal (slab wipe) --------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0);
  transition: opacity 0.9s var(--ease-out-q), transform 0.9s var(--ease-slab);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Slab settle: the block rises while the photograph inside it eases down from a
   slight overscale. Deliberately transform-only. An earlier clip-path version
   deadlocked, because a target clipped to zero height never reports as
   intersecting, so the observer that was meant to reveal it never fired. */
[data-reveal='wipe'] {
  opacity: 0;
  transform: translate3d(0, 2rem, 0);
  transition: opacity 1s var(--ease-out-q), transform 1.1s var(--ease-slab);
}
[data-reveal='wipe'] .slab__core img {
  transform: scale(1.13);
  transition: transform 1.6s var(--ease-slab);
}
[data-reveal='wipe'].is-in { opacity: 1; transform: none; }
[data-reveal='wipe'].is-in .slab__core img { transform: scale(1); }

[data-reveal-group] > * {
  opacity: 0;
  transform: translate3d(0, 1.4rem, 0);
  transition: opacity 0.85s var(--ease-out-q), transform 0.85s var(--ease-slab);
}
[data-reveal-group].is-in > * { opacity: 1; transform: none; }
[data-reveal-group].is-in > *:nth-child(1) { transition-delay: 0.02s; }
[data-reveal-group].is-in > *:nth-child(2) { transition-delay: 0.09s; }
[data-reveal-group].is-in > *:nth-child(3) { transition-delay: 0.16s; }
[data-reveal-group].is-in > *:nth-child(4) { transition-delay: 0.23s; }
[data-reveal-group].is-in > *:nth-child(5) { transition-delay: 0.3s; }
[data-reveal-group].is-in > *:nth-child(6) { transition-delay: 0.37s; }
[data-reveal-group].is-in > *:nth-child(7) { transition-delay: 0.44s; }
[data-reveal-group].is-in > *:nth-child(8) { transition-delay: 0.51s; }

.no-js [data-reveal],
.no-js [data-reveal-group] > * { opacity: 1; transform: none; }
.no-js [data-reveal='wipe'] .slab__core img { transform: none; }
/* the ticker only loops correctly once JS has duplicated the track */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal], [data-reveal-group] > *,
  [data-reveal='wipe'] .slab__core img { opacity: 1 !important; transform: none !important; }
}

/* --- Comparison table ----------------------------------------------------- */

.ctable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ctable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  min-width: 44rem;
}
.ctable th, .ctable td {
  text-align: left;
  padding: 0.95rem 1rem 0.95rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.ctable thead th {
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 0.85rem;
}
.ctable tbody th {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  width: 12rem;
}
.ctable td { color: var(--ink-2); }
.ctable tbody tr:hover td, .ctable tbody tr:hover th { background: var(--brand-wash); }
.ctable tbody tr:last-child th, .ctable tbody tr:last-child td { border-bottom: 0; }

/* stack the table into labelled rows on small screens */
@media (max-width: 47.99em) {
  .ctable-wrap { overflow: visible; }
  .ctable { min-width: 0; display: block; }
  .ctable thead { display: none; }
  .ctable tbody, .ctable tr { display: block; }
  .ctable tr {
    padding-block: 1.1rem;
    border-bottom: 1px solid var(--line);
  }
  .ctable tbody tr:last-child { border-bottom: 0; }
  .ctable tbody th {
    display: block;
    width: auto;
    padding: 0 0 0.6rem;
    border: 0;
    font-size: var(--t-label);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .ctable td {
    display: flex;
    justify-content: space-between;
    gap: var(--s-sm);
    padding: 0.35rem 0;
    border: 0;
  }
  .ctable td::before {
    content: attr(data-h);
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
    flex: none;
  }
  .ctable td { text-align: right; }
  .ctable tbody tr:hover td, .ctable tbody tr:hover th { background: none; }
}

/* --- Chips (edge profiles, inclusions) ------------------------------------ */

.chips {
  display: grid;
  gap: clamp(1rem, 0.5rem + 1.6vw, 1.75rem) clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
/* six items land as 4 + 2 on auto-fit; force two clean rows of three instead */
@media (min-width: 60em) {
  .chips--trio { grid-template-columns: repeat(3, 1fr); }
}
.chip {
  display: grid;
  gap: 0.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.section--ink .chip { border-color: var(--line-on-dark); }
.chip b {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -0.022em;
}
.chip span { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; }
.section--ink .chip span { color: var(--ink-2-on-dark); }
.chip b a {
  background-image: linear-gradient(var(--brand), var(--brand));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.55s var(--ease-slab), color 0.3s var(--ease-slab);
}
.chip b a:hover { color: var(--brand); background-size: 100% 1px; }

/* --- Map / address card --------------------------------------------------- */

.mapcard {
  position: relative;
  overflow: hidden;
  background: var(--surface-deep);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px var(--line);
}
.mapcard iframe {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.mapcard__fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0.35rem;
  padding: var(--s-md);
}
.mapcard__fallback b {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -0.02em;
}
/* brand red only clears 4.4:1 on the deep surface, so drop a step */
.mapcard__fallback span:last-child { font-size: var(--t-sm); color: var(--brand-deep); }

/* --- Utilities ------------------------------------------------------------ */

.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mt-lg { margin-top: var(--s-lg); }
.mt-xl { margin-top: var(--s-xl); }