/* ============================================================
   BRIGHTHOME CLEANING SERVICES: design tokens
   Palette derived from the logo artwork (#3CA200 sampled),
   yellow + light tint from the brand guidelines PDF.
   ============================================================ */
:root{
  --green:        #3CA200;   /* logo green, primary */
  --green-deep:   #2A7300;   /* darker step for text/hover */
  --green-dark:   #16290B;   /* near-black green, dark bands */
  --green-tint:   #EDF7E2;   /* section wash (PDF #E8F5D3, warmed) */
  --green-line:   #D3E9BC;
  --yellow:       #F2D701;   /* accent, CTA only */
  --yellow-soft:  #FFF6B8;
  --ink:          #14200C;
  --stone:        #5F6B57;   /* muted body */
  --paper:        #FFFFFF;

  --hdr-h:    88px;   /* measured sub-page header height, no is-stuck script there */
  --hdr-h-sm: 71px;   /* measured, under 1000px */

  --shell: 1180px;
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;

  --step-hero: clamp(2.6rem, 6.2vw, 4.6rem);
  --step-h2:   clamp(2rem, 4vw, 3.1rem);
  --step-h3:   clamp(1.25rem, 1.9vw, 1.6rem);
  --step-body: clamp(1rem, 1.05vw, 1.1rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:var(--step-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.04;letter-spacing:-.03em;font-weight:800}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:4px}

.shell{width:min(100% - 2.5rem, var(--shell));margin-inline:auto}
.band{padding:clamp(4rem,8vw,7rem) 0;position:relative}
.band--tint{background:var(--green-tint)}
.band--dark{background:var(--green-dark);color:#F2F7EC}

/* Services band: the flat dark green read as one solid slab top to bottom.
   Two low-opacity washes in brand green give it a light source without
   introducing any colour outside the palette. */
.band--services{
  background:
    radial-gradient(115% 75% at 50% -12%, rgba(60,162,0,.22) 0%, rgba(60,162,0,0) 62%),
    radial-gradient(85% 60% at 92% 112%, rgba(42,115,0,.34) 0%, rgba(42,115,0,0) 70%),
    var(--green-dark);
}

/* Quote band: light, so it does not merge into the dark footer below.
   Sits between a tinted Service Areas band and the near-black footer. */
.band--quote{
  background:
    radial-gradient(90% 70% at 15% 0%, var(--green-tint) 0%, #FCFDFA 60%),
    #FCFDFA;
  border-top:1px solid var(--green-line);
}
.band--quote .form{
  border:1px solid var(--green-line);
  box-shadow:0 24px 50px -30px rgba(20,32,12,.28);
}
.band--quote .steps span{color:var(--stone)}
.band--dark + .ftr{margin-top:0}
.band--dark .lede{color:#DFEBD6}

.eyebrow{
  font-family:var(--body);font-size:.76rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep);
  margin:0 0 .85rem;display:flex;align-items:center;gap:.6rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--yellow);border-radius:2px}
.band--dark .eyebrow{color:var(--yellow)}
.lede{color:var(--stone);max-width:60ch;font-size:1.06rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--body);font-weight:600;font-size:1rem;
  padding:.95rem 1.6rem;border-radius:999px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--green);color:#fff}
.btn--primary:hover{background:var(--green-deep)}
.btn--accent{background:var(--yellow);color:var(--ink)}
.btn--accent:hover{background:#DFC700}
.btn--ghost{background:transparent;color:var(--ink);border-color:rgba(20,32,12,.25)}
.btn--ghost:hover{border-color:var(--green);color:var(--green-deep)}
.band--dark .btn--ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.band--dark .btn--ghost:hover{border-color:var(--yellow);color:var(--yellow)}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--green-line);
}
.hdr__in{display:flex;align-items:center;gap:1.4rem;padding:.85rem 0;transition:padding .2s ease}
.hdr.is-stuck .hdr__in{padding:.5rem 0}
.hdr__logo img{width:200px;transition:width .2s ease}
.hdr.is-stuck .hdr__logo img{width:160px}
.nav{display:flex;gap:clamp(.8rem,1.3vw,1.6rem);margin-left:auto;align-items:center}
.nav a{
  text-decoration:none;font-weight:500;font-size:.98rem;padding:.35rem 0;
  border-bottom:2px solid transparent;white-space:nowrap;
}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--green);color:var(--green-deep)}
.hdr__cta{display:flex;align-items:center;gap:1rem}
.tel{
  font-family:var(--display);font-weight:700;font-size:1.18rem;
  text-decoration:none;color:var(--ink);white-space:nowrap;letter-spacing:-.02em;
}
.tel:hover{color:var(--green-deep)}
.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px}

/* ---------- hero ---------- */
.hero{padding:clamp(3rem,6vw,5.5rem) 0 0;background:
  radial-gradient(120% 90% at 88% 0%, var(--green-tint) 0%, #fff 62%);}
.hero__grid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(1.8rem,3.4vw,3.4rem);align-items:center}
.hero h1{font-size:var(--step-hero);margin:.4rem 0 1.2rem;max-width:14ch}
.hero h1 em{font-style:normal;color:var(--green);position:relative;white-space:nowrap}
.hero h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.16em;
  background:var(--yellow);border-radius:99px;z-index:-1;
}
.hero__actions{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.8rem 0 2.2rem}
/* Four stats in a flex-wrap row broke 3-then-1 in the hero column, leaving the
   fourth orphaned on its own line. A fixed 2x2 grid wraps evenly at every width
   the hero column actually takes. */
.proof{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2rem;
  padding-top:1.6rem;border-top:1px solid var(--green-line);
}
.proof__item{display:flex;flex-direction:column}
.proof__n{font-family:var(--display);font-size:1.7rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.proof__l{font-size:.83rem;color:var(--stone);margin-top:.25rem}
.stars{color:#F0B400;letter-spacing:1px}

/* photo frames (placeholders until real images are dropped in) */
.ph{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  background:
    linear-gradient(135deg, rgba(60,162,0,.14), rgba(242,215,1,.16)),
    var(--green-tint);
  border:1px solid var(--green-line);
  display:flex;align-items:flex-end;
}
.ph::after{
  content:attr(data-ph);
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green-deep);
  padding:.7rem .9rem;font-weight:600;opacity:.75;
}
.hero__media{position:relative}

.badge-card{
  position:absolute;left:-1.5rem;bottom:2rem;background:#fff;border-radius:var(--r-md);
  padding:1rem 1.2rem;box-shadow:0 18px 40px -18px rgba(20,32,12,.35);
  display:flex;align-items:center;gap:.85rem;max-width:250px;
}
.badge-card__n{font-family:var(--display);font-size:1.9rem;font-weight:800;line-height:1}
.badge-card__t{font-size:.82rem;color:var(--stone);line-height:1.35}

/* ---------- sweep divider (echoes the broom arc in the logo) ---------- */
.sweep{display:block;width:100%;height:clamp(38px,5vw,78px)}
.sweep path{fill:currentColor}

/* ---------- service chips ---------- */
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.chip{
  background:#fff;border:1px solid var(--green-line);border-radius:var(--r-md);
  padding:1.5rem 1.2rem;text-align:center;text-decoration:none;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.chip:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:0 16px 30px -20px rgba(20,32,12,.4)}
.chip svg{width:34px;height:34px;margin:0 auto .7rem;stroke:var(--green);fill:none;stroke-width:1.6}
.chip span{font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.02em}

/* ---------- generic split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4.5rem);align-items:center}
.split--flip .split__media{order:2}
.ticks{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.8rem}
.ticks li{display:flex;gap:.7rem;align-items:flex-start;font-weight:500}
.ticks svg{flex:none;width:21px;height:21px;margin-top:.18rem}

.callbar{
  margin-top:2rem;background:var(--green-tint);border-radius:var(--r-md);
  padding:1.1rem 1.3rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  border:1px solid var(--green-line);
}
.callbar__tel{font-family:var(--display);font-weight:800;font-size:1.4rem;text-decoration:none;letter-spacing:-.02em}
.callbar__tel:hover{color:var(--green-deep)}
.callbar .btn{margin-left:auto}

/* ---------- section head ---------- */
.sechead{max-width:44ch;margin-bottom:3rem}
.sechead--mid{margin-inline:auto;text-align:center}
.sechead--mid .eyebrow{justify-content:center}
.sechead h2{font-size:var(--step-h2);margin-bottom:1rem}

/* ---------- services ---------- */
.svcs{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
/* Card surface. Top corners are square so the photo runs corner to corner
   across the card top: with overflow:hidden a rounded top left a wedge of the
   dark band showing through each corner, which read as an inset image.
   Bottom corners keep --r-lg so the card still belongs to the rounded family.
   Surface was rgba(255,255,255,.055), too close to the band to register, so
   cards read as floating text. Raised, and given a top-to-bottom fade so the
   card has its own light direction instead of sitting flat on the band. */
.svc{
  background:linear-gradient(180deg,rgba(255,255,255,.115),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.22);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .2s ease,transform .2s ease,background .2s ease;
}
.svc:hover{
  border-color:var(--yellow);transform:translateY(-4px);
  background:linear-gradient(180deg,rgba(255,255,255,.155),rgba(255,255,255,.07));
}
.svc .ph{aspect-ratio:4/3;border-radius:0;border:0;border-bottom:1px solid rgba(255,255,255,.22)}
.svc__b{padding:1.4rem;display:flex;flex-direction:column;flex:1}
.svc__b h3{font-size:1.25rem;margin-bottom:.55rem}
/* was #B9CBA9: sage on dark green passes contrast but reads washed out */
.svc__b p{font-size:.94rem;color:#E9F2E3;flex:1}
.svc__link{
  font-weight:600;font-size:.92rem;text-decoration:none;color:var(--yellow);
  display:inline-flex;gap:.4rem;align-items:center;margin-top:.6rem;
}
.svc__link:hover{gap:.75rem}

/* ---------- BEFORE / AFTER wipe: the signature element ---------- */
.wipe{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:1100/915;                 /* matches the photo pair exactly */
  border:1px solid var(--green-line);user-select:none;background:var(--green-tint);
  box-shadow:0 26px 54px -34px rgba(20,32,12,.5);
}
.wipe__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;pointer-events:none;
}
.wipe__after{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.wipe__tag{
  position:absolute;top:.85rem;z-index:3;font-size:.66rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:.38rem .75rem;border-radius:999px;
}
.wipe__tag--b{left:.85rem;background:rgba(20,32,12,.78);color:#fff}
.wipe__tag--a{right:.85rem;background:var(--green);color:#fff}
.wipe__handle{
  position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;z-index:4;
  transform:translateX(-50%);box-shadow:0 0 0 1px rgba(20,32,12,.22);
}
.wipe__grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:50px;height:50px;border-radius:50%;background:#fff;
  box-shadow:0 8px 22px -6px rgba(20,32,12,.6);
  display:grid;place-items:center;color:var(--green-deep);pointer-events:none;
}
.wipe__grip svg{width:22px;height:22px}
.wipe__hint{
  position:absolute;left:50%;bottom:.9rem;transform:translateX(-50%);z-index:3;
  font-size:.75rem;font-weight:600;color:var(--ink);background:rgba(255,255,255,.93);
  padding:.32rem .75rem;border-radius:999px;pointer-events:none;transition:opacity .25s ease;
}
.wipe__range{
  position:absolute;inset:0;opacity:0;width:100%;height:100%;z-index:5;
  cursor:ew-resize;margin:0;touch-action:pan-y;
}

/* ---------- why cards ---------- */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.why__card{
  background:#fff;border:1px solid var(--green-line);border-radius:var(--r-md);
  padding:1.7rem;display:flex;gap:1.1rem;align-items:flex-start;
}
.why__ic{
  flex:none;width:46px;height:46px;border-radius:12px;background:var(--green);
  display:grid;place-items:center;color:#fff;
}
.why__ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7}
.why__card h3{font-size:1.12rem;margin-bottom:.45rem}
.why__card p{font-size:.94rem;color:var(--stone);margin:0}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:start}
.plan{
  border:1px solid var(--green-line);border-radius:var(--r-lg);padding:2rem 1.7rem;
  background:#fff;position:relative;display:flex;flex-direction:column;
}
.plan--feat{border:2px solid var(--green);box-shadow:0 26px 50px -30px rgba(20,32,12,.5)}
.plan__flag{
  position:absolute;top:-.85rem;left:50%;transform:translateX(-50%);
  background:var(--yellow);color:var(--ink);font-size:.7rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;padding:.4rem .95rem;border-radius:999px;
  white-space:nowrap;
}
.plan h3{font-size:1.3rem;color:var(--green-deep);margin-bottom:.9rem}
.plan__price{font-family:var(--display);font-size:3.1rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.plan__from{font-size:.82rem;color:var(--stone);text-transform:uppercase;letter-spacing:.1em;margin:.3rem 0 .1rem}
.plan__hrs{font-size:.92rem;color:var(--stone);padding-bottom:1.4rem;border-bottom:1px solid var(--green-line);margin-bottom:1.4rem}
.plan .ticks{margin:0 0 1.8rem;flex:1}
.plan .ticks li{font-size:.94rem;font-weight:400}
.plan .btn{width:100%}
.plans__note{text-align:center;color:var(--stone);font-size:.9rem;margin-top:1.6rem}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.quote{background:#fff;border:1px solid var(--green-line);border-radius:var(--r-md);padding:1.7rem;display:flex;flex-direction:column}
.quote__stars{color:#F0B400;margin-bottom:.9rem;letter-spacing:2px}
.quote blockquote{margin:0 0 1.3rem;font-size:.98rem;color:var(--ink);flex:1}
.quote__who{display:flex;align-items:center;gap:.8rem;border-top:1px solid var(--green-line);padding-top:1rem}
.quote__av{
  width:42px;height:42px;border-radius:50%;background:var(--green-tint);
  border:1px solid var(--green-line);display:grid;place-items:center;
  font-family:var(--display);font-weight:800;color:var(--green-deep);font-size:.95rem;
}
.quote__n{font-weight:600;font-size:.95rem;line-height:1.2}
.quote__c{font-size:.82rem;color:var(--stone)}

/* ---------- blog ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.post .ph{aspect-ratio:16/10;margin-bottom:1rem}
.post__meta{display:flex;gap:.7rem;align-items:center;font-size:.83rem;color:var(--stone);margin-bottom:.6rem}
.post__tag{background:var(--green-tint);color:var(--green-deep);font-weight:600;padding:.2rem .65rem;border-radius:999px}
.post h3{font-size:1.15rem;margin-bottom:.7rem}
.post a.more{font-weight:600;font-size:.92rem;color:var(--green-deep);text-decoration:none;display:inline-flex;gap:.4rem}
.post a.more:hover{gap:.7rem}

/* ---------- quote form ---------- */
.quotegrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,4vw,4rem);align-items:start}
.form{background:#fff;border-radius:var(--r-lg);padding:clamp(1.6rem,3vw,2.4rem);color:var(--ink)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-size:.82rem;font-weight:600;letter-spacing:.02em}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:.97rem;padding:.75rem .9rem;
  border:1px solid var(--green-line);border-radius:var(--r-sm);background:#FCFDFA;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px rgba(60,162,0,.18)}
.form .btn{width:100%;margin-top:.4rem}
/* Quote steps. Bare 01/02/03 digits above hairlines read as filler, so each
   step gets a filled numbered badge and its own card, and the set walks the
   brand palette from green through deep green to yellow. The numbers stay
   because this genuinely is a sequence. Client asked for colourful, and
   section 7 allows only brand colours, so the range is green to yellow. */
.steps{list-style:none;padding:0;margin:2rem 0 0;counter-reset:s;display:grid;gap:.85rem}
.steps li{
  counter-increment:s;position:relative;display:flex;gap:1rem;align-items:flex-start;
  padding:1.05rem 1.2rem;border-radius:var(--r-md);
  border:1px solid var(--green-line);
}
.steps li::before{
  content:counter(s);font-family:var(--display);font-weight:800;font-size:1.1rem;
  flex:none;width:2.3rem;height:2.3rem;border-radius:50%;
  display:grid;place-content:center;color:#fff;background:var(--green);
  box-shadow:0 4px 12px -4px rgba(60,162,0,.55);
}
/* connector: shows the three steps are one sequence, not three options */
.steps li:not(:last-child)::after{
  content:"";position:absolute;left:calc(1.2rem + 1.15rem - 1px);
  top:3.5rem;bottom:calc(-.85rem - 1px);width:2px;
  background:linear-gradient(var(--green-line),rgba(211,233,188,.25));
}
.steps li:nth-child(1){background:linear-gradient(135deg,var(--green-tint),#FCFEF9 72%)}
.steps li:nth-child(2){background:linear-gradient(135deg,#E4F3D3,#FCFEF9 72%)}
.steps li:nth-child(2)::before{
  background:var(--green-deep);box-shadow:0 4px 12px -4px rgba(42,115,0,.55);
}
.steps li:nth-child(3){background:linear-gradient(135deg,var(--yellow-soft),#FFFEF4 72%)}
.steps li:nth-child(3){border-color:#EBD98A}
.steps li:nth-child(3)::before{
  background:var(--yellow);color:var(--ink);box-shadow:0 4px 12px -4px rgba(242,215,1,.6);
}
.steps strong{display:block;font-family:var(--display);font-size:1.08rem;margin-bottom:.22rem}
.steps span{font-size:.92rem;color:var(--stone)}

/* ---------- footer ---------- */
/* Distinct from the dark-green quote band above: near-black ground,
   a yellow hairline to mark the boundary, tighter vertical rhythm. */
.ftr{
  background:var(--green-dark);color:#DCE8D2;
  padding:clamp(2.6rem,4vw,3.4rem) 0 0;
  position:relative;
}
/* thin brand bar marks the boundary between page and footer */
.ftr::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--green) 0%,var(--green) 55%,var(--yellow) 55%,var(--yellow) 100%);
}
.ftr__grid{
  display:grid;grid-template-columns:1.35fr .85fr .95fr .85fr;
  gap:1.6rem 2rem;align-items:start;
}
.ftr__logo{
  background:#fff;border-radius:var(--r-sm);padding:.55rem .75rem;
  display:inline-block;margin:0 0 1rem;
}
.ftr__logo img{width:150px}
.ftr h4{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--body);font-weight:700;color:var(--yellow);
  margin:0 0 .9rem;padding-bottom:.55rem;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.ftr a{text-decoration:none;font-size:.9rem;color:#B9CBA9;line-height:1.4}
.ftr a:hover{color:var(--yellow)}
.ftr__meta{display:grid;gap:.6rem;font-size:.88rem;color:#B9CBA9;line-height:1.45}
.ftr__meta div{display:flex;gap:.55rem;align-items:flex-start}
.ftr__meta svg{flex:none;width:16px;height:16px;stroke:var(--yellow);fill:none;stroke-width:1.8;margin-top:.15rem}
.ftr__meta strong{color:#fff;font-weight:600}
.social{display:flex;gap:.5rem;margin-top:1.1rem}
.social a{
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center;
}
.social a:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.social svg{width:15px;height:15px;fill:currentColor}
.ftr__base{
  margin-top:2rem;border-top:1px solid rgba(255,255,255,.1);
  padding:1rem 0;text-align:center;font-size:.83rem;color:#8FA383;
}

/* The nav gained a seventh item (Checklist), which pushed the header CTA into
   wrapping on mid-size desktops. Let the nav gap flex, stop the CTA wrapping,
   and hand over to the burger earlier rather than shrinking the CTA copy. */
.hdr__cta .btn{white-space:nowrap}
@media (max-width:1240px){
  .nav{display:none}
  .burger{display:grid;place-content:center;margin-left:auto;order:3;width:44px;height:44px}
}

/* ---------- responsive ---------- */
@media (max-width: 1000px){
  .nav{display:none}
  .burger{display:block;margin-left:auto;order:3;width:44px;height:44px;
          display:grid;place-content:center}
  .hdr__cta .btn{display:none}
  .hdr__cta{margin-left:auto}
  .tel{font-size:1.05rem}
  .hdr__logo img,.hdr.is-stuck .hdr__logo img{width:150px}
  .hero__grid,.split,.quotegrid{grid-template-columns:1fr}
  .split--flip .split__media{order:0}
  .svcs,.chips,.plans,.quotes,.posts{grid-template-columns:repeat(2,1fr)}
  .ftr__grid{grid-template-columns:1fr 1fr;gap:1.8rem}
  .badge-card{left:1rem}
}
@media (max-width: 620px){
  .svcs,.chips,.plans,.quotes,.posts,.why,.form__row,.ftr__grid{grid-template-columns:1fr}
  .proof{gap:1.4rem}
  .callbar .btn{margin-left:0;width:100%}
  .hero__actions .btn{width:100%}
}

/* ---------- legal / prose pages ---------- */
.pagehead{background:var(--green-tint);padding:clamp(3rem,6vw,5rem) 0;border-bottom:1px solid var(--green-line)}
.pagehead h1{font-size:clamp(2.1rem,4.4vw,3.2rem);margin-bottom:.7rem}
.pagehead .lede{margin:0}
.prose{width:min(100% - 2.5rem, 780px);margin:0 auto;padding:clamp(3rem,6vw,4.5rem) 0}
.prose h2{font-size:1.5rem;margin:2.6rem 0 .9rem}
.prose h2:first-of-type{margin-top:0}
.prose h3{font-size:1.12rem;margin:1.6rem 0 .5rem}
.prose p,.prose li{color:var(--stone)}
.prose ul{padding-left:1.2rem;margin:0 0 1rem}
.prose li{margin-bottom:.5rem}
.prose a{color:var(--green-deep);font-weight:500}
.prose strong{color:var(--ink)}
.legalnote{
  background:var(--yellow-soft);border:1px solid #E6CE00;border-radius:var(--r-md);
  padding:1.1rem 1.3rem;margin:0 0 2.5rem;font-size:.94rem;color:var(--ink);
}
.legalnote strong{display:block;margin-bottom:.3rem}
.updated{font-size:.9rem;color:var(--stone);margin-bottom:2rem}

/* ---------- article pages ---------- */
.arthead{background:var(--green-tint);padding:clamp(2.5rem,5vw,4rem) 0;border-bottom:1px solid var(--green-line)}
.crumbs{font-size:.85rem;color:var(--stone);margin-bottom:1.2rem}
.crumbs a{color:var(--green-deep);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.arthead h1{font-size:clamp(2rem,4.4vw,3.1rem);margin-bottom:1rem;max-width:22ch}
.artmeta{display:flex;gap:.8rem;align-items:center;font-size:.87rem;color:var(--stone);flex-wrap:wrap}
.artmeta .post__tag{background:#fff}
.toc{
  background:var(--green-tint);border:1px solid var(--green-line);border-radius:var(--r-md);
  padding:1.3rem 1.5rem;margin:0 0 2.5rem;
}
.toc h2{font-size:1rem !important;margin:0 0 .8rem !important;font-family:var(--body);
  font-weight:700;letter-spacing:.02em}
.toc ol{margin:0;padding-left:1.2rem;display:grid;gap:.45rem}
.toc li{color:var(--stone);margin:0}
.toc a{color:var(--green-deep);text-decoration:none;font-weight:500}
.toc a:hover{text-decoration:underline}
.prose table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.94rem}
.prose th,.prose td{text-align:left;padding:.75rem .8rem;border-bottom:1px solid var(--green-line)}
.prose th{background:var(--green-tint);font-family:var(--display);font-weight:700;color:var(--ink)}
.prose td{color:var(--stone)}
.pull{
  border-left:4px solid var(--green);background:#FCFDFA;padding:1.1rem 1.3rem;
  margin:1.8rem 0;border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.pull p{margin:0;color:var(--ink);font-weight:500}
.artcta{
  background:var(--green-dark);color:#F2F7EC;border-radius:var(--r-lg);
  padding:clamp(1.6rem,3vw,2.2rem);margin:2.8rem 0;
}
.artcta h3{font-size:1.4rem;color:#fff;margin-bottom:.6rem}
.artcta p{color:#B9CBA9;margin-bottom:1.2rem}
.artcta .btn{margin-right:.6rem}
.faqlist{display:grid;gap:.9rem;margin:1.5rem 0}
.faqlist details{
  border:1px solid var(--green-line);border-radius:var(--r-md);background:#fff;
  padding:1rem 1.2rem;
}
.faqlist summary{
  font-family:var(--display);font-weight:700;font-size:1.02rem;cursor:pointer;
  color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:1rem;
}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary::after{content:"+";color:var(--green);font-size:1.4rem;line-height:1}
.faqlist details[open] summary::after{content:"\2013"}
.faqlist details p{margin:.9rem 0 0}
.related{border-top:1px solid var(--green-line);margin-top:3rem;padding-top:2rem}
.related h2{font-size:1.3rem !important;margin:0 0 1.2rem !important}
.related ul{list-style:none;padding:0;display:grid;gap:.7rem}
.related a{font-weight:600}

/* ---------- real photography ---------- */
.shot{
  margin:0;border-radius:var(--r-md);overflow:hidden;
  background:var(--green-tint);border:1px solid var(--green-line);
  position:relative;
}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot--main{aspect-ratio:43/24;border-radius:var(--r-lg);
  box-shadow:0 30px 60px -34px rgba(20,32,12,.55)}
@media (max-width:1000px){.shot--main{aspect-ratio:43/24}}
.svc .shot{border-radius:0;border:0;border-bottom:1px solid rgba(255,255,255,.14);aspect-ratio:4/3}
/* 16/9 so the client's photos show full frame, uncropped */
.post .shot{aspect-ratio:43/24;margin-bottom:1rem}

/* Photo frames match the client's photos exactly (1376x768 = 43/24), so
   object-fit:cover has nothing to trim. Replaces three different inline
   aspect-ratios that were cropping 28%, 18.8% and 0.8% of the width.
   Client instruction: do not crop, fit the frame to the photo. */
.shot--photo{aspect-ratio:43/24}

/* ---------- mobile navigation ---------- */
.mnav[hidden]{display:flex}
.mnav{
  position:fixed;inset:0;z-index:70;background:var(--green-dark);
  display:flex;flex-direction:column;padding:1.1rem 1.5rem 2rem;
  transform:translateX(100%);transition:transform .28s ease;
  overflow-y:auto;visibility:hidden;
}
.mnav.is-open{transform:translateX(0);visibility:visible}
.mnav__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.6rem}
.mnav__logo{background:#fff;border-radius:var(--r-sm);padding:.45rem .6rem;display:inline-block}
.mnav__logo img{width:132px;display:block}
.mnav__close{
  background:none;border:1px solid rgba(255,255,255,.3);color:#fff;
  width:42px;height:42px;border-radius:50%;font-size:1.35rem;line-height:1;cursor:pointer;
}
.mnav a{color:#F2F7EC;text-decoration:none}
.mnav__links{list-style:none;padding:0;margin:0 0 1.6rem;display:grid}
.mnav__links > li > a,.mnav__links > li > span{
  display:block;font-family:var(--display);font-weight:700;font-size:1.28rem;
  padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.14);
}
.mnav__links > li > span{color:var(--yellow);font-size:.8rem;letter-spacing:.13em;
  text-transform:uppercase;font-family:var(--body);padding-bottom:.5rem}
.mnav__sub{list-style:none;padding:0 0 .7rem .1rem;margin:0;display:grid;gap:.1rem}
.mnav__sub a{display:block;font-size:1rem;padding:.55rem 0;color:#B9CBA9}
.mnav__cta{display:grid;gap:.7rem;margin-top:auto;padding-top:1.4rem}
.mnav__cta .btn{width:100%}
body.nav-open{overflow:hidden}

/* ---------- desktop services dropdown ---------- */
.nav__drop{position:relative}
.nav__drop > a::after{content:"";display:inline-block;margin-left:.35rem;
  border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
.nav__menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  background:#fff;border:1px solid var(--green-line);border-radius:var(--r-md);
  box-shadow:0 22px 46px -22px rgba(20,32,12,.45);
  padding:.5rem;min-width:255px;list-style:none;margin:0;
  opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease;
}
.nav__drop:hover .nav__menu,.nav__drop:focus-within .nav__menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.nav__menu a{
  display:block;padding:.6rem .8rem;border-radius:var(--r-sm);
  font-size:.94rem;font-weight:500;border-bottom:0;white-space:nowrap;
}
.nav__menu a:hover{background:var(--green-tint);color:var(--green-deep)}

/* ---------- sticky mobile call bar ---------- */
.callbar-fixed,.callbar-fixed[hidden]{display:none}
@media (max-width: 1000px){
  .callbar-fixed,.callbar-fixed[hidden]{
    display:grid;grid-template-columns:1fr 1fr;gap:.5rem;
    position:fixed;left:0;right:0;bottom:0;z-index:65;
    background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
    border-top:1px solid var(--green-line);padding:.55rem .7rem;
    padding-bottom:calc(.55rem + env(safe-area-inset-bottom));
  }
  .callbar-fixed .btn{width:100%;padding:.8rem .9rem;font-size:.95rem}
  body{padding-bottom:4.6rem}
}

/* ---------- phone refinements ---------- */
@media (max-width: 620px){
  :root{--step-hero:clamp(2.05rem,8.5vw,2.7rem)}
  body{font-size:1rem}
  .hdr__logo img,.hdr.is-stuck .hdr__logo img{width:132px}
  .tel{display:none}                  /* sticky bar carries the call action */
  .shell{width:min(100% - 1.6rem, var(--shell))}
  .band{padding:2.8rem 0}
  .hero{padding-top:1.8rem}
  .hero h1{max-width:none}
  .proof{gap:1rem 1.6rem}
  .proof__n{font-size:1.4rem}
  .badge-card{position:static;margin-top:.9rem;max-width:none;box-shadow:none;
              border:1px solid var(--green-line)}
  .shot--main{aspect-ratio:43/24}  /* match the photo exactly, never crop */
  .sechead{margin-bottom:1.9rem}
  .plan{padding:1.5rem 1.2rem}
  .plan__price{font-size:2.5rem}
  .why__card,.quote,.svc__b{padding:1.25rem}
  .form{padding:1.2rem}
  .prose{padding:2.2rem 0}
  .prose table,.prose thead,.prose tbody,.prose tr,.prose th,.prose td{display:block;width:100%}
  .prose thead{display:none}
  .prose tr{border:1px solid var(--green-line);border-radius:var(--r-sm);
            margin-bottom:.8rem;padding:.4rem .2rem}
  .prose td{border-bottom:0;padding:.45rem .8rem}
  .toc{padding:1.1rem}
  .arthead h1{max-width:none}
  .ftr__logo img{width:140px}
  /* every tappable thing clears 44px */
  .btn{min-height:46px}
  .nav__menu a,.mnav__sub a,.ftr a{min-height:24px}
  .social a{width:42px;height:42px}
  .wipe__grip{width:58px;height:58px}
}

/* ================= ALIGNMENT SYSTEM =================
   Every section shares one left edge and one vertical rhythm.
   Replaces ad-hoc inline widths that made sections drift. */
.shell--mid{width:min(100% - 2.5rem, 900px);margin-inline:auto}
.shell--narrow{width:min(100% - 2.5rem, 760px);margin-inline:auto}

/* section headings: one size, no inline overrides */
.band h2,.arthead h2{font-size:var(--step-h2)}
.band h2{margin-bottom:1.1rem}
.sechead h2{margin-bottom:1rem}

/* button rows: last one in a block never adds trailing space */
.hero__actions{margin:1.8rem 0 0}
.hero__actions + .proof{margin-top:2.2rem}
.hero__actions--center{justify-content:center}

/* ghost buttons on any dark ground */
.band--dark .btn--ghost,.mnav .btn--ghost,.ftr .btn--ghost{
  color:#fff;border-color:rgba(255,255,255,.35);
}
.band--dark .btn--ghost:hover,.mnav .btn--ghost:hover{
  border-color:var(--yellow);color:var(--yellow);
}

/* service-area chips: same grid everywhere, collapses predictably */
.chips--areas{grid-template-columns:repeat(5,1fr)}
@media (max-width:1000px){.chips--areas{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.chips--areas{grid-template-columns:repeat(2,1fr)}}

/* headings that are links keep the heading colour */
.plainlink{color:inherit;text-decoration:none}
.plainlink:hover{color:var(--green-deep)}
/* on a dark ground green-deep (#2A7300) is invisible against #16290B */
.band--dark .plainlink:hover,.ftr .plainlink:hover{color:var(--yellow)}

/* Anchor jump offset. The header is sticky (78px desktop when stuck, 61px on
   phones), so a nav jump landed the section top underneath it. Desktop was
   saved by the band's own top padding, but on phones the eyebrow was obscured
   by 16px. Measured, not guessed. */
section[id],main[id]{scroll-margin-top:6rem}

/* prose blocks sitting inside a band should not re-pad vertically */
.band > .shell > .prose,.band .prose--flush{padding:0}

/* placeholder highlight for the unfilled address */
mark.todo{background:#FFF6B8;padding:0 .25rem}

/* prose headings keep their own scale even inside a band */
.band .prose h2{font-size:1.5rem;margin:2.6rem 0 .9rem}
.band .prose h2:first-of-type{margin-top:0}
.band .prose h3{font-size:1.12rem}

/* ================= MOBILE: final pass ================= */
@media (max-width:1000px){
  /* the wipe and split media stack above the copy on tablet down */
  .split{gap:2rem}
  .split__media{order:-1}
  .split--flip .split__media{order:-1}
  .quotegrid{gap:2rem}
  .quotegrid .plan{max-width:none !important}
  .svcs{gap:1rem}
  .arthead .split__media{order:0}
}
@media (max-width:620px){
  /* one column everywhere, consistent gutters */
  .shell,.shell--mid,.shell--narrow{width:min(100% - 1.6rem, 1180px)}
  .prose{width:min(100% - 1.6rem, 780px)}
  .svcs,.chips,.chips--areas,.plans,.quotes,.posts,.why,.form__row,.ftr__grid{
    grid-template-columns:1fr
  }
  /* headline scale */
  .band h2,.arthead h2,.sechead h2{font-size:clamp(1.5rem,6.6vw,1.95rem)}
  .arthead h1{font-size:clamp(1.75rem,7.6vw,2.3rem)}
  .prose h2,.band .prose h2{font-size:1.22rem}
  .lede{font-size:.99rem}
  /* Was aspect-ratio:1/1 on phones, which cropped 16.8% off the oven pair.
     Section 8 sets this slot to the photos' own 1100/915 precisely so the
     before/after images are never cropped or misregistered. Keep it. */
  .wipe{aspect-ratio:1100/915}
  .wipe__grip{width:56px;height:56px}
  .wipe__tag{font-size:.6rem;padding:.32rem .6rem}
  /* stacked plan cards should not carry the desktop lift */
  .plan--feat{box-shadow:none}
  .plan__flag{position:static;transform:none;display:inline-block;margin-bottom:.7rem}
  /* footer columns get their own breathing room when stacked */
  .ftr__grid{gap:1.5rem}
  .ftr h4{margin-bottom:.7rem}
  /* tables already reflow; keep the label visible */
  .prose tr{padding:.5rem .3rem}
  .prose td:first-child{font-weight:600;color:var(--ink)}
  .steps li{padding:.9rem 1rem;gap:.8rem}
  .steps li::before{width:2rem;height:2rem;font-size:1rem}
  .steps li:not(:last-child)::after{left:calc(1rem + 1rem - 1px);top:3.1rem}
  /* forms are the conversion path: comfortable targets */
  .field input,.field select,.field textarea{font-size:1rem;padding:.85rem .9rem}
  section[id],main[id]{scroll-margin-top:5rem}
  .toc ol{gap:.6rem}
}
/* never let an image overflow its box on any width */
img{max-width:100%;height:auto}
.shot img,.wipe__img{height:100%}

/* ============================================================
   CLEANING CHECKLIST  (cleaning-checklist-houston.html only)
   Reachable from the nav only. Not linked from the footer sitemap
   and not a section of the homepage, by client instruction.
   Palette and type are the existing tokens, no new colours.
   ============================================================ */

/* Every row carries a static tier label, so the page is complete with JS off.
   The `js` class (set by an inline script) hides the label on rows that are
   included at the chosen level, leaving it only where it adds information.
   "Show all levels" brings it back on every row. */
.cktier{
  display:inline-block;font-size:.76rem;font-weight:600;line-height:1.2;
  color:var(--green-deep);background:var(--green-tint);
  border:1px solid var(--green-line);border-radius:999px;padding:.22rem .6rem;
  white-space:nowrap;
}
.js .ckrow:not(.is-out) .cktier{display:none}
.js .ck.is-compare .ckrow .cktier{display:inline-block}
.js .ck.is-compare .ckrow.is-out{opacity:1}
.js .ck.is-compare .ckrow.is-out .ckrow__txt{color:var(--ink)}
.ckrow[data-tier="moveout"] .cktier{background:#FFFBE6;border-color:#EBD98A}

/* control bar: sticky below the header. Sub-pages do not carry the
   is-stuck script, so the header height here is constant. */
.ckbar{
  position:sticky;top:var(--hdr-h,89px);z-index:40;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--green-line);
}
.ckbar__in{
  display:flex;flex-wrap:wrap;gap:1rem 1.5rem;
  align-items:center;justify-content:space-between;padding:.9rem 0;
}
.ckbar__right{display:flex;flex-wrap:wrap;gap:.9rem 1.2rem;align-items:center}

/* service level: real radios, styled as a segmented control */
.seg{border:0;margin:0;padding:0;display:flex;gap:.3rem;
  background:var(--green-tint);border-radius:999px;padding:.25rem}
.seg__legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.seg__opt{
  display:flex;flex-direction:column;align-items:center;line-height:1.1;
  padding:.5rem .95rem;border-radius:999px;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.seg__opt input{position:absolute;opacity:0;width:1px;height:1px}
.seg__label{font-family:var(--display);font-weight:700;font-size:.98rem;letter-spacing:-.02em}
.seg__price{font-size:.72rem;color:var(--stone);margin-top:.15rem}
.seg__opt:hover{background:#fff}
.seg__opt:has(input:checked){background:var(--green);color:#fff}
.seg__opt:has(input:checked) .seg__price{color:rgba(255,255,255,.85)}
.seg__opt:has(input:focus-visible){outline:3px solid var(--green-deep);outline-offset:2px}
/* no :has support: keep the control legible rather than silently broken */
@supports not selector(:has(*)){
  .seg{background:none;padding:0;gap:.5rem;flex-wrap:wrap}
  .seg__opt{border:1px solid var(--green-line);background:#fff}
}

.ckfilter{display:flex;flex-direction:column;gap:.25rem}
.ckfilter__lab{font-size:.76rem;font-weight:600;color:var(--stone)}
.ckfilter input{
  font-family:var(--body);font-size:1rem;padding:.5rem .75rem;
  border:1px solid var(--green-line);border-radius:var(--r-sm);
  background:#fff;color:var(--ink);min-width:15rem;
}
.ckfilter input:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.ckcompare{display:inline-flex;align-items:center;gap:.45rem;font-size:.9rem;cursor:pointer}
.ckcompare input{width:1.1rem;height:1.1rem;accent-color:var(--green)}

/* the band the list sits in: the sticky bar already provides the top edge */
.band--flush{padding:2.4rem 0 clamp(3rem,6vw,5rem)}

.cklegend{font-size:.85rem;color:var(--stone);margin:-1.6rem 0 2.2rem;max-width:64ch}
.cktally{font-size:1.05rem;color:var(--stone);margin-bottom:1.2rem}
.cktally strong{
  font-family:var(--display);font-weight:800;font-size:1.5rem;
  color:var(--green-deep);letter-spacing:-.03em;
}

.ckjump{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:2.4rem}
.ckjump a{
  font-size:.85rem;font-weight:500;text-decoration:none;color:var(--green-deep);
  border:1px solid var(--green-line);border-radius:999px;padding:.35rem .8rem;
  background:var(--green-tint);
}
.ckjump a:hover{background:var(--green);color:#fff;border-color:var(--green)}

.cksec{scroll-margin-top:calc(var(--hdr-h,89px) + 5.5rem)}
.cksec + .cksec{margin-top:2.6rem}
.cksec__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:.7rem;border-bottom:2px solid var(--green);margin-bottom:.2rem;
}
.cksec__head h2{font-size:1.45rem}
.band .cksec__head h2{font-size:1.45rem;margin-bottom:0}
.cksec__count{font-size:.86rem;color:var(--stone);margin:0;white-space:nowrap}

.cklist{list-style:none;margin:0;padding:0}
.ckrow{
  display:grid;grid-template-columns:1.5rem 1fr auto;
  gap:.2rem .7rem;align-items:baseline;
  padding:.75rem .2rem;border-bottom:1px solid #EDF2E7;
}
.ckrow__mark{
  grid-column:1;align-self:center;width:1.15rem;height:1.15rem;border-radius:50%;
  background:var(--green);position:relative;
}
/* the tick is drawn, not a font glyph, so it cannot fail to load */
.ckrow__mark::after{
  content:"";position:absolute;left:.3rem;top:.31rem;
  width:.32rem;height:.16rem;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}
.ckrow__txt{grid-column:2;font-size:.98rem}
.cktier{grid-column:3;align-self:center;justify-self:end}

/* not included at the chosen level: never colour alone, the mark changes
   shape to a hollow ring and the row carries a text tag */
.ckrow.is-out{opacity:.72}
.ckrow.is-out .ckrow__mark{background:none;border:2px solid #C6D3BA}
.ckrow.is-out .ckrow__mark::after{display:none}
.ckrow.is-out .ckrow__txt{color:var(--stone)}

/* third row state: buyable add-on. Distinct shape (plus) as well as colour. */
.ckrow.is-out[data-addon="1"]{opacity:.9}
.ckrow.is-out[data-addon="1"] .ckrow__mark{background:none;border:2px solid var(--yellow)}
.ckrow.is-out[data-addon="1"] .ckrow__mark::after{
  display:block;left:.24rem;top:.5rem;width:.42rem;height:0;
  border:0;border-top:2px solid #C7B200;transform:none;
}
.ckrow.is-out[data-addon="1"] .ckrow__mark::before{
  content:"";position:absolute;left:.44rem;top:.3rem;width:0;height:.42rem;
  border-left:2px solid #C7B200;
}
.ckrow.is-out[data-addon="1"] .ckrow__txt{color:var(--ink)}
.ckrow[data-addon="1"] .cktier{background:#FFFBE6;border-color:#EBD98A;color:#6B5D00}

.ckempty{
  font-size:1rem;color:var(--stone);background:var(--green-tint);
  border:1px solid var(--green-line);border-radius:var(--r-md);
  padding:1.1rem 1.2rem;margin:1.5rem 0 0;
}
.cknote{
  font-size:.86rem;color:var(--stone);margin:2.2rem 0 0;
  padding-top:1.1rem;border-top:1px solid var(--green-line);max-width:70ch;
}
.center{text-align:center}

@media (max-width:1000px){
  .ckbar__in{gap:.8rem}
  .ckfilter input{min-width:12rem}
}
@media (max-width:620px){
  .ckbar{top:var(--hdr-h-sm,72px)}
  .ckbar__in{flex-direction:column;align-items:stretch;padding:.7rem 0}
  .seg{justify-content:space-between}
  .seg__opt{flex:1;padding:.5rem .4rem}
  .seg__label{font-size:.9rem}
  .ckbar__right{justify-content:space-between}
  .ckfilter{flex:1}
  .ckfilter input{min-width:0;width:100%}
  .ckrow{grid-template-columns:1.4rem 1fr}
  .cktier{grid-column:2;justify-self:start;margin-top:.35rem}
  .cksec{scroll-margin-top:calc(var(--hdr-h-sm,72px) + 8rem)}
  .cksec__head{flex-direction:column;align-items:flex-start;gap:.2rem}
  .band .cksec__head h2,.cksec__head h2{font-size:1.2rem}
}