/* ==========================================================================
   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;
  --sp-5:3.5rem; --sp-6:5.5rem; --sp-7:clamp(4.5rem,9vw,9rem);

  /* 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-5)}
.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}
  .hero__media::after{content:"";position:absolute;inset:0;z-index:1;background:
    linear-gradient(180deg,
      oklch(0.988 0.004 var(--h)/.94) 0%,
      oklch(0.988 0.004 var(--h)/.88) 46%,
      oklch(0.988 0.004 var(--h)/.72) 78%,
      oklch(0.988 0.004 var(--h)/.55) 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}
}

/* ---- 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}}