/* Batch 2 home lift (home page only). Loaded after styles.css.
   1. Reviews: one large pull quote on the brand ink + the rest stacked, instead of a wall of equal white cards.
   2. Section headings one step larger, tighter.
   Uses only the kit variables already on the page (--hh-ink, --hh-accent-dark). */
:root{--lf-ink:var(--hh-ink,#0e1a26);--lf-acc:var(--hh-accent-dark,#fff)}

/* ---- headings ---- */
.hx-head h2,.lx-head h2,.sec__hd h2,.sec__head h2,.ts .head h2{font-size:clamp(30px,3.7vw,52px);line-height:1.05;letter-spacing:-.022em}

/* ---- reviews: feature card + stack ---- */
@media (min-width:901px){
  .hx-s .hx-revs,.hx-s .hx-rv,.lx-s .lx-revs,.ts .revs{grid-template-columns:1.35fr 1fr;grid-auto-flow:row;align-items:stretch;gap:20px}
  .hx-s .hx-revs>:first-child,.hx-s .hx-rv>:first-child,.lx-s .lx-revs>:first-child,.ts .revs>:first-child{grid-row:1/span 2}
  .reviews__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .reviews__grid>.rev:first-child{grid-column:1/span 2;grid-row:1/span 2}
}
.hx-s .hx-revs>:first-child,.hx-s .hx-rv>:first-child,.lx-s .lx-revs>:first-child,.ts .revs>:first-child,.reviews__grid>.rev:first-child{
  background:var(--lf-ink);color:#fff;border:0;display:flex;flex-direction:column;gap:18px;padding:clamp(26px,3.2vw,46px);justify-content:flex-start;box-shadow:0 22px 50px -26px rgba(0,0,0,.55)}
.hx-s .hx-revs>:first-child blockquote,.hx-s .hx-rv>:first-child blockquote,.lx-s .lx-revs>:first-child blockquote,.ts .revs>:first-child blockquote,.reviews__grid>.rev:first-child blockquote{
  order:1;color:#fff;font-size:clamp(21px,2.1vw,30px);line-height:1.32;font-weight:560;letter-spacing:-.012em;margin:0}
.reviews__grid>.rev:first-child blockquote p{color:#fff;font-size:inherit;line-height:inherit;margin:0}
.hx-s .hx-revs>:first-child .hx-rev__hd,.hx-s .hx-rv>:first-child footer,.lx-s .lx-revs>:first-child figcaption,.ts .revs>:first-child .rev__hd,.reviews__grid>.rev:first-child figcaption{order:2;margin-top:auto;color:rgba(255,255,255,.78)}
.hx-s .hx-revs>:first-child .hx-rev__hd b,.hx-s .hx-rv>:first-child footer b,.lx-s .lx-revs>:first-child figcaption b,.ts .revs>:first-child .rev__hd b{color:#fff}
.hx-s .hx-revs>:first-child small,.ts .revs>:first-child small{color:rgba(255,255,255,.72)}
.hx-s .hx-revs>:first-child .hx-rev__av,.hx-s .hx-rv>:first-child .hx-av,.lx-s .lx-revs>:first-child .lx-av,.ts .revs>:first-child .rev__av{background:rgba(255,255,255,.14);color:#fff}
.hx-s .hx-revs>:first-child .hx-stars,.hx-s .hx-rv>:first-child .hx-stars,.lx-s .lx-revs>:first-child .lx-rev__st,.ts .revs>:first-child .stars{order:0;color:var(--lf-acc)}
.hx-s .hx-revs>:first-child .hx-rev__hd+.hx-stars{order:0}
.hx-s .hx-rv>:first-child .hx-rv__svc{background:rgba(255,255,255,.14);color:#fff}
.reviews__grid>.rev:first-child{justify-content:space-between}
.reviews__grid>.rev:first-child blockquote{font-size:clamp(24px,2.9vw,42px);line-height:1.22;margin:auto 0}
@media (max-width:900px){.reviews__grid{grid-template-columns:1fr 1fr}.reviews__grid>.rev:first-child{grid-column:1/-1}}
@media (max-width:600px){.reviews__grid{grid-template-columns:1fr}}

/* screen-enclosures reviews (same feature pattern, hand-built markup) */
.lf-revs{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:901px){.lf-revs{grid-template-columns:1.35fr 1fr}.lf-revs>:first-child{grid-row:1/span 2}}
.lf-rev{margin:0;background:#fff;border:1px solid rgba(18,64,111,.18);border-radius:6px;padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:14px}
.lf-rev__st{color:#B47A12;letter-spacing:3px;font-size:1.05rem}
.lf-rev blockquote{margin:0;font-size:1rem;line-height:1.6}
.lf-rev figcaption{margin-top:auto;font-size:.875rem;opacity:.8}
.lf-rev figcaption b{display:block;font-size:.9375rem;opacity:1}
.lf-revs>:first-child{background:var(--lf-ink);color:#fff;border:0;padding:clamp(26px,3.2vw,46px)}
.lf-revs>:first-child blockquote{font-size:clamp(20px,2vw,28px);line-height:1.34;font-weight:500;color:#fff}
.lf-revs>:first-child .lf-rev__st{color:var(--lf-acc)}
.lf-revs>:first-child figcaption{color:rgba(255,255,255,.8)}

/* the stylesheet the deploy gate reads first is this one: the site's own brand token, same value as styles.css (6 Nov 2026) */
:root{--accent:#FFC72C}
