/* ═══════════════════════════════════════════════════════════════
   ANGRY CAT CONTRACTING — homepage v2  ("The Sheet")

   The page is laid out the way the Door Service site is: sections
   are flat sheets in three colours (paper, primer, ink) plus one
   accent sheet; every photograph sits in a 1.5px ink frame with a
   white matte and a dimension-line caption under it; each section
   opens with a title strip (a 3px accent rule, the heading, a quiet
   note at the right) instead of a small tracked label; services read
   as a ruled schedule with a photo per row; reviews are square ink-
   framed notes. Nothing is rounded past 2px except the buttons (6px).

   Palette: TRUE neutrals so nothing blue-grey sits against the teal.
     ink    #141414   on paper → 17.4:1
     steel  #505050   on paper →  7.4:1, on primer → 6.6:1
     teal   #0E6E78   on paper →  6.9:1  (white on teal 6.9:1)
     foam   #DDF3F5   on teal  →  6.3:1  (secondary text on teal)
     mist   #CFCFCF   on ink   → 11.3:1
     teal-bright #57C4CE on ink → 8.8:1 (accent on dark sheets only)

   Type: ONE family, Manrope, 400 for reading and 800 for display,
   tight tracking, sentence case. No serif, no eyebrow labels.
   Motion: transform / opacity / clip only, all off under
   prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  --ink:#141414; --ink-2:#1D1D1D; --ink-3:#2A2A2A;
  --paper:#FFFFFF; --primer:#F2F2F2; --primer-2:#E6E6E6;
  --steel:#505050; --mist:#CFCFCF;
  --rule:rgba(20,20,20,.16); --rule-strong:rgba(20,20,20,.42); --rule-dark:rgba(255,255,255,.16);

  --teal:#0E6E78; --teal-2:#0A545C; --teal-bright:#57C4CE;
  --foam:#DDF3F5; --teal-wash:#E9F5F6;

  --star:#E3A400; --ok:#1E7A46; --err:#B3261E; --err-wash:#FDF3F2;

  --r:6px; --r-lg:10px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:36px; --s7:56px; --s8:80px; --s9:120px;
  --maxw:1220px; --maxw-prose:700px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px; scrollbar-color:#3A3F46 var(--primer)}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
::selection{background:var(--teal); color:#fff}
:root{accent-color:var(--teal); caret-color:var(--teal)}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.55; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding-bottom:calc(72px + env(safe-area-inset-bottom,0px));
}
@media (min-width:900px){ body{padding-bottom:0} }

h1,h2,h3,h4{font-family:var(--font); font-weight:800; line-height:1.04; margin:0 0 var(--s4); letter-spacing:-.03em; text-wrap:balance}
h1{font-size:clamp(2.3rem,1.35rem + 3.4vw,4.1rem); letter-spacing:-.04em}
h2{font-size:clamp(1.75rem,1.25rem + 2.2vw,3.1rem); letter-spacing:-.035em}
h3{font-size:clamp(1.15rem,1.05rem + .45vw,1.45rem); line-height:1.18; letter-spacing:-.02em; margin-bottom:var(--s2)}
h4{font-size:1.05rem; line-height:1.3; letter-spacing:-.01em; margin-bottom:var(--s2)}
p{margin:0 0 var(--s4); max-width:62ch}
a{color:inherit}
ul,ol{margin:0; padding:0; list-style:none}
img,svg{max-width:100%; display:block}
strong,b{font-weight:700}
em{font-style:normal; color:var(--teal)}
.on-dark em{color:var(--teal-bright)}

.lede{font-size:clamp(1.04rem,1rem + .3vw,1.22rem); color:var(--steel); line-height:1.5}
.on-dark .lede{color:var(--mist)}
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--s5)}
@media (min-width:900px){ .wrap{padding-inline:var(--s6)} }
.tel{font-variant-numeric:tabular-nums}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--teal); outline-offset:3px; border-radius:2px}
.on-dark :focus-visible{outline-color:#fff}
.skip{position:absolute; left:var(--s4); top:-100px; z-index:300; background:var(--teal); color:#fff; padding:14px 22px; font-weight:700; text-decoration:none; border-radius:var(--r)}
.skip:focus{top:var(--s3)}
.vh{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* scroll progress */
.progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:200; pointer-events:none}
.progress__bar{height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%; background:var(--teal)}

/* ═══════════════ SHEETS ═══════════════ */
.sheet{padding-block:var(--s7)}
@media (min-width:700px){ .sheet{padding-block:var(--s8)} }
@media (min-width:1000px){ .sheet{padding-block:96px} }
.sheet--primer{background:var(--primer)}
.sheet--ink{background:var(--ink); color:#fff; border-top:4px solid var(--teal)}
.sheet--ink h1,.sheet--ink h2,.sheet--ink h3{color:#fff}
.sheet--trimmed{border-bottom:4px solid var(--teal)}
.sheet--teal{background:var(--teal); color:#fff; border-top:4px solid var(--ink)}
.sheet--teal h1,.sheet--teal h2,.sheet--teal h3{color:#fff}
.sheet--teal .strip__n,.sheet--teal .lede{color:var(--foam)}
.sheet--teal .dim{color:var(--foam)}
.sheet--teal .dim::before,.sheet--teal .dim::after{background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)) center/100% 1px no-repeat; border-color:rgba(255,255,255,.7)}
.sheet--teal .bay__frame{border-color:#fff; background:#fff}
.sheet--teal .bay__tag{background:var(--ink)}
.sheet--teal em{color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.5); text-underline-offset:.12em}

/* title strip: rule, heading, quiet note */
.strip{
  position:relative; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--s2) var(--s5);
  padding-top:calc(var(--s4) + 3px); margin-bottom:var(--s5);
}
.strip::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--teal); transform-origin:left}
.sheet--teal .strip::before{background:#fff}
.sheet--ink .strip::before{background:var(--teal-bright)}
.strip h2{margin:0; flex:1 1 60%; max-width:22ch}
.strip__n{font-size:.78rem; color:var(--steel); text-align:right; flex:0 1 auto; padding-top:6px}
.on-dark .strip__n{color:var(--mist)}
.strip__lede{margin:calc(var(--s5) * -1 + var(--s3)) 0 var(--s5); max-width:60ch}
@media (max-width:699px){ .strip__n{flex:1 1 100%; text-align:left; padding-top:0} .strip h2{max-width:none} }
@media (min-width:700px){ .strip{margin-bottom:var(--s6)} .strip__lede{margin-top:calc(var(--s6) * -1 + var(--s3)); margin-bottom:var(--s6)} }
.js .strip::before{transform:scaleX(0); transition:transform 1.1s var(--ease-out)}
.js .strip.in::before{transform:scaleX(1)}

/* dimension line: |───── label ─────| */
.dim{
  display:flex; align-items:center; gap:10px; margin-top:10px;
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--steel);
  font-variant-numeric:tabular-nums;
}
.dim::before,.dim::after{content:""; flex:1; height:9px; min-width:14px; background:linear-gradient(var(--rule-strong),var(--rule-strong)) center/100% 1px no-repeat}
.dim::before{border-left:1.5px solid var(--rule-strong)}
.dim::after{border-right:1.5px solid var(--rule-strong)}
.dim i{flex:0 1 auto; font-style:normal; text-align:center; line-height:1.35}
.dim b{font-weight:700; color:var(--ink)}
.on-dark .dim{color:var(--mist)}
.on-dark .dim b{color:#fff}
.on-dark .dim::before,.on-dark .dim::after{background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)) center/100% 1px no-repeat; border-color:rgba(255,255,255,.6)}

/* the bay: an opening holding a photograph */
.bay{position:relative; margin:0; display:block}
.bay__frame{display:block; position:relative; overflow:hidden; background:var(--primer-2); border:1.5px solid var(--ink); border-radius:2px; aspect-ratio:3/2}
.bay__frame img{width:100%; height:100%; object-fit:cover; display:block; background:var(--primer-2)}
.bay--4x3 .bay__frame{aspect-ratio:4/3}
.bay--tall .bay__frame{aspect-ratio:4/5}
.bay--1x1 .bay__frame{aspect-ratio:1/1}
.on-dark .bay__frame{border-color:rgba(255,255,255,.72)}
a.bay{text-decoration:none; color:inherit}
a.bay .bay__frame img{transition:transform .6s var(--ease-out)}
a.bay:hover .bay__frame img{transform:scale(1.04)}
/* framed: ink rule, white matte, hairline inside, a corner tag */
.bay--framed .bay__frame{padding:6px; background:#fff; border:1.5px solid var(--ink)}
.bay--framed .bay__frame img{outline:1px solid var(--rule-strong); outline-offset:-1px}
.bay__tag{
  position:absolute; top:16px; left:16px; z-index:2; padding:6px 10px;
  background:var(--teal); color:#fff; border-radius:2px;
  font-size:.62rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
}
.bay--framed:hover .bay__frame img{transform:scale(1.03)}
.bay--framed .bay__frame img{transition:transform .6s var(--ease-out), clip-path 1s var(--ease-out)}
/* the opening is drawn first, the photo rises into it */
.js .bay--reveal .bay__frame img{clip-path:inset(100% 0 0 0); transition:clip-path 1s var(--ease-out), transform .6s var(--ease-out)}
.js .bay--reveal.in .bay__frame img{clip-path:inset(0 0 0 0)}

/* ═══════════════ BUTTONS ═══════════════ */
.btn{
  --bg:var(--ink); --fg:#fff; --bd:var(--ink);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:14px 26px; font-family:var(--font); font-size:1rem; font-weight:700;
  letter-spacing:-.005em; background:var(--bg); color:var(--fg); border:1.5px solid var(--bd);
  border-radius:var(--r); text-decoration:none; cursor:pointer; text-align:center; white-space:nowrap;
  transition:background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .14s var(--ease), box-shadow .2s var(--ease);
}
.btn svg{flex:0 0 auto}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--teal{--bg:var(--teal); --fg:#fff; --bd:var(--teal); box-shadow:0 8px 22px -10px rgba(14,110,120,.6)}
.btn--teal:hover{--bg:var(--teal-2); --bd:var(--teal-2)}
.btn--ink:hover{--bg:var(--ink-3); --bd:var(--ink-3)}
.btn--paper{--bg:#fff; --fg:var(--ink); --bd:#fff}
.btn--paper:hover{--bg:var(--primer)}
.btn--outline{--bg:transparent; --fg:var(--ink); --bd:var(--rule-strong)}
.btn--outline:hover{--bd:var(--ink); --bg:rgba(20,20,20,.04)}
.btn--outline-light{--bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.55)}
.btn--outline-light:hover{--bd:#fff; --bg:rgba(255,255,255,.08)}
.btn--block{width:100%}
.btn--sm{min-height:46px; padding:10px 20px; font-size:.93rem}
.sheet--teal .btn--paper{--fg:var(--teal)}
.sheet--teal .btn--paper:hover{--bg:var(--foam)}

/* ═══════════════ TOP BAR + TICKER ═══════════════ */
.topbar{background:var(--teal); color:#fff; font-size:.8rem; font-weight:600}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); min-height:38px}
.topbar__r{display:inline-flex; align-items:center; gap:7px; white-space:nowrap; color:#fff; text-decoration:none; min-height:38px}
.topbar__r:hover{text-decoration:underline; text-underline-offset:3px}
.topbar__r .tel{font-weight:800}
@media (max-width:719px){ .topbar__r{display:none} }
.ticker{flex:1 1 auto; min-width:0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ticker__track{display:flex; width:max-content}
.ticker__track span{display:inline-flex; align-items:center; white-space:nowrap; color:var(--foam); padding-right:14px}
.ticker__track span::after{content:""; display:inline-block; width:5px; height:5px; margin-left:14px; background:#fff; opacity:.75; transform:rotate(45deg)}
.js .ticker__track{animation:tick 44s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}

/* ═══════════════ HEADER ═══════════════ */
.header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94); backdrop-filter:saturate(160%) blur(12px); border-bottom:1.5px solid var(--ink); transition:box-shadow .3s var(--ease)}
html.scrolled .header{box-shadow:0 10px 30px -14px rgba(0,0,0,.28)}
.header__inner{display:flex; align-items:center; gap:var(--s3); min-height:66px}
@media (min-width:900px){ .header__inner{min-height:76px; gap:var(--s5)} }

.mark{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); margin-right:auto; min-height:44px; flex-shrink:0; line-height:1}
.mark__cat{width:44px; height:44px; flex:0 0 44px; object-fit:contain}
.mark__txt{display:flex; flex-direction:column; justify-content:center}
.mark b{font-size:1.18rem; font-weight:800; letter-spacing:-.02em; text-transform:uppercase; white-space:nowrap}
.mark i{font-style:normal; font-size:.58rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); margin-top:4px; white-space:nowrap}
@media (min-width:720px){ .mark b{font-size:1.4rem} .mark i{font-size:.62rem} .mark__cat{width:50px; height:50px; flex-basis:50px} }
@media (max-width:420px){
  .header .header__inner > *{min-width:0}
  .header .mark{flex-shrink:1}
  .header .mark b{font-size:clamp(13px,5vw,18px)}
  .header .mark i{letter-spacing:.06em; font-size:clamp(6.8px,2.1vw,9px); white-space:normal}
  .header .mark__cat{width:36px; height:36px; flex-basis:36px}
}

.nav{display:none; align-items:center; gap:var(--s5)}
@media (min-width:1080px){ .nav{display:flex} }
.nav > a,.navdrop__btn{
  position:relative; text-decoration:none; font-size:.94rem; font-weight:600; color:var(--steel);
  white-space:nowrap; padding:6px 0; background:none; border:0; cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; gap:6px; min-height:44px; transition:color .18s var(--ease);
}
.nav > a::after,.navdrop__btn::after{content:""; position:absolute; left:0; bottom:8px; width:100%; height:2px; background:var(--teal); transform:scaleX(0); transform-origin:left; transition:transform .22s var(--ease)}
.nav > a:hover,.navdrop__btn:hover{color:var(--ink)}
.nav > a:hover::after,.navdrop__btn:hover::after{transform:scaleX(1)}
.navdrop{position:relative}
.navdrop__btn svg{transition:transform .22s var(--ease)}
.navdrop__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.navdrop__menu{
  position:absolute; top:calc(100% + 10px); left:-18px; z-index:70; min-width:300px; padding:var(--s2);
  background:#fff; border:1.5px solid var(--ink); border-radius:var(--r-lg);
  box-shadow:0 22px 50px -20px rgba(20,20,20,.4);
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.navdrop__menu.on{opacity:1; transform:none; pointer-events:auto}
.navdrop__menu a{display:block; padding:10px 14px; border-radius:var(--r); text-decoration:none; font-size:.94rem; font-weight:600; color:var(--ink); transition:background-color .15s var(--ease)}
.navdrop__menu a small{display:block; font-size:.79rem; font-weight:400; color:var(--steel); margin-top:2px}
.navdrop__menu a:hover{background:var(--teal-wash); color:var(--teal)}

.header__tel{display:none; text-decoration:none; text-align:right; line-height:1.1; flex-shrink:0; min-height:44px; flex-direction:column; justify-content:center}
@media (min-width:720px){ .header__tel{display:flex} }
.header__tel small{display:block; font-size:.56rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); margin-bottom:4px}
.header__tel strong{display:block; font-size:1.3rem; font-weight:800; letter-spacing:-.03em; white-space:nowrap; font-variant-numeric:tabular-nums}
.header__cta{display:none; min-height:46px; padding:10px 20px; font-size:.93rem; flex-shrink:0}
@media (min-width:900px){ .header__cta{display:inline-flex} }
.header__call{display:inline-flex; width:46px; height:46px; min-height:0; padding:0; border-radius:var(--r); box-shadow:none}
@media (min-width:720px){ .header__call{display:none} }
.burger{display:grid; place-items:center; width:46px; height:46px; flex-shrink:0; background:none; border:1.5px solid var(--ink); border-radius:var(--r); cursor:pointer; color:var(--ink)}
@media (min-width:1080px){ .burger{display:none} }

/* mobile sheet */
.msheet{position:fixed; inset:0; z-index:120; background:var(--paper); color:var(--ink); overflow-y:auto; opacity:0; pointer-events:none; transition:opacity .22s var(--ease-out)}
.msheet.on{opacity:1; pointer-events:auto}
.msheet__top{display:flex; align-items:center; justify-content:space-between; padding:calc(var(--s3) + env(safe-area-inset-top,0px)) var(--s5) var(--s3); border-bottom:1.5px solid var(--ink)}
.msheet__x{width:46px; height:46px; display:grid; place-items:center; color:var(--ink); background:none; border:1.5px solid var(--ink); border-radius:var(--r); cursor:pointer}
.msheet nav{padding:var(--s2) var(--s5) 0}
.msheet nav a{display:flex; flex-direction:column; justify-content:center; min-height:58px; padding:var(--s3) 0; border-bottom:1px solid var(--rule); text-decoration:none; color:var(--ink); font-size:1.2rem; font-weight:800; letter-spacing:-.025em}
.msheet nav a small{font-size:.82rem; font-weight:400; color:var(--steel); letter-spacing:0; margin-top:2px}
.msheet nav a.msheet__sub{font-size:1rem; font-weight:600; min-height:50px}
.msheet__foot{padding:var(--s5); display:grid; gap:var(--s3)}

/* ═══════════════ HERO ═══════════════
   The client's own finished bathroom is the ground at every width, under a
   neutral dark scrim. Phones: a band of the photo opens the hero and fades
   into ink; the headline sits on its lower half. Desktop: the photo is the
   whole ground, copy left, call card right. */
.hero{position:relative; background:var(--ink); color:#fff; overflow:hidden}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--teal); z-index:4; transform-origin:left}
.hero__bg{position:absolute; top:0; left:0; right:0; height:min(92vw,560px); z-index:0}
.hero__bg picture,.hero__bg img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 45%}
.hero__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,20,20,.30) 0%, rgba(20,20,20,.26) 22%, rgba(20,20,20,.58) 48%, rgba(20,20,20,.86) 78%, var(--ink) 100%)}
.hero__inner{position:relative; z-index:2; padding-block:clamp(120px,34vw,180px) var(--s5)}
.hero h1{color:#fff; margin-bottom:var(--s4); text-shadow:0 2px 28px rgba(0,0,0,.45); max-width:18ch}
.hero .lede{color:#E9E9E9; max-width:46ch; margin-bottom:var(--s5); text-shadow:0 1px 18px rgba(0,0,0,.45)}
.hero__actions{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:var(--s5)}
.hero__actions .btn{flex:1 1 100%}
@media (min-width:460px){ .hero__actions .btn{flex:0 1 auto} }
.hero__card{display:none}
.hero__foot{position:relative; z-index:2; padding-bottom:var(--s5)}
.hero__dim{margin:0; max-width:none}
@media (min-width:600px) and (max-width:979px){ .hero__inner{padding-top:220px} }
@media (min-width:980px){
  .hero__bg{inset:0; height:auto}
  .hero__bg img{object-position:50% 60%}
  .hero__bg::after{background:linear-gradient(90deg, rgba(20,20,20,.72) 0%, rgba(20,20,20,.50) 50%, rgba(20,20,20,.18) 100%), linear-gradient(180deg, rgba(20,20,20,.36) 0%, rgba(20,20,20,.10) 35%, rgba(20,20,20,.22) 70%, rgba(20,20,20,.74) 100%)}
  .js .hero__bg img{animation:heroIn 1.4s var(--ease-out) both}
  .hero__inner{display:grid; grid-template-columns:minmax(0,1.1fr) 380px; gap:var(--s8); align-items:center; padding-block:var(--s8) var(--s6)}
  .hero__card{display:block}
  .hero__foot{padding-bottom:var(--s6)}
}
@keyframes heroIn{from{opacity:0; transform:scale(1.05)} to{opacity:1; transform:none}}

/* headline words rise on load (site.js splits [data-words]) */
.reveal-word{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em}
.reveal-word > span{display:inline-block; transform:translateY(108%); animation:wordUp .8s var(--ease-out) forwards}
@keyframes wordUp{to{transform:translateY(0)}}

/* figures under the hero buttons: ruled, not tiles */
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); border-top:1px solid var(--rule-dark); padding-top:var(--s4); margin-top:var(--s5)}
.facts b{display:block; font-size:clamp(1.5rem,1.1rem + 1.6vw,2.3rem); font-weight:800; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums}
.facts b sup{font-size:.5em; vertical-align:super; color:var(--teal); margin-left:1px}
.facts span{display:block; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); margin-top:6px; line-height:1.3}
.on-dark .facts span{color:var(--mist)}
.facts b span,.facts--hero b span{display:inline; font-size:inherit; font-weight:inherit; letter-spacing:inherit; text-transform:none; color:inherit; margin:0; line-height:inherit}
.facts--hero{grid-template-columns:repeat(2,1fr); gap:var(--s4); border-top:1px solid rgba(255,255,255,.34); padding-top:var(--s4); margin-top:0; max-width:680px}
@media (min-width:560px){ .facts--hero{grid-template-columns:repeat(4,1fr)} }
.facts--hero b{color:#fff}
.facts--hero b sup{color:#FFD24D}
.facts--hero span{color:var(--mist)}
.facts--hero .stars{display:flex; gap:2px; margin:0 0 6px; color:var(--star)}
.facts--hero a{color:inherit; text-decoration:none; display:block}
.facts--hero a:hover span{color:#fff; text-decoration:underline; text-underline-offset:3px}
.stars{display:inline-flex; gap:2px; color:var(--star)}

/* call card: teal head like the button that calls */
.callcard{position:relative; background:#fff; color:var(--ink); border:1.5px solid var(--ink); border-radius:2px; overflow:hidden}
.callcard__head{padding:var(--s5) var(--s5) var(--s4); border-bottom:1px solid var(--rule); background:var(--teal); color:#fff}
.callcard__tel{display:flex; align-items:center; min-height:44px; text-decoration:none; color:#fff; font-weight:800; font-size:clamp(1.7rem,1.3rem + 2vw,2.2rem); letter-spacing:-.04em; line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums}
.callcard__tel:hover{color:var(--foam)}
.callcard__hours{margin:var(--s3) 0 0; font-size:.86rem; color:var(--foam); max-width:none}
.callcard__hours strong{color:#fff}
.callcard__body{padding:var(--s5); display:grid; gap:var(--s3)}
.callcard__or{display:flex; align-items:center; gap:var(--s3); font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--steel); margin:0}
.callcard__or::before,.callcard__or::after{content:""; flex:1; height:1px; background:var(--rule)}
.callcard__points{display:grid; gap:9px; margin:var(--s3) 0 0; padding-top:var(--s4); border-top:1px solid var(--rule)}
.callcard__points li{display:flex; align-items:flex-start; gap:9px; font-size:.84rem; color:var(--steel); line-height:1.45}
.callcard__points svg{flex:0 0 17px; margin-top:2px; color:var(--ok)}

/* load choreography: everything on the first viewport, done by ~2.3s */
@keyframes riseIn{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@keyframes slideIn{from{opacity:0; transform:translateX(28px)} to{opacity:1; transform:none}}
@keyframes drawX{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
.js .hero .lede{animation:riseIn .8s var(--ease-out) .55s both}
.js .hero__actions{animation:riseIn .8s var(--ease-out) .7s both}
.js .facts--hero{animation:riseIn .8s var(--ease-out) .85s both}
.js .hero__card{animation:slideIn .9s var(--ease-out) .9s both}
.js .hero__foot{animation:fadeIn .8s var(--ease-out) 1.25s both}
.js .hero::after{animation:drawX 1.1s var(--ease-out) 1.05s both}
.js .hero__dim::before{transform-origin:right; animation:drawX .9s var(--ease-out) 1.35s both}
.js .hero__dim::after{transform-origin:left; animation:drawX .9s var(--ease-out) 1.35s both}
@keyframes ring{0%,100%{transform:rotate(0)} 2%{transform:rotate(-16deg)} 4%{transform:rotate(14deg)} 6%{transform:rotate(-10deg)} 8%{transform:rotate(6deg)} 10%{transform:rotate(0)}}
.js .hero__actions .btn--teal svg,.js .mbar .btn--teal svg,.js .callcard .btn--teal svg,.js .cta .btn--paper svg,.js .visit__acts .btn--teal svg{animation:ring 7s ease-in-out 2.6s infinite; transform-origin:50% 60%}

/* generic scroll reveal used by site.js (.rise gets .in) */
.js .rise{opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.js .rise.in{opacity:1; transform:none}

/* ═══════════════ THE WALL — real jobs ═══════════════ */
.wall{display:flex; gap:var(--s4); overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; padding-bottom:var(--s3); margin-inline:calc(var(--s5) * -1); padding-inline:var(--s5); scrollbar-width:thin}
.wall > *{flex:0 0 86%; scroll-snap-align:start}
@media (min-width:600px){ .wall > *{flex-basis:58%} }
@media (min-width:900px){
  .wall{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4); overflow:visible; margin-inline:0; padding-inline:0; padding-bottom:0}
  .wall > *{flex:none}
  .wall > :first-child{grid-column:span 2; grid-row:span 2; display:flex; flex-direction:column}
  .wall > :first-child .bay__frame{flex:1 1 auto; min-height:0; height:auto; aspect-ratio:auto}
  .wall > :first-child .dim{flex:0 0 auto}
  .wall > :nth-child(n+6){grid-column:span 2}
  .wall > :nth-child(n+6) .bay__frame{aspect-ratio:2/1}
}
.wall__foot{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}

/* ═══════════════ NOTES — reviews ═══════════════ */
.notes{display:grid; gap:var(--s4)}
@media (min-width:760px){ .notes{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5); align-items:start} }
.notes > li[hidden]{display:none}
.rev{margin:0; padding:var(--s5); background:#fff; border:1.5px solid var(--ink); border-radius:2px; display:flex; flex-direction:column}
.rev .stars{margin-bottom:var(--s3)}
.rev blockquote{margin:0 0 var(--s4); font-size:.98rem; line-height:1.55; color:var(--ink); flex-grow:1}
.rev blockquote p{margin:0 0 .75em; max-width:none}
.rev blockquote p:last-child{margin-bottom:0}
.rev figcaption{display:flex; align-items:center; gap:10px; border-top:1px solid var(--rule); padding-top:var(--s3); margin-top:auto}
.rev__av{width:36px; height:36px; flex:0 0 36px; border-radius:2px; background:var(--teal); color:#fff; display:grid; place-items:center; font-weight:800; font-size:.85rem}
.rev figcaption strong{display:block; font-size:.9rem}
.rev figcaption span span{display:block; font-size:.78rem; color:var(--steel)}
/* long reviews clamp with a fade; site.js adds the Read more button only where clipped */
.rev__q{position:relative; max-height:15.5em; overflow:hidden}
.rev--fits .rev__q{max-height:none; overflow:visible}
.rev.is-open .rev__q{max-height:none}
.rev--clipped .rev__q::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3.4em; background:linear-gradient(rgba(255,255,255,0),#fff); pointer-events:none}
.rev.is-open .rev__q::after{content:none}
.rev__more{align-self:flex-start; margin:0 0 var(--s4); background:none; border:0; padding:0; cursor:pointer; font-family:var(--font); font-size:.85rem; font-weight:700; color:var(--teal); text-decoration:underline; text-underline-offset:3px}
.rev__more:hover{color:var(--ink)}
.rev--in{animation:revIn .45s var(--ease-out) both}
@keyframes revIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.noteacts{display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s5); align-items:center}
.revcount{font-size:.85rem; color:var(--steel); margin:var(--s3) 0 0}
.js .notes .rev{transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.js .notes:not(.in) .rev{opacity:0; transform:translateY(16px)}
.js .notes.in > li:nth-child(2) .rev{transition-delay:.1s}
.js .notes.in > li:nth-child(3) .rev{transition-delay:.2s}

/* ═══════════════ BUILD STRIP — three framed stages ═══════════════ */
.stages{display:grid; gap:var(--s5)}
@media (min-width:700px){ .stages{grid-template-columns:repeat(3,minmax(0,1fr))} }
.stages .bay__frame{aspect-ratio:4/5}
.stages .dim b{margin-right:6px}
.stages__foot{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}

/* ═══════════════ HOW IT WORKS — ink sheet, three numbered columns ═══════════════ */
.visit{display:grid; gap:0; margin:0; padding:0; list-style:none; border-top:1.5px solid rgba(255,255,255,.7)}
.visit li{display:grid; grid-template-columns:64px 1fr; gap:var(--s4); padding:var(--s5) 0; border-bottom:1px solid rgba(255,255,255,.2)}
.visit b{font-size:clamp(1.9rem,1.4rem + 2vw,3rem); font-weight:800; line-height:1; color:var(--teal-bright); letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.visit h3{margin:0 0 6px; color:#fff; font-size:clamp(1.15rem,1rem + .8vw,1.6rem)}
.visit p{margin:0; color:var(--mist); max-width:56ch}
@media (min-width:900px){
  .visit{grid-template-columns:repeat(3,1fr)}
  .visit li{grid-template-columns:1fr; gap:var(--s4); padding:var(--s6) var(--s6) var(--s6) 0; border-bottom:0; border-right:1px solid rgba(255,255,255,.2)}
  .visit li + li{padding-left:var(--s6)}
  .visit li:last-child{border-right:0; padding-right:0}
}
.visit__acts{display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--s6)}
@media (max-width:459px){ .visit__acts .btn{flex:1 1 100%} }

/* ═══════════════ SCHEDULE — the services list ═══════════════ */
.schedule{border-top:1.5px solid var(--ink)}
.schedule__row{display:grid; grid-template-columns:72px 1fr auto; align-items:center; gap:var(--s4); padding:var(--s4) 0; border-bottom:1px solid var(--rule); text-decoration:none; color:inherit; min-height:72px; transition:background-color .18s var(--ease)}
.schedule__row:hover{background:linear-gradient(90deg,var(--teal-wash),transparent 60%)}
.schedule__pic{width:72px; aspect-ratio:3/2; border:1.5px solid var(--ink); border-radius:2px; overflow:hidden; background:var(--primer-2)}
.schedule__pic img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease-out)}
.schedule__row:hover .schedule__pic img{transform:scale(1.06)}
.schedule__t{font-weight:800; font-size:1.08rem; letter-spacing:-.025em; line-height:1.15}
.schedule__d{display:block; font-size:.9rem; color:var(--steel); margin-top:3px; font-weight:400; letter-spacing:0}
.schedule__d--wide{display:none}
.schedule__go{color:var(--teal); transition:transform .25s var(--ease-out)}
.schedule__row:hover .schedule__go{transform:translateX(5px)}
@media (min-width:900px){
  .schedule__row{grid-template-columns:132px 1.1fr 1.4fr auto; gap:var(--s5); padding:var(--s5) 0}
  .schedule__pic{width:132px}
  .schedule__t{font-size:1.28rem}
  .schedule__d{margin-top:0; font-size:.97rem}
  .schedule__d--wide{display:block}
}
.js .schedule__row{transition:opacity .7s var(--ease-out), transform .7s var(--ease-out), background-color .25s var(--ease)}
.js .schedule:not(.in) .schedule__row{opacity:0; transform:translateX(-12px)}
.js .schedule.in .schedule__row:nth-child(2){transition-delay:.07s}
.js .schedule.in .schedule__row:nth-child(3){transition-delay:.14s}
.js .schedule.in .schedule__row:nth-child(4){transition-delay:.21s}
.js .schedule.in .schedule__row:nth-child(5){transition-delay:.28s}
.schedule__foot{margin-top:var(--s5); font-size:.95rem; color:var(--steel)}
.schedule__foot a{color:var(--teal); font-weight:700; text-decoration:underline; text-underline-offset:3px}

/* ═══════════════ BEFORE / AFTER — in a framed bay ═══════════════ */
.ba-wrap{display:grid; gap:var(--s6)}
@media (min-width:1000px){ .ba-wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:var(--s8); align-items:center} }
.ba-side .lede{margin-bottom:var(--s5)}
.ba-side .ticks{margin-bottom:var(--s5)}
.ba{--pos:50%; position:relative; margin:0; overflow:hidden; isolation:isolate; background:var(--primer-2); aspect-ratio:3/2; touch-action:pan-y}
.ba img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; user-select:none; -webkit-user-drag:none}
.ba__before{position:absolute; inset:0; z-index:2; clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba__line{position:absolute; top:0; bottom:0; z-index:3; left:var(--pos); width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 0 1px rgba(20,20,20,.35); pointer-events:none}
.ba__grip{position:absolute; top:50%; left:var(--pos); transform:translate(-50%,-50%); width:46px; height:46px; border-radius:2px; background:#fff; color:var(--ink); border:1.5px solid var(--ink); display:grid; place-items:center; box-shadow:0 4px 18px rgba(20,20,20,.35); pointer-events:none}
.ba__grip svg{width:22px; height:22px}
.ba__range{position:absolute; inset:0; z-index:4; width:100%; height:100%; margin:0; padding:0; appearance:none; background:transparent; cursor:ew-resize}
.ba__range::-webkit-slider-thumb{appearance:none; width:52px; height:100vh; background:transparent; cursor:ew-resize}
.ba__range::-moz-range-thumb{width:52px; height:100vh; background:transparent; border:0; cursor:ew-resize}
.ba__range:focus-visible{outline:3px solid var(--teal); outline-offset:-3px}
.ba__tag{position:absolute; z-index:3; top:14px; padding:6px 10px; border-radius:2px; background:var(--ink); color:#fff; font-size:.62rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; pointer-events:none}
.ba__tag--b{left:14px}
.ba__tag--a{right:14px; background:var(--teal)}
.bay--ba .bay__frame{aspect-ratio:auto}
.ticks{display:grid; gap:10px; margin:0}
.ticks li{display:flex; gap:12px; align-items:flex-start; color:var(--steel); font-size:1rem}
.ticks svg{flex:0 0 20px; margin-top:3px; color:var(--teal)}

/* ═══════════════ LETTERING — the promises, no icons ═══════════════ */
.lettering{display:grid; gap:0 var(--s6); border-top:1.5px solid var(--ink)}
@media (min-width:700px){ .lettering{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1000px){ .lettering{grid-template-columns:repeat(3,minmax(0,1fr))} }
.lettering li{padding:var(--s4) 0; border-bottom:1px solid var(--rule)}
.lettering b{display:block; font-size:clamp(1.02rem,.95rem + .4vw,1.22rem); font-weight:800; letter-spacing:.01em; text-transform:uppercase; line-height:1.15; margin-bottom:6px; color:var(--teal)}
.lettering p{margin:0; font-size:.95rem; color:var(--steel); max-width:38ch}

/* ═══════════════ STORY — the teal sheet ═══════════════ */
.story{display:grid; gap:var(--s6)}
@media (min-width:900px){ .story{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--s7); align-items:start} }
.story__copy .lede{color:#fff; max-width:52ch; margin-bottom:var(--s5)}
.story__copy p{color:var(--foam); max-width:52ch}
.story__copy p strong{color:#fff}
.story__acts{display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--s5)}
.story__pics{display:grid; gap:var(--s4); grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start}
.story__pics .bay:first-child{grid-column:1/-1}
.crew{display:grid; gap:0; border-top:1.5px solid rgba(255,255,255,.7); margin-top:var(--s5)}
.crew li{display:grid; grid-template-columns:auto 1fr; gap:var(--s4); align-items:baseline; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.28)}
.crew b{font-size:1.05rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:#fff; min-width:88px}
.crew span{font-size:.98rem; color:var(--foam)}
.facts--teal{grid-template-columns:repeat(3,1fr); border-top:0; padding-top:0; margin-top:var(--s5); gap:var(--s4) var(--s5)}
.facts--teal b{color:#fff}
.facts--teal b sup{color:#FFD24D}
.facts--teal span{color:var(--foam)}

/* ═══════════════ AREAS ═══════════════ */
.areas-wrap{display:grid; gap:var(--s6)}
@media (min-width:1000px){ .areas-wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:var(--s8); align-items:start} }
.linkgrid{display:grid; gap:0; border-top:1.5px solid var(--ink)}
@media (min-width:640px){ .linkgrid{grid-template-columns:repeat(2,1fr); column-gap:var(--s6)} }
.linkgrid a{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:var(--s4) 0; border-bottom:1px solid var(--rule); text-decoration:none; color:var(--ink); font-weight:700; font-size:1.02rem; letter-spacing:-.02em; min-height:64px; transition:color .18s var(--ease)}
.linkgrid a small{display:block; font-size:.84rem; font-weight:400; color:var(--steel); margin-top:2px; letter-spacing:0}
.linkgrid a svg{flex-shrink:0; color:var(--teal); transition:transform .25s var(--ease-out)}
.linkgrid a:hover{color:var(--teal)}
.linkgrid a:hover svg{transform:translateX(5px)}
.chips{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s5)}
.chips > li{display:contents}
.chips a{display:inline-flex; align-items:center; min-height:44px; padding:8px 16px; border:1px solid var(--rule-strong); border-radius:2px; font-size:.92rem; font-weight:600; color:var(--ink); background:#fff; text-decoration:none; transition:border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease)}
.chips a:hover{border-color:var(--teal); color:var(--teal); background:var(--teal-wash)}

/* ═══════════════ FAQ ═══════════════ */
.faq{max-width:860px; border-top:1.5px solid var(--ink)}
.faq__i{border-bottom:1px solid var(--rule)}
.faq__b{position:relative; width:100%; min-height:70px; padding:var(--s4) 52px var(--s4) 0; display:flex; align-items:center; justify-content:space-between; gap:var(--s4); background:none; border:0; cursor:pointer; text-align:left; color:var(--ink); font-family:inherit; font-size:clamp(1.02rem,.98rem + .3vw,1.18rem); font-weight:700; letter-spacing:-.02em; line-height:1.3; transition:color .18s var(--ease)}
.faq__b:hover{color:var(--teal)}
.faq__sign{position:absolute; right:2px; top:50%; margin-top:-13px; width:26px; height:26px}
.faq__sign::before,.faq__sign::after{content:""; position:absolute; left:50%; top:50%; background:var(--teal); transition:transform .28s var(--ease-out), opacity .28s var(--ease)}
.faq__sign::before{width:15px; height:2px; margin:-1px 0 0 -7.5px}
.faq__sign::after{width:2px; height:15px; margin:-7.5px 0 0 -1px}
.faq__b[aria-expanded="true"] .faq__sign::after{transform:rotate(90deg); opacity:0}
.faq__p[hidden]{display:none}
.faq__p{padding:0 var(--s6) var(--s5) 0}
.faq__p p{margin:0 0 var(--s3); color:var(--steel); font-size:.98rem}
.faq__p p:last-child{margin-bottom:0}
@media (min-width:1000px){
  .faq--cols{max-width:none; display:grid; grid-template-columns:1fr 1fr; column-gap:var(--s7); border-top:0}
  .faq--cols .faq__i:nth-child(-n+2){border-top:1.5px solid var(--ink)}
}

/* ═══════════════ CLOSING BAND ═══════════════ */
.cta{position:relative; overflow:hidden; background:var(--teal); color:#fff; border-top:4px solid var(--ink)}
.cta__inner{position:relative; z-index:2; padding-block:var(--s7)}
@media (min-width:900px){ .cta__inner{padding-block:var(--s8); display:grid; grid-template-columns:1.2fr .8fr; gap:var(--s7); align-items:center} }
.cta h2{color:#fff; max-width:16ch; margin-bottom:var(--s3)}
.cta p{color:var(--foam); max-width:46ch; margin-bottom:0}
.cta .btn--paper{--fg:var(--teal)}
.cta .btn--paper:hover{--bg:var(--foam)}
.cta__acts{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s5)}
@media (min-width:900px){ .cta__acts{margin-top:0; justify-content:flex-end} }
.cta__lines{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.12}
.cta__lines span{position:absolute; left:0; right:0; height:1.5px; background:#fff}

/* ═══════════════ FOOTER ═══════════════ */
.foot{background:var(--ink); color:var(--mist); padding-block:var(--s7) var(--s5); font-size:.92rem; border-top:4px solid var(--teal)}
.foot__grid{display:grid; gap:var(--s6); margin-bottom:var(--s6)}
@media (min-width:800px){ .foot__grid{grid-template-columns:1.6fr 1fr 1fr 1fr} }
.foot h3{color:#fff; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:var(--s3); font-weight:700}
.foot a{color:var(--mist); text-decoration:none; transition:color .16s var(--ease)}
.foot a:hover{color:#fff}
.foot li a,.foot__bot a{display:inline-flex; align-items:center; min-height:44px}
.foot .mark{color:#fff; margin-bottom:var(--s3); margin-right:0}
.foot .mark i{color:var(--teal-bright)}
.foot .mark__cat{filter:invert(1); mix-blend-mode:screen}
.foot p{color:var(--mist); max-width:44ch}
.foot__badge{display:flex; align-items:center; gap:var(--s3); margin-top:var(--s4)}
.foot__badge img{width:72px; height:72px}
.foot__badge span{font-size:.82rem; color:var(--mist); max-width:22ch; line-height:1.35}
.foot__bot{border-top:1px solid var(--rule-dark); padding-top:var(--s4); display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); justify-content:space-between; font-size:.82rem}

/* ═══════════════ MOBILE BAR + CHAT ═══════════════ */
.mbar{position:fixed; left:0; right:0; bottom:0; z-index:80; display:grid; grid-template-columns:1.15fr 1fr; gap:8px; padding:10px var(--s3) calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(255,255,255,.96); backdrop-filter:blur(14px); border-top:1.5px solid var(--ink)}
@media (min-width:900px){ .mbar{display:none} }
.mbar .btn{min-height:52px; padding:10px 12px; font-size:.97rem}
chat-widget{bottom:calc(84px + env(safe-area-inset-bottom,0px)) !important}
@media (min-width:900px){ chat-widget{bottom:24px !important} }

/* ═══════════════ REDUCED MOTION ═══════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal-word > span{transform:none !important}
  .js .bay--reveal .bay__frame img{clip-path:none !important}
  .js .rise{opacity:1; transform:none}
  .js .strip::before{transform:none}
  .js .schedule:not(.in) .schedule__row,.js .notes:not(.in) .rev{opacity:1; transform:none}
  .btn:hover{transform:none}
  .ticker{-webkit-mask-image:none; mask-image:none}
}

/* ═══ PHONE SAFETY NET ═══ overflow structurally impossible below 420px */
@media (max-width:420px){
  html{overflow-x:hidden}
  body *{min-width:0}
  body{overflow-wrap:break-word}
  img,svg,video,table,iframe{max-width:100%}
}


/* ─────────────────────────────────────────────────────────────────────────
   2026-09-19. The page's real <h1> carries the local keyword so the heading
   and the title tag agree; the three-line statement keeps the exact look it
   had as the h1, it is just a <p> now. Nothing else moves.
   ───────────────────────────────────────────────────────────────────────── */
.hero__kicker{
  margin:0 0 var(--s3);
  font-family:var(--font); font-size:1rem; font-weight:800; line-height:1.3;
  letter-spacing:-.01em; color:var(--teal-bright); max-width:36ch;
  text-shadow:0 1px 14px rgba(0,0,0,.55);
}
.hero .h-display{
  margin:0 0 var(--s4); max-width:18ch; color:#fff;
  font-family:var(--font); font-weight:800; line-height:1.04;
  font-size:clamp(2.3rem,1.35rem + 3.4vw,4.1rem); letter-spacing:-.04em;
  text-wrap:balance; text-shadow:0 2px 28px rgba(0,0,0,.45);
}
@media (min-width:700px){ .hero__kicker{font-size:1.05rem} }