/* National Door Parts. Design notes: /DESIGN.md in the project folder.
   Colours sampled from logo-icon.png. Type scale: 1.25 from 16px. */

@font-face{font-family:"Barlow Condensed";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/barlow-condensed-500.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/barlow-condensed-600.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/barlow-condensed-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-sans-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-sans-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-sans-600.woff2) format("woff2")}

:root{
  color-scheme:light;
  --navy:#062446; --orange:#F6791E; --page:#FFFFFF; --steel:#EEF0F3; --ink:#14191F; --muted:#566170;
  --line:#D9DEE5; --mark:#A9B1BC;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"IBM Plex Sans",Arial,sans-serif;
  --t-1:.8rem; --t0:1rem; --t1:1.25rem; --t2:1.5625rem; --t3:1.953rem; --t4:2.441rem; --t5:3.052rem; --t6:3.815rem;
  --content:1240px; --wide:1560px; --wide-pad:32px; --nav-gap:28px;
  --gap:24px; --section:56px; --gutter:24px;
  --header:116px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header) + 16px)}
body{margin:0;background:var(--page);color:var(--ink);font:400 var(--t0)/1.5 var(--body);overflow-wrap:break-word}
h1,h2,h3,p,ul,ol,dl,dd,fieldset,figure{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;color:var(--navy)}
h1{font-size:var(--t5)}
h2{font-size:var(--t4)}
h3{font-size:var(--t2);font-weight:600}
a{color:var(--navy);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--orange);text-decoration-thickness:2px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
main:focus{outline:0}
.on-navy :focus-visible,.notice :focus-visible{outline-color:var(--orange)}

.wrap{width:100%;max-width:calc(var(--content) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:calc(var(--wide) + 2*var(--wide-pad));padding-inline:var(--wide-pad)}
.section{padding-block:var(--section)}
.section--steel{background:var(--steel)}
.section--tight{padding-top:0}
.section__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 24px;margin-bottom:24px}
.page-head{padding-block:32px 24px}
.page-head p{max-width:64ch;margin-top:8px}
.lede{font-size:var(--t1);line-height:1.4}
.note{max-width:64ch}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Skip link */
.skip{position:absolute;left:16px;top:-64px;z-index:100;padding:8px 16px;background:var(--orange);color:var(--navy);font-weight:600}
.skip:focus{top:8px}

/* Notice bar: dismissed by the checkbox, for the current page view */
.notice{background:var(--navy);color:#fff;font-size:15px}
.notice__in{display:flex;align-items:center;justify-content:center;gap:16px;min-height:36px;padding-block:4px}
.notice a{color:#fff}
.notice label{display:grid;place-items:center;width:32px;height:32px;margin-right:-8px;cursor:pointer;flex:none}
.notice label svg{width:12px;height:12px}
.notice label:hover svg{color:var(--orange)}
#notice-x:checked + .notice{display:none}
#notice-x:focus-visible + .notice label{outline:3px solid var(--orange);outline-offset:-3px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--page);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:32px;min-height:72px}
.logo{flex:none;display:flex;align-items:center;gap:7px}
.mark{position:relative;display:block;width:46px;height:48px;perspective:140px}
.mark svg{position:absolute;inset:0;width:100%;height:100%}
.mark__door{transform-origin:97% 50%}
.mark.play .mark__door{animation:swing .7s ease-out}
.mark.play .latch{animation:latch .7s ease-out}
.logo:hover .mark__door{animation:swing .4s ease-out}
.latch{transform-box:fill-box;transform-origin:center}
@keyframes swing{0%,100%{transform:rotateY(0)}35%{transform:rotateY(-20deg)}}
@keyframes latch{0%,100%{transform:scale(1)}35%{transform:scale(1.22)}}
.wordmark{width:116px;height:48px}
.search{position:relative;display:flex;flex:1 1 520px;min-width:340px;max-width:760px;height:44px}
.search input{flex:1;min-width:0;padding:0 12px;background:#fff;border:2px solid var(--navy);border-right:0;border-radius:2px 0 0 2px}
.search input::placeholder{color:var(--ink);opacity:.82}
.search input:focus-visible{outline-offset:-5px}
.search button{flex:none;padding:0 24px;background:var(--orange);color:var(--navy);border:2px solid var(--navy);border-radius:0 2px 2px 0;font:700 var(--t1)/1 var(--display);cursor:pointer}
.search button:hover{background:var(--navy);color:#fff}
.tools{display:flex;align-items:center;gap:20px;flex:none}
.tool{display:flex;align-items:center;gap:6px;min-height:44px;font-weight:500;color:var(--navy);text-decoration:none;white-space:nowrap}
.tool:hover{text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px}
.tool svg{width:22px;height:22px}
.q-short{display:none}

.nav{position:relative;background:var(--navy)}
.nav__in{display:flex;align-items:center}
.nav__cats{display:flex;gap:var(--nav-gap)}
.nav a{display:block;padding:9px 0 7px;color:#fff;font:600 var(--t1)/1.2 var(--display);text-decoration:none;white-space:nowrap;border-bottom:3px solid transparent}
.nav a:hover,.nav a[aria-expanded=true]{border-bottom-color:var(--orange)}
.nav .nav__end{flex:none;margin-left:auto;padding-left:48px}

/* Compact menu, below the desktop breakpoint */
.menu{display:none}
.menu summary{display:grid;place-items:center;width:44px;height:44px;cursor:pointer;list-style:none;color:var(--navy)}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:26px;height:26px}
.menu .i-close{display:none}
.menu[open] .i-open{display:none}
.menu[open] .i-close{display:block}
.menu__panel{position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - var(--header));overflow-y:auto;background:var(--navy);padding:8px var(--gutter) 16px;border-top:1px solid var(--navy)}
.menu__panel a{display:block;padding-block:10px;color:#fff;font:600 var(--t1)/1.2 var(--display);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.2)}
.menu__panel li:last-child a{border-bottom:0}
.menu__panel a:hover{color:var(--orange)}

/* Buttons */
.btn{display:inline-block;padding:11px 24px;border:2px solid var(--navy);border-radius:2px;background:var(--orange);color:var(--navy);font:700 var(--t1)/1.1 var(--display);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--navy);color:#fff;text-decoration:none}
.btn[disabled]{background:var(--steel);border-color:var(--line);color:var(--ink);cursor:not-allowed}
.btn--block{display:block;width:100%;text-align:center}
.btn.tool-quote{flex:none;padding:9px 14px;white-space:nowrap}

/* Hero */
.hero{background:var(--steel)}
.hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,580px);align-items:center;gap:32px;padding-block:24px}
.hero h1{font-size:clamp(36px,3.4vw,56px);line-height:1.02;letter-spacing:-.005em}
.nb{white-space:nowrap}
.hero p{max-width:48ch;margin-block:12px 20px;font-size:var(--t1);line-height:1.4}
.hero__copy{animation:rise .3s ease-out both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.door{width:100%;height:auto}
.door a text{font:600 18px var(--display);fill:var(--navy)}
.door a:hover text,.door a.is-on text{text-decoration:underline;text-decoration-color:var(--orange)}
.door a:hover .lead,.door a.is-on .lead{stroke:var(--orange);stroke-width:2}
.door .lead{stroke-dasharray:1;animation:lead .24s ease-out backwards;animation-delay:calc(.3s + var(--i)*80ms)}
.door a text{animation:fadein .24s ease-out backwards;animation-delay:calc(.3s + var(--i)*80ms)}
@keyframes lead{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.door .lead{fill:none;stroke:var(--navy);stroke-width:1}
.door .o{fill:none;stroke:var(--navy);stroke-width:2}
.door .f{fill:var(--page);stroke:var(--navy);stroke-width:2}
.door .s{fill:var(--navy)}
.door .h{fill:var(--orange);stroke:var(--navy);stroke-width:1.5}

/* Image slots: replace the inline svg with <img loading="lazy" alt="..."> */
.slot{display:grid;place-items:center;aspect-ratio:4/3;background:var(--steel);overflow:hidden}
.slot svg{width:66%;height:66%;color:var(--mark);transition:color .2s}
.slot img{width:100%;height:100%;object-fit:contain}
.slot--square{aspect-ratio:1}

/* Category tiles and product cards */
.grid{display:grid;gap:var(--gap)}
.grid>li{display:grid}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{display:block;border:1px solid var(--line);border-radius:2px;background:var(--page);text-decoration:none;color:var(--ink)}
.tile h2,.tile h3{padding:14px 16px;font-size:var(--t2)}
.tile .slot,.card .slot{aspect-ratio:3/2}
.tile .slot svg{width:55%;height:auto}
.tile--desc{scroll-margin-top:calc(var(--header) + 16px)}
.tile--desc h2{padding:12px 16px 4px}
.tile--desc p{padding:0 16px 10px}
.cat-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.tile--desc{display:grid;grid-template-columns:168px minmax(0,1fr)}
.tile--desc .slot{aspect-ratio:auto;min-height:100%}
.tile--desc p a{font-weight:500}
.tile--desc:target{outline:3px solid var(--orange);outline-offset:-1px}

.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:2px;background:var(--page)}
.card__body{display:flex;flex:1;flex-direction:column;gap:2px;padding:12px 16px 16px}
.rule{padding-bottom:2px;background:linear-gradient(var(--orange),var(--orange)) 0 100%/0 2px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .2s}
.tile:hover .slot svg,.card:hover .slot svg,.tile.is-on .slot svg,.tile:focus-visible .slot svg,.tile:has(a:focus-visible) .slot svg,.card:has(a:focus-visible) .slot svg{color:var(--navy)}
.tile:hover .rule,.card:hover .rule,.tile.is-on .rule,.tile:focus-visible .rule,.tile:has(a:focus-visible) .rule,.card:has(a:focus-visible) .rule{background-size:100% 2px}
.card h3 a,.card h2 a{text-decoration:none}
.card h3{font-size:var(--t2)}
.card h2{font-size:var(--t2);font-weight:600}
.muted{margin-bottom:12px;color:var(--muted)}
.card .btn{margin-top:auto}

/* Brands */
.brands-band{padding-block:20px;border-block:1px solid var(--line)}
/* Slots are 160x64 and narrow only when the row cannot fit. The 1px gaps are painted by each
   slot's shadow; overflow:hidden clips the shadows on the outer edges, so dividers appear only
   between slots. To add a logo, replace the span with
   <img class="brand__mark" src="/img/brands/name.svg" alt="Name">. Nothing else changes. */
.brands{--brand-cols:6;display:grid;grid-template-columns:repeat(var(--brand-cols),minmax(0,160px));gap:1px;justify-content:center;width:min(100%,calc(var(--brand-cols)*161px - 1px));margin-inline:auto;overflow:hidden}
.brands li{height:64px;box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line),-1px -1px 0 var(--line)}
.brand{display:block;height:100%;padding:4px 8px;color:var(--navy);text-decoration:none}
.brand:focus-visible{outline-offset:-3px}
.brand__mark{display:grid;place-items:center;width:100%;height:100%;object-fit:contain;text-align:center;font:700 26px/1.05 var(--display);opacity:.7;transition:opacity .15s}
.brand:hover .brand__mark,.brand:focus-visible .brand__mark{opacity:1}

/* Why */
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap) 48px}
.why p{margin-top:6px}

/* Sidebar layout */
.with-side{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;align-items:start}
.filters{padding:16px;background:var(--steel);border-radius:2px}
.filters h2{font-size:var(--t2)}
.filters>p{margin-block:4px 8px}
.filters fieldset{padding-block:10px;border-top:1px solid var(--line)}
.filters legend{float:left;width:100%;margin-bottom:4px;font-weight:600}
.filters label{clear:both;display:flex;align-items:center;gap:8px}

/* Toolbar and pagination */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin-bottom:24px}
.toolbar label{display:flex;align-items:center;gap:8px;white-space:nowrap}
.toolbar select{width:auto}
.pager{display:flex;justify-content:center;gap:8px;margin-top:32px}
.pager span{display:grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:2px}
.pager [aria-current]{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}

/* Breadcrumb */
.crumbs{padding-top:16px;font-size:var(--t-1)}
.crumbs ol{display:flex;flex-wrap:wrap}
.crumbs li+li::before{content:"/";margin-inline:8px}

/* Forms */
.form{display:grid;gap:14px}
.field{display:grid;gap:4px}
.field label{font-weight:500}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],select,textarea{width:100%;min-height:44px;padding:8px 12px;background:#fff;border:1px solid var(--ink);border-radius:2px}
textarea{min-height:128px;resize:vertical}
input:disabled,select:disabled,textarea:disabled{background:var(--steel);border-color:var(--line);cursor:not-allowed}
.form .btn{justify-self:start}

/* Two-column pages */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.points{display:grid;gap:16px}
.points p{margin-top:2px}
.panel{padding:24px;background:var(--steel);border-radius:2px}
.panel h2{margin-bottom:8px;font-size:var(--t3)}
.panel .btn[disabled]{background:var(--page)}
.panel input:disabled{background:var(--page)}
.panel>p{margin-bottom:12px}
.facts{display:grid;gap:12px}
.facts dt{font-weight:600}

/* Product page */
.buy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;padding-top:20px}
.thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}
.thumbs svg{width:70%;height:70%}
.buy__info h1{margin-bottom:8px}
.buy__info .muted{margin-bottom:16px}
.buy__opts{display:grid;gap:14px;margin-bottom:16px}
.buy__row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:end}
.finish legend{padding:0;margin-bottom:6px;font-weight:500}
#finish-name{margin-left:6px;font-weight:400}
.swatches{display:flex;flex-wrap:wrap;gap:6px}
.swatch{display:grid;place-items:center;width:44px;height:44px;cursor:pointer}
.swatch span:not(.vh){display:block;width:32px;height:32px;border-radius:50%;background:var(--c);border:1px solid var(--ink)}
.swatch input:checked + span{outline:2px solid var(--navy);outline-offset:3px}
.swatch input:focus-visible + span{outline:3px solid var(--orange);outline-offset:3px}
.configured{font-weight:500}
.stepper{display:flex;height:44px}
.stepper input{width:64px;min-height:0;height:44px;text-align:center;border-radius:0;-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-inner-spin-button{display:none}
.stepper__btn{width:44px;background:var(--steel);border:1px solid var(--ink);font:600 var(--t1)/1 var(--body);color:var(--navy);cursor:pointer}
.stepper__btn:first-child{border-right:0;border-radius:2px 0 0 2px}
.stepper__btn:last-child{border-left:0;border-radius:0 2px 2px 0}
.stepper__btn:hover{background:var(--navy);color:#fff}
.gallery .slot svg{color:var(--tint,var(--mark))}
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--page);border-top:2px solid var(--navy)}
.stickybar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding-block:8px}
.stickybar__name{font:600 var(--t1)/1.2 var(--display);color:var(--navy)}
.stickybar .btn{flex:none}
.has-bar{padding-bottom:64px}
.buy__note{margin-top:12px}
.spec{width:100%;max-width:760px;border-collapse:collapse;text-align:left}
.spec th,.spec td{padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{width:200px;padding-right:16px;font-weight:600}

/* FAQ */
.faq{display:grid;gap:0;max-width:820px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding-block:12px;font:600 var(--t1)/1.25 var(--display);color:var(--navy);cursor:pointer}
.faq details p{padding-bottom:16px;max-width:64ch}
.faq details::details-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease-out,content-visibility .2s allow-discrete}
.faq details[open]::details-content{grid-template-rows:1fr}
.faq__a{min-height:0;overflow:hidden}

/* Account tabs: plain anchors with :target, so footer links open the right one */
.tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:2px solid var(--navy)}
.tabs a{padding:10px 20px;font:600 var(--t1)/1.1 var(--display);text-decoration:none;background:var(--steel)}
.tabs a:hover{text-decoration:underline;text-decoration-color:var(--orange)}
.tabs .tab-signin,.account:has(#create:target) .tab-create{background:var(--navy);color:#fff}
.account:has(#create:target) .tab-signin{background:var(--steel);color:var(--navy)}
.tab-panel{display:none}
#signin,#create:target{display:block}
#create:target ~ #signin{display:none}
.account{max-width:560px}
.soon{padding:10px 14px;margin-bottom:16px;background:var(--navy);color:#fff;font-weight:600;border-radius:2px}

/* Prose */
.prose{max-width:68ch}
.prose h2{margin-block:28px 8px;font-size:var(--t3)}
.prose ul{list-style:disc;padding-left:20px}
.prose li{margin-block:4px}

/* Mega-menu (built by site.js) */
.mega{position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--page);border-bottom:2px solid var(--navy);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .16s,transform .16s,visibility 0s .16s}
.mega.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mega__in{display:grid;grid-template-columns:minmax(0,640px) 216px;justify-content:space-between;gap:48px;padding-block:20px}
.mega__list{columns:2;column-gap:48px;align-self:start}
.nav .mega a{display:inline-block;padding:6px 0;color:var(--navy);font:500 var(--t0)/1.3 var(--body);text-decoration:underline;text-decoration-color:transparent;border:0;white-space:normal}
.nav .mega a:hover{text-decoration-color:var(--orange);text-decoration-thickness:2px}
.nav .mega :focus-visible{outline-color:var(--navy)}
.mega__list li{break-inside:avoid}
.mega__art{display:grid;place-items:center;aspect-ratio:2/1;background:var(--steel)}
.mega__art svg{width:42%;height:auto;color:var(--navy)}
.nav .mega .mega__all{margin-top:4px;font:600 var(--t1)/1.2 var(--display)}

/* Search suggestions (built by site.js) */
.suggest{position:absolute;left:0;right:0;top:100%;z-index:60;max-height:min(60vh,400px);overflow-y:auto;background:#fff;border:2px solid var(--navy);border-top:0}
.suggest[hidden]{display:none}
.suggest li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:9px 12px;cursor:pointer}
.suggest li[aria-selected=true],.suggest li:hover{background:var(--steel)}
.suggest mark{background:var(--orange);color:var(--navy)}
.suggest__type{flex:none;font-size:var(--t-1)}
.suggest__all{border-top:1px solid var(--line);font-weight:600;color:var(--navy)}

/* Cart drawer (built by site.js) */
.drawer{position:fixed;inset:0 0 0 auto;width:360px;max-width:100vw;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:var(--page);color:var(--ink);transform:translateX(100%);transition:transform .22s ease-out}
.drawer.open{transform:none}
.drawer::backdrop{background:var(--ink);opacity:0;transition:opacity .22s}
.drawer.open::backdrop{opacity:.55}
.drawer__in{height:100%;padding:16px 24px}
.drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.drawer__head h2{font-size:var(--t3)}
.drawer__x{display:grid;place-items:center;width:44px;height:44px;margin-right:-12px;background:none;border:0;color:var(--navy);cursor:pointer}
.drawer__x svg{width:16px;height:16px}
.drawer p{margin-bottom:12px}
.drawer--quote{width:440px}
.drawer__in{overflow-y:auto}
.drawer__body{padding-bottom:16px}
.form__two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
input[type=file]{width:100%;font-size:var(--t-1)}
.form-status{padding:10px 12px;font-weight:500}
.form-status--err{background:var(--steel);border-left:4px solid var(--orange)}
.field__err{font-size:var(--t-1);font-weight:500;margin:2px 0 0}
[aria-invalid=true]{border:2px solid var(--orange)}
.form-ok{padding:16px;background:var(--steel);border-left:4px solid var(--navy)}
.form-ok:focus{outline:0}
.form-ok h2{margin-bottom:8px;font-size:var(--t2)}
.form-ok p{margin-bottom:12px}
.draft{font-size:var(--t-1);font-weight:600;color:var(--muted)}
body:has(.drawer[open]){overflow:hidden}

/* Footer */
.site-footer{background:var(--navy);color:#fff;padding-block:44px 20px}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px}
.footer__cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:32px}
.footer__brand{display:flex;align-items:center;gap:10px;margin-bottom:12px;font:700 var(--t2)/1.1 var(--display);color:#fff}
.footer__brand img{width:44px;height:44px}
.site-footer h2{margin-bottom:8px;font-size:var(--t1);font-weight:600;color:#fff}
.site-footer li{padding-block:3px}
.legal{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:32px;padding-top:14px;border-top:1px solid rgba(255,255,255,.3);font-size:var(--t-1)}
.legal li{padding:0}
.legal li+li::before{content:"\00B7";margin-right:8px}

/* Narrowest desktop: 20px nav text cannot fit nine links in one row */
@media (min-width:1024px) and (max-width:1099px){.nav a{font-size:1.125rem}}
@media (min-width:1440px){
  :root{--nav-gap:40px}
}
@media (min-width:1600px){
  .hero__in{max-width:calc(var(--wide) + 2*var(--wide-pad));padding-inline:var(--wide-pad);grid-template-columns:minmax(0,1fr) minmax(0,640px)}
}

/* Tablet: nav moves into the menu, drawing drops, grids step down */
@media (max-width:1023px){
  .brands{--brand-cols:4}
  :root{--header:73px;--wide-pad:var(--gutter)}
  .bar{gap:16px}
  .search{flex-basis:0;min-width:0;max-width:none}
  .mark{width:38px;height:40px}
  .wordmark{width:97px;height:40px}
  .nav{display:none}
  .menu{display:block}
  .hero__in{grid-template-columns:minmax(0,1fr);padding-block:32px}
  .door-wrap{display:none}
  .grid--4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--4.grid--cats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .with-side{grid-template-columns:200px minmax(0,1fr);gap:24px}
  .with-side .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-list{grid-template-columns:minmax(0,1fr)}
  .grid--cats .tile h3{font-size:var(--t1)}
  .split,.buy{gap:32px}
  .footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  :root{--header:113px}
  .bar{flex-wrap:wrap;gap:8px 12px;min-height:0;padding-block:8px}
  .logo{margin-right:auto}
  .search{order:3;flex:0 0 100%}
  .tools .tool span.label{display:none}
  .buy{grid-template-columns:minmax(0,1fr)}
  .thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* The full notice sentence stops fitting one line here */
@media (max-width:700px){.notice__more{display:none}}

/* Phone: search takes its own row */
@media (max-width:639px){
  :root{--section:48px;--gutter:16px;--header:113px}
  .notice{font-size:14px}
  h1{font-size:var(--t4)}
  h2{font-size:var(--t3)}
  .search button{padding:0 16px}
  .tools{gap:4px}
  .tool{justify-content:center;min-width:44px}
  .tool span.label{display:none}
  .q-long{display:none}
  .q-short{display:inline}
  .btn.tool-quote{padding:8px 10px;font-size:1rem}
  .form__two{grid-template-columns:minmax(0,1fr)}
  .drawer--quote{width:100vw}
  .stickybar__in{gap:12px}
  .stickybar__name{font-size:var(--t0)}
  .stickybar__meta{font-size:var(--t-1)}
  .notice__in{justify-content:space-between;gap:8px;text-align:left}
  .grid--3,.grid--4,.grid--4.grid--cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .card__body{padding:10px 12px 12px}
  .card h3,.card h2{font-size:var(--t1)}
  .btn--block{padding-inline:8px}
  .brands{--brand-cols:3}
  .why,.split{grid-template-columns:minmax(0,1fr)}
  .with-side{grid-template-columns:minmax(0,1fr)}
  .filters{order:2}
  .thumbs{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .buy__opts{gap:12px}
  .spec th{width:120px}
  .panel{padding:16px}
  .footer__cols{grid-template-columns:minmax(0,1fr);gap:24px}
  .tile--desc{grid-template-columns:112px minmax(0,1fr)}
  .search input::placeholder{font-size:var(--t-1)}
}
/* Small phones: logo and four controls must share one row */
@media (max-width:420px){
  .bar{column-gap:6px}
  .mark{width:32px;height:34px}
  .wordmark{width:82px;height:34px}
  .logo{gap:5px}
  .tools{gap:0}
  .tool{min-width:38px}
  .menu summary{width:38px}
}
/* Very short screens: keep the header from eating the viewport */
@media (max-height:480px){.site-header{position:static}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}