/* ==========================================================================
   Insulation Company - production stylesheet
   Design tokens + utilities lifted from the approved .dc.html prototypes.
   Adds real :hover / :focus states (prototypes used a style-hover attribute).
   ========================================================================== */
:root{
  --navy-deep:#041627; --navy:#122F66; --navy2:#0B2350;
  --blue:#0EA5E9; --blue-dark:#0284b3; --cyan:#14B8D4;
  --red:#D90429; --red-dark:#B70323;
  --ink:#1E293B; --slate:#526174; --slate2:#334155;
  --border:#D7E3EC; --panel:#F8FAFC; --panel-blue:#EAF7FF;
  color-scheme:light;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:#fff; }
html{ scroll-padding-top:var(--header-h); } /* offset anchors below the sticky header */
:root{ --header-h:112px; }
section[id]{ scroll-margin-top:var(--header-h); }
@media (max-width:768px){ :root{ --header-h:128px; } }
body{ font-family:'Inter',system-ui,sans-serif; color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:clip; }
a{ color:var(--blue); }
a:hover{ color:var(--blue-dark); }
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }
img{ max-width:100%; height:auto; display:block; }
:focus-visible{ outline:3px solid var(--cyan); outline-offset:2px; }

/* Skip link */
.skip{ position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:2000; }
.skip:focus{ left:0; }

/* Homepage type scale */
.hm-h1{ font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(36px,4vw,56px); line-height:1.08; letter-spacing:-.02em; }
.hm-h2{ font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(30px,3.4vw,44px); line-height:1.12; letter-spacing:-.015em; }
.hm-eyebrow{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.hm-sec{ padding:clamp(56px,7vw,104px) 24px; }
.hm-wrap{ max-width:1280px; margin:0 auto; }
.hm-hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:stretch; }
.hm-hero-media{ height:100%; }
.hm-2col{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.hm-3col{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.hm-4col{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.hm-split{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.hm-card{ background:#fff; border:1px solid var(--border); border-radius:16px; transition:transform .18s ease, box-shadow .18s ease; }
.hm-card:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -24px rgba(4,22,39,.28); }

/* Interior type scale (city/state/service/article/etc.) */
.h1{ font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(32px,4.2vw,52px); line-height:1.08; letter-spacing:-.02em; }
.h2{ font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(25px,2.9vw,36px); line-height:1.15; letter-spacing:-.015em; }
.h3{ font-family:'Manrope',sans-serif; font-weight:700; font-size:19px; line-height:1.25; color:var(--navy); }
.eyebrow{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.sec{ padding:clamp(44px,5vw,72px) 24px; }
.wrap{ max-width:1120px; margin:0 auto; }
.lede{ font-size:17px; line-height:1.75; color:#3B4A5C; }
.prose p{ font-size:16px; line-height:1.75; color:var(--slate); margin:0 0 18px; }
.prose h2{ margin:34px 0 12px; }
.prose h3{ margin:26px 0 8px; }
.prose ul{ margin:0 0 18px; padding-left:20px; color:var(--slate); line-height:1.7; font-size:15.5px; }
.card{ background:#fff; border:1px solid var(--border); border-radius:14px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.split{ display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:start; }

/* Buttons */
.btn-red{ display:inline-flex; align-items:center; gap:9px; background:var(--red); color:#fff; text-decoration:none; font-weight:700; border-radius:11px; transition:background .15s; }
.btn-red:hover{ background:var(--red-dark); color:#fff; }
.btn-ghost{ display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.06); color:#fff; text-decoration:none; font-weight:600; border:1px solid rgba(255,255,255,.18); border-radius:11px; transition:background .15s; }
.btn-ghost:hover{ background:rgba(255,255,255,.12); color:#fff; }

/* Link-card hover used on interior grids */
.link-card{ transition:transform .18s, box-shadow .18s, border-color .15s; }
.link-card:hover{ transform:translateY(-3px); box-shadow:0 18px 38px -24px rgba(4,22,39,.28); border-color:var(--cyan); }

/* ---- Page intro: split (text | image) + 3-box feature grid below --------- */
.intro-sec{ padding:clamp(56px,6vw,88px) 24px; }
.intro-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:stretch; }
.intro-left{ align-self:center; }
.intro-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-weight:700; color:var(--red); text-decoration:none; font-size:15px; }
.intro-cta:hover{ color:var(--red-dark); }
.intro-media-col{ display:flex; }
.intro-media{ flex:1; border-radius:16px; overflow:hidden; border:1px solid var(--border); background:var(--navy-deep); min-height:300px; box-shadow:0 24px 60px -34px rgba(4,22,39,.4); }
.intro-media img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.intro-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px; }
/* ---- Homepage systems comparison (cards + matrix) ------------------------ */
.rate-badge{ display:inline-flex; align-items:center; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.sys-card-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:20px; }
.sys-card{ grid-column:span 2; background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:transform .18s, box-shadow .18s, border-color .15s; }
.sys-card:nth-child(4){ grid-column:2 / span 2; }
.sys-card:nth-child(5){ grid-column:4 / span 2; }
.sys-card:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -24px rgba(4,22,39,.28); border-color:var(--cyan); }
.sys-card:focus-visible{ outline:3px solid var(--cyan); outline-offset:2px; }
.sys-card-img{ aspect-ratio:16/10; background:var(--navy-deep); }
.sys-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.sys-card-body{ padding:20px 22px; display:flex; flex-direction:column; flex:1; }
.sys-card-name{ font-family:'Manrope',sans-serif; font-weight:700; font-size:17px; color:var(--navy); margin:0 0 6px; }
.sys-card-app{ font-size:13.5px; line-height:1.55; color:var(--slate); margin:0 0 8px; }
.sys-card-ratings{ margin-top:auto; }
.sys-rate-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid #EEF3F7; font-size:13px; color:var(--slate2); font-weight:600; }
.sys-card-best{ margin-top:14px; font-size:13px; color:var(--slate2); }
.sys-best-label{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); background:var(--panel-blue); padding:3px 8px; border-radius:6px; margin-right:6px; }
.sys-card-link{ margin-top:14px; font-size:13.5px; font-weight:700; color:var(--red); display:inline-flex; align-items:center; gap:6px; }
@media (max-width:1023px){
  .sys-card-grid{ grid-template-columns:1fr 1fr; }
  .sys-card, .sys-card:nth-child(4), .sys-card:nth-child(5){ grid-column:auto; }
}
@media (max-width:560px){ .sys-card-grid{ grid-template-columns:1fr; } }

.cmp-wrap{ border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.cmp2{ width:100%; border-collapse:collapse; font-size:14px; }
.cmp2 thead th{ background:var(--navy); color:#fff; text-align:left; padding:15px 18px; font-family:'Manrope',sans-serif; font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; }
.cmp2 tbody th, .cmp2 tbody td{ padding:15px 18px; border-top:1px solid #E2ECF3; color:var(--slate); line-height:1.5; vertical-align:top; text-align:left; }
.cmp2 tbody tr:nth-child(even){ background:var(--panel); }
.cmp2 tbody tr:hover{ background:var(--panel-blue); }
.cmp2 th.sys{ font-family:'Manrope',sans-serif; font-weight:700; color:var(--navy); font-size:14px; }
.cmp-cards{ display:none; }
.cmp-card{ border:1px solid var(--border); border-radius:14px; padding:18px; background:#fff; }
.cmp-card h3{ font-family:'Manrope',sans-serif; font-weight:700; font-size:16px; color:var(--navy); margin:0 0 8px; }
.cmp-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 0; border-top:1px solid #EEF3F7; font-size:13.5px; }
.cmp-row .cmp-label{ color:var(--slate); font-weight:600; flex-shrink:0; }
.cmp-row > span:last-child{ color:var(--slate2); text-align:right; }
.cmp-note{ font-size:12.5px; color:#8595A6; margin:16px 0 0; }
@media (max-width:1023px){ .cmp-wrap{ display:none; } .cmp-cards{ display:grid; gap:14px; } }
.sys-cta{ margin-top:52px; background:linear-gradient(180deg,var(--navy),var(--navy2)); border-radius:18px; padding:32px 36px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px; }
.sys-cta-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
@media (max-width:767px){ .sys-cta{ padding:26px 22px; } }

/* City application cards (premium 6-box grid) */
.app-card{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:26px; height:100%; transition:transform .18s ease, box-shadow .18s ease, border-color .15s ease; }
.app-card:hover{ transform:translateY(-3px); box-shadow:0 22px 44px -26px rgba(4,22,39,.28); border-color:var(--cyan); }
.app-card-icon{ width:46px; height:46px; border-radius:12px; background:var(--panel-blue); color:var(--blue); display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px; }
.app-card h3{ font-family:'Manrope',sans-serif; font-weight:700; font-size:16.5px; color:var(--navy); margin:0 0 8px; }
.app-card p{ font-size:14px; line-height:1.65; color:var(--slate); margin:0; }

/* 6-box capability grid: 3 cols desktop, 2 cols tablet, 1 col small mobile */
.cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px; }
@media (max-width:1023px){ .cap-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:479px){ .cap-grid{ grid-template-columns:1fr; } }
.feature-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:24px; }
.feature-card h3{ font-family:'Manrope',sans-serif; font-weight:700; font-size:16px; color:var(--navy); margin:0 0 6px; }
.feature-card p{ font-size:13.5px; line-height:1.55; color:var(--slate); margin:0; }

/* ---- Content + media split section (text-only section remediation) ------ */
.cm-section{ padding:clamp(56px,6vw,88px) 24px; }
.cm-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:stretch; }
.cm-grid.media-left{ grid-template-columns:.9fr 1.1fr; } /* media stays the narrower track */
.cm-grid.media-left .cm-text{ order:2; }
.cm-grid.media-left .cm-media-col{ order:1; }
.cm-text{ align-self:center; }
.cm-media-col{ display:flex; }
.cm-media{ flex:1; border-radius:16px; overflow:hidden; border:1px solid var(--border); background:var(--navy-deep); min-height:300px; box-shadow:0 24px 60px -34px rgba(4,22,39,.4); }
.cm-media img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.cm-caption{ font-size:12.5px; color:var(--slate); margin-top:10px; }
.cm-featured{ border-radius:16px; overflow:hidden; border:1px solid var(--border); aspect-ratio:16/9; background:var(--navy-deep); margin:0 0 8px; }
.cm-featured img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:767px){
  .cm-section{ padding:clamp(48px,9vw,64px) 20px; }
  .cm-grid, .cm-grid.media-left{ grid-template-columns:1fr; gap:26px; }
  .cm-grid.media-left .cm-text{ order:1; }
  .cm-grid.media-left .cm-media-col{ order:2; }
  .cm-media{ aspect-ratio:16/10; min-height:0; }
}

/* Compact capability strip between hero and intro (no fabricated stats) */
.trust-strip{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--panel); }
.trust-strip-in{ max-width:1120px; margin:0 auto; padding:15px 24px; display:flex; flex-wrap:wrap; gap:10px 30px; align-items:center; }
.trust-item{ display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--slate2); }
.trust-item .t-dot{ width:7px; height:7px; border-radius:2px; background:var(--cyan); flex-shrink:0; }

@media (max-width:767px){
  .intro-sec{ padding:clamp(48px,9vw,64px) 20px; }
  .intro-grid{ grid-template-columns:1fr; gap:24px; }
  .intro-grid .h2{ font-size:clamp(30px,7vw,34px); }
  .intro-media{ aspect-ratio:16/10; min-height:0; }
  .intro-features{ grid-template-columns:1fr 1fr; gap:14px; margin-top:26px; }
  .trust-strip-in{ gap:10px 20px; }
}
@media (max-width:480px){
  .intro-features{ grid-template-columns:1fr; }
}

/* Responsive */
@media (max-width:980px){
  .hm-hero-grid{ grid-template-columns:1fr; gap:36px; }
  .hm-hero-media{ min-height:320px; }
  .hm-3col{ grid-template-columns:1fr 1fr; }
  .hm-4col{ grid-template-columns:1fr 1fr; }
  .hm-split{ grid-template-columns:1fr; gap:32px; }
  .grid3,.grid4{ grid-template-columns:1fr 1fr; }
  .split{ grid-template-columns:1fr; gap:30px; }
}
@media (max-width:620px){
  .hm-2col,.hm-3col,.hm-4col{ grid-template-columns:1fr; }
  .grid2,.grid3{ grid-template-columns:1fr; }
}
/* Six-step process: 3 columns (2 rows of 3) desktop, 2 columns tablet, 1 column small mobile */
@media (max-width:1023px){ .hm-steps{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:480px){ .hm-steps{ grid-template-columns:1fr !important; } }
/* Homepage stats: clean 2x2 grid on mobile (desktop/tablet >767px unchanged) */
@media (max-width:767px){
  .hm-stats{ display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:32px 20px !important; width:100%; padding:44px 20px !important; }
  .hm-stats .hm-stat{ width:100%; min-width:0; margin:0 !important; padding:0 !important; border-left:0 !important; transform:none !important; position:static !important; text-align:left !important; }
  .hm-stats .hm-stat-num{ font-size:40px !important; }
  .hm-stats .hm-stat-label{ font-size:16px !important; line-height:1.4 !important; margin-top:6px !important; overflow-wrap:break-word; }
}
@media (max-width:320px){
  .hm-stats{ grid-template-columns:1fr !important; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

/* ---- Header -------------------------------------------------------------- */
.hdr-wrap{ font-family:'Inter',system-ui,sans-serif; position:sticky; top:0; z-index:1000; }
.hdr-util{ background:var(--navy-deep); color:#CBD9E6; font-size:13px; line-height:1; border-bottom:1px solid rgba(255,255,255,.06); }
.hdr-util-in{ max-width:1280px; margin:0 auto; padding:9px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
/* Top utility bar pieces (desktop defaults; responsive rules further below) */
.top-utility-intro{ display:inline-flex; align-items:center; gap:9px; font-weight:500; letter-spacing:.02em; min-width:0; white-space:nowrap; }
.tu-dot{ width:7px; height:7px; background:var(--cyan); border-radius:1px; display:inline-block; flex-shrink:0; }
.top-utility-left{ display:inline-flex; align-items:center; gap:18px; min-width:0; }
.top-utility-phone{ display:inline-flex; align-items:center; gap:6px; color:#fff; font-weight:700; text-decoration:none; white-space:nowrap; }
.top-utility-phone:hover{ color:var(--cyan); }
.top-utility-phone:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.tu-phone-ico{ color:var(--cyan); flex-shrink:0; }
.top-utility-links{ display:flex; align-items:center; gap:22px; flex-shrink:0; }
.top-utility-estimate,.top-utility-service-areas{ color:#CBD9E6; text-decoration:none; font-weight:500; white-space:nowrap; border-radius:6px; }
.top-utility-estimate:hover,.top-utility-service-areas:hover{ color:#fff; }
.top-utility-estimate:focus-visible,.top-utility-service-areas:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.tu-intro-short,.tu-est-short{ display:none; }
.hdr-main{ background:#fff; border-bottom:1px solid var(--border); transition:box-shadow .2s ease; }
.hdr-main.scrolled{ box-shadow:0 6px 24px -12px rgba(4,22,39,.22); }
.hdr-in{ max-width:1280px; margin:0 auto; padding:0 24px; height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav-link,.nav-btn{ font-family:'Inter',sans-serif; font-size:15px; font-weight:600; color:var(--ink); text-decoration:none; padding:10px 14px; border-radius:8px; background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.nav-link:hover,.nav-btn:hover{ background:var(--panel); color:var(--navy); }
.nav-link[aria-current="page"],.mega-wrap.active > .nav-btn{ color:var(--navy); box-shadow:inset 0 -2px 0 var(--cyan); }
.drawer .flat[aria-current="page"]{ color:var(--cyan); }
.mega-wrap{ position:relative; }
.mega{ position:absolute; top:calc(100% + 10px); left:0; background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:0 24px 60px -20px rgba(4,22,39,.32); padding:26px 30px; opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none; transition:opacity .18s, transform .18s; }
.mega-wrap:hover .mega, .mega-wrap:focus-within .mega{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.mega-grid{ width:min(880px, calc(100vw - 460px)); display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px 36px; }
.mega-head{ font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--blue); padding:2px 12px 10px; }
.mega-item{ display:block; padding:8px 12px; font-size:14.5px; color:var(--ink); text-decoration:none; border-radius:7px; font-weight:500; }
.mega-item:hover{ background:var(--panel); color:var(--navy); }
.hdr-cta{ display:inline-flex; align-items:center; gap:8px; background:var(--red); color:#fff; text-decoration:none; font-weight:700; font-size:14.5px; padding:12px 20px; border-radius:9px; box-shadow:0 1px 2px rgba(217,4,41,.3); transition:background .15s; }
.hdr-cta:hover{ background:var(--red-dark); color:#fff; }
.hdr-burger{ display:none; align-items:center; justify-content:center; width:46px; height:46px; border:1px solid var(--border); background:#fff; border-radius:9px; cursor:pointer; }
.hdr-desktop-nav{ display:flex; align-items:center; gap:2px; }
@media (max-width:980px){
  .hdr-desktop-nav{ display:none !important; }
  .hdr-burger{ display:inline-flex !important; }
  .hdr-cta{ display:none !important; }
}
/* Utility bar - tablet: shorter intro label, keep both links on one line */
@media (min-width:768px) and (max-width:1023px){
  .hdr-util-in{ gap:12px; }
  .tu-intro-full{ display:none; }
  .tu-intro-short{ display:inline; }
  .top-utility-links{ gap:16px; }
  .top-utility-intro,.top-utility-links a{ white-space:nowrap; }
}
/* Utility bar - mobile: phone number on the LEFT, Get Estimate on the RIGHT */
@media (max-width:767px){
  .hdr-util-in{ min-height:52px; padding:7px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .top-utility-left{ gap:0; }
  .top-utility-intro,.top-utility-service-areas{ display:none !important; }
  .top-utility-links{ gap:0; }
  .top-utility-phone{ font-size:14px; font-weight:700; min-height:44px; }
  .tu-est-full{ display:none; }
  .tu-est-short{ display:inline; }
  .top-utility-estimate{
    display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; line-height:1;
    font-size:14px; font-weight:700; min-height:44px; padding:10px 16px;
    background:var(--red); color:#fff; border-radius:10px;
  }
  .top-utility-estimate:hover{ background:var(--red-dark); color:#fff; }
}
/* Very small screens: tighten spacing, keep both on one line, no wrap */
@media (max-width:359px){
  .hdr-util-in{ padding-inline:10px; gap:8px; }
  .top-utility-phone,.top-utility-estimate{ font-size:13px; }
  .top-utility-estimate{ padding-inline:12px; }
}
/* Mobile drawer */
.drawer-scrim{ position:fixed; inset:0; background:rgba(4,22,39,.55); z-index:1400; opacity:0; pointer-events:none; transition:opacity .25s; }
/* Closed drawer stays within the viewport (no off-screen translate that would
   create horizontal overflow); it reveals with a fade + subtle slide. */
.drawer{ position:fixed; top:0; right:0; bottom:0; width:min(360px,86vw); background:var(--navy-deep); z-index:1500; display:flex; flex-direction:column; box-shadow:-20px 0 60px rgba(4,22,39,.4); visibility:hidden; opacity:0; transition:opacity .24s ease, visibility .24s; }
body.drawer-open .drawer-scrim{ opacity:1; pointer-events:auto; }
body.drawer-open .drawer{ visibility:visible; opacity:1; }
.drawer details{ border-bottom:1px solid rgba(255,255,255,.08); }
.drawer summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; padding:16px 22px; color:#fff; font-size:16px; font-weight:600; cursor:pointer; min-height:48px; }
.drawer summary::-webkit-details-marker{ display:none; }
.drawer summary .plus{ font-size:20px; color:var(--cyan); transition:transform .2s; }
.drawer details[open] summary .plus{ transform:rotate(45deg); }
.drawer .sub a{ display:block; padding:11px 22px 11px 34px; color:#B9C7D6; text-decoration:none; font-size:15px; min-height:44px; }
.drawer .sub a:hover{ color:#fff; }
.drawer .flat{ display:block; padding:16px 22px; color:#fff; text-decoration:none; font-size:16px; font-weight:600; border-bottom:1px solid rgba(255,255,255,.08); }

/* ---- FAQ / details accordions ------------------------------------------- */
.faq details{ border-bottom:1px solid #E2ECF3; }
.faq summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 4px; cursor:pointer; font-family:'Manrope',sans-serif; font-weight:700; font-size:17px; color:var(--navy); min-height:48px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .plus{ flex-shrink:0; font-size:22px; color:var(--red); transition:transform .2s; line-height:1; }
.faq details[open] summary .plus{ transform:rotate(45deg); }
.faq .ans{ font-size:15px; line-height:1.7; color:var(--slate); margin:0; padding:0 4px 22px; }

/* ---- Footer -------------------------------------------------------------- */
.ft{ font-family:'Inter',system-ui,sans-serif; background:var(--navy-deep); color:#9DB0C2; }
.ft-in{ max-width:1280px; margin:0 auto; padding:72px 24px 0; }
.ft-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:40px 32px; }
.ft-head{ font-family:'Manrope',sans-serif; font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:#fff; margin-bottom:15px; }
.ft-link{ display:block; font-size:14px; color:#8FA3B6; text-decoration:none; padding:6px 0; line-height:1.4; }
.ft-link:hover{ color:#fff; }
.ft-bottom{ margin-top:56px; padding:22px 0; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; }
@media (max-width:900px){ .ft-grid{ grid-template-columns:1fr 1fr; } .ft-grid > div:first-child{ grid-column:1 / -1; } }

/* ---- Mobile CTA bar ------------------------------------------------------ */
.mcta{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:1300; gap:0; background:var(--navy-deep); border-top:1px solid rgba(255,255,255,.1); box-shadow:0 -8px 24px -10px rgba(4,22,39,.5); font-family:'Inter',system-ui,sans-serif; padding-bottom:env(safe-area-inset-bottom,0); }
.mcta a{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:56px; color:#fff; text-decoration:none; font-weight:700; font-size:14px; white-space:nowrap; line-height:1; }
@media (max-width:360px){ .mcta a{ font-size:12.5px; gap:6px; } }
.mcta .call{ border-right:1px solid rgba(255,255,255,.1); }
.mcta .est{ background:var(--red); }
@media (max-width:768px){ .mcta{ display:grid; } body{ padding-bottom:56px; } }

/* ---- Forms --------------------------------------------------------------- */
form.qf input:focus{ border-color:var(--cyan) !important; box-shadow:0 0 0 3px rgba(20,184,212,.18); }
.qf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:480px){ .qf-grid{ grid-template-columns:1fr !important; } }
/* Honeypot: off-screen (not display:none), removed from a11y tree + tab order. */
.qf-hp{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; }
.qf .qf-loading{ position:relative; color:transparent !important; pointer-events:none; }
.qf .qf-loading::after{ content:""; position:absolute; top:50%; left:50%; width:20px; height:20px; margin:-10px 0 0 -10px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:qfspin .7s linear infinite; }
@keyframes qfspin{ to{ transform:rotate(360deg); } }
button[data-qf-submit]:disabled{ opacity:.85; cursor:progress; }

/* ---- Image slot fallback (production images) ---------------------------- */
.imgslot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.imgslot-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; font-size:12.5px; color:#7C90A6; background:
  linear-gradient(135deg,#0b2036,#0f2c48); }

/* ---- Table ---------------------------------------------------------------*/
.tbl-scroll{ overflow-x:auto; border:1px solid var(--border); border-radius:16px; }
table.cmp{ width:100%; border-collapse:collapse; font-size:14px; min-width:640px; }
table.cmp th{ padding:16px 18px; font-family:'Manrope',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--navy); border-bottom:1px solid var(--border); text-align:left; background:var(--panel); }
table.cmp td{ padding:15px 18px; color:var(--slate); line-height:1.5; vertical-align:top; border-top:1px solid #E2ECF3; }
table.cmp td.strong{ font-weight:700; color:var(--navy); font-family:'Manrope',sans-serif; }

/* ---- TOC ----------------------------------------------------------------- */
.toc a{ display:block; padding:7px 0; font-size:14px; color:var(--slate); text-decoration:none; border-bottom:1px solid #E2ECF3; }
.toc a:hover{ color:var(--blue); }
/* Article "On this page": a full-width box in the reading column, not a cramped
   left rail. Sits after the intro image and before the body on every article. */
.article-toc{ margin:26px 0 10px; padding:18px 22px; border-radius:16px; background:var(--panel-blue); border:1px solid var(--border); }
.article-toc-label{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); margin-bottom:10px; }
.article-toc ul{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
@media (min-width:640px){ .article-toc ul{ grid-template-columns:1fr 1fr; gap:7px 28px; } }
.article-toc a{ color:var(--navy); text-decoration:none; font-size:14.5px; font-weight:600; line-height:1.4; }
.article-toc a:hover{ text-decoration:underline; color:var(--blue); }
.prose > .cm-featured, .prose > figure:first-child{ margin-top:0; }