/* ═══════════════════════════════════════════
   Deoro Property Maintenance — site styles
   Palette sampled from the logo, burgundy
   lifted from #300000 to #5A1519 (spec §03)
   ═══════════════════════════════════════════ */

:root {
  /* brand */
  --burgundy:      #5A1519;
  --burgundy-deep: #3E0C0F;
  --gold:          #D8A824;
  --gold-soft:     #E4CC78;
  --gold-pale:     #F0E4C0;
  --gold-ink:      #8A6410;   /* AA-safe gold for text on white */

  /* grounds — white dominant */
  --white:         #FFFFFF;
  --warm:          #F7F2EA;   /* testimonial band only */

  /* ink — warm-biased, never neutral grey */
  --ink:           #2E2422;
  --ink-2:         #5E4F49;
  --ink-3:         #8B7B73;
  --rule:          #E7DFD4;
  --rule-2:        #D3C7B7;

  --measure: 68ch;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --r: 12px;
  --r-pill: 999px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-float: cubic-bezier(.16, 1, .3, 1);   /* long, soft landing */
  --shadow-1: 0 1px 2px rgba(90,21,25,.05), 0 6px 18px -10px rgba(90,21,25,.16);
  --shadow-2: 0 2px 6px rgba(90,21,25,.07), 0 18px 44px -20px rgba(90,21,25,.26);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 17px;
  font-weight: 380;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

.wrap { width: min(72rem, 100% - var(--pad) * 2); margin-inline: auto; }

.sr, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; top: .6rem; left: .6rem; z-index: 200;
  background: var(--burgundy); color: #fff; padding: .7rem 1.1rem;
  border-radius: var(--r-pill); font-weight: 600;
}

:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.hero :focus-visible, .foot :focus-visible { outline-color: var(--gold); }

/* ─────────── type ─────────── */

h1, h2, h3, h4, .btn, .eyebrow, legend, .svc-n, cite, th {
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
}

h1 {
  font-size: clamp(2.6rem, 7.4vw, 5rem);
  font-weight: 700;
  letter-spacing: -.038em;
  line-height: .99;
  margin: 0;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 680;
  letter-spacing: -.032em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}
h3 { font-size: 1.14rem; font-weight: 650; letter-spacing: -.012em; margin: 0; line-height: 1.3; }
h4 {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 .8rem;
}

/* the one serif italic accent — never twice on a screen */
h1 em, h2 em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.012em;
}
h2 em { color: var(--gold-ink); }
h1 em { color: var(--gold-soft); }

p { margin: 0; max-width: var(--measure); }

.eyebrow {
  font-size: .72rem; font-weight: 650; letter-spacing: .17em; text-transform: uppercase;
  margin: 0; color: var(--ink-3);
}
.eyebrow.gold { color: var(--gold-ink); }

.lede { font-size: 1.08rem; color: var(--ink-2); max-width: 46ch; }

/* ─────────── buttons ─────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .72rem 1.35rem; min-height: 44px;
  border-radius: var(--r-pill); border: 1.5px solid transparent;
  font-size: .93rem; font-weight: 600; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              border-color .18s var(--ease), color .18s var(--ease);
}
.btn-lg { padding: .95rem 1.9rem; font-size: 1rem; min-height: 52px; }
.btn:active { transform: translateY(1px); }

.btn-gold { background: var(--gold); color: var(--burgundy-deep); }
.btn-gold:hover { background: var(--gold-soft); }

.btn-ghost { border-color: rgba(255,255,255,.42); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ─────────── nav ─────────── */

.nav-shell { position: fixed; inset: 0 0 auto; z-index: 100; padding: .9rem var(--pad) 0; }

.nav {
  width: min(72rem, 100%);
  margin-inline: auto;
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem .6rem .55rem 1.15rem;
  border-radius: var(--r-pill);
  /* white glass — the original logo needs a light ground to read on */
  background: rgba(255, 255, 255, .66);
  backdrop-filter: blur(20px) saturate(1.7);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: 0 1px 2px rgba(46,36,34,.05), 0 12px 34px -16px rgba(46,36,34,.34);
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease);
}
.nav-shell.is-stuck .nav {
  background: rgba(255, 255, 255, .93);
  border-color: var(--rule);
  box-shadow: 0 1px 2px rgba(46,36,34,.06), 0 14px 36px -18px rgba(46,36,34,.4);
}

.nav-brand { flex: none; display: block; }
.nav-brand img { height: 34px; width: auto; }

.nav-links { display: flex; gap: .35rem; list-style: none; margin: 0 auto 0 .8rem; padding: 0; }
.nav-links a {
  display: block; padding: .5rem .85rem; border-radius: var(--r-pill);
  color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 500;
  font-family: "Instrument Sans", sans-serif;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.nav-links a:hover { background: rgba(46,36,34,.07); color: var(--ink); }

.nav-right { display: flex; align-items: center; gap: .6rem; flex: none; }

.lang { display: flex; gap: 2px; padding: 2px; border-radius: var(--r-pill); background: rgba(46,36,34,.09); }
.lang button {
  /* --ink-2 measured only 3.59:1 against the glass — below AA for text
     this small, so the inactive state uses full ink and the active state
     is distinguished by the gold pill rather than by colour weight */
  border: 0; background: none; cursor: pointer; color: var(--ink);
  font-family: "Instrument Sans", sans-serif; font-size: .74rem; font-weight: 600;
  padding: .36rem .6rem; border-radius: var(--r-pill); min-height: 32px;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.lang button:hover { color: var(--ink); }
.lang button.is-on { background: var(--gold); color: var(--burgundy-deep); }

.nav-burger { display: none; }

.nav-drawer { list-style: none; }

/* ─────────── hero ─────────── */

.hero {
  position: relative;
  min-height: min(94vh, 54rem);
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  padding: 9rem var(--pad) 2rem;
  background: var(--burgundy-deep);
  overflow: hidden;
  isolation: isolate;
}

.hero-media { position: absolute; inset: -8% 0 -8%; z-index: -2; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%;
  will-change: transform;
}
#grime { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(62,12,15,.94) 0%, rgba(62,12,15,.72) 38%, rgba(62,12,15,.30) 70%, rgba(62,12,15,.45) 100%),
    linear-gradient(to right, rgba(62,12,15,.75), rgba(62,12,15,0) 62%);
}

.hero-body {
  width: min(72rem, 100%); margin-inline: auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem;
  padding-bottom: 2.5rem;
}
.hero-body .eyebrow { color: var(--gold); }
.hero h1 { color: #fff; max-width: 15ch; }
.hero-sub { color: #E8D9D2; font-size: 1.12rem; max-width: 48ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .5rem; }

.hero-hint {
  display: flex; align-items: center; gap: .5rem; margin-top: .4rem;
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(240,228,192,.62); font-family: "Instrument Sans", sans-serif; font-weight: 500;
}
.hint-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%,100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* floating proof panels */
.proof {
  width: min(72rem, 100%); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .7rem;
}
.proof-card {
  position: relative;
  display: flex; flex-direction: column; gap: .1rem;
  padding: 1rem 1.15rem;
  border-radius: var(--r);
  background: rgba(62,12,15,.52);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(240,228,192,.26);
  opacity: 0; transform: translateY(18px);
}
.proof-card.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.proof-card b {
  font-family: "Instrument Sans", sans-serif; font-size: 2.1rem; font-weight: 700;
  letter-spacing: -.04em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
}
.proof-card .star, .proof-card .plus { color: var(--gold); font-size: .62em; margin-left: .12em; }
.proof-card small { font-size: .82rem; color: #D6C2BB; }

.ph-tag {
  font-family: "Instrument Sans", sans-serif;
  font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .16rem .45rem; border-radius: var(--r-pill);
  background: rgba(216,168,36,.2); color: var(--gold);
  border: 1px dashed rgba(216,168,36,.55);
  align-self: flex-start; margin-top: .4rem;
}
.is-placeholder b { opacity: .55; }

/* ─────────── sections ─────────── */

.section { padding: clamp(4rem, 9vw, 7.5rem) 0; background: var(--white); }
.section-tight { padding-top: 0; }
.section-warm { background: var(--warm); }

.sec-head { display: flex; flex-direction: column; gap: .7rem; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.sec-head .eyebrow { margin-bottom: .1rem; }

.reveal { opacity: 0; transform: translateY(16px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }

/* ─────────── services ─────────── */

/* Separate cards, not a hairline grid with a shared background.
   The old construction clipped the hover lift against the parent's
   overflow:hidden, and empty trailing cells showed the parent's rule
   colour as a grey slab whenever the count didn't fill the row. */
.svc-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  align-items: stretch;
}
.svc {
  position: relative;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;            /* keeps the gold rule inside the radius */
  padding: 1.6rem 1.45rem 1.35rem;
  display: flex; flex-direction: column; gap: .55rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}
.svc::after {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: var(--gold); transition: width .38s var(--ease);
}
.svc:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--rule-2);
}
.svc:hover::after { width: 100%; }

/* Seven services divide evenly into neither 2 nor 3 columns, so the last
   card would always dangle alone. Six do divide by both — so card 07 runs
   full width as a deliberate closing strip instead of a ragged orphan. */
@media (min-width: 44rem) {
  .svc:last-child {
    grid-column: 1 / -1;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: .4rem 1.6rem;
    padding-block: 1.35rem;
  }
  .svc:last-child .svc-n { flex: none; }
  .svc:last-child h3 { flex: none; }
  .svc:last-child p { flex: 1 1 18rem; margin: 0; }
  /* sits at the far edge whether or not it wraps to its own line */
  .svc:last-child .svc-link { margin: 0 0 0 auto; padding: 0; flex: none; }
}
.svc-n {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  color: var(--gold-ink); font-variant-numeric: tabular-nums;
}
.svc p { font-size: .95rem; color: var(--ink-2); }
.svc-link {
  margin-top: auto; padding-top: .5rem;
  font-family: "Instrument Sans", sans-serif; font-size: .85rem; font-weight: 600;
  color: var(--gold-ink); text-decoration: none;
}
.svc-link::after { content: " →"; transition: margin-left .2s var(--ease); display: inline-block; }
.svc:hover .svc-link::after { margin-left: .25rem; }

/* ─────────── before / after: scroll-scrubbed ─────────── */

.ba-scroll { background: var(--white); padding-top: clamp(4rem, 9vw, 7.5rem); }

/* DEFAULT = a plain static grid of the pairs. The scrubbed version is
   opt-in via .is-live, added by JS only when it will actually drive it.
   Built this way round because the animated state hides every item, and
   a 340vh track of hidden items is 3 blank screens if the script fails. */
.ba-track { position: relative; }
.ba-stage {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  width: min(72rem, 100% - var(--pad) * 2);
  margin-inline: auto;
  padding-top: 2rem;
}
.ba-item { margin: 0; }

.ba-item img, .ba-item .ph-box {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-2);
}
.ba-sparkle {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 5;
  display: none;                 /* only shown once JS drives the stage */
}
.ba-track.is-live .ba-sparkle { display: block; }

.ba-item figcaption {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  margin-top: .9rem;
}
.ba-tag {
  font-family: "Instrument Sans", sans-serif;
  font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  padding: .35rem .8rem; border-radius: var(--r-pill);
  background: var(--burgundy); color: var(--gold);
  flex: none;
}
.ba-tag.is-after { background: var(--gold); color: var(--burgundy-deep); }
.ba-cap { font-size: .86rem; color: var(--ink-3); }

/* ── scrubbed mode ── */
/* 8 beats. Each photo sits still for about one screen of scrolling,
   so the section is deliberately long — change this one number to pace it. */
.ba-track.is-live { height: 1030vh; }
.ba-track.is-live .ba-stage {
  position: sticky; top: 0;
  height: 100vh;
  display: grid; place-items: center;
  grid-template-columns: none;
  overflow: hidden;
  padding-top: 0;
  width: 100%;
  background: var(--white);
}
.ba-track.is-live .ba-item {
  position: absolute;
  width: min(56rem, 84vw);
  opacity: 0;
  will-change: transform, opacity;
  transform-origin: 50% 50%;
}

@media (max-width: 46rem) {
  .ba-track.is-live { height: 890vh; }
  .ba-track.is-live .ba-item img,
  .ba-track.is-live .ba-item .ph-box { aspect-ratio: 4 / 5; }
}

/* ─────────── reviews ─────────── */

.rating { display: inline-flex; align-items: baseline; gap: .35rem; margin-right: .5rem; }
.rating b {
  font-family: "Instrument Sans", sans-serif; font-size: 1.5rem; font-weight: 700;
  letter-spacing: -.03em; color: var(--ink);
}
.stars { color: var(--gold); letter-spacing: .1em; font-size: .95rem; }

/* quote lengths vary from ~30 to ~90 words, so they flow in columns
   rather than a fixed grid — no ragged half-empty cards */
.quotes {
  list-style: none; margin: 0; padding: 0;
  columns: 3 19rem;
  column-gap: 1rem;
}
.quote {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: block;
  margin: 0 0 1rem;
  background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 1.5rem 1.4rem 1.3rem;
  box-shadow: var(--shadow-1);
}
.quote blockquote {
  margin: 0 0 .9rem; font-size: .98rem; line-height: 1.58; color: var(--ink);
}
.quote blockquote::before { content: "\201C"; color: var(--gold); font-size: 1.4em; line-height: 0; vertical-align: -.18em; margin-right: .05em; }
.quote cite {
  display: block;
  font-style: normal; font-size: .84rem; font-weight: 650; color: var(--ink);
}
.quote cite span { font-weight: 400; color: var(--ink-3); }
.quote .ph-tag { background: rgba(138,100,16,.09); color: var(--gold-ink); border-color: rgba(138,100,16,.4); }

.rev-link { margin-top: 1.6rem; }
.rev-link a { color: var(--gold-ink); font-weight: 600; font-family: "Instrument Sans", sans-serif; font-size: .92rem; }

/* ─────────── about ─────────── */

.about-grid {
  display: grid; gap: clamp(1.8rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: start;
}
.about-grid > div { display: flex; flex-direction: column; gap: 1.1rem; }
.about-grid h2 { margin-bottom: .3rem; }
.about-fig { margin: 0; }
.about-fig img { border-radius: var(--r); aspect-ratio: 4/5; object-fit: cover; border: 1px solid var(--rule); }

.pull {
  margin: .8rem 0 0; padding: 1.2rem 0 .2rem 1.4rem;
  border-left: 3px solid var(--gold);
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic; font-size: 1.32rem; line-height: 1.4; color: var(--ink);
}
.pull cite {
  display: block; margin-top: .7rem;
  font-family: "Instrument Sans", sans-serif; font-style: normal;
  font-size: .78rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 52rem) { .about-grid { grid-template-columns: 1fr; } }

/* ─────────── quote form ─────────── */

.quote-form {
  display: flex; flex-direction: column; gap: 1.6rem;
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: clamp(1.4rem, 3.5vw, 2.4rem);
  box-shadow: var(--shadow-1); background: var(--white);
}
.fs { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; min-width: 0; }
.fs legend {
  padding: 0; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-ink);
}
.fs-row { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips label {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .55rem 1.05rem; border-radius: var(--r-pill);
  border: 1.5px solid var(--rule-2); background: var(--white);
  font-size: .9rem; cursor: pointer; user-select: none;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.chips label:hover { border-color: var(--gold-ink); }
.chips input { position: absolute; opacity: 0; width: 0; height: 0; }
.chips input:focus-visible + span { outline: 2px solid var(--gold-ink); outline-offset: 4px; border-radius: 3px; }
.chips label:has(input:checked) {
  background: var(--burgundy); border-color: var(--burgundy); color: #fff;
}

.fields { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.field { display: flex; flex-direction: column; gap: .35rem; margin: 0; max-width: none; }
.field-wide { grid-column: 1 / -1; }
.field label {
  font-family: "Instrument Sans", sans-serif; font-size: .84rem; font-weight: 600;
}
.field .opt { font-weight: 400; color: var(--ink-3); font-size: .78rem; }
.field input, .field textarea {
  font: inherit; font-size: .96rem; color: var(--ink);
  padding: .7rem .85rem; min-height: 46px;
  border: 1.5px solid var(--rule-2); border-radius: 8px; background: var(--white);
  transition: border-color .18s var(--ease);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 5.5rem; }
.field input:focus, .field textarea:focus { border-color: var(--gold-ink); outline-offset: 1px; }
.field input[aria-invalid="true"] { border-color: #A33220; }
.field .hint { font-size: .8rem; color: var(--ink-3); }

.form-err {
  margin: 0; padding: .75rem 1rem; border-radius: 8px;
  background: #FBEDE9; border: 1px solid #E7C3B8; color: #8C2F1D;
  font-size: .9rem; font-weight: 500;
}

.submit-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  padding-top: .3rem;
}
.fallback {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .88rem; color: var(--ink-2);
}
.fallback a, .copy {
  color: var(--gold-ink); font-weight: 600; text-decoration: none;
  font-family: "Instrument Sans", sans-serif; font-size: .88rem;
}
.copy {
  border: 1px dashed var(--rule-2); background: none; cursor: pointer;
  padding: .32rem .7rem; border-radius: var(--r-pill); min-height: 34px;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.copy:hover { border-color: var(--gold-ink); background: #FDF9F0; }
.copy.is-done { border-style: solid; border-color: #2F5D3A; color: #2F5D3A; }
.ph-inline { margin: 0 0 0 .3rem; align-self: center; }
.mailto-note { font-size: .82rem; color: var(--ink-3); }

/* ─────────── footer ─────────── */

.foot { background: var(--burgundy); color: #EFDDD7; padding: clamp(3rem, 6vw, 5rem) 0 1.5rem; }
.foot h4 { color: var(--gold); }
.foot a { color: #F5E7E2; text-decoration-color: rgba(245,231,226,.4); text-underline-offset: 3px; }
.foot a:hover { color: var(--gold-soft); }
.foot-grid {
  display: grid; gap: 2.2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  padding-bottom: 2.5rem;
}
.foot-brand img { height: 54px; width: auto; margin-bottom: .9rem; }
.foot-brand p {
  font-family: "Instrument Serif", Georgia, serif; font-style: italic;
  font-size: 1.25rem; color: var(--gold-soft);
}
.hours { border-collapse: collapse; font-size: .9rem; }
.hours th {
  text-align: left; font-weight: 500; font-size: .9rem;
  padding: .18rem 1.2rem .18rem 0; color: #EFDDD7;
  font-family: "Public Sans", sans-serif;
}
.hours td { padding: .18rem 0; color: #C9B0A9; font-variant-numeric: tabular-nums; }
.foot-area { font-size: .9rem; color: #C9B0A9; line-height: 1.75; }
.foot-base {
  border-top: 1px solid rgba(240,228,192,.16); padding-top: 1.4rem;
  font-size: .82rem; color: #B99C95;
}

/* ─────────── mobile ─────────── */

@media (max-width: 60rem) {
  .nav-links { display: none; }
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: .2rem; width: 44px; height: 44px; flex: none;
    background: none; border: 0; cursor: pointer; padding: 0 .5rem;
  }
  /* with .nav-links gone, nav-right is what pushes to the right edge */
  .nav-right { margin-left: auto; }
  .nav-burger span:not(.sr) { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-right .btn { display: none; }

  .nav-drawer {
    margin: .5rem auto 0; padding: .6rem; width: min(72rem, 100%);
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border: 1px solid var(--rule); border-radius: var(--r);
    box-shadow: 0 12px 34px -16px rgba(46,36,34,.4);
    display: flex; flex-direction: column; gap: 2px;
  }
  .nav-drawer[hidden] { display: none; }
  .nav-drawer a {
    display: block; padding: .8rem 1rem; border-radius: 8px;
    color: var(--ink); text-decoration: none; font-weight: 500;
    font-family: "Instrument Sans", sans-serif;
  }
  .nav-drawer a:hover { background: rgba(46,36,34,.06); }
}

@media (max-width: 46rem) {
  body { font-size: 16px; }
  .hero { min-height: auto; padding-top: 7.5rem; }
  /* spec §05 — panels stack BELOW the image on mobile, never overlaid */
  .proof { grid-template-columns: 1fr; }
  .proof-card { flex-direction: row; align-items: baseline; gap: .6rem; }
  .proof-card b { font-size: 1.5rem; }
  .proof-card small { font-size: .8rem; }
  .ph-tag { margin-top: 0; }
  .submit-row { flex-direction: column; align-items: stretch; }
  .submit-row .btn { width: 100%; }
}

/* ─────────── reduced motion ─────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, .proof-card { opacity: 1 !important; transform: none !important; }
  .ba-before, .ba-after { transform: none; }
  .ba .ba-after { opacity: 1; }
  .ba .ba-before { opacity: 0; }
  .ba-label { opacity: 1; }
  .hero-hint { display: none; }
  #grime { display: none; }
}

/* ─────────── typewriter caret ─────────── */

.caret {
  display: inline-block;
  color: var(--gold);
  font-weight: 300;
  transform: translateY(-.04em);
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { display: none; } }

/* ═══════════════════════════════════════════
   Inner pages — Services / Contact
   ═══════════════════════════════════════════ */

.page-head {
  background: var(--burgundy);
  color: #fff;
  padding: clamp(8rem, 14vw, 11rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.page-head .eyebrow { color: var(--gold); margin-bottom: .9rem; }
.page-head h1 { font-size: clamp(2.2rem, 5.6vw, 3.9rem); max-width: 18ch; }
.page-head h1 em { color: var(--gold-soft); }
.page-sub { color: #E8D9D2; font-size: 1.1rem; margin-top: 1.1rem; max-width: 48ch; }

/* sticky in-page jump bar */
.jump {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.jump-inner {
  display: flex; gap: .3rem; overflow-x: auto;
  padding: .6rem 0; scrollbar-width: thin;
}
.jump a {
  flex: none; padding: .5rem .9rem; border-radius: var(--r-pill);
  font-family: "Instrument Sans", sans-serif; font-size: .82rem; font-weight: 600;
  color: var(--ink-2); text-decoration: none; white-space: nowrap;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.jump a:hover { background: var(--warm); color: var(--gold-ink); }
.jump a.is-here { background: var(--burgundy); color: #fff; }

/* the seven, as sticky-header rows */
.svc-list { display: flex; flex-direction: column; }
.svc-row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 5rem;
}
.svc-row:first-child { border-top: 0; padding-top: 0; }

.svc-sticky {
  position: sticky; top: 5rem; align-self: start;
  display: flex; flex-direction: column; gap: .5rem;
}
.svc-sticky h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  letter-spacing: -.026em; line-height: 1.15;
}
.svc-body { display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; }
.svc-body p { font-size: 1.03rem; }

.svc-fig { margin: 0; width: 100%; }
.svc-fig img { border-radius: var(--r); border: 1px solid var(--rule); width: 100%; }
.svc-fig figcaption { margin-top: .7rem; font-size: .86rem; color: var(--ink-3); }

.svc-cta {
  font-family: "Instrument Sans", sans-serif; font-size: .9rem; font-weight: 600;
  color: var(--gold-ink); text-decoration: none;
  padding: .55rem 0; border-bottom: 2px solid rgba(138,100,16,.28);
  transition: border-color .2s var(--ease);
}
.svc-cta::after { content: " →"; }
.svc-cta:hover { border-bottom-color: var(--gold-ink); }

/* closing CTA band */
.cta-band {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.8rem;
}
.cta-band > div { display: flex; flex-direction: column; gap: .7rem; }

@media (max-width: 52rem) {
  .svc-row { grid-template-columns: 1fr; gap: 1.1rem; }
  .svc-sticky { position: static; }
}

/* contact page split */
.contact-grid {
  display: grid; gap: clamp(1.8rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
}
.contact-aside { display: flex; flex-direction: column; gap: 1.8rem; }
.info-card {
  background: var(--warm); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 1.4rem 1.5rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.info-card h3 { font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.info-card .hours th { color: var(--ink); font-family: "Public Sans", sans-serif; font-weight: 500; text-transform: none; letter-spacing: 0; border: 0; padding: .2rem 1.2rem .2rem 0; font-size: .93rem; }
.info-card .hours td { color: var(--ink-2); border: 0; padding: .2rem 0; font-variant-numeric: tabular-nums; font-size: .93rem; }
.info-card p { font-size: .95rem; color: var(--ink-2); }
.info-card a { color: var(--gold-ink); font-weight: 600; }

@media (max-width: 60rem) { .contact-grid { grid-template-columns: 1fr; } }

/* jump bar scrolls without showing a track */
.jump-inner { scrollbar-width: none; -ms-overflow-style: none; }
.jump-inner::-webkit-scrollbar { display: none; }
.jump { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.2rem, #000 calc(100% - 1.2rem), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 1.2rem, #000 calc(100% - 1.2rem), transparent 100%); }
@media (min-width: 68rem) { .jump { -webkit-mask-image: none; mask-image: none; } }

.rev-orig { margin-top: 1.4rem; font-size: .84rem; color: var(--ink-3); font-style: italic; }
.rev-link { margin-top: .5rem; }

/* ─────────── photo gallery ─────────── */

.gallery {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.gal { margin: 0; }
.gal figure { margin: 0; }
.gal img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r); border: 1px solid var(--rule);
  background: var(--warm);
}
.gal figcaption {
  margin-top: .65rem; font-size: .85rem; color: var(--ink-3);
}

/* Float and fade, swept across the grid.
   A one-shot compositor transition rather than a per-frame scroll
   handler — the browser runs it on the GPU, so it stays smooth where
   recomputing transforms on every scroll event stutters. */
.gal[data-anim] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity .95s var(--ease-float) var(--gal-delay, 0ms),
              transform .95s var(--ease-float) var(--gal-delay, 0ms);
  will-change: transform, opacity;
}
.gal[data-anim].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .gal[data-anim] { opacity: 1 !important; transform: none !important; }
}


/* ─────────── gallery placeholders ─────────── */

.ph-box {
  aspect-ratio: 4 / 3;
  border-radius: var(--r);
  border: 1.5px dashed var(--rule-2);
  background:
    repeating-linear-gradient(135deg,
      transparent 0 11px,
      rgba(138,100,16,.045) 11px 22px),
    var(--warm);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .55rem;
  color: var(--gold-ink);
}
.ph-box svg {
  width: 30px; height: 30px;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .75;
}
.ph-box span {
  font-family: "Instrument Sans", sans-serif;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  opacity: .85;
}
.gal-ph figcaption { color: var(--ink-3); font-style: italic; }

/* ─────────── "where should we open it?" ─────────── */

.send-modal { position: fixed; inset: 0; z-index: 300; }
.send-modal[hidden] { display: none; }

.send-backdrop {
  position: absolute; inset: 0;
  background: rgba(46, 36, 34, .55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.send-panel {
  position: relative;
  width: min(26rem, calc(100% - 2rem));
  margin: clamp(3rem, 18vh, 9rem) auto 0;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: 0 24px 60px -20px rgba(46,36,34,.5);
  padding: 1.7rem 1.6rem 1.4rem;
  display: flex; flex-direction: column; gap: .8rem;
}
.send-panel h3 { font-size: 1.24rem; letter-spacing: -.02em; }
.send-sub { font-size: .93rem; color: var(--ink-2); }

.send-opts { display: flex; flex-direction: column; gap: .5rem; margin-top: .3rem; }
.send-opt {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 50px; padding: .8rem 1.15rem;
  border-radius: var(--r-pill);
  background: var(--burgundy); color: #fff;
  font-family: "Instrument Sans", sans-serif; font-weight: 600; font-size: .96rem;
  text-decoration: none;
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.send-opt::after { content: "\2197"; opacity: .7; font-size: 1.05em; }
.send-opt:hover { background: var(--burgundy-deep); transform: translateY(-2px); }

.send-opt-alt { background: var(--white); color: var(--ink); border: 1.5px solid var(--rule-2); }
.send-opt-alt::after { content: ""; }
.send-opt-alt:hover { background: var(--warm); border-color: var(--gold-ink); }

.send-copy {
  margin-top: .2rem; min-height: 44px;
  border: 1px dashed var(--rule-2); background: none; cursor: pointer;
  border-radius: var(--r-pill); padding: .6rem 1rem;
  font-family: "Instrument Sans", sans-serif; font-size: .88rem; font-weight: 600;
  color: var(--gold-ink);
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.send-copy:hover { border-color: var(--gold-ink); background: #FDF9F0; }
.send-copy.is-done { border-style: solid; border-color: #2F5D3A; color: #2F5D3A; }

.send-hint { font-size: .8rem; color: var(--ink-3); }

.send-close {
  position: absolute; top: .6rem; right: .6rem;
  width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: none; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--ink-3);
}
.send-close:hover { background: var(--warm); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .send-opt:hover { transform: none; }
}