/* Minot Roofing Co. — prairie steel palette.
   Display: Barlow Condensed (contractor truck lettering). Body: Public Sans.
   Utility/data: IBM Plex Mono. */

:root{
  --ink:#101922;
  --steel:#2B4257;
  --mid:#4E6E8C;
  --line:#C9D6DF;
  --hail:#E8EEF2;
  --paper:#F7F9FA;
  --white:#fff;
  --flare:#FF6A13;
  --flare-d:#D14E00;
  --ok:#12734F;
  --pad:20px;
  --wrap:1180px;
  --r:6px;
  --sh:0 1px 2px rgba(16,25,34,.06),0 8px 28px rgba(16,25,34,.07);
  --disp:"Barlow Condensed",Oswald,"Arial Narrow",sans-serif;
  --body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.62;color:var(--ink);
     background:var(--white);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--steel);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible{outline:3px solid var(--flare);outline-offset:2px;border-radius:3px}

h1,h2,h3,h4{font-family:var(--disp);font-weight:700;line-height:1.06;
            letter-spacing:-.005em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(34px,5.2vw,58px);text-transform:uppercase;letter-spacing:.002em}
h2{font-size:clamp(27px,3.4vw,40px);text-transform:uppercase}
h3{font-size:clamp(20px,2.1vw,25px)}
p{margin:0 0 1.05em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.16em;
         text-transform:uppercase;color:var(--flare-d);margin:0 0 10px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:999}
.skip:focus{left:8px;top:8px}

/* signature: shingle course divider */
svg.course{display:block;width:100%;height:14px}

/* ---------------------------------------------------------------- top bar */
.topbar{background:var(--ink);color:var(--hail);font-family:var(--mono);font-size:12.5px}
.topbar .wrap{display:flex;gap:16px;align-items:center;justify-content:space-between;
              min-height:40px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none;display:inline-block;padding:9px 0;min-height:38px}
.topbar a:hover{color:var(--flare)}
.topbar .tb-hours{opacity:.72}

/* ---------------------------------------------------------------------nav */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);
     backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--line)}
.nav{position:sticky}
.nav .wrap{display:flex;align-items:center;gap:18px;min-height:70px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);
      font-family:var(--disp);font-weight:700;font-size:23px;text-transform:uppercase;
      letter-spacing:.01em;line-height:1;flex:0 0 auto}
.logo .mark{width:34px;height:34px;flex:0 0 34px;border-radius:5px;background:var(--ink);
            position:relative;overflow:hidden}
.logo .mark::before,.logo .mark::after{content:"";position:absolute;left:-4px;right:-4px;height:6px;
            background:var(--flare);border-radius:2px}
.logo .mark::before{top:8px}
.logo .mark::after{top:19px;transform:translateX(6px)}
.logo small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;
            color:var(--mid);font-weight:600;margin-top:4px}
.menu{display:flex;gap:2px;list-style:none;margin:0;padding:0;flex:1 1 auto;justify-content:flex-end}
.menu a{display:block;padding:10px 12px;text-decoration:none;color:var(--ink);font-weight:600;
        font-size:15px;border-radius:var(--r)}
.menu a:hover,.menu a[aria-current]{background:var(--hail);color:var(--steel)}
.navcta{flex:0 0 auto}

/* ------------------------------------------------------------ mega dropdown */
.menu>li{position:relative}
.menu .caret{display:inline-block;width:0;height:0;margin-left:6px;vertical-align:2px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--flare);transition:transform .15s}
.hasmega:hover .caret,.hasmega:focus-within .caret{transform:rotate(180deg);border-top-color:var(--flare)}
/* Anchored to its own trigger so the panel opens directly under the word the
   user is pointing at. JS nudges it left only if it would cross the viewport
   edge (see clampMega in main.js). */
.nav .wrap{position:relative}
.mega{position:absolute;top:calc(100% + 12px);left:0;right:auto;
  margin-left:var(--mega-shift,0px);transform:translateY(-6px);
  width:min(700px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 18px 48px rgba(16,25,34,.16);padding:16px;opacity:0;
  visibility:hidden;pointer-events:none;
  transition:opacity .16s,transform .16s,visibility .16s;z-index:70}
/* Invisible bridge across the gap between the trigger and the panel. It spans
   the panel AND back to the trigger, so a diagonal mouse path never drops
   hover and the panel stops vanishing before you reach it. */
.mega::before{content:"";position:absolute;top:-18px;height:20px;
  left:calc(0px - var(--mega-shift,0px));right:0}
.hasmega:hover .mega,.hasmega:focus-within .mega,.hasmega.open .mega{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.mm-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.mm-grid a{display:block;padding:10px 12px;border-radius:6px;text-decoration:none;
  border-left:3px solid transparent}
.mm-grid a:hover{background:var(--hail);border-left-color:var(--flare)}
.mm-t{display:block;font-family:var(--disp);font-size:18px;font-weight:700;text-transform:uppercase;
  letter-spacing:.01em;color:var(--ink);line-height:1.15}
.mm-d{display:block;font-family:var(--mono);font-size:11.5px;color:var(--mid);margin-top:3px;
  line-height:1.4}
.mm-foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line)}
.mm-foot a{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--flare-d);text-decoration:none;padding:6px 0;min-height:34px;
  display:inline-flex;align-items:center}
.mm-foot a:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.mega{transition:none}}

/* drawer accordions */
.drawer .dacc{border-bottom:1px solid var(--hail)}
.drawer .dacc>summary{display:flex;align-items:center;justify-content:space-between;
  padding:13px var(--pad);min-height:48px;font-weight:700;font-family:var(--disp);
  font-size:20px;text-transform:uppercase;cursor:pointer;list-style:none;color:var(--ink)}
.drawer .dacc>summary::-webkit-details-marker{display:none}
.drawer .dacc>summary::after{content:"+";color:var(--flare);font-size:24px;font-family:var(--body)}
.drawer .dacc[open]>summary::after{content:"\2212"}
.drawer .dacc ul{padding:0 0 8px;background:var(--paper)}
.drawer .dacc a{padding-left:calc(var(--pad) + 14px);font-weight:600;font-size:15.5px;
  border-bottom:1px solid #E7EDF1}
.drawer .dacc a em{font-style:normal;color:var(--flare-d)}
.burger{display:none;background:var(--ink);border:0;color:#fff;width:46px;height:44px;
        border-radius:var(--r);font-size:20px;cursor:pointer}
.drawer{display:none;border-top:1px solid var(--line);background:#fff}
.drawer.open{display:block}
.drawer ul{list-style:none;margin:0;padding:6px 0 14px}
.drawer a{display:block;padding:12px var(--pad);min-height:44px;text-decoration:none;
          color:var(--ink);font-weight:600;border-bottom:1px solid var(--hail)}
.drawer .dgroup{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
                color:var(--mid);padding:14px var(--pad) 6px}

/* -------------------------------------------------------------------- btns */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
     font-family:var(--disp);font-weight:700;font-size:18px;text-transform:uppercase;
     letter-spacing:.02em;padding:13px 22px;min-height:48px;border-radius:var(--r);
     text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .12s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-p{background:var(--flare);color:#fff}
.btn-p:hover{background:var(--flare-d)}
.btn-d{background:var(--ink);color:#fff}
.btn-o{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-o:hover{background:var(--ink);color:#fff}
.btn-w{background:#fff;color:var(--ink)}
.btn-block{width:100%}

/* -------------------------------------------------------------------- hero */
.hero{background:var(--ink);color:var(--hail);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:190px;
   background:radial-gradient(120% 100% at 50% 100%,rgba(255,106,19,.16),transparent 70%);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;padding-top:52px;
            padding-bottom:52px;position:relative;z-index:2;align-items:start}
.hero h1{color:#fff}
.hero .sub{font-size:18.5px;color:#C7D5DF;max-width:56ch}
.hero .eyebrow{color:var(--flare)}
.herobtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.hero .marks{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:24px 0 0;padding:0}
.hero .marks li{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
   color:#fff;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
   padding:7px 11px;border-radius:100px}

.pagehead{background:var(--steel);color:var(--hail);padding:38px 0 34px}
.pagehead h1{color:#fff;margin-bottom:10px}
.pagehead .sub{font-size:17.5px;color:#D3E0E9;max-width:66ch;margin:0}
.pagehead .pills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:18px 0 0;padding:0}
.pagehead .pills li{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.12);padding:6px 11px;border-radius:100px}

/* --------------------------------------------------------------- lead form */
.leadcard{background:#fff;border-radius:var(--r);padding:22px;box-shadow:var(--sh);
          border-top:5px solid var(--flare)}
.leadcard,.leadcard *{color:var(--ink)}
.leadcard h2,.leadcard h3{font-size:24px;margin-bottom:4px}
.leadcard .lc-sub{font-size:14.5px;color:var(--mid);margin-bottom:14px}
.field{margin-bottom:11px}
.field label{display:block;font-family:var(--mono);font-size:11.5px;font-weight:600;
             letter-spacing:.09em;text-transform:uppercase;color:var(--mid);margin-bottom:5px}
input,select,textarea{width:100%;font-family:var(--body);font-size:16px!important;
  padding:12px 13px;border:1.5px solid var(--line);border-radius:var(--r);background:#fff;
  color:var(--ink);min-height:46px}
textarea{min-height:88px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--steel)}
.hp{position:absolute;left:-9999px}
.formnote{font-size:13px;color:var(--mid);margin:10px 0 0;text-align:center}
.formnote a{display:inline-block;padding:8px 0;min-height:36px;font-weight:700}
.fstatus{margin-top:10px;font-size:14.5px;font-weight:600;min-height:20px}
.fstatus.err{color:var(--flare-d)}
.fstatus.ok{color:var(--ok)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}

/* -------------------------------------------------------------- spec strip */
.specs{background:var(--hail);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.specs dl{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0}
.specs div{padding:20px 16px;border-right:1px solid var(--line)}
.specs div:last-child{border-right:0}
.specs dt{font-family:var(--disp);font-size:29px;font-weight:700;line-height:1;color:var(--ink);
          text-transform:uppercase}
.specs dd{margin:6px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
          color:var(--mid);line-height:1.45}

/* data band — signature element */
.databand{background:var(--ink);color:#fff;padding:26px 0}
.databand .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.databand .dbi{border-left:3px solid var(--flare);padding-left:14px}
.databand .n{font-family:var(--disp);font-size:34px;font-weight:700;line-height:1;text-transform:uppercase}
.databand .l{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:#9FB4C4;margin-top:7px;line-height:1.45}
.databand .src{font-family:var(--mono);font-size:11px;color:#6D8296;margin:18px 0 0;text-align:center}

/* -------------------------------------------------------------------- body */
.sec{padding:56px 0}
.sec--tint{background:var(--paper)}
.sec--dark{background:var(--ink);color:var(--hail)}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark .eyebrow{color:var(--flare)}
.sechead{max-width:70ch;margin-bottom:30px}
.sechead p{color:var(--mid);font-size:17.5px}
.sec--dark .sechead p{color:#B9CBD8}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:40px;align-items:start}
.layout>*{min-width:0}

.prose{max-width:74ch;min-width:0}
.prose h2{margin-top:1.5em}
.prose h3{margin-top:1.35em;font-size:21px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 1.15em}
.prose li{margin-bottom:.5em}
/* Give standalone links in prose lists a real tap target. Excludes .areas,
   whose chips are already full-size grid cells with their own padding. */
.prose ul:not(.areas)>li>a:only-child,
.prose ol:not(.areas)>li>a:only-child{display:inline-block;padding:9px 0;min-height:38px}
.prose table{width:100%;max-width:100%;border-collapse:collapse;font-size:15px;margin:0 0 8px;
  display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  overscroll-behavior-x:contain}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left;
  scroll-snap-align:start;min-width:132px}
.prose th{background:var(--hail);font-family:var(--mono);font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--steel)}
.tablehint{font-family:var(--mono);font-size:11.5px;color:var(--mid);margin:0 0 22px}
@media (min-width:861px){.tablehint{display:none}}
.prose blockquote{margin:1.4em 0;padding:16px 20px;background:var(--hail);
  border-left:4px solid var(--flare);border-radius:0 var(--r) var(--r) 0}
.prose blockquote p:last-child{margin:0}

/* figures */
.figure{margin:26px 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.figure svg{display:block;width:100%;height:auto;aspect-ratio:880/480}
.figure figcaption{font-family:var(--mono);font-size:12.5px;color:var(--mid);padding:12px 15px;
  border-top:1px solid var(--line);background:#fff;line-height:1.5}

/* photo slot */
.photo{margin:26px 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--hail)}
.photo figcaption{font-family:var(--mono);font-size:12.5px;color:var(--mid);padding:12px 15px;
  border-top:1px solid var(--line);line-height:1.5}
.photoslot{aspect-ratio:3/2;background:
   repeating-linear-gradient(135deg,var(--hail) 0 14px,#DFE8EE 14px 28px);
   display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
   text-align:center;padding:22px}
.photoslot .ps-t{font-family:var(--disp);text-transform:uppercase;font-size:22px;
   font-weight:700;color:var(--steel);line-height:1.1}
.photoslot .ps-f{font-family:var(--mono);font-size:12.5px;color:var(--ink);background:#fff;
   padding:6px 11px;border-radius:4px;border:1px solid var(--line);word-break:break-all}
.photoslot .ps-d{font-family:var(--mono);font-size:11.5px;color:var(--mid)}

/* -------------------------------------------------------------------- cards */
.cards{display:grid;gap:16px}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;
      display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;
      transition:border-color .15s,transform .15s,box-shadow .15s}
a.card:hover{border-color:var(--flare);transform:translateY(-2px);box-shadow:var(--sh)}
.card h3{margin:0;font-size:21px}
.card p{margin:0;font-size:15px;color:var(--mid);
        display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .go{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.09em;
          text-transform:uppercase;color:var(--flare-d);margin-top:auto;padding-top:6px}
.card .num{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--mid)}
.sec--dark .card{background:#18242F;border-color:#2A3B49}
.sec--dark .card p{color:#A9BECC}

/* checklist blocks */
.blocks{display:grid;gap:20px}
.block{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:#fff}
.block h3{margin:0 0 12px}
.block ul{list-style:none;margin:0;padding:0}
.block li{position:relative;padding-left:26px;margin-bottom:9px;font-size:16px}
.block li::before{content:"";position:absolute;left:0;top:8px;width:11px;height:11px;
  border-radius:2px;background:var(--flare)}

/* areas grid */
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;list-style:none;margin:0;padding:0}
.areas a{display:block;padding:13px 15px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);text-decoration:none;font-weight:600;font-size:15.5px;min-height:46px}
.areas a:hover{border-color:var(--flare);color:var(--flare-d)}
.sec--dark .areas a{background:#18242F;border-color:#2A3B49;color:#fff}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:17px 40px 17px 0;font-family:var(--disp);font-size:21px;
  font-weight:700;position:relative;list-style:none;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:14px;font-size:26px;
  color:var(--flare);font-family:var(--body);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 0 18px;color:var(--mid);max-width:74ch}
.faq .a p{margin:0}

/* rail */
.rail{display:grid;gap:16px;position:sticky;top:86px}
.railbox{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.railbox>summary,.railbox>.rb-h{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mid);padding:13px 16px;background:var(--hail);
  border-bottom:1px solid var(--line);cursor:pointer;list-style:none;min-height:44px;
  display:flex;align-items:center;justify-content:space-between}
.railbox>summary::-webkit-details-marker{display:none}
.railbox>summary::after{content:"+";font-size:17px;color:var(--flare)}
.railbox[open]>summary::after{content:"\2212"}
.railbox ul{list-style:none;margin:0;padding:6px 16px 12px}
.railbox li a{display:block;padding:10px 0;min-height:40px;text-decoration:none;
  font-size:15.5px;font-weight:600;border-bottom:1px solid var(--hail)}
.railbox li:last-child a{border-bottom:0}
.railbox li a:hover{color:var(--flare-d)}
.railcta{background:var(--ink);color:#fff;padding:22px;border-radius:var(--r);text-align:center}
.railcta h3{color:#fff;margin:0 0 6px;font-size:23px}
.railcta p{color:#A9BECC;font-size:14.5px;margin:0 0 14px}
.railcta a:not(.btn){display:inline-block;padding:11px 0;min-height:40px;color:#fff;font-weight:600}

/* callout */
.callout{background:var(--hail);border-left:4px solid var(--flare);border-radius:0 var(--r) var(--r) 0;
  padding:20px 22px;margin:26px 0}
.callout h3{margin:0 0 8px;font-size:21px}
.callout p:last-child{margin:0}

/* cta band */
.ctaband{background:var(--flare);color:#fff}
.ctaband .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding-top:36px;padding-bottom:36px;flex-wrap:wrap}
.ctaband h2{color:#fff;margin:0 0 6px}
.ctaband p{margin:0;color:rgba(255,255,255,.92);font-size:17px}

/* breadcrumbs */
.crumbs{background:var(--paper);border-bottom:1px solid var(--line);font-size:14px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;align-items:center;list-style:none;margin:0;padding:0}
.crumbs li::after{content:"/";margin-left:6px;color:var(--line)}
.crumbs li:last-child::after{content:""}
.crumbs a,.crumbs span{display:inline-block;padding:9px 0;min-height:38px;color:var(--mid);
  text-decoration:none}
.crumbs a:hover{color:var(--flare-d)}
.crumbs li:last-child span{color:var(--ink);font-weight:600}

/* map */
.mapbox{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--hail)}
.mapbox iframe{display:block;width:100%;height:340px;border:0}
.mapbox--sm iframe{height:230px}

/* review placeholders */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rev{border:1px dashed var(--line);border-radius:var(--r);padding:20px;background:var(--paper)}
.rev .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--flare-d);margin-bottom:9px}
.rev p{font-size:15px;color:var(--mid);margin:0}

/* ------------------------------------------------------------------ footer */
.foot{background:var(--ink);color:#A9BECC;padding:0 0 26px;font-size:15px}
.foot h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin:0;font-weight:600}
.foot ul{list-style:none;margin:0;padding:0}
.foot a{color:#A9BECC;text-decoration:none}
.foot a:hover{color:var(--flare)}

/* call band across the top of the footer */
.footcall{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  padding:26px 0;border-bottom:1px solid #223140}
.footcall .eyebrow{color:var(--flare);margin:0 0 4px}
.footcall-h{font-family:var(--disp);font-size:clamp(23px,3vw,31px);font-weight:700;
  text-transform:uppercase;color:#fff;margin:0;line-height:1.08}
.footcall-b{display:flex;gap:10px;flex-wrap:wrap}
.btn-onlight{color:#fff;border-color:rgba(255,255,255,.45)}
.btn-onlight:hover{background:#fff;color:var(--ink);border-color:#fff}

.foot .cols{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:32px;padding:34px 0 0}
.foot .cols>.fgroup>summary{list-style:none;cursor:default;margin-bottom:12px;
  display:flex;align-items:center;min-height:40px;padding:9px 0}
.foot .cols>.fgroup>summary::-webkit-details-marker{display:none}
.foot .fgroup li a{display:inline-block;padding:9px 0;min-height:38px;line-height:1.35}
.foot .brandline{font-family:var(--disp);font-size:25px;font-weight:700;color:#fff;
  text-transform:uppercase;margin:0 0 10px;line-height:1.05}
.foot .nap{font-style:normal;line-height:1.95;margin:0 0 14px}
.foot .nap a{display:inline-block;padding:7px 0;min-height:34px;font-weight:600;color:#fff}
.foot .fmeta{font-size:13.5px;line-height:1.65;color:#7D93A5;margin:0 0 10px}

.foot .legal{border-top:1px solid #223140;margin-top:34px;padding-top:20px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13.5px;color:#7D93A5}
.foot .legal ul{display:flex;gap:18px;flex-wrap:wrap}
.foot .legal a{display:inline-block;padding:9px 0;min-height:38px}

/* sticky mobile call bar */
.callbar{display:none}

/* ------------------------------------------------------------ breakpoints */
@media (max-width:1140px){
  .menu,.navcta,.mega{display:none!important}
  .burger{display:block;margin-left:auto}
  .layout{grid-template-columns:minmax(0,1fr)}
  .rail{position:static}
}
@media (max-width:1000px){
  .hero .wrap{grid-template-columns:1fr;gap:30px}
  .foot .cols{grid-template-columns:1fr 1fr}
  .cards--4{grid-template-columns:repeat(2,1fr)}
  .databand .wrap{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  :root{--pad:16px}
  body{font-size:16.5px}
  .sec{padding:42px 0}
  .cards--3,.revs{grid-template-columns:repeat(2,1fr)}
  .areas{grid-template-columns:repeat(2,1fr)}
  .specs dl{grid-template-columns:1fr 1fr}
  .specs div{border-bottom:1px solid var(--line)}
  .specs div:nth-child(2){border-right:0}
  .specs div:nth-last-child(-n+2){border-bottom:0}
  .specs dt{font-size:25px}
  .ctaband .wrap{flex-direction:column;align-items:flex-start}
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:var(--ink);border-top:2px solid var(--flare)}
  .callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
    padding:14px 8px;min-height:56px;text-decoration:none;color:#fff;font-family:var(--disp);
    font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
  .callbar a+a{background:var(--flare);border-left:1px solid var(--ink)}
  body{padding-bottom:58px}
}
@media (max-width:620px){
  /* Stay 2-up rather than stacking: one item per row is what makes a mobile
     homepage 14,000px tall. Cards get tighter padding and a 2-line clamp. */
  .cards--3,.cards--4{grid-template-columns:repeat(2,1fr);gap:11px}
  .cards--2,.revs{grid-template-columns:1fr}
  .card{padding:14px;gap:5px}
  .card h3{font-size:17px}
  .card p{font-size:13.5px;-webkit-line-clamp:2}
  .card .go{font-size:11px}
  .card .num{font-size:11px}
  /* Footer becomes a single column of tap-to-open accordions. Links stay in the
     DOM either way, so they keep counting as internal links. */
  .foot{padding-bottom:14px}
  .foot .cols{display:block;padding-top:8px}
  .foot .fbrand{padding:22px 0 20px;border-bottom:1px solid #223140}
  .foot .cols>.fgroup{border-bottom:1px solid #223140}
  .foot .cols>.fgroup>summary{display:flex;align-items:center;justify-content:space-between;
    cursor:pointer;padding:15px 0;min-height:50px;margin:0}
  .foot .cols>.fgroup>summary h4{font-size:13px;letter-spacing:.12em}
  .foot .cols>.fgroup>summary::after{content:"+";color:var(--flare);font-size:23px;
    font-family:var(--body);line-height:1}
  .foot .cols>.fgroup[open]>summary::after{content:"\2212"}
  .foot .fgroup ul{padding:2px 0 12px;columns:2;column-gap:18px}
  .foot .fgroup li{break-inside:avoid}
  .foot .fgroup li a{padding:8px 0;min-height:36px;font-size:14.5px}
  .footcall{flex-direction:column;align-items:stretch;gap:14px;padding:22px 0}
  .footcall-b{flex-direction:column;gap:9px}
  .footcall-b .btn{width:100%}
  .foot .legal{margin-top:20px;flex-direction:column;gap:2px;align-items:flex-start}
  .foot .legal ul{gap:16px}
  .databand .wrap{grid-template-columns:1fr 1fr;gap:16px}
  .databand .n{font-size:27px}
  .grid2{grid-template-columns:1fr}
  .sec{padding:34px 0}
  .sechead{margin-bottom:20px}
  .hero .wrap{padding-top:34px;padding-bottom:34px}
  .block{padding:16px}
  .figure,.photo{margin:20px 0}
}
@media (max-width:340px){
  /* Galaxy Fold cover screen and similar. Two-column grids stop fitting. */
  :root{--pad:12px}
  .nav .wrap{gap:8px}
  .logo{font-size:19px;gap:8px}
  .logo .mark{width:28px;height:28px;flex-basis:28px}
  .burger{width:42px;height:42px;flex:0 0 42px}
  .cards--3,.cards--4,.areas{grid-template-columns:1fr}
  .foot .fgroup ul{columns:1}
  .specs dl{grid-template-columns:1fr}
  .specs div{border-right:0}
  .databand .wrap{grid-template-columns:1fr}
  h1{font-size:29px}
  .topbar .wrap{font-size:11.5px}
}
@media (max-width:420px){
  .herobtns .btn,.ctaband .btn{width:100%}
  .areas{grid-template-columns:repeat(2,1fr)}
  .areas a{padding:11px 12px;font-size:14px}
  .specs dt{font-size:23px}
  .cards--3,.cards--4{gap:9px}
}

@media print{
  .nav,.topbar,.callbar,.ctaband,.rail,.leadcard{display:none}
  body{color:#000;font-size:12pt}
}

@media (max-width:1340px){
  .mega-grid{grid-template-columns:repeat(3,1fr)}
}