/* ==========================================================================
   Elegance Tailoring & Alterations, Derby — v10 "The House Label"

   WHERE THIS LANGUAGE COMES FROM, because it is the tenth attempt and the
   reasoning is the deliverable:

   The palette is the shopfront sign, literally. The lightbox above the unit
   is a white panel, near-black wide-tracked caps, and one red mark between
   the two words. That is the only brand asset this business owns, and it is
   a couture palette (red, white and near-black is how Valentino and Chanel
   sign their names, and the red mark is how customers are told to find the
   shop). Every rejected version of this site (v5, v6, v8, v9) was some
   flavour of warm cream with a muted accent; the only version ever called
   "better" (v7) was the one where red did real work. The reference site the
   client keeps pointing at uses saturated navy and gold STRUCTURALLY, not
   as a garnish. Conclusion: the page is white, the ink is near-black, and
   the sign's red family carries the life — a deep crimson for grounds and
   buttons, the bright sign red for the mark and small accents.

   "Dark colours ruin the seamless feeling" remains a hard constraint: the
   page stays light. Crimson appears as COLOUR on the reviews band and the
   closing CTA+footer — the same rhythm the reference runs with its navy,
   and colour is not darkness: nothing here is grey, black or charcoal.

   TYPE. Cormorant Garamond for display — a garalde drawn for large sizes,
   couture without Bodoni's coldness (Bodoni was v9, rejected wholesale;
   Fraunces and Instrument Serif are both named failures on this job and
   stay banned). Alegreya Sans carries everything functional — a humanist
   sans with real warmth — and its TRUE small-caps sibling, Alegreya Sans
   SC, sets labels, buttons and the nav: the tracked caps of the sign.

   THE COMPONENT IDEA: the woven garment label. Chips, captions, badges,
   buttons and framed cards are set like the label sewn inside a jacket —
   sharp corners, a hairline frame, an inner keyline, tracked small caps.
   Price badges sit half on / half off their photograph like a ticket
   pinned to a garment. That is the one signature motif; it comes from the
   trade, and it is rationed.

   SHAPES: radius 0 on interactive elements and chips, 2px on photographs
   and large cards (just enough to kill the harsh corner). Pills were the
   default-generated look; v9's flat-2px-everything was "far too simple".
   The frame-and-keyline is the third answer.

   BANNED HERE, from five rounds of the client's own words: numbered
   section indices, dashed rules, eyebrow labels repeated per band,
   underlined words inside headings, pill buttons, gradient glows, dark
   page grounds, and em-dashes anywhere a visitor can read.
   ========================================================================== */

/* ---------- 0. tokens ----------------------------------------------------- */
:root{
  /* grounds: white with warmth, never yellowed cream (cream was v5 to v9) */
  --paper:        #FDFCF9;
  --blush:        #F7EDE9;   /* the tint band: the red family at 95% light  */
  --blush-deep:   #EFDCD6;   /* borders and fills on blush                  */

  /* ink: red-leaning near-black, so even the text sits on the sign's family */
  --ink:          #271719;
  --ink-soft:     #6B5455;   /* secondary text; clears 4.5:1 on both grounds */

  /* the sign's red family */
  --red:          #C8342B;   /* the mark's own fill: accents, hovers, stars  */
  --crimson:      #7E1A22;   /* structural: buttons, bands, price figures    */
  --crimson-hi:   #93242D;   /* hover state for crimson surfaces             */
  --crimson-deep: #521117;   /* the footer's ground                          */
  --on-cr:        #FBF4EF;   /* text on crimson                              */
  --on-cr-dim:    #E3C6BF;   /* secondary on crimson; measured 6.5:1         */

  --line:         rgba(39,23,25,.16);
  --line-strong:  rgba(39,23,25,.36);
  --line-cr:      rgba(251,244,239,.3);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Alegreya Sans", "Gill Sans", system-ui, sans-serif;
  --sc:    "Alegreya Sans SC", "Alegreya Sans", sans-serif;

  --wrap: 1200px;
  --r-card: 2px;             /* photographs and large cards only             */
  --ease: cubic-bezier(.22,.9,.24,1);
  --shadow-lift: 0 18px 44px -18px rgba(39,23,25,.24);
}

/* ---------- 1. reset + base ---------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);font-size:17px;line-height:1.65;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
strong,b{font-weight:700}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
@media (max-width:640px){.wrap{padding:0 20px}}

::selection{background:rgba(200,52,43,.18)}
:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--crimson);
  color:var(--on-cr);padding:12px 20px;font-family:var(--sc);letter-spacing:.08em}
.skip:focus{left:0}

/* Scroll progress: one red thread across the top. Solid — the previous build
   masked this into a running stitch, and decorative dashes of any kind are on
   the client's named-slop list. */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:150;pointer-events:none}
.prog span{display:block;height:100%;background:var(--red);
  transform:scaleX(0);transform-origin:0 50%}

/* ---------- 2. type ------------------------------------------------------- */
h1,h2,h3,.display{
  font-family:var(--serif);font-weight:600;line-height:1.06;
  letter-spacing:.002em;color:var(--ink);text-wrap:balance;
}
h1{font-size:clamp(44px,5.4vw,76px)}
h2,.display{font-size:clamp(31px,3.3vw,46px)}
h3{font-size:24px;line-height:1.15}
h4{font-family:var(--sc);font-weight:700;font-size:14px;letter-spacing:.14em;
  color:var(--ink)}
.ttl{font-family:var(--serif);font-weight:600;color:var(--ink)}

/* Emphasis inside display type: italic of the SAME family, in crimson. The
   hero and the closing band only — v8 ran an emphasis formula on all
   fourteen headings and it read as a tic. Italic descenders get room. */
h1 em,.display em{font-style:italic;font-weight:500;color:var(--crimson);
  line-height:1.12;padding-bottom:.06em}

.lead{font-size:19px;line-height:1.6;color:var(--ink-soft);max-width:62ch}
.small{font-size:15.5px;color:var(--ink-soft)}

/* prose links only: nav, footer, cards and chips set their own treatment,
   so the underline is scoped to paragraphs and definition rows */
p a,dd a,.chk a{color:var(--crimson);font-weight:500;
  border-bottom:1px solid rgba(126,26,34,.35);transition:border-color .2s}
p a:hover,dd a:hover,.chk a:hover{border-color:var(--crimson)}

.tlink{font-family:var(--sc);font-weight:700;font-size:14.5px;letter-spacing:.1em;
  color:var(--crimson);display:inline-flex;align-items:center;gap:8px;
  border-bottom:0}
.tlink .ar{transition:transform .25s var(--ease)}
.tlink:hover .ar{transform:translateX(5px)}

/* ---------- 3. buttons: the frame-and-keyline system ---------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:10px;padding:17px 32px;border-radius:0;
  font-family:var(--sc);font-weight:700;font-size:14.5px;letter-spacing:.13em;
  line-height:1;white-space:nowrap;
  transition:transform .18s var(--ease),background-color .2s,color .2s,
    border-color .2s,box-shadow .2s;
}
.btn::after{ /* the inner keyline: the woven-label edge */
  content:"";position:absolute;inset:4px;border:1px solid transparent;
  pointer-events:none;transition:border-color .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}

.btn--cr{background:var(--crimson);color:var(--on-cr)}
.btn--cr::after{border-color:rgba(251,244,239,.38)}
.btn--cr:hover{background:var(--crimson-hi);box-shadow:var(--shadow-lift)}

.btn--out{border:1px solid var(--line-strong);color:var(--ink)}
.btn--out:hover{border-color:var(--crimson);color:var(--crimson)}

/* on crimson grounds */
.btn--paper{background:var(--paper);color:var(--crimson)}
.btn--paper::after{border-color:rgba(126,26,34,.25)}
.btn--paper:hover{color:var(--red)}
.btn--ghost{border:1px solid var(--line-cr);color:var(--on-cr)}
.btn--ghost:hover{border-color:var(--on-cr)}

.btn--lg{padding:19px 38px;font-size:15px}
.btn--sm{padding:12px 20px;font-size:13px;letter-spacing:.1em}

/* ---------- 4. chips, badges, captions: the woven label ------------------- */
.cap,.cat,.badge,.pill--sm,.pcard__tag{
  font-family:var(--sc);font-weight:700;letter-spacing:.09em;line-height:1.2;
  border-radius:0;
}
/* caption chip, bottom-left of a photograph: a paper ticket */
.cap{position:absolute;left:14px;bottom:14px;z-index:3;
  background:var(--paper);color:var(--ink);font-size:12.5px;
  padding:9px 14px;
  box-shadow:inset 0 0 0 1px var(--line),inset 0 0 0 4px var(--paper),
    inset 0 0 0 5px rgba(39,23,25,.18)}
.cap b{color:var(--crimson)}
.cat{position:absolute;left:14px;top:14px;z-index:3;
  background:var(--crimson);color:var(--on-cr);font-size:12px;padding:8px 13px}

/* the price ticket: straddles the bottom edge of its photograph */
.badge{position:absolute;left:18px;bottom:0;transform:translateY(50%);z-index:3;
  background:var(--paper);color:var(--crimson);font-size:13px;
  padding:10px 16px;
  box-shadow:inset 0 0 0 1px var(--line),inset 0 0 0 4px var(--paper),
    inset 0 0 0 5px rgba(126,26,34,.3),
    0 10px 22px -12px rgba(39,23,25,.35)}

.pill--sm{display:inline-block;background:var(--paper);border:1px solid var(--line);
  color:var(--ink-soft);font-size:12.5px;font-weight:500;padding:7px 12px;
  margin:0 8px 8px 0}
.pills{display:flex;flex-wrap:wrap}

/* ---------- 5. photographs: .shot and the offset red frame ---------------- */
.shot{position:relative;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line);background:var(--blush)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}

/* Feature photographs sit in an offset crimson hairline frame: the chalk
   line drawn before the cut. Deliberately NOT on every image — it marks the
   one photograph a band leads with. */
.frame{position:relative}
.frame::before{content:"";position:absolute;z-index:0;
  top:18px;right:-18px;bottom:-18px;left:18px;
  border:1px solid rgba(200,52,43,.55);border-radius:var(--r-card);
  pointer-events:none}
.frame--l::before{right:18px;left:-18px}
.frame .shot{position:relative;z-index:1}

/* ---------- 6. utility strip + nav ---------------------------------------- */
.util{background:var(--crimson);color:var(--on-cr)}
.util .wrap{display:flex;justify-content:center;gap:34px;padding:9px 28px;
  font-family:var(--sc);font-weight:500;font-size:13px;letter-spacing:.1em}
.util__i{white-space:nowrap;color:var(--on-cr-dim)}
.util__i b{font-weight:700;color:#FFFFFF}
.util .dot{color:var(--on-cr-dim);margin:0 2px}
@media (max-width:900px){.util__i:nth-child(2){display:none}}
@media (max-width:640px){.util__i:first-child{display:none}}

.nav{position:sticky;top:0;z-index:100;background:var(--paper);
  border-bottom:1px solid var(--line);
  transition:transform .3s var(--ease),box-shadow .3s}
.nav.hide{transform:translateY(-100%)}
.nav.scrolled{box-shadow:0 10px 30px -18px rgba(39,23,25,.25)}
.nav__in{display:flex;align-items:center;justify-content:space-between;
  gap:26px;height:78px}

/* the sign's own lockup: ELEGANCE mark TAILORING, tracked caps */
.brand{display:flex;align-items:center;flex-shrink:0}
.brand__mark{display:block}
.lock{display:flex;flex-direction:column;gap:3px}
.lock__row{display:flex;align-items:center;gap:9px}
.lock__w{font-family:var(--sc);font-weight:700;letter-spacing:.2em;
  font-size:17px;color:var(--ink);line-height:1}
.lock__sub{font-family:var(--sc);font-weight:500;font-size:10.5px;
  letter-spacing:.22em;color:var(--ink-soft)}
.lock__dot{color:var(--red)}
.lock--ftr .lock__w{color:var(--on-cr);font-size:19px}
.lock--ftr .lock__sub{color:var(--on-cr-dim)}

.nav__links{display:flex;gap:4px}
.nav__links a{display:block;padding:10px 13px;font-family:var(--sc);
  font-weight:700;font-size:14.5px;letter-spacing:.09em;color:var(--ink);
  position:relative;white-space:nowrap}
.nav__links a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;
  height:2px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .25s var(--ease)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{
  transform:scaleX(1)}
.nav__links a[aria-current="page"]{color:var(--crimson)}

.nav__end{display:flex;align-items:center;gap:18px}
.navrev{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.navrev__top{display:flex;align-items:center;gap:6px}
.navrev__n{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--ink)}
.navrev__s{color:var(--red);font-size:12px;letter-spacing:2px}
.navrev__t{font-size:12px;color:var(--ink-soft)}
@media (max-width:1180px){.navrev{display:none}}
/* v10.1: between the burger breakpoint (980) and 1180 the bar carries the full
   link list AND two buttons with no rating block to give up. Adding WhatsApp
   put it 15px over the viewport at 1024 — not a width shots.py tests, found by
   measuring every 40px from 980 to 1600. The links give back the space: 8px of
   side padding instead of 13 across six of them is 60px, and the underline is
   inset to match so it still spans the word. Verified clean at 981/1000/1024/
   1100/1180/1181. */
@media (max-width:1180px){
  .nav__in{gap:16px}
  .nav__links{gap:0}
  .nav__links a{padding-left:8px;padding-right:8px}
  .nav__links a::after{left:8px;right:8px}
  .nav__end{gap:12px}
}
.lbl-short{display:none}
@media (max-width:560px){.lbl-long{display:none}.lbl-short{display:inline}}

/* the nav's WhatsApp button (v10.1). Outlined, so Call keeps the one crimson
   fill in the bar, and glyph-only at every width — the word costs 85px the
   1144px bar has not got, and spending them wrapped "Our work" onto two lines.

   It is built to the SAME rules as the button beside it, because the first
   version was not and it showed:
     * EXACT HEIGHT MATCH. It was 44px tall against Call's 37 and read as
       bolted on. It is now a 37px square, sized off the same padding maths
       (12 + 13 line + 12), so the two share a baseline and a cap height.
     * THE INNER KEYLINE. Every other button on this site carries the woven
       label's second edge; `.btn--out` is the one variant that never defined
       its colour, so the outlined buttons have been missing the signature all
       along. Inset 3px rather than 4 because this box is 37px, not 200.
     * THE GLYPH IS THE SIGN'S RED, not ink. The mark in the lockup two
       elements to the left is that same red, and so are the rating stars.
       An ink glyph was the only monochrome thing in the bar. */
.nav__wa{width:37px;height:37px;padding:0;flex-shrink:0;
  border-color:rgba(126,26,34,.30)}
.nav__wa::after{inset:3px;border-color:rgba(126,26,34,.16)}
.nav__wa .wa__mark{width:18px;height:18px;flex-shrink:0;color:var(--red);
  transition:color .2s}
.nav__wa:hover{border-color:var(--crimson);background:var(--blush)}
.nav__wa:hover::after{border-color:rgba(126,26,34,.32)}
.nav__wa:hover .wa__mark{color:var(--crimson)}
/* the sign's lockup gives way on small screens; the burger never does.
   Measured at 390px: the full-size lockup left the bar 52px over-wide. */
@media (max-width:640px){
  .nav__in{gap:10px;height:66px}
  .lock__row{gap:6px}
  .lock__w{font-size:13.5px;letter-spacing:.13em}
  .lock__sub{font-size:9px;letter-spacing:.16em}
  .brand__mark{width:17px;height:21px}
  .btn--sm{padding:11px 14px}
  /* v10.1: the bar now carries THREE controls (WhatsApp, Call, burger) in
     350px of usable width. Measured at 390px: brand 186 + end 184 + gap 14
     = 384 against 350, i.e. 34px over, which shots.py failed the build for.
     The 34px comes back out of the gaps and the two buttons' side padding,
     not out of the lockup - the lockup is the shop's sign and has already
     given up as much as it can. Both buttons keep a 40px tap height. */
  .nav__end{gap:8px}
  .nav__call{padding-left:11px;padding-right:11px}
  /* 35px, not 37: `.btn--sm` drops to 11px padding at this width, so Call is
     35 tall here. The square tracks it — the whole point of the pair is that
     they share a top and bottom edge, and 2px out is visible at this size. */
  .nav__wa{width:35px;height:35px}
}

.burger{display:none;width:44px;height:44px;position:relative;flex-shrink:0}
.burger span,.burger span::before,.burger span::after{
  content:"";position:absolute;left:10px;right:10px;height:2px;
  background:var(--ink);transition:transform .25s var(--ease),background .2s}
.burger span{top:21px}
.burger span::before{left:0;right:0;top:-7px}
.burger span::after{left:0;right:0;top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

@media (max-width:980px){
  .burger{display:block}
  .nav__links{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;background:var(--paper);
    border-bottom:1px solid var(--line);padding:14px 20px 22px;gap:0}
  .nav__links a{padding:14px 8px;font-size:16px;border-bottom:1px solid var(--line)}
  .nav__links a::after{display:none}
  .nav__links.open{display:flex}
  html:not(.js) .nav__links{display:flex;position:static;border:0;
    flex-direction:row;flex-wrap:wrap;padding:0}
}

/* ---------- 7. section shell + heads -------------------------------------- */
.sec{padding:96px 0}
.sec--tight{padding:76px 0}
.sec--tint,.sec--card{background:var(--blush)}
@media (max-width:760px){.sec{padding:64px 0}.sec--tight{padding:52px 0}}

.shead{max-width:720px}
.shead--wide{max-width:900px}
.shead .lead{margin-top:16px}
.shead__row{display:flex;align-items:flex-end;justify-content:space-between;
  gap:30px;flex-wrap:wrap}
.shead__aside{padding-bottom:8px}

/* centred head, for the bands that address the reader straight on */
.shead--c{max-width:760px;margin:0 auto;text-align:center}
.shead--c .lead{margin:16px auto 0}

/* The one ornament on the site: the shop's own red mark, small, above the
   reviews heading. It is the thing customers are told to look for on the
   sign. Used once per page at most — a repeated ornament is what sank v8. */
.shead__mark{width:24px;margin:0 auto 18px;opacity:.92}

/* ---------- 8. hero -------------------------------------------------------- */
.hero{padding:84px 0 116px;position:relative;overflow:clip}
.hero__grid{display:grid;grid-template-columns:6fr 5fr;gap:70px;
  align-items:center}
/* two lines at 1440, not three: the break is authored (a <br> after the
   comma), so the size must let "in the centre of Derby" hold one line */
.hero__copy h1{margin-bottom:24px;font-size:clamp(42px,4.6vw,64px)}
.hero__lead{font-size:19.5px;line-height:1.6;color:var(--ink-soft);max-width:54ch}
.hero__acts{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}

/* The art: two of the shop's OWN photographs layered on a blush panel with
   the offset red frame. Nothing here is stock — the point of the hero is
   that it could not be pasted onto another shop's site. */
.hero__art{position:relative;min-height:560px}
.hero__art::before{content:"";position:absolute;top:12%;right:-70px;
  bottom:-40px;left:34%;background:var(--blush);border-radius:var(--r-card)}
/* overflow stays visible on the main shot so its offset red frame can
   escape the box; the photograph clips itself via its own border-radius */
.hero__main{position:absolute;top:0;left:0;width:76%;height:92%;
  box-shadow:var(--shadow-lift);overflow:visible}
.hero__main img{border-radius:var(--r-card)}
.hero__main::after{content:"";position:absolute;top:16px;right:-16px;
  bottom:-16px;left:16px;border:1px solid rgba(200,52,43,.5);
  pointer-events:none;z-index:2}
.hero__inset{position:absolute;right:0;bottom:0;width:44%;aspect-ratio:4/4.6;
  box-shadow:var(--shadow-lift);border:6px solid var(--paper);z-index:3}
@media (max-width:1080px){.hero__grid{gap:44px}.hero__art{min-height:460px}}
@media (max-width:900px){
  .hero{padding:56px 0 76px}
  .hero__grid{grid-template-columns:1fr;gap:56px}
  .hero__art{min-height:0;aspect-ratio:10/10.6;max-width:560px}
  .hero__art::before{right:-28px}
}
/* phone: the same composition, not a shrunken echo of it. Buttons go full
   width, the art gets the height its stacked photos actually need, and the
   caption ticket shortens so it stays inside its photograph. */
@media (max-width:560px){
  .hero__acts{flex-direction:column;align-items:stretch}
  .hero__acts .btn{width:100%}
  .hero__art{aspect-ratio:10/10.8}
  .hero__main{width:80%}
  /* the inset photograph owns the bottom-right on phone, so the caption
     ticket moves to the top of its photo instead of fighting it */
  .hero__main .cap{font-size:11px;padding:8px 10px;left:10px;top:10px;
    bottom:auto;right:10px;text-align:center}
  .hero__inset{width:48%;border-width:5px}
}

/* ---------- 9. trust strip: a framed ledger row ---------------------------- */
.strip{padding:0 0 8px}
.strip__grid{display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line),inset 0 0 0 4px var(--paper),
    inset 0 0 0 5px var(--line)}
.strip__i{padding:28px 28px 26px;display:flex;flex-direction:column;gap:5px}
.strip__i + .strip__i{border-left:1px solid var(--line)}
.strip__n{font-family:var(--serif);font-weight:600;font-size:30px;line-height:1;
  color:var(--crimson);display:flex;align-items:baseline;gap:8px}
.strip__n .st{color:var(--red);font-size:13px;letter-spacing:2px;
  font-family:var(--sans)}
.strip__l{font-size:14px;color:var(--ink-soft)}
@media (max-width:900px){
  .strip__grid{grid-template-columns:1fr 1fr}
  .strip__i:nth-child(3),.strip__i:nth-child(4){border-top:1px solid var(--line)}
  .strip__i:nth-child(3){border-left:0}
}
/* phone: the strip becomes what it always was underneath — a four-row
   ledger. Number left, fact right, one hairline between rows. */
@media (max-width:520px){
  .strip__grid{grid-template-columns:1fr}
  .strip__i{flex-direction:row;align-items:center;justify-content:space-between;
    gap:16px;padding:16px 18px}
  .strip__i + .strip__i{border-left:0;border-top:1px solid var(--line)}
  .strip__i:nth-child(3){border-top:1px solid var(--line)}
  .strip__n{font-size:23px;flex-shrink:0}
  .strip__l{text-align:right;max-width:58%}
}

/* ---------- 10. service cards: asymmetric, three shapes -------------------- */
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:26px}
.card{grid-column:span 4;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-card);display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);
  border-color:rgba(126,26,34,.45)}
.card__ph{position:relative}
.card__ph img{width:100%;aspect-ratio:16/10.5;object-fit:cover;
  border-radius:var(--r-card) var(--r-card) 0 0}
.card__b{padding:36px 26px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card__b h3{font-size:25px}
.card__b p{font-size:15.5px;color:var(--ink-soft);line-height:1.6}
.card__more{margin-top:auto;padding-top:12px;font-family:var(--sc);
  font-weight:700;font-size:13.5px;letter-spacing:.11em;color:var(--crimson);
  display:inline-flex;gap:7px;align-items:center}
.card__more .ar{transition:transform .25s var(--ease)}
.card:hover .card__more .ar{transform:translateX(5px)}

/* shapes: one feature, one tall second, three standard, one wide closer */
.card--feat{grid-column:span 7}
.card--feat .card__ph img{aspect-ratio:16/9}
.card--feat .card__b h3{font-size:29px}
.card--tall{grid-column:span 5}
.card--tall .card__ph img{aspect-ratio:16/12.1}
.card--wide{grid-column:span 12;flex-direction:row;align-items:stretch}
.card--wide .card__ph{flex:0 0 44%}
.card--wide .card__ph img{height:100%;aspect-ratio:auto;min-height:280px;
  border-radius:var(--r-card) 0 0 var(--r-card)}
.card--wide .card__b{justify-content:center;padding:38px 44px}
.card--wide .card__b p{max-width:56ch}
/* the wide card's photo runs the card's full height, so its ticket sits
   inside the photo instead of straddling the card's bottom border */
.card--wide .badge{bottom:18px;transform:none}
@media (max-width:980px){
  .card,.card--feat,.card--tall{grid-column:span 6}
  .card--wide{grid-column:span 12}
}
@media (max-width:700px){
  .card,.card--feat,.card--tall,.card--wide{grid-column:span 12;
    flex-direction:column}
  .card--wide .card__ph img{min-height:0;aspect-ratio:16/10.5;
    border-radius:var(--r-card) var(--r-card) 0 0}
  .card--wide .card__b{padding:36px 26px 24px}
}

/* ---------- 11. the price ledger (home teaser) ----------------------------- */
.ptiles{margin-top:14px;border-top:1px solid var(--line)}
.ptile{display:grid;grid-template-columns:1fr auto;gap:6px 40px;
  align-items:baseline;padding:26px 6px;border-bottom:1px solid var(--line)}
.ptile h3{font-size:26px;font-weight:600}
.ptile p{grid-column:1;font-size:15px;color:var(--ink-soft)}
.ptile__p{grid-column:2;grid-row:1 / span 2;font-family:var(--serif);
  font-weight:600;font-size:38px;color:var(--crimson);white-space:nowrap}
.ptile__p i{font-family:var(--sc);font-style:normal;font-weight:500;
  font-size:14px;letter-spacing:.12em;color:var(--ink-soft);margin-right:10px}
@media (max-width:560px){
  .ptile{grid-template-columns:1fr}
  .ptile__p{grid-column:1;grid-row:auto;font-size:32px}
}
.pfoot{margin-top:26px;font-size:15px;color:var(--ink-soft);max-width:70ch}

/* ---------- 12. mosaic ----------------------------------------------------- */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:230px;gap:22px}
.mosaic .shot{height:100%}
.mosaic__a{grid-column:span 2;grid-row:span 2}
.mosaic__b{grid-column:span 2;grid-row:span 1}
.mosaic__c{grid-column:span 1;grid-row:span 1}
@media (max-width:900px){
  .mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:210px}
  .mosaic__a,.mosaic__b{grid-column:span 2}
  .mosaic__c{grid-column:span 1}
}
/* phone: half-width cells left their caption tickets nowhere to sit, so the
   mosaic becomes one clean full-width stack — same photos, calmer rhythm */
@media (max-width:640px){
  .mosaic{grid-template-columns:1fr;grid-auto-rows:250px;gap:16px}
  .mosaic__a,.mosaic__b,.mosaic__c{grid-column:span 1;grid-row:span 1}
  .mosaic__a{grid-row:span 2}
}

/* ---------- 13. reviews: paper tickets on crimson cloth -------------------- */
.sec--crimson{background:var(--crimson);color:var(--on-cr);position:relative}
/* a faint twill weave, so the ground reads as cloth, not paint. The solid
   background-color stays underneath: the contrast harness composites the
   full stack, and a texture that fails to paint must still leave crimson. */
.sec--crimson::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(45deg,rgba(251,244,239,.03) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(-45deg,rgba(251,244,239,.03) 0 1px,transparent 1px 7px)}
.sec--crimson > *{position:relative}
.sec--crimson h2,.sec--crimson .display{color:var(--on-cr)}
.sec--crimson .lead{color:var(--on-cr-dim)}
.sec--crimson .tlink{color:var(--on-cr)}

.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rev{background:var(--paper);border-radius:var(--r-card);
  padding:30px 28px 26px;display:flex;flex-direction:column;gap:18px;
  box-shadow:inset 0 0 0 1px var(--line),inset 0 0 0 4px var(--paper),
    inset 0 0 0 5px var(--line),0 16px 34px -20px rgba(0,0,0,.5)}
.rev__t{font-family:var(--serif);font-weight:500;font-size:21.5px;
  line-height:1.38;color:var(--ink)}
.rev--lg .rev__t{font-size:25px}
.rev--md .rev__t{font-size:23px}
.rev__st{display:block;color:var(--red);letter-spacing:3px;font-size:13.5px;
  margin-bottom:12px;font-family:var(--sans)}
.rev__m{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.rev__n{font-family:var(--sc);font-weight:700;font-size:14.5px;
  letter-spacing:.08em;color:var(--ink)}
.rev__d{font-size:13px;color:var(--ink-soft)}
/* sixth cell: the count, keylined on the cloth itself */
.rev--more{background:transparent;border:1px solid var(--line-cr);
  box-shadow:none;align-items:flex-start;gap:14px;padding:30px 28px}
.rev--more .rev__big{font-family:var(--serif);font-weight:600;font-size:56px;
  line-height:1;color:var(--on-cr);display:flex;align-items:baseline;gap:12px}
.rev--more .st{color:var(--on-cr-dim);font-size:14px;letter-spacing:2px;
  font-family:var(--sans)}
.rev--more p{font-size:16px;color:var(--on-cr-dim);line-height:1.55}
.rev--more .tlink{margin-top:auto}
@media (max-width:980px){.revs{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.revs{grid-template-columns:1fr}}

/* ---------- 14. splits, duo, quote, checklists, notes ---------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split--rev .split__media{order:2}
.split__media{position:relative}
.duo{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;align-items:start}
.duo .shot:last-child{margin-top:44px}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:44px}
  .split--rev .split__media{order:0}
}
.fgrid{display:grid;grid-template-columns:6fr 5fr;gap:60px;align-items:center}
@media (max-width:900px){.fgrid{grid-template-columns:1fr;gap:40px}}

.chk{margin-top:26px;display:flex;flex-direction:column;gap:16px}
.chk li{display:flex;gap:14px;font-size:16px;line-height:1.55;
  color:var(--ink-soft)}
.chk b{color:var(--ink)}
.tick{flex-shrink:0;width:22px;height:22px;margin-top:2px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--crimson);color:var(--on-cr);font-size:11px}

.note{background:var(--paper);border:1px solid var(--line);
  border-left:3px solid var(--crimson);padding:26px 28px}
.note p{font-size:16px;color:var(--ink-soft);line-height:1.62}
.note .ttl{font-size:22px;margin-bottom:8px}

.pquote{display:grid;grid-template-columns:5fr 6fr;gap:70px;align-items:center}
.pquote blockquote{font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(24px,2.4vw,31px);line-height:1.35;color:var(--ink);
  margin-top:22px}
.pquote blockquote::before{content:"\201C";color:var(--red);
  font-size:1.6em;line-height:0;vertical-align:-.32em;margin-right:6px}
@media (max-width:900px){.pquote{grid-template-columns:1fr;gap:40px}}
.sig{display:flex;align-items:center;gap:14px;margin-top:24px}
.sig__n{font-family:var(--sc);font-weight:700;font-size:15px;letter-spacing:.1em}
.sig__r{font-size:13.5px;color:var(--ink-soft)}

.dl{display:flex;flex-direction:column}
.dl__r{display:flex;justify-content:space-between;gap:20px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:15.5px}
.dl__r dt{font-family:var(--sc);font-weight:700;font-size:13.5px;
  letter-spacing:.1em;color:var(--ink-soft);padding-top:2px}
.dl__r dd{text-align:right;color:var(--ink)}
.addr{font-size:17px;line-height:1.55}

/* ---------- 15. page heads ------------------------------------------------- */
.phead{background:var(--blush);padding:64px 0 0;overflow:clip}
.phead__in{display:grid;grid-template-columns:1fr 1fr;gap:60px;
  align-items:end;padding-bottom:56px}
.phead__in .lead{max-width:52ch}
.crumb{font-family:var(--sc);font-weight:500;font-size:13px;
  letter-spacing:.12em;color:var(--ink-soft);margin-bottom:18px}
.crumb a{color:var(--crimson);border-bottom:0}
.crumb span{margin:0 4px}
.heroband{position:relative;margin-bottom:-72px;z-index:2}
.heroband img{width:100%;aspect-ratio:21/7;object-fit:cover;
  border-radius:var(--r-card);border:1px solid var(--line);
  box-shadow:var(--shadow-lift)}
/* a page head is blush; the strip that follows needs air, and much more of
   it when the head's wide photograph overhangs the seam by 72px */
.phead + .strip{padding-top:46px}
.phead--band + .strip{padding-top:118px}
@media (max-width:900px){
  .phead__in{grid-template-columns:1fr;gap:18px;padding-bottom:44px}
  .heroband img{aspect-ratio:16/8}
}

/* ---------- 16. services rows, steps, other-services tiles ----------------- */
.srow{display:grid;grid-template-columns:5fr 4fr 3fr;gap:44px;
  padding:44px 0;border-bottom:1px solid var(--line);scroll-margin-top:110px}
.srow:last-child{border-bottom:0}
.srow__l h3{font-family:var(--serif);font-weight:600;font-size:28px}
.srow__l .small{margin-top:10px}
.srow__items{margin-top:18px}
.srow__r .lead{font-size:16.5px}
.srow__ph{position:relative}
.srow__ph img{width:100%;aspect-ratio:4/4.4;object-fit:cover;
  border-radius:var(--r-card);border:1px solid var(--line)}
@media (max-width:980px){
  .srow{grid-template-columns:1fr 1fr}
  .srow__ph{grid-column:2;grid-row:1}
  .srow__r{grid-column:1 / -1}
}
@media (max-width:640px){
  .srow{grid-template-columns:1fr}
  .srow__ph{grid-column:1;grid-row:auto}
}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.step{background:var(--paper);border:1px solid var(--line);
  padding:30px 28px;display:flex;flex-direction:column;gap:12px}
.step h3{font-size:23px}
.step p{font-size:15.5px;color:var(--ink-soft);flex:1}
.step__ph img{aspect-ratio:16/10;object-fit:cover;width:100%;
  border-radius:var(--r-card)}
@media (max-width:900px){.steps{grid-template-columns:1fr}}

/* FOUR columns since 2026-07-29, because there are now four tiles. At three
   the last row held one tile beside a two-cell hole — the same failure the
   price groups hit in v9. Column count follows the content; if the list
   changes length again, this number changes with it. */
.otiles{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.otile{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s}
.otile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.otile__ph img{aspect-ratio:16/9;object-fit:cover;width:100%}
.otile h3{font-size:22px;padding:22px 24px 0}
.otile p{font-size:15px;color:var(--ink-soft);padding:6px 24px 24px}
@media (max-width:900px){.otiles{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.otiles{grid-template-columns:1fr}}

/* ---------- 17. prices page ------------------------------------------------ */
.pgrps{columns:2;column-gap:26px}
.pgrp{break-inside:avoid;margin-bottom:26px;background:var(--paper);
  border-radius:var(--r-card);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line),inset 0 0 0 4px var(--paper),
    inset 0 0 0 5px var(--line)}
.pgrp__ph img{aspect-ratio:21/8;object-fit:cover;width:100%;
  padding:4px}
.pgrp__b{padding:24px 30px 20px}
.pgrp__h{font-family:var(--serif);font-weight:600;font-size:27px;
  margin-bottom:10px}
.prow{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:12px 0;border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.prow__j{font-size:15.5px;color:var(--ink-soft)}
.prow__p{font-family:var(--serif);font-weight:600;font-size:22px;
  color:var(--crimson);white-space:nowrap}
.prow__p i{font-family:var(--sc);font-style:normal;font-weight:500;
  font-size:12.5px;letter-spacing:.1em;color:var(--ink-soft);margin-right:7px}
@media (max-width:860px){.pgrps{columns:1}}

.pcards{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.pcard{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;display:flex;
  flex-direction:column}
.pcard__ph img{aspect-ratio:21/9;object-fit:cover;width:100%}
.pcard__b{padding:26px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcard__b p{font-size:15.5px;color:var(--ink-soft)}
.pcard__b .ttl{font-size:24px}
.pcard__tag{align-self:flex-start;margin-top:auto;background:var(--blush);
  color:var(--crimson);font-size:12.5px;padding:8px 13px;
  border:1px solid var(--blush-deep)}
@media (max-width:760px){.pcards{grid-template-columns:1fr}}

/* ---------- 18. gallery ---------------------------------------------------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.gal figure{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden}
.gal img{width:100%;aspect-ratio:4/4.6;object-fit:cover}
.gal figcaption{font-size:14.5px;color:var(--ink-soft);
  padding:16px 20px 18px;border-top:1px solid var(--line)}
@media (max-width:900px){.gal{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.gal{grid-template-columns:1fr}}

/* ---------- 19. map -------------------------------------------------------- */
.mapgrid{display:grid;grid-template-columns:7fr 4fr;gap:26px;
  align-items:stretch}
.mapbox{position:relative;border-radius:var(--r-card);overflow:hidden;
  min-height:440px;border:1px solid var(--line);background:var(--blush)}
.mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  display:block;z-index:2}
/* fallback visible BY DEFAULT, hidden when the embed reports load: a blocked
   iframe fires no reliable error event, so success is what gets detected */
.mapbox__fb{position:absolute;inset:0;z-index:1;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:16px;
  text-align:center;padding:30px}
.mapbox__fb p{font-size:17px}
.mapbox--ok .mapbox__fb{display:none}
.mapcard{background:var(--paper);border-radius:var(--r-card);
  padding:30px 28px;display:flex;flex-direction:column;
  box-shadow:inset 0 0 0 1px var(--line),inset 0 0 0 4px var(--paper),
    inset 0 0 0 5px var(--line)}
.mapcard .ttl{font-size:25px;margin-bottom:12px}
@media (max-width:900px){.mapgrid{grid-template-columns:1fr}}

/* ---------- 20. faq + contact furniture ------------------------------------ */
.faqgrid{display:grid;grid-template-columns:7fr 4fr;gap:50px;
  align-items:start}
@media (max-width:900px){.faqgrid{grid-template-columns:1fr}}
.faqs{border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__q{width:100%;display:flex;justify-content:space-between;
  align-items:center;gap:20px;text-align:left;padding:22px 4px;
  font-family:var(--serif);font-weight:600;font-size:22px;color:var(--ink);
  transition:color .2s}
.faq__q:hover{color:var(--crimson)}
.pm{flex-shrink:0;width:30px;height:30px;position:relative;
  border:1px solid var(--line-strong)}
.pm::before,.pm::after{content:"";position:absolute;background:var(--crimson);
  top:50%;left:50%;transition:transform .25s var(--ease)}
.pm::before{width:12px;height:2px;transform:translate(-50%,-50%)}
.pm::after{width:2px;height:12px;transform:translate(-50%,-50%)}
.faq__i.open .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .32s var(--ease)}
.faq__a p{font-size:16px;color:var(--ink-soft);line-height:1.62;
  padding-bottom:22px;max-width:64ch}
html:not(.js) .faq__a{max-height:none}

.faqcard{background:var(--paper);border-radius:var(--r-card);overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:inset 0 0 0 1px var(--line),inset 0 0 0 4px var(--paper),
    inset 0 0 0 5px var(--line)}
.faqcard__ph img{aspect-ratio:16/8;object-fit:cover;width:100%;padding:4px}
.faqcard h4{font-family:var(--serif);font-weight:600;font-size:23px;
  letter-spacing:0;padding:24px 26px 0;text-transform:none}
.faqcard p{font-size:15px;color:var(--ink-soft);padding:10px 26px 0}
.faqcard .dl{padding:16px 26px 0}
.faqcard .btn{margin:22px 26px 26px;align-self:flex-start}

/* ---------- 21. the WhatsApp panel ----------------------------------------
   This slot held a Netlify enquiry form until 2026-07-29. It now holds one
   link. The frame, the ground and the small-caps voice are unchanged, so the
   band still reads as the same component; only its contents got shorter.
   The button stays CRIMSON rather than WhatsApp green: the glyph is what makes
   the destination legible, and a second brand's green next to this palette
   would be the one un-house-styled thing on the page. ------------------------ */
.askgrid{display:grid;grid-template-columns:5fr 6fr;gap:60px;
  align-items:start}
.askgrid__ph{margin-top:30px;max-width:420px}
.askgrid__form{background:var(--paper);padding:38px 36px;
  border-radius:var(--r-card);
  box-shadow:inset 0 0 0 1px var(--line),inset 0 0 0 4px var(--paper),
    inset 0 0 0 5px var(--line),var(--shadow-lift)}
@media (max-width:980px){.askgrid{grid-template-columns:1fr;gap:44px}}
@media (max-width:560px){.askgrid__form{padding:28px 22px}}

.wa__eyebrow{display:flex;align-items:center;gap:10px;
  font-family:var(--sc);font-weight:700;font-size:13.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--crimson)}
.wa__mark{width:19px;height:19px;flex-shrink:0}
.wa__lead{margin-top:16px;font-size:17.5px;line-height:1.6}
.wa__asks{margin-top:24px}
.wa__acts{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:30px}
.wa__cta{display:inline-flex;align-items:center;gap:12px}
.wa__cta .wa__mark{width:20px;height:20px}
.wa__alt{font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.wa__note{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
  font-size:14.5px;line-height:1.6;color:var(--ink-soft)}

/* ---------- 22. closing band + footer: one continuous crimson close -------- */
.ctaband{background:var(--crimson);color:var(--on-cr);position:relative;
  padding:110px 0 96px;text-align:center;overflow:clip}
.ctaband::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(45deg,rgba(251,244,239,.03) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(-45deg,rgba(251,244,239,.03) 0 1px,transparent 1px 7px)}
.ctaband > *{position:relative}
.ctaband .display,.ctaband h2{color:var(--on-cr);max-width:820px;margin:0 auto}
.ctaband .display em,.ctaband h2 em{color:#F2B3AA;line-height:1.12}
.ctaband p{color:var(--on-cr-dim);font-size:18px;max-width:56ch;
  margin:20px auto 0}
.ctaband .shead{max-width:none;margin:0 auto;text-align:center}
.ctaband .shead .lead{color:var(--on-cr-dim);margin:20px auto 0}
.ctaband__acts{display:flex;gap:14px;justify-content:center;margin-top:38px;
  flex-wrap:wrap}
@media (max-width:560px){
  .ctaband{padding:76px 0 64px}
  .ctaband__acts{flex-direction:column;align-items:stretch;
    max-width:340px;margin-left:auto;margin-right:auto}
}

.ftr{background:var(--crimson-deep);color:var(--on-cr);padding:76px 0 0;
  overflow:clip}
.ftr__grid{display:grid;grid-template-columns:4fr 2fr 3fr 3fr;gap:44px}
.ftr h4{color:var(--on-cr);font-size:13.5px;letter-spacing:.16em;
  margin-bottom:16px}
.ftr ul{display:flex;flex-direction:column;gap:9px}
.ftr a{color:var(--on-cr-dim);font-size:15px;border-bottom:0;
  transition:color .2s;font-weight:400}
.ftr a:hover{color:var(--on-cr)}
.ftr li{color:var(--on-cr-dim);font-size:15px}
.ftr__blurb{margin-top:18px;font-size:15px;color:var(--on-cr-dim);
  max-width:34ch;line-height:1.6}
.ftr__wm{margin-top:54px;border-top:1px solid rgba(251,244,239,.14);
  overflow:hidden;line-height:.9}
/* the floor is 40px so the whole wordmark fits a 390px viewport instead of
   being sheared mid-word */
.ftr__wm span{display:block;font-family:var(--serif);font-style:italic;
  font-weight:500;font-size:clamp(40px,10.4vw,150px);white-space:nowrap;
  color:var(--on-cr);text-align:center;padding-top:26px}
.ftr__bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:22px 0 26px;font-size:13.5px;color:var(--on-cr-dim)}
@media (max-width:980px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr__grid{grid-template-columns:1fr}}

/* ---------- 22b. the phone system ------------------------------------------
   One rule set so the phone reads as designed, not adapted: every stacked
   action group goes full-width and equal, display type calms one step,
   and tap targets stay generous. The nav's own Call button is exempt. */
@media (max-width:560px){
  .mapcard .btn,.faqcard .btn,.fgrid .btn,
  .mapbox__fb .btn,.wa__acts .btn{width:100%}
  .wa__acts{flex-direction:column;align-items:stretch;gap:14px}
  .wa__cta{justify-content:center}
  .wa__alt{text-align:center}
  .faqcard .btn{margin-left:26px;margin-right:26px;width:auto;
    align-self:stretch}
  .faq__q{font-size:19.5px;padding:19px 2px}
  .lead,.hero__lead{font-size:17.5px}
  .shead .lead{margin-top:12px}
  .card__b{padding:30px 22px 22px}
  .card__b h3,.card--feat .card__b h3{font-size:23px}
  .ptile h3{font-size:22px}
  .ptile__p{font-size:30px}
  .rev__t{font-size:20px}
  .rev--lg .rev__t,.rev--md .rev__t{font-size:21.5px}
  .sec{padding:56px 0}
  .sec--tight{padding:48px 0}
  .pgrp__h{font-size:24px}
  .prow__p{font-size:20px}
  .srow{padding:36px 0}
  .otile h3{font-size:20px}
  .mapgrid{gap:18px}
  .mapbox{min-height:340px}
}

/* ---------- 23. motion: enhancement only; nothing hidden without JS -------- */
html.js .reveal{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
html.js .stag>*{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms)}
html.js .stag.in>*{opacity:1;transform:none}
html.js .ftr__wm span{opacity:0;transform:translateY(30px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .ftr__wm.in span{opacity:.1;transform:none}
html:not(.js) .ftr__wm span{opacity:.1}

/* ---------- 24. reduced motion: MUST STAY LAST ----------------------------- */
@media (prefers-reduced-motion:reduce){
  html.js .reveal,html.js .stag>*{opacity:1;transform:none;transition:none}
  html.js .ftr__wm span{opacity:.1;transform:none;transition:none}
  .btn,.card,.otile,.tlink .ar,.card__more .ar,.nav,.faq__a,.pm::before,
  .pm::after{transition:none}
  .btn:hover,.card:hover,.otile:hover{transform:none}
}