/* ============================================================
   Beneva — layout & typography fixes for the v4h Burgundy build.
   Design, colours and content are untouched. This file only
   corrects scale, wrapping and rhythm.
   Loaded after the Next.js bundle so it wins on order; element
   rules that must beat Tailwind utilities carry !important.
   ============================================================ */

/* ---------- 1. Headline scale ---------------------------------
   v4h H1 renders at 72px on desktop and 54px on mobile, which
   forces 3 lines desktop and 5 lines mobile. Cap it.            */
h1{
  font-size:clamp(1.95rem,3.3vw,3rem) !important;   /* 34→48px   */
  line-height:1.08 !important;
  letter-spacing:-0.022em !important;
  text-wrap:balance;
}
h2{
  font-size:clamp(1.55rem,2.3vw,2rem) !important;   /* 25→32px   */
  line-height:1.15 !important;
  letter-spacing:-0.018em !important;
  text-wrap:balance;
}
h3{
  font-size:clamp(1.1rem,1.4vw,1.3rem) !important;  /* 18→21px   */
  line-height:1.28 !important;
  letter-spacing:-0.01em !important;
}
/* sub-headings that carry a lot of words read better slightly smaller */
h2 + p, h3 + p{max-width:62ch}

/* ---------- 2. Body copy ------------------------------------- */
p, li, dd{
  line-height:1.6 !important;
}
.lede{max-width:60ch}

/* ---------- 3. Header: never wrap -----------------------------
   The logo, the nav links and the phone button all break onto
   multiple lines between 1280px and 1500px.                     */
header .wrap{
  flex-wrap:nowrap !important;
  min-height:4.2rem !important;
  padding-top:.5rem !important;
  padding-bottom:.5rem !important;
  gap:1rem !important;
}
/* brand block: one line for the name, one for the tagline */
header a[class*="items-center"] > span > span{
  white-space:nowrap;
}
header span[class*="font-display"]{
  font-size:1.08rem !important;
  letter-spacing:-0.01em !important;
}
header span[class*="uppercase"]{
  font-size:.7rem !important;
  letter-spacing:.1em !important;
}
/* nav */
header nav{
  gap:.15rem !important;
  flex-wrap:nowrap !important;
}
header nav a{
  white-space:nowrap !important;
  font-size:.9rem !important;
  padding-left:.55rem !important;
  padding-right:.55rem !important;
  padding-top:.45rem !important;
  padding-bottom:.45rem !important;
}

/* ---------- 4. Buttons: never break mid-word ------------------
   "Call (860) 992-2332" was wrapping to two lines.              */
a[class*="btn"], button[class*="btn"], .btn{
  white-space:nowrap !important;
}
header a[class*="btn"]{
  font-size:.9rem !important;
  padding-left:.95rem !important;
  padding-right:.95rem !important;
  min-height:2.6rem !important;
}
/* keep the header phone button from crowding the nav */
header a[class*="btn"] svg, header button svg{
  width:1.05rem !important;
  height:1.05rem !important;
}

/* ---------- 5. Hero block rhythm ------------------------------ */
main > *:first-child h1{max-width:24ch}
/* tighten the oversized gap under the hero copy */
h1 + p, h1 ~ p:first-of-type{margin-top:.85rem}

/* ---------- 6. Mobile --------------------------------------- */
@media (max-width:640px){
  h1{
    font-size:clamp(1.9rem,7.6vw,2.3rem) !important;  /* 30→37px */
    line-height:1.12 !important;
    max-width:100%;
  }
  h2{font-size:1.45rem !important;max-width:100%}
  h3{font-size:1.08rem !important}
  p, li{font-size:1rem !important;line-height:1.55 !important}

  /* top utility bar: keep phone and text-size on one row */
  header .wrap{min-height:auto !important}

  /* fixed bottom call bar: smaller, one line each */
  a[class*="fixed"][class*="bottom-0"],
  div[class*="fixed"][class*="bottom-0"]{
    padding:.5rem .6rem !important;
  }
  a[class*="fixed"][class*="bottom-0"] a,
  div[class*="fixed"][class*="bottom-0"] a{
    font-size:.88rem !important;
    padding:.65rem .5rem !important;
    white-space:nowrap !important;
  }
  /* give the page room so the bar never covers the last section */
  body{padding-bottom:4.2rem}
}

/* ---------- 7. Tablet: stop the nav squeezing --------------- */
@media (min-width:1280px) and (max-width:1460px){
  header nav a{font-size:.84rem !important;padding-left:.42rem !important;padding-right:.42rem !important}
  header span[class*="font-display"]{font-size:1rem !important}
  header a[class*="btn"]{font-size:.84rem !important;padding-left:.8rem !important;padding-right:.8rem !important}
}

/* ---------- 8. Small print ---------------------------------- */
footer p, footer li, footer a, .text-xs, [class*="text-[0.7"], [class*="text-[0.75"]{
  line-height:1.5;
}


/* ---------- 9. Stop sideways scroll ----------------------------
   The hero columns in v4h are wider than their container at
   768–1280px, which pushes the page sideways. `clip` fixes it
   without creating a scroll container, so the sticky header and
   the mobile menu keep working.                                  */
html, body{overflow-x:clip !important}

/* button rows must wrap instead of pushing off-screen */
*:has(> a[class*="btn"] + a[class*="btn"]),
*:has(> a[class*="btn"] + button),
*:has(> button + a[class*="btn"]){
  flex-wrap:wrap !important;
  row-gap:.6rem !important;
}
a[class*="btn"], button[class*="btn"]{
  max-width:100% !important;
}

/* any stray full-bleed child inside a padded wrapper */
.wrap > *{min-width:0}

/* ---------- 10. Section rhythm -------------------------------- */
/* v4h runs py-20/py-24 on most sections — a shade too loose next
   to the tightened type. */
section{padding-top:clamp(2.6rem,4vw,4rem) !important;padding-bottom:clamp(2.6rem,4vw,4rem) !important}

/* ---------- 11. Mobile header: brand must not collide with Menu ---- */
header a[class*="items-center"]{
  min-width:0;
  flex-shrink:1;
  overflow:hidden;
}
header a[class*="items-center"] > span:last-child{
  min-width:0;
  overflow:hidden;
}
header a[class*="items-center"] > span:last-child > span{
  display:block;
  white-space:normal;
  line-height:1.12;
}
header button[class*="min-h"]{
  flex-shrink:0;
}
@media (max-width:640px){
  header .wrap{gap:.55rem !important;padding-left:.85rem !important;padding-right:.85rem !important}
  header span[class*="font-display"]{font-size:.95rem !important;letter-spacing:-.02em !important}
  header span[class*="uppercase"]{font-size:.6rem !important;letter-spacing:.05em !important}
  header button[class*="min-h"]{
    padding-left:.7rem !important;
    padding-right:.7rem !important;
    font-size:.88rem !important;
  }
  /* utility bar: keep the text-size control on one line */
  header > div:first-child a, header > div:first-child button,
  header div[class*="text-\\[0.7"], header div[class*="text-\\[0.75"]{
    white-space:nowrap;
  }
  /* hero buttons: full width, consistent */
  main > *:first-child a[class*="btn"]{
    width:100%;
    justify-content:center;
  }
}


/* ---------- 12. Mobile: clear the fixed call bar -------------------
   The bottom bar covers the hero's second button on first screen.  */
@media (max-width:640px){
  main > *:first-child{
    padding-bottom:5.5rem !important;
  }
}

/* ---------- 13. Eyebrows / section labels --------------------------
   v4h sets every label to 0.85rem of an 18px root (15.3px) in
   font-black uppercase — almost body size, which is why they shout.
   A label should be 11–12px, semibold, with modest tracking.        */
[class~="uppercase"]{
  font-size:.7rem !important;        /* ≈11px at 16, 12px at 18 root */
  font-weight:700 !important;
  letter-spacing:.1em !important;
  line-height:1.45 !important;
}
/* pills and chips that sit under headings */
[class~="rounded-full"][class~="uppercase"]{
  font-size:.64rem !important;
  letter-spacing:.085em !important;
  font-weight:700 !important;
  padding-top:.28rem !important;
  padding-bottom:.28rem !important;
}
/* footer column headings were 1rem black uppercase */
footer h2[class~="uppercase"],
footer h3[class~="uppercase"],
footer [class~="uppercase"]{
  font-size:.7rem !important;
  font-weight:700 !important;
}
/* the small brand tagline under the wordmark */
header [class~="uppercase"]{
  font-size:.62rem !important;
  letter-spacing:.09em !important;
  font-weight:700 !important;
}
/* never let a label inherit a display weight */
[class~="uppercase"][class~="font-black"]{
  font-weight:700 !important;
}

/* ---------- 14. .tag — the real eyebrow component -------------------
   The section labels above every H2 use .tag, set to 15.3px in the
   bundle. Nothing in the Tailwind override above could reach it.     */
.tag{
  font-size:.66rem !important;      /* ≈11–12px */
  line-height:1.4 !important;
  font-weight:700 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  padding:.28rem .6rem !important;
  min-height:0 !important;
}
/* the rule/dash variant sits inline before the text */
.tag::before{
  width:1.1rem !important;
}
/* small pills elsewhere in the page use the same visual language */
.section-head .tag, .wrap > div > .tag{
  margin-bottom:.55rem !important;
}

/* ---------- 15. Header opacity -------------------------------------
   bg-card/95 + backdrop blur lets page content show through the
   sticky bar as it scrolls. Make it solid.                          */
header[class*="sticky"]{
  background-color:rgb(255 255 255) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ---------- 16. H1 sized to its column, not the viewport -----------
   Every page hero is a 2-col grid; the H1 column is 581px at 1440 and
   445px at 1024. A vw-based clamp ignored that, so the three longest
   headlines (referral / quote / seniors) broke to a 3rd line.
   Measured: 2 lines need <=46px @581 and <=35px @445 — i.e. 7.5cqi.
   Below lg the hero is single-column, so keep the existing mobile size. */
@media (min-width:1024px){
  [class*="lg:grid-cols-2"] > div{
    container-type:inline-size;
  }
  [class*="lg:grid-cols-2"] h1{
    font-size:clamp(1.8rem,7.5cqi,3rem) !important;
  }
}

/* ============================================================
   17. HERO REBUILD — layout only.
   Measured problems at 1440px: hero 1081px tall on a 900px
   viewport; 147px of dead space top and bottom because rule 10
   padded the <section> while the inner .wrap already had py-20;
   the two CTA buttons wrapped to 2 rows (310px + 287px + gap >
   581px column); trust list broke 2+1; the "Small jobs" card
   added 144px. Content, colours and copy are unchanged.
   ============================================================ */

/* 17a — the section no longer carries padding; the wrapper does. */
main > *:first-child{
  padding-top:0 !important;
  padding-bottom:0 !important;
}
main > *:first-child > .wrap{
  padding-top:clamp(1.9rem,3vw,3.1rem) !important;
  padding-bottom:clamp(1.9rem,3vw,3.1rem) !important;
}

/* 17b — one consistent rhythm instead of four competing mt-8s. */
main > *:first-child > .wrap [class*="lg:grid-cols-2"] > div:first-child{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1.15rem;
}
main > *:first-child > .wrap [class*="lg:grid-cols-2"] > div:first-child > *{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* 17c — CTAs sit on one row and stop being 70px tall. */
main > *:first-child a[class*="btn"]{
  min-height:3.15rem !important;
  padding-top:.82rem !important;
  padding-bottom:.82rem !important;
  padding-left:1.15rem !important;
  padding-right:1.15rem !important;
  font-size:.96rem !important;
}
main > *:first-child a[class*="btn"] svg{
  width:1.1rem !important;
  height:1.1rem !important;
}
/* between 641 and 1279 the column is too narrow for two wide CTAs —
   stack them full-width so it reads as deliberate, not ragged. */
@media (min-width:641px) and (max-width:1279px){
  main > *:first-child a[class*="btn"]{
    width:100%;
    justify-content:center;
  }
}

/* 17d — the three assurances on a single row. */
main > *:first-child ul{
  gap:.45rem .72rem !important;
}
main > *:first-child ul li{
  font-size:.84rem !important;
  gap:.45rem !important;
  line-height:1.35 !important;
}
main > *:first-child ul li > span{
  width:1.15rem !important;
  height:1.15rem !important;
}
main > *:first-child ul li > span svg{
  width:.7rem !important;
  height:.7rem !important;
}

/* 17e — the trust card becomes a slim strip under the CTAs
   instead of a 360x144 block hanging off the column. */
main > *:first-child > .wrap [class*="lg:grid-cols-2"] > div:first-child > div:last-child{
  max-width:none !important;
  display:flex !important;
  align-items:center !important;
  gap:.9rem !important;
  padding:.72rem .95rem !important;
}
main > *:first-child > .wrap [class*="lg:grid-cols-2"] > div:first-child > div:last-child > p{
  margin:0 !important;
}
main > *:first-child > .wrap [class*="lg:grid-cols-2"] > div:first-child > div:last-child > p:first-child{
  flex:0 0 auto !important;
  font-size:.92rem !important;
}
main > *:first-child > .wrap [class*="lg:grid-cols-2"] > div:first-child > div:last-child > p:last-child{
  font-size:.86rem !important;
  line-height:1.35 !important;
}
main > *:first-child > .wrap [class*="lg:grid-cols-2"] > div:first-child > div:last-child p:first-child > span{
  width:1.9rem !important;
  height:1.9rem !important;
}

/* 17f — mobile: tighter top, keep clearance for the fixed call bar. */
@media (max-width:640px){
  main > *:first-child > .wrap{
    padding-top:1.75rem !important;
    padding-bottom:5.6rem !important;
  }
  main > *:first-child > .wrap [class*="lg:grid-cols-2"] > div:first-child{
    gap:.95rem;
  }
  main > *:first-child a[class*="btn"]{
    min-height:3rem !important;
    font-size:.95rem !important;
  }
}

/* 17g — the trust card stacks at tablet and below so it stays readable */
@media (max-width:1279px){
  main > *:first-child > .wrap [class*="lg:grid-cols-2"] > div:first-child > div:last-child{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:.5rem !important;
  }
}

/* 17h — 1024–1366 laptops have a ~573px column; nudge the trust row
   so all three assurances hold one line. */
@media (min-width:641px) and (max-width:1366px){
  main > *:first-child ul{gap:.45rem .6rem !important}
  main > *:first-child ul li{font-size:.8rem !important}
}

/* ============================================================
   18. MOBILE CHROME — the three things still breaking at 390px
   (utility bar 2 rows, wordmark 2 rows, hero pill 2 rows).
   ============================================================ */
@media (max-width:640px){
  /* 18a — utility bar: phone + text-size on one 44px row */
  body > div:first-of-type .wrap,
  header + div .wrap{
    flex-wrap:nowrap !important;
    min-height:0 !important;
    padding-top:.5rem !important;
    padding-bottom:.5rem !important;
    gap:.5rem !important;
  }
  body > div:first-of-type a[href^="tel"],
  header + div a[href^="tel"]{
    font-size:.9rem !important;
    gap:.4rem !important;
    white-space:nowrap !important;
  }
  body > div:first-of-type a[href^="tel"] svg,
  header + div a[href^="tel"] svg{
    width:.95rem !important;
    height:.95rem !important;
    flex-shrink:0 !important;
  }
  body > div:first-of-type button[aria-pressed],
  header + div button[aria-pressed]{
    font-size:.74rem !important;
    gap:.35rem !important;
    padding:.3rem .5rem !important;
    white-space:nowrap !important;
  }
  body > div:first-of-type button[aria-pressed] > span,
  header + div button[aria-pressed] > span{
    font-size:.68rem !important;
  }

  /* 18b — wordmark on one line */
  header a[class*="items-center"]{
    gap:.5rem !important;
  }
  header a[class*="items-center"] > span:first-child{
    width:2.35rem !important;
    height:2.35rem !important;
    flex-shrink:0 !important;
  }
  header a[class*="items-center"] > span:first-child svg{
    width:1.15rem !important;
    height:1.15rem !important;
  }
  header span[class*="font-display"]{
    font-size:.8rem !important;
    letter-spacing:-.03em !important;
    white-space:nowrap !important;
  }
  header span[class*="uppercase"]{
    font-size:.52rem !important;
    letter-spacing:.055em !important;
    white-space:nowrap !important;
  }
  header button[class*="min-h"]{
    padding-left:.62rem !important;
    padding-right:.62rem !important;
    font-size:.82rem !important;
    min-height:2.5rem !important;
  }
  header button[class*="min-h"] svg{
    width:1rem !important;
    height:1rem !important;
  }

  /* 18c — hero pill on one line */
  main > *:first-child p:first-of-type{
    font-size:.56rem !important;
    letter-spacing:.09em !important;
    padding:.34rem .7rem !important;
    gap:.35rem !important;
    max-width:100% !important;
  }
  main > *:first-child p:first-of-type svg{
    width:.78rem !important;
    height:.78rem !important;
    flex-shrink:0 !important;
  }
}

/* 18d — the utility bar rule above keyed off :first-of-type, which the
   Next.js body does not satisfy. Target the bar's own class instead. */
@media (max-width:640px){
  body > div[class*="bg-navy-950"] > .wrap{
    flex-wrap:nowrap !important;
    min-height:0 !important;
    padding-top:.55rem !important;
    padding-bottom:.55rem !important;
    gap:.5rem !important;
  }
  body > div[class*="bg-navy-950"] a[href^="tel"]{
    font-size:.88rem !important;
    gap:.38rem !important;
    white-space:nowrap !important;
  }
  body > div[class*="bg-navy-950"] a[href^="tel"] svg{
    width:.92rem !important;
    height:.92rem !important;
    flex-shrink:0 !important;
  }
  body > div[class*="bg-navy-950"] button[aria-pressed]{
    font-size:.72rem !important;
    gap:.3rem !important;
    padding:.28rem .48rem !important;
    white-space:nowrap !important;
  }
  body > div[class*="bg-navy-950"] button[aria-pressed] > span{
    font-size:.64rem !important;
  }
  body > div[class*="bg-navy-950"] > .wrap > div{
    gap:.4rem !important;
  }
  /* 18e — force the hero pill onto one line.
     Scoped to section/div heroes: article pages start with <article>,
     whose first paragraph is body copy, not a pill — this rule was
     inheriting onto prose and stopping it wrapping. */
  main > section:first-child p:first-of-type,
  main > div:first-child p:first-of-type,
  main > section:first-child > .wrap p:first-of-type,
  main > div:first-child > .wrap p:first-of-type{
    /* readable first, one line second: 11px and allow a tidy wrap
       rather than shrinking to 9px to force a single line */
    white-space:normal !important;
    font-size:.62rem !important;
    line-height:1.35 !important;
    letter-spacing:.03em !important;
    padding:.34rem .62rem !important;
    text-align:left;
  }
}

/* 18f — the pill fits one line at a readable size if the tracking goes,
   not if the type goes. 52 characters, 354px column. */
@media (max-width:640px){
  main > *:first-child p:first-of-type{
    font-size:.6rem !important;
    letter-spacing:.015em !important;
    padding:.36rem .62rem !important;
    gap:.3rem !important;
  }
}

/* 18g — final mobile polish: the pill was 3px too wide (357 in 354),
   and the H1 orphaned "Love." onto its own line. */
@media (max-width:640px){
  main > *:first-child p:first-of-type{
    font-size:.58rem !important;
    letter-spacing:0 !important;
    padding:.36rem .55rem !important;
  }
}
/* keep the accent phrase in the H1 together so it never orphans */
h1 > span{white-space:nowrap}