/* ==========================================================================
   ADVANCED EQUITY MANAGEMENT INC. — Kitchen & Flooring Installation
   --------------------------------------------------------------------------
   Design system + full site styles.

   Contents
     01  Design tokens
     02  Reset & base
     03  Typography
     04  Layout primitives
     05  Buttons & badges
     06  Forms
     07  Header, navigation & phone button
     08  Mobile menu & sticky call bar
     09  Opening animation & page transition
     10  Hero
     11  Material swatches (wood / stone / tile drawn in CSS)
     12  Sections: services, process, gallery, reviews, FAQ
     13  Auth pages
     14  Dashboard
     15  Footer
     16  Toasts & utilities
     17  Motion, print & accessibility
   ========================================================================== */


/* ==========================================================================
   01  DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- Surfaces: warm paper, not clinical white --------------------------- */
  --paper:        #FAF7F2;
  --paper-2:      #F4EEE5;
  --paper-3:      #EDE3D5;
  --surface:      #FFFFFF;
  --surface-sunk: #F7F2EA;

  /* --- Ink ---------------------------------------------------------------- */
  --ink:          #17130F;
  --ink-2:        #2E2721;
  --muted:        #776C61;
  --muted-2:      #9C9084;
  --on-dark:      #FBF7F1;
  --on-dark-mute: #B9AC9C;

  /* --- Lines -------------------------------------------------------------- */
  --line:         #E8E0D4;
  --line-2:       #D9CDBB;
  --line-3:       #C6B7A1;

  /* --- Materials: the brand palette is literally wood and stone ----------- */
  --oak:          #B98A4B;
  --oak-soft:     #E9D6B7;
  --oak-tint:     #F6EEE0;
  --walnut:       #6B4526;
  --clay:         #A9613C;
  --sage:         #5F6B51;
  --accent:       #8A5A2B;
  --accent-ink:   #6E4620;

  /* --- Status ------------------------------------------------------------- */
  --ok:           #3F6B4A;
  --ok-bg:        #E9F2EA;
  --warn:         #8A6318;
  --warn-bg:      #FBF1DC;
  --danger:       #9B3A2F;
  --danger-bg:    #FBEBE8;
  --info:         #2F5C86;
  --info-bg:      #E8F0F7;

  --focus:        #1F6FEB;

  /* --- Type --------------------------------------------------------------- */
  --font-display: "Fraunces", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  --fs-display: clamp(2.75rem, 1.35rem + 5.6vw, 5.25rem);
  --fs-h1:      clamp(2.25rem, 1.25rem + 3.9vw, 3.75rem);
  --fs-h2:      clamp(1.85rem, 1.15rem + 2.6vw, 2.85rem);
  --fs-h3:      clamp(1.3rem,  1.05rem + 1.05vw, 1.7rem);
  --fs-h4:      clamp(1.08rem, 1rem + .38vw, 1.25rem);
  --fs-lede:    clamp(1.05rem, .98rem + .5vw, 1.28rem);
  --fs-body:    1rem;
  --fs-sm:      .9375rem;
  --fs-xs:      .8125rem;
  --fs-2xs:     .6875rem;

  --lh-tight:   1.08;
  --lh-snug:    1.24;
  --lh-body:    1.65;

  /* --- Space -------------------------------------------------------------- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.75rem; --sp-8: 3.5rem;
  --sp-9: 5rem;    --sp-10: 7rem;

  --section-y:  clamp(3.75rem, 2rem + 7vw, 7.5rem);
  --wrap:       1240px;
  --wrap-narrow: 820px;
  --gutter:     clamp(1.1rem, .55rem + 2.2vw, 2.5rem);

  /* --- Shape -------------------------------------------------------------- */
  --r-xs: 6px;  --r-sm: 9px;  --r-md: 14px;
  --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* --- Depth: warm shadows, never grey ------------------------------------ */
  --sh-xs: 0 1px 2px rgba(56, 39, 22, .06);
  --sh-sm: 0 2px 6px rgba(56, 39, 22, .07), 0 1px 2px rgba(56, 39, 22, .05);
  --sh-md: 0 10px 26px -10px rgba(56, 39, 22, .18), 0 2px 8px rgba(56, 39, 22, .06);
  --sh-lg: 0 26px 60px -22px rgba(46, 31, 16, .30), 0 6px 18px rgba(56, 39, 22, .07);
  --sh-xl: 0 44px 96px -34px rgba(46, 31, 16, .38), 0 10px 28px rgba(56, 39, 22, .08);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .7);

  /* --- Motion ------------------------------------------------------------- */
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-in:   cubic-bezier(.55, 0, 1, .45);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast:    .16s;
  --t-base:    .28s;
  --t-slow:    .55s;

  --header-h: 74px;
  --topbar-h: 38px;
  --z-header: 60;
  --z-sheet:  80;
  --z-veil:   90;
  --z-intro:  100;
  --z-toast:  110;
}


/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  -moz-tab-size: 2; tab-size: 2;
}

body {
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* The warm paper gets the faintest possible grain so it never looks flat. */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(185, 138, 75, .05), transparent 42%),
    radial-gradient(circle at 84% 78%, rgba(107, 69, 38, .04), transparent 46%);
}

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

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

ul, ol { list-style: none; padding: 0; }

table { border-collapse: collapse; width: 100%; }

hr { border: 0; height: 1px; background: var(--line); }

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

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

.skip-link {
  position: fixed; top: 10px; left: 10px;
  z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--ink); color: var(--on-dark);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--t-base) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.site-main { position: relative; z-index: 1; }

/* Shown only when JavaScript is unavailable. The forms need it; the phone
   number does not, so we point people at the phone number. */
.noscript-bar {
  position: relative; z-index: 70;
  padding: .9rem clamp(1rem, 4vw, 2rem);
  background: var(--warn-bg);
  color: var(--warn);
  border-bottom: 1px solid rgba(138, 99, 24, .25);
  font-size: var(--fs-sm);
  line-height: 1.55;
  text-align: center;
}
.noscript-bar a { color: var(--accent-ink); font-weight: 700; text-decoration: underline; }


/* ==========================================================================
   03  TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -.015em;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -.028em; }
h2 { font-size: var(--fs-h2); letter-spacing: -.022em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 600; }

p { text-wrap: pretty; }

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

.lede {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: ""; width: 22px; height: 1.5px; flex: none;
  background: currentColor; opacity: .55;
}
.eyebrow--plain::before { display: none; }
.eyebrow--center { justify-content: center; }

/* An oak-coloured underline that sits behind a word. */
.mark-oak {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.mark-oak::after {
  content: "";
  position: absolute; left: -.06em; right: -.06em; bottom: .1em;
  height: .28em;
  background: linear-gradient(90deg,
      rgba(228,203,161,0) 0%, #E4CBA1 5%, #EDD8B6 55%,
      #E4CBA1 93%, rgba(228,203,161,0) 100%);
  border-radius: 2px;
  z-index: -1;
  transform-origin: left center;
}

.text-muted { color: var(--muted); }
.text-ink    { color: var(--ink); }
.text-accent { color: var(--accent); }
.serif { font-family: var(--font-display); }
.mono  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }


/* ==========================================================================
   04  LAYOUT PRIMITIVES
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }
.wrap--wide   { max-width: 1420px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--paper  { background: var(--paper-2); }
.section--sunk   { background: var(--surface-sunk); }
.section--white  { background: var(--surface); }
.section--dark   { background: var(--ink); color: var(--on-dark-mute); }
.section--dark h2, .section--dark h3, .section--dark strong { color: var(--on-dark); }

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head > h2 { margin-top: .7rem; }
.section-head > .lede { margin-top: 1rem; }
.section-head--center .lede { margin-inline: auto; }

.section-head--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sp-5);
}
.section-head--split .section-head__text { max-width: 58ch; }

.grid { display: grid; gap: clamp(1rem, .5rem + 1.4vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.stack   { display: flex; flex-direction: column; gap: var(--sp-4); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }

.divider-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent);
}


/* ==========================================================================
   05  BUTTONS & BADGES
   ========================================================================== */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--on-dark);
  --btn-bd: var(--ink);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.4rem;
  min-height: 46px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -.006em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease);
}
.btn .icon { flex: none; }

/* A warm sheen sweeps across on hover. */
.btn::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.18) 48%, transparent 62%);
  transform: translateX(-110%);
  transition: transform .62s var(--ease-out);
}
.btn:hover::after { transform: translateX(110%); }

.btn:hover  { transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn:active { transform: translateY(0) scale(.985); box-shadow: var(--sh-xs); }

.btn--primary { --btn-bg: var(--ink); --btn-fg: var(--on-dark); --btn-bd: var(--ink); }
.btn--primary:hover { --btn-bg: #241d16; }

.btn--oak { --btn-bg: var(--accent); --btn-fg: #fff; --btn-bd: var(--accent); }
.btn--oak:hover { --btn-bg: var(--accent-ink); --btn-bd: var(--accent-ink); }

.btn--outline {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-2);
  box-shadow: var(--sh-inset);
}
.btn--outline:hover { --btn-bd: var(--ink); --btn-bg: rgba(23,19,15,.03); }

.btn--soft {
  --btn-bg: var(--surface); --btn-fg: var(--ink); --btn-bd: var(--line);
  box-shadow: var(--sh-sm);
}
.btn--soft:hover { --btn-bd: var(--line-3); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink-2); --btn-bd: transparent;
}
.btn--ghost:hover { --btn-bg: rgba(23,19,15,.05); transform: none; box-shadow: none; }

.btn--light { --btn-bg: var(--on-dark); --btn-fg: var(--ink); --btn-bd: var(--on-dark); }
.btn--light:hover { --btn-bg: #fff; --btn-bd: #fff; }

.btn--danger { --btn-bg: var(--danger); --btn-fg: #fff; --btn-bd: var(--danger); }
.btn--danger:hover { --btn-bg: #7f2e25; --btn-bd: #7f2e25; }

.btn--sm  { padding: .58rem 1rem;   min-height: 38px; font-size: var(--fs-xs); }
.btn--lg  { padding:1.05rem 1.9rem; min-height: 56px; font-size: 1.02rem; }
.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5; pointer-events: none; transform: none; box-shadow: none;
}
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::before {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 17px; height: 17px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--btn-fg);
  animation: spin .68s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* A text link that grows an underline from the left. */
.link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; color: var(--accent);
  position: relative; padding-bottom: 2px;
}
.link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform var(--t-base) var(--ease-out);
}
.link:hover::after { transform: scaleX(1); transform-origin: left center; }
.link .icon { transition: transform var(--t-base) var(--ease-out); }
.link:hover .icon { transform: translateX(3px); }

.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .34rem .7rem;
  border-radius: var(--r-pill);
  background: var(--paper-3);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge--ok     { background: var(--ok-bg);     color: var(--ok);     border-color: transparent; }
.badge--warn   { background: var(--warn-bg);   color: var(--warn);   border-color: transparent; }
.badge--danger { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.badge--info   { background: var(--info-bg);   color: var(--info);   border-color: transparent; }
.badge--oak    { background: var(--oak-tint);  color: var(--accent); border-color: transparent; }

.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .95rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-xs); font-weight: 500;
  color: var(--ink-2);
  transition: all var(--t-fast) var(--ease);
}
.chip .icon { color: var(--accent); }
a.chip:hover, button.chip:hover { border-color: var(--ink); transform: translateY(-1px); }
.chip.is-on { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.chip.is-on .icon { color: var(--oak); }


/* ==========================================================================
   06  FORMS
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: .45rem; }
.field--full { grid-column: 1 / -1; }

.label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.005em;
  display: flex; align-items: center; gap: .35rem;
}
.label__opt { color: var(--muted-2); font-weight: 400; }
.label .req { color: var(--clay); }

.input, .textarea, .select {
  width: 100%;
  padding: .82rem .95rem;
  min-height: 48px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: 1.45;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.textarea { min-height: 132px; resize: vertical; padding-top: .85rem; }

.select {
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2377685c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  cursor: pointer;
}

.input::placeholder, .textarea::placeholder { color: var(--muted-2); }

.input:hover, .textarea:hover, .select:hover { border-color: var(--line-3); }

.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px rgba(138, 90, 43, .13);
  background: var(--surface);
}

.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3.5px rgba(155, 58, 47, .12);
}

.hint { font-size: var(--fs-xs); color: var(--muted); }

/* Opening hours. Used on light cards; the footer has its own dark variant. */
.hours-list { display: grid; gap: .5rem; }
.hours-list li {
  display: flex; justify-content: space-between; gap: .75rem;
  font-size: var(--fs-xs); color: var(--muted);
  padding-bottom: .5rem; border-bottom: 1px dashed var(--line);
}
.hours-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.hours-list li span:last-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
.hours-list li.is-today span:last-child { color: var(--accent); }
.err  { font-size: var(--fs-xs); color: var(--danger); font-weight: 500;
        display: flex; align-items: center; gap: .3rem; min-height: 0; }
.err:empty { display: none; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--sp-4);
}

.check {
  display: flex; align-items: flex-start; gap: .65rem;
  font-size: var(--fs-sm); color: var(--muted); cursor: pointer;
  line-height: 1.5;
}
.check input { margin-top: .18rem; width: 18px; height: 18px; accent-color: var(--accent); flex: none; cursor: pointer; }

/* The eye toggle inside a password box. */
.pw { position: relative; }
.pw .input { padding-right: 3rem; }
.pw__toggle {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  color: var(--muted); border-radius: var(--r-xs);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.pw__toggle:hover { color: var(--ink); background: var(--paper-2); }

/* Password strength meter */
.pw-meter { display: flex; gap: 4px; margin-top: .1rem; }
.pw-meter i {
  height: 3px; flex: 1; border-radius: 2px; background: var(--line-2);
  transition: background var(--t-base) var(--ease);
}
.pw-meter[data-score="1"] i:nth-child(-n+1) { background: var(--danger); }
.pw-meter[data-score="2"] i:nth-child(-n+2) { background: var(--clay); }
.pw-meter[data-score="3"] i:nth-child(-n+3) { background: var(--warn); }
.pw-meter[data-score="4"] i { background: var(--ok); }

/* Honeypot: real people never see it, bots fill it in. */
.hp {
  position: absolute !important;
  left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
}

/* Six separate boxes for the emailed verification code. */
.code-input {
  display: flex; gap: .55rem; justify-content: center;
  direction: ltr;
}
.code-input input {
  width: clamp(42px, 12vw, 56px);
  height: clamp(52px, 15vw, 66px);
  padding: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: clamp(1.3rem, 4.5vw, 1.7rem);
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-md);
  transition: all var(--t-fast) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.code-input input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px rgba(138, 90, 43, .14);
  transform: translateY(-2px);
}
.code-input input.is-filled { border-color: var(--ink); background: var(--paper-2); }
.code-input.is-error input { border-color: var(--danger); animation: shake .42s var(--ease); }

@keyframes shake {
  10%, 90% { transform: translateX(-1.5px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* A message bar above a form. */
.notice {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .9rem 1.1rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: 1.55;
  border: 1px solid transparent;
}
.notice .icon { flex: none; margin-top: .12rem; }
.notice--ok     { background: var(--ok-bg);     color: var(--ok);     border-color: rgba(63,107,74,.18); }
.notice--warn   { background: var(--warn-bg);   color: var(--warn);   border-color: rgba(138,99,24,.2); }
.notice--danger { background: var(--danger-bg); color: var(--danger); border-color: rgba(155,58,47,.18); }
.notice--info   { background: var(--info-bg);   color: var(--info);   border-color: rgba(47,92,134,.16); }
.notice:empty { display: none; }


/* ==========================================================================
   07  HEADER, NAVIGATION & PHONE BUTTON
   ========================================================================== */
.site-header {
  position: sticky; top: 0;
  z-index: var(--z-header);
  background: rgba(250, 247, 242, .84);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px -14px rgba(56, 39, 22, .28);
  background: rgba(250, 247, 242, .93);
}

/* --- Thin information strip above the nav -------------------------------- */
.topbar {
  background: var(--ink);
  color: var(--on-dark-mute);
  font-size: var(--fs-2xs);
  letter-spacing: .012em;
  height: var(--topbar-h);
  overflow: hidden;
  transition: height var(--t-slow) var(--ease-out), opacity var(--t-base) var(--ease);
}
.site-header.is-stuck .topbar { height: 0; opacity: 0; }

.topbar__inner { display: flex; align-items: center; gap: .85rem; height: var(--topbar-h); }
.topbar__item  { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.topbar__item .icon { color: var(--oak); opacity: .95; }
.topbar__sep   { width: 1px; height: 13px; background: rgba(255,255,255,.16); flex: none; }
.topbar__grow  { flex: 1 1 auto; }
.topbar__link  {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--on-dark-mute); white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.topbar__link:hover { color: var(--on-dark); }
.topbar__link .icon { color: var(--oak); }
.topbar__item--hours.is-open  .icon { color: #7FBF8E; }
.topbar__item--hours.is-closed .icon { color: var(--muted-2); }

/* --- Main bar ------------------------------------------------------------ */
.navbar__inner {
  display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2rem);
  height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: .7rem; flex: none; }
.brand__mark { color: var(--ink); display: grid; place-items: center; }
.brand__mark .logomark { transition: transform var(--t-slow) var(--ease-back); }
.brand:hover .brand__mark .logomark { transform: rotate(-8deg) scale(1.06); }
.brand__text { display: flex; flex-direction: column; line-height: 1.12; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.12rem; font-weight: 600;
  color: var(--ink); letter-spacing: -.022em;
}
.brand__sub {
  font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}

.nav { display: flex; align-items: center; gap: .15rem; margin-inline: auto; }
.nav-item { position: relative; }

.nav-link {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .58rem .8rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-link::after {
  content: ""; position: absolute;
  left: .8rem; right: .8rem; bottom: .3rem;
  height: 1.5px; background: var(--accent);
  transform: scaleX(0); transform-origin: right center;
  transition: transform var(--t-base) var(--ease-out);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left center; }
.nav-item.is-active > .nav-link { color: var(--ink); font-weight: 600; }
.nav-item.is-active > .nav-link::after { transform: scaleX(1); }
.nav-link__chev { opacity: .5; transition: transform var(--t-base) var(--ease); }
.nav-item--has-panel:hover .nav-link__chev,
.nav-item--has-panel:focus-within .nav-link__chev { transform: rotate(180deg); }

/* --- Services dropdown --------------------------------------------------- */
.nav-panel {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(.98);
  width: min(92vw, 400px);
  padding: .5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              visibility var(--t-base);
}
.nav-panel::before {
  content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px;
}
.nav-item--has-panel:hover .nav-panel,
.nav-item--has-panel:focus-within .nav-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
.nav-panel__item {
  display: flex; align-items: center; gap: .85rem;
  padding: .8rem .85rem;
  border-radius: var(--r-md);
  transition: background var(--t-fast) var(--ease);
}
.nav-panel__item:hover { background: var(--paper-2); }
.nav-panel__ic {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--oak-tint); color: var(--accent);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.nav-panel__item:hover .nav-panel__ic { background: var(--ink); color: var(--oak); }
.nav-panel__item strong { display: block; font-size: var(--fs-sm); color: var(--ink); font-weight: 600; }
.nav-panel__item small  { display: block; font-size: var(--fs-xs); color: var(--muted); line-height: 1.35; }
.nav-panel__arrow { margin-left: auto; color: var(--muted-2); opacity: 0; transform: translateX(-4px);
                    transition: all var(--t-base) var(--ease-out); }
.nav-panel__item:hover .nav-panel__arrow { opacity: 1; transform: translateX(0); }

.navbar__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

/* --- THE PHONE BUTTON ----------------------------------------------------
   It is a genuine tel: link, so on a phone it dials.
   On a desktop, JavaScript stops the click and copies the number instead —
   because a tel: link on a laptop just opens a dialog that does nothing.
   ------------------------------------------------------------------------- */
.phone-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .58rem .9rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  transition: all var(--t-base) var(--ease-out);
}
.phone-btn .icon { color: var(--accent); transition: transform var(--t-base) var(--ease-back); }
.phone-btn:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: var(--sh-sm);
}
.phone-btn:hover .icon { transform: rotate(-14deg) scale(1.1); }

/* The "Click to copy" hint slides in on desktop only. */
.phone-btn__hint {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--ink); color: var(--on-dark);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .01em;
  transform: translateY(101%);
  transition: transform var(--t-base) var(--ease-out);
}
.can-call .phone-btn__hint { display: none; }
.no-call .phone-btn:hover .phone-btn__hint { transform: translateY(0); }
.phone-btn.is-copied .phone-btn__hint { transform: translateY(0); background: var(--ok); }

.phone-btn--footer {
  background: transparent; border-color: rgba(255,255,255,.22);
  color: var(--on-dark); padding: .9rem 1.3rem; min-height: 56px; font-size: 1rem;
}
.phone-btn--footer:hover { border-color: var(--on-dark); background: rgba(255,255,255,.06); }
.phone-btn--footer .icon { color: var(--oak); }

.phone-btn--hero { padding: .95rem 1.5rem; min-height: 56px; font-size: 1.02rem; }

.icon-btn {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--ink);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--paper-3); }

/* --- Account menu -------------------------------------------------------- */
.acct { position: relative; }
.acct__btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .55rem .3rem .3rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink);
  transition: all var(--t-fast) var(--ease);
}
.acct__btn:hover { border-color: var(--ink); box-shadow: var(--sh-sm); }
.acct__avatar {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--accent), var(--walnut));
  color: #fff; font-weight: 700; font-size: var(--fs-xs);
  font-family: var(--font-display);
}
.acct__chev { opacity: .5; transition: transform var(--t-base) var(--ease); }
.acct.is-open .acct__chev { transform: rotate(180deg); }

.acct-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: min(88vw, 268px);
  padding: .4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px) scale(.97);
  transform-origin: top right;
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              visibility var(--t-base);
  z-index: 5;
}
.acct.is-open .acct-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.acct-menu__head { padding: .75rem .8rem .7rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem; }
.acct-menu__head strong { display: block; font-size: var(--fs-sm); color: var(--ink); }
.acct-menu__head small  { display: block; font-size: var(--fs-xs); color: var(--muted);
                          overflow: hidden; text-overflow: ellipsis; }
.acct-menu__form { display: block; }
.acct-menu__item {
  width: 100%;
  display: flex; align-items: center; gap: .65rem;
  padding: .68rem .8rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2);
  text-align: left;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.acct-menu__item .icon { color: var(--muted); flex: none; }
.acct-menu__item:hover { background: var(--paper-2); color: var(--ink); }
.acct-menu__item:hover .icon { color: var(--accent); }
.acct-menu__item--owner {
  background: linear-gradient(100deg, var(--oak-tint), #FBF4E8);
  color: var(--accent-ink); font-weight: 600;
  margin-bottom: .2rem;
}
.acct-menu__item--owner .icon { color: var(--accent); }
.acct-menu__item--owner:hover { background: var(--ink); color: var(--on-dark); }
.acct-menu__item--owner:hover .icon,
.acct-menu__item--owner:hover .acct-menu__badge { color: var(--oak); }
.acct-menu__badge {
  margin-left: auto; font-size: var(--fs-2xs);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}
.acct-menu__item--danger { color: var(--danger); }
.acct-menu__item--danger .icon { color: var(--danger); }
.acct-menu__item--danger:hover { background: var(--danger-bg); color: var(--danger); }

/* --- Scroll progress hairline -------------------------------------------- */
.header-progress {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; pointer-events: none;
}
.header-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--oak), var(--accent));
  transition: width .08s linear;
}

/* --- Menu toggle (phones/tablets) ---------------------------------------- */
.nav-toggle__bars { position: relative; width: 20px; height: 14px; }
.nav-toggle__bars i {
  position: absolute; left: 0; height: 1.8px; width: 100%;
  background: var(--ink); border-radius: 2px;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease),
              width var(--t-base) var(--ease-out);
}
.nav-toggle__bars i:nth-child(1) { top: 0; }
.nav-toggle__bars i:nth-child(2) { top: 6.1px; width: 72%; }
.nav-toggle__bars i:nth-child(3) { top: 12.2px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(6.1px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; width: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-6.1px) rotate(-45deg); }


/* ==========================================================================
   08  MOBILE MENU & STICKY CALL BAR
   ========================================================================== */
.msheet { position: fixed; inset: 0; z-index: var(--z-sheet); }
.msheet[hidden] { display: none; }

.msheet__scrim {
  position: absolute; inset: 0;
  background: rgba(23, 19, 15, .5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity var(--t-base) var(--ease);
}
.msheet.is-open .msheet__scrim { opacity: 1; }

.msheet__panel {
  position: absolute; inset-block: 0; right: 0;
  width: min(88vw, 400px);
  display: flex; flex-direction: column;
  background: var(--paper);
  box-shadow: var(--sh-xl);
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
}
.msheet.is-open .msheet__panel { transform: translateX(0); }

.msheet__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2;
  background: var(--paper);
}
.msheet__nav { padding: .6rem .75rem; }
.msheet__link {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .95rem .8rem;
  border-radius: var(--r-md);
  font-size: 1.02rem; font-weight: 600; color: var(--ink);
  text-align: left;
  transition: background var(--t-fast) var(--ease);
}
.msheet__link .icon { color: var(--muted-2); flex: none; }
.msheet__link:active { background: var(--paper-3); }
.msheet__link.is-active { color: var(--accent); }
.msheet__link.is-active .icon { color: var(--accent); }
.msheet__link--danger { color: var(--danger); }
.msheet__link--danger .icon { color: var(--danger); }
.msheet__link--owner {
  background: linear-gradient(100deg, var(--oak-tint), #FBF4E8);
  color: var(--accent-ink);
}
.msheet__link--owner .icon { color: var(--accent); }

.msheet__sub {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .8rem .6rem 1.6rem;
  font-size: var(--fs-sm); color: var(--muted);
  border-radius: var(--r-sm);
}
.msheet__sub .icon { color: var(--accent); }
.msheet__sub:active { background: var(--paper-3); }

.msheet__acct { margin: .5rem .75rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.msheet__acct--out { display: grid; gap: .55rem; padding-top: 1rem; }
.msheet__acct-head { display: flex; align-items: center; gap: .7rem; padding: .5rem .8rem 1rem; }
.msheet__acct-head strong { display: block; font-size: var(--fs-sm); color: var(--ink); }
.msheet__acct-head small  { display: block; font-size: var(--fs-xs); color: var(--muted); }

.msheet__cta { display: grid; gap: .6rem; padding: 1rem 1.25rem; margin-top: auto; }
.msheet__foot {
  display: grid; gap: .5rem;
  padding: 1rem 1.25rem 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--muted);
}
.msheet__foot span { display: flex; align-items: flex-start; gap: .5rem; line-height: 1.45; }
.msheet__foot .icon { color: var(--accent); flex: none; margin-top: .1rem; }

/* --- The sticky bar at the bottom of a phone screen -----------------------
   Shown ONLY on touch devices. On a laptop it would be pointless clutter.
   ------------------------------------------------------------------------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 55;
  display: none;
  grid-template-columns: 1fr 1fr 1.35fr;
  gap: 1px;
  background: var(--line-2);
  border-top: 1px solid var(--line-2);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 28px -12px rgba(56, 39, 22, .3);
  transform: translateY(110%);
  transition: transform var(--t-slow) var(--ease-out);
}
.callbar.is-visible { transform: translateY(0); }
.callbar__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .18rem;
  padding: .6rem .4rem .68rem;
  min-height: 60px;
  background: var(--surface);
  font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
}
.callbar__btn .icon { color: var(--accent); }
.callbar__btn:active { background: var(--paper-2); }
.callbar__btn--call  { background: var(--ink); color: var(--on-dark); }
.callbar__btn--call .icon { color: var(--oak); }
.callbar__btn--quote { background: var(--accent); color: #fff; }
.callbar__btn--quote .icon { color: #fff; }

body.has-callbar { padding-bottom: 0; }


/* ==========================================================================
   09  OPENING ANIMATION & PAGE TRANSITION
   ========================================================================== */
.intro {
  position: fixed; inset: 0;
  z-index: var(--z-intro);
  display: grid; place-items: center;
  background: var(--paper);
  overflow: hidden;
}
/* Once seen this session, or with JS off, it never appears. */
html.intro-done .intro,
html.no-js .intro { display: none; }
html.intro-playing { overflow: hidden; }

.intro__panels { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.intro__panels i {
  display: block; height: 100%;
  background: var(--ink);
  transform: translateY(0);
}
/* The delays MUST sit inside .intro-playing as well. The `animation`
   shorthand resets animation-delay to 0, and a plain `.intro__panels i:nth-child()`
   rule loses on specificity — which made all five panels wipe away at once,
   half a second in, before the name had finished appearing. */
html.intro-playing .intro__panels i { animation: introPanel .74s var(--ease-in) forwards; }
html.intro-playing .intro__panels i:nth-child(1) { animation-delay: 1.52s; }
html.intro-playing .intro__panels i:nth-child(2) { animation-delay: 1.60s; }
html.intro-playing .intro__panels i:nth-child(3) { animation-delay: 1.68s; }
html.intro-playing .intro__panels i:nth-child(4) { animation-delay: 1.76s; }
html.intro-playing .intro__panels i:nth-child(5) { animation-delay: 1.84s; }
@keyframes introPanel { to { transform: translateY(-101%); } }

.intro__center {
  position: relative; z-index: 2;
  text-align: center;
  color: var(--on-dark);
  padding-inline: 1.5rem;
}
html.intro-playing .intro__center { animation: introOut .46s var(--ease-in) 1.44s forwards; }
@keyframes introOut { to { opacity: 0; transform: translateY(-14px); } }

.intro__mark { display: flex; justify-content: center; color: var(--oak); margin-bottom: 1.6rem; }
.logomark--draw .lm-box { stroke-dasharray: 168; stroke-dashoffset: 168; }
.logomark--draw .lm-a   { stroke-dasharray: 46;  stroke-dashoffset: 46; }
.logomark--draw .lm-bar { stroke-dasharray: 11;  stroke-dashoffset: 11; }
html.intro-playing .logomark--draw .lm-box { animation: draw .95s var(--ease-out) .1s forwards; }
html.intro-playing .logomark--draw .lm-a   { animation: draw .6s  var(--ease-out) .62s forwards; }
html.intro-playing .logomark--draw .lm-bar { animation: draw .3s  var(--ease-out) 1.0s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.intro__word { overflow: hidden; }
.intro__line { display: inline-flex; }
.intro__line b {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 7.5vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--on-dark);
  transform: translateY(105%);
  opacity: 0;
}
html.intro-playing .intro__line b {
  animation: introLetter .68s var(--ease-out) forwards;
  animation-delay: calc(.66s + var(--i) * .028s);
}
@keyframes introLetter { to { transform: translateY(0); opacity: 1; } }

.intro__sub {
  margin-top: .7rem;
  font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--oak);
  opacity: 0;
}
html.intro-playing .intro__sub { animation: fadeUp .55s var(--ease-out) 1.12s forwards; }

.intro__rule { margin: 1.5rem auto 0; width: min(240px, 60vw); height: 1px; background: rgba(255,255,255,.14); }
.intro__rule i { display: block; height: 100%; width: 0; background: var(--oak); }
html.intro-playing .intro__rule i { animation: ruleGrow 1.1s var(--ease-out) .55s forwards; }
@keyframes ruleGrow { to { width: 100%; } }

@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* --- Between-page transition veil ---------------------------------------- */
.page-veil {
  position: fixed; inset: 0;
  z-index: var(--z-veil);
  display: grid; place-items: center;
  background: var(--ink);
  opacity: 0; visibility: hidden;
  transition: opacity .34s var(--ease), visibility .34s;
}
.page-veil__mark { color: var(--oak); opacity: 0; transform: scale(.9); transition: all .3s var(--ease-out); }
body.is-leaving .page-veil { opacity: 1; visibility: visible; }
body.is-leaving .page-veil__mark { opacity: 1; transform: scale(1); }
html.no-js .page-veil { display: none; }

/* Content eases in when a page arrives. */
html.js body:not(.is-leaving) .site-main { animation: pageIn .5s var(--ease-out) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
html.intro-playing .site-main { animation: none; opacity: 1; }


/* ==========================================================================
   16a  TOASTS
   ========================================================================== */
.toasts {
  position: fixed; z-index: var(--z-toast);
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex; flex-direction: column-reverse; gap: .6rem;
  width: min(92vw, 380px);
  pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .85rem 1rem;
  background: var(--ink); color: var(--on-dark);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  font-size: var(--fs-sm); line-height: 1.45;
  pointer-events: auto;
  transform: translateY(14px) scale(.97); opacity: 0;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
}
.toast.is-in { transform: none; opacity: 1; }
.toast .icon { flex: none; margin-top: .1rem; color: var(--oak); }
.toast--ok .icon     { color: #7FBF8E; }
.toast--danger .icon { color: #E39084; }
.toast__body strong { display: block; font-weight: 600; color: #fff; }
.toast__body small  { display: block; color: var(--on-dark-mute); font-size: var(--fs-xs); }
.toast__close { margin-left: auto; color: var(--on-dark-mute); flex: none; }
.toast__close:hover { color: #fff; }

/* --- Back to top --------------------------------------------------------- */
.to-top {
  position: fixed; z-index: 50;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  box-shadow: var(--sh-md);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.9);
  transition: all var(--t-base) var(--ease-out);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.to-top__ic { transform: rotate(180deg); }


/* ==========================================================================
   10  HERO
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 1.5rem + 6vw, 6.5rem) 0;
  background: linear-gradient(178deg, var(--paper) 0%, var(--paper-2) 62%, var(--paper-3) 100%);
  isolation: isolate;
}

/* A whisper of oak grain across the whole hero — you feel it more than see it. */
.hero__bg {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  opacity: .30;
  background-image:
    repeating-linear-gradient(179deg,
      transparent 0 9px,
      rgba(150, 108, 58, .10) 9px 10px,
      transparent 10px 23px,
      rgba(178, 136, 84, .07) 23px 24px,
      transparent 24px 44px),
    repeating-linear-gradient(180deg,
      rgba(120, 84, 46, .12) 0 1px,
      transparent 1px 132px);
  -webkit-mask-image: radial-gradient(120% 90% at 78% 10%, #000 5%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 78% 10%, #000 5%, transparent 72%);
}
.hero__glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: 60vw; height: 60vw; max-width: 780px; max-height: 780px;
  top: -22%; right: -12%;
  background: radial-gradient(circle, rgba(233, 214, 183, .62), transparent 66%);
  filter: blur(12px);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
  gap: clamp(2rem, 1rem + 3.4vw, 4rem);
  align-items: center;
  padding-bottom: clamp(3rem, 1.5rem + 5vw, 5.5rem);
}

.hero__text > * + * { margin-top: 1.35rem; }
.hero__title {
  /* Sized so "Kitchens and floors," fits on one line at every width.
     A one-word orphan on line two looks like a mistake, not a design. */
  font-size: clamp(2.3rem, 1.05rem + 3.55vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.032em;
  text-wrap: initial;
}
.hero__lede  { font-size: var(--fs-lede); max-width: 52ch; }

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; padding-top: .35rem; }

.hero__trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-2);
  margin-top: 2rem !important;
}
.hero__trust-item { display: flex; align-items: center; gap: .55rem; font-size: var(--fs-xs); color: var(--muted); }
.hero__trust-item strong { color: var(--ink); font-weight: 600; }
.hero__trust-item .icon { color: var(--accent); flex: none; }

/* --- The floating material board (our stand-in for a hero photograph) ----- */
.matboard {
  position: relative;
  aspect-ratio: 4 / 4.4;
  max-width: 520px;
  margin-inline: auto;
  width: 100%;
  perspective: 1200px;
}
.matboard__card {
  position: absolute;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  border: 6px solid var(--surface);
  background: var(--surface);
  transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out);
  will-change: transform;
}
.matboard__card .swatch { position: absolute; inset: 0; border-radius: 0; }
.matboard__card::after {
  content: attr(data-label);
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .55rem .7rem;
  background: linear-gradient(to top, rgba(23,19,15,.82), rgba(23,19,15,0));
  color: #fff;
  font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
}

.matboard__card--a { left: 0;    top: 0;     width: 56%; height: 40%; transform: rotate(-2.6deg); z-index: 3; }
.matboard__card--b { right: 0;   top: 4%;    width: 40%; height: 32%; transform: rotate(2.8deg);  z-index: 2; }
.matboard__card--c { left: 4%;   top: 46%;   width: 52%; height: 40%; transform: rotate(1.9deg);  z-index: 4; }
.matboard__card--d { right: 3%;  top: 40%;   width: 37%; height: 26%; transform: rotate(-2.4deg); z-index: 1; }

.matboard:hover .matboard__card--a { transform: rotate(-4.4deg) translate(-6px, -7px); }
.matboard:hover .matboard__card--b { transform: rotate(3.8deg)  translate(7px, -5px); }
.matboard:hover .matboard__card--c { transform: rotate(2.8deg)  translate(-5px, 7px); }
.matboard:hover .matboard__card--d { transform: rotate(-3.4deg) translate(6px, 6px); }

/* The little floating "estimate" ticket pinned on the board. */
.matboard__note {
  position: absolute; z-index: 6;
  right: 0; bottom: 0;
  width: min(212px, 53%);
  padding: .9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xl);
  transform: rotate(-1.6deg);
  animation: floaty 7s var(--ease) infinite;
}
@keyframes floaty {
  0%, 100% { transform: rotate(-1.6deg) translateY(0); }
  50%      { transform: rotate(-1.6deg) translateY(-9px); }
}
.matboard__note-top { display: flex; align-items: center; gap: .45rem; margin-bottom: .5rem; }
.matboard__note-top .icon { color: var(--ok); }
.matboard__note-top span { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .1em;
                           text-transform: uppercase; color: var(--ok); }
.matboard__note strong { display: block; font-family: var(--font-display); font-size: 1.32rem;
                         color: var(--ink); line-height: 1.15; }
.matboard__note small  { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: .2rem; }

/* --- Stat strip beneath the hero ----------------------------------------- */
.hero__stats {
  border-top: 1px solid var(--line-2);
  background: rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat-strip__item {
  padding: clamp(1.25rem, .8rem + 1.4vw, 2rem) clamp(.6rem, .3rem + 1vw, 1.5rem);
  text-align: center;
  border-left: 1px solid var(--line);
}
.stat-strip__item:first-child { border-left: 0; }
.stat-strip__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.1rem + 2.1vw, 2.6rem);
  font-weight: 600; color: var(--ink);
  letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-strip__label {
  display: block; margin-top: .45rem;
  font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
}


/* ==========================================================================
   11  MATERIAL SWATCHES
   --------------------------------------------------------------------------
   Every wood, stone and tile below is drawn by the browser from gradients
   and inline SVG. No photographs, no image files, no downloads — and it
   stays perfectly sharp on any screen at any size.
   ========================================================================== */
.swatch {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background-color: var(--paper-3);
  background-repeat: repeat;
  isolation: isolate;
}
/* Shared lighting: a soft sheen top-left, a gentle vignette at the edges. */
.swatch::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(128deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 38%),
    radial-gradient(120% 120% at 50% 50%, transparent 52%, rgba(46,31,16,.16) 100%);
  pointer-events: none;
}

/* ---- White Oak: pale, warm, straight grain with cathedral figure -------- */
.swatch--oak {
  background-color: #DCBF96;
  background-image:
    repeating-linear-gradient(180deg,
      rgba(112, 79, 44, .40) 0 1.5px,
      rgba(255, 249, 237, .26) 1.5px 3px,
      transparent 3px 25%),
    repeating-linear-gradient(178.4deg,
      transparent 0 4px,
      rgba(136, 98, 56, .15) 4px 5px,
      transparent 5px 11px,
      rgba(160, 120, 74, .10) 11px 12px,
      transparent 12px 19px),
    radial-gradient(150% 25% at 8% 13%, rgba(114, 78, 42, .22), transparent 62%),
    radial-gradient(130% 21% at 82% 43%, rgba(114, 78, 42, .18), transparent 64%),
    radial-gradient(110% 19% at 30% 77%, rgba(148, 108, 62, .20), transparent 66%),
    linear-gradient(102deg, rgba(255, 246, 230, .36), transparent 46%, rgba(106, 72, 38, .16));
}

/* ---- American Walnut: dark chocolate, tighter and richer ---------------- */
.swatch--walnut {
  background-color: #6D4A2E;
  background-image:
    repeating-linear-gradient(180deg,
      rgba(32, 18, 8, .55) 0 1.5px,
      rgba(186, 145, 104, .20) 1.5px 3px,
      transparent 3px 25%),
    repeating-linear-gradient(178.8deg,
      transparent 0 3px,
      rgba(38, 22, 10, .26) 3px 4.2px,
      transparent 4.2px 9px,
      rgba(146, 106, 68, .14) 9px 10px,
      transparent 10px 16px),
    radial-gradient(140% 24% at 16% 20%, rgba(30, 16, 6, .32), transparent 60%),
    radial-gradient(120% 20% at 74% 58%, rgba(30, 16, 6, .26), transparent 62%),
    linear-gradient(104deg, rgba(196, 154, 110, .24), transparent 44%, rgba(24, 12, 4, .26));
}

/* ---- Hickory: the loud one. Light and dark boards in the same floor ----- */
.swatch--hickory {
  background-color: #C69760;
  background-image:
    repeating-linear-gradient(180deg,
      rgba(78, 48, 22, .55) 0 1.5px,
      rgba(255, 245, 228, .32) 1.5px 3px,
      transparent 3px 25%),
    /* light and dark boards side by side -- hickory's signature */
    repeating-linear-gradient(180deg,
      rgba(56, 33, 12, .34) 0 25%,
      rgba(255, 236, 203, .40) 25% 50%,
      rgba(96, 60, 28, .26) 50% 75%,
      rgba(255, 226, 186, .16) 75% 100%),
    repeating-linear-gradient(177.4deg,
      transparent 0 3px,
      rgba(80, 50, 22, .26) 3px 4px,
      transparent 4px 8px,
      rgba(146, 100, 54, .18) 8px 9.5px,
      transparent 9.5px 15px),
    radial-gradient(130% 20% at 22% 32%, rgba(70, 42, 18, .28), transparent 60%),
    radial-gradient(110% 16% at 76% 66%, rgba(70, 42, 18, .22), transparent 62%),
    linear-gradient(100deg, rgba(255, 238, 212, .32), transparent 48%, rgba(82, 50, 22, .18));
}

/* ---- Chevron parquet: point-to-point, the showpiece floor --------------- */
.swatch--chevron {
  background-color: #D8B98C;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Crect width='44' height='44' fill='%23D8B98C'/%3E%3Cpolygon points='0,0 22,22 22,44 0,22' fill='%23CBA774'/%3E%3Cpolygon points='22,22 44,0 44,22 22,44' fill='%23E0C69C'/%3E%3Cg fill='none' stroke='%238E6437' stroke-width='1.15' opacity='.62'%3E%3Cpath d='M0 0 L22 22 L44 0'/%3E%3Cpath d='M0 22 L22 44 L44 22'/%3E%3C/g%3E%3Cg fill='none' stroke='%23A87F4E' stroke-width='.5' opacity='.5'%3E%3Cpath d='M0 6 L16 22 L16 44'/%3E%3Cpath d='M0 14 L8 22 L8 44'/%3E%3Cpath d='M28 22 L44 6 M36 22 L44 14'/%3E%3Cpath d='M28 44 L28 22 L44 38 M36 44 L36 30'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 44px 44px;
}

/* ---- Engineered quartz: dense, even, tiny mineral speckle --------------- */
.swatch--quartz {
  background-color: #EDEAE3;
  background-image:
    /* very fine mineral speckle, generated as noise */
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='4'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.36 0 0 0 0 0.35 0 0 0 0 0.33 0 0 0 -1.05 0.62'/%3E%3C/filter%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.05' numOctaves='3' seed='9'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.55 0 0 0 0 0.54 0 0 0 0 0.52 0 0 0 -1.9 1.0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23h)' opacity='.45'/%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(126deg, rgba(255,255,255,.85), rgba(222, 216, 205, .7) 62%, rgba(240, 236, 228, .8));
  background-size: 180px 180px, 100% 100%;
}

/* ---- Carrara marble: real turbulence-generated veining ------------------ */
.swatch--marble {
  /* Carrara. Drawn rather than generated from noise: real marble is a soft
     grey cloud with a few darker veins drifting through it, not a crack
     pattern — so the veins are heavily blurred and kept low-contrast. */
  background-color: #F5F2ED;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='xMidYMid slice'%3E %3Cdefs%3E %3Cfilter id='s1' x='-25%25' y='-25%25' width='150%25' height='150%25'%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E %3Cfilter id='s2' x='-25%25' y='-25%25' width='150%25' height='150%25'%3E%3CfeGaussianBlur stdDeviation='9'/%3E%3C/filter%3E %3Cfilter id='s3' x='-25%25' y='-25%25' width='150%25' height='150%25'%3E%3CfeGaussianBlur stdDeviation='1.1'/%3E%3C/filter%3E %3Cfilter id='gr'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='6'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.47 0 0 0 0 0.46 0 0 0 0 0.44 0 0 0 -0.85 0.4'/%3E%3C/filter%3E %3C/defs%3E %3Crect width='400' height='300' fill='%23F5F2ED'/%3E %3Cg filter='url(%23s2)' opacity='0.5' fill='none' stroke='%23BDB8AF'%3E %3Cpath d='M-40 96 C 76 44 146 126 216 98 S 344 60 440 112' stroke-width='26'/%3E %3Cpath d='M-40 242 C 86 202 156 272 236 244 S 354 216 440 256' stroke-width='20'/%3E %3Cpath d='M62 -30 C 100 64 62 128 116 196 S 156 268 132 340' stroke-width='16'/%3E %3C/g%3E %3Cg filter='url(%23s1)' opacity='0.42' fill='none' stroke='%23A5A099'%3E %3Cpath d='M-40 94 C 74 42 144 124 214 96 S 342 58 440 110' stroke-width='3.4'/%3E %3Cpath d='M-40 240 C 84 200 154 270 234 242 S 352 214 440 254' stroke-width='2.8'/%3E %3Cpath d='M60 -30 C 98 62 60 126 114 194 S 154 266 130 340' stroke-width='2.2'/%3E %3Cpath d='M304 -20 C 326 48 300 94 334 150 S 356 218 340 300' stroke-width='1.8'/%3E %3C/g%3E %3Cg filter='url(%23s3)' fill='none' stroke='%23948E85' opacity='0.35' stroke-linecap='round'%3E %3Cpath d='M18 100 C 58 80 90 108 122 94' stroke-width='1'/%3E %3Cpath d='M184 102 C 214 86 244 112 272 96' stroke-width='0.9'/%3E %3Cpath d='M102 246 C 134 232 164 256 194 242' stroke-width='0.9'/%3E %3Cpath d='M298 254 C 330 242 360 262 394 248' stroke-width='0.8'/%3E %3Cpath d='M244 120 C 256 152 240 174 252 206' stroke-width='0.8'/%3E %3Cpath d='M76 44 C 94 68 80 92 98 120' stroke-width='0.7'/%3E %3Cpath d='M350 170 C 368 188 358 210 374 228' stroke-width='0.7'/%3E %3Cpath d='M140 150 C 168 140 190 160 216 150' stroke-width='0.6'/%3E %3C/g%3E %3Crect width='400' height='300' filter='url(%23gr)' opacity='0.42'/%3E %3C/svg%3E");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}




/* ---- Large-format porcelain: wide tiles, few grout lines ---------------- */
.swatch--porcelain {
  background-color: #DCD8D2;
  background-image:
    linear-gradient(90deg, rgba(150, 144, 136, .55) 0 2px, transparent 2px),
    linear-gradient(180deg, rgba(150, 144, 136, .55) 0 2px, transparent 2px),
    radial-gradient(rgba(120, 114, 106, .13) .7px, transparent .8px),
    linear-gradient(133deg, rgba(255,255,255,.62), rgba(206, 200, 192, .5) 60%, rgba(228, 224, 218, .55));
  background-size: 50% 50%, 50% 50%, 9px 9px, 100% 100%;
}

/* ---- Rigid-core vinyl: crisp print, cooler grey-brown tone -------------- */
/* ---- Worn laminate: what we usually tear out ---------------------------- */
.swatch--worn {
  background-color: #9A8F80;
  background-image:
    repeating-linear-gradient(180deg,
      rgba(48, 42, 34, .5) 0 2px,
      rgba(196, 188, 176, .18) 2px 3.5px,
      transparent 3.5px 22%),
    repeating-linear-gradient(178.6deg,
      transparent 0 3px,
      rgba(60, 54, 46, .2) 3px 4.2px,
      transparent 4.2px 10px),
    /* scuffs and traffic wear */
    radial-gradient(60% 34% at 34% 58%, rgba(40, 36, 30, .24), transparent 68%),
    radial-gradient(46% 26% at 74% 30%, rgba(40, 36, 30, .2), transparent 70%),
    radial-gradient(38% 22% at 18% 24%, rgba(226, 220, 210, .16), transparent 72%),
    linear-gradient(96deg, rgba(206, 199, 188, .2), transparent 46%, rgba(44, 38, 32, .26));
  filter: saturate(.72);
}

.swatch--vinyl {
  background-color: #AC9A85;
  background-image:
    repeating-linear-gradient(180deg,
      rgba(62, 52, 42, .46) 0 1.5px,
      rgba(240, 234, 226, .24) 1.5px 2.5px,
      transparent 2.5px 20%),
    /* the give-away of a printed floor: the pattern repeats exactly */
    repeating-linear-gradient(179.4deg,
      transparent 0 2.5px,
      rgba(78, 66, 54, .19) 2.5px 3.4px,
      transparent 3.4px 7.5px,
      rgba(150, 138, 122, .15) 7.5px 8.4px,
      transparent 8.4px 13px),
    radial-gradient(120% 18% at 28% 26%, rgba(60, 50, 40, .18), transparent 62%),
    linear-gradient(98deg, rgba(232, 226, 216, .3), transparent 50%, rgba(56, 46, 36, .18));
}

/* --- Materials section --------------------------------------------------- */
.materials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
  gap: clamp(.9rem, .5rem + 1.2vw, 1.5rem);
}
.material {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: .7rem .7rem 1.15rem;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease);
}
.material:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--line-2); }
.material .swatch { aspect-ratio: 4 / 3; width: 100%; }
.material__body { padding: 1rem .5rem 0; }
.material__kind {
  font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.material__name {
  display: block; margin-top: .3rem;
  font-family: var(--font-display); font-size: 1.14rem; font-weight: 600; color: var(--ink);
  letter-spacing: -.018em;
}
.material__note { margin-top: .45rem; font-size: var(--fs-xs); color: var(--muted); line-height: 1.55; }


/* ==========================================================================
   12  SECTIONS
   ========================================================================== */

/* --- Service cards ------------------------------------------------------- */
.svc-group + .svc-group { margin-top: clamp(3rem, 2rem + 4vw, 5.5rem); }
.svc-group__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.25rem, .5rem + 3vw, 3.5rem);
  align-items: end;
  padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-bottom: 1px solid var(--line-2);
}
.svc-group__head h2 { margin-top: .6rem; }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1rem, .5rem + 1.4vw, 1.6rem);
}

.svc {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 1rem + 1.1vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  scroll-margin-top: calc(var(--header-h) + 24px);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease);
}
/* Warm wash that grows from the top-right corner on hover. */
.svc::before {
  content: ""; position: absolute; top: 0; right: 0;
  width: 190px; height: 190px;
  background: radial-gradient(circle at top right, rgba(233, 214, 183, .55), transparent 70%);
  opacity: 0; transition: opacity var(--t-slow) var(--ease-out);
  pointer-events: none;
}
.svc:hover::before { opacity: 1; }
.svc:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--line-2); }
.svc:target { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(138,90,43,.13), var(--sh-md); }

.svc__ic {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--oak-tint);
  color: var(--accent);
  margin-bottom: 1.1rem;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease-back);
}
.svc:hover .svc__ic { background: var(--ink); color: var(--oak); transform: rotate(-6deg) scale(1.05); }

.svc__title { font-size: 1.24rem; letter-spacing: -.02em; }
.svc__summary { margin-top: .55rem; font-size: var(--fs-sm); color: var(--muted); line-height: 1.62; }

.svc__list { margin-top: 1.1rem; display: grid; gap: .5rem; }
.svc__list li {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5;
}
.svc__list .icon { color: var(--ok); flex: none; margin-top: .1rem; }

.svc__foot {
  margin-top: auto; padding-top: 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
}
.svc__price {
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink);
}
.svc__price small { display: block; font-family: var(--font-body); font-size: var(--fs-2xs);
                    font-weight: 500; color: var(--muted-2); letter-spacing: .06em;
                    text-transform: uppercase; }

/* --- Feature row: alternating text + material panel ---------------------- */
.feature {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(1.75rem, 1rem + 3.5vw, 4rem);
  align-items: center;
}
.feature + .feature { margin-top: clamp(3rem, 2rem + 4vw, 5.5rem); }
.feature--flip > :first-child { order: 2; }
.feature__panel {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  border: 8px solid var(--surface);
}
.feature__panel .swatch { position: absolute; inset: 0; border-radius: 0; }
.feature__tag {
  position: absolute; z-index: 2; left: 1rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .9rem;
  background: rgba(255,255,255,.93);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  box-shadow: var(--sh-sm);
}
.feature__tag .icon { color: var(--accent); }
.feature__body > * + * { margin-top: 1.1rem; }
.feature__points { display: grid; gap: .8rem; margin-top: 1.5rem !important; }
.feature__points li { display: flex; gap: .75rem; align-items: flex-start; }
.feature__points .icon { color: var(--accent); flex: none; margin-top: .18rem; }
.feature__points strong { display: block; color: var(--ink); font-size: var(--fs-sm); }
.feature__points span   { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.55; }

/* --- Process ------------------------------------------------------------- */
.process { display: grid; gap: 0; counter-reset: step; }
.process__item {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: clamp(1rem, .5rem + 2vw, 2.5rem);
  padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.4rem);
  border-top: 1px solid var(--line-2);
}
.process__item:last-child { border-bottom: 1px solid var(--line-2); }
.process__num {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem);
  font-weight: 600; line-height: 1;
  color: var(--line-3);
  letter-spacing: -.04em;
  transition: color var(--t-slow) var(--ease);
}
.process__item:hover .process__num { color: var(--accent); }
.process__body h3 { font-size: 1.28rem; }
.process__body p { margin-top: .5rem; color: var(--muted); font-size: var(--fs-sm);
                   line-height: 1.65; max-width: 62ch; }
.process__item::after {
  content: ""; position: absolute; left: 0; top: -1px;
  height: 1px; width: 0; background: var(--accent);
  transition: width var(--t-slow) var(--ease-out);
}
.process__item:hover::after { width: 100%; }

/* --- Gallery ------------------------------------------------------------- */
.gallery-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(.75rem, .4rem + 1vw, 1.15rem);
  /* Wide and tall tiles otherwise leave holes in the grid; dense backfills
     them with the next tile that happens to fit. */
  grid-auto-flow: dense;
}
.shot {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-3);
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.shot--tall { aspect-ratio: 3 / 4; }
.shot--wide { grid-column: span 2; aspect-ratio: 16 / 9; }
.shot:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); z-index: 2; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
            transition: transform .9s var(--ease-out); }
.shot:hover img { transform: scale(1.05); }
.shot .swatch { position: absolute; inset: 0; border-radius: 0; }
.shot__cap {
  position: absolute; inset: auto 0 0 0; z-index: 3;
  padding: 2.4rem .95rem .85rem;
  background: linear-gradient(to top, rgba(23,19,15,.86), rgba(23,19,15,.18) 62%, transparent);
  color: #fff;
  transform: translateY(6px); opacity: .95;
  transition: transform var(--t-base) var(--ease-out);
}
.shot:hover .shot__cap { transform: translateY(0); }
.shot__cap strong { display: block; font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; }
.shot__cap small  { display: block; font-size: var(--fs-2xs); color: rgba(255,255,255,.78);
                    letter-spacing: .08em; text-transform: uppercase; margin-top: .15rem; }

/* Placeholder styling for "your photo goes here" tiles. */
.shot--placeholder { border-style: dashed; border-color: var(--line-3); }
.shot__ph {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; justify-items: center; gap: .5rem;
  text-align: center; padding: 1rem;
  background: rgba(250, 247, 242, .55);
  -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
}
.shot__ph .icon { color: var(--accent); opacity: .85; }
.shot__ph b {
  font-size: var(--fs-2xs); color: var(--muted);
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.shot__ph code {
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  background: var(--surface); color: var(--accent);
  padding: .18rem .45rem; border-radius: var(--r-xs); border: 1px solid var(--line-2);
}

/* --- Before / after slider ----------------------------------------------- */
.ba {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  border: 8px solid var(--surface);
  cursor: ew-resize;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
}
.ba__layer { position: absolute; inset: 0; }
.ba__layer .swatch { position: absolute; inset: 0; border-radius: 0; }
.ba__layer--after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba__label {
  position: absolute; top: .9rem; z-index: 4;
  padding: .4rem .8rem;
  border-radius: var(--r-pill);
  background: rgba(23,19,15,.78);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  color: #fff; font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.ba__label--before { left: .9rem; }
.ba__label--after  { right: .9rem; }
.ba__handle {
  position: absolute; top: 0; bottom: 0; z-index: 5;
  left: var(--pos, 50%);
  width: 3px; margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(23,19,15,.14), 0 0 22px rgba(23,19,15,.3);
}
.ba__grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff; color: var(--ink);
  box-shadow: var(--sh-md);
  transition: transform var(--t-fast) var(--ease-back);
}
.ba:hover .ba__grip { transform: translate(-50%, -50%) scale(1.08); }
.ba__grip::before, .ba__grip::after {
  content: ""; width: 0; height: 0;
  border-block: 5px solid transparent;
  position: absolute;
}
.ba__grip::before { border-right: 7px solid var(--ink); left: 11px; }
.ba__grip::after  { border-left: 7px solid var(--ink); right: 11px; }

/* --- Reviews ------------------------------------------------------------- */
.stars { display: inline-flex; gap: 2px; line-height: 0; }
.stars .star { display: inline-flex; }
.stars .is-on  { color: var(--oak); }
.stars .is-off { color: var(--line-3); }
.stars--lg .star svg { width: 22px; height: 22px; }

.rating-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
}
.rating-summary__score { text-align: center; min-width: 150px; }
.rating-summary__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 4vw, 4.6rem);
  font-weight: 600; line-height: 1; color: var(--ink);
  letter-spacing: -.04em;
}
.rating-summary__of { font-size: var(--fs-xs); color: var(--muted-2); }
.rating-summary__stars { margin: .6rem 0 .4rem; display: flex; justify-content: center; }
.rating-summary__count { font-size: var(--fs-xs); color: var(--muted); }

.rating-bars { display: grid; gap: .5rem; }
.rating-bar { display: grid; grid-template-columns: 46px minmax(0, 1fr) 40px; gap: .75rem; align-items: center; }
.rating-bar__label { font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: center; gap: .2rem; }
.rating-bar__label .icon { color: var(--oak); width: 12px; height: 12px; }
.rating-bar__track { height: 7px; background: var(--paper-3); border-radius: var(--r-pill); overflow: hidden; }
.rating-bar__fill  { height: 100%; background: linear-gradient(90deg, var(--oak), var(--accent));
                     border-radius: var(--r-pill); width: 0;
                     transition: width 1.1s var(--ease-out); }
.rating-bar__pct   { font-size: var(--fs-xs); color: var(--muted-2); text-align: right;
                     font-variant-numeric: tabular-nums; }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: clamp(1rem, .5rem + 1.2vw, 1.5rem);
}
.review {
  display: flex; flex-direction: column;
  padding: clamp(1.35rem, 1rem + 1vw, 1.8rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.review:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.review__quote { position: absolute; }
.review__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.review__date { font-size: var(--fs-2xs); color: var(--muted-2); white-space: nowrap; }
.review__title { margin-top: .85rem; font-size: 1.1rem; letter-spacing: -.015em; }
.review__body {
  margin-top: .55rem; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.68;
  white-space: pre-line; overflow-wrap: anywhere;
}
.review__meta {
  margin-top: 1.2rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: .7rem;
}
.review__avatar {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--oak-soft), var(--oak));
  color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
}
.review__who strong { display: block; font-size: var(--fs-sm); color: var(--ink); }
.review__who small  { display: block; font-size: var(--fs-2xs); color: var(--muted); }
.review__verified { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem;
                    font-size: var(--fs-2xs); color: var(--ok); font-weight: 600; }

.review__reply {
  margin-top: 1rem;
  padding: .9rem 1rem;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.review__reply-head {
  display: flex; align-items: center; gap: .4rem;
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .35rem;
}
.review__reply p { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.6; white-space: pre-line; }

/* Empty state that doesn't look broken. */
.empty {
  text-align: center;
  padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 1.5rem;
  background: var(--surface);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-xl);
}
.empty__ic {
  width: 60px; height: 60px; margin: 0 auto 1.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--oak-tint); color: var(--accent);
}
.empty h3 { font-size: 1.32rem; }
.empty p  { margin: .6rem auto 0; max-width: 46ch; color: var(--muted); font-size: var(--fs-sm); }
.empty__actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* Star picker used when writing a review. */
.star-pick { display: flex; gap: .3rem; }
.star-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-pick label {
  cursor: pointer; color: var(--line-3); padding: .15rem;
  transition: transform var(--t-fast) var(--ease-back), color var(--t-fast) var(--ease);
}
.star-pick label svg { width: 30px; height: 30px; }
.star-pick label:hover { transform: scale(1.15); }
.star-pick.is-set label.is-on,
.star-pick label.is-hover { color: var(--oak); }
.star-pick input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.star-pick__out { font-size: var(--fs-sm); color: var(--muted); margin-left: .6rem; align-self: center; }

/* --- FAQ ----------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line-2); }
.faq__item { border-bottom: 1px solid var(--line-2); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: clamp(1.1rem, .9rem + .8vw, 1.6rem) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, .95rem + .45vw, 1.22rem);
  font-weight: 600; color: var(--ink);
  letter-spacing: -.015em;
  transition: color var(--t-fast) var(--ease);
}
.faq__q:hover { color: var(--accent); }
.faq__sign {
  position: relative; flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%;
  transition: all var(--t-base) var(--ease);
}
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute;
  background: currentColor; border-radius: 2px;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease);
}
.faq__sign::before { width: 13px; height: 1.6px; }
.faq__sign::after  { width: 1.6px; height: 13px; }
.faq__item.is-open .faq__sign { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.faq__item.is-open .faq__sign::after { transform: rotate(90deg); opacity: 0; }
.faq__a { overflow: hidden; height: 0; transition: height var(--t-base) var(--ease-out); }
.faq__a-inner { padding-bottom: 1.5rem; padding-right: clamp(0px, 4vw, 60px); }
.faq__a p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.7; max-width: 68ch; }

/* --- Scrolling list of areas served -------------------------------------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: 2.4rem; padding-right: 2.4rem; }
.marquee__item {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: clamp(1rem, .9rem + .6vw, 1.35rem);
  font-weight: 500; color: var(--muted); white-space: nowrap;
}
.marquee__item .icon { color: var(--oak); opacity: .7; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --- Trust / guarantee band ---------------------------------------------- */
.guarantees { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
              gap: clamp(1rem, .5rem + 1.5vw, 2rem); }
.guarantee { display: flex; gap: 1rem; align-items: flex-start; }
.guarantee__ic {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.07);
  color: var(--oak);
  border: 1px solid rgba(255,255,255,.12);
}
.section--dark .guarantee h3 { font-size: 1.06rem; }
.guarantee p { margin-top: .35rem; font-size: var(--fs-xs); line-height: 1.6; color: var(--on-dark-mute); }

/* --- Reveal-on-scroll ---------------------------------------------------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .72s var(--ease-out), transform .72s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }


/* ==========================================================================
   13  AUTH PAGES
   ========================================================================== */
.auth {
  min-height: calc(100svh - var(--header-h) - var(--topbar-h));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
}
.auth__form-side {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(2rem, 1rem + 4vw, 4.5rem) var(--gutter);
}
.auth__box { width: min(100%, 440px); }
.auth__box > * + * { margin-top: 1.25rem; }
.auth__head h1 { font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.4rem); }
.auth__head p  { margin-top: .6rem; color: var(--muted); font-size: var(--fs-sm); }
.auth__form { display: grid; gap: 1.05rem; }
.auth__alt {
  text-align: center; font-size: var(--fs-sm); color: var(--muted);
  padding-top: .25rem;
}
.auth__alt a { color: var(--accent); font-weight: 600; }
.auth__alt a:hover { text-decoration: underline; }
.auth__legal { font-size: var(--fs-xs); color: var(--muted-2); text-align: center; line-height: 1.55; }
.auth__legal a { color: var(--muted); text-decoration: underline; }

.auth__or { display: flex; align-items: center; gap: 1rem; color: var(--muted-2); font-size: var(--fs-xs); }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* The decorative panel beside the form — a wall of real materials. */
.auth__aside {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  display: flex; align-items: flex-end;
  padding: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  color: var(--on-dark);
}
.auth__tiles {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr;
  opacity: .5;
}
.auth__tiles .swatch { border-radius: 0; }
.auth__aside::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(23,19,15,.96) 12%, rgba(23,19,15,.55) 55%, rgba(23,19,15,.35));
}
.auth__aside-content { position: relative; z-index: 2; max-width: 42ch; }
.auth__aside-content h2 { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); }
.auth__aside-content p  { margin-top: .8rem; color: var(--on-dark-mute); font-size: var(--fs-sm); line-height: 1.65; }
.auth__aside-list { margin-top: 1.5rem; display: grid; gap: .65rem; }
.auth__aside-list li { display: flex; gap: .6rem; align-items: flex-start;
                       font-size: var(--fs-sm); color: var(--on-dark); }
.auth__aside-list .icon { color: var(--oak); flex: none; margin-top: .18rem; }

/* Verification-code step */
.verify { text-align: center; }
.verify__to {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .85rem;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); color: var(--ink); font-weight: 500;
  margin-top: .9rem;
}
.verify__to .icon { color: var(--accent); }
.verify__form { margin-top: 1.75rem; display: grid; gap: 1.25rem; }
.verify__resend { font-size: var(--fs-xs); color: var(--muted); }
.verify__resend button {
  color: var(--accent); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px;
}
.verify__resend button[disabled] { color: var(--muted-2); text-decoration: none; cursor: default; }
.verify__timer { font-variant-numeric: tabular-nums; }

/* Panel that appears when mail isn't configured yet (development only). */
.dev-code {
  margin-top: 1.1rem;
  padding: .9rem 1.05rem;
  border: 1px dashed var(--warn);
  background: var(--warn-bg);
  border-radius: var(--r-sm);
  text-align: left;
}
.dev-code strong { display: block; font-size: var(--fs-xs); color: var(--warn); margin-bottom: .3rem; }
.dev-code p { font-size: var(--fs-xs); color: var(--warn); line-height: 1.55; }
.dev-code code { font-family: var(--font-mono); font-weight: 700; font-size: 1rem; letter-spacing: .12em; }


/* ==========================================================================
   14  DASHBOARD  (owner only — the server checks on every request)
   ========================================================================== */
.dash { padding-block: clamp(1.75rem, 1rem + 2.5vw, 3rem) var(--section-y); }

.dash__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.dash__head h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem); }
.dash__head p  { margin-top: .4rem; color: var(--muted); font-size: var(--fs-sm); }

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr));
  gap: clamp(.75rem, .4rem + 1vw, 1.15rem);
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.kpi {
  padding: 1.15rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.kpi:hover { border-color: var(--line-2); box-shadow: var(--sh-sm); }
.kpi__top { display: flex; align-items: center; gap: .5rem; color: var(--muted); }
.kpi__top .icon { color: var(--accent); }
.kpi__label { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.kpi__value {
  display: block; margin-top: .55rem;
  font-family: var(--font-display); font-size: 2.1rem; font-weight: 600;
  color: var(--ink); line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.kpi__sub { display: block; margin-top: .35rem; font-size: var(--fs-xs); color: var(--muted-2); }
.kpi--alert { border-color: var(--warn); background: var(--warn-bg); }
.kpi--alert .kpi__top, .kpi--alert .kpi__top .icon, .kpi--alert .kpi__value { color: var(--warn); }

.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--line-2); margin-bottom: 1.75rem;
        overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  padding: .8rem 1.05rem;
  font-size: var(--fs-sm); font-weight: 500; color: var(--muted);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.tab:hover { color: var(--ink); }
.tab.is-on { color: var(--ink); font-weight: 600; }
.tab::after {
  content: ""; position: absolute; left: .6rem; right: .6rem; bottom: -1px;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--t-base) var(--ease-out);
}
.tab.is-on::after { transform: scaleX(1); }
.tab__count {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 .35rem; margin-left: .4rem;
  border-radius: var(--r-pill);
  background: var(--paper-3); color: var(--ink-2);
  font-size: var(--fs-2xs); font-weight: 700;
}
.tab.is-on .tab__count { background: var(--ink); color: var(--on-dark); }
.tab__count--alert { background: var(--warn); color: #fff; }

.panel[hidden] { display: none; }

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { min-width: 720px; font-size: var(--fs-sm); }
.table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--paper-2);
  padding: .8rem 1rem;
  text-align: left;
  font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table tbody td { padding: .95rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--t-fast) var(--ease); }
.table tbody tr:hover { background: var(--paper); }
.table__strong { font-weight: 600; color: var(--ink); }
.table__sub { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: .15rem; }
.table__actions { display: flex; gap: .35rem; flex-wrap: wrap; }
.table__msg { max-width: 380px; white-space: pre-line; overflow-wrap: anywhere;
              color: var(--muted); font-size: var(--fs-xs); line-height: 1.55; }

.mini-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .38rem .65rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  background: var(--surface);
  font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-2);
  white-space: nowrap;
  transition: all var(--t-fast) var(--ease);
}
.mini-btn:hover { border-color: var(--ink); background: var(--paper-2); }
.mini-btn--ok     { color: var(--ok); }
.mini-btn--ok:hover     { background: var(--ok);     color: #fff; border-color: var(--ok); }
.mini-btn--danger { color: var(--danger); }
.mini-btn--danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.mini-btn[disabled] { opacity: .45; pointer-events: none; }

.dash-empty { padding: 3rem 1.5rem; text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.dash-empty .icon { color: var(--line-3); margin: 0 auto .75rem; }

.reply-box { display: grid; gap: .5rem; margin-top: .6rem; }
.reply-box textarea { min-height: 72px; font-size: var(--fs-xs); }

.dash-guard {
  display: grid; place-items: center;
  min-height: 62svh; text-align: center; padding: var(--gutter);
}
.dash-guard__ic {
  width: 68px; height: 68px; margin: 0 auto 1.25rem;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--danger-bg); color: var(--danger);
}


/* ==========================================================================
   15  FOOTER
   ========================================================================== */
.site-footer { position: relative; z-index: 1; background: var(--ink); color: var(--on-dark-mute); }

.footer-cta {
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(185, 138, 75, .22), transparent 55%),
    linear-gradient(180deg, #1E1913, var(--ink));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
  align-items: center;
  padding-block: clamp(2.75rem, 2rem + 3.5vw, 4.75rem);
}
.footer-cta h2 { color: #fff; margin-top: .7rem; font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem); }
.footer-cta .lede { color: var(--on-dark-mute); margin-top: .9rem; }
.footer-cta .eyebrow { color: var(--oak); }
.footer-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.footer-cta .btn--primary { --btn-bg: var(--on-dark); --btn-fg: var(--ink); --btn-bd: var(--on-dark); }
.footer-cta .btn--primary:hover { --btn-bg: #fff; --btn-bd: #fff; }

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  padding-block: clamp(2.5rem, 2rem + 3vw, 4rem);
}
.brand--footer .brand__name { color: #fff; }
.brand--footer .brand__mark { color: var(--oak); }
.footer__blurb { margin-top: 1.1rem; font-size: var(--fs-sm); line-height: 1.65; max-width: 38ch; }
.footer__license {
  margin-top: 1rem;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .8rem;
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-pill);
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--on-dark);
}
.footer__license .icon { color: var(--oak); }

.footer__contact { margin-top: 1.4rem; display: grid; gap: .7rem; }
.footer__contact li { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--fs-sm); }
.footer__contact .icon { color: var(--oak); flex: none; margin-top: .22rem; }
.footer__contact a { transition: color var(--t-fast) var(--ease); }
.footer__contact a:hover { color: #fff; }

.footer__title {
  font-family: var(--font-body);
  font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff; margin-bottom: 1.1rem;
}
.footer__title--gap { margin-top: 2rem; }
.footer__links { display: grid; gap: .6rem; }
.footer__links a {
  font-size: var(--fs-sm); position: relative;
  transition: color var(--t-fast) var(--ease), padding-left var(--t-base) var(--ease-out);
}
.footer__links a:hover { color: #fff; padding-left: .45rem; }
.footer__links a::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 0; height: 1px; background: var(--oak);
  transition: width var(--t-base) var(--ease-out);
}
.footer__links a:hover::before { width: .28rem; }

.footer__hours { display: grid; gap: .5rem; }
.footer__hours li { display: flex; justify-content: space-between; gap: .75rem; font-size: var(--fs-xs); }
.footer__hours li span:last-child { color: var(--on-dark); white-space: nowrap; }

.footer__areas {
  padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer__areas p { font-size: var(--fs-xs); line-height: 1.9; color: var(--muted-2); }

.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); }
.footer__bottom-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem;
  padding-block: 1.4rem;
  font-size: var(--fs-xs); color: var(--muted-2);
}
.footer__made { font-family: var(--font-display); font-style: italic; }


/* ==========================================================================
   16b  UTILITIES
   ========================================================================== */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.center     { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.full-bleed-top { margin-top: calc(var(--section-y) * -1); }

.page-head {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.75rem, 1rem + 2.5vw, 3rem);
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.page-head::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 120% at 88% 0%, rgba(233, 214, 183, .5), transparent 60%);
}
.page-head__inner { position: relative; z-index: 1; max-width: 68ch; }
.page-head h1 { margin-top: .7rem; }
.page-head .lede { margin-top: 1rem; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
          font-size: var(--fs-xs); color: var(--muted-2); }
.crumbs a { transition: color var(--t-fast) var(--ease); }
.crumbs a:hover { color: var(--accent); }
.crumbs .icon { opacity: .5; }

.prose > * + * { margin-top: 1.1rem; }
.prose p  { color: var(--muted); line-height: 1.75; max-width: 68ch; }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.8rem; font-size: 1.22rem; }
.prose ul { display: grid; gap: .55rem; }
.prose ul li { display: flex; gap: .6rem; align-items: flex-start; color: var(--muted); }
.prose ul .icon { color: var(--accent); flex: none; margin-top: .28rem; }
.prose strong { color: var(--ink); }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
.show-md, .show-sm { display: none !important; }

@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; }
  .matboard { max-width: 440px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__col--brand { grid-column: 1 / -1; }
  .auth { grid-template-columns: 1fr; }
  .auth__aside { display: none; }
}

@media (max-width: 940px) {
  :root { --header-h: 66px; }
  .hide-md { display: none !important; }
  .show-md { display: grid !important; }
  .nav { display: none; }
  .svc-group__head { grid-template-columns: 1fr; }
  .section-head--split { grid-template-columns: 1fr; align-items: start; }
  .footer-cta__inner { grid-template-columns: 1fr; }
  .feature--flip > :first-child { order: 0; }
  .rating-summary { grid-template-columns: 1fr; }
  .shot--wide { grid-column: span 1; aspect-ratio: 4 / 3; }
}

@media (max-width: 720px) {
  .hide-sm { display: none !important; }
  .show-sm { display: flex !important; }

  /* --- Phone header -------------------------------------------------------
     There isn't room for the brand, the number AND the menu button, and the
     sticky bar at the bottom of the screen already has a big Call button.
     So the header keeps the brand and the menu, and drops the duplicate. */
  .phone-btn--header { display: none; }
  .brand__name { font-size: 1rem; }
  .brand__sub  { font-size: .58rem; letter-spacing: .08em; }
  .navbar__inner { gap: .5rem; }

  /* The info strip only has room for one thing. Open-or-closed is the one
     people actually want. */
  .topbar__item, .topbar__sep, .topbar__link, .topbar__grow { display: none; }
  .topbar__item--hours { display: inline-flex; }
  .topbar__inner { justify-content: center; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-strip__item:nth-child(3) { border-left: 0; }
  .stat-strip__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .process__item { grid-template-columns: 1fr; gap: .35rem; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom-inner { justify-content: center; text-align: center; }
  .hero__actions .btn, .hero__actions .phone-btn { flex: 1 1 100%; }
  .matboard__note { right: 0; width: min(190px, 62%); }
}

@media (max-width: 460px) {
  .matboard { max-width: 340px; }
  .matboard__note { display: none; }
  .code-input { gap: .35rem; }
}

/* Touch devices get the sticky call bar and room for it at the bottom. */
@media (hover: none) and (pointer: coarse) {
  .callbar { display: grid; }
  body { padding-bottom: 62px; }
  .to-top { bottom: calc(70px + env(safe-area-inset-bottom)); }
  .toasts { bottom: calc(70px + env(safe-area-inset-bottom)); }
  .site-footer { padding-bottom: 0; }
}

/* Pointer devices never see the tap-to-call bar; hover effects stay on. */
@media (hover: hover) and (pointer: fine) {
  .callbar { display: none !important; }
}


/* ==========================================================================
   17  MOTION, PRINT & ACCESSIBILITY
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .intro { display: none !important; }
  .marquee__track { animation: none; }
  .matboard__note { animation: none; }
}

@media (prefers-contrast: more) {
  :root { --muted: #57504A; --muted-2: #6B6259; --line: #C9BCA9; --line-2: #B2A18A; }
  .btn { border-width: 2px; }
}

@media print {
  .site-header, .site-footer, .callbar, .msheet, .to-top, .toasts,
  .intro, .page-veil, .hero__glow, .btn, .phone-btn { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .section { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; color: #555; }
}


/* ==========================================================================
   Device-specific copy
   --------------------------------------------------------------------------
   Some sentences are only true on one kind of device ("tap to dial" vs
   "click to copy"). site.js puts .can-call or .no-call on <html>; these two
   rules make sure the visitor only ever reads the sentence that applies to
   the thing in their hand.
   ========================================================================== */
.can-call-only, .no-call-only { display: none; }
html.can-call .can-call-only { display: inline; }
html.no-call  .no-call-only  { display: inline; }
/* With JavaScript off we can't detect the device, so show the neutral one. */
html.no-js .no-call-only { display: inline; }


/* ==========================================================================
   18  INSTANT ESTIMATE CALCULATOR
   ========================================================================== */
.calc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  overflow: hidden;
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.calc__head {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.25rem, 1rem + 2vw, 2.5rem) 0;
  max-width: 62ch;
}
.calc__head h2 { margin-top: .6rem; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); }
.calc__head .lede { margin-top: .8rem; font-size: var(--fs-sm); }

/* --- Flooring / Kitchen switch ------------------------------------------- */
.calc__tabs {
  display: flex; gap: .4rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 2vw, 2.5rem) 0;
}
.calc-tab {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.25rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  border-bottom-color: transparent;
  background: var(--paper-2);
  font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
  transition: all var(--t-fast) var(--ease);
  position: relative; top: 1px;
}
.calc-tab .icon { color: var(--muted-2); transition: color var(--t-fast) var(--ease); }
.calc-tab:hover { color: var(--ink); }
.calc-tab.is-on {
  background: var(--surface); color: var(--ink);
  border-color: var(--line-2); border-bottom-color: var(--surface);
}
.calc-tab.is-on .icon { color: var(--accent); }

.calc__body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-top: 1px solid var(--line-2);
  margin-top: -1px;
}

.calc__inputs { display: grid; gap: clamp(1.1rem, .8rem + 1vw, 1.6rem); align-content: start; }
.calc-panel   { display: grid; gap: clamp(1.1rem, .8rem + 1vw, 1.6rem); }
.calc-panel[hidden] { display: none; }

.calc-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
[data-show-when][hidden] { display: none; }

/* --- Number + unit ------------------------------------------------------- */
.calc-measure { position: relative; }
.calc-measure .input { padding-right: 4.5rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.calc-measure__unit {
  position: absolute; right: .95rem; top: 50%; transform: translateY(-50%);
  font-size: var(--fs-xs); font-weight: 600; color: var(--muted-2);
  pointer-events: none; letter-spacing: .02em;
}

/* --- Slider -------------------------------------------------------------- */
.calc-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 5px; margin-top: .9rem;
  background: linear-gradient(90deg, var(--oak-soft), var(--paper-3));
  border-radius: var(--r-pill);
  outline: none; cursor: pointer;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--surface);
  box-shadow: var(--sh-md); cursor: grab;
  transition: transform var(--t-fast) var(--ease-back);
}
.calc-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
.calc-slider::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--surface);
  box-shadow: var(--sh-md); cursor: grab;
}
.calc-scale {
  display: flex; justify-content: space-between;
  margin-top: .4rem;
  font-size: var(--fs-2xs); color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}

.calc-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.calc-presets .chip { font-size: var(--fs-2xs); padding: .4rem .75rem; }

/* --- Optional extras ----------------------------------------------------- */
.calc-group {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: .3rem 1rem 1rem;
  margin: 0;
  background: var(--surface-sunk);
}
.calc-group legend {
  padding: 0 .5rem;
  font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.calc-group--adj { background: var(--oak-tint); border-color: var(--oak-soft); }

.calc-extra { border-bottom: 1px solid var(--line); }
.calc-extra:last-child { border-bottom: 0; }

.calc-extra__main {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .8rem .5rem;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease);
}
.calc-extra__main:hover { background: rgba(255,255,255,.7); }
.calc-extra__main input {
  width: 19px; height: 19px; flex: none; margin-top: .1rem;
  accent-color: var(--accent); cursor: pointer;
}
.calc-extra__main--slim { border-bottom: 1px solid rgba(185,138,75,.22); }
.calc-group--adj .calc-extra__main:last-child { border-bottom: 0; }

.calc-extra__text { flex: 1; min-width: 0; }
.calc-extra__text strong { display: block; font-size: var(--fs-sm); color: var(--ink); font-weight: 600; }
.calc-extra__text small  { display: block; font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; margin-top: .12rem; }
.calc-extra__price {
  flex: none; align-self: center;
  font-size: var(--fs-2xs); font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  text-align: right;
}

.calc-qty { display: flex; align-items: center; gap: .5rem; padding: 0 .5rem .85rem 2.4rem; }
.calc-qty[hidden] { display: none; }
.calc-qty .input { max-width: 110px; min-height: 40px; padding: .45rem .7rem;
                   font-variant-numeric: tabular-nums; font-weight: 600; }
.calc-qty span { font-size: var(--fs-xs); color: var(--muted); }

/* --- The running total --------------------------------------------------- */
.calc__result { position: relative; }

.calc-total {
  position: sticky; top: calc(var(--header-h) + 18px);
  padding: clamp(1.35rem, 1rem + 1.4vw, 1.9rem);
  background: var(--ink);
  color: var(--on-dark-mute);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.calc-total::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(110% 90% at 88% 0%, rgba(185,138,75,.28), transparent 58%);
}
.calc-total > * { position: relative; }

.calc-total__label {
  display: block;
  font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--oak);
}
.calc-total__figure {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem;
  margin-top: .6rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.1rem + 2.1vw, 2.5rem);
  font-weight: 600; color: #fff;
  letter-spacing: -.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.calc-total__dash { color: var(--oak); font-weight: 400; }
.calc-total__sub {
  margin-top: .55rem;
  font-size: var(--fs-xs); color: var(--on-dark-mute); line-height: 1.5;
}
.calc-total.is-empty .calc-total__figure { opacity: .35; }

.calc-breakdown { margin-top: 1.25rem; display: grid; gap: .1rem; }
.calc-breakdown:empty { display: none; }
.calc-line {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: .6rem 0;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: var(--fs-xs);
  animation: calcLineIn .3s var(--ease-out) both;
}
@keyframes calcLineIn { from { opacity: 0; transform: translateY(-4px); } }
.calc-line__label { color: var(--on-dark); line-height: 1.4; }
.calc-line__label small {
  display: block; color: var(--muted-2); font-size: var(--fs-2xs); margin-top: .1rem;
}
.calc-line__value {
  flex: none; color: #fff; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.calc-line--adj .calc-line__label,
.calc-line--adj .calc-line__value { color: var(--oak); }

.calc-total__actions { margin-top: 1.4rem; display: grid; gap: .55rem; }
.calc-total__actions .btn--primary { --btn-bg: var(--oak); --btn-fg: var(--ink); --btn-bd: var(--oak); }
.calc-total__actions .btn--primary:hover { --btn-bg: #CFA063; --btn-bd: #CFA063; }
.calc-total__actions .btn--outline {
  --btn-bg: transparent; --btn-fg: var(--on-dark); --btn-bd: rgba(255,255,255,.24);
}
.calc-total__actions .btn--outline:hover { --btn-bd: #fff; --btn-bg: rgba(255,255,255,.07); }

.calc-total__fine {
  display: flex; gap: .55rem; align-items: flex-start;
  margin-top: 1.25rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: var(--fs-2xs); line-height: 1.55; color: var(--muted-2);
}
.calc-total__fine .icon { flex: none; color: var(--oak); margin-top: .1rem; }
.calc-total__fine strong { color: var(--on-dark); }

/* --- Banner on the form once a range has been attached ------------------- */
.quote-attached {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .9rem 1.1rem; margin-bottom: 1.25rem;
  background: var(--oak-tint);
  border: 1px solid var(--oak-soft);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--accent-ink); line-height: 1.5;
}
.quote-attached[hidden] { display: none; }
.quote-attached .icon { flex: none; color: var(--accent); margin-top: .12rem; }
.quote-attached strong { font-variant-numeric: tabular-nums; }

@media (max-width: 1080px) {
  .calc__body { grid-template-columns: 1fr; }
  .calc-total { position: static; }
}
@media (max-width: 620px) {
  .calc-pair { grid-template-columns: 1fr; }
  .calc__tabs { padding-inline: 1rem; }
  .calc-tab { flex: 1; justify-content: center; padding-inline: .75rem; }
  .calc-extra__price { font-size: 10px; }
}

/* Calculator range shown against each request in the dashboard. */
.table__quote {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-sm); font-weight: 600; color: var(--accent);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.table__picked {
  display: block; margin-top: .4rem; padding-top: .4rem;
  border-top: 1px dashed var(--line-2);
  font-size: 11px; line-height: 1.45; color: var(--muted-2);
}

.hero__calc-link { margin-top: 1rem !important; }
.hero__calc-link .link { font-size: var(--fs-sm); }