/* ==========================================================================
   Dany Painting & Remodeling LLC — Design System
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Typography
   4.  Layout primitives
   5.  Buttons & links
   6.  Motion / reveal system
   7.  Header & navigation
   8.  Hero
   9.  Service index
   10. Editorial rows
   11. Principles (Why choose us)
   12. Gallery & lightbox
   13. Estimate band
   14. Contact & forms
   15. Footer
   16. Mobile action bar
   17. Utilities
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* --- Color ------------------------------------------------------------ */
  --bone:        #F4F1EB;   /* page ground — warm architectural neutral      */
  --bone-deep:   #E2DACB;   /* alternating band — deep enough to read as one */
  --paper:       #FCFBF8;   /* raised surface                               */
  --ink:         #14130F;   /* primary type — warm near-black               */
  --ink-soft:    #33302A;   /* secondary type                               */
  --muted:       #6B655A;   /* tertiary type — 5.4:1 on bone                */
  --line:        #D8D2C6;   /* hairlines                                    */
  --line-strong: #BDB5A5;
  --char:        #17160F;   /* dark section ground                          */
  --char-line:   #34322A;
  --char-muted:  #A9A398;

  --clay:        #A63C15;   /* accent — 5.6:1 with white                    */
  --clay-deep:   #85300F;
  --clay-tint:   #F0E4DC;

  --focus:       #1B5FCC;

  /* --- Type ------------------------------------------------------------- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(2.9rem, 8.2vw, 6.75rem);
  --fs-h1:      clamp(2.3rem, 5.6vw, 4.5rem);
  --fs-h2:      clamp(1.9rem, 3.9vw, 3.15rem);
  --fs-h3:      clamp(1.3rem, 1.9vw, 1.7rem);
  --fs-h4:      clamp(1.08rem, 1.35vw, 1.22rem);
  --fs-lead:    clamp(1.08rem, 1.42vw, 1.32rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.75rem;
  --fs-index:   clamp(0.8rem, 1vw, 0.9rem);

  --lh-tight:   1.02;
  --lh-snug:    1.14;
  --lh-body:    1.62;

  --track-tight:  -0.032em;
  --track-normal: -0.011em;
  --track-wide:    0.16em;

  /* --- 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;     --s-10: 8rem;    --s-11: 10rem;

  --section-y:     clamp(3.5rem, 6.5vw, 6rem);
  --section-y-lg:  clamp(4.5rem, 8vw, 7.5rem);
  --gutter:        clamp(1.25rem, 5vw, 4rem);

  /* --- Structure -------------------------------------------------------- */
  --container:   1320px;
  --container-n: 1080px;   /* narrow */
  --measure:     64ch;
  --radius:      2px;
  --radius-lg:   3px;

  --header-h:    88px;
  --header-h-sm: 68px;

  /* --- Motion ----------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-xs:    160ms;
  --dur-sm:    280ms;
  --dur-md:    560ms;
  --dur-lg:    900ms;
  --dur-xl:    1400ms;

  /* --- Elevation (used sparingly) --------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(20, 19, 15, 0.06);
  --shadow-md: 0 12px 32px -12px rgba(20, 19, 15, 0.22);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; background-color: var(--bone-deep); }

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

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

::selection { background: var(--clay); color: #fff; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-sm) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  margin: 0;
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  font-weight: 600;
  letter-spacing: -0.04em;
}

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.24; letter-spacing: -0.02em; }
h4, .h4 { font-size: var(--fs-h4); line-height: 1.34; letter-spacing: -0.014em; }

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 var(--s-5);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--clay);
  flex: none;
}
.eyebrow--plain::before { display: none; }
.on-dark .eyebrow { color: #D9834F; }
.on-dark .eyebrow::before { background: #D9834F; }

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

/* Numbered section marker (architectural detail) */
.marker {
  font-family: var(--font-display);
  font-size: var(--fs-index);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-n); }

.section { padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }
.section--flush-top { padding-top: 0; }
.section--tint { background: var(--bone-deep); }
.section--paper { background: var(--paper); }

/* Two light sections stacked doubled their padding into a ~400px void, and
   the bone → bone-deep shift is too subtle on its own to read as a section
   change. Trim the leading edge and mark the seam with a hairline, which is
   already the architectural motif used elsewhere in the design. */
.section:not(.section--dark) + .section--tint,
.section:not(.section--dark) + .section--paper {
  border-top: 1px solid var(--line-strong);
}
/* Trim BOTH sides of the seam. Full padding on each section stacked into a
   ~400px void between two near-identical grounds; the deeper tint plus this
   hairline now carry the section change, so the air is no longer doing it. */
.section:has(+ .section--tint),
.section:has(+ .section--paper) {
  padding-bottom: calc(var(--section-y-lg) * 0.3);
}
.section + .section--tint,
.section + .section--paper {
  padding-top: calc(var(--section-y-lg) * 0.62);
}

.section--dark {
  background: var(--char);
  color: #EFEBE3;
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #FBF9F5; }
.section--dark .lead { color: #C6C0B5; }
.section--dark .muted { color: var(--char-muted); }
.section--dark hr { border-color: var(--char-line); }

/* Section head: title left, supporting copy right */
.section-head {
  display: grid;
  gap: var(--s-5) var(--s-8);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 900px) {
  .section-head {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
  }
  .section-head__aside { padding-bottom: 0.4rem; }
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin-block: 0;
}
.section--dark .rule { background: var(--char-line); }

/* Image frames — intentional, consistent cropping */
/* <picture> is a plain inline wrapper by default — make it fill its frame so
   the image inside can size to the container. */
picture { display: contents; }

.frame {
  position: relative;
  overflow: hidden;
  background: var(--bone-deep);
  border-radius: var(--radius);
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame--portrait  { aspect-ratio: 3 / 4; }
.frame--square    { aspect-ratio: 1 / 1; }
.frame--landscape { aspect-ratio: 4 / 3; }
.frame--wide      { aspect-ratio: 16 / 9; }
.frame--cinema    { aspect-ratio: 21 / 9; }
.frame--tall      { aspect-ratio: 2 / 3; }

/* ==========================================================================
   5. BUTTONS & LINKS
   ========================================================================== */

.btn {
  --btn-bg: var(--clay);
  --btn-fg: #fff;
  --btn-bd: var(--clay);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 54px;
  padding: 0.95rem 1.75rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-sm) var(--ease),
              border-color var(--dur-sm) var(--ease),
              color var(--dur-sm) var(--ease),
              transform var(--dur-sm) var(--ease);
}
.btn:hover { background: var(--clay-deep); border-color: var(--clay-deep); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
}
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.btn--light {
  --btn-bg: transparent;
  --btn-fg: #F6F3ED;
  --btn-bd: rgba(246, 243, 237, 0.38);
}
.btn--light:hover { background: #F6F3ED; border-color: #F6F3ED; color: var(--ink); }

.btn--solid-light {
  --btn-bg: #F6F3ED;
  --btn-fg: var(--ink);
  --btn-bd: #F6F3ED;
}
.btn--solid-light:hover { background: #fff; border-color: #fff; color: var(--ink); }

.btn--sm { min-height: 44px; padding: 0.6rem 1.15rem; font-size: 0.78rem; }
.btn--block { width: 100%; }

.btn__icon { width: 16px; height: 16px; flex: none; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

/* Underline link with animated rule */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 0.35rem;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform var(--dur-md) var(--ease);
}
.link:hover::after { transform: scaleX(0); transform-origin: left; }
.link .btn__icon { transition: transform var(--dur-sm) var(--ease); }
.link:hover .btn__icon { transform: translateX(4px); }
.section--dark .link { color: #F1EDE5; }

/* Plain inline text link */
.tlink {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease);
}
.tlink:hover { color: var(--clay); text-decoration-color: var(--clay); }

/* ==========================================================================
   6. MOTION / REVEAL SYSTEM
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-lg) var(--ease), transform var(--dur-lg) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Masked image reveal — the image scales down as its mask opens */
[data-reveal="mask"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-xl) var(--ease);
}
[data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); }
[data-reveal="mask"] img,
[data-reveal="mask"] .frame img {
  transform: scale(1.14);
  transition: transform 1.8s var(--ease);
}
[data-reveal="mask"].is-in img,
[data-reveal="mask"].is-in .frame img { transform: scale(1); }

/* Line-by-line headline reveal */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease);
  transition-delay: var(--line-delay, 0ms);
}
.is-in .reveal-line > span,
.reveal-lines.is-in .reveal-line > span { transform: none; }

/* Hairline that draws itself in */
[data-reveal="rule"] {
  opacity: 1;
  transform: none;
  transform-origin: left;
  scale: 0 1;
  transition: scale 1.1s var(--ease);
}
[data-reveal="rule"].is-in { scale: 1 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; scale: none !important; }
  [data-reveal="mask"] img, [data-reveal="mask"] .frame img { transform: none !important; }
  .reveal-line > span { transform: none !important; }
  .hero__media img { animation: none !important; }
}

/* ==========================================================================
   7. HEADER & NAVIGATION
   ========================================================================== */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--ink);
  /* Solid from the first pixel. It used to be transparent over the hero and
     to slide away on downward scroll, which meant the phone number and the
     estimate button vanished exactly while someone was reading. */
  background: var(--bone);
  border-bottom: 1px solid var(--line);
  transition: transform var(--dur-md) var(--ease),
              height var(--dur-md) var(--ease),
              background var(--dur-md) var(--ease),
              border-color var(--dur-md) var(--ease),
              color var(--dur-md) var(--ease);
}
.header__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

/* Over-hero state: light type on dark imagery */

.brand {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  flex: none;
}
.brand__name {
  display: flex;
  flex-direction: column;
  line-height: 1.08;
}
.brand__name strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.brand__name span {
  font-size: 0.6rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  opacity: 0.72;
}

.nav { display: none; }
@media (min-width: 1024px) {
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.4vw, 2.25rem);
  }
}
.nav__link {
  position: relative;
  color: inherit;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding-block: 0.4rem;
  opacity: 0.85;
  transition: opacity var(--dur-sm) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-md) var(--ease);
}
.nav__link:hover { opacity: 1; }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { opacity: 1; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--clay); }

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.header__phone {
  display: none;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.header__phone:hover { color: var(--clay); }
@media (min-width: 768px) { .header__phone { display: inline-flex; } }
/* The estimate CTA appears from tablet up. Below that the sticky action bar
   carries it, so the header stays uncluttered on phones. */
.header__cta { display: none; }
@media (min-width: 768px) { .header__cta { display: inline-flex; } }

/* Menu toggle */
.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  padding: 0 11px;
  background: none;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  opacity: 0.9;
}
@media (min-width: 1024px) { .menu-toggle { display: none; } }
.menu-toggle span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  transition: transform var(--dur-sm) var(--ease), opacity var(--dur-xs) var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--char);
  color: #F1EDE5;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h-sm) + 2rem) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom));
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-md) var(--ease-io), visibility 0s linear var(--dur-md);
  visibility: hidden;
}
.drawer.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path var(--dur-md) var(--ease-io), visibility 0s;
}
@media (min-width: 1024px) { .drawer { display: none; } }

.drawer__nav { display: flex; flex-direction: column; margin-bottom: var(--s-7); }
.drawer__link {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--char-line);
  color: inherit;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 7vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-md) var(--ease), transform var(--dur-md) var(--ease), color var(--dur-sm) var(--ease);
}
.drawer.is-open .drawer__link { opacity: 1; transform: none; }
.drawer__link:nth-child(1) { transition-delay: 90ms; }
.drawer__link:nth-child(2) { transition-delay: 140ms; }
.drawer__link:nth-child(3) { transition-delay: 190ms; }
.drawer__link:nth-child(4) { transition-delay: 240ms; }
.drawer__link:nth-child(5) { transition-delay: 290ms; }
.drawer__link:hover, .drawer__link[aria-current="page"] { color: #E89A66; }
.drawer__link .marker { font-size: 0.72rem; color: var(--char-muted); }

.drawer__foot { margin-top: auto; display: grid; gap: var(--s-3); }
.drawer__meta {
  display: grid;
  gap: 0.15rem;
  padding-top: var(--s-5);
  color: var(--char-muted);
  font-size: var(--fs-sm);
}
.drawer__meta a { color: #F1EDE5; text-decoration: none; }
.drawer__meta a:hover { color: #E89A66; }

/* ==========================================================================
   8. HERO
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  min-height: 100vh;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  background: var(--char);
  color: #F6F3ED;
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Framed on the roofline and soffit lights. A full-bleed hero can only show
     part of a portrait photo, so this picks which part. Lower the percentage
     to show more roof, raise it to show more of the garage below. */
  object-position: center 22%;
  animation: heroIn 2.6s var(--ease) both;
}
@keyframes heroIn {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(12,11,8,0.92) 0%, rgba(12,11,8,0.66) 34%, rgba(12,11,8,0.30) 62%, rgba(12,11,8,0.45) 100%);
}

.hero__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: #E4A176;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.hero__eyebrow::before {
  content: "";
  width: 34px; height: 1px;
  background: #E4A176;
  flex: none;
}
.hero__title {
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: -0.042em;
  font-weight: 600;
  max-width: 15ch;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  color: #FDFCFA;
}
.hero__title em {
  font-style: normal;
  color: #E4A176;
}
.hero__grid { display: grid; gap: var(--s-6); }
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--s-8);
  }
}
.hero__support { max-width: 44ch; }
.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.56;
  color: #D7D1C6;
  margin-bottom: var(--s-5);
}
.hero__ctas { gap: var(--s-3); }

.hero__foot {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(246,243,237,0.2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  font-size: var(--fs-sm);
  color: #C8C2B6;
}
.hero__foot-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.hero__foot-item svg { width: 15px; height: 15px; flex: none; color: #E4A176; }

/* Compact page hero for interior pages */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 8vw, 6.5rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: var(--char);
  color: #F6F3ED;
  overflow: hidden;
  isolation: isolate;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(12,11,8,0.93), rgba(12,11,8,0.62) 55%, rgba(12,11,8,0.55));
}
.page-hero__title {
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.038em;
  max-width: 18ch;
  color: #FDFCFA;
  margin-bottom: var(--s-5);
}
.page-hero__lead { color: #D3CDC2; max-width: 52ch; font-size: var(--fs-lead); line-height: 1.55; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--s-5);
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-display);
  color: rgba(246,243,237,0.6);
}
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: #E4A176; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.5; }
.breadcrumb [aria-current="page"] { color: #F6F3ED; }

/* ==========================================================================
   9. SERVICE INDEX (homepage) — interactive editorial list
   ========================================================================== */

.svc { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) {
  .svc {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: clamp(3rem, 5vw, 5rem);
    align-items: start;
  }
}

.svc__list { border-top: 1px solid var(--line); }

.svc__item {
  position: relative;
  display: block;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.svc__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  padding: clamp(1.15rem, 2.2vw, 1.65rem) 0;
  transition: padding-left var(--dur-md) var(--ease), color var(--dur-sm) var(--ease);
}
.svc__num {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-sm) var(--ease);
}
.svc__name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.3vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.026em;
  line-height: 1.12;
}
.svc__arrow {
  width: 18px; height: 18px;
  color: var(--muted);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease);
}
.svc__item:hover .svc__arrow,
.svc__item:focus-visible .svc__arrow,
.svc__item.is-active .svc__arrow { opacity: 1; transform: none; color: var(--clay); }
.svc__item:hover .svc__num,
.svc__item.is-active .svc__num { color: var(--clay); }

@media (min-width: 1024px) {
  .svc__item:hover .svc__row,
  .svc__item.is-active .svc__row { padding-left: 1.15rem; }
  /* clay bar slides in on the left edge */
  .svc__item::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--clay);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--dur-md) var(--ease);
  }
  .svc__item:hover::before,
  .svc__item.is-active::before { transform: scaleY(1); transform-origin: top; }
}

/* Mobile: each row carries its own image */
.svc__thumb {
  display: block;
  margin-bottom: 1rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bone-deep);
}
.svc__thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .svc__thumb { display: none; } }

/* Desktop sticky visual panel */
.svc__panel { display: none; }
@media (min-width: 1024px) {
  .svc__panel {
    display: block;
    position: sticky;
    top: calc(var(--header-h-sm) + 2.5rem);
  }
  .svc__stage {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--bone-deep);
  }
  .svc__stage img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity var(--dur-md) var(--ease), transform 1.3s var(--ease);
  }
  .svc__stage img.is-shown { opacity: 1; transform: scale(1); }
  .svc__caption {
    margin-top: var(--s-4);
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    font-size: var(--fs-sm);
    color: var(--muted);
    min-height: 3.2em;
  }
  .svc__caption p { margin: 0; max-width: 42ch; }
}

/* ==========================================================================
   10. EDITORIAL ROWS (services page, about)
   ========================================================================== */

.row-edit {
  display: grid;
  gap: var(--s-5);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) {
  .row-edit {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
  }
  .row-edit--flip .row-edit__media { order: -1; }
}
.row-edit__body { max-width: 52ch; }
.row-edit__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.row-edit__head .marker { flex: none; }
.row-edit__list {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.row-edit__list li {
  position: relative;
  padding-left: 1.35rem;
}
.row-edit__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 7px; height: 1px;
  background: var(--clay);
}

/* Two-up feature block */
.split {
  display: grid;
  gap: var(--s-6);
}
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
  .split--wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
}

/* Offset image pair — intentional asymmetry */
.stack-pair { display: grid; gap: var(--s-4); }
@media (min-width: 640px) {
  .stack-pair {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--s-4);
  }
  .stack-pair__a { grid-column: 1 / 9; }
  .stack-pair__b { grid-column: 7 / 13; margin-top: clamp(2rem, 6vw, 5rem); }
}

/* ==========================================================================
   11. PRINCIPLES — "Why choose us"
   ========================================================================== */

.principles { display: grid; gap: 0; border-top: 1px solid var(--char-line); }
@media (min-width: 700px)  { .principles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .principles { grid-template-columns: repeat(3, 1fr); } }

.principle {
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  border-bottom: 1px solid var(--char-line);
}
@media (min-width: 700px) {
  .principle { padding-inline: clamp(1.25rem, 2.5vw, 2.25rem); }
  .principle:nth-child(odd) { padding-left: 0; }
  .principle:nth-child(even) { padding-right: 0; border-left: 1px solid var(--char-line); }
}
@media (min-width: 1100px) {
  .principle { padding-inline: clamp(1.5rem, 2.5vw, 2.5rem); border-left: 1px solid var(--char-line); }
  .principle:nth-child(3n+1) { padding-left: 0; border-left: 0; }
  .principle:nth-child(3n) { padding-right: 0; }
}
.principle__num {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: #E4A176;
  margin-bottom: var(--s-4);
  font-variant-numeric: tabular-nums;
}
.principle h3 { margin-bottom: 0.6rem; }
.principle p { color: var(--char-muted); font-size: var(--fs-sm); line-height: 1.62; margin: 0; }

/* ==========================================================================
   12. GALLERY & LIGHTBOX
   ========================================================================== */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Dense packing keeps the mixed-span editorial rhythm from leaving holes
     when a row can't fit the next item. */
  grid-auto-flow: dense;
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
}
@media (min-width: 760px)  { .gallery { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1100px) { .gallery { grid-template-columns: repeat(12, 1fr); } }

.gitem {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: var(--bone-deep);
  overflow: hidden;
  border-radius: var(--radius);
  cursor: zoom-in;
  aspect-ratio: 4 / 5;
  grid-column: span 1;
}
@media (min-width: 760px) {
  .gitem { grid-column: span 2; }
  .gitem--w { grid-column: span 4; aspect-ratio: 4 / 3; }
  .gitem--t { aspect-ratio: 3 / 4; }
}
@media (min-width: 1100px) {
  .gitem { grid-column: span 3; }
  .gitem--w { grid-column: span 6; aspect-ratio: 16 / 10; }
  .gitem--h { grid-column: span 4; aspect-ratio: 3 / 4; }
  .gitem--f { grid-column: span 5; aspect-ratio: 4 / 5; }
}

.gitem img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), filter var(--dur-md) var(--ease);
}
.gitem::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,11,8,0.72), rgba(12,11,8,0) 58%);
  opacity: 0;
  transition: opacity var(--dur-md) var(--ease);
}
.gitem__label {
  position: absolute;
  left: clamp(0.85rem, 1.6vw, 1.35rem);
  bottom: clamp(0.85rem, 1.6vw, 1.35rem);
  z-index: 2;
  color: #FBF9F5;
  text-align: left;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-md) var(--ease), transform var(--dur-md) var(--ease);
}
.gitem__label strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.gitem__label span {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #D5CFC4;
  margin-top: 0.2rem;
}
.gitem:hover img, .gitem:focus-visible img { transform: scale(1.055); }
.gitem:hover::after, .gitem:focus-visible::after { opacity: 1; }
.gitem:hover .gitem__label, .gitem:focus-visible .gitem__label { opacity: 1; transform: none; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s-4);
  padding: clamp(0.9rem, 2.5vw, 2rem);
  background: rgba(10, 9, 7, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-md) var(--ease), visibility 0s linear var(--dur-md);
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-md) var(--ease), visibility 0s; }
.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  color: #CFC9BD;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lightbox__stage {
  display: grid;
  place-items: center;
  min-height: 0;
}
.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: var(--radius);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity var(--dur-md) var(--ease), transform var(--dur-md) var(--ease);
}
.lightbox.is-open .lightbox__stage img { opacity: 1; transform: none; }
.lightbox__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  color: #CFC9BD;
}
.lightbox__caption { font-size: var(--fs-sm); margin: 0; }
.lightbox__caption strong { display: block; color: #FBF9F5; font-family: var(--font-display); letter-spacing: -0.015em; }
.lb-btn {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  background: transparent;
  border: 1px solid rgba(246,243,237,0.32);
  border-radius: var(--radius);
  color: #F1EDE5;
  transition: background var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease);
}
.lb-btn:hover { background: #F1EDE5; color: var(--ink); border-color: #F1EDE5; }
.lb-btn svg { width: 18px; height: 18px; }
.lightbox__nav { display: flex; gap: var(--s-2); }

/* ==========================================================================
   13. ESTIMATE BAND
   ========================================================================== */

.estimate {
  position: relative;
  padding-block: var(--section-y-lg);
  background: var(--char);
  color: #F6F3ED;
  overflow: hidden;
  isolation: isolate;
}
.estimate__media { position: absolute; inset: 0; z-index: -2; }
.estimate__media img { width: 100%; height: 100%; object-fit: cover; }
.estimate__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(12,11,8,0.95) 0%, rgba(12,11,8,0.88) 45%, rgba(12,11,8,0.62) 100%);
}
.estimate__title {
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.038em;
  max-width: 16ch;
  color: #FDFCFA;
  margin-bottom: var(--s-5);
}
.estimate__title em { font-style: normal; color: #E4A176; }
.estimate__body { max-width: 46ch; color: #CFC9BD; font-size: var(--fs-lead); line-height: 1.55; margin-bottom: var(--s-6); }
.estimate__note {
  margin-top: var(--s-5);
  font-size: var(--fs-sm);
  color: #A9A398;
}

/* ==========================================================================
   14. CONTACT & FORMS
   ========================================================================== */

.contact-grid { display: grid; gap: var(--s-8); }

/* Standalone estimate form — no rail beside it, so give it a comfortable
   reading measure and centre it rather than letting fields stretch. */
.form-single {
  max-width: 760px;
  margin-inline: auto;
}
@media (min-width: 960px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
}

.contact-rail { display: grid; gap: var(--s-5); align-content: start; }
.contact-card {
  display: block;
  padding: 0 0 var(--s-5);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: color var(--dur-sm) var(--ease);
}
a.contact-card:hover { color: var(--clay); }
a.contact-card:hover .contact-card__label { color: var(--clay); }
.contact-card__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.45rem;
  transition: color var(--dur-sm) var(--ease);
}
.contact-card__label svg { width: 14px; height: 14px; color: var(--clay); }
.contact-card__value {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.2;
  word-break: break-word;
}
.contact-card__hint { font-size: var(--fs-sm); color: var(--muted); margin-top: 0.4rem; }
.contact-rail__note {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0;
}

/* Form */
.form { display: grid; gap: var(--s-5); }
.form__grid { display: grid; gap: var(--s-5); }
@media (min-width: 620px) { .form__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { display: grid; gap: 0.45rem; }
.field__label {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.field__req { color: var(--clay); }
.field__control {
  width: 100%;
  min-height: 54px;
  padding: 0.9rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  transition: border-color var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease);
  appearance: none;
}
textarea.field__control { min-height: 148px; resize: vertical; }
select.field__control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B655A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  padding-right: 3rem;
}
.field__control::placeholder { color: #9C958A; }
.field__control:hover { border-color: var(--muted); }
.field__control:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px rgba(166, 60, 21, 0.14);
  background: #fff;
}
.field__control:focus-visible { outline: none; }

.field__error {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  color: #A32718;
}
.field.has-error .field__control { border-color: #A32718; background: #FDF6F5; }
.field.has-error .field__control:focus { box-shadow: 0 0 0 3px rgba(163, 39, 24, 0.16); }
.field.has-error .field__error { display: flex; }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  justify-content: space-between;
}
.form__note { font-size: var(--fs-xs); color: var(--muted); max-width: 40ch; margin: 0; }

.btn.is-loading { pointer-events: none; opacity: 0.8; }
.btn.is-loading .btn__text { opacity: 0.65; }
.spinner {
  display: none;
  width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn.is-loading .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.form__status {
  display: none;
  gap: 0.7rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.form__status.is-shown { display: flex; }
.form__status svg { width: 18px; height: 18px; flex: none; margin-top: 0.15rem; }
.form__status--ok  { background: #ECF3EC; border: 1px solid #BFD6BF; color: #24491F; }
.form__status--err { background: #FBEFED; border: 1px solid #E4BEB8; color: #7E2114; }

/* --- Service picker -------------------------------------------------------
   Native radios wearing the project photography. A plain list of nine text
   pills asked people to read nine labels; the photo says "this kind of work"
   in one glance, and it reuses the same shot the service index shows above.
   ------------------------------------------------------------------------- */
.picker-set {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.picker-set legend {
  padding: 0;
  margin-bottom: 0.75rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--ink);
}

.picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 560px) { .picker { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.picker__item { display: block; cursor: pointer; }
.picker__item input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.picker__body { display: block; }

.picker__shot {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bone-deep);
  outline: 1px solid var(--line);
  outline-offset: -1px;
  transition: outline-color var(--dur-sm) var(--ease),
              outline-width var(--dur-sm) var(--ease);
}
.picker__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Unselected photos sit back a little so the chosen one comes forward. */
  filter: saturate(0.55) brightness(0.94);
  transition: filter var(--dur-md) var(--ease), transform 1s var(--ease);
}
.picker__item:hover .picker__shot img { filter: saturate(0.85) brightness(1); transform: scale(1.04); }
.picker__item:hover .picker__shot { outline-color: var(--muted); }

/* The "not sure yet" tile has no photo, so it gets a drafting hatch instead
   of a stock icon — same architectural language as the rest of the page. */
.picker__shot--hatch {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--bone-deep) 0 6px,
    var(--bone) 6px 12px
  );
}

.picker__tick {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  width: 26px; height: 26px;
  padding: 5px;
  border-radius: 50%;
  background: var(--clay);
  color: #fff;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease);
}

.picker__name {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
  transition: color var(--dur-sm) var(--ease);
}

/* Selected */
.picker__item input:checked + .picker__body .picker__shot {
  outline: 2px solid var(--clay);
  outline-offset: -2px;
}
.picker__item input:checked + .picker__body .picker__shot img {
  filter: none;
}
.picker__item input:checked + .picker__body .picker__tick {
  opacity: 1;
  transform: none;
}
.picker__item input:checked + .picker__body .picker__name { color: var(--clay); }

/* Keyboard focus has to be visible without a mouse hover. */
.picker__item input:focus-visible + .picker__body .picker__shot {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.field.has-error .picker-set legend { color: #A32718; }
.field.has-error .picker__shot { outline-color: #C98C82; }

@media (prefers-reduced-motion: reduce) {
  .picker__shot img { transition: none; }
  .picker__item:hover .picker__shot img { transform: none; }
}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.footer {
  background: var(--char);
  color: #CFC9BD;
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: calc(clamp(2rem, 4vw, 3rem) + env(safe-area-inset-bottom));
  font-size: var(--fs-sm);
}
.footer a { color: #CFC9BD; text-decoration: none; transition: color var(--dur-sm) var(--ease); }
.footer a:hover { color: #E4A176; }

.footer__top {
  display: grid;
  gap: var(--s-7);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--char-line);
}
@media (min-width: 800px) {
  .footer__top { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
}
@media (min-width: 1100px) {
  .footer__top { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
}

.footer__brand { color: #FBF9F5; }
.footer__blurb { color: var(--char-muted); max-width: 38ch; margin: var(--s-4) 0 var(--s-5); }
.footer__contact { display: grid; gap: 0.35rem; }
.footer__contact a {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #FBF9F5;
}
.footer__contact a:hover { color: #E4A176; }

.footer__colhead {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: #8E887D;
  margin: 0 0 var(--s-4);
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-5);
  color: #8E887D;
  font-size: var(--fs-xs);
}
.footer__bottom p { margin: 0; max-width: none; }

/* ==========================================================================
   16. MOBILE ACTION BAR
   ========================================================================== */

.actionbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(105%);
  transition: transform var(--dur-md) var(--ease);
}
.actionbar.is-shown { transform: none; }
@media (min-width: 1024px) { .actionbar { display: none; } }

.actionbar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 60px;
  padding: 0.75rem 0.85rem;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.actionbar__btn svg { width: 16px; height: 16px; flex: none; }
.actionbar__btn--primary { background: var(--clay); color: #fff; }
.actionbar__btn--primary:active { background: var(--clay-deep); }

/* Keep content clear of the bar on mobile */
@media (max-width: 1023px) {
  body { padding-bottom: 0; }
  .footer { padding-bottom: calc(clamp(2rem, 4vw, 3rem) + 60px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   17. UTILITIES
   ========================================================================== */

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

/* ==========================================================================
   18. RESPONSIVE ADJUSTMENTS
   Deliberate per-breakpoint corrections, not just fluid scaling.
   ========================================================================== */

/* --- Phones ------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --header-h: 72px;
    --header-h-sm: 64px;
  }

  /* Two CTAs side by side get cramped under ~420px. Stack them so both stay
     full-size tap targets. */
  .hero__ctas .btn { flex: 1 1 100%; }

  /* Trim the hero's supporting rail so the headline and CTAs both clear the
     fold on a small phone. */
  .hero__foot {
    margin-top: var(--s-6);
    gap: var(--s-2) var(--s-5);
    font-size: var(--fs-xs);
  }
  .hero__title { max-width: 100%; }

  /* Tighten the service rows — the name needs the horizontal room. */
  .svc__row { gap: var(--s-3); padding-block: 1rem; }
  .svc__arrow { opacity: 1; transform: none; color: var(--muted); }

  /* Section heads read better with a touch less air on small screens. */
  .section-head { margin-bottom: 2.25rem; }

  /* Lightbox chrome shrinks so the photo gets the space. */
  .lightbox__foot { flex-direction: column; align-items: flex-start; }
  .lightbox__nav { align-self: flex-end; }
}

@media (max-width: 420px) {
  .btn { padding-inline: 1.25rem; font-size: 0.82rem; }
  .hero__foot-item:nth-child(3) { display: none; }
  .contact-card__value { font-size: 1.15rem; }
}

/* --- Tablet ------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Brand + phone + CTA + toggle all need to fit one line here. */
  .brand__name strong { font-size: 0.86rem; }
  .header__phone { font-size: 0.875rem; }
  .header__inner { gap: var(--s-4); }

  /* The stacked image pair is too tall at this width — even it out. */
  .stack-pair__b { margin-top: clamp(1.5rem, 4vw, 3rem); }
}

/* --- Landscape phones --------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 2.5rem); padding-bottom: 3rem; }
  .hero__foot { display: none; }
}

/* --- Very wide displays -------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --container: 1440px; }
}

/* ==========================================================================
   19. PRINT
   ========================================================================== */
@media print {
  .header, .drawer, .actionbar, .lightbox, .hero__media, .hero__scrim,
  .page-hero__media, .page-hero__scrim, .estimate__media, .estimate__scrim,
  .svc__panel, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .section--dark, .estimate, .hero, .page-hero, .footer { background: #fff !important; color: #000 !important; }
  .section--dark h1, .section--dark h2, .section--dark h3,
  .hero__title, .estimate__title, .page-hero__title { color: #000 !important; }
  a[href^="http"]::after, a[href^="tel"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  .section { padding-block: 1.5rem; }
}

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.text-balance { text-wrap: balance; }
.no-wrap { white-space: nowrap; }