/* Kenmore Limited Site – layout and components. Tokens: tokens.css (from the handover's design_tokens.css). */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + var(--wp-admin--admin-bar--height,0px))}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.kls{margin:0;background:var(--ken-cream);color:var(--ken-body);font:400 var(--fs-body)/var(--lh-body) var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
.kls img{display:block;max-width:100%;height:auto}
:where(.kls) a{color:inherit}
.kls :focus-visible{outline:2px solid var(--ken-red);outline-offset:2px}
.kls main:focus{outline:0}
.skip{position:absolute;left:-999px;top:0;background:var(--ken-ink);color:#fff;padding:12px 16px;z-index:100}
.skip:focus{left:8px;top:8px}
.wrap{width:min(var(--container),100% - 2*var(--gutter));margin-inline:auto}
.wrap.narrow{width:min(var(--container-narrow),100% - 2*var(--gutter))}
/* Narrow columns start on the same left edge as every other section. */
.wrap.narrow{margin-left:max(var(--gutter),calc((100% - var(--container)) / 2))}
/* Contact page: heading and form sit in the centre of the page. */
.kls-contact .wrap.narrow{margin-inline:auto}
.vh,.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.display{font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:var(--lh-display);letter-spacing:var(--tracking-display);color:var(--ken-ink);margin:0}
.eyebrow{font:400 var(--fs-eyebrow)/1.2 var(--font-body);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--ken-red-text);margin:0 0 var(--sp-4)}
.on-dark .eyebrow,.on-red .eyebrow{color:#fff}
.on-dark .eyebrow.red{color:var(--ken-red)}
.red{color:var(--ken-red)}
.section{padding-block:var(--section-y)}
.on-dark{background:var(--ken-ink);color:#C9CCCF}.on-dark .display{color:#fff}
.on-red{background:var(--ken-red);color:#fff}.on-red .display{color:#fff}
.on-red :focus-visible,.on-dark :focus-visible{outline-color:#fff}
.cream2{background:var(--ken-cream-2)}
.white{background:#fff}
.lead{font-size:var(--fs-lead);color:var(--ken-ink);font-weight:400;margin-top:0}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 18px;font:400 15px/1 var(--font-body);text-decoration:none;border:0;cursor:pointer;border-radius:var(--radius)}
.btn-red{background:var(--ken-red);color:#fff}.btn-red:hover{background:var(--ken-red-dark)}
.btn-outline{border:1px solid currentColor;background:transparent;color:inherit}
.btn-white{background:#fff;color:var(--ken-ink)}
.arrow::after{content:"→";transition:transform var(--dur-fast) var(--ease-out)}
a:hover .arrow::after,.arrow:hover::after{transform:translateX(4px)}
.textlink{display:inline-flex;gap:10px;align-items:center;min-height:44px;font:400 15px/1 var(--font-body);color:var(--ken-ink);text-decoration:none;border-bottom:1px solid var(--ken-ink);margin-right:24px}
.textlink.back::before{content:"←"}

/* Header (§5.1) */
.hdr{position:sticky;top:var(--wp-admin--admin-bar--height,0px);z-index:50;height:var(--header-h);background:var(--ken-cream);transition:box-shadow var(--dur-fast)}
.hdr.scrolled{box-shadow:0 1px 0 var(--ken-line)}
.hdr .wrap{height:100%;display:flex;align-items:center;justify-content:space-between}
.hdr .logo img{height:44px;width:auto}
.nav{display:flex;gap:28px;align-items:center}
.nav a{font:400 14px/1 var(--font-body);color:var(--ken-ink);text-decoration:none;padding:15px 0}
.nav a.active{color:var(--ken-red-text)}
.nav a.btn-outline{padding:10px 14px;min-height:44px}
.menu-btn{display:none;align-items:center;gap:10px;background:none;border:0;font:600 14px var(--font-body);color:var(--ken-ink);min-height:44px;min-width:44px;cursor:pointer;padding:0 4px}
.mnav{position:fixed;inset:0;background:var(--ken-ink);color:#fff;z-index:100000;display:flex;flex-direction:column;padding:24px var(--gutter);overflow:auto}
.mnav[hidden]{display:none}
.mnav .close{align-self:flex-end;background:none;border:0;color:#fff;font:600 14px var(--font-body);min-height:44px;min-width:44px;cursor:pointer}
.mnav nav{display:flex;flex-direction:column;margin-top:var(--sp-6)}
.mnav nav a{font:700 40px/1.15 var(--font-display);text-transform:uppercase;color:#fff;text-decoration:none;padding:4px 0}
.mnav nav a.active{color:var(--ken-red)}
.mnav .meta{margin-top:auto;font-size:15px;color:#C9CCCF}
.mnav .meta a{display:inline-block;padding:10px 0;color:#fff}
@media (max-width:991px){.nav{display:none}.menu-btn{display:inline-flex}}

/* Home hero (§5.2) */
.hero{position:relative;height:100svh;min-height:640px;max-height:960px;overflow:hidden;color:#fff;display:flex;align-items:flex-end;background:var(--ken-ink)}
.hero img.bg{position:absolute;inset:-10% 0 0;width:100%;height:110%;object-fit:cover;will-change:transform}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(19,21,23,.7),rgba(19,21,23,.1))}
/* Kenmore 50 years mark, top right of the hero (comp). */
.hero .hero-mark-wrap{position:absolute;top:clamp(20px,2.4vw,48px);left:0;right:0;width:min(var(--container),100% - 2*var(--gutter));margin-inline:auto;z-index:2;display:flex;justify-content:flex-end;pointer-events:none}
.hero-mark{width:clamp(120px,15vw,280px);height:auto;filter:drop-shadow(0 2px 12px rgba(0,0,0,.25))}
.hero .wrap{position:relative;z-index:2;padding-bottom:clamp(120px,14vw,160px)}
.hero h1{font-size:var(--fs-display-xl);color:#fff}
.hero .btn{margin-top:var(--sp-6)}
.hero-stats{position:absolute;right:0;bottom:0;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(120px,170px))}
.hero-stats div{background:var(--ken-red);padding:16px 20px;border-left:1px solid rgba(255,255,255,.35)}
.hero-stats b{display:block;font:700 48px/1 var(--font-display);letter-spacing:var(--tracking-display)}
.hero-stats span{font:600 13px/1.2 var(--font-body)}
.hero video.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;pointer-events:none}
.hero video.bg.is-playing{opacity:1}
.hero-video-toggle{position:absolute;z-index:3;right:var(--gutter,24px);top:clamp(96px,12vh,128px);width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(19,21,23,.45);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.hero-video-toggle:hover{background:rgba(19,21,23,.7)}
.hero-video-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hero-video-toggle .i-pause{width:12px;height:14px;border-left:4px solid currentColor;border-right:4px solid currentColor}
.hero-video-toggle.is-paused .i-pause{width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent currentColor;margin-left:3px}
@media (prefers-reduced-motion:reduce){.hero video.bg{display:none}}
@media (max-width:767px){.hero-stats{left:0;grid-template-columns:repeat(3,1fr)}.hero-stats b{font-size:32px}.hero .wrap{padding-bottom:140px}}

/* Story */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8)}
.story-grid h2,.sec-head h2,.why-grid h2,.fp h2,.gnav h2,.engine-head{font-size:var(--fs-display-m)}
.quote{font-weight:600;margin:var(--sp-9) 0 0 auto;max-width:900px;border-top:1px solid var(--ken-line);padding-top:var(--sp-7);font-size:var(--fs-display-s);line-height:1.05}
@media (max-width:767px){.story-grid{grid-template-columns:1fr;gap:var(--sp-5)}}

/* Divisions grid (§5.7) */
.sec-head{display:grid;grid-template-columns:2fr 1fr;gap:var(--sp-6);align-items:end;margin-bottom:var(--sp-8)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.card{position:relative;display:block;overflow:hidden;min-height:340px;color:#fff;text-decoration:none;background:var(--ken-ink-2)}
.card img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-out)}
.card:hover img.photo,.card:focus-visible img.photo{transform:scale(1.04)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,21,23,0) 35%,rgba(19,21,23,.85))}
.card .txt{position:absolute;left:24px;right:24px;bottom:20px;z-index:2}
.card .num{font:600 18px/1 var(--font-display);color:var(--ken-red)}
.card h3{font:700 clamp(30px,3.6vw,52px)/.95 var(--font-display);letter-spacing:var(--tracking-display);text-transform:uppercase;margin:6px 0 8px}
.card .lk{font:400 14px/1.3 var(--font-body);display:inline-flex;gap:8px}
/* Logos sit straight on the photo, as in the comp (no white tile). */
.card .logo-tile{position:absolute;top:24px;left:24px;right:24px;z-index:2;display:flex;align-items:center;gap:20px}
.card .logo-tile img{height:52px;width:auto;max-width:200px;object-fit:contain;object-position:left center}
@media (max-width:767px){.card .logo-tile{top:16px;left:16px}.card .logo-tile img{height:40px;max-width:150px}}
.card.w{grid-column:span 2}
/* Card 07 (as the original): sits under the last two columns with blank space to the left, same height as the other rows; photo framed on the faces, logos at both ends. */
.card.full{grid-column:2/-1}
.card.full img.photo{object-position:center 30%}
.card.full .logo-tile{justify-content:space-between}
@media (max-width:767px){.cards{grid-template-columns:1fr}.card,.card.w,.card.full{grid-column:auto;min-height:0;aspect-ratio:4/3}.sec-head{grid-template-columns:1fr}}

/* Why Kenmore (§5.8) */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:center}
.why-grid h2{margin-bottom:var(--sp-5);font-size:clamp(2.25rem,1.2rem + 3.9vw,4.5rem)}
.statgrid{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(255,255,255,.35)}
.statgrid div{min-width:0;overflow-wrap:break-word;padding:24px;border:1px solid rgba(255,255,255,.35)}
.statgrid b,.strip b{display:block;font:700 var(--fs-stat)/1 var(--font-display);letter-spacing:var(--tracking-display);text-transform:uppercase}
.statgrid b{font-size:var(--fs-stat-xl)}
.statgrid span,.strip span{display:block;font:600 var(--fs-stat-label)/1.25 var(--font-body)}
@media (max-width:767px){.why-grid{grid-template-columns:1fr}}

/* Footprint (§5.9) */
.fp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr) minmax(0,.5fr);gap:var(--sp-5)}
#footprint .fp h2{font-size:clamp(2.25rem,.8rem + 4.2vw,5.6rem)}
.fp>*{min-width:0}
.fp h2{margin-bottom:var(--sp-5)}
/* Region filter: one segmented row above the map it controls; swipes sideways if a screen is too narrow. */
.chips{display:flex;margin:0 0 12px;border:1px solid var(--ken-ink);overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:1 0 auto;min-height:44px;padding:6px 14px;border:0;border-left:1px solid var(--ken-ink);background:transparent;color:var(--ken-ink);font:500 14px var(--font-body);cursor:pointer;border-radius:var(--radius);white-space:nowrap;transition:background-color var(--dur-fast),color var(--dur-fast)}
.chip:first-child{border-left:0}
.chip:hover{background:rgba(19,21,23,.06)}
.chip[aria-pressed=true]{background:var(--ken-ink);color:#fff}
.chip:focus-visible{outline-offset:-4px}
@media (max-width:480px){.chip{flex:1 1 auto;padding:6px 8px;font-size:13px}}
.fp-map{position:relative;background:#E6E6E2;margin-bottom:12px;aspect-ratio:3388/2225}
.fp-svg{display:block;width:100%;height:100%}
/* Caption inside the map box, bottom left (comp). */
.fp-caption{position:absolute;left:clamp(12px,2vw,24px);bottom:clamp(10px,1.6vw,20px);margin:0;font:400 clamp(12px,1vw,15px)/1.3 var(--font-body);color:var(--ken-muted);pointer-events:none}
.pin{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;border:0;background:transparent;cursor:pointer;padding:0}
.pin::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--ken-red);box-shadow:0 0 0 2px #fff;transition:transform var(--dur-fast)}
.pin:hover::after,.pin:focus-visible::after,.pin.open::after{transform:scale(1.3)}
.fp-svg .map-city{display:none}
/* Second set of town dots and name tags; the grey sea and area names in the same layer stay. */
.fp-svg .map-other [fill="#ed1c24"],.fp-svg .map-other [fill="#404040"],.fp-svg .map-other [fill="#ffffff"]{display:none}
.pin{transition:opacity var(--dur-fast),visibility var(--dur-fast)}
.pin.dim{display:none}
.pin .tip{display:none;position:absolute;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ken-ink);color:#fff;font:500 12px/1.4 var(--font-body);padding:8px 10px;white-space:nowrap;z-index:3;text-align:left;pointer-events:none}
.pin .tip em{font-style:normal;color:#C9CCCF}
.pin:hover .tip,.pin:focus-visible .tip,.pin.open .tip{display:block}
.pin.closed .tip{display:none}
/* Location list: screen-reader only on desktop (pins carry it visually); expandable below the map ≤ 991 px. */
.fp-list ul{margin:0;padding:0;background:#fff;border:1px solid var(--ken-line)}
.fp-toggle{display:none;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:12px 16px;background:#fff;border:1px solid var(--ken-ink);color:var(--ken-ink);font:600 15px/1.2 var(--font-body);text-align:left;cursor:pointer;border-radius:var(--radius)}
.fp-toggle::after{content:"+";font-size:20px;line-height:1}
.fp-toggle[aria-expanded=true]::after{content:"−"}
@media (min-width:992px){.fp-list{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:991px){.js .fp-toggle{display:flex}.js .fp-list:not(.open) ul{display:none}.js .fp-list.open ul{border-top:0}}
.fp-list li{list-style:none;padding:12px 16px;border-bottom:1px solid var(--ken-line);display:flex;justify-content:space-between;gap:12px;font-size:15px}
.fp-list li.dim{display:none}
.fp-list strong{color:var(--ken-ink)}
.fp-list small{color:var(--ken-muted);font-size:13px}
.fp-stats>div{margin-bottom:var(--sp-6);color:var(--ken-ink);font-weight:400}
.fp-stats b{font:700 72px/1 var(--font-display);letter-spacing:var(--tracking-display);color:var(--ken-red);display:block}
.fp-stats small{color:var(--ken-muted);font-size:var(--fs-small)}

/* Footprint as in the comp: copy centred beside the map, map tagged with the place names, stats in two aligned columns. */
.pin::after{inset:5px;background:#fff;border:4px solid var(--ken-red);box-shadow:none}
.pin .tag{position:absolute;left:50%;bottom:calc(100% - 3px);transform:translateX(-50%);background:#231F20;color:#fff;font:600 clamp(6px,.42vw,8px)/1 var(--font-body);text-transform:uppercase;letter-spacing:.03em;padding:3px 5px;white-space:nowrap;pointer-events:none}
.pin.tag-b .tag{bottom:auto;top:calc(100% - 3px)}
.pin.tag-r .tag,.pin.tag-l .tag{bottom:auto;top:50%;transform:translateY(-50%)}
.pin.tag-r .tag{left:calc(100% - 3px)}
.pin.tag-l .tag{left:auto;right:calc(100% - 3px)}
/* The tags name every pin on wider screens; phones keep tap-to-open tooltips instead. */
@media (min-width:768px){.pin .tip,.pin:hover .tip,.pin.open .tip{display:none}}
@media (max-width:767px){.pin .tag{display:none}}
#footprint .eyebrow{font-weight:600}
#footprint .fp>div:first-child>p:last-child{color:var(--ken-ink);font-size:16px;line-height:1.75}
@media (min-width:992px){
.fp{align-items:start}
.fp>div:first-child{align-self:center}
.fp-stats{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:16px}
.fp-stats .eyebrow{grid-column:1/-1}
.fp-stats>div{display:contents}
.fp-stats>div b{margin-bottom:var(--sp-5)}
.fp-stats .eyebrow{color:var(--ken-ink);padding-bottom:10px;border-bottom:1px solid var(--ken-ink);margin-bottom:var(--sp-5)}
.fp-stats{font-size:15px;line-height:1.4}
.fp-stats b{font-size:clamp(56px,5vw,84px)}
}
@media (max-width:991px){.fp{grid-template-columns:minmax(0,1fr)}.fp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}.fp-stats .eyebrow,.fp-stats small{grid-column:1/-1}.fp-stats b{font-size:48px}}
@media (max-width:480px){.pin .tip{white-space:normal;width:180px}}

/* Engine room (§5.10) */
.engine-head{margin-bottom:var(--sp-7)}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ken-line)}
.cols3>div{padding:28px;border-right:1px solid var(--ken-line)}.cols3>div:last-child{border-right:0}
.cols3 h3{font:700 29px/1.05 var(--font-display);letter-spacing:var(--tracking-display);text-transform:uppercase;color:var(--ken-ink);margin:0 0 10px}
.closing-row{display:grid;grid-template-columns:1fr 2fr;gap:var(--sp-7);border-top:2px solid var(--ken-red);margin-top:var(--sp-9);padding-top:var(--sp-7)}
.closing-row p{margin:0;font-size:var(--fs-small)}
/* Side note as in the comp: plain body text, airy lines, narrow column, centred against the statement. */
.closing-row p:not(.display){font:400 16px/1.75 var(--font-body);color:var(--ken-ink);max-width:22em;align-self:center}
.closing-sec{padding-top:0}
.closing-sec .closing-row{margin-top:0}
.closing-row p.display{font-size:var(--fs-display-s);font-weight:600;line-height:1.05}
@media (max-width:767px){.cols3{grid-template-columns:1fr}.cols3>div{border-right:0;border-bottom:1px solid var(--ken-line)}.cols3>div:last-child{border-bottom:0}.closing-row{grid-template-columns:1fr}}

/* Contact block (§5.12) + footer (§5.13) */
.contact{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--sp-7);align-items:end}
.contact h2{font-size:var(--fs-display-l);color:#fff}
/* Inner pages: "Connect with Kenmore" on one line (comp), address column beside it. */
@media (min-width:992px){body:not(.kls-home) .contact{grid-template-columns:auto minmax(260px,1fr)}body:not(.kls-home) .contact h2{white-space:nowrap;font-size:clamp(3rem,1rem + 4.6vw,5.5rem)}}
.kls-home .contact h2{font-size:clamp(2.75rem,1.6rem + 5vw,6rem)}  /* home comp 79.6 pt ≈ 96 px */
.contact address{font-style:normal;color:#fff;line-height:1.7}
.contact address .addr-line{display:inline-block;padding:4px 0}
.contact .btn{margin-top:var(--sp-5)}
.ftr{background:var(--ken-ink);color:#9A9EA2;font-size:var(--fs-small);padding-block:var(--sp-7);border-top:1px solid var(--ken-line-dark)}
.ftr .wrap{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ftr img{height:64px;width:auto}
.ftr nav{display:flex;flex-wrap:wrap;gap:16px}
.ftr-end{display:flex;align-items:center;gap:24px}
/* One grid for the whole footer: logo | copyright | links. The legal links sit under the footer
   links and start exactly where "Our story" starts. */
.ftr{padding-bottom:var(--sp-4)}
.ftr .wrap.ftr-grid{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:0 24px}
.ftr-copy{margin:0;font-size:13px;color:#9A9EA2;text-align:center}
/* Contact block and footer read as one dark section on every page, as in the comps. */
#contact{padding-bottom:var(--sp-5)}
/* Address block sits centred in its column and level with the headline (comp). */
@media (min-width:992px){.contact>div:last-child{justify-self:center;padding-top:calc(var(--sp-6) + 6px)}}
@media (min-width:768px){.contact{align-items:start}}
.ftr{border-top:0;padding-top:0}
.ftr .wrap.ftr-grid{align-items:end}
.ftr img{height:clamp(88px,9vw,150px)}
.ftr-rule{grid-column:1/-1;width:100%;margin:var(--sp-5) 0 var(--sp-3);border:0;border-top:1px solid var(--ken-line-dark)}
.ftr-legal{grid-column:3;justify-self:start;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px}
.ftr .ftr-legal a{color:#C9CCCF;padding:6px 0;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color var(--dur-fast),text-decoration-color var(--dur-fast)}
.ftr .ftr-legal a:hover,.ftr .ftr-legal a[aria-current]{color:#fff;text-decoration-color:var(--ken-red)}
@media (max-width:767px){
  .ftr .wrap.ftr-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .ftr-copy{text-align:left}
  .ftr-rule{margin:var(--sp-2) 0 0}
  .ftr-legal{grid-column:1}
}
.ftr a{color:#fff;text-decoration:none;display:inline-block;padding:12px 0}
@media (max-width:767px){.contact{grid-template-columns:1fr}.ftr .wrap{flex-direction:column;align-items:flex-start}}

/* Division page (§5.3–5.6) */
.crumb{font-size:13px;color:var(--ken-muted);background:#fff;padding:10px 0}
.crumb a{text-decoration:none;color:var(--ken-ink)}
.dhero{display:grid;grid-template-columns:1fr 1fr;min-height:560px;background:var(--ken-cream)}
.dhero .l{padding:clamp(48px,6vw,96px) var(--gutter) 48px max(var(--gutter),calc((100vw - var(--container))/2))}
.dhero h1{font-size:var(--fs-display-l);margin-bottom:var(--sp-4)}
.brandline{color:var(--ken-red-text);font:600 14px var(--font-body);margin:0 0 var(--sp-3)}
/* Logos sit straight on the cream, as in the comps (no white tile). */
.dhero .logos{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin:var(--sp-6) 0 var(--sp-5)}
.dhero .logo{display:inline-block}
.dhero .logo img{height:56px;width:auto;max-width:240px;object-fit:contain}
.dhero>*,.body-grid>*,.close-st>*{min-width:0}
.dhero .r{position:relative;overflow:hidden;min-height:320px;background:var(--ken-ink-2)}
.dhero .r img{position:absolute;inset:-6% 0 0;width:100%;height:112%;object-fit:cover;will-change:transform}
@media (max-width:991px){.dhero{grid-template-columns:minmax(0,1fr);min-height:0}.dhero .r{order:-1;aspect-ratio:16/10;min-height:0}.dhero .l{padding:32px var(--gutter)}}
.strip{background:var(--ken-red);color:#fff;display:grid;grid-template-columns:repeat(3,1fr)}
.strip div{min-width:0;overflow-wrap:break-word;padding:28px var(--gutter);text-align:center;border-left:1px solid rgba(255,255,255,.35)}
.strip div:first-child{border-left:0}
@media (max-width:767px){.strip{grid-template-columns:1fr}.strip div{text-align:left;border-left:0;border-top:1px solid rgba(255,255,255,.35)}.strip div:first-child{border-top:0}}
.body-grid{display:grid;grid-template-columns:7fr 1fr 4fr}
.body-grid .txt{grid-column:1;max-width:70ch}.body-grid .gal{grid-column:3}
.body-grid h2{font:700 var(--fs-h3)/1 var(--font-display);letter-spacing:var(--tracking-display);text-transform:uppercase;color:var(--ken-ink);margin:var(--sp-6) 0 var(--sp-3)}
.body-grid h2:first-child{margin-top:0}
.body-grid p{margin:0 0 1em}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:4px;align-content:start}
.gal img{width:100%;height:100%;object-fit:cover}
.gal .g1{grid-column:1/-1;aspect-ratio:3/2}.gal .g2,.gal .g3{aspect-ratio:1}.gal .g4{grid-column:1/-1;aspect-ratio:2/1}
.gal-2 .g2{grid-column:1/-1;aspect-ratio:3/2}
.close-st{display:grid;grid-template-columns:7fr 1fr 4fr;margin-top:var(--sp-8);border-top:2px solid var(--ken-red);padding-top:var(--sp-6)}
.close-st p{grid-column:1;font-size:var(--fs-display-s);font-weight:600;line-height:1.05}
.close-st img{grid-column:3;width:100%;aspect-ratio:4/3;object-fit:cover}
.oem{display:block;width:100%;height:auto;margin-top:var(--sp-6)}
@media (max-width:991px){
  .body-grid,.close-st{grid-template-columns:minmax(0,1fr)}
  .body-grid .gal,.close-st img{grid-column:1}
  .close-st img{margin-top:var(--sp-5)}
  .gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:var(--sp-6)}
  .gal img{flex:0 0 80%;width:80%;height:auto;aspect-ratio:4/3!important;scroll-snap-align:start}
}

/* Group navigator (§5.11) */
.gnav{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7)}
.gnav h2{margin-bottom:var(--sp-5);font-size:clamp(2.25rem,1.2rem + 3.1vw,3.75rem)}
.gnav ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--ken-line)}
.gnav li a{display:flex;gap:16px;align-items:center;min-height:48px;padding:10px 0;border-bottom:1px solid var(--ken-line);text-decoration:none;font:400 15px var(--font-body);color:var(--ken-ink)}
.gnav li a:hover{color:var(--ken-red-text)}
.gnav li a[aria-current]{color:var(--ken-red-text);text-transform:uppercase;letter-spacing:.2em}
@media (max-width:767px){.gnav{grid-template-columns:1fr}}

/* Static pages, contact form (§5.14), 404 */
.page-head{padding-bottom:var(--sp-7)}
.page-head h1{font-size:var(--fs-display-l)}
.prose{max-width:70ch}
.prose h2,.prose h3{font-family:var(--font-display);text-transform:uppercase;color:var(--ken-ink);line-height:1.05;letter-spacing:var(--tracking-display)}
.prose h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);margin:2.2em 0 .6em;padding-top:.8em;border-top:1px solid var(--ken-line)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:clamp(1.2rem,1.05rem + .5vw,1.45rem);margin:1.6em 0 .5em}
.prose p{margin:0 0 1em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3em}
.prose li{margin-bottom:.5em;padding-left:.2em}
.prose li::marker{color:var(--ken-red)}
.prose a{color:var(--ken-red-text);text-underline-offset:3px}
.prose strong{color:var(--ken-ink)}
.kform-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--sp-5)}
.field{margin-bottom:var(--sp-5)}
.field label{display:block;font:600 14px/1.3 var(--font-body);color:var(--ken-ink);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:10px 12px;font:400 var(--fs-body)/1.4 var(--font-body);color:var(--ken-ink);background:#fff;border:1px solid #8A8E92;border-radius:var(--radius)}
.field textarea{resize:vertical}
.field.has-error input,.field.has-error textarea{border-color:var(--ken-red-text)}
.field .error{color:var(--ken-red-text);font:600 14px/1.3 var(--font-body);margin:6px 0 0}
.form-alert{border-left:4px solid var(--ken-red-text);background:var(--ken-cream);padding:12px 16px;margin-bottom:var(--sp-5);color:var(--ken-ink)}
.kform-grid .field.full{grid-column:1/-1}
.field .help{margin:6px 0 0;font-size:var(--fs-small);color:var(--ken-muted)}
.field-check label{display:flex;align-items:flex-start;gap:10px;font-weight:500;cursor:pointer}
.field-check input{width:20px;height:20px;min-height:0;margin-top:1px;accent-color:var(--ken-red);flex:none}
.field.has-error select{border-color:var(--ken-red-text)}
/* Contact form picture check */
.kcap{margin:0 0 var(--sp-5);padding:0;border:0}
.kcap legend{font:600 14px/1.3 var(--font-body);color:var(--ken-ink);margin-bottom:10px;padding:0}
.kcap-grid{display:grid;grid-template-columns:repeat(6,minmax(0,64px));gap:8px}
.kcap-opt{position:relative;cursor:pointer}
.kcap-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.kcap-ico{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:1px solid #8A8E92;background:#fff;color:var(--ken-ink);transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast),transform var(--dur-fast)}
.kcap-opt:hover .kcap-ico{border-color:var(--ken-ink);transform:translateY(-2px)}
.kcap-opt input:focus-visible+.kcap-ico{outline:2px solid var(--ken-red);outline-offset:2px}
.kcap-opt input:checked+.kcap-ico{background:var(--ken-red);border-color:var(--ken-red);color:#fff}
.kcap.has-error .kcap-ico{border-color:var(--ken-red-text)}
@media (max-width:480px){.kcap-grid{grid-template-columns:repeat(3,minmax(0,72px))}}
.req-note{font-size:var(--fs-small);color:var(--ken-muted)}
.form-success .display{font-size:var(--fs-display-s);font-weight:600;line-height:1.05;border-top:2px solid var(--ken-red);padding-top:var(--sp-5)}
@media (max-width:767px){.kform-grid{grid-template-columns:1fr}}
.notfound{min-height:60vh;display:flex;align-items:center}
.notfound h1{font-size:var(--fs-display-xl);margin-bottom:var(--sp-5)}

/* Consent banner (analytics off until accepted) */
.consent{position:fixed;left:var(--gutter);right:var(--gutter);bottom:var(--gutter);z-index:90;max-width:560px;background:var(--ken-ink);color:#fff;padding:20px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.consent[hidden]{display:none}
.consent p{margin:0 0 var(--sp-4);font-size:15px}
.consent-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Staff entry point (footer) – discreet icon; compact account menu when signed in. */
.staff-link,.staff-menu summary{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:#9A9EA2;border-radius:50%;cursor:pointer;transition:color var(--dur-fast),background-color var(--dur-fast)}
.ftr a.staff-link{display:inline-flex;padding:0;color:#9A9EA2}
.staff-link:hover,.ftr a.staff-link:hover,.staff-menu summary:hover{color:#fff;background:rgba(255,255,255,.08)}
.staff-menu{position:relative}
.staff-menu summary{list-style:none}
.staff-menu summary::-webkit-details-marker{display:none}
.staff-avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--ken-red);color:#fff;font:600 12px/1 var(--font-body);letter-spacing:.02em}
.staff-pop{position:absolute;right:0;bottom:calc(100% + 8px);z-index:85;min-width:220px;background:#fff;color:var(--ken-ink);box-shadow:0 12px 32px rgba(0,0,0,.28);padding:8px 0;text-align:left}
.staff-pop .staff-who{margin:0;padding:10px 16px 12px;border-bottom:1px solid var(--ken-line);font-size:14px;line-height:1.35}
.staff-pop .staff-who strong{display:block;color:var(--ken-ink)}
.staff-pop .staff-who span{color:var(--ken-muted);font-size:13px}
.ftr .staff-pop a{display:block;padding:10px 16px;color:var(--ken-ink);font-size:14px}
.ftr .staff-pop a:hover{background:var(--ken-cream)}
@media (max-width:767px){.ftr-end{width:100%;justify-content:space-between}.staff-pop{right:auto;left:0}}
/* "Edit" shortcuts for signed-in staff, and the preview banner. */
.kls-edit{position:absolute;top:12px;right:12px;z-index:5;display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;background:var(--ken-ink);color:#fff!important;font:500 13px/1 var(--font-body);text-decoration:none;opacity:0;transition:opacity var(--dur-fast)}
.kls-editable{position:relative}
.kls-editable:hover>.kls-edit,.kls-edit:focus-visible{opacity:1}
@media (hover:none){.kls-edit{opacity:1}}
.kls-preview-bar{position:fixed;left:0;right:0;bottom:0;z-index:95;background:#FFF3B0;color:#3D3200;font:500 14px/1.4 var(--font-body);padding:10px var(--gutter);text-align:center;box-shadow:0 -2px 12px rgba(0,0,0,.15)}
.kls-preview-bar a{color:inherit;font-weight:600;margin-left:8px}

/* Back to top: shows after the first screen; ink with a light edge so it reads on cream, dark and red. */
.to-top{position:fixed;right:var(--gutter);bottom:var(--gutter);z-index:80;width:48px;height:48px;display:flex;align-items:center;justify-content:center;padding:0;background:var(--ken-ink);color:#fff;border:1px solid rgba(255,255,255,.45);border-radius:var(--radius);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out),background-color var(--dur-fast),visibility 0s linear var(--dur-med)}
.to-top.show{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.to-top:hover{background:var(--ken-red);border-color:var(--ken-red)}
.to-top:focus-visible{outline:2px solid var(--ken-red);outline-offset:2px}
body:has(.consent:not([hidden])) .to-top{bottom:calc(var(--gutter) + 150px)}

/* Reveal motion (§6) */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}.card img.photo{transition:none}}

/* m² / m³ in figures: small and raised beside the unit, as the comp. */
.stat-n{font-style:inherit}
sup.unit-power{font-size:.38em;line-height:0;vertical-align:top;position:relative;top:.75em;margin-left:.04em}