/* ==========================================================================
   SELF-HOSTED FONTS — no external requests, no third-party dependency.

   Downloaded from Google Fonts and served from assets/fonts/. All families
   here are SIL Open Font License, which permits self-hosting.

   Where Google serves a VARIABLE font, one file covers every weight and the
   rule below carries a weight RANGE instead of a single value.

   The latin-ext faces are effectively free: unicode-range means a browser
   only fetches that file if a character in the range actually appears, so
   they exist purely so an accented name renders correctly rather than
   falling back to a system font mid-word.

   Regenerate with scratchpad/selfhost_fonts.py if the design changes.
   ========================================================================== */
@font-face{
  font-family:'Cormorant Garamond';font-style:italic;font-weight:400 500;font-display:swap;
  src:url(fonts/cormorant-garamond-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';font-style:italic;font-weight:400 500;font-display:swap;
  src:url(fonts/cormorant-garamond-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:300 600;font-display:swap;
  src:url(fonts/cormorant-garamond-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:300 600;font-display:swap;
  src:url(fonts/cormorant-garamond-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;
  src:url(fonts/jost-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;
  src:url(fonts/jost-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*!
 * Karla's Cleaning Service LLC — demonstration website
 * Copyright (c) 2026 Naugatuck Web Studio. All rights reserved.
 *
 * Prepared as an unsolicited spec proposal for Karla's Cleaning Service LLC,
 * Naugatuck CT. Original work and property of Naugatuck Web Studio. Provided
 * for review only. No licence to copy, reuse, host, modify or redistribute is
 * granted unless and until ownership is transferred in writing under a signed
 * agreement.
 *
 * Enquiries: spellframe.app@gmail.com
 */
/* ==========================================================================
   KARLA'S CLEANING SERVICE — Design System
   Naugatuck, CT · service-area business (no storefront)

   Brand read: white-glove housekeeping. The reference points are boutique
   hotel housekeeping and a spa, not a supply closet — so the palette is
   linen and ivory, deep evergreen ink, brushed brass for anything that
   costs money or asks for a click, and eucalyptus sage for the soft work.
   Nothing is "cleaning-supply blue". Nothing is a cartoon bubble.
   ========================================================================== */

:root{
  /* Surfaces */
  --paper:#FFFFFF;
  --ivory:#FBF8F3;
  --linen:#F4EDE2;
  --linen-2:#EBE2D4;
  --sage-tint:#E6F0EA;
  --forest:#12332A;
  --forest-2:#1B4638;
  --forest-3:#265A48;

  /* Ink
     --ink-3 is the quiet grey used for every caption, label, meta line and
     placeholder on the site. It is set at the darkest value that still reads
     as "quiet": 5.1:1 on ivory, which clears AA for the small sizes it is
     used at. Do not lighten it — a dozen labels depend on this one value. */
  --ink:#16241F;
  --ink-2:#4A5C55;
  --ink-3:#5E6E67;
  --ink-inv:#EFF5F1;
  --ink-inv-2:#B4C9BF;

  /* Signal
     --brass-dp and --sage-dp are the text-safe ends of the two accent ramps;
     --brass and --sage are for fills, icons and rules, never body text. */
  --brass:#B08A3E;
  --brass-hi:#DDBA72;
  --brass-dp:#7C6027;
  --sage:#6F9E8C;
  --sage-dp:#3F6A5A;
  --blush:#C58E7A;

  /* Lines */
  --line:#E7DFD2;
  --line-2:#D6CBB8;
  --line-inv:rgba(239,245,241,.16);

  /* Depth */
  --sh-s:0 1px 2px rgba(18,51,42,.05), 0 4px 14px -8px rgba(18,51,42,.16);
  --sh-m:0 2px 6px rgba(18,51,42,.04), 0 22px 48px -24px rgba(18,51,42,.30);
  --sh-l:0 40px 90px -40px rgba(18,51,42,.48);
  --ring:0 0 0 4px rgba(176,138,62,.22);

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-snap:cubic-bezier(.16,1,.3,1);

  /* Type */
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Shape + layout */
  --r:14px;
  --r-sm:9px;
  --r-lg:28px;
  --r-pill:999px;
  --wrap:1200px;
  --gut:clamp(20px,5vw,64px);
  --bar-h:80px;
}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--bar-h) + 24px);
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

::selection{background:var(--brass-hi);color:var(--forest)}

:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--forest);color:var(--ink-inv);
  padding:14px 22px;border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{left:0}

/* ============================================================== TYPE ===== */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.012em;
  margin:0;
  color:var(--forest);
}

.h-xl{font-size:clamp(42px,5.6vw,74px)}
.h-lg{font-size:clamp(34px,4.4vw,56px)}
.h-md{font-size:clamp(28px,3.4vw,40px)}
.h-sm{font-size:clamp(22px,2.4vw,27px);letter-spacing:-.005em}

.serif-it{font-style:italic;color:var(--brass-dp)}

.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--brass-dp);
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin:0 0 20px;
}
.eyebrow::before{
  content:'';
  width:34px;height:1px;
  background:linear-gradient(90deg,transparent,var(--brass));
}
.eyebrow--center::after{
  content:'';
  width:34px;height:1px;
  background:linear-gradient(90deg,var(--brass),transparent);
}
.eyebrow--inv{color:var(--brass-hi)}
.eyebrow--inv::before{background:linear-gradient(90deg,transparent,var(--brass-hi))}
.eyebrow--inv.eyebrow--center::after{background:linear-gradient(90deg,var(--brass-hi),transparent)}

.lede{
  font-size:clamp(17px,1.9vw,20px);
  line-height:1.68;
  color:var(--ink-2);
  max-width:60ch;
  margin:22px 0 0;
  font-weight:300;
}
.lede--inv{color:var(--ink-inv-2)}

p{margin:0 0 18px}
p:last-child{margin-bottom:0}

/* ============================================================== LAYOUT === */

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.sec{padding:clamp(72px,10vw,130px) 0;position:relative}
.sec--tight{padding:clamp(56px,7vw,88px) 0}
.sec--linen{background:var(--linen)}
.sec--paper{background:var(--paper)}
.sec--forest{background:var(--forest);color:var(--ink-inv-2)}
.sec--forest h1,.sec--forest h2,.sec--forest h3,.sec--forest h4{color:var(--ink-inv)}

.sec__head{max-width:64ch;margin-bottom:clamp(38px,5vw,60px)}
.sec__head--center{text-align:center;margin-inline:auto}
.sec__head--center .eyebrow{justify-content:center}
.sec__head--center .lede{margin-inline:auto}

.rule{
  height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,var(--line-2),transparent);
}

/* Torn-paper style seam between an ivory and a forest section. */
.seam{
  height:clamp(40px,6vw,80px);
  background:var(--forest);
  position:relative;
}
.seam::after{
  content:'';
  position:absolute;inset:0;
  background:var(--ivory);
  border-radius:0 0 50% 50%/0 0 100% 100%;
}
.seam--up{background:var(--ivory)}
.seam--up::after{background:var(--forest);border-radius:50% 50% 0 0/100% 100% 0 0;top:auto;height:100%}

/* ============================================================== BUTTONS == */

.btn{
  --btn-bg:var(--forest);
  --btn-fg:var(--ink-inv);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 30px;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn svg{width:17px;height:17px;flex:none}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-m)}
.btn:active{transform:translateY(0)}

/* The squeegee pass. A single band of light wipes the button on hover — the
   same gesture the whole brand is built on. */
.btn::after{
  content:'';
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.42) 48%,transparent 66%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease);
}
.btn:hover::after{transform:translateX(120%)}

/* The gradient stops short of --brass-dp on purpose. Running it all the way
   down put the label at 3.5:1 against the bottom-right corner of the button;
   #A8813A is the darkest stop that keeps the near-black label above 4.9:1
   everywhere on the fill while still reading as brushed metal. */
.btn--primary{
  --btn-bg:linear-gradient(135deg,var(--brass-hi),var(--brass) 52%,#A8813A);
  --btn-fg:#1C1406;
  box-shadow:0 10px 26px -12px rgba(138,107,44,.7);
}
.btn--ghost{
  --btn-bg:transparent;
  --btn-fg:var(--forest);
  border-color:var(--line-2);
}
.btn--ghost:hover{border-color:var(--forest);background:rgba(18,51,42,.04)}
.btn--ghost-inv{
  --btn-bg:transparent;
  --btn-fg:var(--ink-inv);
  border-color:var(--line-inv);
}
.btn--ghost-inv:hover{border-color:var(--brass-hi);background:rgba(239,245,241,.07)}
.btn--paper{--btn-bg:var(--paper);--btn-fg:var(--forest)}
.btn--sm{padding:11px 20px;font-size:12.5px;letter-spacing:.07em}
.btn--wide{width:100%}

.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.btn-row--center{justify-content:center}

.tlink{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass-dp);text-decoration:none;
  border-bottom:1px solid rgba(176,138,62,.4);
  padding-bottom:3px;
  transition:gap .3s var(--ease),border-color .3s,color .3s;
}
.tlink:hover{gap:15px;border-color:var(--brass);color:var(--forest)}
.tlink--inv{color:var(--brass-hi);border-color:rgba(221,186,114,.4)}
.tlink--inv:hover{color:var(--ink-inv);border-color:var(--brass-hi)}
.tlink svg{width:15px;height:15px}

/* ============================================================== HEADER === */

.progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--sage),var(--brass-hi),var(--brass));
  transition:width .12s linear;
}

.topbar{
  position:sticky;top:0;z-index:100;
  height:var(--bar-h);
  display:flex;align-items:center;
  background:rgba(251,248,243,.82);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:box-shadow .4s var(--ease),border-color .4s,background .4s;
}
.topbar.is-stuck{border-bottom-color:var(--line);box-shadow:0 8px 30px -22px rgba(18,51,42,.5)}
.topbar__in{
  width:100%;max-width:var(--wrap);
  margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;gap:26px;
}

.brand{display:flex;align-items:center;gap:13px;text-decoration:none;margin-right:auto}
.brand__mark{width:44px;height:44px;flex:none;border-radius:12px;box-shadow:var(--sh-s)}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{
  font-family:var(--display);
  font-size:23px;font-weight:600;letter-spacing:.01em;
  color:var(--forest);
}
.brand__name em{font-style:normal;color:var(--brass-dp)}
.brand__sub{
  font-size:10.5px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);margin-top:5px;white-space:nowrap;
}

.navlinks{display:flex;gap:2px}
.navlink{
  position:relative;
  padding:9px 13px;
  font-size:14px;font-weight:400;letter-spacing:.02em;
  color:var(--ink-2);text-decoration:none;
  white-space:nowrap;
  border-radius:var(--r-sm);
  transition:color .3s;
}
.navlink::after{
  content:'';position:absolute;left:13px;right:13px;bottom:2px;height:1px;
  background:var(--brass);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.navlink:hover{color:var(--forest)}
.navlink:hover::after,.navlink[aria-current]::after{transform:scaleX(1)}
.navlink[aria-current]{color:var(--forest);font-weight:500}

.topbar__cta{display:flex;align-items:center;gap:10px}
.btn--phone{font-family:var(--sans);font-variant-numeric:tabular-nums}

.menu{
  display:none;width:44px;height:44px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:transparent;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.menu span{
  width:18px;height:1.5px;background:var(--forest);border-radius:2px;
  transition:transform .4s var(--ease),opacity .3s;
}
.topbar.is-open .menu span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.topbar.is-open .menu span:nth-child(2){opacity:0}
.topbar.is-open .menu span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.sheet{
  position:fixed;inset:var(--bar-h) 0 auto;z-index:99;
  background:var(--ivory);
  border-bottom:1px solid var(--line);
  padding:14px var(--gut) 30px;
  display:flex;flex-direction:column;
  transform:translateY(-118%);
  transition:transform .5s var(--ease);
  box-shadow:var(--sh-m);
}
.sheet.is-open{transform:translateY(0)}
.sheet a{
  padding:16px 0;
  font-family:var(--display);font-size:26px;
  color:var(--forest);text-decoration:none;
  border-bottom:1px solid var(--line);
}
.sheet .sheet__meta{
  font-family:var(--sans);font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brass-dp);border:0;padding:16px 0 0;
}

/* ============================================================== STATUS === */

.status{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;letter-spacing:.06em;color:var(--ink-2);
}
.status .sep{opacity:.4}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.dot--live{background:var(--sage-dp);box-shadow:0 0 0 4px rgba(111,158,140,.22)}
.dot--off{background:var(--blush);box-shadow:0 0 0 4px rgba(197,142,122,.2)}
.status--inv{color:var(--ink-inv-2)}

/* ============================================================== HERO ===== */

.hero{
  position:relative;
  padding:clamp(56px,8vw,104px) 0 clamp(70px,9vw,120px);
  overflow:hidden;
  background:
    radial-gradient(1100px 620px at 78% 8%,rgba(230,240,234,.9),transparent 62%),
    radial-gradient(760px 520px at 8% 92%,rgba(244,237,226,.95),transparent 60%),
    var(--ivory);
}

/* Faint tile grid — a scrubbed floor read at 3% opacity. */
.hero__tile{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(18,51,42,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(18,51,42,.05) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(720px 520px at 72% 22%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(720px 520px at 72% 22%,#000,transparent 76%);
  pointer-events:none;
}

.hero__in{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:clamp(36px,5vw,68px);
  align-items:center;
}

.hero__copy{max-width:38rem}
.hero h1{margin-bottom:6px}

/* The headline gets one slow pass of light on load, like glass being wiped. */
.wipe{
  position:relative;display:inline-block;
  background:linear-gradient(100deg,var(--forest) 0 42%,var(--brass-hi) 50%,var(--forest) 58% 100%);
  background-size:280% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:wipe 4.6s var(--ease) 1.1s 2;
}
@keyframes wipe{
  0%{background-position:100% 0}
  55%,100%{background-position:0 0}
}
/* The wipe relies on colour:transparent + background-clip:text. If a browser
   can't do that, the headline would be invisible rather than merely plain. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .wipe{background:none;color:var(--forest);animation:none}
}

.hero__badge{
  display:inline-flex;align-items:center;gap:11px;
  padding:8px 8px 8px 16px;margin-bottom:26px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  box-shadow:var(--sh-s);
  font-size:13px;color:var(--ink-2);
}
.hero__badge b{color:var(--forest);font-weight:500}
.hero__badge .stars{display:inline-flex;gap:1px;color:var(--brass)}
.hero__badge .stars svg{width:14px;height:14px}
.hero__badge .pill{
  background:var(--sage-tint);color:var(--sage-dp);
  padding:4px 12px;border-radius:var(--r-pill);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
}

.hero__stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:6px;margin-top:44px;padding-top:30px;
  border-top:1px solid var(--line-2);
}
.stat__n{
  display:block;
  font-family:var(--display);font-size:clamp(32px,4vw,44px);font-weight:600;
  color:var(--forest);line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat__n em{font-style:normal;font-size:.55em;color:var(--brass)}
.stat__l{
  display:block;margin-top:9px;
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);
}

/* ---------------------------------------------------------- hero panel -- */

.hero__panel{position:relative;aspect-ratio:1/1.03}
.hero__frame{
  position:absolute;inset:0;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:linear-gradient(160deg,#F7F2E9,#E9F1EC 58%,#DDE9E2);
  box-shadow:var(--sh-l);
  border:1px solid rgba(255,255,255,.7);
}
.hero__frame svg{width:100%;height:100%;display:block}
.hero__photo{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity .8s var(--ease);
}
.hero__photo.is-on{opacity:1}

/* Brass hairline that traces the panel. */
.hero__frame::after{
  content:'';position:absolute;inset:11px;
  border:1px solid rgba(176,138,62,.34);
  border-radius:calc(var(--r-lg) - 9px);
  pointer-events:none;
}

/* Floating credential card. */
.hero__chip{
  position:absolute;z-index:3;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:15px 19px;
  box-shadow:var(--sh-m);
  display:flex;align-items:center;gap:13px;
  animation:bob 7s ease-in-out infinite;
}
.hero__chip--a{left:-16px;top:16%}
.hero__chip--b{right:-10px;bottom:13%;animation-delay:-3.5s}
.hero__chip svg{width:26px;height:26px;color:var(--sage-dp);flex:none}
.hero__chip b{display:block;font-size:14px;font-weight:500;color:var(--forest);line-height:1.3}
.hero__chip span{display:block;font-size:12px;color:var(--ink-3);letter-spacing:.06em}

@keyframes bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-11px)}
}

/* ---------------------------------------------------------- bubbles ----- */
/* Decorative. Sizes and lanes are set per-element from inline custom props
   so no two are on the same rhythm. */
.bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.bubble{
  position:absolute;bottom:-14%;
  left:var(--x);
  width:var(--s);height:var(--s);
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),rgba(255,255,255,.22) 42%,transparent 60%),
    radial-gradient(circle at 68% 74%,rgba(176,138,62,.16),transparent 58%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 0 14px rgba(255,255,255,.6),0 4px 16px -8px rgba(18,51,42,.3);
  opacity:0;
  animation:rise var(--d) linear var(--delay) infinite;
}
@keyframes rise{
  0%{transform:translate3d(0,0,0) scale(.8);opacity:0}
  12%{opacity:.85}
  78%{opacity:.55}
  100%{transform:translate3d(var(--drift),-128vh,0) scale(1.1);opacity:0}
}

/* ============================================================== MARQUEE == */

.marq{
  background:var(--forest);
  color:var(--ink-inv-2);
  padding:19px 0;
  overflow:hidden;
  border-block:1px solid rgba(255,255,255,.07);
}
.marq__track{
  display:flex;width:max-content;
  animation:slide 46s linear infinite;
}
.marq__grp{display:flex;align-items:center;flex:none}
.marq__item{
  display:inline-flex;align-items:center;gap:14px;
  padding:0 30px;
  font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;
}
.marq__item::after{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--brass);opacity:.75;
}
@keyframes slide{to{transform:translateX(-50%)}}
.marq:hover .marq__track{animation-play-state:paused}

/* ============================================================== REVEAL === */
/* Before / after drag. Grimy room on the left, finished room on the right:
   the "after" layer is clipped to everything right of the handle. Both scenes
   are drawn at the same viewBox so nothing shifts as the handle moves. */

.reveal-wrap{
  display:grid;grid-template-columns:.86fr 1.14fr;
  gap:clamp(34px,5vw,64px);align-items:center;
}

.reveal{
  position:relative;
  aspect-ratio:16/11;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-l);
  border:1px solid rgba(255,255,255,.6);
  cursor:ew-resize;
  user-select:none;
  touch-action:pan-y;
  background:#E7EDE9;
}
.reveal__pane{position:absolute;inset:0}
.reveal__pane svg{width:100%;height:100%;display:block}
.reveal__pane--after{
  clip-path:inset(0 0 0 var(--pos,55%));
  will-change:clip-path;
}

.reveal__bar{
  position:absolute;top:0;bottom:0;
  left:var(--pos,55%);
  width:2px;margin-left:-1px;
  background:linear-gradient(180deg,rgba(255,255,255,.3),#fff 18% 82%,rgba(255,255,255,.3));
  box-shadow:0 0 22px rgba(18,51,42,.35);
  pointer-events:none;
}
.reveal__grip{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 10px 30px -12px rgba(18,51,42,.6);
  display:grid;place-items:center;
  color:var(--forest);
}
.reveal__grip svg{width:22px;height:22px}
.reveal:active .reveal__grip{transform:translate(-50%,-50%) scale(.94)}

.reveal__tag{
  position:absolute;top:16px;
  padding:7px 15px;border-radius:var(--r-pill);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  backdrop-filter:blur(8px);
  pointer-events:none;
}
.reveal__tag--b{left:16px;background:rgba(19,32,27,.82);color:#F2EDE3}
.reveal__tag--a{right:16px;background:rgba(255,255,255,.92);color:var(--forest)}

/* The hint sits over whichever half of the illustration happens to be under
   it, so it carries its own dark plate rather than relying on a text-shadow
   — over the bright "after" scene white-on-white was unreadable. */
.reveal__hint{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  padding:6px 14px;border-radius:var(--r-pill);
  background:rgba(19,32,27,.72);
  backdrop-filter:blur(6px);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:#F2EDE3;
  pointer-events:none;
  animation:pulse 2.6s ease-in-out infinite;
}
.reveal.is-touched .reveal__hint{opacity:0;transition:opacity .4s}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ============================================================== CARDS ==== */

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
  gap:20px;
}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}

.card{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:34px 30px 32px;
  overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
.card::before{
  content:'';position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,var(--brass-hi),var(--brass),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-m);border-color:var(--line-2)}
.card:hover::before{transform:scaleX(1)}

.card__ico{
  width:52px;height:52px;
  display:grid;place-items:center;
  border-radius:13px;
  background:var(--sage-tint);
  color:var(--sage-dp);
  margin-bottom:22px;
}
.card__ico svg{width:26px;height:26px}
.card__ico--brass{background:#F6EDDC;color:var(--brass-dp)}
.card h3{margin-bottom:12px}
.card p{font-size:15.5px;color:var(--ink-2);font-weight:300}
.card__list{list-style:none;margin:18px 0 0;padding:0;font-size:14.5px;color:var(--ink-2)}
.card__list li{
  position:relative;padding-left:24px;margin-bottom:9px;font-weight:300;
}
.card__list li::before{
  content:'';position:absolute;left:0;top:9px;
  width:9px;height:9px;border-radius:2px;
  border:1px solid var(--sage);
  background:var(--sage-tint);
}
.card__foot{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}

.card--dark{
  background:linear-gradient(165deg,var(--forest-2),var(--forest));
  border-color:transparent;color:var(--ink-inv-2);
}
.card--dark h3{color:var(--ink-inv)}
.card--dark p{color:var(--ink-inv-2)}
.card--dark .card__ico{background:rgba(221,186,114,.14);color:var(--brass-hi)}
/* The list inherits light-mode ink otherwise, which is invisible on forest. */
.card--dark .card__list{color:var(--ink-inv-2)}
.card--dark .card__list li::before{
  background:rgba(221,186,114,.16);
  border-color:rgba(221,186,114,.45);
}
.card--dark .card__foot{border-top-color:var(--line-inv)}

/* ============================================================== PLAN ===== */
/* Room-by-room floor plan. Click a room, the panel swaps to that room's
   checklist. Keyboard-reachable — each room group carries role="button" and
   tabindex="0", and JS handles Enter/Space, so this is not mouse-only. */

.plan-wrap{
  display:grid;grid-template-columns:1.16fr .84fr;
  gap:clamp(28px,4vw,54px);align-items:start;
}

.plan{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(18px,3vw,32px);
  box-shadow:var(--sh-s);
}
.plan svg{width:100%;height:auto;display:block}

.plan .room{
  fill:var(--linen);
  stroke:var(--line-2);
  stroke-width:2;
  transition:fill .45s var(--ease),stroke .45s;
}
.plan .room-g{cursor:pointer;outline:none}
.plan .room-g:hover .room{fill:#F0E9DC}
.plan .room-g.is-on .room{fill:var(--sage-tint);stroke:var(--sage)}
.plan .room-lbl{
  font-family:var(--sans);font-size:15px;font-weight:400;
  fill:var(--ink-3);letter-spacing:.09em;text-transform:uppercase;
  pointer-events:none;transition:fill .4s;
}
.plan .room-g.is-on .room-lbl{fill:var(--sage-dp);font-weight:500}
.plan .room-ico{color:var(--ink-3);transition:color .4s,opacity .4s;opacity:.6}
.plan .room-g.is-on .room-ico{color:var(--sage-dp);opacity:1}
.plan .room-g:focus-visible .room{stroke:var(--brass);stroke-width:3}
.plan .wall{stroke:var(--forest);stroke-width:3.5;fill:none;stroke-linecap:round}
.plan .fixture{stroke:var(--line-2);stroke-width:2;fill:#FFF;}

/* Sparkle that lands on the selected room. */
.plan .spark{fill:var(--brass);opacity:0}
.plan .room-g.is-on .spark{animation:spark 1.5s var(--ease) infinite}
.plan .room-g.is-on .spark:nth-of-type(2){animation-delay:.45s}
.plan .room-g.is-on .spark:nth-of-type(3){animation-delay:.9s}
@keyframes spark{
  0%{opacity:0;transform:scale(.4)}
  40%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.5)}
}

.roompanel{
  background:linear-gradient(165deg,var(--forest-2),var(--forest));
  border-radius:var(--r-lg);
  padding:clamp(28px,3.4vw,40px);
  color:var(--ink-inv-2);
  box-shadow:var(--sh-m);
  position:sticky;top:calc(var(--bar-h) + 24px);
}
.roompanel h3{color:var(--ink-inv);margin-bottom:6px}
.roompanel__n{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass-hi);display:block;margin-bottom:14px;
}
.roompanel__p{font-size:15px;font-weight:300;color:var(--ink-inv-2);margin-bottom:22px}
.roompanel ul{list-style:none;margin:0;padding:0}
.roompanel li{
  position:relative;padding-left:30px;margin-bottom:12px;
  font-size:14.5px;font-weight:300;
  opacity:0;transform:translateY(8px);
  animation:liIn .5s var(--ease) forwards;
}
.roompanel li::before{
  content:'';position:absolute;left:0;top:4px;
  width:17px;height:17px;border-radius:5px;
  background:rgba(221,186,114,.16);
  border:1px solid rgba(221,186,114,.4);
}
.roompanel li::after{
  content:'';position:absolute;left:5px;top:9px;
  width:7px;height:4px;
  border-left:1.6px solid var(--brass-hi);
  border-bottom:1.6px solid var(--brass-hi);
  transform:rotate(-45deg);
}
@keyframes liIn{to{opacity:1;transform:translateY(0)}}

.roompanel__foot{
  margin-top:26px;padding-top:22px;
  border-top:1px solid var(--line-inv);
}

/* ============================================================== CHECK ==== */
/* The deep-clean list ticks itself as it scrolls into view. */

.check{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px 34px;list-style:none;margin:0;padding:0;
}
.check li{
  display:flex;align-items:flex-start;gap:14px;
  padding:13px 0;
  border-bottom:1px solid var(--line);
  font-size:15px;font-weight:300;color:var(--ink-2);
}
.check .box{
  position:relative;flex:none;
  width:21px;height:21px;margin-top:2px;
  border:1px solid var(--line-2);
  border-radius:6px;
  background:var(--paper);
  transition:background .4s var(--ease),border-color .4s;
}
.check .box::after{
  content:'';position:absolute;left:5px;top:5px;
  width:9px;height:5px;
  border-left:1.8px solid var(--paper);
  border-bottom:1.8px solid var(--paper);
  transform:rotate(-45deg) scale(.2);
  opacity:0;
  transition:transform .45s var(--ease-snap),opacity .3s;
}
.check li.is-done .box{background:var(--sage-dp);border-color:var(--sage-dp)}
.check li.is-done .box::after{transform:rotate(-45deg) scale(1);opacity:1}
.check li.is-done{color:var(--forest)}

/* On the forest section the whole list has to flip, or it reads as a column of
   empty checkboxes with no text beside them. */
.sec--forest .check li{color:var(--ink-inv-2);border-bottom-color:var(--line-inv)}
.sec--forest .check li.is-done{color:var(--ink-inv)}
.sec--forest .check .box{background:rgba(239,245,241,.07);border-color:rgba(239,245,241,.3)}
.sec--forest .check li.is-done .box{background:var(--brass);border-color:var(--brass)}
.sec--forest .check .box::after{border-color:var(--forest)}

/* ============================================================== STEPS ==== */

.steps{counter-reset:s;display:grid;gap:0}
.step{
  counter-increment:s;
  display:grid;grid-template-columns:88px 1fr;
  gap:clamp(20px,3vw,40px);
  padding:34px 0;
  border-top:1px solid var(--line);
  align-items:start;
}
.step:last-child{border-bottom:1px solid var(--line)}
.step__n{
  font-family:var(--display);
  font-size:clamp(44px,5vw,64px);font-weight:300;line-height:.9;
  color:var(--line-2);
  transition:color .5s var(--ease);
}
.step__n::before{content:'0' counter(s)}
.step:hover .step__n{color:var(--brass)}
.step h3{margin-bottom:10px}
.step p{font-size:15.5px;color:var(--ink-2);font-weight:300;max-width:58ch}

/* ============================================================== TABS ===== */

.tabs{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:7px;margin-bottom:36px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  width:max-content;max-width:100%;
}
.tab{
  padding:12px 24px;
  border:0;border-radius:var(--r-pill);
  background:transparent;
  font-size:13.5px;font-weight:400;letter-spacing:.05em;
  color:var(--ink-2);cursor:pointer;
  transition:background .4s var(--ease),color .3s;
  white-space:nowrap;
}
.tab:hover{color:var(--forest)}
.tab[aria-selected="true"]{
  background:var(--forest);color:var(--ink-inv);font-weight:500;
}
.panel{display:none}
.panel.is-on{display:block;animation:fadeUp .55s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ============================================================== QUOTES === */

.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:20px}
/* With 2 or 4 quotes, auto-fit leaves an orphan stretched across a whole row.
   Two-up gives the long ones room and keeps the block square. */
@media (min-width:901px){
  .quotes--2up{grid-template-columns:repeat(2,1fr)}
}

/* Empty until a review link is configured — :empty keeps the margin off so an
   unconfigured site has no mystery gap at the foot of the reviews. */
.reviewcta{margin-top:28px;text-align:center}
.reviewcta:empty{display:none}

.topics{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
  margin-bottom:26px;
}
.topics__lbl{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
.topics__row{display:flex;flex-wrap:wrap;gap:8px}
.topic{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 8px 7px 15px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  font-size:13.5px;color:var(--ink-2);
}
.topic b{
  display:inline-grid;place-items:center;
  min-width:24px;height:24px;padding:0 7px;
  border-radius:var(--r-pill);
  background:var(--sage-tint);color:var(--sage-dp);
  font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;
}
/* Cards in a row stretch to the tallest. Without the flex column the short
   quotes leave their attribution stranded halfway up the card. */
.quote{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:32px 28px 28px;
}
.quote__who{margin-top:auto}
.quote__mark{
  position:absolute;top:8px;right:22px;
  font-family:var(--display);font-size:88px;line-height:1;
  color:var(--linen-2);pointer-events:none;
}
.quote__stars{display:flex;gap:2px;color:var(--brass);margin-bottom:16px}
.quote__stars svg{width:16px;height:16px}
.quote__body{
  position:relative;
  font-family:var(--display);font-size:20px;line-height:1.5;
  color:var(--forest);margin-bottom:22px;
}
.quote__who{display:flex;align-items:center;gap:13px}
.quote__av{
  width:40px;height:40px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:var(--sage-tint);color:var(--sage-dp);
  font-size:13px;font-weight:500;letter-spacing:.04em;
}
.quote__name{display:block;font-size:14.5px;font-weight:500;color:var(--forest)}
/* Only ever a credential Google itself shows, e.g. Local Guide. */
.quote__badge{
  display:inline-block;margin-left:8px;padding:2px 9px;
  border-radius:var(--r-pill);
  background:var(--sage-tint);color:var(--sage-dp);
  font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  vertical-align:1px;
}
.quote__when{display:block;font-size:12px;color:var(--ink-3);letter-spacing:.05em}

.quote--slot{
  background:repeating-linear-gradient(135deg,var(--ivory) 0 11px,#F6F1E8 11px 22px);
  border-style:dashed;border-color:var(--line-2);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:230px;
}
.quote--slot p{font-size:13.5px;color:var(--ink-3);font-weight:300;max-width:34ch}
.slot__ico{width:30px;height:30px;color:var(--line-2);margin-bottom:12px}
.slot__n{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-dp);margin-bottom:10px;
}

.rating{
  display:flex;align-items:center;gap:clamp(18px,3vw,40px);
  flex-wrap:wrap;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:26px 32px;
  margin-bottom:30px;
  box-shadow:var(--sh-s);
}
.rating__big{
  font-family:var(--display);font-size:60px;font-weight:600;line-height:1;
  color:var(--forest);
}
.rating__mid{display:flex;flex-direction:column;gap:6px}
.rating__stars{display:flex;gap:3px;color:var(--brass)}
.rating__stars svg{width:20px;height:20px}
.rating__meta{font-size:13.5px;color:var(--ink-3);letter-spacing:.04em}
.rating__bars{flex:1;min-width:210px;display:grid;gap:5px}
.bar{display:flex;align-items:center;gap:11px;font-size:11.5px;color:var(--ink-3)}
.bar__t{flex:1;height:6px;border-radius:3px;background:var(--linen-2);overflow:hidden}
.bar__f{
  display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--brass-hi),var(--brass));
  width:0;transition:width 1.1s var(--ease);
}

/* ============================================================== AREAS ==== */

.areas{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.area{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 18px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  font-size:13.5px;color:var(--ink-2);
  transition:transform .35s var(--ease),border-color .3s,color .3s;
}
.area::before{
  content:'';width:5px;height:5px;border-radius:50%;background:var(--sage);
}
.area:hover{transform:translateY(-2px);border-color:var(--sage);color:var(--forest)}
.area--core{background:var(--forest);color:var(--ink-inv);border-color:transparent}
.area--core::before{background:var(--brass-hi)}
.area--core:hover{color:var(--ink-inv)}

/* ============================================================== SPLIT ==== */

.split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px);align-items:center;
}
.split--wide-l{grid-template-columns:1.15fr .85fr}
.split--wide-r{grid-template-columns:.85fr 1.15fr}

.figure{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:linear-gradient(155deg,#F7F2E9,#E6F0EA);
  border:1px solid var(--line);
  box-shadow:var(--sh-m);
  aspect-ratio:4/3.4;
}
.figure svg{width:100%;height:100%;display:block}
.figure__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ============================================================== CTA ====== */

.cta{
  position:relative;
  background:linear-gradient(150deg,var(--forest-2) 0%,var(--forest) 60%);
  color:var(--ink-inv-2);
  overflow:hidden;
}
.cta__glow{
  position:absolute;
  width:760px;height:760px;
  right:-16%;top:-56%;
  background:radial-gradient(circle,rgba(221,186,114,.22),transparent 66%);
  pointer-events:none;
}
.cta__in{position:relative;z-index:2;text-align:center;max-width:56rem;margin-inline:auto}
.cta h2{color:var(--ink-inv);margin-bottom:20px}

/* ============================================================== FORM ===== */

.formcard{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(26px,3.6vw,44px);
  box-shadow:var(--sh-m);
}
.form{display:grid;gap:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}

.field{display:grid;gap:8px}
.field > label{
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);
}
.field .req{color:var(--brass-dp)}
.input,select.input,textarea.input{
  width:100%;
  padding:14px 16px;
  font-family:var(--sans);font-size:15.5px;color:var(--ink);
  background:var(--ivory);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  transition:border-color .3s,box-shadow .3s,background .3s;
}
.input::placeholder{color:var(--ink-3);font-weight:300}
.input:focus{outline:none;border-color:var(--brass);box-shadow:var(--ring);background:var(--paper)}
textarea.input{resize:vertical;min-height:118px;line-height:1.6}
select.input{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B8B84' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:17px;
  padding-right:44px;
}

.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 18px;
  background:var(--ivory);
  border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  font-size:14px;color:var(--ink-2);
  cursor:pointer;
  transition:all .3s var(--ease);
}
.chip span::before{
  content:'';width:14px;height:14px;border-radius:4px;
  border:1px solid var(--line-2);background:var(--paper);
  transition:all .3s;
}
.chip input:checked + span{
  background:var(--forest);color:var(--ink-inv);border-color:var(--forest);
}
.chip input:checked + span::before{
  background:var(--brass-hi);border-color:var(--brass-hi);
}
.chip input:focus-visible + span{box-shadow:var(--ring)}
.chip:hover span{border-color:var(--sage)}

.formnote{font-size:12.5px;color:var(--ink-3);font-weight:300;line-height:1.6}

.out{
  display:none;
  margin-top:26px;padding:26px;
  background:var(--sage-tint);
  border:1px solid var(--sage);
  border-radius:var(--r);
}
.out.is-on{display:block;animation:fadeUp .5s var(--ease)}
.out h3{font-size:22px;margin-bottom:10px}
.out pre{
  white-space:pre-wrap;word-break:break-word;
  font-family:var(--sans);font-size:13.5px;font-weight:300;
  color:var(--ink-2);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:16px;margin:16px 0 20px;
  max-height:230px;overflow:auto;
}

/* ============================================================== HOURS ==== */

.hours{list-style:none;margin:0;padding:0}
.hours li{
  display:flex;justify-content:space-between;gap:20px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:15px;font-weight:300;color:var(--ink-2);
}
.hours li:last-child{border-bottom:0}
.hours li.is-today{color:var(--forest);font-weight:500}
.hours li.is-today .d::after{
  content:'Today';
  margin-left:10px;padding:2px 9px;
  background:var(--sage-tint);color:var(--sage-dp);
  border-radius:var(--r-pill);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
}
.hours .t{font-variant-numeric:tabular-nums;white-space:nowrap}

.infocard{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:30px 28px;
}
.infocard + .infocard{margin-top:18px}
.infocard h3{font-size:24px;margin-bottom:16px}
.infocard__row{
  display:flex;align-items:flex-start;gap:15px;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.infocard__row:last-child{border-bottom:0;padding-bottom:0}
.infocard__row svg{width:20px;height:20px;color:var(--sage-dp);flex:none;margin-top:3px}
.infocard__row b{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:3px}
.infocard__row a,.infocard__row span{font-size:16px;color:var(--forest);text-decoration:none;font-weight:400}
.infocard__row a:hover{color:var(--brass-dp)}

/* ============================================================== ACC ====== */

.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:24px 0;
  background:transparent;border:0;
  font-family:var(--display);font-size:clamp(19px,2.1vw,23px);font-weight:500;
  color:var(--forest);text-align:left;cursor:pointer;
  transition:color .3s;
}
.acc__btn:hover{color:var(--brass-dp)}
.acc__ico{
  position:relative;width:24px;height:24px;flex:none;
  border-radius:50%;border:1px solid var(--line-2);
  transition:background .4s var(--ease),border-color .4s,transform .5s var(--ease);
}
.acc__ico::before,.acc__ico::after{
  content:'';position:absolute;left:50%;top:50%;
  background:var(--forest);border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform .45s var(--ease),background .3s;
}
.acc__ico::before{width:10px;height:1.5px}
.acc__ico::after{width:1.5px;height:10px}
.acc__item.is-open .acc__ico{background:var(--forest);border-color:var(--forest);transform:rotate(180deg)}
.acc__item.is-open .acc__ico::before{background:var(--ink-inv)}
.acc__item.is-open .acc__ico::after{transform:translate(-50%,-50%) scaleY(0)}
.acc__panel{height:0;overflow:hidden;transition:height .5s var(--ease)}
.acc__panel > div{padding:0 0 26px;max-width:70ch}
.acc__panel p{font-size:15.5px;color:var(--ink-2);font-weight:300}

/* ============================================================== MODAL ==== */

.modal{
  position:fixed;inset:0;z-index:150;
  display:none;place-items:center;
  padding:24px;
  background:rgba(18,36,31,.62);
  backdrop-filter:blur(6px);
}
.modal.is-open{display:grid;animation:fadeUp .3s var(--ease)}
.modal__box{
  width:min(420px,100%);
  background:var(--paper);
  border-radius:var(--r-lg);
  padding:40px 34px 34px;
  text-align:center;
  position:relative;
  box-shadow:var(--sh-l);
}
.modal__x{
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line);background:transparent;
  cursor:pointer;color:var(--ink-3);font-size:18px;line-height:1;
}
.modal__x:hover{background:var(--linen);color:var(--forest)}
.modal__num{
  font-family:var(--display);font-size:36px;font-weight:600;
  color:var(--forest);margin:14px 0 6px;
  font-variant-numeric:tabular-nums;
}
.modal p{font-size:14.5px;color:var(--ink-2);font-weight:300}

/* ============================================================== FOOTER === */

.foot{background:var(--forest);color:var(--ink-inv-2);padding:clamp(52px,7vw,84px) 0 34px}
.foot h4{color:var(--ink-inv);font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin-bottom:20px}
.foot__grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:clamp(28px,4vw,52px);
}
.foot__brand{display:flex;align-items:center;gap:13px;margin-bottom:20px;text-decoration:none}
.foot__brand .brand__name{color:var(--ink-inv)}
.foot__brand .brand__name em{color:var(--brass-hi)}
.foot__brand .brand__sub{color:var(--ink-inv-2);opacity:.7}
.foot p{font-size:14.5px;font-weight:300;color:var(--ink-inv-2);max-width:36ch}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:11px}
.foot a{
  font-size:14.5px;font-weight:300;color:var(--ink-inv-2);text-decoration:none;
  transition:color .3s;
}
.foot a:hover{color:var(--brass-hi)}
.foot__bot{
  margin-top:clamp(40px,5vw,60px);padding-top:24px;
  border-top:1px solid var(--line-inv);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:12.5px;color:var(--ink-inv-2);opacity:.72;font-weight:300;
}

/* ============================================================== REVEAL FX */

.js [data-rise]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.js [data-rise].is-in{opacity:1;transform:none}

/* ============================================================== RESP ===== */

/* The phone pill is the first thing to go — the nav and the estimate button
   both matter more, and the number is repeated a dozen times further down. */
@media (max-width:1200px){
  .btn--phone{display:none}
  .topbar__in{gap:18px}
}

@media (max-width:1080px){
  .cards--4{grid-template-columns:repeat(2,1fr)}
  .plan-wrap{grid-template-columns:1fr}
  .roompanel{position:static}
}

@media (max-width:900px){
  :root{--bar-h:72px}
  .navlinks{display:none}
  .menu{display:flex}
  .btn--phone{display:none}
  .hero__in{grid-template-columns:1fr;gap:46px}
  .hero__copy{max-width:none}
  .hero__panel{max-width:520px;margin-inline:auto;width:100%}
  .reveal-wrap,.split,.split--wide-l,.split--wide-r{grid-template-columns:1fr}
  .cards--3{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr}
}

@media (max-width:640px){
  body{font-size:16px}
  .cards--4{grid-template-columns:1fr}
  .hero__stats{grid-template-columns:1fr;gap:20px;text-align:left}
  .hero__chip--a{left:-4px;top:8%}
  .hero__chip--b{right:-4px;bottom:6%}
  .hero__chip{padding:11px 14px}
  .hero__chip b{font-size:12.5px}
  .step{grid-template-columns:1fr;gap:10px}
  .step__n{font-size:38px}
  .foot__grid{grid-template-columns:1fr}
  .tabs{width:100%;justify-content:flex-start}
  .tab{flex:1;text-align:center;padding:11px 14px;font-size:12.5px}
  .rating{flex-direction:column;align-items:flex-start;gap:18px}
  .check{grid-template-columns:1fr}
  .quote__body{font-size:18px}
}

/* ============================================================== PRINT ==== */

@media print{
  .topbar,.sheet,.progress,.bubbles,.cta,.marq,.reveal__hint{display:none}
  body{background:#fff;font-size:12pt}
  .sec{padding:18pt 0}
}

/* ============================================================== MOTION === */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js [data-rise]{opacity:1;transform:none}
  .bubbles{display:none}
  .wipe{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--forest)}
}