/* ==========================================================================
   STORM BOLT ROOFING — DESIGN SYSTEM
   Storm-response • Mobile-first • Bilingual • Fast
   Palette: Shield Navy / Shield Gold / White / Cool blue-grey (follows the official SB shield logo).
   Green = confirmation only.
   Original work. No third-party design or code copied.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* ==========================================================================
     STORM BOLT ROOFING BRAND PALETTE — follows the official SB shield logo
     (2026-08-15, owner decision): shield royal/navy blues + the gold rim.
     Token NAMES are unchanged (--charcoal-* / --bolt-* and the --navy-* /
     --gold-* aliases) so nothing else had to move; only the values did.

     Contrast, measured (WCAG AA needs 4.5 for text, 3.0 for UI):
       gold #D8B748 on navy #0B2455 ....... 7.72  ✓
       navy on gold (gold CTA, navy label)  7.72  ✓
       white on navy ..................... 15.02  ✓
       gold on WHITE ...................... 1.9   ✗  <- never do this.
     That last one is why --amber-700 exists: gold is a dark-background accent,
     so small gold-ish text on a light background must use --amber-700 (#8A6D14,
     4.9:1 on white, 4.6:1 on --gray-50) instead.
     ========================================================================== */
  --charcoal-900: #071A3E;   /* deepest shield blue — hero gradient base, footer */
  --charcoal-800: #0B2455;   /* THE brand primary — shield navy (headers, bars, decals) */
  --charcoal-700: #10367C;
  --charcoal-600: #124A8A;
  --bolt-500:     #D8B748;   /* THE brand accent — shield rim gold (CTA, callout borders) */
  --bolt-400:     #E4CF6D;
  --bolt-300:     #ECD978;
  --amber-700:    #8A6D14;   /* accent-coloured SMALL TEXT on light backgrounds */
  --cream-50:     #FFF9E0;   /* brand-spec callout fill */

  /* Legacy aliases. The platform was built with navy/gold names and they are
     referenced ~344 times across these stylesheets; re-pointing the values here
     rebrands every one of those call sites at once, with no risk of missing one.
     Prefer the --charcoal-* / --bolt-* names above in anything newly written. */
  --navy-900: var(--charcoal-900);
  --navy-800: var(--charcoal-800);
  --navy-700: var(--charcoal-700);
  --navy-600: var(--charcoal-600);
  --gold-500: var(--bolt-500);
  --gold-400: var(--bolt-400);
  --gold-300: var(--bolt-300);
  --gold-700: var(--amber-700);

  --white:    #FFFFFF;
  --gray-50:  #F6F8FA;  /* cool blue-tinted grey, matches the shield blues */
  --gray-100: #EDF1F5;
  --gray-200: #DDE4EC;
  --gray-300: #C3CFDD;
  --ink:      #0E1B38;
  --ink-soft: #5A6B7B;
  --green-500:#2E9E5B;  /* confirmation / checkmarks ONLY */
  --danger:   #C0392B;

  /* Type */
  --font-head: "Archivo", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  /* Layout */
  --maxw: 1180px;
  --maxw-wide: 1560px;            /* premium full-width nav + hero */
  --gutter: clamp(18px, 4vw, 60px);
  /* Geometry is the other half of the brand's fingerprint. PL Roofing's system
     is soft and rounded — 14/22px cards and fully-round 999px pill buttons —
     which reads warm and traditional. Storm Bolt is the storm-response, evidence
     first brand, so its surfaces are cut square: near-flat corners, hard edges,
     the look of an instrument panel or a field report rather than a brochure.
     These three tokens carry most of the site, so sharpening them here changes
     the whole design language in one place. */
  --radius: 3px;
  --radius-sm: 2px;
  --radius-lg: 4px;
  /* The bolt in the logo leans at roughly 20 degrees. Reusing that exact angle
     for clipped corners and diagonal rules is what makes the detailing read as
     one deliberate system instead of assorted decoration. */
  --bolt-cut: 14px;
  /* Shadows tinted with storm charcoal (11,36,85) rather than the old navy, so
     depth reads as the same colour family as the surfaces casting it. */
  --shadow-sm: 0 1px 2px rgba(11,36,85,.06), 0 2px 6px rgba(11,36,85,.07);
  --shadow:    0 8px 24px rgba(11,36,85,.11);
  --shadow-lg: 0 22px 60px rgba(11,36,85,.20);
  --ring: 0 0 0 3px rgba(216,183,72,.42);   /* gold focus ring */
  --t: .22s cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-body);color:var(--ink);
  background:var(--white);line-height:1.6;font-size:17px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* `clip` rather than `hidden`. Both stop a sideways scrollbar, but `hidden`
     also makes the viewport a scroll CONTAINER, which silently breaks
     `position:sticky` descendants and lets script scroll content out of reach.
     `clip` just clips. */
  overflow-x:hidden;overflow-x:clip;
}
/* The admin app opts OUT of the clip entirely.
   On the public site the clip is a reasonable guard against a stray wide hero.
   In the admin app it was actively harmful: it hid every horizontal overflow
   instead of fixing it, so a too-wide toolbar or table presented as silently
   CUT-OFF text with no scrollbar and no clue — which is exactly the "clipped or
   partially hidden text" this pass was asked to eliminate. With the underlying
   causes fixed, admin pages must never need it; leaving it on would only hide
   the next regression. tools/test/responsive-overflow.check.mjs asserts that no
   admin page overflows, so this staying visible is a tested guarantee. */
body[data-portal]{overflow-x:visible}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.12;margin:0 0 .4em;color:var(--navy-800);letter-spacing:-.01em}
h1{font-size:clamp(2rem,5.2vw,3.5rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.6vw,2.5rem);font-weight:800}
h3{font-size:clamp(1.15rem,2vw,1.45rem);font-weight:700}
p{margin:0 0 1rem}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}

/* ---------- Layout helpers ---------- */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding:clamp(56px,7.5vw,104px) 0}
.section--tight{padding:clamp(32px,5vw,56px) 0}
.section--navy{background:var(--navy-800);color:#E9ECF2}
.section--navy h2,.section--navy h3{color:#fff}
.section--gray{background:var(--gray-50)}
.center{text-align:center}
/* Spec strip — key/value facts set like a datasheet. Storm Bolt's whole pitch is
   "we write down what is actually there", so stating the company's own facts in
   the same register is on-brand, and it fills the slot where PL Roofing's team
   flyers used to sit without pretending to be photography we do not have. */
.specs{
  list-style:none;margin:36px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14);
}
.specs__item{
  display:flex;flex-direction:column;gap:5px;
  padding:18px 20px;background:var(--charcoal-800);
}
.specs__k{
  font-family:var(--font-head);font-weight:700;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bolt-400);
}
.specs__v{font-weight:600;color:#fff;font-size:1rem;line-height:1.35}
.section--gray .specs{background:var(--gray-200);border-color:var(--gray-200)}
.section--gray .specs__item{background:#fff}
.section--gray .specs__k{color:var(--amber-700)}
.section--gray .specs__v{color:var(--ink)}

/* Section label, set like an annotation on a field report: the rule runs out of
   the text rather than sitting under it, which is what stops these reading as
   the same soft centred eyebrow every roofing site uses. */
.eyebrow{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--font-head);font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;font-size:.76rem;
  color:var(--amber-700);margin-bottom:.6rem;
}
.eyebrow::after{
  content:"";display:block;width:clamp(22px,4vw,54px);height:2px;
  background:var(--bolt-500);flex:none;
}
.center .eyebrow::before{
  content:"";display:block;width:clamp(22px,4vw,54px);height:2px;
  background:var(--bolt-500);flex:none;
}
.section--navy .eyebrow{color:var(--gold-400)}
.lede{font-size:1.12rem;color:var(--ink-soft);max-width:62ch}
.center .lede{margin-inline:auto}
.section--navy .lede{color:#AEB6C4}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-head);font-weight:700;font-size:1rem;
  padding:.92em 1.5em;border-radius:var(--radius-sm);border:2px solid transparent;
  transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t);
  line-height:1;white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
/* Primary CTA. The marker bar on the leading edge is the brand's signature on
   every button, and it is drawn as an inset box-shadow rather than a clip-path
   or a pseudo-element on purpose: clip-path would also clip the :focus-visible
   ring, which would leave keyboard users with no visible focus at all. */
.btn--gold{
  background:var(--gold-500);color:var(--navy-900);
  box-shadow:inset 5px 0 0 0 var(--charcoal-800), var(--shadow-sm);
  padding-left:1.7em;
}
.btn--gold:hover:not(:disabled){
  background:var(--gold-400);
  box-shadow:inset 5px 0 0 0 var(--charcoal-800), var(--shadow);
  transform:translateY(-2px);
}
/* the ring must still win when focused */
.btn--gold:focus-visible{box-shadow:inset 5px 0 0 0 var(--charcoal-800), var(--ring)}
.btn--navy{background:var(--navy-800);color:#fff}
.btn--navy:hover:not(:disabled){background:var(--navy-700);transform:translateY(-2px)}
/* FOCUS RING — must come AFTER the .btn--* modifiers.
   `:focus-visible` above sets the ring via box-shadow, but `.btn--gold` and
   `.btn--gold:hover` also set box-shadow at equal specificity and later in
   source, so they overwrote it: the PRIMARY button on every admin, portal and
   public page had no visible focus indicator at all (WCAG 2.4.7). An outline is
   used as well as the ring so the indicator cannot be eaten by a future
   box-shadow modifier, and so it survives forced-colors mode. */
.btn:focus-visible{outline:2px solid var(--navy-900);outline-offset:2px;box-shadow:var(--ring)}
.btn--gold:focus-visible,.btn--gold:hover:focus-visible{box-shadow:var(--ring),var(--shadow-sm)}
/* The ring fades in over .22s because .btn transitions box-shadow; every other
   control snaps. Focus feedback should be immediate. */
.btn:focus-visible{transition-property:transform,background,color}
.btn--ghost{background:transparent;color:var(--navy-800);border-color:var(--navy-200,var(--gray-300))}
.btn--ghost:hover:not(:disabled){border-color:var(--navy-700);background:var(--gray-50)}
.btn--on-navy{background:#fff;color:var(--navy-800)}
.btn--on-navy:hover:not(:disabled){background:var(--gray-100);transform:translateY(-2px)}
.btn--outline-navy{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn--outline-navy:hover:not(:disabled){border-color:#fff;background:rgba(255,255,255,.08)}
.btn--lg{font-size:1.08rem;padding:1.05em 1.8em}
.btn--block{display:flex;width:100%}
.btn svg{width:1.1em;height:1.1em;flex:none}
/* A disabled .btn looked IDENTICAL to a live one — full opacity, pointer
   cursor, hover lift. On the estimate builder's step 6 that meant "Send
   Proposal" invited a click and then did nothing at all, which reads as a
   broken app rather than as a precondition you have not met yet. Only
   .res-pager .btn[disabled] had any disabled treatment repo-wide, so this
   is the general rule the pager one was standing in for.

   pointer-events is deliberately NOT set to none: it would suppress the
   not-allowed cursor and, more importantly, kill the title/tooltip that
   several of these buttons use to explain WHY they are off. Because the
   pointer still arrives, every .btn--* :hover above carries :not(:disabled)
   — dimming alone would not have stopped a dead gold button from lifting
   and brightening under the cursor, which is the part that reads as live. */
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}

/* ---------- Global utility bar (generated markup: tools/util-bar/apply.mjs) ---------- */
/* ---------- Skip to content (tools/skip-link/apply.mjs) ----------
   WCAG 2.4.1 Bypass Blocks, Level A. Measured on the homepage: 24 focusable
   controls — language links, phone, five social icons, the whole primary nav —
   before the first word of content, repeated on every page.

   NOT display:none and NOT visibility:hidden: both remove the link from the
   tab order entirely, which is the one thing it exists to be in. It is
   positioned off-screen and rides back in on :focus.

   Kept above the util bar's own z-index so it cannot appear behind the bar it
   is meant to jump over. */
.skip-link{
  position:absolute; left:12px; top:-64px; z-index:1000;
  background:var(--navy-900); color:#fff;
  padding:12px 18px; border-radius:0 0 10px 10px;
  font-weight:700; text-decoration:none;
  transition:top .16s ease;
}
.skip-link:focus{ top:0; outline:3px solid var(--gold-400); outline-offset:2px; }
/* The landing target takes tabindex="-1" so focus can rest on it; that would
   otherwise draw a focus ring around a whole page section. */
[id="main-content"]:focus{ outline:none; }
@media (prefers-reduced-motion:reduce){ .skip-link{transition:none} }

.util-bar{--util-dot:#F97316;background:var(--navy-900);color:#CFE0F0;font-size:.82rem;
  -webkit-font-smoothing:antialiased}
.util-bar__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--maxw-wide);margin-inline:auto;
  padding:7px clamp(14px,3.4vw,44px);min-height:38px}
.util-bar a{color:#fff;text-decoration:none;transition:color var(--t)}
.util-bar a:hover{color:var(--gold-300)}
.util-bar__divider{flex:none;width:1px;height:14px;background:rgba(255,255,255,.22)}

/* language selector (left) */
.util-bar__lang{display:inline-flex;align-items:center;gap:10px}
.util-bar__globe{width:15px;height:15px;flex:none;color:#9FB6CE;display:block}
.util-bar__lang-link{font-weight:700;letter-spacing:.04em;color:#9FB6CE;
  padding:3px 2px;line-height:1;border-radius:5px;position:relative}
/* 23px tall at 390px even with the mobile padding bump below — one pixel under
   the 24px floor, which is a silly reason to fail. Widened out of flow rather
   than with another padding step, for the wrap reason described on the social
   icons. Vertical only: these sit 10px apart horizontally and are already
   wider than 24px. */
.util-bar__lang-link::after{content:"";position:absolute;left:0;right:0;top:-1px;bottom:-1px}
.util-bar__lang-link:hover{color:#fff}
.util-bar__lang-link.is-current{color:#fff}
.util-bar__lang-link.is-current:hover{color:#fff;cursor:default}

/* contact + social (right) */
.util-bar__contact{display:inline-flex;align-items:center;gap:14px;min-width:0}
.util-bar__phone{display:inline-flex;align-items:center;gap:9px;font-weight:700;white-space:nowrap;
  padding:3px 2px;border-radius:5px}
.util-bar__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--util-dot);
  box-shadow:0 0 0 3px rgba(249,115,22,.22)}
.util-bar__phone-label{color:#CFE0F0;font-weight:600}
.util-bar__phone:hover .util-bar__phone-label{color:var(--gold-300)}
.util-bar__phone-num{color:#fff}
.util-bar__social{display:inline-flex;align-items:center;gap:15px}
.util-bar__social a{display:inline-flex;color:#CFE0F0;line-height:0;position:relative}
.util-bar__social a:hover{color:var(--gold-300)}
.util-bar__social svg{width:16px;height:16px;display:block}
/* These are 16x16 — the smallest tap targets on the public site, on every
   page, and WCAG 2.2 SC 2.5.8 (AA) asks for 24x24. Measured at 390px.

   Same out-of-flow trick as .trustbar__link, and for the same reason: this bar
   is documented three rules down as needing "a clean two-row wrap, never
   overflow" at 560px, so growing the icons with padding risks a third row on
   the narrowest phones. An absolutely-positioned ::after changes no layout at
   all.

   -4px takes each icon to exactly 24x24. The flex gap is 15px on desktop and
   12px at 900px, so even at the tighter setting the extended targets keep 4px
   of clear space and cannot swallow a tap meant for the next icon. */
.util-bar__social a::after{content:"";position:absolute;inset:-4px}

/* tablet: tighten spacing */
@media (max-width:900px){
  .util-bar__inner{gap:12px}
  .util-bar__contact{gap:11px}
  .util-bar__social{gap:12px}
}
/* mobile: keep everything visible, allow a clean two-row wrap, never overflow */
@media (max-width:560px){
  .util-bar{font-size:.8rem}
  .util-bar__inner{flex-wrap:wrap;justify-content:center;gap:6px 14px;padding:6px 12px}
  .util-bar__lang,.util-bar__contact{justify-content:center}
  .util-bar__contact{flex-wrap:wrap;gap:8px 12px;row-gap:6px}
  .util-bar__lang-link,.util-bar__phone{padding:5px 4px}
}
@media (max-width:360px){
  .util-bar__contact>.util-bar__divider{display:none}
}

.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--gray-200);box-shadow:0 4px 20px rgba(11,36,85,.05);transition:box-shadow var(--t),border-color var(--t),background var(--t)}
.site-header.is-scrolled{background:rgba(255,255,255,.97);box-shadow:0 8px 30px rgba(11,36,85,.09)}
/* Full-width header: the nav spans the entire viewport (logo hard-left, Login
   hard-right) with only professional safety padding. Header only — the rest of
   the site keeps its centered max-width. */
.site-header > .container{max-width:none;width:100%;padding-inline:clamp(24px,2.6vw,40px)}
.nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,44px);justify-content:space-between;padding-block:15px}

/* Brand */
.brand{display:flex;align-items:center;gap:13px;flex:none;font-family:var(--font-head);font-weight:800;color:var(--navy-800);font-size:1.04rem;line-height:1.1;letter-spacing:-.01em;white-space:nowrap}
.brand img{height:46px;width:auto}
.brand span{display:flex;flex-direction:column}
.brand small{font-weight:700;color:var(--gold-700);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;margin-top:4px}

/* Primary nav (dropdown mega-nav) */
.nav__menu{display:flex;align-items:center;gap:clamp(12px,1.8vw,26px);flex:1;justify-content:center;min-width:0}
.nav__links{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav__top{display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;font-family:inherit;position:relative;padding:.5em .62em;border-radius:8px;font-weight:600;font-size:.92rem;color:var(--navy-700);white-space:nowrap;transition:color var(--t)}
.nav__links > li > a{position:relative;display:inline-block;padding:.5em .62em;border-radius:8px;font-weight:600;font-size:.92rem;color:var(--navy-700);white-space:nowrap;transition:color var(--t)}
.nav__top:hover,.nav__top:focus-visible,.nav__links > li > a:hover{color:var(--navy-900)}
.nav__top .caret{width:10px;height:10px;flex:none;transition:transform var(--t)}
.has-drop:hover .nav__top .caret,.has-drop.open .nav__top .caret{transform:rotate(180deg)}
.nav__top::after,.nav__links > li > a::after{content:"";position:absolute;left:.62em;right:.62em;bottom:.18em;height:2px;border-radius:2px;background:var(--gold-500);transform:scaleX(0);transition:transform var(--t)}
.nav__top:hover::after,.has-drop.open .nav__top::after,.nav__links > li > a:hover::after{transform:scaleX(1)}
/* Language toggle pill */
.nav__lang > a{margin-left:6px;padding:.42em .8em;border:1px solid var(--gray-300);border-radius:var(--radius-sm);font-weight:700;font-size:.8rem;letter-spacing:.05em;color:var(--navy-700)}
.nav__lang > a::after{display:none}
.nav__lang > a:hover{background:var(--navy-800);border-color:var(--navy-800);color:#fff}

/* Dropdown panels */
.has-drop{position:relative}
.nav__drop{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;background:#fff;border:1px solid var(--gray-200);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;display:grid;gap:1px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:80}
.has-drop:last-child .nav__drop{left:auto;right:0}
/* Contact is a LINKED dropdown near the right edge → open it leftward so the
   250px panel never overflows the viewport. On desktop the panel opens on
   hover/focus, so the mobile-only disclosure toggle is hidden here. */
.has-drop--linked > .nav__drop{left:auto;right:0}
.nav__submenu-toggle{display:none}
.has-drop:hover .nav__drop,.has-drop:focus-within .nav__drop,.has-drop.open .nav__drop{opacity:1;visibility:visible;transform:none}
.nav__drop a{display:block;padding:.6em .8em;border-radius:9px;font-size:.9rem;font-weight:600;color:var(--navy-700);white-space:nowrap;transition:background var(--t),color var(--t)}
.nav__drop a::after{display:none}
.nav__drop a:hover{background:var(--gray-50,#f4f7fa);color:var(--navy-900)}
.nav__drop--2col{grid-template-columns:1fr 1fr;min-width:380px}
.nav__menu-cta{display:none}
.nav__cta-item{display:none}  /* inline Financing/Call Now pills: desktop-only (drawer uses nav__menu-cta) */

/* Active-page state — persistent gold underline on the section, highlighted item */
.nav__top.is-active,.nav__links > li > a.is-active{color:var(--navy-900)}
.nav__top.is-active::after,.nav__links > li > a.is-active::after{transform:scaleX(1)}
.nav__drop a[aria-current="page"]{background:var(--gray-50,#f4f7fa);color:var(--navy-900);font-weight:700}

/* CTA cluster (desktop right) — Login only. The gold Free Inspection pill that
   used to sit here was removed: every page already carries its own Free
   Inspection call to action in the body, and the drawer keeps one for phones. */
.nav__cta{display:flex;align-items:center;gap:12px;flex:none}
.nav__login{display:inline-flex;align-items:center;gap:6px}
.nav__login svg{width:16px;height:16px}
.nav__phone{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--navy-800);font-size:.92rem;white-space:nowrap}
.nav__phone svg{width:17px;height:17px}
.nav__toggle{display:none;border:1px solid var(--gray-300);background:#fff;border-radius:10px;padding:9px;line-height:0;cursor:pointer}
.nav__toggle span{display:block;width:22px;height:2px;background:var(--navy-800);margin:4px 0;transition:var(--t)}
@media (max-width:1340px){.nav__phone{display:none}}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--navy-900);color:#fff;overflow:hidden;isolation:isolate;min-height:88vh;display:grid;align-items:center}
/* Hero media layer (image now, video when a file is added) */
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--navy-900)}
.hero__media-img,.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero__media-img{animation:heroKen 26s ease-in-out infinite alternate;transform-origin:center}
.hero__video{opacity:0;transition:opacity .9s ease}
.hero__video.is-playing{opacity:1}
@keyframes heroKen{from{transform:scale(1.06)}to{transform:scale(1.2) translate(-2%,-1.5%)}}
/* Readability + brand overlays above the media, below the content (z-index:2) */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(104deg,rgba(11,36,85,.94) 0%,rgba(10,31,58,.82) 46%,rgba(16,42,78,.58) 100%),linear-gradient(180deg,rgba(11,36,85,.25) 0%,transparent 28% 62%,rgba(11,36,85,.5) 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(900px 500px at 85% -10%,rgba(216,183,72,.22),transparent 60%)}
.hero .container{position:relative;z-index:2;max-width:var(--maxw-wide);display:grid;grid-template-columns:minmax(0,540px) minmax(60px,1fr) minmax(0,392px);gap:clamp(28px,4vw,72px);align-items:center;padding-block:clamp(56px,7vw,108px)}
/* Inner-page heroes. Everything above is the HOMEPAGE hero — 88vh tall, a
   three-column container grid, two full-bleed gradient overlays. The comment
   further down says inner heroes are "untouched", but only the LATER
   .hero--home rules were ever scoped: the base .hero rules above still applied,
   so events / sponsorships / careers / training laid their crumbs, eyebrow,
   headline and buttons out across the homepage's three columns at desktop and
   stood 88vh tall. These four lines are the missing half of that scoping. */
.hero--inner{min-height:0;display:block}
.hero--inner::before,.hero--inner::after{display:none}
.hero--inner .container{display:block;max-width:var(--maxw);padding-block:0}
.hero__copy{grid-column:1}
.hero__visual{grid-column:3}
/* Storm Bolt headline treatment. The brand direction asks for ALL CAPS primary
   headings and more weight than PL Roofing carries. 800 is the real ceiling —
   Plus Jakarta Sans is loaded at 600/700/800 and has no 900, so asking for one
   would just trigger the browser's synthetic bold, which smears the letterforms
   at display size. The extra heft comes from the caps instead, with the letter
   tracking opened back toward zero: caps on a tight negative track close up
   their counters and turn to mush once the clamp scales them up. */
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-head);font-weight:800;
  text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;
  color:var(--bolt-400);margin-bottom:.85rem;
}
/* the bolt tick that opens the eyebrow — brand motif, not decoration */
.hero__eyebrow::before{
  content:"";flex:none;width:.62em;height:1.05em;background:var(--bolt-500);
  clip-path:polygon(58% 0,0 58%,42% 58%,30% 100%,100% 40%,52% 40%);
}
.hero h1{
  color:#fff;text-transform:uppercase;font-weight:800;
  letter-spacing:.005em;line-height:1.06;
  /* Caps eat roughly a third more width than sentence case, so the shared h1
     clamp overflowed this column and left a one-word last line. Slightly
     smaller ceiling + balanced wrapping keeps the rag even. */
  font-size:clamp(1.9rem,4.4vw,3.05rem);
  text-wrap:balance;
}
/* keep the accent phrase intact rather than letting it split across lines */
.hero h1 .accent{white-space:nowrap}
.hero h1 .accent{color:var(--bolt-400)}
.hero__sub{font-size:1.18rem;line-height:1.62;color:#C8D7E8;max-width:54ch;margin-bottom:1.85rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:0 12px;margin-bottom:calc(1.4rem - 12px)}
.hero__cta .btn{margin-bottom:12px}
.hero__cta-break{flex-basis:100%;height:0;margin:0;padding:0}
@media (max-width:1000px){.hero__cta-break{display:none}}
.hero__trust{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.86rem;color:#AFC2D8;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.hero__trust span{display:inline-flex;align-items:center;gap:6px}
.hero__trust .dot{color:var(--gold-400)}

/* Apollo-style hero card (links to the 60-second estimate tool) */
.hero-card{display:block;text-decoration:none;border-radius:20px;overflow:hidden;background:rgba(11,36,85,.55);border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 60px rgba(0,0,0,.42);max-width:382px;margin-inline:auto;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.hero-card:hover,.hero-card:focus-visible{transform:translateY(-5px);box-shadow:0 32px 74px rgba(0,0,0,.5);border-color:rgba(216,183,72,.55)}
.hero-card__media{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;margin:12px 12px 0;border-radius:14px}
.hero-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.hero-card__badge{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;background:rgba(8,23,45,.93);border:1px solid rgba(255,255,255,.14);border-radius:13px;padding:9px 20px;text-align:center;box-shadow:0 12px 28px rgba(0,0,0,.45);z-index:2}
.hero-card__badge small{display:block;font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-400)}
.hero-card__badge b{display:block;font-family:var(--font-head);font-weight:800;font-size:1.78rem;color:#fff;line-height:1.04;margin:2px 0}
.hero-card__badge em{font-style:normal;font-size:.64rem;color:#C8D7E8;font-weight:600}
.hero-card__scan{position:absolute;left:13%;right:13%;top:47%;bottom:13%;border:2px dashed rgba(255,255,255,.9);border-radius:6px;pointer-events:none;z-index:1}
.hero-card__scan i{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--gold-500)}
.hero-card__scan i:nth-child(1){top:-5px;left:-5px}.hero-card__scan i:nth-child(2){top:-5px;right:-5px}
.hero-card__scan i:nth-child(3){bottom:-5px;left:-5px}.hero-card__scan i:nth-child(4){bottom:-5px;right:-5px}
.hero-card:hover .hero-card__media img{transform:scale(1.05)}
.hero-card__bar{display:flex;align-items:center;gap:15px;padding:18px 20px}
.hero-card__icon{flex:none;width:48px;height:48px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.25);transition:transform .25s ease}
.hero-card__icon svg{width:20px;height:20px;fill:none;stroke:var(--navy-800);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.hero-card:hover .hero-card__icon{transform:translate(2px,-2px)}
.hero-card__text{color:#fff;font-family:var(--font-head);font-weight:800;font-size:1.14rem;line-height:1.18}
.hero-card__text small{display:block;font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.01em;color:#C8D7E8;margin-bottom:4px}

/* ---------- Homepage hero (wide, cinematic, side-to-side) ---------- */
/* Scoped to .hero--home so inner-page heroes (.hero--inner) are untouched.
   Equal specificity to base .hero rules + placed after them = wins on desktop;
   the ≤1000 media query below (later in source) still collapses it on mobile. */
.hero--home{min-height:clamp(720px,90vh,920px)}
.hero--home .container{max-width:1560px;width:100%;grid-template-columns:minmax(0,660px) minmax(36px,1fr) minmax(0,540px);gap:clamp(30px,4vw,72px)}
.hero--home h1{font-size:clamp(2.3rem,4.6vw,3.7rem);line-height:1.04;letter-spacing:-.02em;margin-bottom:.45rem}
.hero--home .hero__sub{max-width:37rem}
/* Secondary headline */
.hero__lead{font-family:var(--font-head);font-weight:800;font-size:clamp(1.18rem,1.95vw,1.62rem);line-height:1.18;color:var(--gold-300);margin:.2rem 0 1.05rem}
.hero__lead span{display:block;color:#E9ECF2;font-weight:700;font-size:.78em;margin-top:5px}
/* Larger estimate card + price overlay */
.hero--home .hero-card{max-width:540px}
.hero-card__price{position:absolute;top:15px;left:15px;right:15px;z-index:2;background:rgba(8,23,45,.86);border:1px solid rgba(255,255,255,.16);border-radius:15px;padding:13px 16px 12px;text-align:center;box-shadow:0 16px 38px rgba(0,0,0,.42);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.hero-card__price small{display:block;font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400)}
.hero-card__price b{display:block;font-family:var(--font-head);font-weight:900;font-size:clamp(1.5rem,2.4vw,1.95rem);color:#fff;line-height:1.05;margin:3px 0 2px}
.hero-card__price em{display:block;font-style:normal;font-size:.66rem;color:#C8D7E8;font-weight:600}

/* Hero quote card (phone mockup) */
.quote-card{background:#fff;color:var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:22px;max-width:360px;margin-inline:auto;position:relative}
.quote-card__top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.quote-card__badge{background:var(--navy-800);color:#fff;font-family:var(--font-head);font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:var(--radius-sm)}
.quote-card__row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px dashed var(--gray-200);font-size:.95rem}
.quote-card__row span:first-child{color:var(--ink-soft)}
.quote-card__row span:last-child{font-weight:700}
.quote-card__range{margin:14px 0 4px;text-align:center}
.quote-card__range b{display:block;font-family:var(--font-head);font-size:1.9rem;color:var(--navy-800);font-weight:800}
.quote-card__range small{color:var(--ink-soft)}
.quote-card .btn{margin-top:14px}
.quote-card__note{font-size:.72rem;color:var(--ink-soft);text-align:center;margin:.7rem 0 0}

/* ---------- Trust bar ---------- */
.trustbar{background:var(--navy-900);color:#DCE7F2}
.trustbar .grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;padding-block:22px}
.trustbar .ti{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;font-size:.82rem;font-weight:600;line-height:1.3}
.trustbar .ti svg{width:26px;height:26px;color:var(--gold-400)}
/* Every chip in both trust bars is a link (tools/trust-bar/apply.mjs). The base
   `a` rule already gives them inherited colour and no underline, so these add
   only the hover and keyboard affordance a link needs to look like one.
   Deliberately no padding, gap or display change: the strip is a wrapping flex
   row six chips wide, and adding even 4px a side pushes "Hablamos Espa&ntilde;ol"
   onto a second line in Spanish. The chips must occupy exactly the width their
   old <span> did. */
.trustbar__link{border-radius:4px;transition:color var(--t);position:relative}
/* TOUCH TARGET, WITHOUT TOUCHING THE LAYOUT.
   Measured at 390px: these chips render 22px tall, and WCAG 2.2 SC 2.5.8
   (Level AA) wants 24x24 CSS px. They fail by 2px on the width where nearly
   all of this site's traffic is.

   The comment above forbids the obvious fix, and rightly — padding of even 4px
   a side re-wraps the Spanish strip. But that constraint is about WIDTH, and
   what fails here is HEIGHT. An absolutely-positioned ::after is out of flow:
   it adds no padding, no gap, no display change, and the chip occupies exactly
   the width its old <span> did. `position:relative` with no offsets only
   creates the containing block; it moves nothing.

   Verified on /contact.html and /es/contact.html at 390px, before and after:
   every chip's left/top/width/height identical to the pixel, 4 rows in English
   and 5 in Spanish both ways, "Hablamos Español" still on its own line.

   -2px each way takes the target to 26px. The row pitch when the strip wraps
   is 30px, so adjacent rows keep 4px of clear space — going to the full 44px
   would overlap the row above and make the strip harder to use, not easier. */
.trustbar__link::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
.trustbar__link:hover,a.ti:hover{color:var(--gold-300)}
a.ti{border-radius:10px;transition:color var(--t)}
a.ti:hover svg{color:var(--gold-300)}
.trustbar__link:focus-visible,a.ti:focus-visible{outline:2px solid var(--gold-300);outline-offset:3px;color:var(--gold-300)}

/* ---------- Cards / grids ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
/* A grid item's default min-width is auto, so a 1fr track floors at the item's
   min-content and silently resolves LARGER than its container. This is not a
   mobile-only problem, which is where it was first patched:

     at 345px  /financing.html   track computed 358px in a 309px box   (+31px)
     at 753px  /es/free-inspection.html  tracks computed 340px + 369px
               instead of two equal ones                               (+27px)

   The second only shows between 761px and roughly 900px, where the grid is
   still two columns — an iPad, which is what a rep in the field is holding.
   Scoping the fix to the phone breakpoint fixed the first and left the second.

   Verified at 345, 360, 390, 768, 1024 and 1280: page overflow 0, tracks equal
   again, and no element ends up wider than the box that holds it. */
.grid-2>*,.grid-3>*{min-width:0}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gray-300)}
.card__icon{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;background:var(--gray-100);color:var(--navy-700);margin-bottom:14px}
.card__icon svg{width:26px;height:26px}
.card h3{margin-bottom:.35em}
.card p{color:var(--ink-soft);margin-bottom:0;font-size:.96rem}
.card .card__link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:var(--gold-700);font-weight:700;font-family:var(--font-head);font-size:.95rem}
.card .card__link:hover{gap:10px;color:var(--navy-700)}

/* Starting-point cards (bold) */
.start-card{position:relative;overflow:hidden;border:0;color:#fff;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;border-radius:var(--radius-lg);background:var(--navy-700);transition:transform var(--t),box-shadow var(--t)}
.start-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.start-card.sc1,.start-card.sc2,.start-card.sc3{background-size:cover;background-position:center;background-repeat:no-repeat}
.start-card.sc1{background-image:linear-gradient(180deg,rgba(11,36,85,.4) 0%,rgba(11,36,85,.92) 78%),url('../img/cards/card-inspection.jpg?v=2');background-image:linear-gradient(180deg,rgba(11,36,85,.4) 0%,rgba(11,36,85,.92) 78%),image-set(url('../img/cards/card-inspection.webp?v=2') type('image/webp'),url('../img/cards/card-inspection.jpg?v=2') type('image/jpeg'))}
.start-card.sc2{background-image:linear-gradient(180deg,rgba(11,36,85,.4) 0%,rgba(11,36,85,.92) 78%),url('../img/cards/card-storm.jpg?v=2');background-image:linear-gradient(180deg,rgba(11,36,85,.4) 0%,rgba(11,36,85,.92) 78%),image-set(url('../img/cards/card-storm.webp?v=2') type('image/webp'),url('../img/cards/card-storm.jpg?v=2') type('image/jpeg'))}
.start-card.sc3{background-image:linear-gradient(180deg,rgba(11,36,85,.4) 0%,rgba(11,36,85,.92) 78%),url('../img/cards/card-repair.jpg?v=2');background-image:linear-gradient(180deg,rgba(11,36,85,.4) 0%,rgba(11,36,85,.92) 78%),image-set(url('../img/cards/card-repair.webp?v=2') type('image/webp'),url('../img/cards/card-repair.jpg?v=2') type('image/jpeg'))}
/* Step number as a stamped plate rather than a big ghosted numeral — the
   report/instrument read again, and it stays legible over any card photo. */
.start-card .num{
  position:absolute;top:0;right:0;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:34px;padding:0 10px;
  font-family:var(--font-head);font-weight:900;font-size:1.05rem;
  color:var(--charcoal-900);background:var(--bolt-500);
  letter-spacing:.02em;
  /* corner cut on the logo bolt's axis */
  clip-path:polygon(var(--bolt-cut) 0, 100% 0, 100% 100%, 0 100%);
}
.start-card h3{color:#fff}
.start-card p{color:#C8D7E8;font-size:.95rem}
.start-card .btn{margin-top:14px;align-self:flex-start}

/* Why-choose mini cards */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.why{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:20px}
.why .n{font-family:var(--font-head);font-weight:800;color:var(--gold-700);font-size:.95rem;margin-bottom:8px}
.why h3{font-size:1.05rem;margin-bottom:.3em}
.why p{font-size:.9rem;color:var(--ink-soft);margin:0}

/* Framed photo + insurance step pills */
.media-frame{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--gray-200)}
.media-frame img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.ins-steps{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.ins-steps span{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:.42em .9em;font-weight:700;font-family:var(--font-head);font-size:.9rem;color:var(--navy-800)}
.ins-steps b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--gold-500);color:var(--navy-900);font-size:.8rem}

/* Meet-the-team band */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.team-card{margin:0;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--gray-200);transition:transform var(--t),box-shadow var(--t)}
.team-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.team-card img{display:block;width:100%;height:auto;object-fit:cover;aspect-ratio:4/5}
.team-card figcaption{padding:13px 14px;font-family:var(--font-head);font-weight:700;color:var(--navy-800);font-size:.92rem;text-align:center}
@media (max-width:760px){.team-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
/* Mobile: large single-column Meet-the-Team & Education images (one mostly visible at a time, like the reviews section) */
@media (max-width:520px){.team-grid{grid-template-columns:1fr;max-width:400px;margin-inline:auto;gap:24px}}

/* Knowledge & Transparency cards (premium navy glass + gold number) */
.know-grid{margin-top:38px}
.know-card{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:30px 26px 28px;box-shadow:0 18px 44px rgba(0,0,0,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.know-card:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(0,0,0,.38);border-color:rgba(216,183,72,.45)}
.know-card__num{display:inline-block;font-family:var(--font-head);font-weight:800;font-size:1.05rem;letter-spacing:.03em;color:var(--navy-900);background:var(--gold-400);width:42px;height:42px;line-height:42px;text-align:center;border-radius:12px;margin-bottom:16px;box-shadow:0 8px 20px rgba(216,183,72,.3)}
.know-card h3{color:#fff;margin-bottom:.5em;font-size:1.18rem}
.know-card p{color:#AEB6C4;margin-bottom:0;font-size:.97rem;line-height:1.6}

/* Our Process timeline */
.process{list-style:none;margin:40px auto 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:18px;position:relative;max-width:1120px}
.process::before{content:"";position:absolute;top:33px;left:9%;right:9%;height:3px;background:linear-gradient(90deg,var(--gold-300),var(--gold-500));border-radius:3px;z-index:0}
.proc-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.proc-step__icon{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--gold-400);color:var(--navy-700);box-shadow:var(--shadow-sm)}
.proc-step__icon svg{width:32px;height:32px}
.proc-step__n{margin-top:12px;font-family:var(--font-head);font-weight:800;color:var(--gold-700);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.proc-step h3{font-size:1rem;margin:.25em 0 .2em}
.proc-step p{font-size:.85rem;color:var(--ink-soft);margin:0}
@media (max-width:1000px){.process{grid-template-columns:repeat(3,1fr);gap:30px 18px;max-width:640px}.process::before{display:none}}
@media (max-width:560px){.process{grid-template-columns:repeat(2,1fr);gap:26px 14px}}

/* Financing monthly-payment illustrator */
.fin-calc{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:24px}
.fin-calc h3{margin-bottom:.2em}
.fin-result{background:var(--navy-800);color:#fff;border-radius:var(--radius);padding:18px 20px;margin:16px 0}
.fin-result__pay{text-align:center;margin-bottom:12px}
.fin-result__pay small{color:#AFC2D8;display:block;font-size:.8rem}
.fin-result__pay b{font-family:var(--font-head);font-size:2.3rem;color:var(--gold-400);font-weight:800;line-height:1.1}
.fin-result__rows{display:grid;gap:7px;border-top:1px solid rgba(255,255,255,.12);padding-top:12px;font-size:.92rem}
.fin-result__rows>div{display:flex;justify-content:space-between;gap:12px}
.fin-result__rows span:first-child{color:#AFC2D8}
.fin-result__rows span:last-child{font-weight:700}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:step}
/* 4-step pages: 4 columns on desktop only, so the ≤1000px/≤760px collapses below still apply */
@media (min-width:1001px){.steps--4{grid-template-columns:repeat(4,1fr)}}
.step{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:20px;position:relative}
.step::before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--navy-800);color:#fff;font-family:var(--font-head);font-weight:800;margin-bottom:12px}
.step h3{font-size:1.02rem;margin-bottom:.25em}
.step p{font-size:.88rem;color:var(--ink-soft);margin:0}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ga{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--gray-100);border:1px solid var(--gray-200)}
.ga img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.ga:hover img{transform:scale(1.05)}
.ga__tag{position:absolute;left:12px;top:12px;background:rgba(11,36,85,.82);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:var(--radius-sm)}
.ga__ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-soft);font-size:.85rem;text-align:center;padding:16px}
/* Auto-revolving project marquee (homepage "Our Work") — scales as more cards are added */
.marquee{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.marquee::-webkit-scrollbar{display:none}
.marquee.is-live{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.marquee__track{display:flex;width:max-content}
.marquee__track .ga{flex:0 0 340px;width:340px;margin-right:14px}
.marquee.is-live .marquee__track{animation:marquee-scroll var(--marquee-dur,42s) linear infinite}
.marquee.is-live:hover .marquee__track,.marquee.is-live:focus-within .marquee__track,.marquee.is-live:active .marquee__track{animation-play-state:paused}
@keyframes marquee-scroll{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (max-width:640px){.marquee__track .ga{flex:0 0 270px;width:270px}}
@media (prefers-reduced-motion:reduce){.marquee.is-live{overflow-x:auto}.marquee.is-live .marquee__track{animation:none}}
/* Review flyer cards (homepage Reviews) */
.rev-flyers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
.rev-flyers figure{margin:0;border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow);border:1px solid var(--gray-200);transition:transform var(--t),box-shadow var(--t)}
.rev-flyers figure:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.rev-flyers img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
@media (max-width:900px){.rev-flyers{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.rev-flyers{grid-template-columns:1fr;max-width:380px;margin-inline:auto}}

/* ---------- Reviews ---------- */
.rating-head{display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
.stars{color:var(--gold-500);font-size:1.4rem;letter-spacing:2px}
.review{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)}
.review .stars{font-size:1.05rem;margin-bottom:10px}
.review p{font-style:italic;color:var(--ink);margin-bottom:14px}
.review .who{display:flex;align-items:center;gap:10px;font-size:.9rem}
.review .who .av{width:38px;height:38px;border-radius:50%;background:var(--navy-700);color:#fff;display:grid;place-items:center;font-family:var(--font-head);font-weight:800}
.review .who b{display:block}
.review .who small{color:var(--ink-soft)}
.pending{border:2px dashed var(--gold-400);background:#FFFDF4;color:#7a6a2e;border-radius:var(--radius);padding:14px 18px;font-size:.9rem;font-weight:600}

/* ---------- Service areas ---------- */
.areas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.areas a{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:.5em 1.05em;font-weight:600;font-size:.92rem;color:var(--navy-700);transition:var(--t)}
.areas a:hover{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto}
.faq details{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-family:var(--font-head);font-weight:700;color:var(--navy-800);display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--gold-700);transition:transform var(--t)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 22px 18px;margin:0;color:var(--ink-soft)}

/* ---------- Disclaimers / notes ---------- */
.disclaimer{background:var(--gray-50);border-left:4px solid var(--gold-500);border-radius:var(--radius-sm);padding:14px 18px;font-size:.9rem;color:var(--ink-soft)}
.disclaimer strong{color:var(--navy-800)}
.section--navy .disclaimer{background:rgba(255,255,255,.06);color:#C8D7E8}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(140deg,var(--navy-800),var(--navy-600));color:#fff;text-align:center;border-radius:var(--radius-lg);padding:clamp(32px,5vw,56px);position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 80% 120%,rgba(216,183,72,.25),transparent 60%)}
.cta-band > *{position:relative;z-index:2}
.cta-band h2{color:#fff}
.cta-band .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-900);color:#AFC2D8;font-size:.92rem}
.site-footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:30px;padding-block:54px}
.site-footer h4{color:#fff;font-size:1rem;margin-bottom:14px;letter-spacing:.02em}
.site-footer a{color:#C7D6E6;display:inline-block;padding:3px 0}
.site-footer a:hover{color:var(--gold-300)}
.site-footer ul{list-style:none;margin:0;padding:0}
/* width:auto is load-bearing: the markup carries width="512" height="512", so without
   it the intrinsic width wins and the badge renders 263x48 (squashed flat). */
.foot-brand img{height:56px;width:auto;margin-bottom:12px}
.foot-contact li{display:flex;gap:9px;margin-bottom:8px;align-items:flex-start}
.foot-contact svg{width:17px;height:17px;color:var(--gold-400);flex:none;margin-top:3px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-block:18px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:.82rem;color:#7F97B0}
.foot-social{display:flex;gap:10px}
.foot-social a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08)}
.foot-social svg{width:17px;height:17px}

/* ---------- Sticky mobile bar ---------- */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--gray-200);
  box-shadow:0 -6px 20px rgba(11,36,85,.18)}
.stickybar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:#fff;color:var(--navy-800);font-weight:700;font-size:.74rem;padding:9px 4px;font-family:var(--font-head)}
.stickybar a svg{width:20px;height:20px}
.stickybar a.is-primary{background:var(--gold-500);color:var(--navy-900)}
.stickybar a.is-call{background:var(--navy-800);color:#fff}

/* ---------- Calculator ---------- */
.calc-wrap{max-width:680px;margin-inline:auto}
.calc{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.calc__bar{height:6px;background:var(--gray-100)}
.calc__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-400),var(--gold-500));width:16%;transition:width .35s ease}
.calc__head{padding:22px 26px 0;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.calc__step-label{font-family:var(--font-head);font-weight:800;color:var(--gold-700);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.calc__body{padding:18px 26px 8px}
.calc__body h2{font-size:1.45rem}
.calc__foot{display:flex;justify-content:space-between;gap:12px;padding:18px 26px 26px;border-top:1px solid var(--gray-100);margin-top:8px}
.step-panel{display:none;animation:fade .3s ease}
.step-panel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-family:var(--font-head);color:var(--navy-800);margin-bottom:6px;font-size:.95rem}
.field .hint{font-weight:500;color:var(--ink-soft);font-size:.82rem}
.field input,.field select,.field textarea{
  width:100%;padding:.8em .9em;border:1.5px solid var(--gray-300);border-radius:10px;font-size:1rem;font-family:inherit;color:var(--ink);background:#fff;transition:border-color var(--t),box-shadow var(--t)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold-500);box-shadow:var(--ring);outline:none}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.opt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.opt-grid--3{grid-template-columns:repeat(3,1fr)}
.opt{position:relative}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:flex;align-items:center;gap:10px;justify-content:center;text-align:center;min-height:58px;padding:12px;border:1.5px solid var(--gray-300);border-radius:12px;font-weight:600;color:var(--navy-700);transition:var(--t);font-size:.95rem;height:100%}
.opt input:checked + span{border-color:var(--gold-500);background:#FFFBEF;color:var(--navy-900);box-shadow:inset 0 0 0 1px var(--gold-500)}
.opt input:focus-visible + span{box-shadow:var(--ring)}

.toggle-row{display:flex;gap:10px}
.toggle-row .opt{flex:1}

.check{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--ink-soft);background:var(--gray-50);border:1px solid var(--gray-200);border-radius:10px;padding:12px}
.check input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--gold-500)}

.uploader{border:2px dashed var(--gray-300);border-radius:12px;padding:24px;text-align:center;color:var(--ink-soft);cursor:pointer;transition:var(--t)}
.uploader:hover{border-color:var(--gold-500);background:var(--gray-50)}
.uploader svg{width:34px;height:34px;color:var(--gold-500);margin-bottom:6px}
.uploader input{display:none}
.file-list{list-style:none;margin:12px 0 0;padding:0;font-size:.85rem}
.file-list li{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--gray-100)}

/* Result */
.result{text-align:center}
.result__check{width:62px;height:62px;border-radius:50%;background:rgba(46,158,91,.12);color:var(--green-500);display:grid;place-items:center;margin:0 auto 14px}
.result__check svg{width:34px;height:34px}
.result__range{background:var(--navy-800);color:#fff;border-radius:var(--radius);padding:22px;margin:18px 0}
.result__range .size{color:#AFC2D8;font-size:.9rem}
.result__range .price{font-family:var(--font-head);font-weight:800;font-size:2.2rem;color:var(--gold-400);margin:.2em 0}
.result__next{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:18px 0}
.err{color:var(--danger);font-size:.85rem;margin-top:6px;font-weight:600;display:none}
.field.invalid input,.field.invalid select{border-color:var(--danger)}
.field.invalid .err{display:block}

/* ---------- Page hero (interior) ---------- */
.page-hero{background:linear-gradient(150deg,var(--navy-900),var(--navy-700));color:#fff;padding:clamp(36px,6vw,64px) 0}
.page-hero .crumbs{font-size:.82rem;color:#9FB5CC;margin-bottom:10px}
.page-hero .crumbs a:hover{color:var(--gold-300)}
.page-hero h1{color:#fff;max-width:18ch}
.page-hero p{color:#C8D7E8;max-width:60ch;font-size:1.1rem;margin-bottom:0}

/* ---------- Utilities ---------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.hide{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero .container{grid-template-columns:1fr;text-align:center;max-width:var(--maxw)}
  .hero__copy,.hero__visual{grid-column:auto}
  .hero__cta,.hero__trust{justify-content:center}
  .hero__sub{margin-inline:auto}
  .quote-card{order:-1}
  .trustbar .grid{grid-template-columns:repeat(3,1fr)}
  .grid-4,.why-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .site-footer .grid{grid-template-columns:1fr 1fr}
}
/* Header collapses to a tap/accordion mobile menu below the desktop range.
   Boundary at 1279px so the full horizontal nav shows at 1280px and up
   (keep in sync with the matchMedia check in main.js). */
@media (max-width:1279px){
  .nav{position:relative}
  .nav__toggle{display:block;order:3}
  .nav__cta{display:none}
  .nav__menu{display:none;flex:none}
  .site-header.open .nav__menu{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
    position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--gray-200);
    box-shadow:var(--shadow);border-radius:0 0 16px 16px;padding:10px var(--gutter) 18px;gap:0;
    max-height:calc(100vh - 62px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .nav__links{flex-direction:column;align-items:stretch;width:100%;gap:0}
  .nav__links > li,.has-drop{width:100%}
  .nav__top,.nav__links > li > a{width:100%;justify-content:space-between;padding:.95em .4em;font-size:1.02rem;border-bottom:1px solid var(--gray-100)}
  .nav__top{display:flex}
  .nav__top::after,.nav__links > li > a::after{display:none}
  .nav__drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;min-width:0;display:none;padding:2px 0 10px 14px;background:transparent;gap:0;z-index:auto}
  .has-drop:last-child .nav__drop{right:auto;left:auto}
  .has-drop:hover .nav__drop,.has-drop:focus-within .nav__drop{display:none}
  .has-drop.open .nav__drop{display:grid}
  /* Contact is a LINKED dropdown: the label (a link) navigates to the contact
     page, and a separate caret button toggles the submenu — so Events &
     Sponsorships stay HIDDEN inside Contact until the caret is tapped (an
     accordion, like the other menus). The label + caret share one row; the
     submenu (collapsed by default, shown via .open above) wraps full-width below. */
  .has-drop--linked{display:flex;flex-wrap:wrap;align-items:stretch}
  .has-drop--linked > .nav__top{flex:1 1 auto;width:auto;min-width:0}
  .has-drop--linked > .nav__top .caret{display:none}
  .has-drop--linked > .nav__submenu-toggle{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
    background:none;border:0;border-bottom:1px solid var(--gray-100);padding:.95em .9em;cursor:pointer;color:var(--navy-700)}
  .has-drop--linked > .nav__submenu-toggle .caret{width:13px;height:13px;transition:transform var(--t)}
  .has-drop--linked.open > .nav__submenu-toggle .caret{transform:rotate(180deg)}
  .has-drop--linked > .nav__drop{flex-basis:100%}
  .nav__drop--2col{grid-template-columns:1fr}
  .nav__drop a{padding:.62em .4em;font-size:.96rem}
  .nav__lang > a{display:inline-block;width:max-content;margin:10px 0;border-radius:var(--radius-sm)}
  .nav__menu-cta{display:flex;flex-direction:column;gap:10px;margin-top:14px}
  .nav__menu-cta .nav__phone{display:inline-flex;justify-content:center;padding:.8em;border:1px solid var(--gray-300);border-radius:10px;font-size:1rem}
  .nav__menu-cta .btn{width:100%}
}
/* Spanish nav labels (Nuestro Trabajo / Iniciar Sesión, Servicios…) are wider than English,
   so tighten the Spanish desktop nav's spacing/size just enough to keep one clean line.
   Applies across the whole desktop range (≥1280px); the hamburger drawer and the English
   header are unaffected. */
@media (min-width:1280px){
  html[lang="es"] .nav{gap:clamp(12px,1.6vw,28px)}
  html[lang="es"] .nav__top,
  html[lang="es"] .nav__links > li > a{padding:.5em .46em;font-size:.88rem}
  html[lang="es"] .nav__lang > a{padding:.4em .64em;margin-left:2px;font-size:.76rem}
  html[lang="es"] .nav__cta{gap:9px}
  html[lang="es"] .nav__cta .btn{padding:.6em .9em;font-size:.86rem}
}
/* Narrow-desktop compaction, in two stages. The top level carries EIGHT items
   (Materials/Materiales sits between Process and Our Work), and at the default
   size that row stops fitting on one line below ~1460px — the labels run under
   the brand on the left and under the Free-Inspection CTA on the right. These
   bands step the row down just enough to keep it on one clean line all the way
   to the 1280px drawer boundary. Above 1460px the header renders at full size,
   exactly as before. Measured on both languages (ES labels are the wider set).
   Re-measure these numbers if a ninth top-level item is ever added. */
@media (min-width:1280px) and (max-width:1460px){
  .nav{gap:clamp(12px,1.6vw,28px)}
  .nav__cta{gap:9px}
  .nav__cta .btn{padding:.6em .9em;font-size:.86rem}
  .nav__top,.nav__links > li > a{font-size:.86rem;padding:.5em .42em}
  html[lang="es"] .nav__top,html[lang="es"] .nav__links > li > a{font-size:.84rem;padding:.5em .38em}
}
@media (min-width:1280px) and (max-width:1360px){
  .nav__top,.nav__links > li > a{font-size:.82rem;padding:.5em .3em}
  /* Spanish carries the longest labels (Servicios · Nuestro Trabajo · Iniciar
     Sesión), so it needs one extra notch to clear 1280px. */
  html[lang="es"] .nav__top,html[lang="es"] .nav__links > li > a{font-size:.78rem;padding:.5em .22em}
  html[lang="es"] .nav__cta .btn{padding:.6em .8em;font-size:.82rem}
}
@media (max-width:760px){
  body{font-size:16px}
  /* Mobile header = brand + menu only (sticky bottom bar carries the CTA) — prevents overflow */
  .nav__cta .btn{display:none}
  .brand{font-size:.98rem}
  .brand img{height:42px}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .trustbar .grid{grid-template-columns:repeat(2,1fr)}
  .grid-4,.why-grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .site-footer .grid{grid-template-columns:1fr}
  .field--row,.opt-grid,.opt-grid--3{grid-template-columns:1fr}
  .stickybar{display:grid}
  body{padding-bottom:60px}
}
@media (max-width:480px){
  /* Long CTA labels (especially Spanish) exceed the narrow-screen content width and .btn is
     nowrap — allow a balanced wrap here so buttons never get clipped by body overflow-x:hidden */
  .btn{white-space:normal;line-height:1.25;text-align:center}
}
@media (max-width:420px){
  .why-grid,.grid-4{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ---- Shingle color visualizer ---- */
.viz{display:grid;grid-template-columns:1.55fr 1fr;gap:26px;align-items:stretch;max-width:1040px;margin:0 auto}
.viz__stage{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 18px 50px rgba(11,36,85,.18);background:#F4F7FB}
.viz__svg{display:block;width:100%;height:auto}
.viz__svg polygon,.viz__svg line{transition:fill .35s ease, stroke .35s ease}
.viz__name{position:absolute;left:16px;bottom:16px;background:rgba(11,36,85,.92);color:#fff;font-weight:700;font-size:.92rem;padding:8px 14px;border-radius:var(--radius-sm);letter-spacing:.2px;box-shadow:0 6px 16px rgba(0,0,0,.2)}
.viz__panel{background:#fff;border:1px solid var(--line,#e6e9ef);border-radius:16px;padding:24px;display:flex;flex-direction:column;justify-content:center}
.viz__swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.viz__sw{cursor:pointer;border:0;background:none;padding:0;text-align:center}
.viz__chip{display:block;width:100%;height:54px;border-radius:11px;box-shadow:inset 0 2px 6px rgba(0,0,0,.28),inset 0 -3px 7px rgba(0,0,0,.22);border:2.5px solid transparent;transition:transform .12s,border-color .12s}
.viz__sw[aria-pressed="true"] .viz__chip{border-color:var(--gold-500);transform:translateY(-2px)}
.viz__sw:hover .viz__chip{transform:translateY(-2px)}
.viz__sw small{display:block;margin-top:6px;font-size:.72rem;color:var(--ink-soft);font-weight:600;line-height:1.2}
@media(max-width:780px){.viz{grid-template-columns:1fr}}

/* ---- picture-wrapped gallery cards + clickable project cards ---- */
a.ga{text-decoration:none;color:inherit;display:block}
.ga picture{display:block;width:100%;height:100%}
.ga__cta{position:absolute;right:12px;bottom:12px;background:var(--gold-500);color:var(--navy-900);font-size:.74rem;font-weight:800;letter-spacing:.03em;padding:6px 11px;border-radius:var(--radius-sm);opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
.ga:hover .ga__cta,.ga:focus-visible .ga__cta{opacity:1;transform:none}

/* ---- project snapshot spec table ---- */
.spec{width:100%;border-collapse:collapse;margin-top:6px}
.spec th,.spec td{text-align:left;padding:9px 0;border-bottom:1px solid var(--gray-200);font-size:.92rem;vertical-align:top}
.spec th{color:var(--ink-soft);font-weight:600;width:44%}
.spec td{color:var(--navy-900);font-weight:600}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}

/* ---- trust chips ---- */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.chip{background:var(--gray-100,#eef1f5);color:var(--navy-900);font-weight:700;font-size:.85rem;padding:8px 15px;border-radius:var(--radius-sm);border:1px solid var(--gray-200,#dce1e8)}
.chip::before{content:"✓";color:var(--gold-700);font-weight:800;margin-right:6px}

/* ---- Branded illustration figure ------------------------------------------
   The house treatment for the Company/Contact scene illustrations: a gold
   frame OUTSIDE the artwork, the logo badge on the corner, and a navy caption
   bar under it — the same language as the process cards, but built in CSS so
   the logo is the one cached storm-bolt-roofing-shield-logo.png rather than four embedded copies.
   Both logo dimensions are set here on purpose: the markup carries
   width="512" height="512", and a one-axis rule would stretch it flat (the
   footer-logo bug). object-fit keeps it honest inside the square badge. ---- */
.brand-fig{margin:0;position:relative;border-radius:20px;padding:12px;
  background:linear-gradient(140deg,#ECD978,#D8B748 46%,#8d6f14);box-shadow:var(--shadow-lg)}
/* :not() is load-bearing — the logo is also a direct child, and `.brand-fig > img`
   (0,1,1) would otherwise outrank `.brand-fig__logo` (0,1,0) and blow it up to
   full width. */
.brand-fig > img:not(.brand-fig__logo){display:block;width:100%;height:auto;border-radius:12px}
.brand-fig__logo{position:absolute;top:-16px;left:-16px;z-index:2;
  width:74px;height:74px;padding:8px;border-radius:50%;background:#fff;
  object-fit:contain;border:3px solid var(--gold-500);
  box-shadow:0 10px 22px -8px rgba(11,36,85,.5)}
.brand-fig figcaption{margin-top:12px;background:var(--navy-800);border-radius:11px;
  padding:12px 18px;text-align:center;font-family:var(--font-head);font-weight:800;
  font-size:.86rem;letter-spacing:.13em;text-transform:uppercase;color:#fff;line-height:1.35}
.brand-fig figcaption b{color:var(--gold-300);font-weight:800}
/* Optional second line: a plain-language sentence under the uppercase label. */
.brand-fig figcaption small{display:block;margin-top:7px;font-family:var(--font-body);font-weight:500;font-size:.82rem;letter-spacing:0;text-transform:none;color:#C8D7E8;line-height:1.5}
@media (max-width:640px){
  .brand-fig{padding:9px;border-radius:16px}
  .brand-fig__logo{width:52px;height:52px;top:-12px;left:-12px;padding:5px;border-width:2px}
  .brand-fig figcaption{font-size:.7rem;letter-spacing:.09em;padding:9px 12px}
}

/* ---- Desktop nav (>=1441px): inline Financing / Call Now CTA pills (positions 3 & 4) ---- */
@media (min-width:1441px){
  .nav__links .nav__cta-item{display:flex;align-items:center}
  .nav__links .nav__cta-item > a{display:inline-flex;align-items:center;gap:6px;padding:.5em .95em;border-radius:var(--radius-sm);font-weight:700;font-size:.9rem;white-space:nowrap;line-height:1;transition:background var(--t),color var(--t),border-color var(--t),box-shadow var(--t)}
  .nav__links .nav__cta-item > a::after{display:none}
  .nav__fin{background:var(--gold-500);color:var(--navy-900);box-shadow:0 2px 8px rgba(216,183,72,.28)}
  .nav__fin:hover{background:var(--gold-400);color:var(--navy-900)}
  .nav__call{border:1.5px solid var(--gray-300);color:var(--navy-800)}
  .nav__call:hover{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
}

/* ============================================================
   TRUST STRIP — the six-chip band between the header and the hero.

   Lived in a <style> block on index.html, on the documented grounds that a
   single-page feature should not force a site-wide ?v= cache-bust. It is now
   on every public page, so that reasoning is inverted: inlining it would ship
   the same ~1.5KB on 124 pages, uncached, instead of once in a file the
   browser already has.

   Generated markup lives in tools/trust-bar/apply.mjs.
   ============================================================ */
.trust-bar{background:var(--navy-900);color:#fff;-webkit-font-smoothing:antialiased}
.trust-bar__list{
  list-style:none;margin:0 auto;padding:0 clamp(14px,3.4vw,44px);
  max-width:var(--maxw-wide);min-height:42px;
  display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;
  gap:clamp(14px,2.2vw,40px);
}
.trust-bar__item{display:flex;min-width:0}
.trust-bar__link,.trust-bar__static{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-weight:700;
  font-size:clamp(.74rem,1.05vw,.9rem);line-height:1.1;letter-spacing:-.005em;
  color:#fff;text-decoration:none;white-space:nowrap;
}
.trust-bar__link{padding:5px 4px;border-radius:6px;transition:color var(--t)}
.trust-bar__link:hover{color:var(--gold-300)}
.trust-bar__link:focus-visible{outline:2px solid var(--gold-300);outline-offset:2px;color:var(--gold-300)}
.trust-bar__ico{font-size:1em;line-height:1;flex:none}
/* Tablet & below: switch to an accessible 2-column grid so long labels never
   overflow the row. Every benefit stays visible; page never scrolls sideways.

   The breakpoint is 1040px, raised from the 960px this shipped with, because
   Spanish says the same six things in more letters — "Financiamiento
   Disponible" for "Financing Available".

   How it fails matters: the chips are white-space:nowrap inside flex items
   with min-width:0, so a row that no longer fits does NOT overflow the page or
   clip the anchor — the items shrink and each label spills across the gap on
   top of its neighbour. Nothing scrolls sideways, so the usual overflow checks
   see a clean page while the text is unreadable.

   Measured in an iframe with this query disabled, comparing each label's right
   edge against the next chip's box: English first collides at 900px, Spanish
   at 1000px. So 960px was already ~40px too low for Spanish and would have
   produced overlapping text in the 960–1000px band the moment the Spanish
   strip existed. 1040px clears the worse of the two languages with margin for
   font and emoji metrics that differ by platform. One breakpoint for both
   keeps the two homepages identical in behaviour. */
@media (max-width:1040px){
  .trust-bar__list{
    display:grid;grid-template-columns:1fr 1fr;
    gap:2px 14px;padding:8px clamp(14px,4vw,22px);min-height:0;
  }
  .trust-bar__item{justify-content:flex-start}
  .trust-bar__link,.trust-bar__static{
    width:100%;white-space:normal;padding:9px 4px;font-size:.82rem;line-height:1.15;
  }
}
@media (prefers-reduced-motion:reduce){
  .trust-bar__link{transition:none}
}