/* ==========================================================================
   Ocean Bay Interiors - design system + page styles
   Tokens are derived from the logo: copper, slate, near-black, white.
   ========================================================================== */

:root {
  /* brand */
  --copper: #c56835;
  --copper-deep: #a4562b;
  --copper-bright: #ea8b45;
  --copper-soft: #f6e6da;
  /* wood: the grain tones from the textured logo, deeper than copper */
  --wood: #9a5028;
  --wood-deep: #5e3116;
  --wood-dark: #3f2110;
  --wood-soft: #f4e7dc;
  --slate: #727a84;
  --slate-light: #a7adb5;
  --ink: #1d1d1b;
  --ink-2: #2a2a27;
  --ink-3: #3a3a36;
  --navy: #193658;          /* client brand blue (from original logo) */
  --navy-deep: #0b1d33;
  --navy-light: #24507d;
  --teal: #0f5f82;
  --cyan: #2ad4ef;          /* glow accent, never for text on white */
  --paper: #ffffff;
  --mist: #f2f5f8;
  --line: #dfe4ea;
  --line-dark: rgba(255, 255, 255, 0.14);

  /* surfaces */
  --dark-bg: radial-gradient(120% 90% at 85% 0%, rgba(42, 212, 239, 0.28), transparent 55%),
             radial-gradient(80% 60% at 0% 100%, rgba(15, 95, 130, 0.55), transparent 60%),
             linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  --copper-gloss: linear-gradient(160deg, #f2a262 0%, var(--copper-bright) 30%, var(--copper) 65%, #9a4c22 100%);
  --copper-shadow: 0 12px 28px -10px rgba(197, 104, 53, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 4px rgba(0, 0, 0, 0.18);

  /* type */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Bitter", "Roboto Slab", Georgia, serif;   /* slab serif, close to the logo lettering */
  --wood-bg: radial-gradient(90% 70% at 100% 0%, rgba(197, 104, 53, 0.35), transparent 60%),
             linear-gradient(160deg, var(--wood-deep) 0%, var(--wood-dark) 100%);
  --fs-0: 0.875rem;   /* 14 */
  --fs-1: 1rem;       /* 16 */
  --fs-2: 1.125rem;   /* 18 */
  --fs-3: 1.375rem;   /* 22 */
  --fs-4: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);   /* h2 */
  --fs-5: clamp(2.1rem, 1.4rem + 3.4vw, 4rem);      /* h1 */
  --lh-tight: 1.05;
  --lh-body: 1.6;

  /* space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --section: clamp(4rem, 3rem + 5vw, 7.5rem);
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --container: 76rem;

  /* shape */
  --radius: 6px;
  --shadow: 0 18px 40px -20px rgba(11, 29, 51, 0.35);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --nav-h: 5rem;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; }

.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;
}

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--ink); color: #fff; padding: var(--s-3) var(--s-4); border-radius: var(--radius);
}
.skip-link:focus { top: var(--s-4); }

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

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
/* Headings in the slab serif from the logo; body and UI stay in Archivo */
.h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.h1, .h2 { text-transform: capitalize; } /* Title Case on every section headline, italic line included */
.h1 { font-size: var(--fs-5); }
.h2 { font-size: var(--fs-4); color: var(--navy); }
.h2--sm { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem); }
.h3 { font-size: var(--fs-3); color: var(--navy); }
/* Two registers in one headline: heavy slab line, then light italic on its own line in wood brown */
.h1 em, .h2 em { display: block; font-style: italic; font-weight: 300; letter-spacing: 0; color: var(--wood); padding-bottom: 0.05em; }
.section--dark .h2 em, .h1 em { color: var(--copper-bright); }

.kicker {
  display: block;
  font-size: var(--fs-0);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: var(--s-4);
}
.kicker--light { color: var(--copper-bright); }

.lead { font-size: var(--fs-2); color: var(--ink-3); max-width: 62ch; }
.measure { max-width: 62ch; }
.muted { color: var(--slate); }

.section-head { margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.section-head .h2 { max-width: 20ch; }
.section-head p { margin-top: var(--s-4); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 3.25rem; padding: 0 1.75rem;
  border-radius: var(--radius); border: 2px solid transparent;
  font-weight: 700; font-size: var(--fs-1); letter-spacing: 0.02em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; text-align: center; line-height: 1.2; padding-block: 0.75rem;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.15s var(--ease);
}
@media (min-width: 48em) { .btn { white-space: nowrap; } }
.about > *, .why > *, .faq > *, .contact > * { min-width: 0; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--copper-gloss); color: #fff; border-color: transparent;
  box-shadow: var(--copper-shadow); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 16px 32px -10px rgba(197, 104, 53, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.18); }

/* Copper seal: the glossy disc from the brand's Instagram highlights */
.seal {
  display: inline-grid; place-items: center; flex: none;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--copper-gloss); color: #fff;
  box-shadow: var(--copper-shadow), 0 0 0 3px rgba(255, 255, 255, 0.06);
  font-weight: 800; font-size: 1rem; letter-spacing: 0;
}
.seal svg { width: 1.35rem; height: 1.35rem; stroke-width: 2.6; }
.seal--sm { width: 1.75rem; height: 1.75rem; }
.seal--sm svg { width: 0.95rem; height: 0.95rem; }
.seal--lg { width: 4rem; height: 4rem; font-size: 1.25rem; }
.seal--lg svg { width: 1.75rem; height: 1.75rem; }
/* Ref: solid dark rectangular CTA on light sections (copper gloss stays on dark sections) */
.btn-dark { background: var(--navy-deep); color: #fff; border-color: var(--navy-deep); border-radius: 3px; padding-inline: 2rem; }
.btn-dark:hover { background: var(--navy); border-color: var(--navy); }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-outline--light, .section--dark .btn-outline { color: #fff; border-color: #fff; }
.btn-outline--light:hover, .section--dark .btn-outline:hover { background: #fff; color: var(--ink); }
.btn-link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-0);
  color: var(--copper); text-decoration: none; min-height: 2.75rem;
}
.btn-link:hover { color: var(--copper-deep); text-decoration: underline; text-underline-offset: 4px; }
.btn svg, .btn-link svg { width: 1.1em; height: 1.1em; flex: none; }
.btn .arrow { margin-left: 0.15em; transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */
/* Top bar (house style): location, email, phone, socials */
/* Minimal: flat dark band, small tracked type, thin icons, no boxes */
.topbar { display: none; background: var(--navy-deep); color: rgba(255, 255, 255, 0.72); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 2.5rem; }
.topbar__right { display: flex; align-items: center; gap: var(--s-6); }
.topbar__item { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; color: inherit; transition: color 0.2s var(--ease); }
.topbar__item svg { width: 0.9rem; height: 0.9rem; stroke-width: 1.75; opacity: 0.8; }
a.topbar__item:hover { color: #fff; }
.topbar__social { display: inline-flex; gap: var(--s-4); }
.topbar__social a { display: grid; place-items: center; color: inherit; transition: color 0.2s var(--ease); }
.topbar__social a:hover { color: var(--copper-bright); }
.topbar__social svg { width: 0.9rem; height: 0.9rem; stroke-width: 1.75; }
@media (min-width: 48em) { .topbar { display: block; } }

.site-header {
  position: sticky; top: 0; z-index: 50;
  margin-bottom: calc(var(--nav-h) * -1); /* lets the hero slide underneath */
  height: var(--nav-h);
  color: #fff;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(11, 29, 51, 0.7), rgba(11, 29, 51, 0));
  transition: opacity 0.3s var(--ease);
}
.site-header.is-solid { background: rgba(255, 255, 255, 0.96); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
/* Scrolled: compact bar + smaller logo. Height and negative margin change together, so nothing below shifts. */
.site-header.is-solid { height: 5rem; margin-bottom: -5rem; }
.site-header { transition: background-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease), height 0.3s var(--ease), margin 0.3s var(--ease); }
.brand__logo { transition: height 0.3s var(--ease); }
.is-solid .brand__logo { height: 3.5rem; }
.site-header.is-solid::before { opacity: 0; }
@supports (backdrop-filter: blur(8px)) {
  .site-header.is-solid { background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(10px); }
}

.nav { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: var(--s-4); }

.brand { display: inline-flex; align-items: center; text-decoration: none; min-height: 2.75rem; flex: none; }
.brand__logo { height: 4.25rem; width: auto; }
.brand__logo--light { display: none; }
.is-solid .brand__logo--dark { display: none; }
.is-solid .brand__logo--light { display: block; }
.nav__right { display: flex; align-items: center; gap: var(--s-3); flex: none; }
@media (min-width: 64em) { .brand__logo { height: 7rem; } }
.nav__links { display: none; }
.nav__cta { display: none; }
.nav__phone { display: none; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border: 0; background: transparent; cursor: pointer; border-radius: var(--radius);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 1.5rem; height: 2px; background: currentColor; position: relative;
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after { position: absolute; top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer {
  position: fixed; inset: 0; z-index: 49;
  background: var(--dark-bg); color: #fff;
  padding: calc(var(--nav-h) + var(--s-6)) var(--gutter) var(--s-8);
  display: flex; flex-direction: column; gap: var(--s-2);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s 0.25s;
  overflow-y: auto;
}
.nav-drawer.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.nav-drawer a { color: #fff; text-decoration: none; font-size: 1.5rem; font-weight: 700; text-transform: uppercase; padding: var(--s-3) 0; border-bottom: 1px solid var(--line-dark); }
.nav-drawer .btn { margin-top: var(--s-5); border-bottom: 0; font-size: var(--fs-1); }
.nav-drawer .nav-drawer__phone { font-size: var(--fs-2); font-weight: 600; text-transform: none; border: 0; color: var(--slate-light); }
body.nav-open { overflow: hidden; }
body.nav-open .site-header { background: var(--navy); color: #fff; }
body.nav-open .site-header::before { opacity: 0; }
body.nav-open .brand__logo--light { display: none; }
body.nav-open .brand__logo--dark { display: block; }

@media (min-width: 64em) {
  :root { --nav-h: 7.5rem; }
  .nav-toggle, .nav-drawer { display: none; }
  .nav__links { display: flex; gap: clamp(1rem, 2vw, 2rem); }
  .nav__links a { text-decoration: none; font-weight: 600; font-size: var(--fs-0); letter-spacing: 0.06em; text-transform: uppercase; padding: var(--s-2) 0; position: relative; }
  .nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease); }
  .nav__links a:hover::after, .nav__links a[aria-current="true"]::after { transform: scaleX(1); }
  .nav__right { display: flex; align-items: center; gap: var(--s-5); }
  .nav__phone { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; font-weight: 700; font-size: var(--fs-1); min-height: 2.75rem; }
  .nav__phone svg { width: 1.1em; height: 1.1em; }
  .nav__cta { display: inline-flex; min-height: 2.75rem; padding-inline: 1.25rem; font-size: var(--fs-0); }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; z-index: 2; /* above the next section so the trust card can overlap it */
  min-height: 100svh; min-height: 100dvh;
  display: grid; align-items: end;
  color: #fff; background: var(--navy-deep);
  padding-top: var(--nav-h);
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media video { position: absolute; inset: 0; }
.hero__media--desktop { display: none; }
@media (min-width: 48em) {
  .hero__media--mobile { display: none; }
  .hero__media--desktop { display: block; }
}
/* Video-first hero (ref: Rhino Demolition): the footage stays clean; only a soft fade at the
   bottom so the one-line H1 and CTA read, plus a thin one under the transparent header. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Shade pooled in the bottom-left corner, where the copy sits; the rest of the frame stays clean. */
  background:
    linear-gradient(to bottom, rgba(11, 29, 51, 0.55) 0%, rgba(11, 29, 51, 0) 22%),
    radial-gradient(ellipse 110% 95% at 0% 100%, rgba(11, 29, 51, 0.96) 0%, rgba(11, 29, 51, 0.82) 40%, rgba(11, 29, 51, 0.4) 70%, rgba(11, 29, 51, 0) 100%),
    linear-gradient(to top, rgba(11, 29, 51, 0.6) 0%, rgba(11, 29, 51, 0) 22%);
}
.hero__content {
  padding-block: clamp(3rem, 6vw, 6rem) clamp(2.5rem, 5vw, 4.5rem);
  max-width: 72rem; /* wide enough for "built for life in Little River, SC" on one line */
}
/* Capped at 3.5rem so "built for life in Little River, SC" fits the container on one line */
.hero__content .h1 { font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.5rem); margin-bottom: var(--s-6); }
/* Location stays on the "built for life" line: two lines total */
.hero__content .h1 { text-wrap: initial; }
.hero__content .h1 { text-shadow: 0 2px 4px rgba(11, 29, 51, 0.55), 0 12px 32px rgba(11, 29, 51, 0.45); }
.hero__content .h1 em { display: inline; font-size: 1em; font-weight: 500; white-space: nowrap; margin-left: 0.1em; }
@media (max-width: 63.99em) { .hero__content .h1 em { display: block; margin-left: 0; } } /* below desktop the line no longer fits: own line */
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); }

/* Rotating word in the H1: the current word slides up and out, the next slides in from below */
.swap { display: inline-block; position: relative; vertical-align: bottom; overflow: hidden; color: var(--copper-bright); padding-inline: 0.04em; }
.swap__word { display: inline-block; }
.swap.is-out .swap__word { animation: swap-out 0.35s var(--ease) forwards; }
.swap.is-in .swap__word { animation: swap-in 0.45s var(--ease); }
@keyframes swap-out { to { transform: translateY(-110%); opacity: 0; } }
@keyframes swap-in { from { transform: translateY(110%); opacity: 0; } to { transform: none; opacity: 1; } }

/* Entrance: headline then button rise into place on load */
@media (prefers-reduced-motion: no-preference) {
  .hero__content > * { opacity: 0; transform: translateY(24px); animation: hero-rise 0.9s var(--ease) forwards; }
  .hero__content > :nth-child(2) { animation-delay: 0.25s; }
  @keyframes hero-rise { to { opacity: 1; transform: none; } }
}
/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding-block: var(--section); position: relative; clip-path: inset(0); overflow-x: clip; } /* clip-path hides the deco pieces, overflow-x: clip keeps them from widening the page on mobile (neither breaks sticky) */

/* --------------------------------------------------------------------------
   Logo fragments: pieces of the Ocean Bay mark (flourishes, wood grain, bricks,
   house, diamond) floating softly behind the content, blurred, low opacity.
   Painted through mask-image so colour + blur are CSS. Purely decorative.
   -------------------------------------------------------------------------- */
.deco {
  position: absolute; z-index: 0; pointer-events: none;
  width: var(--w, 18rem); aspect-ratio: var(--ar, 1);
  background: var(--deco-color, var(--copper));
  -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat;
  opacity: var(--o, 0.12); filter: blur(var(--blur, 3px));
  transform: rotate(var(--rot, 0deg));
  animation: deco-float var(--dur, 14s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}
.section > .container, .section > .about { position: relative; z-index: 1; }
.deco--flourish-left  { --mask: url("/assets/logo/frag/flourish-left.svg");  --ar: 2; }
.deco--flourish-right { --mask: url("/assets/logo/frag/flourish-right.svg"); --ar: 2.1; }
.deco--swash   { --mask: url("/assets/logo/frag/swash.svg");   --ar: 5.8; }
.deco--grain   { --mask: url("/assets/logo/frag/grain.svg");   --ar: 0.83; }
.deco--bricks  { --mask: url("/assets/logo/frag/bricks.svg");  --ar: 0.71; }
.deco--house   { --mask: url("/assets/logo/frag/house.svg");   --ar: 1.09; }
.deco--diamond { --mask: url("/assets/logo/frag/diamond.svg"); --ar: 1.04; }
@keyframes deco-float {
  from { transform: rotate(var(--rot, 0deg)) translateY(-10px); }
  to   { transform: rotate(var(--rot, 0deg)) translateY(14px); }
}
@media (prefers-reduced-motion: reduce) { .deco { animation: none; } }
@media (max-width: 47.99em) { .deco { --w: 10rem; opacity: calc(var(--o, 0.12) * 0.8); } .deco--hide-sm { display: none; } }
/* Two plain (white) sections back to back: drop the second one's top padding so the gap isn't doubled */
.section:not([class*="section--"]):not(.about-section) + .section:not([class*="section--"]) { padding-top: 0; }
.section--mist { background: var(--mist); }
.section--dark { background: var(--dark-bg); color: #fff; position: relative; }
.section--wood { background: var(--wood-bg); } /* deep wood brown from the logo grain */
.section--wood .kicker { color: var(--copper-bright); }
.section--wood .badge { border-color: rgba(255, 255, 255, 0.2); }
.section--dark .kicker { color: var(--copper-bright); }
.section--dark .lead, .section--dark .muted { color: rgba(255, 255, 255, 0.72); }
.section--dark .h2, .section--dark .h3 { color: #fff; }
.section__cta { margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); }

/* About: split editorial. Photo bleeds to the left edge at full height; copy sits in the right column,
   aligned to the page container. Section padding is on the text column, not the section. */
.about-section { padding-block: 0; }
.about { display: grid; }
.about__media { margin: 0; }
.about__media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 58%; }
.about__text { padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem) var(--gutter); }
.about__text .kicker { margin-bottom: var(--s-2); }
.about__text .h2 { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem); }
.about__p { color: var(--ink-3); line-height: 1.6; max-width: 56ch; margin-top: var(--s-4); }
.about__p + .about__p { margin-top: var(--s-3); }
.about__text .section__cta { margin-top: var(--s-5); }
@media (min-width: 60em) {
  /* 4 tracks: [edge gutter][left half of container][right half of container][edge gutter].
     Photo = tracks 1-2 (bleeds to the viewport edge), text = track 3 (ends flush with the container). */
  .about {
    grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, calc(var(--container) / 2)) minmax(0, calc(var(--container) / 2)) minmax(var(--gutter), 1fr);
    align-items: stretch;
  }
  /* Photo fills whatever height the text column needs (absolute), instead of forcing its own portrait height */
  .about__media { grid-column: 1 / 3; position: relative; min-height: 26rem; }
  .about__media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .about__text { grid-column: 3; align-self: center; padding-inline: clamp(3rem, 6vw, 6rem) 0; }
}

/* Reviews: Google reviews copied into the page (summary bar + cards) */
.section-head--center { text-align: center; }
.section-head--center .h2 { margin-inline: auto; max-width: 32ch; }
.section__cta--center { text-align: center; }


/* --------------------------------------------------------------------------
   Services: horizontal scroll-snap track (same pattern as the Tuon site).
   Wide cards, copy left / photo right; no JS. Stacks vertically on phones.
   -------------------------------------------------------------------------- */
.services__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.services__head .h2 { max-width: 20ch; }
.services__intro { max-width: 24rem; color: var(--ink-3); line-height: var(--lh-body); }

/* Centered "focus" carousel: the active card sits in the middle, sharp and full size;
   neighbours are blurred, faded and slightly smaller (JS sets --d = distance from centre, 0..1).
   Track bleeds the full viewport so the side cards peek in from the edges. */
.services__wrap { position: relative; --card-w: min(50rem, 88vw); }
.services__arrow {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line); color: var(--navy); cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.services__arrow--prev { left: calc(50% - 50vw + var(--gutter)); }
.services__arrow--next { right: calc(50% - 50vw + var(--gutter)); }
.services__arrow svg { width: 1.25rem; height: 1.25rem; }
.services__arrow:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.services__track {
  display: flex; align-items: stretch; gap: var(--s-5);
  width: 100vw; margin-left: calc(50% - 50vw);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* side padding = half the viewport minus half a card, so the first/last card can sit in the centre */
  padding: var(--s-4) calc(50vw - var(--card-w) / 2) var(--s-5);
  scrollbar-width: none; /* arrows + drag replace the scrollbar */
}
.services__track::-webkit-scrollbar { display: none; }

.svc-card {
  --d: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 54%;
  flex: 0 0 auto; width: var(--card-w); min-height: 26rem;
  scroll-snap-align: center; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  opacity: calc(1 - var(--d) * 0.6);
  filter: blur(calc(var(--d) * 4px));
  transform: scale(calc(1 - var(--d) * 0.08));
  transition: opacity 0.35s var(--ease), filter 0.35s var(--ease), transform 0.35s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .svc-card { transition: none; } }
.svc-card__content { display: flex; flex-direction: column; gap: var(--s-4); padding: clamp(1.5rem, 2.4vw, 2.125rem); }
.svc-card__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(3.875rem, 6vw, 5.25rem); height: clamp(3.875rem, 6vw, 5.25rem); border-radius: 50%;
  background: var(--wood-soft); color: var(--wood);
  font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); font-style: italic; font-weight: 300;
}
.svc-card h3 { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 2.2vw, 1.875rem); font-weight: 800; line-height: 1.14; letter-spacing: -0.01em; color: var(--navy); }
.svc-card p { margin: 0; color: var(--ink-3); line-height: var(--lh-body); }
.svc-card .link-rule { margin-top: auto; align-self: flex-start; }
.svc-card__image { width: 100%; height: 100%; object-fit: cover; }
.svc-card__image--bathroom { transform: rotate(-1.6deg) scale(1.06); object-position: 52% 50%; }
.svc-card__image--entertainment { transform: rotate(1.25deg) scale(1.05); object-position: 48% 50%; }

/* Underlined text link (Tuon .tuon-link) */
.link-rule {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding-bottom: 6px; border-bottom: 1px solid var(--copper);
  color: var(--navy); text-decoration: none;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.link-rule:hover { color: var(--copper); }

@media (max-width: 47.5em) {
  /* Phones: same centred carousel (swipe), cards go photo-on-top; arrows hidden */
  .services__head { flex-direction: column; align-items: flex-start; margin-bottom: var(--s-6); }
  .services__arrow { display: none; }
  .services__track { gap: var(--s-4); }
  .svc-card { grid-template-columns: 1fr; min-height: 0; border-radius: 8px; }
  .svc-card__image { order: -1; height: 11.875rem; }
  .svc-card__content { padding: var(--s-5); }
  .svc-card h3 { font-size: 1.75rem; }
}

/* Why choose us: tinted icon circle, bold label, one short line — centered, 5 across */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-4); }
.why-item { text-align: center; }
.why-item__icon {
  display: inline-grid; place-items: center; width: 6.5rem; height: 6.5rem; border-radius: 50%;
  background: var(--wood-soft); color: var(--wood); margin-bottom: var(--s-4);
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}
.why-item__icon svg { width: 2.5rem; height: 2.5rem; }
.why-item:hover .why-item__icon { transform: translateY(-4px); background: var(--copper-soft); }
.why-item h3 { font-family: var(--font-display); font-size: var(--fs-3); font-weight: 800; color: var(--ink); margin-bottom: var(--s-2); text-wrap: balance; }
.why-item p { font-size: var(--fs-0); color: var(--slate); max-width: 22ch; margin-inline: auto; }
@media (min-width: 64em) { .why-grid { grid-template-columns: repeat(5, 1fr); gap: var(--s-5); } }
.why { display: grid; gap: var(--s-7); }
.why__list { counter-reset: why; display: grid; gap: 0; }
.why__item {
  counter-increment: why; display: grid; grid-template-columns: 3rem 1fr; gap: var(--s-5);
  padding-block: var(--s-5); border-top: 1px solid var(--line-dark);
}
.why__item:last-child { border-bottom: 1px solid var(--line-dark); }
.why__item::before {
  content: counter(why, decimal-leading-zero);
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--copper-gloss); box-shadow: var(--copper-shadow);
  font-weight: 800; font-size: var(--fs-1); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.why__item h3 { font-size: var(--fs-2); font-weight: 700; margin-bottom: var(--s-2); }
.why__item p { color: rgba(255, 255, 255, 0.72); }
.why__media { position: relative; }
.why__media img { border-radius: var(--radius); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.badges { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.section-head .badges { margin-top: var(--s-5); }
.badge {
  display: inline-flex; align-items: center; gap: var(--s-3);
  border: 1px solid rgba(42, 212, 239, 0.35); border-radius: 999px; padding: var(--s-1) var(--s-4) var(--s-1) var(--s-1);
  font-size: var(--fs-0); font-weight: 600; color: #fff;
  background: rgba(11, 29, 51, 0.5); box-shadow: 0 0 24px -6px rgba(42, 212, 239, 0.35);
}
.why__media img { box-shadow: 0 0 0 1px rgba(42, 212, 239, 0.3), 0 30px 60px -30px rgba(42, 212, 239, 0.5); }
@media (min-width: 60em) {
  .why { grid-template-columns: 1fr 1.2fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .why__media { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
}

/* --------------------------------------------------------------------------
   Portfolio wall: 2 masonry columns drifting vertically in opposite directions.
   Each column holds its photos twice; the track slides by one copy (-50%) and loops.
   Hover = jelly wobble; click = lightbox with a springy open.
   -------------------------------------------------------------------------- */
.wall {
  --row-h: clamp(11rem, 22vw, 20rem); --wall-gap: var(--s-4); --wall-speed: 65s;
  display: grid; gap: var(--wall-gap);
  width: 100vw; margin-left: calc(50% - 50vw); /* full-bleed */
  overflow: hidden;
  /* fade the left/right edges so photos slide in and out softly */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
/* Each row holds its photos twice, side by side; the track slides by one copy and loops */
.wall__row { display: flex; gap: var(--wall-gap); width: max-content; }
.wall__track { display: flex; gap: var(--wall-gap); flex: none; }
.wall__row--left .wall__track { animation: wall-left var(--wall-speed) linear infinite; }
.wall__row--right .wall__track { animation: wall-right var(--wall-speed) linear infinite; }
@keyframes wall-left { to { transform: translateX(calc(-100% - var(--wall-gap))); } }
@keyframes wall-right { from { transform: translateX(calc(-100% - var(--wall-gap))); } to { transform: none; } }
.wall:hover .wall__track, .wall.is-paused .wall__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .wall__track { animation: none; } .wall__row { overflow-x: auto; } }

/* Fixed row height, width from the photo's aspect ratio (--ar set inline) = horizontal masonry */
.wall__item { margin: 0; flex: none; height: var(--row-h); width: calc(var(--row-h) * var(--ar, 1)); border-radius: var(--radius); overflow: hidden; background: var(--mist); }
.wall__item a { position: relative; display: block; height: 100%; cursor: zoom-in; }
.wall__item img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: center; }
/* Frame the craftsman below the damaged ceiling without changing the original photo. */
.wall__item img[src*="door-molding-005"] { transform: scale(1.4); transform-origin: center bottom; }
.wall__item:hover img[src*="door-molding-005"] { animation: none; transform: scale(1.43); }
/* Hover = invitation to click: soft navy tint + a copper "view" badge that springs up from the bottom */
.wall__item a::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(11, 29, 51, 0.6), rgba(11, 29, 51, 0.15));
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.wall__item a::after {
  content: "View"; position: absolute; left: 50%; bottom: var(--s-4); z-index: 2; pointer-events: none;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1rem 0.55rem 0.7rem; border-radius: 999px;
  background: var(--copper-gloss); color: #fff; box-shadow: var(--copper-shadow);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transform: translate(-50%, 12px) scale(0.85);
  transition: opacity 0.3s var(--ease), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* magnifier icon inside the badge (inline SVG as a mask so it takes the text colour) */
.wall__item a::after {
  padding-left: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E"), var(--copper-gloss);
  background-repeat: no-repeat, no-repeat; background-size: 1.1rem 1.1rem, 100% 100%; background-position: 0.75rem center, 0 0;
}
.wall__item a:hover::before, .wall__item a:focus-visible::before { opacity: 1; }
.wall__item a:hover::after, .wall__item a:focus-visible::after { opacity: 1; transform: translate(-50%, 0) scale(1); }
/* Jelly: quick squash-and-stretch on hover */
.wall__item:hover img { animation: jelly 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); transform: scale(1.03); }
@keyframes jelly {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.06, 0.97); }
  50%  { transform: scale(0.98, 1.05); }
  70%  { transform: scale(1.04, 0.99); }
  100% { transform: scale(1.03, 1.03); }
}
@media (max-width: 47.99em) { .wall { --wall-gap: var(--s-3); --wall-speed: 50s; } }

/* Lightbox */
.lb {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--s-5);
  background: rgba(11, 29, 51, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.25s var(--ease);
}
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }
.lb__figure { margin: 0; max-width: min(92vw, 70rem); max-height: 88vh; }
.lb__img {
  display: block; max-width: 100%; max-height: 88vh; width: auto; height: auto; object-fit: contain;
  border-radius: var(--radius); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7); background: var(--paper);
  transform: scale(0.6); opacity: 0;
}
.lb__img[src*="door-molding-005"] {
  width: min(88vw, 76vh); height: min(72vh, 84vw); max-height: 72vh;
  object-fit: cover; object-position: center bottom;
}
.lb.is-open .lb__img { animation: lb-pop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes lb-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.04, 0.97); opacity: 1; }
  80%  { transform: scale(0.985, 1.02); }
  100% { transform: none; opacity: 1; }
}
.lb__close {
  position: absolute; top: var(--s-4); right: var(--s-4); width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper); color: var(--navy); border: 0; cursor: pointer;
}
.lb__close svg { width: 1.25rem; height: 1.25rem; }
.lb__close:hover { background: var(--copper); color: #fff; }
@media (prefers-reduced-motion: reduce) { .lb.is-open .lb__img { animation: none; transform: none; opacity: 1; } .wall__item:hover img { animation: none; } }

/* FAQ: single centered column — head, list, CTA */
.faq { display: grid; }
.faq__list { border-top: 1px solid var(--line); width: min(100%, 52rem); margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) 0; background: none; border: 0; text-align: left; cursor: pointer;
  font-size: var(--fs-2); font-weight: 700; line-height: 1.3; min-height: 3.5rem;
}
.faq__q .seal { transition: transform 0.3s var(--ease); }
.faq__q[aria-expanded="true"] .seal { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: var(--s-5); color: var(--ink-3); max-width: 62ch; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

/* Contact */
.contact { display: grid; gap: var(--s-7); }
.contact__info dl { display: grid; gap: var(--s-5); margin: var(--s-6) 0 0; }
.contact__info dt { font-size: var(--fs-0); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); margin-bottom: var(--s-1); }
.contact__info dd { margin: 0; font-size: var(--fs-2); }
.contact__info dd a { text-decoration: none; font-weight: 700; }
.contact__info dd a:hover { color: var(--copper-bright); }
.contact__area { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line-dark); font-size: var(--fs-0); color: rgba(255, 255, 255, 0.7); }

.form-card {
  background: var(--paper); border-radius: 10px; color: var(--ink);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 30px 60px -30px rgba(11, 29, 51, 0.35), 0 0 0 1px rgba(11, 29, 51, 0.06);
}
.form-card--accent { border-top: 4px solid var(--copper); }
.form-card__title { font-family: var(--font-display); font-size: var(--fs-3); font-weight: 800; color: var(--navy); margin-bottom: var(--s-1); }
.form-card__lead { color: var(--slate); font-size: var(--fs-0); margin-bottom: var(--s-5); }
.section-head__lead { max-width: 52ch; margin: var(--s-4) auto 0; color: var(--ink-3); line-height: var(--lh-body); }
.form__fine a { color: var(--navy); }
/* Native select with a custom chevron */
.field--select { position: relative; }
.field--select select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer; }
.field--select select:invalid { color: #767a80; }
.field--select::after {
  content: ""; position: absolute; right: 1rem; bottom: 1.35rem; width: 0.6rem; height: 0.6rem; pointer-events: none;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(45deg);
}
.field.is-invalid select { border-color: #a12a1f; }
.field--select.is-invalid::after { bottom: 3.1rem; }
/* Service-area map (Leaflet + OSM), copper pins; the home pin is bigger */
.info-card__note { font-size: var(--fs-0); color: var(--slate); margin: 0 0 var(--s-4); }
.info-map { position: relative; height: 18rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--mist); z-index: 0; }
.info-map .leaflet-tile-pane { filter: saturate(0.55) contrast(0.95); } /* quieter basemap so the pins pop */
.map-pin { position: relative; width: 28px; height: 28px; }
.map-pin__dot {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--copper-gloss); box-shadow: 0 0 0 3px #fff, 0 6px 14px -4px rgba(197, 104, 53, 0.9);
}
.map-pin__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--copper); opacity: 0; animation: pin-pulse 2.4s ease-out infinite; }
.map-pin--home .map-pin__dot { width: 18px; height: 18px; background: var(--navy); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--copper); }
.map-pin--home .map-pin__ring { animation-duration: 1.8s; }
@keyframes pin-pulse { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } }
.map-label {
  background: var(--paper); color: var(--navy); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.02em;
  padding: 0.2rem 0.5rem; border-radius: 4px; border: 1px solid var(--line); box-shadow: 0 6px 14px -8px rgba(11, 29, 51, 0.5); white-space: nowrap;
}
.leaflet-tooltip.map-label::before { display: none; }
.leaflet-container { font-family: var(--font); }
.leaflet-control-attribution { font-size: 10px; opacity: 0.7; }
@media (prefers-reduced-motion: reduce) { .map-pin__ring { animation: none; } }

/* Business information card (house style) */
.info-card {
  background: var(--paper); border-radius: 10px; padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: 0 30px 60px -30px rgba(11, 29, 51, 0.35), 0 0 0 1px rgba(11, 29, 51, 0.06);
  align-self: start;
}
@media (min-width: 60em) { .info-card { position: sticky; top: calc(var(--nav-h) + 1.5rem); } }
/* Last section before the footer clears the contact bar, which rises half its height over it (3 stacked tiles on phones) */
#contact, .page-gallery .gallery-page { padding-bottom: calc(var(--section) + var(--bar-clear, 9.5rem)); }
@media (min-width: 48em) { :root { --bar-clear: 3.5rem; } }
.info-card__title { font-size: var(--fs-2); font-weight: 800; color: var(--navy); padding-left: var(--s-3); border-left: 3px solid var(--copper); margin: 0 0 var(--s-4); line-height: 1.2; }
.info-card__title + .info-card__title { margin-top: var(--s-6); }
.info-list { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); font-size: var(--fs-1); }
.info-list li { display: flex; gap: var(--s-3); align-items: flex-start; }
.info-list svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--copper); margin-top: 0.2rem; }
.info-list strong { color: var(--navy); }
.info-list a { text-decoration: none; }
.info-list a:hover { color: var(--copper-deep); text-decoration: underline; }
.pills { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pills li { background: var(--mist); color: var(--navy); font-size: var(--fs-0); font-weight: 600; padding: var(--s-2) var(--s-4); border-radius: 999px; }
.form { display: grid; gap: var(--s-4); }
.field { display: grid; gap: var(--s-2); }
.field label { font-weight: 600; font-size: var(--fs-0); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 3.25rem; padding: 0.75rem 1rem;
  border: 1px solid #c9cbc7; border-radius: var(--radius); background: #fff;
  font: inherit; font-size: var(--fs-1); color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--copper); box-shadow: 0 0 0 3px rgba(197, 104, 53, 0.25); }
.field input::placeholder, .field textarea::placeholder { color: #767a80; }
.field .error { display: none; font-size: var(--fs-0); color: #a12a1f; }
.field.is-invalid input, .field.is-invalid textarea { border-color: #a12a1f; }
.field.is-invalid .error { display: block; }
.form__row { display: grid; gap: var(--s-4); }
.form .btn { width: 100%; margin-top: var(--s-2); }
.form__fine { font-size: 0.8rem; color: var(--slate); text-align: center; }
.hp { position: absolute; left: -9999px; }
@media (min-width: 40em) { .form__row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60em) {
  .contact { grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
/* Footer closes the page in the logo's dark wood tone; a faint diamond fragment sits in the corner */
/* Deep navy with a soft light-blue glow bleeding in from the top edge */
.site-footer {
  position: relative; color: rgba(255, 255, 255, 0.78); padding-block: 0 4.5rem;
  background:
    radial-gradient(75% 55% at 50% 0%, rgba(74, 130, 190, 0.55) 0%, rgba(36, 80, 125, 0.25) 40%, transparent 75%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 60%);
}
/* Background layer clips the corner deco (which hangs past the edge) without clipping the contact bar above */
.footer__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.site-footer > .container, .site-footer > .footer__bottom { position: relative; z-index: 1; }

/* Contact bar: three separate cards straddling the footer edge. Frosted navy cards + glossy copper seals,
   centre card is the copper CTA with an arrow. */
.contact-bar { display: grid; grid-template-columns: 1fr; gap: var(--s-3); transform: translateY(-50%); }
.contact-bar__item {
  position: relative; display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5) var(--s-6);
  color: #fff; text-decoration: none; border-radius: 10px;
  background: linear-gradient(180deg, rgba(36, 80, 125, 0.95), rgba(11, 29, 51, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.contact-bar__item small { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.contact-bar__item strong { display: block; font-family: var(--font-display); font-size: var(--fs-3); font-weight: 700; line-height: 1.15; margin-top: 0.2rem; }
.contact-bar__item .seal { width: 3.25rem; height: 3.25rem; } /* glossy copper disc (house style) */
.contact-bar__item--accent { background: var(--copper-gloss); border-color: rgba(255, 255, 255, 0.35); box-shadow: var(--copper-shadow), 0 24px 50px -24px rgba(0, 0, 0, 0.65); }
.contact-bar__item--accent small { color: rgba(255, 255, 255, 0.8); }
.contact-bar__item--accent .seal { background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6); color: #fff; }
.contact-bar__arrow { width: 1.5rem; height: 1.5rem; margin-left: auto; flex: none; transition: transform 0.25s var(--ease); }
a.contact-bar__item:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.28); }
a.contact-bar__item--accent:hover { filter: brightness(1.06); }
a.contact-bar__item--accent:hover .contact-bar__arrow { transform: translateX(4px); }
@media (min-width: 48em) { .contact-bar { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }

.footer { display: grid; gap: var(--s-7); padding-top: var(--s-4); }
.footer__brand img { width: 9rem; }
.footer__tagline { margin-top: var(--s-5); font-family: var(--font-display); font-size: var(--fs-3); font-weight: 800; color: #fff; line-height: 1.2; }
.footer__tagline em { font-style: italic; font-weight: 300; color: var(--copper-bright); }
.footer__brand p:not(.footer__tagline) { margin-top: var(--s-3); max-width: 34ch; font-size: var(--fs-0); line-height: 1.6; }
/* Column heads: copper, small caps, short rule */
.footer h4 { color: var(--copper-bright); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--s-4); padding-bottom: var(--s-3); position: relative; }
.footer h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2rem; height: 2px; background: var(--copper); }
.footer ul { display: grid; gap: var(--s-1); }
.footer a { text-decoration: none; color: rgba(255, 255, 255, 0.78); min-height: 2.25rem; display: inline-flex; align-items: center; transition: color 0.2s var(--ease), transform 0.2s var(--ease); }
.footer ul a:hover { color: #fff; transform: translateX(4px); }
.footer__nap { display: grid; gap: var(--s-3); font-size: var(--fs-0); }
.footer__nap strong { color: #fff; }
.footer__row { display: flex; align-items: flex-start; gap: var(--s-3); line-height: 1.5; }
.footer__row svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.2rem; color: var(--copper-bright); }
.footer__row a { min-height: 0; }
.footer__row a:hover { color: #fff; }
.footer__meta { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); line-height: 1.5; padding-top: var(--s-2); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.footer__meta + .footer__meta { border-top: 0; padding-top: 0; }
.footer__social { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.footer__social a { width: 2.75rem; height: 2.75rem; min-height: 0; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; display: grid; place-items: center; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease); }
.footer__social a:hover { border-color: var(--copper); background: var(--copper); color: #fff; transform: none; }
.footer__social svg { width: 1.1rem; height: 1.1rem; }
.footer__bottom { margin-top: var(--s-8); padding: 0; border: 0; background: var(--copper); color: #fff; }
.footer__bottom-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-5); padding-block: var(--s-4); font-size: var(--fs-0); }
.footer__bottom a { color: #fff; }
@media (min-width: 48em) { .footer { grid-template-columns: 1.4fr 0.9fr 1fr 1.3fr; gap: var(--s-6); } }
@media (min-width: 64em) { .site-footer { padding-bottom: 0; } }
/* room above the footer for the contact bar on mobile, where the sticky call bar also lives */
.site-footer .footer__bottom { padding-bottom: 0; }
@media (max-width: 63.99em) { .footer__bottom-in { padding-bottom: calc(var(--s-4) + 3.5rem); } }

/* Sticky mobile call bar */
.call-bar {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line-dark);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.4);
}
.call-bar a {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 3.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-0); text-decoration: none;
}
.call-bar a svg { width: 1.1rem; height: 1.1rem; }
.call-bar__call { background: var(--navy); color: #fff; }
.call-bar__quote { background: var(--copper-gloss); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }
@media (min-width: 64em) { .call-bar { display: none; } }

/* --------------------------------------------------------------------------
   Reveal (one subtle entrance per section, motion-safe)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* The container itself no longer moves; its parts do, in sequence. */
  :root { --reveal-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --pop-ease: cubic-bezier(0.34, 1.4, 0.64, 1); }

  /* Section head: kicker, then headline, then lead — three beats */
  .reveal .section-head > * { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--reveal-ease), transform 0.7s var(--reveal-ease); }
  .reveal .section-head > :nth-child(2) { transition-delay: 0.12s; }
  .reveal .section-head > :nth-child(3) { transition-delay: 0.24s; }
  .reveal.is-in .section-head > * { opacity: 1; transform: none; }

  /* Staggered children: JS sets --i on each child of [data-stagger] */
  .reveal [data-stagger] > * { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--reveal-ease), transform 0.7s var(--reveal-ease); transition-delay: calc(0.15s + var(--i, 0) * 0.09s); }
  .reveal.is-in [data-stagger] > * { opacity: 1; transform: none; }

  /* Pops: why-icons scale in with a little overshoot */
  .reveal .why-item__icon { transform: scale(0.5); transition: transform 0.8s var(--pop-ease), background-color 0.3s var(--ease); }
  .reveal.is-in .why-item__icon { transform: none; }
  .reveal.is-in .why-item:hover .why-item__icon { transform: translateY(-4px); }

  /* Blocks that slide in from their side */
  .reveal .about__media { opacity: 0; transform: translateX(-40px); transition: opacity 0.9s var(--reveal-ease), transform 0.9s var(--reveal-ease); }
  .reveal.is-in .about__media { opacity: 1; transform: none; }
  .reveal .about__text > * { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--reveal-ease), transform 0.7s var(--reveal-ease); }
  .reveal .about__text > :nth-child(1) { transition-delay: 0.15s; }
  .reveal .about__text > :nth-child(2) { transition-delay: 0.25s; }
  .reveal .about__text > :nth-child(3) { transition-delay: 0.35s; }
  .reveal .about__text > :nth-child(4) { transition-delay: 0.45s; }
  .reveal .about__text > :nth-child(5) { transition-delay: 0.55s; }
  .reveal .about__text > :nth-child(6) { transition-delay: 0.65s; }
  .reveal .about__text > :nth-child(7) { transition-delay: 0.75s; }
  .reveal .about__text > :nth-child(8) { transition-delay: 0.9s; }
  .reveal.is-in .about__text > * { opacity: 1; transform: none; }

  .reveal .services__wrap, .reveal .wall, .reveal .greviews, .reveal .faq__list, .reveal .section__cta {
    opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--reveal-ease), transform 0.8s var(--reveal-ease); transition-delay: 0.25s;
  }
  .reveal .section__cta { transition-delay: 0.45s; }
  .reveal.is-in .services__wrap, .reveal.is-in .wall, .reveal.is-in .greviews, .reveal.is-in .faq__list, .reveal.is-in .section__cta { opacity: 1; transform: none; }

  /* Contact: form from the left, info card from the right */
  .reveal .form-card { opacity: 0; transform: translateX(-32px); transition: opacity 0.8s var(--reveal-ease), transform 0.8s var(--reveal-ease); }
  .reveal .info-card { opacity: 0; transform: translateX(32px); transition: opacity 0.8s var(--reveal-ease) 0.15s, transform 0.8s var(--reveal-ease) 0.15s; }
  .reveal.is-in .form-card, .reveal.is-in .info-card { opacity: 1; transform: none; }

  /* Footer contact cards rise one after another */
  .contact-bar__item { opacity: 0; transform: translateY(30px); }
  .contact-bar.is-in .contact-bar__item { opacity: 1; transform: none; transition: opacity 0.7s var(--reveal-ease), transform 0.7s var(--reveal-ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
  .contact-bar.is-in .contact-bar__item:nth-child(2) { transition-delay: 0.1s; }
  .contact-bar.is-in .contact-bar__item:nth-child(3) { transition-delay: 0.2s; }
  .contact-bar.is-in a.contact-bar__item:hover { transform: translateY(-3px); transition-delay: 0s; }
}

/* --------------------------------------------------------------------------
   Utility pages (thanks / 404 / legal)
   -------------------------------------------------------------------------- */
.page-simple { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
.page-simple .site-header { position: sticky; }
.page-simple main { padding-block: calc(var(--section) + var(--nav-h)) var(--section); }
.page-center { text-align: center; max-width: 40rem; margin-inline: auto; }
.page-center .h1 { font-size: var(--fs-4); margin-bottom: var(--s-4); }
.page-center .lead { margin-inline: auto; margin-bottom: var(--s-6); }
.page-center .actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.page-center .big { font-size: clamp(4rem, 15vw, 8rem); font-weight: 800; line-height: 1; color: var(--navy); }
.legal { max-width: 46rem; }
.legal .h1 { font-size: var(--fs-4); margin-bottom: var(--s-2); }
.legal .updated { color: var(--slate); font-size: var(--fs-0); margin-bottom: var(--s-6); }
.legal h2 { font-size: var(--fs-3); font-weight: 700; margin: var(--s-6) 0 var(--s-3); }
.legal p + p, .legal ul { margin-top: var(--s-3); }
.legal ul { padding-left: 1.25rem; }

/* --------------------------------------------------------------------------
   Gallery page: one folder per client project, opening a process viewer
   -------------------------------------------------------------------------- */
/* Centered banner: client photo under a navy wash, white headline, the 3-step process as pills */
.gallery-banner {
  position: relative; overflow: clip; isolation: isolate; text-align: center; color: #fff; background: var(--navy-deep);
  padding: calc(var(--nav-h) + clamp(3rem, 2rem + 5vw, 6.5rem)) 0 clamp(3.5rem, 2.5rem + 5vw, 6.5rem);
}
.gallery-banner__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transform: scale(1.06); animation: banner-drift 18s var(--ease) forwards; }
.gallery-banner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 75% at 50% 55%, rgba(11, 29, 51, 0.55) 0%, rgba(11, 29, 51, 0.82) 100%),
    linear-gradient(to bottom, rgba(11, 29, 51, 0.7), rgba(11, 29, 51, 0.35) 45%, rgba(11, 29, 51, 0.85));
}
@keyframes banner-drift { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .gallery-banner__bg { animation: none; transform: none; } }
.gallery-banner__in { position: relative; display: grid; justify-items: center; }
.gallery-banner .kicker { letter-spacing: 0.14em; margin-bottom: var(--s-5); display: inline-flex; align-items: center; gap: var(--s-3); }
.gallery-banner .kicker::before, .gallery-banner .kicker::after { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: 0.7; }
/* Big two-register headline: heavy white slab line, light copper italic answer */
.gallery-banner .h1 {
  font-size: clamp(2.6rem, 1.4rem + 5vw, 5.25rem); line-height: 1; letter-spacing: -0.02em; max-width: 16ch; margin-inline: auto;
  text-shadow: 0 2px 6px rgba(11, 29, 51, 0.45), 0 18px 48px rgba(11, 29, 51, 0.5);
}
.gallery-banner .h1 em { margin-top: 0.08em; font-weight: 300; letter-spacing: -0.01em; }
.gallery-banner__lead { max-width: 56ch; margin: var(--s-5) auto 0; color: rgba(255, 255, 255, 0.86); line-height: var(--lh-body); font-size: var(--fs-2); }
.page-gallery .gallery-page { padding-top: clamp(3rem, 2rem + 3vw, 5rem); }

.folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: clamp(2rem, 1.5rem + 2vw, 3rem) clamp(1.25rem, 1rem + 1vw, 2rem); }
.folder { position: relative; display: block; padding-top: 2.1rem; text-decoration: none; color: inherit; }
/* File-folder tab: wood-soft, with a slanted right edge */
.folder__tab {
  position: absolute; top: 0; left: 0; height: 2.2rem; max-width: 85%; padding: 0 1.1rem 0 1rem;
  display: flex; align-items: center; background: var(--wood-soft); color: var(--wood);
  border-radius: 10px 0 0 0; font-size: var(--fs-0); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.folder__tab::after {
  content: ""; position: absolute; top: 0; right: -1.4rem; width: 1.5rem; height: 100%;
  background: inherit; clip-path: polygon(0 0, 35% 0, 100% 100%, 0 100%); border-top-right-radius: 10px;
}
.folder__tab { overflow: visible; z-index: 5; } /* stays above the photos fanning out on hover */
.folder__body {
  display: block; background: var(--wood-soft); border-radius: 0 14px 14px 14px; padding: 1.1rem 1.1rem 1.25rem;
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.folder:hover .folder__body, .folder:focus-visible .folder__body { box-shadow: var(--shadow); transform: translateY(-4px); }
.folder:hover .folder__tab, .folder:focus-visible .folder__tab { background: var(--wood); color: #fff; }
.folder:hover .folder__body { background: #efdccd; }
.folder:focus-visible { outline: none; }
.folder:focus-visible .folder__body { outline: 3px solid var(--copper); outline-offset: 3px; }

/* Photos sticking out of the folder: the 3D render (if any) peeks behind the finished shot */
.folder__stack { position: relative; display: block; aspect-ratio: 4 / 3; margin-top: 0.4rem; }
.folder__cover, .folder__peek { position: absolute; border-radius: 8px; overflow: hidden; background: #fff; }
.folder__cover { inset: 0; z-index: 3; box-shadow: 0 14px 30px -18px rgba(11, 29, 51, 0.6); }
.folder__peek { inset: 0 6%; z-index: 1; box-shadow: 0 6px 18px -10px rgba(11, 29, 51, 0.5); transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.folder__peek--1 { transform: translate(-3%, -7%) rotate(-4deg); z-index: 2; }
.folder__peek--2 { transform: translate(4%, -5%) rotate(3.5deg); }
.folder:hover .folder__peek--1 { transform: translate(-12%, -13%) rotate(-9deg); }
.folder:hover .folder__peek--2 { transform: translate(12%, -11%) rotate(8deg); }
.folder__cover img, .folder__peek img { width: 100%; height: 100%; object-fit: cover; }
.folder__cover img { transition: transform 0.6s var(--ease); }
.folder:hover .folder__cover img { transform: scale(1.04); }
.folder__badge {
  position: absolute; left: 0.75rem; bottom: 0.75rem; z-index: 4; padding: 0.35rem 0.75rem; border-radius: 999px;
  background: var(--copper-gloss); box-shadow: var(--copper-shadow); color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.folder__meta { display: grid; gap: var(--s-2); padding-top: 1.1rem; }
.folder__title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; color: var(--navy); }
.folder__steps { display: flex; flex-wrap: wrap; gap: 0.25rem 0; font-size: 0.78rem; font-weight: 600; color: var(--ink-3, #4b5058); }
.folder__steps li + li::before { content: "\2192"; margin: 0 0.45rem; color: var(--copper); }
.folder__count { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-0); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--copper); }
.folder__count svg { width: 1em; height: 1em; transition: transform 0.25s var(--ease); }
.folder:hover .folder__count svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .folder__peek, .folder__body, .folder__cover img { transition: none; } }

/* Project viewer: large sheet with the process as numbered stages */
.pv {
  width: min(100vw - 2rem, 76rem); max-width: none; height: calc(100dvh - 2rem); max-height: none;
  padding: 0; border: 0; border-radius: 14px; background: var(--paper); color: var(--ink);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.6); overflow: hidden;
}
.pv[open] { display: flex; flex-direction: column; animation: pv-in 0.4s var(--ease); }
.pv::backdrop { background: rgba(11, 29, 51, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@keyframes pv-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (max-width: 39.99em) { .pv { width: 100vw; height: 100dvh; border-radius: 0; } }
.pv__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--gutter); border-bottom: 1px solid var(--line); flex: none; }
.pv__heading .kicker { margin-bottom: var(--s-1, 0.25rem); }
.pv__close { width: 3rem; height: 3rem; border-radius: 50%; border: 0; flex: none; display: grid; place-items: center; background: var(--mist); color: var(--navy); cursor: pointer; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); }
.pv__close svg { width: 1.25rem; height: 1.25rem; }
.pv__close:hover { background: var(--copper); color: #fff; }
.pv__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-6) var(--gutter) var(--s-8); }
.pv__stage { position: relative; padding-left: clamp(0rem, 4vw, 4.5rem); }
.pv__stage + .pv__stage { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
/* Thin wood line linking the numbered stages */
@media (min-width: 40em) {
  .pv__stage::before { content: ""; position: absolute; left: 1.4rem; top: 3.2rem; bottom: -3rem; width: 2px; background: var(--wood-soft); }
  .pv__stage:last-of-type::before { display: none; }
}
.pv__stage-head { display: flex; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-5); }
@media (min-width: 40em) { .pv__stage-head { margin-left: calc(-1 * clamp(0rem, 4vw, 4.5rem)); } }
.pv__num {
  flex: none; width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--copper-gloss); box-shadow: var(--copper-shadow); color: #fff; font-weight: 800; font-size: 0.95rem;
}
.pv__stage-head p { color: var(--slate); margin-top: 0.2rem; max-width: 52ch; }
.pv__grid { columns: 3 16rem; column-gap: var(--s-4); }
.pv__grid li { break-inside: avoid; margin-bottom: var(--s-4); }
.pv__shot { display: block; width: 100%; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: zoom-in; background: var(--mist); }
.pv__shot img { width: 100%; transition: transform 0.5s var(--ease); }
.pv__shot:hover img { transform: scale(1.04); }
.pv__shot img[src*="door-molding-005"] { aspect-ratio: 1; object-fit: cover; object-position: center bottom; }
.pv__shot img[src*="door-molding-008"] { aspect-ratio: 0.9; object-fit: cover; object-position: center bottom; }
.pv__stage--design .pv__shot { outline: 1px solid var(--line); }
.pv__cta { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding: var(--s-6); border-radius: 12px; background: var(--wood-soft); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); }
.pv__cta p { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3); color: var(--navy); }

/* Full-size photo on top of the project viewer */
.pv-photo { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: var(--s-5); border: 0; background: transparent; }
.pv-photo[open] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3); }
.pv-photo::backdrop { background: rgba(11, 29, 51, 0.92); }
.pv-photo__figure { margin: 0; display: grid; justify-items: center; gap: var(--s-3); min-width: 0; }
.pv-photo__img { max-width: 100%; max-height: calc(100dvh - 7rem); width: auto; height: auto; object-fit: contain; border-radius: var(--radius); background: #fff; }
.pv-photo__img[src*="door-molding-005"] {
  width: min(80vw, 76vh); height: min(72vh, 76vw); max-height: 72vh;
  object-fit: cover; object-position: center bottom;
}
.pv-photo__img[src*="door-molding-008"] {
  width: min(80vw, 65vh); height: min(72vh, 88vw); max-height: 72vh;
  object-fit: cover; object-position: center bottom;
}
.pv-photo__cap { color: rgba(255, 255, 255, 0.8); font-size: var(--fs-0); text-align: center; }
.pv-photo__nav { width: 3rem; height: 3rem; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; transition: background-color 0.2s var(--ease); }
.pv-photo__nav:hover { background: var(--copper); }
.pv-photo__nav svg { width: 1.3rem; height: 1.3rem; }
@media (max-width: 39.99em) {
  .pv-photo[open] { grid-template-columns: 1fr; }
  .pv-photo__nav { position: absolute; bottom: var(--s-5); }
  .pv-photo__nav--prev { left: calc(50% - 3.5rem); }
  .pv-photo__nav--next { right: calc(50% - 3.5rem); }
  .pv-photo__img { max-height: calc(100dvh - 11rem); }
}
body.pv-open { overflow: hidden; }

/* Home: link from the photo wall to the full gallery */
.section__cta--center:has(.btn + .btn) { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
.page-gallery .site-header.is-solid { background: #fff; } /* translucent white turns grey over the dark banner */
@media (max-width: 39.99em) { .gallery-banner .kicker { display: block; text-align: center; } .gallery-banner .kicker::before, .gallery-banner .kicker::after { display: none; } }

/* --------------------------------------------------------------------------
   3D design: text + interactive SVG compare (3D render vs installed photo)
   -------------------------------------------------------------------------- */
.design3d__grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4.5rem); align-items: center; }
@media (min-width: 64em) { .design3d__grid { grid-template-columns: 0.9fr 1.1fr; } }
.design3d__text .lead { margin-top: var(--s-5); }
.design3d__points { display: grid; gap: var(--s-3); margin: var(--s-6) 0 var(--s-7, 3rem); font-weight: 600; }
.design3d__points li { display: flex; align-items: center; gap: var(--s-3); }
.design3d__points .seal { box-shadow: none; }

/* Rotating 3D model (js/cabinet3d.js draws the SVG); the real photo fades in on "See it installed" */
.model3d { margin: 0; }
.model3d__stage {
  position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; outline: none;
  background: radial-gradient(ellipse 80% 70% at 50% 42%, #ffffff 0%, #eef1f5 55%, #d6dde5 100%);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.model3d__stage:active { cursor: grabbing; }
.model3d__stage:focus-visible { outline: 3px solid var(--copper-bright); outline-offset: 4px; }
.model3d__svg { display: block; width: 100%; height: 100%; }
.model3d__layer path { stroke: #25303c; stroke-width: 1.8; stroke-linejoin: round; }
.model3d__layer .dec { fill: none; stroke-width: 1.1; opacity: 0.5; }
.model3d__layer .shadow { fill: rgba(11, 29, 51, 0.3); stroke: none; }
.model3d__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 0.8s var(--ease), transform 1.2s var(--ease); pointer-events: none; }
.model3d.is-photo .model3d__photo { opacity: 1; transform: none; }
.model3d.is-photo .model3d__stage { cursor: default; }
.model3d__tag {
  position: absolute; top: var(--s-4); left: var(--s-4); padding: 0.4rem 0.85rem; border-radius: 999px; pointer-events: none;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(11, 29, 51, 0.8);
  transition: background-color 0.4s var(--ease);
}
.model3d__tag-real, .model3d.is-photo .model3d__tag-3d { display: none; }
.model3d.is-photo .model3d__tag-real { display: inline; }
.model3d.is-photo .model3d__tag { background: var(--copper); }
.model3d__hint {
  position: absolute; left: 50%; bottom: var(--s-4); transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0.45rem 0.9rem; border-radius: 999px; background: rgba(11, 29, 51, 0.8); color: #fff; pointer-events: none; white-space: nowrap;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: opacity 0.4s var(--ease);
}
.model3d__hint svg { width: 1.1rem; height: 1.1rem; }
.model3d.is-touched .model3d__hint { opacity: 0; }
.model3d__controls { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-4); }
.model3d__btn {
  min-height: 2.75rem; padding: 0 1.25rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.4); background: transparent; color: #fff;
  font-weight: 700; font-size: var(--fs-0); letter-spacing: 0.06em; text-transform: uppercase;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.model3d__btn:hover { border-color: var(--copper-bright); }
.model3d__btn--accent { background: var(--copper-gloss); border-color: transparent; box-shadow: var(--copper-shadow); }
.model3d__btn--accent:hover { filter: brightness(1.08); }
.model3d__cap { margin-top: var(--s-3); font-size: var(--fs-0); color: rgba(255, 255, 255, 0.65); text-align: center; }
.model3d__hint { max-width: calc(100% - 7rem); white-space: normal; text-align: center; left: calc(50% - 2rem); }
.model3d__zoom { position: absolute; right: var(--s-4); bottom: var(--s-4); display: grid; gap: 1px; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 20px -10px rgba(11, 29, 51, 0.6); transition: opacity 0.3s var(--ease); }
.model3d__zoom button { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 0; background: rgba(11, 29, 51, 0.82); color: #fff; cursor: pointer; transition: background-color 0.2s var(--ease); }
.model3d__zoom button:hover { background: var(--copper); }
.model3d__zoom svg { width: 1.1rem; height: 1.1rem; }
.model3d__zoom-reset { display: none !important; }
.model3d.is-zoomed .model3d__zoom-reset { display: grid !important; }
.model3d.is-photo .model3d__zoom { opacity: 0; pointer-events: none; }

/* Google reviews (static copy of the Business Profile) */
.greviews__summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-4) var(--s-6);
  padding: var(--s-5) var(--s-6); margin-bottom: var(--s-6); background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
}
.greviews__g { width: 2.75rem; height: 2.75rem; flex: none; }
.greviews__score { display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 var(--s-3); }
.greviews__score strong { grid-row: span 2; font-family: var(--font-display); font-size: 2.75rem; line-height: 1; color: var(--navy); }
.greviews__count { font-size: var(--fs-0); color: var(--slate); font-weight: 600; }
.greviews__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
.greviews__actions .btn { min-height: 2.75rem; font-size: var(--fs-0); }
@media (min-width: 64em) { .greviews__actions { margin-left: auto; } .greviews__summary { justify-content: flex-start; } }
.stars svg { display: block; width: 7rem; height: 1.4rem; fill: #fbbc04; }
.stars--sm svg { width: 5.5rem; height: 1.1rem; }
.greviews__list { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr)); align-items: start; }
.greview { margin: 0; height: 100%; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 30px -24px rgba(11, 29, 51, 0.45); }
.greview__head { display: flex; align-items: center; gap: var(--s-3); }
.greview__head strong { display: block; color: var(--navy); line-height: 1.2; }
.greview__head small { color: var(--slate); font-size: 0.78rem; }
.greview__avatar { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--wood-soft); color: var(--wood); font-weight: 800; }
.greview__text { margin: 0; color: var(--ink-3); line-height: var(--lh-body); }
.greview__text p { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.greview.is-open .greview__text p { -webkit-line-clamp: unset; display: block; }
.greview__more { align-self: flex-start; margin-top: auto; padding: 0; border: 0; background: none; cursor: pointer; color: var(--copper); font-weight: 700; font-size: var(--fs-0); text-transform: uppercase; letter-spacing: 0.06em; min-height: 2.25rem; }
.greview__more[hidden] { display: none; }@media (max-width: 39.99em) { .greviews__actions { width: 100%; } .greviews__actions .btn { flex: 1 1 100%; } }

/* Review pass 2026-09-28 */
/* Why: the 5th item sits alone on the 2-column mobile grid; center it across both columns */
@media (max-width: 63.99em) { .why-grid > .why-item:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 50%; justify-self: center; } }
/* The orange bottom bar already clears the sticky call bar; no extra navy strip under it */
.site-footer { padding-bottom: 0; }
/* 3D hint: one short line, never under the zoom buttons */
.model3d__hint { white-space: nowrap; max-width: none; left: 50%; }
@media (max-width: 39.99em) { .model3d__hint { left: calc(50% - 1.5rem); font-size: 0.68rem; padding: 0.4rem 0.75rem; } }
.page-simple .footer__bottom { margin-top: 0; } .page-simple .footer__bottom-in { padding-bottom: var(--s-4); } /* no sticky call bar on these pages */
a[href^="tel:"] { white-space: nowrap; } /* never split a phone number */