/* ============================================================
   BENEVA — Design System v2
   Loaded last. Adds depth, motion and editorial rhythm on top
   of the v4h Burgundy build. Nothing here changes content or
   the palette — it changes how that palette is used.
   ============================================================ */

:root{
  /* depth */
  --bx-sh-1: 0 1px 2px rgba(32,9,14,.06), 0 2px 8px rgba(32,9,14,.04);
  --bx-sh-2: 0 2px 4px rgba(32,9,14,.05), 0 8px 24px rgba(32,9,14,.07);
  --bx-sh-3: 0 4px 10px rgba(32,9,14,.06), 0 18px 44px rgba(32,9,14,.10);
  --bx-sh-4: 0 10px 30px rgba(32,9,14,.10), 0 32px 80px rgba(32,9,14,.16);
  --bx-sh-red: 0 8px 26px rgba(158,34,51,.28);

  /* hairlines + fills */
  --bx-line: #e6d2d7;
  --bx-line-strong: #d6b8bf;
  --bx-cream: #f7eef0;
  --bx-paper: #fffdfe;

  /* gradients */
  --bx-grad-brand: linear-gradient(135deg,#9e2233 0%,#7e1b2a 55%,#651e2e 100%);
  --bx-grad-warm: linear-gradient(180deg,#fffdfe 0%,#f9f1f3 100%);
  --bx-grad-ink: linear-gradient(160deg,#33101a 0%,#20090e 60%,#2c0d14 100%);

  --bx-radius: 18px;
  --bx-ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 1. global polish -------------------------------- */
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

::selection{ background:#9e2233; color:#fffdfe }

:focus-visible{
  outline:3px solid #9e2233 !important;
  outline-offset:3px !important;
  border-radius:4px;
}

body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }

/* ---------- 2. brand lock in the header --------------------- */
.bx-brand__name{
  display:block;
  font-family:inherit;
  font-size:1.34rem !important;
  font-weight:900;
  line-height:1;
  letter-spacing:.16em;
  color:#33101a;
  white-space:nowrap;
}
.bx-brand__sub{
  display:block;
  font-size:.66rem !important;
  font-weight:800;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#8a6a72;
  white-space:nowrap;
  margin-top:.3rem;
}

/* ---------- 3. buttons v2 -----------------------------------
   Real depth, an arrow that moves, and a press state. The old
   buttons were flat rectangles with a 1px border.             */
.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .18s var(--bx-ease), box-shadow .18s var(--bx-ease),
             background-color .18s var(--bx-ease), color .18s var(--bx-ease) !important;
}
.btn::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 62%);
  transform:translateX(-120%);
  transition:transform .55s var(--bx-ease);
  pointer-events:none;
  z-index:-1;
}
.btn:hover::after{ transform:translateX(120%) }
.btn:hover{ transform:translateY(-2px) }
.btn:active{ transform:translateY(0) scale(.985) }

.btn-brand{
  background-image:var(--bx-grad-brand) !important;
  box-shadow:var(--bx-sh-red) !important;
  border:0 !important;
}
.btn-brand:hover{ box-shadow:0 12px 34px rgba(158,34,51,.38) !important }

.btn-ghost, .btn-ondark, .btn-outline{
  box-shadow:var(--bx-sh-1);
}
.btn-ghost:hover, .btn-ondark:hover, .btn-outline:hover{
  box-shadow:var(--bx-sh-2);
}

/* arrow nudges on the CTA that has one */
.btn svg:last-child{ transition:transform .22s var(--bx-ease) }
.btn:hover svg:last-child{ transform:translateX(3px) }

/* ---------- 4. section eyebrows ----------------------------- */
.tag, .shw-eyebrow{
  display:inline-flex !important;
  align-items:center;
  gap:.55rem;
  padding:.4rem .85rem .4rem .7rem;
  border-radius:999px;
  background:#fbebed;
  border:1px solid #f2d9dd;
  color:#8a1d2c !important;
  font-size:.7rem !important;
  font-weight:900 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase;
  line-height:1.2;
}
.tag::before{
  content:"";
  width:6px;height:6px;border-radius:999px;
  background:#9e2233;
  box-shadow:0 0 0 3px rgba(158,34,51,.16);
  flex:0 0 auto;
}

/* ---------- 5. hero v2 --------------------------------------
   Layered light: two radial washes, a fine grain, an accent
   glow behind the headline. Costs nothing to paint.            */
.bx-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
/* ::before removed — see §23 */
/* NOTE: a mix-blend-mode overlay layer here composited over the hero
   text in Chromium and washed the headline out. Folded the texture
   into ::before instead, with normal blending. */


/* headline inside the hero gets a little more presence */
.bx-hero h1{
  color:#ffffff !important;
  font-size:clamp(2.15rem,4vw,3.65rem) !important;
  line-height:1.03 !important;
  letter-spacing:-.03em !important;
}
.bx-hero .bx-hero__lede{
  font-size:clamp(1.05rem,1.35vw,1.22rem) !important;
  line-height:1.55 !important;
  color:#eedde2;
  max-width:34rem;
}

/* the pale right-hand panel: soften its edge into the hero */
.bx-hero .bx-hero__media img{
  filter:saturate(1.02) contrast(1.02);
}

@media (max-width:1023px){
  
}

/* ---------- 6. proof pills under the hero ------------------- */
.bx-proof{
  display:flex; flex-wrap:wrap; gap:.5rem .55rem;
  margin-top:1.6rem; padding:0; list-style:none;
}
.bx-proof li{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .85rem;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px);
  color:#f7eef0;
  font-size:.86rem !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  white-space:nowrap;
}
.bx-proof li svg{ width:.95rem; height:.95rem; color:#ee8a94; flex:0 0 auto }

/* ---------- 7. bento grid ----------------------------------- */
.bx-bento{
  display:grid;
  gap:.9rem;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:900px){
  .bx-bento{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .bx-bento > .bx-tile--wide{ grid-column:span 2 }
  .bx-bento > .bx-tile--tall{ grid-row:span 2 }
}
.bx-tile{
  position:relative;
  border-radius:var(--bx-radius);
  background:var(--bx-paper);
  border:1px solid var(--bx-line);
  box-shadow:var(--bx-sh-1);
  padding:1.15rem 1.2rem;
  display:flex; flex-direction:column; gap:.35rem;
  overflow:hidden;
  transition:transform .25s var(--bx-ease), box-shadow .25s var(--bx-ease), border-color .25s var(--bx-ease);
}
.bx-tile:hover{
  transform:translateY(-3px);
  box-shadow:var(--bx-sh-3);
  border-color:var(--bx-line-strong);
}
.bx-tile--ink{
  background:var(--bx-grad-ink);
  border-color:#4a1622;
  color:#f7eef0;
}
.bx-tile--ink::after{
  content:"";
  position:absolute; right:-40px; top:-40px;
  width:170px;height:170px;border-radius:999px;
  background:radial-gradient(circle,rgba(179,39,56,.55),transparent 70%);
  pointer-events:none;
}
.bx-tile--red{
  background:var(--bx-grad-brand);
  border-color:#7e1b2a;
  color:#fff;
}
.bx-tile__n{
  font-family:inherit;
  font-size:2.1rem;
  font-weight:900;
  line-height:1;
  letter-spacing:-.03em;
  color:#33101a;
}
.bx-tile--ink .bx-tile__n, .bx-tile--red .bx-tile__n{ color:#fff }
.bx-tile__l{
  font-size:.8rem !important;
  font-weight:800 !important;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.35 !important;
  color:#7a5f66;
}
.bx-tile--ink .bx-tile__l{ color:#d9bfc6 }
.bx-tile--red .bx-tile__l{ color:#f6d3d8 }
.bx-tile p{
  margin:0;
  font-size:.92rem !important;
  line-height:1.5 !important;
  color:#4a3238;
}
.bx-tile--ink p{ color:#eddde2 }
.bx-tile--red p{ color:#fff }
.bx-tile__ico{
  width:2.2rem;height:2.2rem;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:#fbebed;color:#9e2233;
  margin-bottom:.35rem;
}
.bx-tile--ink .bx-tile__ico{ background:rgba(255,255,255,.12); color:#ee8a94 }
.bx-tile__ico svg{ width:1.1rem;height:1.1rem }

/* ---------- 8. cards v2 ------------------------------------- */
.card{
  box-shadow:var(--bx-sh-1) !important;
  border-color:var(--bx-line) !important;
  transition:transform .25s var(--bx-ease), box-shadow .25s var(--bx-ease), border-color .25s var(--bx-ease);
}
a.card:hover, .card.hover\:-translate-y-1:hover{
  transform:translateY(-4px) !important;
  box-shadow:var(--bx-sh-3) !important;
  border-color:var(--bx-line-strong) !important;
}

/* ---------- 9. quote-form card ------------------------------ */
.shw-quick{
  position:relative;
  border-radius:22px !important;
  background:var(--bx-grad-warm) !important;
  border:1px solid var(--bx-line) !important;
  box-shadow:var(--bx-sh-3) !important;
  overflow:hidden;
}
.shw-quick::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:4px;
  background:var(--bx-grad-brand);
}
.shw-quick input{
  transition:border-color .15s var(--bx-ease), box-shadow .15s var(--bx-ease);
  box-shadow:inset 0 1px 2px rgba(32,9,14,.05);
}
.shw-quick input:hover{ border-color:var(--bx-line-strong) }

/* ---------- 10. scroll reveal (fail-safe) -------------------
   Hidden only while <html> carries .bx-anim, which site.js adds
   immediately before observing. If JS never runs, or the observer
   never fires, the content stays visible. Nothing can be left
   invisible by this effect.                                     */
@media (prefers-reduced-motion:no-preference){
  html.bx-anim .bx-reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .62s var(--bx-ease), transform .62s var(--bx-ease);
  }
  html.bx-anim .bx-reveal.is-in{ opacity:1; transform:none }
  html.bx-anim .bx-reveal[data-d="1"]{ transition-delay:.07s }
  html.bx-anim .bx-reveal[data-d="2"]{ transition-delay:.14s }
}

/* ---------- 11. section rhythm ------------------------------
   Alternating bands were flat colour. Give the cream bands a
   faint warm gradient so the page breathes.                    */
section.bg-navy-50{ background-image:linear-gradient(180deg,#f9f2f4 0%,#f7eef0 55%,#f4e9ec 100%) }

/* ---------- 12. numbered steps ------------------------------ */
.bx-step{
  position:relative;
  border-radius:var(--bx-radius);
  background:var(--bx-paper);
  border:1px solid var(--bx-line);
  box-shadow:var(--bx-sh-2);
  padding:1.5rem 1.35rem 1.35rem;
  transition:transform .25s var(--bx-ease), box-shadow .25s var(--bx-ease);
}
.bx-step:hover{ transform:translateY(-3px); box-shadow:var(--bx-sh-3) }
.bx-step__n{
  position:absolute; top:-1.1rem; left:1.35rem;
  min-width:2.6rem; height:2.2rem; padding:0 .7rem;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:11px;
  background:var(--bx-grad-brand);
  color:#fff;
  font-weight:900; font-size:.95rem; letter-spacing:.06em;
  box-shadow:var(--bx-sh-red);
}

/* ---------- 13. sticky mobile CTA ----------------------------
   Two-up bar already exists; give the call side the brand
   gradient and the quote side real contrast.                   */
.bx-mbar{
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  display:grid; grid-template-columns:1fr 1fr; gap:.55rem;
  padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
  background:rgba(32,9,14,.92);
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.1);
}
.bx-mbar a{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:3.2rem;border-radius:12px;
  font-weight:900;font-size:.98rem;text-decoration:none;
  transition:transform .16s var(--bx-ease);
}
.bx-mbar a:active{ transform:scale(.98) }
.bx-mbar__call{ background:var(--bx-grad-brand); color:#fff; box-shadow:var(--bx-sh-red) }
.bx-mbar__quote{ background:#fffdfe; color:#33101a }
.bx-mbar svg{ width:1.1rem;height:1.1rem }

/* ---------- 14. offer strip -------------------------------- */
.bx-offer{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.5rem .9rem;
  padding:.65rem 1rem;
  border-radius:999px;
  background:#fbebed;
  border:1px solid #f2d9dd;
  font-size:.88rem !important;
  font-weight:800 !important;
  color:#7e1b2a;
  line-height:1.3 !important;
  text-align:center;
}
.bx-offer b{ color:#651e2e }
.bx-offer span{ display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap }
.bx-offer svg{ width:.95rem;height:.95rem;flex:0 0 auto }

/* ---------- 15. media frames -------------------------------- */
.bx-frame{
  position:relative;
  border-radius:var(--bx-radius);
  overflow:hidden;
  box-shadow:var(--bx-sh-3);
  border:1px solid var(--bx-line);
}
.bx-frame img{ display:block;width:100%;height:100%;object-fit:cover }
.bx-frame::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(32,9,14,.5) 100%);
  pointer-events:none;
}
.bx-frame__cap{
  position:absolute; left:0;right:0;bottom:0;
  padding:.85rem 1rem;
  color:#fff; font-size:.86rem; font-weight:800;
  display:flex;align-items:center;gap:.5rem;
}
.bx-frame__cap svg{ width:1rem;height:1rem;color:#ee8a94 }

/* ---------- 16. price cards --------------------------------- */
.bx-price{
  position:relative;
  border-radius:var(--bx-radius);
  background:var(--bx-paper);
  border:1px solid var(--bx-line);
  box-shadow:var(--bx-sh-2);
  padding:1.5rem 1.35rem;
  display:flex;flex-direction:column;
  transition:transform .25s var(--bx-ease), box-shadow .25s var(--bx-ease);
}
.bx-price:hover{ transform:translateY(-4px); box-shadow:var(--bx-sh-3) }
.bx-price--best{
  border-color:#9e2233;
  box-shadow:0 0 0 2px rgba(158,34,51,.14), var(--bx-sh-3);
}
.bx-price__flag{
  position:absolute; top:-.75rem; left:50%; transform:translateX(-50%);
  background:var(--bx-grad-brand);
  color:#fff; font-size:.66rem; font-weight:900;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.32rem .8rem; border-radius:999px;
  box-shadow:var(--bx-sh-red);
  white-space:nowrap;
}
.bx-price__amt{
  font-size:2rem !important; font-weight:900; letter-spacing:-.03em;
  color:#33101a; line-height:1 !important;
}
.bx-price__amt small{ font-size:.8rem; font-weight:800; color:#7a5f66; letter-spacing:0 }

/* ---------- 17. review cards -------------------------------- */
.shw-rev__card{
  box-shadow:var(--bx-sh-1) !important;
  transition:transform .25s var(--bx-ease), box-shadow .25s var(--bx-ease);
}
.shw-rev__card:hover{ transform:translateY(-3px); box-shadow:var(--bx-sh-3) !important }

/* ---------- 18. footer polish ------------------------------- */
footer.bg-navy-950{
  background-image:
    radial-gradient(700px 380px at 12% 0%, rgba(126,27,42,.55), transparent 62%),
    linear-gradient(180deg,#20090e 0%,#1a070b 100%) !important;
}
footer a{ transition:color .16s var(--bx-ease), opacity .16s var(--bx-ease) }

/* ---------- 19. utility bar -------------------------------- */
body > div.bg-navy-950{
  background-image:linear-gradient(90deg,#20090e 0%,#2c0d14 50%,#20090e 100%);
}

/* ---------- 20. print --------------------------------------- */
@media print{
  .bx-mbar, .shw-callbar, header, footer{ display:none !important }
  .bx-reveal{ opacity:1 !important; transform:none !important }
}

/* ---------- 21. hero layout (own the grid) -------------------
   The compiled Tailwind bundle has no arbitrary grid-template
   utilities, so lg:grid-cols-[…] silently did nothing and the
   hero stacked into one very tall column.                       */
.bx-hero__grid{ display:block }
@media (min-width:1024px){
  .bx-hero__grid{
    display:grid;
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    align-items:center;
    gap:3.25rem;
  }
  .bx-hero__media{ margin-top:0 !important }
}
.bx-hero__media{ margin-top:2.4rem }
.bx-hero__sub{
  display:block;
  margin-top:.35rem;
  font-size:.44em;
  font-weight:800;
  letter-spacing:-.005em;
  line-height:1.15;
  color:#ee8a94;
}
@media (max-width:1023px){
  .bx-hero__sub{ font-size:.52em }
}

/* ---------- 22. hero contrast lock --------------------------
   The layered radial washes lifted the background behind the
   headline close to its own value. Pin the text to pure white
   and keep a dark scrim under the copy column.                 */
.bx-hero h1, .bx-hero h1 *{ color:#ffffff !important }
.bx-hero .bx-hero__sub{ color:#ff9aa4 !important }
.bx-hero .bx-hero__lede{ color:#f2e3e6 !important }
/* ::before removed — see §23 */
.bx-hero .bx-proof li{ color:#fff !important }
.bx-hero .bx-proof li svg{ color:#ff9aa4 !important }

/* ---------- 23. hero: no pseudo-element layers --------------
   Layered ::before/::after washes composited badly over the
   headline. The gradient now paints straight onto the section,
   so nothing can ever draw above the text.                      */
.bx-hero{
  isolation:auto !important;
  background-image:
    radial-gradient(900px 520px at 4% -12%, rgba(158,34,51,.55), transparent 58%),
    radial-gradient(720px 440px at 92% 118%, rgba(74,22,34,.9), transparent 62%),
    linear-gradient(100deg,#2c0d14 0%,#33101a 46%,#3d1520 100%) !important;
  background-color:#2b0c13 !important;
}
.bx-hero h1{ color:#ffffff !important }
.bx-hero h1 *{ color:#ffffff !important }
.bx-hero .bx-hero__sub{ color:#ff9aa4 !important }
.bx-hero .bx-hero__lede{ color:#f2e3e6 !important }

/* ---------- 24. bento refinements --------------------------- */
.bx-tile__t{
  font-size:1.12rem !important;
  font-weight:900;
  line-height:1.25 !important;
  letter-spacing:-.015em;
  color:#33101a;
  margin:0 0 .35rem;
}
.bx-tile--ink .bx-tile__t{ color:#fff }
.bx-tile--red .bx-tile__t{ color:#fff }
.bx-tile__n{ margin:0 }
.bx-tile__l{ margin:0 0 .3rem }
/* equal-height rows so the mosaic never shows holes */
.bx-bento{ grid-auto-rows:minmax(10.5rem,auto) }
@media (min-width:900px){
  .bx-bento{ grid-auto-rows:minmax(11rem,auto) }
}

/* ---------- 25. bento: explicit spans, no holes ------------- */
.bx-bento{
  display:grid;
  gap:.9rem;
  margin-top:2.25rem;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1fr;
}
@media (min-width:900px){
  .bx-bento{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .bx-bento > .bx-tile--wide{ grid-column:span 2 }
}
/* row 3 on desktop: wide + normal + normal already fills 4 */

/* ---------- 26. self-contained layout utilities -------------
   The compiled Tailwind bundle only contains classes the original
   build used. Arbitrary/new utilities silently do nothing, so any
   markup added later gets its own classes here.                */
.bx-sec{ padding:3rem 0 3.5rem }
.bx-sec--tight{ padding:2.25rem 0 2.5rem }
.bx-head{ max-width:44rem }
.bx-h2{
  font-size:clamp(1.7rem,2.5vw,2.35rem) !important;
  line-height:1.14 !important;
  letter-spacing:-.022em !important;
  font-weight:900;
  color:#33101a;
  margin:.9rem 0 0 !important;
  text-wrap:balance;
}
.bx-lede{
  margin:.8rem 0 0 !important;
  font-size:1.05rem !important;
  line-height:1.6 !important;
  color:#4a3238;
  max-width:42rem;
  white-space:normal !important;
}
.bx-cta-row{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:.75rem;
  margin-top:2.25rem;
}
@media (min-width:640px){
  .bx-cta-row{ flex-direction:row; align-items:center; justify-content:center }
}
.bx-reassure{
  margin:.85rem 0 0 !important;
  text-align:center;
  font-size:.9rem !important;
  font-weight:700 !important;
  color:#7a5f66;
  white-space:normal !important;
}
.bx-center{ text-align:center }
.bx-center .bx-head{ margin-left:auto; margin-right:auto }

/* ---------- 27. ghost button needs a real edge --------------- */
.btn-ghost{
  background:#fffdfe !important;
  border:1.5px solid #d6b8bf !important;
  color:#33101a !important;
}
.btn-ghost:hover{
  border-color:#9e2233 !important;
  color:#7e1b2a !important;
  background:#fff9fa !important;
}

/* ---------- 28. bento track sizing (mobile fix) --------------
   grid-auto-rows:1fr made every mobile row as tall as the tallest
   tile, throwing huge empty gaps. Auto rows on small screens,
   equal rows only on the 4-column desktop mosaic.               */
.bx-bento{
  grid-template-columns:minmax(0,1fr) !important;
  grid-auto-rows:auto !important;
}
@media (min-width:640px){
  .bx-bento{ grid-template-columns:repeat(2,minmax(0,1fr)) !important }
  .bx-bento > .bx-tile--wide{ grid-column:span 2 }
}
@media (min-width:900px){
  .bx-bento{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-auto-rows:minmax(11rem,auto) !important;
  }
  .bx-bento > .bx-tile--wide{ grid-column:span 2 }
}

/* ---------- 29. images that relied on uncompiled utilities ---
   aspect-[4/5], aspect-[16/10] etc. are not in the compiled
   Tailwind bundle, so those images had no intrinsic height and
   collapsed to nothing. Give the wrappers real ratios.          */
.bx-photo{
  aspect-ratio:4/3;
  width:100%;
  background:#4a1622;
  border-radius:18px;
  overflow:hidden;
}
.bx-photo img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block;
}
/* the founder portrait is a tall crop */
.bx-photo--tall{ aspect-ratio:4/5; max-height:34rem }
.bx-photo--tall img{ object-position:50% 16% !important }
img[class*="aspect-"]{ height:auto }

/* ---------- 30. mid-page conversion band -------------------- */
.bx-midcta{
  background-image:
    radial-gradient(620px 320px at 88% -20%, rgba(179,39,56,.55), transparent 60%),
    linear-gradient(100deg,#33101a 0%,#20090e 100%);
  color:#f7eef0;
  padding:3.25rem 0;
  position:relative;
  overflow:hidden;
}
.bx-midcta__inner{
  display:grid;
  gap:2rem;
  align-items:center;
}
@media (min-width:900px){
  .bx-midcta__inner{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) }
}
.bx-midcta__eyebrow{
  margin:0 0 .8rem !important;
  font-size:.72rem !important;
  font-weight:900 !important;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#ee8a94;
}
.bx-midcta__h{
  margin:0 !important;
  font-size:clamp(1.75rem,2.8vw,2.5rem) !important;
  line-height:1.1 !important;
  letter-spacing:-.025em !important;
  font-weight:900;
  color:#fff !important;
}
.bx-midcta__p{
  margin:.85rem 0 0 !important;
  font-size:1.05rem !important;
  line-height:1.6 !important;
  color:#eddde2;
  max-width:34rem;
}
.bx-midcta__list{
  list-style:none;
  margin:1.35rem 0 0 !important;
  padding:0 !important;
  display:flex;
  flex-wrap:wrap;
  gap:.55rem 1.4rem;
}
.bx-midcta__list li{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.95rem;
  font-weight:700;
  color:#f7eef0;
  margin:0 !important;
  white-space:normal !important;
}
.bx-midcta__list svg{ width:1rem;height:1rem;color:#ee8a94;flex:0 0 auto }
.bx-midcta__act{ display:flex;flex-direction:column;gap:.85rem;align-items:stretch }
@media (min-width:900px){ .bx-midcta__act{ align-items:flex-end } }
.bx-midcta__act .btn{ width:100%;justify-content:center }
@media (min-width:900px){ .bx-midcta__act .btn{ width:auto;min-width:17rem } }
.bx-midcta__tel{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  padding:.85rem 1rem;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(6px);
  color:#fff;
  text-decoration:none;
  transition:background .18s var(--bx-ease), border-color .18s var(--bx-ease);
}
.bx-midcta__tel:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3) }
.bx-midcta__tel svg{ width:1.2rem;height:1.2rem;color:#ee8a94;flex:0 0 auto }
.bx-midcta__tel span{ display:flex;flex-direction:column;line-height:1.25;font-size:.9rem }
.bx-midcta__tel b{ font-size:1.1rem;font-weight:900;letter-spacing:-.01em }
.bx-midcta__tel small{ font-size:.78rem;color:#d9bfc6;font-weight:600 }

/* ---------- 31. quote form (bottom of funnel) --------------- */
.bx-submit{ display:flex;flex-direction:column;gap:.75rem }
.bx-submit__btn{
  width:100%;
  justify-content:center;
  font-size:1.08rem !important;
  min-height:3.4rem;
}
@media (min-width:640px){ .bx-submit__btn{ width:auto;min-width:19rem } }
.bx-submit__micro{
  margin:0 !important;
  font-size:.9rem !important;
  line-height:1.5 !important;
  color:#7a5f66;
  white-space:normal !important;
}
.bx-submit__micro b{ color:#33101a }
.bx-submit__trust{
  list-style:none;
  margin:.25rem 0 0 !important;
  padding:0 !important;
  display:grid;
  gap:.4rem;
}
@media (min-width:640px){ .bx-submit__trust{ grid-template-columns:1fr 1fr; gap:.4rem 1.2rem } }
.bx-submit__trust li{
  display:inline-flex;align-items:flex-start;gap:.45rem;
  font-size:.88rem !important;
  font-weight:700 !important;
  color:#4a3238;
  margin:0 !important;
  white-space:normal !important;
}
.bx-submit__trust svg{ width:.9rem;height:.9rem;color:#1c6b3f;flex:0 0 auto;margin-top:.22rem }
/* inline field validation feedback */
.bx-form input:user-invalid, .bx-form textarea:user-invalid{
  border-color:#b32738 !important;
  background:#fff8f9;
}
.bx-form input:focus, .bx-form textarea:focus, .bx-form select:focus{
  border-color:#9e2233 !important;
  box-shadow:0 0 0 3px rgba(158,34,51,.16) !important;
}

/* ---------- 32. mobile bar must stay mobile-only ------------
   .bx-mbar sets display:grid, which overrode the Tailwind
   md:hidden on the same element. Own the breakpoint here.       */
@media (min-width:768px){
  .bx-mbar{ display:none !important }
  body > .h-20{ display:none !important }
}

/* ---------- 33. footer brand lock ---------------------------- */
.bx-fbrand{ display:flex; align-items:center; gap:.75rem }
.bx-fbrand .bx-fbrand__txt{ display:flex; flex-direction:column; line-height:1 }
.bx-fbrand .bx-fbrand__name{
  font-size:1.05rem; font-weight:900; letter-spacing:.15em; color:#fffdfe;
}
.bx-fbrand .bx-fbrand__sub{
  margin-top:.28rem; font-size:.6rem; font-weight:800;
  letter-spacing:.23em; text-transform:uppercase; color:#d9bfc6;
}

/* 34. footer brand lock — beat the generic header span rules */
footer .bx-fbrand__txt{ display:flex !important; flex-direction:column; line-height:1 !important }
footer .bx-fbrand__name{ font-size:1.05rem !important; font-weight:900; letter-spacing:.16em !important; color:#fffdfe; white-space:nowrap }
footer .bx-fbrand__sub{
  margin-top:.3rem; font-size:.6rem !important; font-weight:800;
  letter-spacing:.22em !important; text-transform:uppercase; color:#d9bfc6; white-space:nowrap;
}

/* ---------- 35. contrast corrections ------------------------
   Footer link red measured 4.29:1 on navy-950 (AA needs 4.5)
   and the eyebrow pill on dark sections measured 3.84:1.       */
footer a{ color:#f7eef0 }
footer a:hover{ color:#ffb3bb !important }
footer .text-brand-400{ color:#ffb3bb !important }

/* eyebrow pill sitting on a dark band */
.bg-navy-900 .tag,
.bg-navy-900 .shw-eyebrow,
section[class*="bg-navy-900"] .tag{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.22) !important;
  color:#ffc2c9 !important;
}
.bg-navy-900 .tag::before,
section[class*="bg-navy-900"] .tag::before{ background:#ee8a94 !important; box-shadow:0 0 0 3px rgba(238,138,148,.25) }

/* 38. Eyebrow pills on dark bands.
   The Next bundle wraps its utilities in @layer, and for !important
   declarations the layer order inverts — so an unlayered !important
   can never beat `.\!text-brand-400`. Owning the class avoids the war. */
.tag.bx-eyebrow-light{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  color:#ffc2c9;
  box-shadow:none;
}
.tag.bx-eyebrow-light::before{ background:#ee8a94; box-shadow:0 0 0 3px rgba(238,138,148,.22) }

/* ---------- 39. eyebrow pills must hug their text -------------
   Hero wrappers are flex columns, so an eyebrow pill is a flex item
   and stretches to the full column width (measured 581 px for a
   15-character label). Pin it to its content.                        */
.tag, .shw-eyebrow{
  align-self:flex-start;
  flex:0 0 auto;
  width:auto;
  max-width:100%;
}

/* ---------- 40. services catalogue: spec-sheet cards ----------
   The price rail is now full-height and bleeds to the card edge, so
   the two columns read as one sheet instead of a card with a floating
   tinted box. The repeated "typical range" paragraph is gone — it was
   identical six times over — replaced by one key line above the list. */
.shw-cat__key{
  margin:1.15rem 0 .2rem;
  padding:.85rem 1.1rem .85rem 1.15rem;
  border-left:3px solid #9e2233;
  border-radius:0 10px 10px 0;
  background:#fdf6f7;
  color:#4a3238;
  font-size:1rem;
  line-height:1.55;
  max-width:74ch;
}
.shw-cat__item{
  border-radius:16px;
  transition:box-shadow .35s var(--bx-ease), border-color .35s var(--bx-ease), transform .35s var(--bx-ease);
}
.shw-cat__item:hover{
  border-color:#e0bac2;
  box-shadow:0 20px 44px -24px rgba(36,19,24,.42);
  transform:translateY(-2px);
}
.shw-cat__ico{
  background:linear-gradient(150deg,#9e2233,#6a1d2b);
  box-shadow:0 8px 18px -10px rgba(126,27,42,.75);
  border-radius:12px;
  width:3rem; height:3rem;
}
.shw-cat h3{ letter-spacing:-.02em }
.shw-cat__pricel{
  display:flex; align-items:center; gap:.5rem;
  font-size:.7rem; letter-spacing:.14em; font-weight:800; color:#7a5f66;
  margin:0 0 .55rem;
}
.shw-cat__pricel::after{ content:""; flex:1; height:1px; background:#e6cdd3 }
.shw-cat__price{ font-size:1.85rem; letter-spacing:-.035em; color:#33101a }
.shw-cat__side .shw-btn--primary{
  background:linear-gradient(135deg,#9e2233,#7e1b2a 55%,#651e2e);
  box-shadow:0 10px 22px -12px rgba(126,27,42,.8);
}

@media(min-width:840px){
  .shw-cat{ gap:1.1rem }
  .shw-cat__item{
    grid-template-columns:minmax(0,1fr) 336px;
    gap:0;
    padding:0;
    overflow:hidden;
    align-items:stretch;
  }
  .shw-cat__item > div{padding:2rem 2rem 2rem 2.1rem}
  .shw-cat__side{
    align-self:stretch;
    border-radius:0;
    border-left:1px solid #e6cdd3;
    background:linear-gradient(175deg,#fdf7f8,#f7eaec);
    padding:2rem 1.8rem;
    display:flex; flex-direction:column; justify-content:center;
  }
}
@media(max-width:839px){
  .shw-cat__side{ border-radius:12px }
}

/* 41. catalogue cards: balance the two halves
   The rail sets the card height, so the text column was left with a
   ~150 px void at the bottom. Centre it, and tighten the rail. */
@media(min-width:840px){
  .shw-cat__item > div{ display:flex; flex-direction:column; justify-content:center }
  .shw-cat__ico{ margin-bottom:.8rem }
  .shw-cat__side{ padding:1.65rem 1.7rem }
  .shw-cat__scope{ margin:.7rem 0 .9rem }
}

/* 42. keep centred eyebrows centred after §39 */
.shw-center .shw-eyebrow,
.text-center .tag,
.text-center .shw-eyebrow{ align-self:center; margin-left:auto; margin-right:auto }

/* ---------- 43. service-detail kickers -------------------------
   The 17 service pages put a whole sentence where the other pages
   put a 2–3 word eyebrow, so the all-caps pill read like a banner.
   Sentence case, one step larger, still a chip. */
.tag.bx-kicker{
  text-transform:none;
  letter-spacing:.005em;
  font-size:.95rem !important;
  font-weight:700 !important;
  color:#7e1b2a !important;
  background:#fbebed;
  border:1px solid #f2d9dd;
  padding:.45rem .95rem .45rem .8rem;
  line-height:1.35;
}

/* 44. §4 sets text-transform:uppercase !important, so the kicker
      needs the same weight to opt out. */
.tag.bx-kicker{
  text-transform:none !important;
  font-size:.9rem !important;
  letter-spacing:0 !important;
  max-width:46ch;
}

/* ---------- 45. tap targets in the small print -----------------
   The utility bar and breadcrumbs rendered at 22–31 px on a phone.
   Padding-box below 768 px so every tappable thing clears 44 px. */
@media (max-width: 767px){
  .bg-navy-950 a,
  .bg-navy-950 button{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  nav[aria-label="Breadcrumb"] a,
  nav[aria-label="Breadcrumb"] li > span{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    padding:0 .15rem;
  }
  .shw-crumb{ display:flex; align-items:center; flex-wrap:wrap; gap:.35rem }
  .shw-crumb a{ min-height:44px; display:inline-flex; align-items:center }
}

/* 46. "Get a quote" is the only action on each price tile,
      so it needs a real tap target too. */
@media (max-width: 767px){
  .shw-fam__foot .shw-link{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .shw-fam__foot{ gap:.35rem }
}