/* ==========================================================================
   InstaHome Virtual Staging - design system
   Direction: "Black & Tan" editorial. Cool paper, near-black ink, brand gold
   #C5A059 used ONLY as rules, fills and text-on-dark (it is 2.26:1 on paper,
   so it can never be body text on a light background).

   ELEMENTOR NOTE
   Layout is 100% flexbox. There is no CSS Grid anywhere in this file.
   .row / .col map 1:1 to an Elementor Container (Flexbox) and its children.
   Widths use `flex: 1 1 <min>px` (Elementor: Width = Grow, Min width = <min>)
   so columns wrap on their own with no percentage math.
   Corner radius is 0 sitewide. That is the shape lock; do not add radii.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* surface */
  --paper:      #FFFFFF;
  --paper-alt:  #F4F3F1;
  --night:      #1C1E22;
  --night-2:    #26292F;

  /* ink */
  --ink:        #17181A;
  --ink-2:      #52555C;
  --ink-3:      #6B6F77;
  --on-night:   #FBFAF9;
  --on-night-2: #A8ACB4;

  /* brand */
  --gold:       #C5A059;  /* rules, fills, text on dark only */
  --gold-deep:  #8A6A28;  /* gold-coloured TEXT on light (4.62:1) */
  --gold-wash:  #F7F1E4;

  --line:       #E2E0DB;
  --line-night: #3A3E45;

  /* Solid-button fill and its text. Deliberately NOT --ink/--paper: those two
     swap in dark mode, which would paint white text onto a near-white button. */
  --btn-bg:       #17181A;
  --btn-fg:       #FFFFFF;
  --btn-bg-hover: #8A6A28;   /* white on this is 5.03:1 */

  /* type */
  --ih-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* rhythm - VISUAL_DENSITY 3, airy */
  --ih-gap:      1.5rem;
  --section:  clamp(4.5rem, 9vw, 8.5rem);
  --shell:    1280px;
  --pad:      1.5rem;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #15171A;
    --paper-alt: #1C1E22;
    --night:     #0F1113;
    --night-2:   #1C1E22;
    --ink:       #F2F1EE;
    --ink-2:     #B2B6BD;
    --ink-3:     #8A8E96;
    --gold-deep: #D9B978;   /* on dark, gold text needs to go lighter */
    --gold-wash: #23242A;
    --line:      #31343A;
    /* On a dark page a near-black button is invisible, so it becomes the gold. */
    --btn-bg:       #C5A059;
    --btn-fg:       #17181A;
    --btn-bg-hover: #D9B978;
  }
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--ui);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--ih-display);
  color: var(--ink);
  font-weight: 500;
  margin: 0 0 .6em;
  letter-spacing: -0.008em;
}
h1 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1.08; }
h2 { font-size: clamp(1.95rem, 3.8vw, 2.9rem); line-height: 1.12; }
h3 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.3; }
h4 { font-size: 1.0625rem; font-family: var(--ui); font-weight: 600; letter-spacing: 0; }
p  { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}

/* ---------- 3. Shell + flex layout primitives ---------------------------- */
.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); }
.shell--narrow { max-width: 820px; }

.section { padding: var(--section) 0; }
.section--alt  { background: var(--paper-alt); }
.section--dark { background: var(--night); color: var(--on-night-2); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--on-night); }
.section--tight { padding: clamp(3rem, 5vw, 4.5rem) 0; }

/* Elementor Container (flex row) */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ih-gap);
  align-items: flex-start;
}
.row--mid     { align-items: center; }
.row--stretch { align-items: stretch; }
.row--gapless { gap: 0; }
.row--wide    { gap: clamp(2rem, 4vw, 4rem); }

/* Elementor child: Width = Grow, Min width = N */
.col      { flex: 1 1 280px; min-width: 0; }
.col--sm  { flex: 1 1 200px; min-width: 0; }
.col--md  { flex: 1 1 340px; min-width: 0; }
.col--lg  { flex: 1 1 440px; min-width: 0; }
.col--hold{ flex: 0 0 auto; }

.stack { display: flex; flex-direction: column; gap: var(--ih-gap); }
.stack--sm { gap: .75rem; }
.stack--lg { gap: clamp(2rem, 4vw, 3.5rem); }

/* ---------- 4. Type helpers --------------------------------------------- */
.eyebrow {
  font-family: var(--ui);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 1.25rem;
}
.lede { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); color: var(--ink-2); }
.small { font-size: .875rem; }
.meta { font-size: .8125rem; color: var(--ink-3); letter-spacing: .01em; }
.num, .price-fig, .fact b { font-variant-numeric: lining-nums tabular-nums; }

/* Quiet second line under a display heading. */
.h-sub {
  display: block;
  font-family: var(--ui);
  font-size: .9375rem;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--ink-3);
  margin-top: .5rem;
}
.section--dark .h-sub { color: var(--on-night-2); }

.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}
/* hr carries a UA `margin: auto`, which silently centres these. Reset it here so
   the rule sits under the start of the heading, not in the middle of the column. */
.rule--gold {
  border: 0;
  border-top: 2px solid var(--gold);
  width: 48px;
  margin: 0 auto 1.5rem 0;
}
.center .rule--gold { margin-left: auto; }

.section--dark .eyebrow { color: var(--gold); }
.section--dark .lede, .section--dark p { color: var(--on-night-2); }
.section--dark .rule { border-top-color: var(--line-night); }

/* ---------- 5. Buttons --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--ui);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.9rem;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;          /* CTA labels never wrap */
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .12s var(--ease);
}
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--gold { background: var(--gold); color: #17181A; }
.btn:active { transform: scale(0.97); }

.section--dark .btn--ghost { color: var(--on-night); border-color: var(--line-night); }
.section--dark .btn--primary { background: var(--gold); color: #17181A; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* text link with the gold underline */
.link {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.section--dark .link { color: var(--on-night); }

/* ---------- 6. Header / nav (single line, <= 76px) ----------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--paper); } }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 72px;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: 0 0 auto; }
.brand img, .brand .brand-mark { width: 38px; height: 38px; flex: 0 0 38px; }
.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand-name b {
  font-family: var(--ui);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .13em;
  color: var(--ink);
}
.brand-name span {
  font-family: var(--ui);
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}

.nav-links { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-size: .875rem;
  text-decoration: none;
  color: var(--ink-2);
  padding: .4rem 0;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
  white-space: nowrap;
}
.nav-links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }
.nav-cta { flex: 0 0 auto; }
.nav-cta .btn { padding: .8rem 1.35rem; font-size: .8125rem; }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 1.5px;
  width: 22px;
  margin: 0 auto;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Overlay rather than in-flow: an in-flow panel grows the sticky header and
   pushes the whole page down by its own height when it opens. */
.mobile-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 18px 40px rgba(23, 24, 26, .10);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .18s var(--ease), transform .22s var(--ease),
              visibility 0s linear .22s;
}
.mobile-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .18s var(--ease), transform .22s var(--ease), visibility 0s;
}
/* The burger is hidden above 1000px, so the panel must never be reachable there
   (for instance after a resize with the menu left open). */
@media (min-width: 1001px) { .mobile-panel { display: none; } }
.mobile-panel ul { list-style: none; margin: 0; padding: .5rem 0 1.25rem; }
/* Scoped to the list: an unscoped `.mobile-panel a` sits later in this file than
   .btn--primary at equal specificity and silently repaints the CTA ink-on-ink. */
.mobile-panel ul a {
  display: block;
  padding: .9rem var(--pad);
  text-decoration: none;
  color: var(--ink);
  font-size: 1.0625rem;
  border-bottom: 1px solid var(--line);
}
.mobile-panel .btn { margin: 1rem var(--pad); width: calc(100% - var(--pad) * 2); }

@media (max-width: 1000px) {
  .nav-links, .nav-cta { display: none; }
  .burger { display: flex; }
}

/* ---------- 7. Hero ------------------------------------------------------ */
.hero { padding-top: clamp(2.5rem, 5vw, 5rem); padding-bottom: var(--section); }
.hero h1 { margin-bottom: 1.25rem; }
.hero .lede { margin-bottom: 2rem; max-width: 52ch; }
.hero-copy { flex: 1 1 460px; min-width: 0; }
.hero-media { flex: 1 1 500px; min-width: 0; }

/* ---------- 8. Before/after comparison ----------------------------------
   Elementor equivalent: the native "Image Comparison" widget.
   ------------------------------------------------------------------------ */
.compare {
  position: relative;
  overflow: hidden;
  background: var(--paper-alt);
  touch-action: pan-y;
  user-select: none;
  line-height: 0;
}
.compare img { width: 100%; display: block; }
/* The reveal is a clip, not a resize. Animating `width` and `left` ran layout
   on every pointermove; clip-path and transform stay on the compositor, and the
   overlay image no longer needs its width re-synced to the container in JS. */
.compare-after {
  position: absolute;
  inset: 0;
  clip-path: inset(0 50% 0 0);
  transition: clip-path 180ms var(--ease);
}
.compare-after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Full-width rail translated by a percentage of itself, so a 50% translate puts
   its left edge exactly at the midpoint of the frame. */
.compare-divider {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translate3d(50%, 0, 0);
  transition: transform 180ms var(--ease);
}
/* During a drag the pointer is the clock: no transition, and will-change only
   for the duration of the gesture rather than parked on the element at rest. */
.compare.is-dragging .compare-after,
.compare.is-dragging .compare-divider { transition: none; }
.compare.is-dragging .compare-divider { will-change: transform; }
.compare.is-dragging .compare-after { will-change: clip-path; }

.compare-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 2px;
  margin-left: -1px;
  background: #FFFFFF;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(23, 24, 26, .18);
}
.compare-grip {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  background: #FFFFFF;
  border: 1px solid rgba(23, 24, 26, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 2px 14px rgba(23, 24, 26, .18);
}
.compare-grip::before, .compare-grip::after {
  content: "";
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.compare-grip::before { border-right: 6px solid #17181A; }
.compare-grip::after  { border-left: 6px solid #17181A; }

.compare-tag {
  position: absolute;
  bottom: 14px;
  font-family: var(--ui);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: rgba(23, 24, 26, .78);
  padding: .35rem .7rem;
  pointer-events: none;
}
.compare-tag--l { left: 14px; }
.compare-tag--r { right: 14px; }

.compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.compare-range::-webkit-slider-thumb { -webkit-appearance: none; width: 46px; height: 100%; }
.compare-range::-moz-range-thumb { width: 46px; height: 100px; border: 0; opacity: 0; }

/* ---------- 9. Figure / caption ------------------------------------------ */
.figure { margin: 0; }
.figure figcaption {
  font-size: .8125rem;
  color: var(--ink-3);
  padding-top: .85rem;
  line-height: 1.5;
}

/* ---------- 10. Fact strip ----------------------------------------------- */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.fact {
  flex: 1 1 200px;
  min-width: 0;
  padding: 2rem 1.5rem;
  border-left: 1px solid var(--line);
}
.fact:first-child { border-left: 0; }
.fact b {
  display: block;
  font-family: var(--ih-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  line-height: 1;
  color: var(--ink);
  margin-bottom: .5rem;
}
.fact span { font-size: .8125rem; color: var(--ink-3); line-height: 1.45; display: block; }
@media (max-width: 720px) {
  .fact { flex: 1 1 50%; border-left: 0; border-top: 1px solid var(--line); padding: 1.5rem .25rem; }
  .fact:first-child, .fact:nth-child(2) { border-top: 0; }
}

/* ---------- 11. Service blocks ------------------------------------------- */
.service {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  height: 100%;
}
.service img { width: 100%; }
/* The featured card sits beside two stacked cards. Let its photo absorb the
   extra height instead of leaving a void above the button. */
.service--feature img { flex: 1 1 auto; min-height: 260px; object-fit: cover; }
.service--feature .service-body { flex: 0 0 auto; }
.service-body { padding: 1.75rem; display: flex; flex-direction: column; gap: .75rem; flex: 1 1 auto; }
.service-body h3 { margin: 0; }
.service-price {
  font-family: var(--ih-display);
  font-size: 1.875rem;
  color: var(--ink);
  line-height: 1;
}
.service-price small { font-family: var(--ui); font-size: .8125rem; color: var(--ink-3); letter-spacing: .02em; }
.service .btn { margin-top: auto; align-self: flex-start; }

/* Compact service row: thumbnail + copy, used beside the featured card.
   Elementor: Image Box widget, Image Position = Left. */
.mini {
  display: flex;
  gap: 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 1.1rem;
  flex: 1 1 auto;
  align-items: flex-start;
}
.mini-media { flex: 0 0 116px; }
.mini-media img { width: 116px; height: 88px; object-fit: cover; }
.mini-body { flex: 1 1 auto; min-width: 0; }
.mini-body h3 { font-family: var(--ui); font-size: 1rem; font-weight: 600; letter-spacing: 0; margin: 0 0 .2rem; }
.mini-price { font-family: var(--ih-display); font-size: 1.375rem; color: var(--ink); line-height: 1; margin: 0 0 .5rem; }
.mini-price small { font-family: var(--ui); font-size: .75rem; color: var(--ink-3); letter-spacing: .02em; }
.mini-body p { margin: 0 0 .5rem; }
@media (max-width: 480px) {
  .mini { flex-direction: column; }
  .mini-media, .mini-media img { width: 100%; flex: 1 1 auto; height: auto; }
}

/* ---------- 12. Step flow (no cards, no numbers) ------------------------- */
.steps { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 3vw, 2.5rem); }
.step { flex: 1 1 200px; min-width: 0; border-top: 2px solid var(--gold); padding-top: 1.1rem; }
.step h3 { font-family: var(--ui); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; margin-bottom: .4rem; }
.step p { font-size: .9375rem; margin: 0; }

/* ---------- 13. Pricing table (Elementor: Pricing Table widget) ---------- */
.price-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 2.25rem;
  height: 100%;
  gap: 1rem;
}
.price-card--feature { background: var(--night); border-color: var(--night); color: var(--on-night-2); }
.price-card--feature h3 { color: var(--on-night); }
.price-card--feature .price-fig { color: var(--gold); }
.price-card--feature .price-list li { color: var(--on-night-2); border-color: var(--line-night); }
.price-card h3 {
  margin: 0;
  font-family: var(--ui);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
}
/* Service names run to one or two lines. Reserve two so the prices in a row of
   cards sit on the same baseline. */
@media (min-width: 769px) { .price-card h3 { min-height: 2.5em; } }
.price-fig {
  font-family: var(--ih-display);
  font-size: clamp(3rem, 6vw, 4rem);
  line-height: .95;
  color: var(--ink);
}
.price-fig small { font-family: var(--ui); font-size: .8125rem; letter-spacing: .04em; color: var(--ink-3); display: block; margin-top: .5rem; }
.price-card--feature .price-fig small { color: var(--on-night-2); }
.price-list { list-style: none; margin: 0; padding: 0; }
.price-list li {
  font-size: .9375rem;
  padding: .7rem 0 .7rem 1.4rem;
  position: relative;
  border-bottom: 1px solid var(--line);
}
.price-list li:last-child { border-bottom: 0; }
.price-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.35rem;
  width: 7px; height: 7px;
  border-left: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg);
}
.price-card .btn { margin-top: auto; }
/* The featured card is dark, so an ink button on it is ink on ink. Same move as
   .section--dark .btn--primary: go gold, which is 7.23:1 against the card. */
.price-card--feature .btn--primary { background: var(--gold); color: #17181A; }

/* ---------- 14. Data table ----------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  min-width: 560px;
}
table.data caption {
  text-align: left;
  font-size: .8125rem;
  color: var(--ink-3);
  padding-bottom: .9rem;
}
table.data th, table.data td { text-align: left; padding: .95rem 1rem; }
table.data thead th {
  font-family: var(--ui);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  font-weight: 600;
}
table.data tbody tr { border-bottom: 1px solid var(--line); }
table.data tbody tr:last-child { border-bottom: 0; }
table.data td:first-child { color: var(--ink); font-weight: 500; }
table.data .is-us { background: var(--gold-wash); }
table.data .is-us td { color: var(--ink); font-weight: 500; }

/* ---------- 15. Accordion (Elementor: Accordion widget) ------------------ */
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 1.35rem 2.5rem 1.35rem 0;
  position: relative;
  font-family: var(--ui);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--ink);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after,
.accordion summary::before {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  background: var(--gold-deep);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.accordion summary::before { width: 13px; height: 1.5px; transform: translateY(-50%); }
.accordion summary::after  { width: 1.5px; height: 13px; right: 10px; transform: translateY(-50%); }
.accordion details[open] summary::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.accordion .answer { padding: 0 2.5rem 1.6rem 0; }
/* Height animation for <details>. Chromium-only today and purely additive:
   without support the panel simply snaps open as before. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .accordion details::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size .26s var(--ease), opacity .2s var(--ease),
                content-visibility .26s allow-discrete;
  }
  .accordion details[open]::details-content { block-size: auto; opacity: 1; }
}
.accordion .answer p { font-size: .9688rem; }

/* ---------- 16. Scroll-snap strip (style gallery) ------------------------ */
.snap {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
  scrollbar-width: thin;
}
.snap > * { scroll-snap-align: start; flex: 0 0 min(78vw, 380px); }
/* With four styles rather than the original eight, the strip fits on a desktop
   row. A horizontal scroller with no visible scrollbar just looks cut off. */
@media (min-width: 769px) {
  .snap { overflow: visible; flex-wrap: wrap; scroll-snap-type: none; padding-bottom: 0; }
  .snap > * { flex: 1 1 220px; }
}
.snap { scrollbar-color: var(--gold) transparent; }
.snap::-webkit-scrollbar { height: 3px; }
.snap::-webkit-scrollbar-track { background: transparent; }
.snap::-webkit-scrollbar-thumb { background: var(--gold); }
.section--dark .snap figcaption { color: var(--on-night-2); }
.snap figcaption { font-family: var(--ui); }

/* ---------- 16b. Coverage map -------------------------------------------
   Albers USA projection of the US Census state boundaries, generated from
   us-atlas (ISC). Inline SVG so it inherits the theme tokens in both modes.
   Elementor: an HTML widget containing the same markup.
   ------------------------------------------------------------------------ */
.usmap { display: block; width: 100%; height: auto; }
.usmap path { stroke: var(--paper); stroke-width: 1; stroke-linejoin: round; }
.usmap-base path { fill: #E7E4DE; }
.usmap-focus path { fill: var(--gold); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .usmap-base path { fill: #32353B; }
}
.usmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  padding-top: 1.25rem;
  font-size: .8125rem;
  color: var(--ink-3);
}
.usmap-legend span { display: flex; align-items: center; gap: .5rem; }
.usmap-legend i { width: 14px; height: 14px; display: block; }
.usmap-legend i.is-focus { background: var(--gold); }
.usmap-legend i.is-base { background: #E7E4DE; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .usmap-legend i.is-base { background: #32353B; }
}

/* ---------- 17. Post list ------------------------------------------------ */
.post { display: flex; flex-wrap: wrap; gap: var(--ih-gap); padding: 2rem 0; border-bottom: 1px solid var(--line); }
.post:last-of-type { border-bottom: 0; }
.post-media { flex: 0 1 300px; min-width: 0; }
.post-body  { flex: 1 1 380px; min-width: 0; }
.post-body h2 { font-family: var(--ih-display); font-size: 1.5rem; line-height: 1.3; margin-bottom: .5rem; }
.post-body h2 a { text-decoration: none; }

/* ---------- 17b. Team / person block -------------------------------------
   Elementor: Container (flex, row) | Single Image + Text Editor.
   ------------------------------------------------------------------------ */
.person-photo {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
}
.person-photo p { font-size: .8125rem; color: var(--ink-3); max-width: 26ch; }
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person-name { font-family: var(--ui); font-weight: 600; font-size: 1rem; color: var(--ink); margin-bottom: .15rem; }
.person-role { font-size: .8125rem; color: var(--ink-3); letter-spacing: .04em; }

/* ---------- 18. Form ----------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: .45rem; }
.field label { font-size: .8125rem; font-weight: 500; color: var(--ink); letter-spacing: .02em; }
.field input, .field select, .field textarea {
  font-family: var(--ui);
  font-size: 1rem;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid #B9B5AD;
  border-radius: 0;
  padding: .85rem 1rem;
  width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #6E727A; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--gold-deep);
  outline-offset: 0;
  border-color: var(--gold-deep);
}
.field .hint { font-size: .8125rem; color: var(--ink-3); }
.field .err { font-size: .8125rem; color: #9C2B1E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field input,
  :root:not([data-theme="light"]) .field select,
  :root:not([data-theme="light"]) .field textarea { background: #202328; border-color: #4A4E55; }
  :root:not([data-theme="light"]) .field input::placeholder { color: #9AA0A8; }
  :root:not([data-theme="light"]) .field .err { color: #F09C90; }
}

/* ---------- 19. Notice --------------------------------------------------- */
.notice {
  border-left: 2px solid var(--gold);
  background: var(--gold-wash);
  padding: 1.35rem 1.5rem;
}
.notice p { font-size: .9375rem; }
.notice p:first-child { color: var(--ink); font-weight: 500; }

/* ---------- 20. Footer --------------------------------------------------- */
.site-footer { background: var(--night); color: var(--on-night-2); padding: clamp(3.5rem, 6vw, 5rem) 0 2rem; }
.site-footer h2 {
  font-family: var(--ui);
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .6rem; }
.site-footer a:not(.btn) { color: var(--on-night-2); text-decoration: none; font-size: .9375rem; transition: color .2s var(--ease); }
.site-footer .brand-name b { color: var(--on-night); }
.site-footer .brand-name span { color: var(--on-night-2); }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line-night);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.75rem;
  font-size: .8125rem;
}

/* ---------- 21. Breadcrumb ----------------------------------------------- */
.crumbs { font-size: .8125rem; color: var(--ink-3); padding: 1.35rem 0 0; }
.crumbs a { text-decoration: none; color: var(--ink-3); }
.crumbs span { padding: 0 .45rem; }

/* ---------- 22. Article body --------------------------------------------- */
.prose h2 { margin-top: 2.5em; }
.prose h3 { margin-top: 2em; }
.prose > *:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1.2em; max-width: 68ch; }
.prose li { margin-bottom: .55rem; }
.prose figure { margin: 2.5rem 0; }


/* ---------- 22b. Hover states ---------------------------------------------
   Gated on a real pointer. A touch tap fires :hover and leaves the element
   stuck in its hovered look until the next tap somewhere else.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--btn-bg-hover); }
  .btn--ghost:hover   { background: var(--ink); color: var(--paper); }
  .btn--gold:hover    { background: #B08C45; }
  .section--dark .btn--ghost:hover   { background: var(--on-night); color: var(--night); }
  .section--dark .btn--primary:hover { background: #D9B978; }
  .link:hover { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }
  .section--dark .link:hover { color: var(--gold); }
  .nav-links a:hover { color: var(--ink); border-bottom-color: var(--gold); }
  .post-body h2 a:hover { color: var(--gold-deep); }
  .site-footer a:hover { color: var(--gold); }
  .crumbs a:hover { color: var(--gold-deep); }
}

/* ---------- 23. Motion (MOTION_INTENSITY 4: CSS transitions + reveal) ---- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
/* Short cascade so a row of cards arrives in sequence rather than as one block.
   Elementor equivalent: Motion Effects > Entrance Animation + Animation Delay. */
.row > .reveal:nth-child(2).is-in { transition-delay: 60ms; }
.row > .reveal:nth-child(3).is-in { transition-delay: 120ms; }
.row > .reveal:nth-child(4).is-in { transition-delay: 180ms; }
.js-off .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* Movement goes; colour and opacity feedback stays, because it carries meaning. */
  .reveal, .reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:active { transform: none; }
  .burger span { transition: opacity .15s linear; }
  .compare-after, .compare-divider { transition: none !important; }
  .mobile-panel { transition: opacity .15s linear, visibility 0s !important; transform: none !important; }
  .accordion details::details-content { transition: opacity .15s linear !important; }
}

/* ---------- 24. Utilities ------------------------------------------------ */
.sr-only {
  position: absolute; 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: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper); padding: .9rem 1.25rem; font-size: .875rem;
}
.skip-link:focus { left: 0; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* Touch targets. Footer links and the compact service CTAs render ~19-21px
   tall, which is well under the 44px WCAG 2.5.8 target. Padding is added on
   touch widths only so the desktop rhythm is untouched. */
@media (max-width: 768px) {
  .site-footer li { margin-bottom: 0; }
  .site-footer li a { display: block; padding: .7rem 0; min-height: 44px; }
  .footer-base a { display: inline-block; padding: .6rem 0; }
  .mini-body .link { display: inline-block; padding: .75rem 0; }
}

@media (max-width: 768px) {
  .row { flex-direction: column; }
  .row--keep { flex-direction: row; }
  .col, .col--sm, .col--md, .col--lg { flex: 1 1 auto; width: 100%; }
  .hero { padding-top: 2rem; }
  .price-card, .service-body { padding: 1.5rem; }
}