/* americanlight.design — design system
   Brand (from logo + live theme kit): primary #2b3990 · secondary #ce2329 · accent #06315c
   Fonts: Montserrat (headings, matches logo caps) + Inter (body), self-hosted variable woff2.
   Tone system: 5 section palettes — light, mist, dark, royal, signal — each sets bg + text
   + heading + link + button tokens so any section recolors coherently. */

/* ---------- fonts ---------- */
@font-face {
  font-family: "Montserrat";
  src: url("/static/fonts/montserrat-var.06b16db7a9.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-var.3100e775e8.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root{
  --primary:#2b3990; --primary-alt:#3d4ca3;
  --secondary:#ce2329; --secondary-alt:#e24145;
  --accent:#06315c; --accent-alt:#094a84;
  --navy-ink:#0d2137;
  --paper:#ffffff; --mist:#eef2f8; --cloud:#dfe7f0; --line:#d7dfe9;

  /* spacing scale */
  --s1:4px; --s2:8px; --s3:14px; --s4:20px; --s5:28px; --s6:40px; --s7:56px; --s8:80px; --s9:112px;
  --maxw:1220px; --r:14px; --r-sm:10px;
  --head:"Montserrat",-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  --shadow-1:0 1px 3px rgba(6,49,92,.10);
  --shadow-2:0 6px 22px rgba(6,49,92,.13);
  --shadow-3:0 18px 48px rgba(6,49,92,.22);
}

/* ---------- tones ---------- */
.tone-light{ --bg:var(--paper); --ink:#2a3442; --h:var(--accent); --sub:#5a6b80;
  --link:var(--primary); --btn-bg:var(--secondary); --btn-ink:#fff; --btn2:var(--accent);
  --card-bg:#fff; --card-line:var(--line); --chip:#eef2f8; }
.tone-mist{ --bg:var(--mist); --ink:#2a3442; --h:var(--accent); --sub:#5a6b80;
  --link:var(--primary); --btn-bg:var(--secondary); --btn-ink:#fff; --btn2:var(--accent);
  --card-bg:#fff; --card-line:#cfd9e6; --chip:#fff; }
.tone-dark{ --bg:var(--accent); --ink:#c6d5e6; --h:#ffffff; --sub:#8fa9c4;
  --link:#9db9ff; --btn-bg:var(--secondary); --btn-ink:#fff; --btn2:#fff;
  --card-bg:#0a3e70; --card-line:#1c568e; --chip:#0a3e70; }
.tone-royal{ --bg:var(--primary); --ink:#d4d9f2; --h:#ffffff; --sub:#aab3e4;
  --link:#ffffff; --btn-bg:var(--secondary); --btn-ink:#fff; --btn2:#fff;
  --card-bg:#3a49a5; --card-line:#5261bb; --chip:#3a49a5; }
.tone-signal{ --bg:linear-gradient(120deg,#b31c22,var(--secondary)); --ink:#ffe3e4; --h:#ffffff; --sub:#ffc9cc;
  --link:#ffffff; --btn-bg:#ffffff; --btn-ink:var(--secondary); --btn2:#fff;
  --card-bg:#d7373d; --card-line:#e2585d; --chip:#d7373d; }

[class*="tone-"]{ background:var(--bg); color:var(--ink); }
[class*="tone-"] h1,[class*="tone-"] h2,[class*="tone-"] h3,[class*="tone-"] h4{ color:var(--h); }
[class*="tone-"] a:not(.btn){ color:var(--link); }
[class*="tone-"] .sub{ color:var(--sub); }

/* ---------- base ---------- */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h,72px) + 16px) }
html,body{ margin:0; padding:0 }
body{ font:16px/1.65 var(--body); color:#2a3442; background:var(--paper); overflow-x:hidden;
  -webkit-font-smoothing:antialiased; }
img,svg,video{ max-width:100%; display:block }
h1,h2,h3,h4{ font-family:var(--head); line-height:1.12; letter-spacing:-.01em; margin:0 0 .45em; }
h1{ font-size:clamp(30px,4.6vw,52px); font-weight:800 }
h2{ font-size:clamp(23px,3.1vw,34px); font-weight:700 }
h3{ font-size:18px; font-weight:700 }
p{ margin:0 0 1em }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(16px,4vw,36px) }
.section{ padding:clamp(var(--s6),7vw,var(--s8)) 0 }
.section-tight{ padding:var(--s6) 0 }
.lede{ font-size:clamp(16px,1.9vw,19px); max-width:66ch }
.narrow{ max-width:70ch } .narrow-col{ max-width:780px; margin-inline:auto }
.fine{ font-size:13px; opacity:.8 }
.eyebrow{ font-family:var(--head); text-transform:uppercase; letter-spacing:.14em; font-size:12.5px;
  font-weight:700; color:var(--secondary); margin:0 0 var(--s2); display:flex; align-items:center; gap:8px }
.eyebrow::before{ content:""; width:26px; height:2px; background:currentColor; display:inline-block }
.tone-dark .eyebrow,.tone-royal .eyebrow,.hero .eyebrow{ color:#ffb3b6 }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--head); font-weight:700;
  font-size:15px; background:var(--btn-bg,var(--secondary)); color:var(--btn-ink,#fff);
  border:2px solid transparent; border-radius:999px; padding:12px 24px; cursor:pointer;
  text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow:var(--shadow-1); }
.btn:hover,.btn:focus-visible{ transform:translateY(-2px); box-shadow:var(--shadow-2) }
.btn:active{ transform:translateY(0) }
.btn.ghost{ background:transparent; color:var(--btn2,var(--accent)); border-color:currentColor; box-shadow:none }
.btn.ghost:hover{ background:rgba(43,57,144,.06) }
.btn .icon{ transition:transform .18s ease } .btn:hover .icon{ transform:translateX(3px) }

/* ---------- header ---------- */
/* no backdrop-filter here: it makes the header a containing block, which
   pins the position:fixed .nav-mobile drawer inside the 64px header box */
.site-header{ position:sticky; top:0; z-index:120; background:#06315c; /* opaque: at .98 page text showed through after scrolling */
  color:#fff; transition:box-shadow .2s ease }
.site-header.elevated{ box-shadow:var(--shadow-2) }
.topbar{ background:var(--accent); border-bottom:1px solid rgba(255,255,255,.09); font-size:13px }
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; padding-top:6px; padding-bottom:6px; gap:12px }
.topbar a{ color:#c6d5e6; text-decoration:none; display:inline-flex; align-items:center; min-height:24px } .topbar a:hover{ color:#fff }
.topbar .tb-right{ display:flex; gap:18px; align-items:center }
/* touch: a 21px-tall text link is a missed tap; give it a 44px hit row */
@media (pointer:coarse){
  .topbar .wrap{ padding-top:0; padding-bottom:0 }
  .topbar a{ display:inline-flex; align-items:center; min-height:44px }
  .hdr-phone{ min-height:44px }
}
.bar{ display:flex; align-items:center; gap:26px; padding-top:12px; padding-bottom:12px }
.logo-link{ display:flex; align-items:center; color:#fff; text-decoration:none; flex:0 0 auto }
.logo-link svg{ height:52px; width:auto }
.spacer{ flex:1 }
.hdr-cta{ display:flex; align-items:center; gap:16px }
.hdr-phone{ display:flex; align-items:center; gap:8px; color:#fff; text-decoration:none; font-weight:700; font-family:var(--head); font-size:15px }
.hdr-phone .icon{ color:var(--secondary-alt) }

/* ---------- desktop mega menu ---------- */
.nav-desktop{ display:flex; gap:4px; align-items:stretch }
.nav-desktop > .nav-item{ position:relative }
.nav-desktop > .nav-item > a{ display:flex; align-items:center; gap:6px; color:#e2eaf4; text-decoration:none;
  font-size:15px; font-weight:600; font-family:var(--head); padding:12px 14px; border-radius:8px }
.nav-desktop > .nav-item > a:hover,.nav-desktop > .nav-item:focus-within > a{ background:rgba(255,255,255,.09); color:#fff }
.nav-desktop .chev{ transition:transform .2s ease }
.nav-item:hover .chev,.nav-item:focus-within .chev{ transform:rotate(180deg) }
.mega{ position:absolute; left:50%; transform:translate(-50%,8px); top:100%; min-width:640px;
  background:#fff; color:#2a3442; border-radius:var(--r); box-shadow:var(--shadow-3);
  padding:var(--s5); display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:var(--s4);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease, transform .18s ease }
.mega.mega-2{ min-width:480px; grid-template-columns:1fr 1fr }
.nav-item:hover .mega,.nav-item:focus-within .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0) }
.mega .col-h{ font-family:var(--head); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:#8393a8; margin:0 0 10px }
.mega a{ display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border-radius:10px; text-decoration:none; color:#22304a }
.mega a:hover{ background:var(--mist) }
.mega a .icon{ width:22px; height:22px; color:var(--primary); flex:0 0 auto; margin-top:2px }
.mega a b{ display:block; font-family:var(--head); font-size:14.5px; color:var(--accent) }
.mega a span{ font-size:12.5px; color:#68788e; line-height:1.45 }
.mega .mega-feature{ background:var(--accent); border-radius:12px; padding:18px; color:#c6d5e6; display:flex; flex-direction:column; justify-content:flex-end; min-height:180px; background-size:cover; background-position:center; position:relative; overflow:hidden }
.mega .mega-feature::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,49,92,.1),rgba(6,49,92,.85)) }
.mega .mega-feature > *{ position:relative }
.mega .mega-feature b{ color:#fff; font-family:var(--head) }

/* ---------- tablet menu ---------- */
.nav-tablet{ display:none }
/* ---------- mobile ---------- */
.nav-burger{ display:none; background:none; border:0; color:#fff; padding:10px; cursor:pointer }
.nav-burger .icon{ width:26px; height:26px }
.nav-mobile{ display:none }

@media (max-width:1120px){
  .nav-desktop{ display:none }
  .nav-tablet{ display:flex; gap:2px }
  .nav-tablet > a{ color:#e2eaf4; text-decoration:none; font-family:var(--head); font-weight:600; font-size:14px; padding:10px 11px; border-radius:8px }
  .nav-tablet > a:hover{ background:rgba(255,255,255,.09); color:#fff }
}
@media (max-width:820px){
  .nav-tablet{ display:none }
  .nav-burger{ display:inline-flex }
  .hdr-phone span{ display:none }
  .hdr-phone{ min-width:44px; min-height:44px; justify-content:center }
  .hdr-cta{ gap:8px }
  .hdr-cta .btn{ white-space:nowrap; padding-inline:18px }
  .logo-link svg{ height:44px }
  .nav-mobile{ display:block; position:fixed; inset:0; z-index:200; visibility:hidden; overflow:hidden; pointer-events:none }
  .nav-mobile.open{ visibility:visible; pointer-events:auto }
  .nav-mobile .scrim{ position:absolute; inset:0; background:rgba(6,20,35,.55); opacity:0; transition:opacity .22s ease }
  .nav-mobile.open .scrim{ opacity:1 }
  .drawer{ position:absolute; top:0; right:0; bottom:0; width:min(86vw,360px); background:#fff;
    transform:translateX(102%); transition:transform .26s cubic-bezier(.32,.72,.35,1);
    display:flex; flex-direction:column; overflow-y:auto; box-shadow:var(--shadow-3) }
  .nav-mobile.open .drawer{ transform:none }
  .drawer-head{ display:flex; justify-content:space-between; align-items:center; padding:16px 18px; background:var(--accent) }
  .drawer-head svg{ height:40px; width:auto; color:#fff }
  .drawer-head button{ background:none; border:0; color:#fff; cursor:pointer; padding:8px }
  .drawer nav{ padding:10px 8px 24px }
  .drawer .m-group{ border-bottom:1px solid var(--line) }
  .drawer .m-group > a, .drawer .m-toggle{ display:flex; width:100%; text-align:left; align-items:center;
    gap:10px; padding:15px 14px; font-family:var(--head); font-weight:700; font-size:16px; color:var(--accent);
    text-decoration:none; background:none; border:0; cursor:pointer }
  /* space-between belongs to the toggle rows only — it is what pushes the
     chevron to the right edge. On a plain icon+text link it pushed the LABEL
     to the right edge instead, so half the drawer read right-aligned and half
     left-aligned. */
  .drawer .m-toggle{ justify-content:space-between }
  .drawer .m-group > a{ justify-content:flex-start }
  .drawer .m-group > a .icon{ width:19px; height:19px; color:var(--primary); flex:0 0 auto }
  .drawer .m-sub{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .24s ease }
  .drawer .m-group.open .m-sub{ grid-template-rows:1fr }
  .drawer .m-sub > div{ overflow:hidden }
  .drawer .m-sub a{ display:flex; gap:10px; align-items:center; padding:11px 14px 11px 22px; color:#3c4c62; text-decoration:none; font-size:15px }
  .drawer .m-sub a .icon{ width:19px; height:19px; color:var(--primary) }
  .drawer .m-toggle .chev{ transition:transform .22s ease }
  .drawer .m-group.open .chev{ transform:rotate(180deg) }
  .drawer .m-cta{ margin:18px 14px; display:grid; gap:10px }
}

/* ---------- crumbs ---------- */
.crumbs{ font-size:13px; color:#68788e; padding:10px clamp(16px,4vw,36px); max-width:var(--maxw); margin:0 auto }
.crumbs a{ color:#68788e; text-decoration:none; display:inline-block; padding:4px 0; line-height:16px } /* item 53: 24px target (WCAG 2.5.8) */ .crumbs a:hover{ text-decoration:underline }

/* ---------- hero ---------- */
.hero{ position:relative; color:#fff; overflow:hidden; background:var(--accent) }
.hero-media{ position:absolute; inset:0 }
.hero-media img,.hero-media video{ width:100%; height:100%; object-fit:cover }
.hero-media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(6,32,59,.88) 0%, rgba(6,49,92,.72) 42%, rgba(6,49,92,.28) 100%) }
.hero .wrap{ position:relative; z-index:2; padding-top:clamp(64px,11vw,150px); padding-bottom:clamp(64px,11vw,150px) }
.hero.small .wrap{ padding-top:clamp(44px,7vw,90px); padding-bottom:clamp(44px,7vw,90px) }
.hero h1{ color:#fff; max-width:17ch; text-shadow:0 2px 18px rgba(4,20,38,.45) }
.hero .lede{ color:#dbe6f2 }
.hero .btn.ghost{ color:#fff; border-color:rgba(255,255,255,.85) }
.hero .btn.ghost:hover{ background:rgba(255,255,255,.12) }
.trust{ display:flex; flex-wrap:wrap; gap:8px 22px; color:#cddcec; font-size:14px; margin-top:var(--s4) }
.trust b{ color:#fff; font-family:var(--head) }
.hero-badges{ display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--s5) }
.hero-badge{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(6px); border-radius:12px; padding:10px 16px; font-size:13.5px; color:#e6eef6 }
.hero-badge .icon{ width:22px; height:22px; color:var(--secondary-alt) }

/* ---------- cards ---------- */
.cards3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5); margin:var(--s5) 0 }
.cards2,.cols2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5); margin:var(--s5) 0 }
.cards4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4); margin:var(--s5) 0 }
.card{ display:flex; flex-direction:column; background:var(--card-bg,#fff); border:1px solid var(--card-line,var(--line));
  border-radius:var(--r); overflow:hidden; text-decoration:none; color:inherit; position:relative;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease }
a.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:var(--primary) }
.card-img{ aspect-ratio:16/10; overflow:hidden; background:var(--cloud) }
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
a.card:hover .card-img img{ transform:scale(1.05) }
.card-body{ padding:var(--s4) var(--s4) var(--s5); display:flex; flex-direction:column; gap:8px; flex:1 }
.card-body h3{ margin:0 }
.card-body p{ margin:0; font-size:14.5px; color:var(--sub,#5a6b80); flex:1 }
.card-kicker{ display:flex; align-items:center; gap:9px; color:var(--primary); font-family:var(--head);
  font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.08em }
.card-kicker .icon{ width:20px; height:20px }
.more{ display:inline-flex; align-items:center; gap:7px; color:var(--secondary); font-weight:700;
  font-family:var(--head); font-size:14px; text-decoration:none }
.more .icon{ transition:transform .18s ease } a:hover .more .icon,.more:hover .icon{ transform:translateX(4px) }
.tone-dark .card-body p,.tone-royal .card-body p{ color:var(--ink) }

/* icon feature rows */
.feats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4); margin:var(--s5) 0 }
.feat{ background:var(--card-bg,#fff); border:1px solid var(--card-line,var(--line)); border-radius:var(--r);
  padding:var(--s4); display:flex; flex-direction:column; gap:10px; transition:transform .2s ease, box-shadow .2s ease }
.feat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-1) }
.feat .fico{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--primary),var(--accent)); color:#fff }
.feat .fico .icon{ width:24px; height:24px }
.feat b{ font-family:var(--head); color:var(--h,var(--accent)) }
.feat p{ margin:0; font-size:14px; color:var(--sub,#5a6b80) }

/* steps sequence */
.steps{ counter-reset:step; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4); margin:var(--s5) 0; padding:0; list-style:none }
.steps li{ background:var(--card-bg,#fff); border:1px solid var(--card-line,var(--line)); border-radius:var(--r); padding:var(--s4); position:relative }
.steps li::before{ counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:var(--head); font-weight:800; font-size:30px; color:var(--cloud); display:block; margin-bottom:6px }
.steps li b{ display:flex; gap:8px; align-items:center; font-family:var(--head); color:var(--h,var(--accent)); margin-bottom:4px }
.steps li b .icon{ color:var(--primary) }
.steps li{ font-size:14.5px; color:var(--sub,#5a6b80) }

/* split media/content */
.split{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(var(--s5),4vw,var(--s7)); align-items:center; margin:var(--s5) 0 }
.split.rev{ direction:rtl } .split.rev > *{ direction:ltr }
.split-media{ border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-2); position:relative }
.split-media img{ width:100%; height:100%; object-fit:cover }
.split-media .tag-chip{ position:absolute; left:14px; bottom:14px; background:rgba(6,49,92,.85); color:#fff;
  font-size:12.5px; padding:6px 12px; border-radius:999px; backdrop-filter:blur(4px) }

/* gallery */
.gallery{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3); margin:var(--s5) 0 }
.gallery a{ border-radius:var(--r-sm); overflow:hidden; display:block; position:relative; aspect-ratio:4/3; background:var(--cloud) }
.gallery a img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease }
.gallery a:hover img{ transform:scale(1.06) }
.gallery a::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(6,32,59,.45)); opacity:0; transition:opacity .3s ease }
.gallery a:hover::after{ opacity:1 }
dialog.lightbox{ border:0; border-radius:var(--r); padding:0; max-width:min(94vw,1200px); background:#0d1b2c; box-shadow:var(--shadow-3) }
dialog.lightbox::backdrop{ background:rgba(4,14,26,.82) }
dialog.lightbox img{ max-height:84vh; width:auto; max-width:100% ; margin:0 auto }
dialog.lightbox .lb-close{ position:absolute; top:10px; right:10px; background:rgba(255,255,255,.14); border:0; color:#fff; border-radius:999px; width:38px; height:38px; display:grid; place-items:center; cursor:pointer }

/* stats band */
.stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4); text-align:center }
.stat b{ display:block; font-family:var(--head); font-weight:800; font-size:clamp(26px,3.4vw,42px); color:var(--h,#fff) }
.stat span{ font-size:13.5px; color:var(--sub) }

/* tables */
.tblwrap{ overflow-x:auto; border:1px solid var(--card-line,var(--line)); border-radius:var(--r); background:var(--card-bg,#fff) }
table{ border-collapse:collapse; width:100%; font-size:15px }
th,td{ padding:12px 16px; border-bottom:1px solid var(--card-line,var(--line)); text-align:left; vertical-align:top }
thead th{ background:var(--chip,var(--mist)); font-family:var(--head); font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--sub,#68788e) }
tbody tr:last-child th,tbody tr:last-child td{ border-bottom:0 }
tbody th{ width:38%; color:var(--h,var(--accent)); font-family:var(--head); font-size:14px }

/* city grid */
.citygrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; margin:var(--s4) 0 }
.citygrid a{ display:flex; align-items:center; gap:9px; background:var(--card-bg,#fff); border:1px solid var(--card-line,var(--line));
  border-radius:10px; padding:12px 15px; text-decoration:none; color:var(--h,var(--accent)); font-family:var(--head); font-weight:600; font-size:14.5px;
  transition:border-color .18s ease, transform .18s ease }
.citygrid a:hover{ border-color:var(--primary); transform:translateY(-2px) }
.citygrid .icon{ width:18px; height:18px; color:var(--secondary) }

/* forms */
.lead-form{ background:var(--card-bg,#fff); border:1px solid var(--card-line,var(--line)); border-radius:var(--r);
  padding:var(--s5); display:flex; flex-direction:column; gap:16px; box-shadow:var(--shadow-1); color:#2a3442 }
.lead-form label{ display:flex; flex-direction:column; gap:6px; font-family:var(--head); font-weight:600; font-size:13.5px; color:var(--accent) }
.lead-form input,.lead-form select,.lead-form textarea{ font:15px/1.4 var(--body); padding:12px 14px; border:1.5px solid var(--line); border-radius:10px; background:#fff; width:100%; transition:border-color .15s ease, box-shadow .15s ease }
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(43,57,144,.15) }
@media (max-width:380px){ .lead-form select{ padding-left:10px; padding-right:8px } } /* 360px: longest option ("MagnaTrack motorized screens") clipped 5px at 14px padding */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px }

/* faq */
details.faq{ border:1px solid var(--card-line,var(--line)); border-radius:12px; margin:12px 0; background:var(--card-bg,#fff); overflow:hidden }
details.faq summary{ font-family:var(--head); font-weight:700; color:var(--accent); cursor:pointer; padding:16px 20px; display:flex; justify-content:space-between; align-items:center; gap:12px; list-style:none }
details.faq summary::-webkit-details-marker{ display:none }
details.faq summary .icon{ transition:transform .25s ease; color:var(--primary); flex:0 0 auto }
details.faq[open] summary .icon{ transform:rotate(180deg) }
details.faq p{ padding:0 20px 18px; margin:0; color:#41506a }

/* review cards */
.review{ padding:var(--s4) }
.review .stars{ color:var(--secondary); font-family:var(--head); font-weight:800; letter-spacing:.02em }
.review .who{ color:var(--sub,#68788e); font-size:13.5px; margin:8px 0 0 }

/* CTA band */
.cta-band{ text-align:center }
.cta-band .lede{ margin-inline:auto }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:var(--s4) }

/* footer */
.site-footer{ background:var(--navy-ink); color:#a9bccd; padding:var(--s7) 0 var(--s4) }
.site-footer .cols{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s5) }
.site-footer .f-logo svg{ height:64px; width:auto; color:#fff; margin-bottom:12px }
.site-footer a{ color:#c3d3e2; text-decoration:none; display:block; padding:4px 0; font-size:14.5px }
.site-footer a:hover{ color:#fff }
.site-footer .col-h{ font-family:var(--head); font-weight:700; color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px }
.site-footer .fine{ border-top:1px solid #22374c; margin-top:var(--s5); padding-top:var(--s4); color:#7e93a7; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease }
.reveal.in{ opacity:1; transform:none }

/* ---------- responsive grids/spacing ---------- */
@media (max-width:1020px){
  .cards3{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .cards4,.feats,.steps{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .gallery{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .split,.split.rev{ grid-template-columns:1fr; direction:ltr }
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5) }
  .site-footer .cols{ grid-template-columns:1fr 1fr }
}
@media (max-width:640px){
  .cards3,.cards2,.cols2,.grid2,.cards4,.feats,.steps{ grid-template-columns:1fr }
  .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .section{ padding:var(--s6) 0 }
  .hero .wrap{ padding-top:var(--s7); padding-bottom:var(--s7) }
  .trust{ gap:6px 14px; font-size:13px }
  .topbar .tb-left{ display:none }
  .site-footer .cols{ grid-template-columns:1fr }
  .cta-actions .btn{ width:100%; justify-content:center }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important }
  .reveal{ opacity:1; transform:none }
}

/* ---------- knowledge base / resources ---------- */
.kb-filters{ display:flex; flex-wrap:wrap; gap:9px; margin:var(--s4) 0 var(--s2) }
.kb-filters.kb-products{ margin-bottom:var(--s4) }
.kb-chip{ font-family:var(--head); font-weight:600; font-size:14px; padding:9px 18px; border-radius:999px;
  border:1.5px solid var(--card-line,var(--line)); background:var(--card-bg,#fff); color:var(--h,var(--accent));
  cursor:pointer; text-decoration:none; transition:border-color .18s ease, background .18s ease, color .18s ease }
.kb-chip:hover,.kb-chip:focus-visible{ border-color:var(--primary) }
a.kb-chip.on,.kb-chip.on{ background:var(--primary); border-color:var(--primary); color:#fff }
.kb-chip.sm{ font-size:12.5px; padding:7px 14px; font-weight:500 }
.kb-item[hidden]{ display:none }
.kb-article h2{ margin-top:1.6em }
.kb-article p{ font-size:16.5px; line-height:1.75 }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.cmp-table{ min-width:900px }
.cmp-table td,.cmp-table th{ padding:14px 16px }
.cmp-table tbody th{ width:auto; font-size:14.5px }
.cmp-table td.sub{ color:var(--sub,#5a6b80); font-size:14px }

/* ---------- knowledge graph page ---------- */
.graph-canvas{ width:100%; height:auto; background:var(--card-bg,#fff); border:1px solid var(--card-line,var(--line));
  border-radius:var(--r); margin:var(--s4) 0 }
.graph-legend{ display:flex; flex-wrap:wrap; gap:10px 20px; font-size:13px; color:var(--sub,#5a6b80) }
.graph-legend .gl{ display:inline-flex; align-items:center; gap:7px; text-transform:capitalize }
.graph-legend i{ width:11px; height:11px; border-radius:3px; display:inline-block }
.gl-business i{background:#ce2329} .gl-product i{background:#2b3990} .gl-service i{background:#0a7d6b}
.gl-action i{background:#e07b1f} .gl-place i{background:#6b46c1} .gl-content i{background:#0d7ab8}
.gl-page i{background:#5a6b80} .gl-meta i{background:#9aa7b8} .gl-other i{background:#c0c8d4}

/* ---- citation anchors (agent-web item 16) --------------------------------
   Section headings carry id="s-<slug>" and FAQ answers id="a-<slug>" so an
   answer engine can cite a passage rather than a page. The header is sticky,
   so a linked anchor must stop clear of it or the cited text lands underneath. */
h1[id^="s-"],h2[id^="s-"],h3[id^="s-"],section[id^="s-"],[id^="a-"].faq-answer,.faq-qa[id^="s-"]{
  scroll-margin-top:96px }

/* ---------- accessibility: visible focus, skip link, sticky-header anchors ----------
   The .btn / .kb-chip rules above used to set outline:none on :focus-visible, which
   removed the keyboard focus indicator from every button and chip on the site
   (WCAG 2.4.7 A). The ring below is defined once for everything focusable; the
   two-color stack keeps it visible on both light sections and dark/photo heroes. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--focus,#2b3990);
  outline-offset:2px;
  border-radius:4px;
  box-shadow:0 0 0 5px rgba(255,255,255,.85);
}
.hero :where(a,button):focus-visible,
.tone-dark :where(a,button):focus-visible,
.tone-royal :where(a,button):focus-visible,
.tone-signal :where(a,button):focus-visible,
.site-header :where(a,button):focus-visible,
.site-footer :where(a,button):focus-visible,
.giveawaybar :where(a,button):focus-visible{
  outline-color:#ffffff;
  box-shadow:0 0 0 5px rgba(6,49,92,.85);
}
.btn:focus-visible{ border-radius:999px }
.kb-chip:focus-visible{ border-radius:999px }

/* Skip-to-content link — first focusable element in the document. */
.skip-link{
  position:absolute; left:8px; top:-60px; z-index:2000;
  background:var(--primary); color:#fff; font-family:var(--head); font-weight:700;
  font-size:14px; padding:10px 18px; border-radius:0 0 8px 8px; text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{ top:0 }

/* Measured header heights, so in-page anchors do not land underneath it. */
:root{ --header-h:111px }
@media (max-width:900px){ :root{ --header-h:64px } }
/* The skip link moves focus to <main>; a ring around the whole document body is
   noise, and the viewport jump is the affordance. Keep the ring off this one. */
main[tabindex="-1"]:focus,main[tabindex="-1"]:focus-visible{ outline:none; box-shadow:none }

/* below 360 the one-line header button pushes the menu button off-screen; let it wrap */
@media (max-width:359px){ .hdr-cta .btn{ white-space:normal; padding-inline:14px } .hdr-cta{ gap:4px } }

/* ---- content.go pages: product lines, legal, 404 (items 87/90/91/99) ---- */
.line-intro{ max-width:72ch } .line-intro p{ font-size:17px; line-height:1.7 }
.line-feats{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.line-gallery{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); margin:var(--s5) 0 0 }
.line-gallery figure{ margin:0; border-radius:var(--r-sm); overflow:hidden; aspect-ratio:3/2; background:var(--cloud) }
.line-gallery img{ width:100%; height:100%; object-fit:cover; display:block }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center }
.kb-article ul{ margin:0 0 1em; padding-left:1.25em } .kb-article li{ font-size:16.5px; line-height:1.7; margin:.25em 0 }
.legal h2{ margin-top:1.8em; scroll-margin-top:var(--header-h,120px) }
.legal p,.legal li{ font-size:16.5px; line-height:1.75 } .legal ul{ padding-left:1.25em }
.legal .legal-meta{ color:var(--sub) } .legal address{ font-style:normal; line-height:1.7 }
.legal-toc{ border:1px solid var(--card-line,#dfe5ee); border-radius:var(--r-sm); padding:var(--s4); margin:var(--s4) 0 }
.legal-toc ol{ margin:0; padding-left:1.25em; columns:2 } .legal-toc a{ display:inline-block; padding:4px 0; min-height:32px }
.nf-links{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin:var(--s4) 0 }
.nf-links a{ display:flex; gap:10px; align-items:center; min-height:44px; padding:10px 14px; border:1px solid var(--card-line,#dfe5ee); border-radius:var(--r-sm) }
.site-footer .f-legal a{ display:inline-block; padding:12px 0; min-height:44px }
@media (max-width:820px){ .line-feats{ grid-template-columns:1fr } }
@media (max-width:640px){ .line-gallery{ grid-template-columns:1fr } .legal-toc ol{ columns:1 } }
/* Touch: 44px hit areas (phone battery tap gate). Breadcrumb links grow vertically, the bar loses
   the same padding so the layout does not move; filter chips get a 44px floor. */
@media (pointer:coarse){
  .crumbs{ padding-top:0; padding-bottom:0 }
  .crumbs a{ padding:14px 0; min-width:44px; text-align:center }
  .kb-chip,.kb-chip.sm{ min-height:44px; display:inline-flex; align-items:center }
  .feat b > a{ display:inline-block; padding:12px 0; margin:-12px 0 }
  .lead-form input,.lead-form select,.lead-form textarea{ font-size:16px } /* under 16px iOS zooms the page on focus */
}
/* Product options (group.html): labeled groups of chips — Tim QA JQ-MRHZF23E */
.opt-groups{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:var(--s3,18px); margin-top:var(--s3,18px) }
.opt-group{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px }
.opt-group h3{ display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:17px }
.opt-group h3 .fico{ display:inline-flex }
.opt-chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.opt-chips li{ font-size:14px; line-height:1.3; padding:7px 12px; border:1px solid var(--line); border-radius:999px; background:#f6f8fb }
/* Header between the burger (<=820px) and full desktop: the phone number and the
   Free Quote button wrapped onto two lines at ~830-914px (iPhone landscape). Keep
   both on one line; show the phone as an icon there, as on phones. */
.hdr-phone, .hdr-cta .btn{ white-space:nowrap }
@media (max-width:960px){
  .hdr-phone span{ display:none }
  .hdr-phone{ min-width:44px; min-height:44px; justify-content:center }
}
/* Legal tables of contents: 44px tap targets on touch (privacy/terms TOC links were 37px). */
@media (pointer:coarse){
  .legal-toc a{ display:inline-flex; align-items:center; min-height:44px; padding:0 }
}

/* resource data tables + Q&A (kb.go MediaSection.Table / .QA — the cost guide) */
.kb-table{ margin:1.1em 0 .6em }
.kb-table caption{ caption-side:top; text-align:left; padding:12px 16px 4px; font-family:var(--head); font-weight:700; font-size:15px; color:var(--h,var(--accent)) }
.kb-table tbody th{ width:auto; min-width:9em }
.kb-table td{ white-space:normal }
.kb-article h3{ margin:1.3em 0 .35em; font-size:18px }
/* under 600px a 3-column cost table squeezes its last column to a word per line:
   stack each row as a card, with the column name before each value */
@media (max-width:599px){
  .kb-table table, .kb-table tbody, .kb-table tr, .kb-table th, .kb-table td{ display:block; width:auto }
  .kb-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
  .kb-table tbody tr{ padding:10px 16px; border-top:1px solid var(--line,#e3e8ef) }
  .kb-table tbody th{ min-width:0; padding:0 0 4px; border:0 }
  .kb-table td{ padding:2px 0; border:0 }
  .kb-table td::before{ content:attr(data-label) ": "; font-weight:600 }
  .kb-table caption{ display:block; width:auto }
}