/* ==========================================================================
   Best In Show design system
   Brand hue 312 (her Atlanta logo purple, sampled #543060 / #84609c).
   Every neutral carries a trace of the brand hue. One hue, three registers.
   ========================================================================== */
:root{
  --h: 312;

  /* grounds: the brand hue at near zero chroma reads as warm paper, not colour */
  --paper:    oklch(0.988 0.004 var(--h));
  --paper-2:  oklch(0.966 0.008 var(--h));
  --paper-3:  oklch(0.938 0.012 var(--h));
  --line:     oklch(0.898 0.013 var(--h));
  --line-soft:oklch(0.936 0.009 var(--h));

  /* ink */
  --ink:      oklch(0.255 0.030 var(--h));
  --ink-deep: oklch(0.168 0.028 var(--h));
  --body:     oklch(0.430 0.022 var(--h));
  --muted:    oklch(0.560 0.020 var(--h));

  /* accent, used on under 2% of pixels */
  --accent:      oklch(0.495 0.150 var(--h));
  --accent-hover:oklch(0.425 0.160 var(--h));
  --accent-tint: oklch(0.955 0.022 var(--h));
  --accent-line: oklch(0.860 0.055 var(--h));
  --on-dark:     oklch(0.945 0.010 var(--h));
  --on-dark-dim: oklch(0.760 0.016 var(--h));
  --accent-dark: oklch(0.760 0.130 var(--h));

  /* fluid modular scale, 1.2 at 320px climbing to 1.333 at 1440px */
  --s--1: clamp(0.83rem, 0.81rem + 0.11vw, 0.90rem);
  --s-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --s-1:  clamp(1.20rem, 1.13rem + 0.36vw, 1.50rem);
  --s-2:  clamp(1.44rem, 1.32rem + 0.60vw, 2.00rem);
  --s-3:  clamp(1.73rem, 1.53rem + 0.98vw, 2.67rem);
  --s-4:  clamp(2.07rem, 1.77rem + 1.52vw, 3.55rem);
  --s-5:  clamp(2.49rem, 2.02rem + 2.33vw, 4.74rem);
  --s-6:  clamp(2.99rem, 2.28rem + 3.53vw, 6.31rem);

  /* space */
  --sp-1:.5rem; --sp-2:.875rem; --sp-3:1.375rem; --sp-4:2.25rem;
  /* Section rhythm tightened 2026-09-18. sp-7 was clamp(4.5rem,9vw,9rem), which
     at a wide viewport put 144px above AND below every section, so nearly 290px
     of air between them. Roughly a third out, still airy, not squished. */
  --sp-5:3rem; --sp-6:4.25rem; --sp-7:clamp(3.25rem,6vw,6rem);

  /* one workhorse ease does most of the work */
  --e-out:  cubic-bezier(0.165, 0.84, 0.44, 1);
  --e-out-2:cubic-bezier(0.23, 1, 0.32, 1);
  --e-in-out:cubic-bezier(0.77, 0, 0.175, 1);
  --t-fast:150ms; --t:240ms; --t-slow:520ms;

  /* radius: her logo mark is a soft rounded plate, so the system is family 3.
     Pill buttons, generously rounded cards, one scale, never scaled by breakpoint. */
  --r-1:.5rem;      /* chips, tags                */
  --r-2:.75rem;     /* inputs, small panels       */
  --r-3:1rem;       /* images inside cards        */
  --r-4:1.25rem;    /* cards, media frames        */
  --r-5:1.75rem;    /* large feature panels       */
  --r-pill:999px;

  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-optical-sizing:auto;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  font-family:var(--sans);font-size:var(--s-0);line-height:1.62;
  color:var(--body);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1;
}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}

h1,h2,h3{font-family:var(--serif);color:var(--ink);font-weight:600;
  font-variation-settings:"SOFT" 36,"WONK" 1}
h1{font-size:var(--s-5);letter-spacing:-.032em;line-height:1.02}
h2{font-size:var(--s-3);letter-spacing:-.022em;line-height:1.1}
h3{font-size:var(--s-1);letter-spacing:-.012em;line-height:1.22}
h4{font-family:var(--sans);font-size:var(--s--1);font-weight:650;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink)}
p{margin-bottom:1.1em}
@supports (text-box: trim-both cap alphabetic){
  h1,h2,h3,.eyebrow,.display{text-box:trim-both cap alphabetic}
}
::selection{background:var(--accent);color:#fff}

/* ---- breakout grid: one grid, four widths, no nested wrappers ---- */
.wrap{
  --gap:clamp(1.15rem,5vw,3rem);
  --full:minmax(var(--gap),1fr);
  --content:min(68ch,100% - var(--gap)*2);
  --popout:minmax(0,3rem);
  --feature:minmax(0,7rem);
  display:grid;
  grid-template-columns:
    [full-start] var(--full)
    [feature-start] var(--feature)
    [popout-start] var(--popout)
    [content-start] var(--content) [content-end]
    var(--popout) [popout-end]
    var(--feature) [feature-end]
    var(--full) [full-end];
}
.wrap>*{grid-column:content}
.wrap>.popout{grid-column:popout}
.wrap>.feature{grid-column:feature}
.wrap>.full{grid-column:full}
.measure{max-width:66ch}
.lede{font-size:var(--s-1);line-height:1.45;color:var(--muted);
  letter-spacing:-.011em;max-width:52ch}

.skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:.8rem 1.2rem;z-index:200}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--r-1)}

/* ---- buttons: no uniform shadow, no uniform scale ---- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--sans);font-size:var(--s--1);font-weight:600;letter-spacing:.01em;
  background:var(--accent);color:#fff;border:1px solid var(--accent);
  padding:.95rem 1.9rem;border-radius:var(--r-pill);text-decoration:none;
  transition:background var(--t) var(--e-out),border-color var(--t) var(--e-out),color var(--t) var(--e-out);
}
@supports (text-box: trim-both cap alphabetic){.btn{text-box:trim-both cap alphabetic;padding:1.05rem 1.9rem}}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);text-decoration:none}
}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
@media (hover:hover) and (pointer:fine){.btn.ghost:hover{border-color:var(--ink);background:transparent}}
.btn.light{background:var(--on-dark);color:var(--ink-deep);border-color:var(--on-dark)}
@media (hover:hover) and (pointer:fine){.btn.light:hover{background:#fff;border-color:#fff}}
.btn.edge{background:transparent;color:var(--on-dark);border-color:oklch(0.945 0.01 var(--h)/.42)}
@media (hover:hover) and (pointer:fine){.btn.edge:hover{border-color:var(--on-dark);background:oklch(0.945 0.01 var(--h)/.1)}}
.btn.sm{padding:.7rem 1.35rem;font-size:calc(var(--s--1) * .96)}
.btn.full{width:100%;justify-content:center}

/* text link with a drawn rule, used instead of card hover-lift */
.tlink{font-family:var(--sans);font-weight:600;font-size:var(--s--1);color:var(--ink);
  text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;position:relative;
  padding-bottom:3px}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ink);transform-origin:left;transform:scaleX(1);
  transition:transform var(--t) var(--e-out)}
.tlink .arw{transition:transform var(--t) var(--e-out)}
@media (hover:hover) and (pointer:fine){
  a:hover .tlink::after,.tlink:hover::after{transform:scaleX(0);transform-origin:right}
  a:hover .tlink .arw,.tlink:hover .arw{transform:translateX(5px)}
}

.eyebrow{display:block;font-family:var(--sans);font-size:var(--s--1);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.dark .eyebrow{color:var(--accent-dark)}

/* ---- header ---- */
header.site{position:sticky;top:0;z-index:100;background:oklch(0.988 0.004 var(--h)/.86);
  backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line-soft)}
.bar{max-width:96rem;margin:0 auto;padding:.85rem clamp(1.15rem,5vw,3rem);
  display:flex;align-items:center;gap:2rem}
.brand img{height:46px;width:auto}
nav.desk{margin-left:auto}
nav.desk ul{display:flex;gap:1.9rem;list-style:none;align-items:center}
nav.desk a{color:var(--ink);font-size:var(--s--1);font-weight:550;text-decoration:none;
  position:relative;padding:.2rem 0}
nav.desk a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:right;
  transition:transform var(--t) var(--e-out)}
nav.desk a.on::after{transform:scaleX(1);transform-origin:left}
@media (hover:hover) and (pointer:fine){nav.desk a:hover::after{transform:scaleX(1);transform-origin:left}}
.bar-cta{display:flex;align-items:center;gap:1rem}
.bar-cta .tel{color:var(--ink);font-weight:650;font-size:var(--s--1);text-decoration:none;white-space:nowrap}
.burger{display:none;background:none;border:0;cursor:pointer;padding:.5rem;flex-direction:column;gap:5px}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform var(--t) var(--e-out),opacity var(--t)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
nav.mob{display:none;border-top:1px solid var(--line-soft);background:var(--paper)}
nav.mob.open{display:block}
nav.mob ul{list-style:none;padding:1rem clamp(1.15rem,5vw,3rem) 2rem}
nav.mob a{display:block;padding:.85rem 0;color:var(--ink);font-weight:550;
  border-bottom:1px solid var(--line-soft);text-decoration:none}
nav.mob a.btn{border-bottom:0;margin-top:1rem;color:#fff;justify-content:center}
nav.mob a.btn.ghost{color:var(--ink)}

/* ---- hero: split editorial. Text sits on ink, never on faces. ---- */
.hero{background:var(--ink-deep);color:var(--on-dark-dim);overflow:clip;position:relative;padding:0}
.hero__grid{display:grid;min-height:auto}
@media (min-width:62rem){
  .hero__grid{grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);min-height:min(88svh,50rem)}
}
.hero__copy{display:flex;flex-direction:column;justify-content:center;
  padding:var(--sp-6) clamp(1.15rem,5vw,3rem) var(--sp-5);
  max-width:44rem;margin-left:auto;width:100%}
@media (min-width:62rem){
  .hero__copy{padding-block:var(--sp-7);padding-right:var(--sp-5);
    max-width:calc(41rem + 3vw);margin-left:auto;margin-right:0}
}
.hero__media{position:relative;isolation:isolate;background:oklch(0.22 0.03 var(--h));
  min-height:18rem}
@media (min-width:62rem){.hero__media{min-height:100%}}
.hero__poster,.hero__video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:52% 38%}
.hero__video{opacity:0;transition:opacity 900ms var(--e-out)}
.hero__video.is-ready{opacity:1}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(94deg,oklch(0.168 0.028 var(--h)/.55) 0%,transparent 34%)}
@media (max-width:61.99rem){
  .hero__media{aspect-ratio:4/5;min-height:0}
  .hero__media::after{background:linear-gradient(0deg,oklch(0.168 0.028 var(--h)/.5) 0%,transparent 42%)}
}
.hero h1{color:var(--on-dark);font-size:var(--s-6);letter-spacing:-.036em;line-height:.98;
  max-width:15ch;text-wrap:balance}
.hero h1 em{font-style:italic;color:var(--accent-dark);font-variation-settings:"SOFT" 60,"WONK" 1}
.hero .lede{color:var(--on-dark-dim);margin-top:1.4rem;max-width:46ch}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2.2rem}
.hero-rule{margin-top:var(--sp-5);padding-top:1.3rem;
  border-top:1px solid oklch(0.945 0.01 var(--h)/.2);
  display:grid;gap:.55rem;font-size:var(--s--1);color:var(--on-dark-dim)}
@media (min-width:34rem){.hero-rule{grid-template-columns:1fr 1fr;gap:.6rem 2rem}}
.hero-rule b{color:var(--on-dark);font-weight:600;display:block}

/* ---- full bleed portrait band, for the one extraordinary photograph ---- */
.plate{position:relative;background:var(--ink-deep)}
.plate img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 32%}
@media (min-width:62rem){.plate img{aspect-ratio:2.4/1}}
.plate figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:var(--sp-5) clamp(1.15rem,5vw,3rem) var(--sp-3);
  background:linear-gradient(0deg,oklch(0.168 0.028 var(--h)/.9),transparent);
  color:var(--on-dark-dim);font-size:var(--s--1)}
.plate figcaption b{color:var(--on-dark);font-weight:600}

/* ---- ledger strip: real specifics, not a stats counter ---- */
.ledger{background:var(--ink-deep);color:var(--on-dark-dim);
  border-top:1px solid oklch(0.945 0.01 var(--h)/.11);padding:1.15rem 0}
.ledger .row{display:flex;flex-wrap:wrap;gap:.5rem 2.6rem;font-size:var(--s--1);
  letter-spacing:.02em;justify-content:space-between}
.ledger b{color:var(--accent-dark);font-weight:600;font-variant-numeric:tabular-nums}

/* ---- sections ---- */
section{padding:var(--sp-7) 0}
section.tight{padding:var(--sp-6) 0}
.tint{background:var(--paper-2)}
.dark{background:var(--ink-deep);color:var(--on-dark-dim)}
.dark h1,.dark h2,.dark h3{color:var(--on-dark)}
.dark .lede{color:var(--on-dark-dim)}
.dark a{color:var(--accent-dark)}
.shead{max-width:48rem;margin-bottom:var(--sp-4)}
.shead h2{margin-bottom:.8rem;max-width:20ch}
.shead .lede{max-width:44ch}
@media (min-width:60rem){
  .shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:var(--sp-4);max-width:none;align-items:end}
  .shead .eyebrow{grid-column:1/-1;margin-bottom:.4rem}
  .shead h2{max-width:16ch;margin-bottom:0}
  .shead .lede{max-width:46ch;padding-bottom:.3rem}
}

/* ---- editorial service rows, deliberately not four equal cards ---- */
.srow{display:grid;grid-template-columns:1fr;gap:var(--sp-4);
  padding:var(--sp-5) 0;border-top:1px solid var(--line)}
.srow:last-of-type{border-bottom:1px solid var(--line)}
@media (min-width:56rem){
  .srow{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--sp-5);align-items:center}
  /* alternate sides without changing the media column's width */
  .srow:nth-of-type(even){grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .srow:nth-of-type(even) .srow__media{order:-1}
}
.srow__media{position:relative;overflow:clip;border-radius:var(--r-4)}
.srow__media img{width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform 900ms var(--e-out)}
@media (min-width:56rem){.srow__media img{aspect-ratio:5/4}}
@media (hover:hover) and (pointer:fine){.srow:hover .srow__media img{transform:scale(1.028)}}
.srow__no{font-family:var(--serif);font-size:var(--s--1);color:var(--accent);
  letter-spacing:.1em;display:block;margin-bottom:.9rem;font-variant-numeric:tabular-nums}
.srow h3{font-size:var(--s-2);margin-bottom:.7rem}
.srow p{color:var(--muted);max-width:46ch}
.srow__from{font-size:var(--s--1);color:var(--ink);font-weight:600;margin:1.1rem 0 1.3rem;
  font-variant-numeric:tabular-nums}
.srow__from span{color:var(--muted);font-weight:400}

/* ---- suites: a priced table feel, not pricing cards ---- */
.suites{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media (min-width:52rem){.suites{grid-template-columns:repeat(3,1fr)}}
.suite{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-4);
  padding:clamp(1.5rem,3vw,2rem);display:flex;flex-direction:column;position:relative;
  transition:border-color var(--t) var(--e-out),box-shadow var(--t) var(--e-out)}
@media (hover:hover) and (pointer:fine){.suite:hover{border-color:var(--accent-line);
  box-shadow:0 18px 40px -28px oklch(0.168 0.028 var(--h)/.4)}}
.suite.feat{border-color:var(--accent);border-width:2px;background:var(--accent-tint)}
.suite__flag{position:absolute;top:0;left:clamp(1.5rem,3vw,2rem);transform:translateY(-50%);
  background:var(--accent);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;padding:.4rem .85rem;border-radius:var(--r-pill)}
.suite__cta{margin-top:auto;padding-top:1.4rem}
.suite__cta .btn{width:100%;justify-content:center}
.suite h3{font-size:var(--s-1);margin-bottom:.15rem}
.suite .sub{font-size:var(--s--1);color:var(--muted);margin-bottom:1.4rem}
.suite .price{font-family:var(--serif);font-size:var(--s-4);color:var(--ink);line-height:1;
  font-variation-settings:"SOFT" 30,"WONK" 0;font-variant-numeric:tabular-nums}
.suite .price span{font-family:var(--sans);font-size:var(--s--1);color:var(--muted);font-weight:400}
.suite .wt{font-size:var(--s--1);color:var(--accent);font-weight:600;margin:.7rem 0 0}
.suite .det{font-size:var(--s--1);color:var(--muted);padding-top:1.2rem;
  border-top:1px solid var(--line)}

/* ---- ticks ---- */
.ticks{list-style:none;margin:1.5rem 0}
.ticks li{position:relative;padding-left:1.7rem;margin-bottom:.7rem;color:var(--body)}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--accent)}
.dark .ticks li{color:var(--on-dark-dim)}
.dark .ticks li::before{background:var(--accent-dark)}

/* ---- split ---- */
.split{display:grid;gap:var(--sp-5);align-items:center}
@media (min-width:56rem){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split.rev .sp-media{order:2}
}
.sp-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-4)}
@media (min-width:56rem){.sp-media img{aspect-ratio:1/1}}
.sp-media.wide img{aspect-ratio:4/3}

/* ---- timeline ---- */
.timeline{border-top:1px solid oklch(0.945 0.01 var(--h)/.16)}
.tl{display:grid;gap:.4rem;padding:var(--sp-4) 0;
  border-bottom:1px solid oklch(0.945 0.01 var(--h)/.16)}
@media (min-width:44rem){.tl{grid-template-columns:14rem 1fr;gap:var(--sp-4)}}
.tl h3{font-size:var(--s-1);color:var(--accent-dark);
  font-variation-settings:"SOFT" 20,"WONK" 0}
.tl p{margin:0;color:var(--on-dark-dim);max-width:56ch}

/* ---- prices table ---- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);background:var(--paper)}
table.prices{width:100%;border-collapse:collapse;font-size:var(--s--1);min-width:40rem;
  font-variant-numeric:tabular-nums}
table.prices th,table.prices td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--line-soft)}
table.prices thead th{background:var(--ink-deep);color:var(--on-dark);font-family:var(--sans);
  font-size:calc(var(--s--1)*.92);letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  position:sticky;top:0;z-index:2}
table.prices tbody tr:nth-child(even){background:var(--paper-2)}
@media (hover:hover){table.prices tbody tr:hover{background:var(--accent-tint)}}
table.prices td.breed{font-weight:600;color:var(--ink);white-space:nowrap}
table.prices td.na{color:var(--line)}
table.prices .note{display:block;font-size:calc(var(--s--1)*.86);color:var(--accent);
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-top:.15rem}
.tsearch{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-bottom:1.4rem}
.tsearch input{flex:1;min-width:15rem;padding:.85rem 1.1rem;border:1px solid var(--line);
  border-radius:var(--r-2);font:inherit;font-size:var(--s--1);background:var(--paper);color:var(--ink)}
.tsearch input:focus{outline:none;border-color:var(--accent)}
.tcount{font-size:var(--s--1);color:var(--muted);font-variant-numeric:tabular-nums}

/* ---- faq ---- */
.faqgrp{margin-bottom:var(--sp-5)}
.faqgrp>h3{font-size:var(--s-1);margin-bottom:1rem;color:var(--accent)}
details.qa{border-bottom:1px solid var(--line)}
details.qa summary{cursor:pointer;padding:1.15rem 2.5rem 1.15rem 0;font-weight:600;
  color:var(--ink);position:relative;list-style:none}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"";position:absolute;right:.4rem;top:1.55rem;width:9px;height:9px;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg);transition:transform var(--t) var(--e-out)}
details.qa[open] summary::after{transform:rotate(225deg)}
details.qa .a{padding:0 0 1.3rem;color:var(--body);max-width:64ch}
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  details.qa::details-content{block-size:0;overflow:clip;
    transition:block-size var(--t) var(--e-out),content-visibility var(--t) allow-discrete}
  details.qa[open]::details-content{block-size:auto}
}

/* ---- gallery: varied sizes, not a uniform square grid ---- */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
@media (min-width:48rem){.gal{grid-template-columns:repeat(4,1fr);gap:.65rem}}
.gal a{display:block;overflow:clip;border-radius:var(--r-3)}
.gal img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;transition:transform 800ms var(--e-out)}
@media (hover:hover) and (pointer:fine){.gal a:hover img{transform:scale(1.04)}}
@media (min-width:48rem){
  .gal a:nth-child(1),.gal a:nth-child(6){grid-column:span 2;grid-row:span 2}
  .gal a:nth-child(1) img,.gal a:nth-child(6) img{aspect-ratio:1}
}

/* ---- certs / plain panels ---- */
.panels{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:48rem){.panels{grid-template-columns:repeat(3,1fr)}}
.panel{background:var(--paper);padding:var(--sp-4) var(--sp-3)}
.panel h3{font-size:var(--s-0);font-family:var(--sans);font-weight:650;margin-bottom:.5rem;
  letter-spacing:-.005em}
.panel p{font-size:var(--s--1);color:var(--muted);margin:0}
.tint .panel{background:var(--paper-2)}

/* ---- promo band ---- */
.promo{background:var(--accent);color:#fff}
.promo h2,.promo h3{color:#fff}
.promo .lede{color:oklch(1 0 0/.86)}
.fine{font-size:var(--s--1);color:oklch(1 0 0/.6);max-width:60ch;margin-top:1.4rem;line-height:1.5}
.fine.dk{color:var(--muted)}

/* ---- notice ---- */
.notice{border-left:2px solid var(--accent);padding:.2rem 0 .2rem 1.3rem;margin:1.8rem 0}
.notice strong{display:block;color:var(--ink);margin-bottom:.3rem}
.notice p{margin:0;font-size:var(--s--1);color:var(--muted)}

/* ---- steps ---- */
.steps{display:grid;gap:var(--sp-4);counter-reset:s}
@media (min-width:52rem){.steps{grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}}
.step{counter-increment:s;padding-top:1.1rem;border-top:1px solid var(--line)}
.step::before{content:counter(s,decimal-leading-zero);font-family:var(--serif);
  font-size:var(--s--1);color:var(--accent);letter-spacing:.08em;display:block;margin-bottom:.9rem}
.step h3{font-size:var(--s-0);font-family:var(--sans);font-weight:650;margin-bottom:.45rem}
.step p{color:var(--muted);font-size:var(--s--1);margin:0}

/* ---- forms ---- */
.formcard{background:var(--paper);border:1px solid var(--line);padding:clamp(1.4rem,3vw,2.4rem)}
.tint .formcard{background:var(--paper)}
.formcard h3{margin-bottom:.55rem}
.formcard h3 + p{margin-top:0;color:var(--muted)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:var(--s--1);font-weight:600;color:var(--ink);margin-bottom:.4rem}
.field input,.field select,.field textarea{width:100%;padding:.8rem 1rem;border:1px solid var(--line);
  border-radius:var(--r-2);font:inherit;font-size:var(--s--1);background:var(--paper);color:var(--ink)}
.field textarea{min-height:8rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.cgrid{display:grid;gap:var(--sp-5)}
@media (min-width:56rem){.cgrid{grid-template-columns:1fr 1fr}}
.mapembed{border:0;width:100%;min-height:16rem;display:block;filter:grayscale(1) contrast(.92);
  transition:filter var(--t-slow) var(--e-out)}
@media (hover:hover){.mapembed:hover{filter:none}}

/* ---- footer ---- */
footer.site{background:var(--ink-deep);color:var(--on-dark-dim);padding:var(--sp-6) 0 var(--sp-4);
  font-size:var(--s--1)}
footer.site a{color:var(--on-dark-dim);text-decoration:none}
@media (hover:hover){footer.site a:hover{color:var(--accent-dark)}}
.f-top{display:grid;gap:var(--sp-5);padding-bottom:var(--sp-5);
  border-bottom:1px solid oklch(0.945 0.01 var(--h)/.13)}
@media (min-width:60rem){.f-top{grid-template-columns:1fr 1.5fr}}
.f-brand img{height:56px;width:auto;margin-bottom:1.2rem;filter:brightness(0) invert(1);opacity:.92}
.f-brand p{max-width:38ch;line-height:1.6}
.f-contact a{color:var(--on-dark);font-weight:600}
.f-locs{display:grid;gap:var(--sp-4)}
@media (min-width:40rem){.f-locs{grid-template-columns:1fr 1fr}}
.loc h3{color:var(--on-dark);font-size:var(--s-0);font-family:var(--sans);font-weight:650;margin-bottom:.5rem}
.loc-blurb{margin-bottom:.8rem;line-height:1.55}
.loc address{font-style:normal;color:var(--on-dark);margin-bottom:.9rem}
.hours{font-variant-numeric:tabular-nums}
.hours .hr{display:flex;justify-content:space-between;gap:1rem;padding:.28rem 0;
  border-bottom:1px solid oklch(0.945 0.01 var(--h)/.08)}
.hours dd{color:var(--on-dark);text-align:right}
.loc-social{margin-top:.9rem}
.f-cols{display:grid;gap:var(--sp-4);padding:var(--sp-5) 0 var(--sp-4)}
@media (min-width:48rem){.f-cols{grid-template-columns:1fr 1fr 1.6fr}}
.f-cols h4{color:var(--on-dark);margin-bottom:.9rem}
.f-cols ul{list-style:none}
.f-cols li{margin-bottom:.55rem}
.f-areas ul{columns:2;column-gap:1.4rem}
.f-legal{padding-top:var(--sp-3);border-top:1px solid oklch(0.945 0.01 var(--h)/.13);
  color:oklch(0.945 0.01 var(--h)/.42)}

/* ---- interior page hero: orients, does not sell. Short, and always has the CTA. ---- */
.page-hero{position:relative;background:var(--ink-deep);overflow:clip;isolation:isolate;padding:0}
.page-hero__grid{display:grid;grid-template-columns:1fr;align-items:center}
@media (min-width:60rem){
  .page-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);min-height:20rem}
}
.page-hero__copy{padding:var(--sp-5) 0;position:relative;z-index:2}
@media (min-width:60rem){.page-hero__copy{padding:var(--sp-5) var(--sp-4) var(--sp-5) 0}}
.page-hero h1{color:var(--on-dark);max-width:16ch;text-wrap:balance}
.page-hero p{color:var(--on-dark-dim);font-size:var(--s-1);max-width:48ch;margin:1rem 0 0;line-height:1.45;text-wrap:pretty}
.page-hero .hero-cta{margin-top:1.9rem}
.page-hero__media{position:relative;margin:0 calc(var(--gut) * -1) 0;min-height:14rem}
@media (min-width:60rem){.page-hero__media{margin:0 calc(var(--gut) * -1) 0 0;align-self:stretch;min-height:0}}
.page-hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--ink-deep) 0%,oklch(0.168 0.028 var(--h)/.55) 32%,transparent 72%)}
@media (max-width:59.99rem){
  .page-hero__media::after{background:linear-gradient(180deg,var(--ink-deep) 0%,oklch(0.168 0.028 var(--h)/.35) 40%,transparent 100%)}
}
/* utility pages get a typographic band and no photo, so the h1 is the LCP */
.page-hero.plain{background:
  radial-gradient(120% 150% at 88% -30%, oklch(0.495 0.150 var(--h)/.22) 0%, transparent 62%), var(--ink-deep)}
.page-hero.plain .page-hero__grid{grid-template-columns:1fr;min-height:0}
.page-hero.plain .page-hero__copy{padding:calc(var(--sp-4) * 1.15) 0 var(--sp-4)}
.crumb{font-size:var(--s--1);color:oklch(0.945 0.01 var(--h)/.55);margin-bottom:1rem;
  letter-spacing:.05em}
.crumb a{color:oklch(0.945 0.01 var(--h)/.78)}
.crumb a:hover{color:var(--on-dark)}

/* ---- prose ---- */
.prose h2{margin:var(--sp-5) 0 .8rem}
.prose h2:first-child{margin-top:0}
.prose h3{margin:var(--sp-4) 0 .5rem}
.prose ul,.prose ol{margin:0 0 1.2rem 1.2rem}
.prose li{margin-bottom:.5rem}
.prose p{max-width:66ch}
.prose table{width:100%;border-collapse:collapse;margin-bottom:1.4rem;font-size:var(--s--1)}
.prose th,.prose td{padding:.65rem .85rem;border:1px solid var(--line);text-align:left}
.prose th{background:var(--paper-2);font-weight:650;color:var(--ink)}

/* ---- entrance motion: native scroll-driven, JS only as fallback ---- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .rv{animation:rise both;animation-timeline:view();animation-range:entry 5% cover 26%;
      animation-fill-mode:both}
  }
  @supports not (animation-timeline: view()){
    .rv{opacity:0;transform:translateY(14px);
      transition:opacity var(--t-slow) var(--e-out),transform var(--t-slow) var(--e-out)}
    .rv.in{opacity:1;transform:none}
  }
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

@media (max-width:66rem){
  nav.desk,.bar-cta .tel{display:none}
  .burger{display:flex}
  .bar{justify-content:space-between;gap:1rem}
  .bar-cta{margin-left:auto}
}
@media (max-width:34rem){
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{justify-content:center}
  .f-areas ul{columns:1}
}

/* ---- plain container for layout sections (the grid above is for prose) ---- */
:root{--gut:clamp(1.15rem,5vw,3rem)}
.holder{max-width:82rem;margin:0 auto;padding-inline:var(--gut)}
.holder.tightw{max-width:62rem}
.holder.prose{max-width:48rem}


/* ==========================================================================
   2026-09-01 pass. Priority is legibility and scanning, not composition.
   Everything here exists to shorten the distance between landing and booking.
   ========================================================================== */

/* ---- hero: CTA must clear the fold at 1366x768. Budget is ~560px of stack. ---- */
.hero{min-height:auto;padding:0}
.hero__grid{position:relative;display:grid;grid-template-columns:1fr;min-height:auto}
@media (min-width:62rem){
  .hero__grid{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
    min-height:min(78svh,42rem);max-height:46rem}
}
.hero__copy{padding-block:clamp(2.5rem,5vh,3.5rem)}
.hero h1{font-size:clamp(2.3rem,1.5rem + 2.9vw,3.9rem);line-height:1.02;
  letter-spacing:-.021em;max-width:15ch;text-wrap:balance}
.hero .lede{font-size:var(--s-1);max-width:44ch;margin-top:1.1rem;text-wrap:pretty}
.hero .hero-cta{margin-top:1.7rem}

/* the slideshow. Background only: the headline and CTA never move, so nothing
   important is ever hidden mid-transition. */
.hero__media{position:relative;overflow:clip;display:grid;isolation:isolate}
.hero__slides{position:absolute;inset:0}
.hero__slides .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 44%;opacity:0;transition:opacity 1200ms cubic-bezier(.4,0,.2,1)}
.hero__slides .slide.is-on{opacity:1}
.hero__pause{position:absolute;right:.85rem;bottom:.85rem;z-index:3;
  width:2.5rem;height:2.5rem;display:grid;place-items:center;border:0;cursor:pointer;
  border-radius:var(--r-pill);background:oklch(0.168 0.028 var(--h)/.5);color:#fff;
  opacity:.55;transition:opacity var(--t) var(--e-out),background var(--t) var(--e-out)}
.hero__pause:hover,.hero__pause:focus-visible{opacity:1;background:oklch(0.168 0.028 var(--h)/.8)}
.hero__pause svg{width:1rem;height:1rem;fill:currentColor}
@media (prefers-reduced-motion:reduce){.hero__pause{display:none}}

/* ---- service cards: all four legible on one screen, one fact each ---- */
.scards{display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:1fr}
@media (min-width:38rem){.scards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:68rem){.scards{grid-template-columns:repeat(4,1fr)}}
.scard{position:relative;display:grid;grid-template-rows:auto 1fr auto;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-4);overflow:clip;
  transition:border-color var(--t) var(--e-out),box-shadow var(--t) var(--e-out)}
.scard__media{overflow:clip}
.scard__media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 600ms var(--e-out)}
.scard__body{padding:clamp(1.1rem,2vw,1.5rem)}
.scard h3{font-size:var(--s-1);margin:0 0 .4rem;line-height:1.15}
.scard h3 a{color:inherit;text-decoration:none}
.scard h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.scard p{font-size:var(--s--1);color:var(--body);line-height:1.5;margin:0}
.scard__foot{padding:0 clamp(1.1rem,2vw,1.5rem) clamp(1.1rem,2vw,1.5rem);
  display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  font-size:var(--s--1);font-weight:600;color:var(--ink)}
.scard__foot span.u{color:var(--muted);font-weight:400}
.scard__arw{color:var(--accent);font-weight:400;transition:translate var(--t) var(--e-out)}
@media (hover:hover) and (pointer:fine){
  .scard:hover{border-color:var(--accent-line);box-shadow:0 18px 40px -28px oklch(0.168 0.028 var(--h)/.42)}
  .scard:hover .scard__media img{transform:scale(1.04)}
  .scard:hover .scard__arw{translate:4px 0}
}
.scard:has(a:focus-visible){outline:3px solid var(--accent);outline-offset:3px}

/* ---- team: small portrait beside a short message, because the source photo
   is low resolution and falls apart when it is blown up full bleed ---- */
.teamrow{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center;grid-template-columns:1fr}
@media (min-width:54rem){.teamrow{grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}}
.teamrow__media{margin:0;border-radius:var(--r-4);overflow:clip;max-width:30rem}
.teamrow__media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.teamrow__media figcaption{font-size:var(--s--1);color:var(--muted);padding:.7rem .1rem 0}

/* ---- location switcher. Static HTML always contains BOTH locations; a saved
   preference only ever subtracts. No JS, no preference, and every crawler
   sees the complete dual version. ---- */
.locsw{position:relative}
.locsw__btn{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  font:inherit;font-size:var(--s--1);line-height:1;color:var(--body);
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.55rem .95rem;min-height:2.5rem}
.locsw__btn b{color:var(--ink);font-weight:600}
.locsw__btn:hover{border-color:var(--accent-line)}
.locsw__btn svg{width:.7rem;height:.7rem;fill:currentColor;opacity:.6}
.locsw__panel{position:absolute;right:0;top:calc(100% + .5rem);z-index:60;margin:0;
  min-width:19rem;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-4);box-shadow:0 24px 60px -30px oklch(0.168 0.028 var(--h)/.5);
  padding:.5rem;list-style:none}
.locsw__panel[hidden]{display:none}
.locsw__panel a{display:block;padding:.75rem .85rem;border-radius:var(--r-2);
  text-decoration:none;color:var(--ink);font-weight:600;font-size:var(--s--1)}
.locsw__panel a span{display:block;font-weight:400;color:var(--muted);margin-top:.2rem}
.locsw__panel a:hover{background:var(--paper-2)}
.locsw__panel a[aria-current="true"]::before{content:"\2713\00a0\00a0";color:var(--accent)}
[data-loc="fairburn"] [data-only="atlanta"],
[data-loc="atlanta"]  [data-only="fairburn"]{display:none}

/* ---- location cards on /locations ---- */
.loccards{display:grid;gap:clamp(1.25rem,3vw,2rem);grid-template-columns:1fr}
@media (min-width:52rem){.loccards{grid-template-columns:repeat(2,1fr)}}
.loccard{border:1px solid var(--line);border-radius:var(--r-4);overflow:clip;background:var(--paper);
  display:flex;flex-direction:column}
.loccard>img,.loccard>picture>img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}

.loccard__body{padding:clamp(1.35rem,3vw,2rem);display:flex;flex-direction:column;flex:1}
.loccard h3{font-size:var(--s-2);margin-bottom:.3rem}
.loccard .tagline{color:var(--accent);font-size:var(--s--1);font-weight:600;margin-bottom:.9rem}
.loccard address{font-style:normal;color:var(--body);margin-bottom:1rem}
.loccard .hours{margin-bottom:1.3rem}
.loccard__cta{margin-top:auto;display:flex;flex-wrap:wrap;gap:.6rem}

/* ---- gallery page ---- */
.ggrid{display:grid;gap:clamp(.5rem,1.2vw,.9rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
.ggrid figure{margin:0}
.gbtn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:var(--r-3);overflow:clip}
.gbtn img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 500ms var(--e-out)}
@media (hover:hover) and (pointer:fine){.gbtn:hover img{transform:scale(1.05)}}
.gbtn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media (min-width:56rem){
  .ggrid figure:nth-child(9n+1){grid-column:span 2;grid-row:span 2}
  .ggrid figure:nth-child(9n+1) img{aspect-ratio:1}
}
dialog.lb{margin:auto;max-width:min(94vw,74rem);max-height:92svh;padding:0;border:0;
  border-radius:var(--r-4);background:var(--paper);overflow:clip}
dialog.lb::backdrop{background:oklch(0.168 0.028 312/.86)}
dialog.lb img{display:block;width:100%;height:auto;max-height:80svh;object-fit:contain;background:var(--ink-deep)}
.lb__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem 1.1rem;font-size:var(--s--1);color:var(--muted)}
.lb__x{border:0;background:var(--paper-2);border-radius:var(--r-pill);width:2.25rem;height:2.25rem;
  cursor:pointer;font-size:1.1rem;line-height:1;color:var(--ink)}
.lb__x:hover{background:var(--paper-3)}

/* ---- mobile sticky call/book bar: the single highest-leverage element on a
   local service site. Desktop keeps the header buttons instead. ---- */
.stickybar{position:fixed;inset-inline:0;bottom:0;z-index:70;display:none;
  gap:.5rem;padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom));
  background:oklch(0.988 0.004 var(--h)/.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--line)}
.stickybar .btn{flex:1;justify-content:center;padding:.85rem 1rem;font-size:var(--s--1)}
@media (max-width:47.99rem){.stickybar{display:flex}body{padding-bottom:4.5rem}}
@media print{.stickybar{display:none}}

/* ---- upgrade + extras tables ---- */
.rates{width:100%;border-collapse:collapse;margin-top:1.2rem}
.rates th,.rates td{text-align:left;padding:.85rem 0;border-bottom:1px solid var(--line);
  font-size:var(--s--1);vertical-align:top}
.rates th{font-weight:600;color:var(--ink);width:38%}
.rates td:last-child{text-align:right;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums}
.rates td.n{white-space:nowrap}
.rates th{width:auto;padding-right:1.5rem}
.rates .why{color:var(--muted);font-weight:400}

/* ---- compare strip (chain suite vs ours) ---- */
.compare{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:var(--sp-4)}
@media (min-width:44rem){.compare{grid-template-columns:repeat(2,1fr)}}
.compare div{border:1px solid var(--line);border-radius:var(--r-4);padding:1.4rem 1.6rem}
.compare div:last-child{border-color:var(--accent-line);background:var(--accent-tint)}
.compare b{display:block;font-size:var(--s--1);color:var(--muted);font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:.4rem}
.compare span{font-family:var(--serif);font-size:var(--s-1);color:var(--ink)}

/* ---- stat band ---- */
.stats{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr);margin-top:var(--sp-4)}
@media (min-width:52rem){.stats{grid-template-columns:repeat(4,1fr)}}
.stats div{border-left:2px solid var(--accent-line);padding-left:1rem}
.stats b{display:block;font-family:var(--serif);font-size:var(--s-2);color:var(--ink);line-height:1.1}
.stats span{font-size:var(--s--1);color:var(--muted)}

/* footer logo: the raster mark sits on a near-white plate, so brightness/invert
   floods it. A knocked-out light version is generated at build time instead. */
.f-brand img{filter:none;opacity:1}

/* ---- odds and ends for the 2026-09-01 pass ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.hero-trust{margin-top:1.4rem;font-size:var(--s--1);color:var(--muted);
  border-top:1px solid var(--line);padding-top:1rem;max-width:44ch}
.svc-band{padding-block:var(--sp-5)}
.svc-band .shead{margin-bottom:var(--sp-4)}

/* the header switcher only earns its space on wide screens; the mobile nav
   carries both locations as plain links instead */
.locsw{display:block}
.locsw__lab{color:var(--muted)}
.locsw__btn [data-only]{display:none}
[data-loc="fairburn"] .locsw__btn [data-only="fairburn"],
[data-loc="atlanta"]  .locsw__btn [data-only="atlanta"]{display:inline}
[data-loc] .locsw__both{display:none}

.jumps{display:flex;flex-wrap:wrap;gap:.5rem}
.ticks.sm li{font-size:var(--s--1);margin-bottom:.5rem}
.ticks.cols{columns:2;column-gap:2.5rem}
@media (max-width:44rem){.ticks.cols{columns:1}}
.suites{padding-top:.75rem}
.rates + .tlink{margin-top:1rem}
.loccard .hours dt{font-size:var(--s--1)}
.gal + p .btn{margin-top:0}

/* Responsive images are wrapped in <picture> at build time, so any layout that
   depends on the <img> being the flex/grid child must style the wrapper too. */
picture{display:contents}

/* ---- slim utility strip above the main bar: location state, phone, portal ---- */
.util{background:var(--ink-deep);color:var(--on-dark-dim);font-size:var(--s--1)}
.util__in{max-width:96rem;margin:0 auto;padding:.35rem clamp(1.15rem,5vw,3rem);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2.6rem}
.util__right{display:flex;align-items:center;gap:1.4rem}
.util__right a{color:var(--on-dark-dim);text-decoration:none;white-space:nowrap}
.util__right a:hover{color:var(--on-dark)}
@media (max-width:56rem){.util__right a:first-child{display:none}}
.util__right a{font-size:var(--s--1)}
@media (max-width:34rem){.util__right{display:none}}
.util .locsw__btn{background:transparent;border-color:oklch(0.945 0.01 var(--h)/.28);
  color:var(--on-dark-dim);min-height:2rem;padding:.3rem .8rem}
.util .locsw__btn b{color:var(--on-dark)}
.util .locsw__btn:hover{border-color:var(--on-dark)}
.util .locsw__lab{color:oklch(0.945 0.01 var(--h)/.6)}
.util .locsw__panel{left:0;right:auto;color:var(--ink)}
.bar-cta .btn.sm{white-space:nowrap}
nav.desk ul{gap:1.35rem}
@media (min-width:75rem){nav.desk ul{gap:1.7rem}}

/* the reset zeroes every margin, so restore the rhythm explicitly where a
   heading is followed by body copy outside .shead */
:is(h2,h3) + p,
:is(h2,h3) + .lede,
:is(h2,h3) + ul,
:is(h2,h3) + table,
:is(h2,h3) + .compare{margin-top:.85rem}
p + p{margin-top:.9rem}
.teamrow h2 + p{margin-top:1rem}
.teamrow .tlink{display:inline-block;margin-top:1.2rem}

/* Touch targets. WCAG 2.2 SC 2.5.8 sets 24px as the floor; 44 is the usable
   figure, and footer link lists are always the offender on a phone. */
@media (max-width:60rem){
  .f-cols li a,.f-areas li a{display:inline-block;padding-block:.45rem}
  .f-contact a,.loc-social a{display:inline-block;padding-block:.35rem}
  nav.mob a{padding-block:.9rem}
}

/* section headings: the two columns must share a top edge, or a long lede
   drags the h2 to the bottom of the row */
@media (min-width:56rem){.shead{align-items:start}}

/* panels: column count follows the item count, so a 4-item set is 2x2 rather
   than a row of three plus an orphan beside an empty cell */
.panels:has(> :last-child:nth-child(2)){grid-template-columns:repeat(2,1fr)}
@media (min-width:48rem){
  .panels:has(> :last-child:nth-child(4)){grid-template-columns:repeat(2,1fr)}
  .panels:has(> :last-child:nth-child(2)){grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   LIGHT THEME. The dark bands read as a different brand from her logo and
   her photography, both of which are light and warm. Everything below flips
   the page to paper, keeps the purple as a real accent, and reserves dark
   for exactly one band (the promo) so it still lands.
   ========================================================================== */

/* ---- hero ---- */
.hero{background:var(--paper);color:var(--body)}
.hero h1{color:var(--ink)}
.hero h1 em{color:var(--accent)}
.hero .eyebrow{color:var(--accent)}
.hero .lede{color:var(--body)}
.hero-trust{color:var(--muted);border-top-color:var(--line)}
.hero__media{background:var(--paper-3)}
.hero__media::after{background:none}
@media (min-width:62rem){
  /* a hairline, not a scrim: the photo now sits on paper, so the join needs
     definition rather than darkening */
  .hero__media{border-left:1px solid var(--line)}
}
/* Mobile: the photo becomes the background of the hero rather than a block
   stacked underneath it, with a paper scrim so the type stays legible. */
@media (max-width:61.99rem){
  .hero{position:relative;isolation:isolate}
  .hero .holder{position:relative}
  .hero__grid{position:relative}
  .hero__media{position:absolute;inset:0 calc(var(--gut) * -1);z-index:0;
    aspect-ratio:auto;min-height:0;border:0;background:none}
  /* PURPLE scrim, not paper. Charlie 2026-09-18: her existing site tints the
     hero photo purple and runs white type over it, and that is the look she
     chose, so the rebuild follows it. The veil is deep enough at the top for
     the eyebrow and headline, and lifts towards the bottom so the photo still
     reads as a photo. */
  .hero__media::after{content:"";position:absolute;inset:0;z-index:1;background:
    linear-gradient(180deg,
      oklch(0.325 0.085 var(--h)/.93) 0%,
      oklch(0.325 0.085 var(--h)/.88) 46%,
      oklch(0.325 0.085 var(--h)/.76) 78%,
      oklch(0.300 0.080 var(--h)/.62) 100%)}
  .hero__copy{position:relative;z-index:2;padding-block:clamp(2.25rem,7vh,3.25rem) clamp(3rem,9vh,4.5rem)}
  .hero__pause{display:none}

  /* type flips to light over the purple */
  .hero .eyebrow{color:oklch(0.880 0.080 var(--h))}
  .hero h1{color:var(--on-dark)}
  .hero h1 em{color:oklch(0.865 0.095 var(--h))}
  .hero .lede{color:oklch(0.930 0.012 var(--h))}
  .hero-rule{border-top-color:oklch(1 0 0/.22)}
  .hero-rule,.hero-rule b{color:oklch(0.905 0.014 var(--h))}
  .hero-rule b{color:var(--on-dark)}
  /* the outline button needs a light edge now, not an ink one */
  .hero-cta .btn.ghost,.hero-cta .btn.edge{
    color:var(--on-dark);border-color:oklch(1 0 0/.45);background:transparent}
  .hero-cta .btn.ghost:hover,.hero-cta .btn.edge:hover{
    background:oklch(1 0 0/.12);border-color:oklch(1 0 0/.7)}
}

/* ---- interior heroes ---- */
.page-hero{background:
  radial-gradient(110% 130% at 92% -25%, oklch(0.495 0.150 var(--h)/.10) 0%, transparent 58%),
  var(--paper-2);
  border-bottom:1px solid var(--line)}
.page-hero h1{color:var(--ink)}
.page-hero p{color:var(--body)}
.page-hero__media::after{background:none}
@media (min-width:60rem){.page-hero__media{border-left:1px solid var(--line)}}
@media (max-width:59.99rem){
  .page-hero__media{margin-inline:calc(var(--gut) * -1);border-radius:0}
  .page-hero__media::after{background:none}
}
.page-hero.plain{background:
  radial-gradient(110% 130% at 92% -25%, oklch(0.495 0.150 var(--h)/.12) 0%, transparent 58%),
  var(--paper-2)}
.crumb{color:var(--muted)}
.crumb a{color:var(--body)}
.crumb a:hover{color:var(--accent)}
.crumb [aria-current]{color:var(--muted)}

/* ---- utility strip ---- */
.util{background:var(--paper-3);color:var(--body);border-bottom:1px solid var(--line)}
.util__right a{color:var(--body)}
.util__right a:hover{color:var(--accent)}
.util .locsw__btn{background:var(--paper);border-color:var(--line);color:var(--body)}
.util .locsw__btn b{color:var(--ink)}
.util .locsw__lab{color:var(--muted)}

/* ---- the stat ledger ---- */
.ledger{background:var(--accent-tint);color:var(--body);
  border-block:1px solid var(--accent-line)}
.ledger b{color:var(--accent)}

/* ---- the one remaining dark band becomes a soft tinted one ---- */
.dark{background:var(--paper-2);color:var(--body);border-block:1px solid var(--line)}
.dark h1,.dark h2,.dark h3{color:var(--ink)}
.dark .lede{color:var(--body)}
.dark a{color:var(--accent)}
.dark .eyebrow{color:var(--accent)}
.dark .ticks li{color:var(--body)}
.dark .ticks li::before{background:var(--accent)}
.dark .stat .n{color:var(--ink)}
.dark .stat .l{color:var(--muted)}
.dark .tl h3{color:var(--accent)}
.dark .tl p{color:var(--body)}
.dark .tl{border-color:var(--line)}

/* ---- footer ---- */
footer.site{background:var(--paper-2);color:var(--body);
  border-top:1px solid var(--line)}
footer.site a{color:var(--body)}
@media (hover:hover){footer.site a:hover{color:var(--accent)}}
footer.site :is(h3,h4){color:var(--ink)}
.f-brand img{filter:none;opacity:1}
.f-top,.f-cols{border-color:var(--line)}
.f-legal{color:var(--muted)}
.f-brand p{color:var(--body)}
.loc-blurb,.hours dd{color:var(--muted)}
.f-brand .btn.ghost{margin-left:.5rem}

/* keep the purple promo band as the single high-contrast moment */
.promo .eyebrow{color:oklch(1 0 0/.75)}

/* ==========================================================================
   WARM PASS. Reference: stelo.com. Same idea, her hue.
   A warm cream ground rather than a cool white, one deep plum that does all
   the dark work, and an apricot secondary so the palette reads earthy rather
   than clinical. Headings lose weight and gain size, which is most of what
   makes that reference feel expensive.
   ========================================================================== */
:root{
  /* grounds: warm, not blue-white */
  --paper:    oklch(0.972 0.006 78);
  --paper-2:  oklch(0.951 0.009 76);
  --paper-3:  oklch(0.921 0.012 74);
  --line:     oklch(0.880 0.012 72);
  --line-soft:oklch(0.921 0.010 74);

  /* one deep plum does every dark job */
  --ink:      oklch(0.268 0.058 340);
  --ink-deep: oklch(0.213 0.052 340);
  --body:     oklch(0.436 0.030 340);
  --muted:    oklch(0.568 0.024 340);

  /* her purple stays the accent; apricot is the earthy secondary */
  --accent:      oklch(0.495 0.150 var(--h));
  --accent-hover:oklch(0.425 0.160 var(--h));
  --accent-tint: oklch(0.949 0.020 var(--h));
  --accent-line: oklch(0.862 0.052 var(--h));
  --on-dark:     oklch(0.968 0.008 78);
  --on-dark-dim: oklch(0.812 0.018 60);
  --accent-dark: oklch(0.790 0.110 var(--h));
  --warm:        oklch(0.836 0.092 62);
  --warm-deep:   oklch(0.735 0.118 55);
}

/* Headings: 400-450, not 600. Large and light is the whole trick. */
h1,h2,h3{font-weight:430;font-variation-settings:"SOFT" 28,"WONK" 1}
h1{letter-spacing:-.024em;line-height:1.04}
h2{letter-spacing:-.018em;line-height:1.12}
.hero h1{font-weight:420}
.suite .price{font-weight:430}
.btn{font-weight:500;letter-spacing:0}

body{background:var(--paper);color:var(--body)}

/* ---- floating header, the clearest cue from the reference ---- */
@media (min-width:66rem){
  header.site{background:none;border:0;position:sticky;top:0;z-index:50}
  header.site .bar{margin:.7rem auto;width:min(100% - 2rem, 92rem);
    background:oklch(0.972 0.006 78/.86);backdrop-filter:blur(14px) saturate(1.3);
    border:1px solid oklch(0.880 0.012 72/.8);border-radius:var(--r-pill);
    padding:.55rem .7rem .55rem 1.4rem;
    box-shadow:0 10px 34px -26px oklch(0.213 0.052 340/.55)}
}
.util{background:var(--paper-2);border-bottom:1px solid var(--line)}

/* ---- panels and media get the reference's generous radius ---- */
.plate,.plate img{border-radius:var(--r-5)}
.plate{overflow:clip;margin-inline:auto;width:min(100% - 2rem,92rem)}
.sp-media img,.srow__media,.teamrow__media,.loccard,.formcard{border-radius:var(--r-5)}
.scard{border-radius:var(--r-5)}
.suite{border-radius:var(--r-5)}
@media (min-width:62rem){
  .hero__media{border-radius:var(--r-5);overflow:clip;border-left:0;
    margin:0 0 clamp(1rem,2vw,2rem) 0}
}
@media (min-width:60rem){
  .page-hero__media{border-radius:var(--r-5);overflow:clip;border-left:0;
    margin:clamp(1rem,2vw,1.75rem) 0 clamp(1rem,2vw,1.75rem) clamp(1rem,2vw,2rem)}
}

/* ---- the apricot secondary earns its keep on the one highlighted tier ---- */
.suite__flag{background:var(--warm);color:var(--ink)}
.suite.feat{border-color:var(--warm-deep);background:oklch(0.968 0.020 70)}
.ledger{background:oklch(0.962 0.018 70);border-block-color:oklch(0.890 0.038 66)}
.ledger b{color:var(--ink)}

/* ---- reveal: fade, rise, and a touch of blur, like the reference ---- */
@keyframes rise{from{opacity:0;transform:translateY(20px);filter:blur(6px)}
                to{opacity:1;transform:none;filter:blur(0)}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .rv{animation-range:entry 2% cover 22%}
  }
}

/* Reveal is opt-out, not opt-in: it only exists inside @supports, so a browser
   without scroll-driven animation simply shows everything, and nothing is ever
   left invisible if the animation does not run. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .shead,.scard,.suite,.loccard,.panel,.teamrow__media,.teamrow>div,
    .sp-media,.compare div,.stats div,.tl,.step,.ggrid figure,.hero-trust{
      animation:rise both;animation-timeline:view();animation-range:entry 2% cover 20%}
  }
}

/* .light and .edge are the ON-DARK button variants. Now that the page is
   light they would be invisible, so they fall back to the normal pair and
   only invert inside a dark band. One rule set, no template churn. */
.btn.light{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.edge{background:transparent;color:var(--ink);border-color:var(--line)}
@media (hover:hover) and (pointer:fine){
  .btn.light:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
  .btn.edge:hover{border-color:var(--ink);color:var(--ink)}
}
:is(.promo,.dark,.hero--dark) .btn.light{background:var(--on-dark);color:var(--ink-deep);border-color:var(--on-dark)}
:is(.promo,.dark,.hero--dark) .btn.edge{background:transparent;color:var(--on-dark);
  border-color:oklch(0.968 0.008 78/.45)}
@media (hover:hover) and (pointer:fine){
  :is(.promo,.dark) .btn.light:hover{background:#fff;border-color:#fff}
  :is(.promo,.dark) .btn.edge:hover{border-color:var(--on-dark);color:var(--on-dark);
    background:oklch(0.968 0.008 78/.1)}
}

/* the logo has a wordmark and a strapline; the floating bar is short, so give
   it the room it needs rather than clipping the strapline */
.brand img{height:42px}
@media (min-width:66rem){
  header.site .bar{padding-block:.6rem}
  .brand img{height:48px}
}

/* the floating header overlays content, so in-page anchors need clearance */
html{scroll-padding-top:7.5rem}

/* promo band: centred, so the purple field does not read as half empty */
.promo .holder{text-align:center}
.promo .lede{margin-inline:auto}
.promo .hero-cta{justify-content:center}
.promo .fine{margin-inline:auto;max-width:46ch}

/* Button text must never inherit from a container's link colour. The footer
   and the tinted bands each set `a{color:...}`, which was beating .btn and
   leaving dark text on a purple pill. :where() keeps these at the same
   specificity as the container rules while landing later in the cascade, so
   the variants below still win on their own. */
footer.site a.btn,
.dark a.btn,.tint a.btn,.sand a.btn,.cream a.btn,.promo a.btn,
.page-hero a.btn,.hero a.btn{color:#fff}
footer.site a.btn.ghost,footer.site a.btn.edge,
.dark a.btn.ghost,.tint a.btn.ghost,.sand a.btn.ghost,.cream a.btn.ghost,
.page-hero a.btn.ghost,.page-hero a.btn.edge,
.hero a.btn.ghost,.hero a.btn.edge{color:var(--ink)}
.promo a.btn.light,.dark a.btn.light{color:var(--ink-deep)}
.promo a.btn.edge,.dark a.btn.edge{color:var(--on-dark)}

/* leftovers from when the footer was dark: anything that was painted --on-dark
   inside the footer is now invisible on cream */
footer.site .loc h3,footer.site .loc h3 a{color:var(--ink)}
footer.site .loc address{color:var(--body)}
footer.site .hours dd{color:var(--body)}
footer.site .hours dt{color:var(--muted)}
footer.site .f-contact a{color:var(--ink)}
footer.site .f-cols h4{color:var(--ink)}
footer.site{color:var(--body)}
.hero-rule b{color:var(--ink)}

/* disclaimer on the purple band was 3.47:1; AA wants 4.5 for small text */
.promo .fine{color:oklch(0.94 0.012 78/.92)}

/* SMS program disclosure in the footer. Deliberately plain and readable: a
   carrier reviewer has to be able to find the consent language, the frequency
   and the STOP/HELP keywords without opening the chat widget. */
.smsblock{border-top:1px solid var(--line);padding-top:var(--sp-4);margin-top:var(--sp-4);
  max-width:78ch}
.smsblock h3{font-family:var(--sans);font-size:var(--s--1);font-weight:650;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink);margin-bottom:.9rem}
.smsblock p{font-size:var(--s--1);color:var(--body);line-height:1.55;margin-bottom:.7rem}
.smsblock strong{color:var(--ink)}
.smsblock em{font-style:italic}
.smsblock ul{list-style:none;margin:.9rem 0}
.smsblock li{position:relative;padding-left:1.1rem;margin-bottom:.4rem;
  font-size:var(--s--1);color:var(--body);line-height:1.5}
.smsblock li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;
  background:var(--accent)}

/* A2P build shows the registered legal name instead of the logo mark, so the
   name at the top of every page is literally the name on the GA filing. */
.brand.wordmark{display:flex;flex-direction:column;gap:.15rem;text-decoration:none;line-height:1.1}
.wordmark__name{font-family:var(--serif);font-size:var(--s-0);font-weight:500;
  color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.wordmark__dba{font-family:var(--sans);font-size:.72rem;color:var(--muted);
  letter-spacing:.04em;white-space:nowrap}
.f-wordmark{font-size:var(--s-1);margin-bottom:1.2rem}
@media (max-width:34rem){.wordmark__dba{display:none}}

/* ==========================================================================
   PURPLE HEADER, reveal on scroll.  Charlie 2026-09-18, matching her own site.

   Her logo REQUIRES a dark ground. The "Daycare, Groom & Board" strapline is
   white on transparency, so on a light bar the bottom half of the lockup simply
   disappears. Verified by compositing the source file on white and on purple.

   FIRST ATTEMPT WAS WRONG, do not put it back: it dissolved the bar to
   transparent at the top of the home page on the assumption the hero was dark.
   The warm-light rebuild made the hero CREAM, so the logo lost its strapline on
   first paint, which is the single worst place for it to happen. The bar is
   therefore ALWAYS purple. What changes on scroll is its shape.
   ========================================================================== */
header.site{
  background:var(--accent);
  border-bottom:0;
  transition:background var(--t) var(--e-out), box-shadow var(--t) var(--e-out);
}
header.site .bar-cta .tel,
header.site nav.desk a{color:var(--on-dark)}
header.site nav.desk a::after{background:var(--on-dark)}
header.site .burger span{background:var(--on-dark)}
header.site .brand img{height:52px;width:auto}
.util{background:var(--accent-hover);border-bottom:0}
.util a{color:var(--on-dark-dim)}
.util a:hover{color:var(--on-dark)}

/* At the top it sits flush, part of the masthead. Once you scroll it lifts into
   the floating pill, which is the premium cue the rest of the site uses. */
@media (min-width:66rem){
  header.site{background:none}
  header.site .bar{
    background:var(--accent);
    border:1px solid transparent;
    border-radius:0;
    width:100%;
    margin:0 auto;
    box-shadow:none;
    transition:width 420ms var(--e-out), border-radius 420ms var(--e-out),
               margin 420ms var(--e-out), box-shadow 420ms var(--e-out);
  }
  header.site.is-stuck .bar{
    width:min(100% - 2rem, 92rem);
    margin:.7rem auto;
    border-radius:var(--r-pill);
    border-color:oklch(0.560 0.140 var(--h)/.5);
    box-shadow:0 12px 34px -22px oklch(0.168 0.028 var(--h)/.9);
  }
}
@media (prefers-reduced-motion:reduce){
  header.site .bar,header.site.is-stuck .bar{transition:none}
}

/* ==========================================================================
   MOBILE HERO over the purple scrim, final word on colour.
   These live at the very end on purpose. `.hero a.btn.edge{color:var(--ink)}`
   further up is more specific than a .hero-cta rule and was winning, which is
   why the Call button stayed dark on the purple. Same for .hero-trust, which
   is set to --muted twice earlier in the sheet.
   Charlie 2026-09-18: light type, light button edge, and a touch larger.
   ========================================================================== */
@media (max-width:61.99rem){
  .hero a.btn.edge,
  .hero a.btn.ghost{
    color:var(--on-dark);
    border-color:oklch(1 0 0/.55);
    background:transparent;
  }
  .hero a.btn.light{background:var(--accent);color:#fff;border-color:oklch(1 0 0/.35)}
  .hero .hero-trust{
    color:oklch(0.925 0.014 var(--h));
    border-top-color:oklch(1 0 0/.28);
  }
  .hero .eyebrow{color:oklch(0.885 0.085 var(--h))}
  .hero h1{color:var(--on-dark)}
  .hero h1 em{color:oklch(0.870 0.095 var(--h))}
  .hero .lede{color:oklch(0.945 0.012 var(--h))}

  /* a tad bigger, not a size jump */
  .hero h1{font-size:clamp(2.6rem,10.5vw,3.5rem)}
  .hero .lede{font-size:clamp(1.09rem,4.5vw,1.28rem)}
  .hero .hero-trust{font-size:clamp(.92rem,3.6vw,1.02rem)}
  .hero .hero-cta .btn{font-size:1.03rem;padding-block:.95rem}
}

/* Atlanta in the footer is a side note, not a second column of equal weight. */
.loc--aside{opacity:.72}
.loc--aside h3{font-size:var(--s--1);letter-spacing:.06em;text-transform:uppercase}
.loc--aside .loc-blurb{font-size:var(--s--1)}

/* The Google review widget sizes its own iframe. Keep our own padding modest so
   the section does not add a second helping of whitespace underneath it. */
.lc_reviews_widget{display:block;border:0}

/* ==========================================================================
   HEADER DROPDOWNS + BOOKING POPUP.  2026-09-18, Stripe as the reference.
   ========================================================================== */
nav.desk .has-sub{position:relative}
nav.desk .subbtn{display:inline-flex;align-items:center;gap:.4rem;background:none;
  border:0;padding:.2rem 0;font:inherit;font-size:var(--s--1);font-weight:550;
  color:var(--on-dark);cursor:pointer}
nav.desk .subbtn svg{width:11px;height:8px;transition:transform var(--t) var(--e-out)}
nav.desk .has-sub.open .subbtn svg{transform:rotate(180deg)}
nav.desk .submenu{position:absolute;top:calc(100% + .85rem);left:50%;translate:-50% 0;
  min-width:15rem;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-4,14px);box-shadow:0 22px 50px -26px oklch(0.168 0.028 var(--h)/.6);
  padding:.5rem;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--t) var(--e-out),transform var(--t) var(--e-out),visibility var(--t);
  z-index:60}
nav.desk .has-sub.open .submenu{opacity:1;visibility:visible;transform:translateY(0)}
/* a hover bridge so the menu does not vanish while the pointer travels to it */
nav.desk .has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:1rem}
nav.desk .submenu ul{display:block;list-style:none;margin:0;padding:0}
nav.desk .submenu a{display:block;padding:.6rem .8rem;border-radius:9px;
  color:var(--ink);font-weight:500;white-space:nowrap}
nav.desk .submenu a::after{display:none}
nav.desk .submenu a:hover{background:var(--accent-tint);color:var(--accent-hover)}

.bar-cta .portal{color:var(--on-dark);font-size:var(--s--1);font-weight:500;
  text-decoration:none;white-space:nowrap;opacity:.92}
.bar-cta .portal:hover{opacity:1;text-decoration:underline}
nav.mob .portal{display:block;padding:.85rem 0;color:var(--ink);font-weight:500}

.bookmodal{border:0;padding:0;border-radius:var(--r-5,20px);width:min(42rem,calc(100% - 2rem));
  max-height:90dvh;background:var(--paper);color:var(--ink);overflow:hidden}
.bookmodal::backdrop{background:oklch(0.168 0.028 var(--h)/.55);backdrop-filter:blur(3px)}
.bookmodal__x{position:absolute;top:.5rem;right:.75rem;z-index:2}
.bookmodal__x button{background:none;border:0;font-size:1.9rem;line-height:1;
  cursor:pointer;color:var(--muted);padding:.2rem .4rem}
.bookmodal__x button:hover{color:var(--ink)}
.bookmodal__in{padding:1.9rem clamp(1.1rem,3vw,2rem) 1.4rem;overflow-y:auto;max-height:90dvh}
.bookmodal__in h2{font-size:var(--s-2);margin:0 0 .35rem}
.bookmodal__in>p{color:var(--body);margin:0 0 1rem;font-size:var(--s--1)}
.bookmodal iframe{width:100%;border:0;min-height:640px;display:block}

/* the floating header sits over the page, so the hero needs clearance under it
   on desktop or the first slide runs straight into the purple bar */
@media (min-width:66rem){
  .hero{padding-top:clamp(.9rem,1.8vw,1.6rem)}
}

/* The purple header sets `header.site nav.desk a{color:var(--on-dark)}`, which
   is more specific than `nav.desk .submenu a` and was painting the dropdown
   links white on a cream panel, i.e. invisible. Same specificity trap as the
   Call button earlier. Scoped from header.site so it wins outright. */
header.site nav.desk .submenu a{color:var(--ink);opacity:1}
header.site nav.desk .submenu a:hover,
header.site nav.desk .submenu a:focus-visible{color:var(--accent-hover);background:var(--accent-tint)}
/* nothing inside the header should ever be caught by the scroll reveal */
header.site .submenu,header.site .submenu *{animation:none;filter:none}

/* Book Online sat purple on the purple bar, so the pill was invisible. On a
   coloured header the primary action has to invert: cream fill, purple label. */
header.site .bar-cta .btn{
  background:var(--on-dark);color:var(--accent-hover);border-color:var(--on-dark);
  border-radius:var(--r-pill);padding:.62rem 1.35rem;font-weight:650}
@media (hover:hover) and (pointer:fine){
  header.site .bar-cta .btn:hover{background:#fff;border-color:#fff;color:var(--accent-hover)}
}
header.site .bar-cta{gap:1.25rem}

/* the dialog was landing top left and collapsing: native centring needs an
   explicit fixed box, and the close button needs a positioned parent */
.bookmodal{position:fixed;inset:0;margin:auto}
.bookmodal__in{position:relative}
.bookmodal iframe{width:100%;height:min(72dvh,700px);border:0;display:block;
  background:var(--paper)}

/* popup is the form and nothing else */
.bookmodal__in{padding:0}
.bookmodal iframe{height:min(78dvh,760px);border-radius:var(--r-5,20px)}
.bookmodal__x{top:.35rem;right:.5rem}
.bookmodal__x button{background:var(--paper);border-radius:999px;width:2rem;height:2rem;
  display:grid;place-items:center;box-shadow:0 2px 10px -4px oklch(0.168 0.028 var(--h)/.5)}

/* The Google review widget reports its own height, and it over-reports against
   the slider layout, so the section was stacking its padding on top of a chunk
   of empty iframe. Tight padding here and no min-height on the frame. */
section.reviews{padding-block:var(--sp-5)}
section.reviews .shead{margin-bottom:var(--sp-3)}
section.reviews .lc_reviews_widget{min-height:0;display:block}
@media (min-width:66rem){ section.reviews{padding-block:var(--sp-5) var(--sp-4)} }

/* ---- FOX 5 press band ---------------------------------------------------- */
section.press{padding-block:var(--sp-4)}
.presscard{display:grid;gap:clamp(1rem,3vw,2.25rem);align-items:center;
  text-decoration:none;color:inherit;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r-5,20px);
  padding:clamp(1rem,2vw,1.5rem);overflow:clip;
  transition:border-color var(--t) var(--e-out),box-shadow var(--t) var(--e-out)}
@media (min-width:52rem){ .presscard{grid-template-columns:minmax(0,22rem) minmax(0,1fr)} }
@media (hover:hover) and (pointer:fine){
  .presscard:hover{border-color:var(--accent-line);
    box-shadow:0 18px 44px -32px oklch(0.168 0.028 var(--h)/.7)}
  .presscard:hover .presscard__play{transform:scale(1.07)}
}
.presscard__media{position:relative;display:block;border-radius:var(--r-4,14px);overflow:clip;
  aspect-ratio:16/9;background:var(--ink-deep)}
.presscard__media picture{display:block;width:100%;height:100%}
.presscard__media img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
.presscard__play{position:absolute;inset:0;margin:auto;width:3.6rem;height:3.6rem;
  border-radius:999px;background:oklch(1 0 0/.92);color:var(--accent);
  display:grid;place-items:center;transition:transform var(--t) var(--e-out);
  box-shadow:0 8px 24px -10px oklch(0.168 0.028 var(--h)/.8)}
.presscard__play svg{width:1.9rem;height:1.9rem;margin-left:2px}
.presscard__body{display:block}
.presscard__kicker{display:block;font-size:var(--s--1);font-weight:650;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.presscard__title{display:block;font-family:var(--serif,inherit);font-size:var(--s-2);
  line-height:1.15;color:var(--ink);margin-bottom:.6rem}
.presscard__meta{display:block;color:var(--muted);font-size:var(--s--1)}

/* A lone card in a 3 column grid was rendering as a 140px sliver: the cat suite
   is the only single-item grid on the site (checked all 34 pages). Span the
   full track instead so its inline max-width is what actually governs. */
.suites > .suite:only-child,
.loccards > .loccard:only-child,
.scards > .scard:only-child{grid-column:1 / -1}

/* ==========================================================================
   POLISH PASS 2026-09-18. Every effect here is gated on prefers-reduced-motion
   and degrades to a plain static page, so nothing is ever left invisible or
   stuck mid-animation.
   ========================================================================== */

/* ---- credibility ticker under the hero ---- */
.ticker{overflow:hidden;border-block:1px solid var(--line);background:var(--paper-2);
  padding:.85rem 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker__row{display:flex;align-items:center;gap:1.4rem;width:max-content;
  padding-left:1.4rem;white-space:nowrap}
.ticker span{font-size:var(--s--1);color:var(--body);letter-spacing:.01em}
.ticker i{font-style:normal;color:var(--accent);opacity:.65}
@media (prefers-reduced-motion:no-preference){
  .ticker__row{animation:tick 46s linear infinite}
  .ticker:hover .ticker__row{animation-play-state:paused}
}
/* the row holds the list twice, so translating exactly half loops seamlessly */
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker{overflow-x:auto}
}

/* ---- staggered reveal for card grids: same motion, just not all at once ---- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .scards>*:nth-child(2),.loccards>*:nth-child(2),.suites>*:nth-child(2),
    .ggrid>*:nth-child(2){animation-delay:60ms}
    .scards>*:nth-child(3),.loccards>*:nth-child(3),.suites>*:nth-child(3),
    .ggrid>*:nth-child(3){animation-delay:120ms}
    .scards>*:nth-child(4),.suites>*:nth-child(4),.ggrid>*:nth-child(4){animation-delay:180ms}
  }
}

/* ---- media lifts a touch on hover, the cheapest premium cue there is ---- */
@media (hover:hover) and (pointer:fine){
  .scard picture,.scard .sp-media,.ggrid figure,.loccard picture,.presscard__media{
    overflow:clip}
  .scard img,.ggrid figure img,.loccard img,.presscard__media img{
    transition:transform 620ms var(--e-out)}
  .scard:hover img,.ggrid figure:hover img,.loccard:hover img,
  .presscard:hover .presscard__media img{transform:scale(1.035)}
}

/* ---- counted stats hold their width so the layout never jumps ---- */
.stats b{font-variant-numeric:tabular-nums}

/* ---- mobile sticky bar gets out of the way going down, returns going up ---- */
@media (max-width:47.99rem){
  .stickybar{transition:transform 320ms var(--e-out)}
  .stickybar.is-away{transform:translateY(110%)}
}

/* ---- snappier burger, and the page behind the menu stops scrolling ---- */
.burger span{transition:transform 260ms cubic-bezier(.2,.8,.2,1),opacity 160ms linear}
body.nav-open{overflow:hidden}

/* ==========================================================================
   THE JOURNEY PASS 2026-09-18. Apple-style scroll choreography: depth on
   entry, a slow drifting hero, headings that arrive a word at a time, and
   photographs that unmask rather than pop.

   Three rules govern everything below, in this order:
     1. Nothing here may ever leave content invisible. Every effect lives
        inside @supports (animation-timeline: view()) with `both` fill, or is
        applied by JS that adds a class it also guarantees to resolve.
     2. prefers-reduced-motion:reduce turns the whole layer off.
     3. Only transform, opacity, filter and clip-path animate, so the whole
        thing runs on the compositor and stays snappy on a phone.

   The emotion is calm and happy: long durations, soft easing, nothing that
   snaps or bounces hard. The only playfulness is a slight overshoot on the
   service cards, which read as dogs, not as UI.
   ========================================================================== */

/* ---- 1. scroll progress hairline ---------------------------------------- */
.progress{position:fixed;inset-block-start:0;inset-inline:0;height:2px;z-index:80;
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,var(--accent),var(--warm-deep,var(--accent)));
  opacity:.9}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: scroll()){
    .progress{animation:grow linear both;animation-timeline:scroll(root block)}
  }
}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){ .progress{display:none} }

/* ---- 2. the hero drifts, it does not sit ------------------------------- */
/* Ken Burns on whichever slide is showing. 14s and 1.06 is slow enough that
   you feel it rather than watch it. */
@media (prefers-reduced-motion:no-preference){
  .hero__slides .slide.is-on{animation:kb 14s var(--e-out) both}
}
@keyframes kb{from{transform:scale(1.005)}to{transform:scale(1.062)}}

/* Copy and picture part company as you scroll off the hero. The copy leaves a
   little faster than the photograph, which is the whole parallax trick. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .hero__copy{animation:heroCopy linear both;animation-timeline:view();
      animation-range:exit-crossing 0% exit 100%}
    .hero__slides{animation:heroMedia linear both;animation-timeline:view();
      animation-range:exit-crossing 0% exit 100%}
  }
}
@keyframes heroCopy{from{transform:none;opacity:1}
                    to{transform:translateY(-34px);opacity:.22}}
@keyframes heroMedia{from{transform:none} to{transform:translateY(24px)}}

/* ---- 3. depth: cards arrive out of the page, not up the page ------------ */
/* Perspective has to live on the parent or rotateX reads as a flat squash.
   These are all grid containers, so this changes no layout. */
.scards,.suites,.loccards,.ggrid,.steps,.compare,.stats,.gal{perspective:1400px;
  perspective-origin:50% 40%}

@keyframes lift3d{
  from{opacity:0;transform:translateY(34px) translateZ(-90px) rotateX(7.5deg) scale(.972);
       filter:blur(7px)}
  to  {opacity:1;transform:none;filter:blur(0)}
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .scard,.suite,.loccard,.panel,.sp-media,.compare div,.stats div,.step,
    .ggrid figure,.presscard,.teamrow__media{
      animation:lift3d both;animation-timeline:view();
      animation-range:entry 4% cover 30%;
      transform-style:preserve-3d;backface-visibility:hidden}
  }
}

/* The gallery tiles are small and many, so they get a lighter version of the
   same move, otherwise the grid reads as noise. */
@keyframes tile{
  from{opacity:0;transform:translateY(18px) scale(.94);filter:blur(4px)}
  to  {opacity:1;transform:none;filter:blur(0)}
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .gal > *{animation:tile both;animation-timeline:view();
      animation-range:entry 2% cover 24%}
    .gal > *:nth-child(3n+2){animation-delay:70ms}
    .gal > *:nth-child(3n+3){animation-delay:140ms}
  }
}

/* ---- 4. headings arrive a word at a time -------------------------------- */
/* JS wraps each word in .wd and sets --i. If the JS never runs, the heading is
   ordinary text and nothing is hidden, which is the point. */
.wd{display:inline-block;will-change:transform,opacity}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .wsplit .wd{animation:word both;animation-timeline:view();
      animation-range:entry 3% cover 22%;
      animation-delay:calc(var(--i) * 42ms)}
  }
  @supports not (animation-timeline: view()){
    .wsplit .wd{opacity:0;transform:translateY(14px);
      transition:opacity 700ms var(--e-out),transform 700ms var(--e-out);
      transition-delay:calc(var(--i) * 42ms)}
    .wsplit.is-in .wd{opacity:1;transform:none}
  }
}
@keyframes word{from{opacity:0;transform:translateY(16px) rotateX(24deg);filter:blur(5px)}
                to  {opacity:1;transform:none;filter:blur(0)}}

/* ---- 5. photographs unmask, they do not pop ----------------------------- */
@keyframes unmask{
  from{clip-path:inset(14% 0 0 0);transform:scale(1.07);opacity:.55}
  to  {clip-path:inset(0 0 0 0);transform:none;opacity:1}
}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .plate img,.sp-media img,.teamrow__media img,.presscard__media img{
      animation:unmask both;animation-timeline:view();
      animation-range:entry 0% cover 34%}
  }
}
/* The hover zoom declared in the polish pass and this unmask would fight over
   `transform`, so on the press card the hover lives on the wrapper instead. */
@media (hover:hover) and (pointer:fine){
  .presscard:hover .presscard__media img{transform:none}
  .presscard__media{transition:transform 620ms var(--e-out)}
  .presscard:hover .presscard__media{transform:scale(1.025)}
}

/* ---- 6. buttons get a little weight under the cursor -------------------- */
@media (hover:hover) and (pointer:fine){
  .btn{transition:transform 260ms var(--e-out),background var(--t) var(--e-out),
       border-color var(--t) var(--e-out),color var(--t) var(--e-out),
       box-shadow 260ms var(--e-out)}
  .btn:hover{transform:translateY(-2px)}
  .btn:active{transform:translateY(0);transition-duration:80ms}
}

/* ---- 7. the whole layer switches off for anyone who asked --------------- */
@media (prefers-reduced-motion:reduce){
  .hero__slides .slide.is-on{animation:none}
  .wd{display:inline}
}

/* ==========================================================================
   Bare page: logo, one embed, nothing else. Used by /review.
   Every other element on that page was somewhere for a customer who had
   already decided to leave a review to wander off to.
   ========================================================================== */
.barepage{min-height:100svh;display:grid;place-items:start center;
  padding:clamp(2.5rem,7vw,5rem) 1.15rem clamp(3rem,8vw,6rem);
  /* White, not the site's cream: her logo artwork carries its own opaque
     white plate, which reads as a mistake on any other ground. */
  background:#fff}
.barepage__in{width:100%;max-width:38rem;display:grid;justify-items:center;
  gap:clamp(1.6rem,4vw,2.6rem)}
.barepage__logo{width:min(260px,66vw);height:auto;display:block}
.barepage iframe{width:100%;border:none;border-radius:var(--r-4,14px);display:block}