:root{--accent:#0B6B3A;--gold:#D4A017;--navy:#0E1A2B;--muted:#4A5568;--soft:#F3F5F9;--line:#E4E8EF;--dark:#0B2A1A}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--navy);background:#fff;line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased}
img,video{max-width:100%}
a{color:var(--navy)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:10px 14px;z-index:100}
.skip:focus{left:8px}
.wrap{max-width:1200px;margin:0 auto}
header.top{padding:12px 20px;border-bottom:3px solid var(--gold);background:#fff}
header.top .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
header.top img{display:block;height:56px;width:auto}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px}
.nav a{text-decoration:none;font-weight:600;font-size:15px}
.nav a.btn{color:#fff;background:var(--accent);padding:12px 22px;border-radius:8px;font-weight:700}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;color:#fff;background:var(--accent);padding:15px 28px;border-radius:8px;border:1.5px solid var(--accent);font-family:inherit;font-size:16px;cursor:pointer}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn.light{background:#fff;color:var(--dark);border-color:#fff}
.btn svg{flex:none}
section.s{padding:84px 20px}
section.s.tint{background:var(--soft)}
section.s.dark{background:var(--dark);color:#fff}
section.s.dark p{color:#DCE8E0}
h1{margin:0;font-size:clamp(36px,5vw,58px);line-height:1.08;font-weight:800;letter-spacing:-.02em}
h2{margin:0;font-size:clamp(28px,3.4vw,38px);line-height:1.15;font-weight:800;letter-spacing:-.01em}
h3{margin:0;font-size:20px;font-weight:800}
p{margin:0}
.lead{font-size:19px;color:var(--muted);max-width:640px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.stack{display:flex;flex-direction:column;gap:18px}
.row{display:flex;flex-wrap:wrap;gap:24px}
.row>.grow{flex:1 1 300px;min-width:0}
.card{border:1px solid var(--line);border-radius:14px;padding:28px;background:#fff;display:flex;flex-direction:column;gap:12px}
.card p{color:var(--muted)}
.pill{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:4px 12px}
.pill.quiet{color:var(--muted);border-color:#9AA5B8}
.facts{display:flex;flex-wrap:wrap;gap:20px 56px}
.facts b{display:block;font-size:34px;font-weight:800}
.facts span{color:var(--muted)}
.video{width:100%;aspect-ratio:16/9;border-radius:16px;background:var(--navy);overflow:hidden;display:flex;align-items:center;justify-content:center;color:#B8C2D4;font-weight:600}
.video video,.video iframe{width:100%;height:100%;border:0;display:block}
.shots{display:flex;gap:12px;flex-wrap:wrap}
.shots .shot{flex:1 1 200px;aspect-ratio:4/3;background:var(--line);border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--muted)}
.shots img{width:100%;height:100%;object-fit:cover;display:block}
.tabs{display:flex;flex-wrap:wrap;gap:12px}
.tabs button{min-height:48px;padding:0 26px;font-size:16px;font-weight:700;font-family:inherit;border-radius:999px;cursor:pointer;background:#fff;color:var(--navy);border:1.5px solid #9AA5B8}
.tabs button[aria-pressed=true]{background:var(--accent);color:#fff;border-color:var(--accent)}
.panel[hidden]{display:none}
ul.ticks{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:var(--muted)}
details{border:1px solid var(--line);border-radius:12px;padding:18px 22px}
summary{font-size:18px;font-weight:700;cursor:pointer}
details p{margin-top:12px;color:var(--muted)}
.hero{background:var(--soft);padding:84px 20px 72px}
.step-n{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.badge-card{border:1px solid var(--line);border-radius:14px;padding:22px;background:#fff;display:flex;flex-direction:column;gap:6px}
.badge-card b{font-size:18px}
.badge-card .st{font-size:14px;font-weight:700;color:var(--accent)}
.person .avatar{width:56px;height:56px;border-radius:50%;background:var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;overflow:hidden;flex:none}
.person .avatar img{width:100%;height:100%;object-fit:cover}
form.contact{display:flex;flex-direction:column;gap:18px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px}
label{font-size:14px;font-weight:700;display:block;margin-bottom:6px}
input[type=text],input[type=email],input[type=tel],select,textarea{width:100%;padding:12px 14px;font:inherit;border:1px solid #9AA5B8;border-radius:8px;color:var(--navy);background:#fff}
.small{font-size:13px;color:var(--muted)}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.flash{padding:16px 20px;border-radius:10px;background:#E6F2EB;border:1px solid var(--accent);font-weight:600}
.flash.err{background:#FCEBEA;border-color:#B42318;color:#7A271A}
footer.bottom{padding:44px 20px;border-top:1px solid var(--line)}
footer.bottom .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px}
footer.bottom img{height:52px;width:auto;display:block;align-self:flex-start}
footer.bottom .links{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:flex-start}
footer.bottom .links a{font-size:15px;font-weight:600;text-decoration:none}
footer.bottom .links a.q{color:var(--muted)}
.wa-float{position:fixed;right:20px;bottom:20px;z-index:40;display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;color:#fff;background:var(--accent);padding:14px 20px;border-radius:999px;box-shadow:0 8px 22px rgba(14,26,43,.25)}
.banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;max-width:760px;margin:0 auto;background:#fff;border:1px solid #9AA5B8;border-top:3px solid var(--gold);border-radius:12px;padding:18px 20px;box-shadow:0 10px 30px rgba(14,26,43,.18);display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.banner[hidden]{display:none}
.banner p{flex:1 1 340px;font-size:14px;line-height:1.55}
.banner .btns{display:flex;flex-wrap:wrap;gap:10px}
.banner button{height:44px;padding:0 18px;font:700 14px inherit;font-family:inherit;border-radius:8px;cursor:pointer}
.banner .rej{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
.banner .acc{background:var(--accent);color:#fff;border:0}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.post-meta{font-size:14px;color:var(--muted)}
.richtext{max-width:760px}
.richtext h2{margin:34px 0 10px;font-size:26px}
.richtext h3{margin:24px 0 6px;font-size:20px}
.richtext p,.richtext li{margin:10px 0}
.richtext ul,.richtext ol{padding-left:22px}
.richtext table{border-collapse:collapse;width:100%}
.richtext th,.richtext td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.richtext a{color:var(--accent)}
.legal-hero{padding:56px 20px 36px;border-bottom:1px solid var(--line);background-image:radial-gradient(rgba(14,26,43,.07) 1px,transparent 1px);background-size:24px 24px}
.legal-hero .pill{display:inline-block}
.legal-hero h1{margin:18px 0 12px;font-size:clamp(32px,5vw,48px)}
.legal-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.legal-tabs a{padding:9px 16px;border:1px solid rgba(14,26,43,.14);border-radius:6px;background:#fff;font-size:13px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;text-decoration:none}
.legal-tabs a.on{background:var(--accent);border-color:var(--accent);color:#fff}
.summarybox{background:var(--soft);border:1px solid rgba(14,26,43,.14);border-left:4px solid var(--accent);border-radius:8px;padding:18px 22px;margin:0 0 28px}
.toc{border:1px solid rgba(14,26,43,.14);border-radius:8px;padding:18px 22px;margin:0 0 12px}
.toc h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.toc ol{margin:0;padding-left:22px;columns:2;column-gap:32px}
.toc a{text-decoration:none}
.status-banner{border:1px solid var(--accent);background:#E6F2EB;border-radius:14px;padding:22px 26px;font-size:22px;font-weight:800}
.status-banner.degraded,.status-banner.maintenance{background:#FFF6E0;border-color:#8A6A00}
.status-banner.outage{background:#FCEBEA;border-color:#B42318}
.state{font-weight:700;font-size:14px;padding:6px 14px;border-radius:999px;background:#E6F2EB;color:var(--accent)}
.state.degraded,.state.maintenance{background:#FFF6E0;color:#8A6A00}
.state.outage{background:#FCEBEA;color:#B42318}
.maint{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}
@media(max-width:720px){.toc ol{columns:1}section.s{padding:56px 20px}}
.legal-body{max-width:820px}
.summary{border-left:4px solid var(--accent);background:var(--tint,#F2F5F0);padding:16px 20px;border-radius:8px;margin-bottom:20px}
details.faq{border:1px solid var(--line);border-radius:10px;padding:14px 18px;background:#fff}
details.faq summary{font-weight:700;cursor:pointer}
.richtext table{border-collapse:collapse;width:100%}.richtext th,.richtext td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.contact-row{gap:28px 32px}
.ordiv{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;align-self:stretch}
.ordiv i{flex:1;width:1px;min-height:32px;background:#C5CCD8}
.ordiv b{font-size:12px;letter-spacing:.16em;color:var(--muted);border:1px solid #C5CCD8;border-radius:999px;padding:6px 12px;background:#fff}
@media(max-width:940px){.ordiv{flex-basis:100%;flex-direction:row}.ordiv i{width:auto;height:1px;min-height:0}}

/* ===== Minimal theme (overrides earlier rules) ===== */
:root{--accent:#0E5A3A;--navy:#0F1B2D;--muted:#5C6678;--soft:#F5F7F6;--line:#E6EAE8;--dark:#0B2A1A}
html{scroll-padding-top:84px}
body{background:#fff}
header.top{position:sticky;top:0;z-index:60;padding:0 20px;border:0;background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);transition:box-shadow .2s,border-color .2s;border-bottom:1px solid transparent}
header.top.scrolled{border-bottom-color:var(--line)}
header.top .wrap{height:68px;flex-wrap:nowrap;gap:24px}
header.top img{height:44px;width:auto}
header.top .wrap>a{font-size:17px;font-weight:800;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.nav{gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{font-size:14px;font-weight:600;color:var(--muted);padding:8px 14px;border-radius:999px;white-space:nowrap;transition:color .15s,background .15s}
.nav a:hover{color:var(--navy);background:var(--soft)}
.nav a[aria-current=true]{color:var(--navy);background:var(--soft)}
.nav a.btn{background:var(--navy);color:#fff;padding:9px 18px;border-radius:999px;border:0;font-size:14px;margin-left:8px}
.nav a.btn:hover{background:var(--accent);color:#fff}
.btn{padding:13px 24px;border-radius:999px;font-size:15px;font-weight:600;background:var(--navy);border-color:var(--navy);transition:background .15s,border-color .15s}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn.ghost{background:transparent;color:var(--navy);border-color:#C9D0CE}
.btn.ghost:hover{background:var(--soft);border-color:var(--navy);color:var(--navy)}
.btn.light{background:#fff;color:var(--dark)}
.hero{background:radial-gradient(900px 420px at 85% -10%,#E8F3EC 0,transparent 70%),#fff;padding:120px 20px 96px}
.hero-in{display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.hero h1{font-size:clamp(40px,6.4vw,76px);line-height:1.04;letter-spacing:-.035em;font-weight:800;max-width:15ch}
.hero .lead{font-size:clamp(18px,2vw,21px);max-width:46ch}
.hero-video{max-width:760px;margin-top:20px}
.hero-note{max-width:60ch}
.eyebrow{font-size:12px;letter-spacing:.16em;color:var(--accent)}
.lead{color:var(--muted)}
section.s{padding:112px 20px}
section.s.soft,section.s.tint{background:var(--soft)}
.sec-head{display:flex;flex-direction:column;gap:14px;max-width:640px;margin-bottom:56px}
h2{font-size:clamp(30px,4vw,46px);letter-spacing:-.025em;line-height:1.1}
h3{font-weight:700}
.card{border:0;border-top:1px solid var(--line);border-radius:0;padding:24px 0 0;background:transparent}
.cards3{gap:40px}
.plist{border-bottom:1px solid var(--line)}
.pitem{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 56px;padding:44px 0;border-top:1px solid var(--line)}
.pname{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.pname h3{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.025em}
.pbody{display:flex;flex-direction:column;gap:12px}
.pbody p{color:var(--muted);max-width:56ch}.pbody p b{color:var(--navy);font-weight:600}
.plinks{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:6px}
.plinks a{font-weight:600;text-decoration:none;color:var(--accent);font-size:15px}
.plinks a:hover{text-decoration:underline}
.pill{border:0;background:var(--soft);padding:5px 12px;color:var(--accent);letter-spacing:.06em}
.pill.quiet{color:var(--muted)}
section.s.soft .pill{background:#fff}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.chips li{display:flex;flex-direction:column;gap:2px;padding:16px 22px;border-radius:14px;background:#fff;min-width:150px}
.chips b{font-size:16px}.chips span{font-size:13px;color:var(--accent);font-weight:600}
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px 40px}
.person{display:flex;align-items:center;gap:16px}
.person .avatar{width:48px;height:48px;font-size:14px;background:var(--soft);color:var(--accent)}
.person b{display:block}.person span{display:block;font-size:14px;color:var(--muted)}.person small{display:block;font-size:12px;color:var(--muted)}
section.s.dark{background:var(--navy)}
form.contact{border:0;background:#fff;box-shadow:0 1px 2px rgba(15,27,45,.04),0 12px 40px rgba(15,27,45,.06);border-radius:20px}
form.contact h3{font-size:22px}
input[type=text],input[type=email],input[type=tel],select,textarea{border-color:#D3D9D7;border-radius:12px;padding:13px 14px}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
.wa-float{padding:12px 18px;font-size:14px;background:var(--navy)}
.wa-float:hover{background:var(--accent)}
footer.bottom{border-top:1px solid var(--line);padding:48px 20px}
.banner{border-radius:16px;border-top:1px solid #C9D0CE}
.banner .acc{border-radius:999px}.banner .rej{border-radius:999px}
@media(max-width:820px){
  section.s{padding:72px 20px}.hero{padding:72px 20px 64px}.sec-head{margin-bottom:36px}
  .pitem{grid-template-columns:minmax(0,1fr);padding:32px 0}
  header.top .wrap{height:60px;gap:12px}
}
@media(max-width:520px){.nav a:not(.btn){padding:8px 10px}.nav a.btn{margin-left:2px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

@media(max-width:520px){header.top img{height:38px}}
footer.bottom img{height:56px}
header.top .wrap{height:78px}
header.top img{height:60px}
html{scroll-padding-top:94px}
@media(max-width:520px){header.top .wrap{height:66px}header.top img{height:50px}}

/* ===== Sidebar layout, black and white ===== */
:root{--accent:#111111;--navy:#111111;--muted:#5A5A5A;--soft:#F6F6F6;--line:#E7E7E7;--dark:#111111;--gold:#C9A227}
.app{display:flex;min-height:100vh}
.content{flex:1;min-width:0}
.side{width:264px;flex:none;position:sticky;top:0;height:100vh;overflow-y:auto;padding:30px 20px 24px;border-right:1px solid var(--line);background:#fff;display:flex;flex-direction:column;gap:28px;z-index:60}
.side .brand{display:block}
.side .brand img{height:auto;width:150px;display:block}
.side .brand strong{font-size:18px}
.menu-btn,.topbar,.side-close,.drawer-cta,.backdrop{display:none}
.sidenav{display:flex;flex-direction:column;gap:4px}
.sidenav a{display:block;padding:11px 14px;border-radius:10px;text-decoration:none;font-weight:600;font-size:15px;color:var(--muted);transition:background .15s,color .15s}
.sidenav a:hover{background:var(--soft);color:#111}
.sidenav a.on{background:#111;color:#fff}
.sidenav a.cta{margin-top:10px;border:1.5px solid #111;color:#111;text-align:center}
.sidenav a.cta:hover{background:#111;color:#fff}
.sidenav a.cta.on{background:#111;color:#fff}
.side-bottom{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px 16px}
.side-bottom a{font-size:13px;font-weight:600;color:var(--muted);text-decoration:none}
.side-bottom a:hover{color:#111}
.hero{background:#fff;padding:110px 48px 88px}
.hero h1{max-width:16ch}
section.s{padding:104px 48px}
footer.bottom{padding:44px 48px}
.legal-hero{padding-left:48px;padding-right:48px}
.eyebrow{color:#111}
.btn{background:#111;border-color:#111}.btn:hover{background:#333;border-color:#333}
.btn.ghost{color:#111;background:transparent;border-color:#BDBDBD}.btn.ghost:hover{background:var(--soft);border-color:#111;color:#111}
.pill{background:var(--soft);color:#111}.pill.quiet{color:var(--muted)}
.plinks a,.richtext a{color:#111;text-decoration:underline;text-underline-offset:3px}
.chips b{color:#111}.chips span{color:var(--muted)}
.person .avatar{color:#111}
.wa-float{background:#111}.wa-float:hover{background:#333}
.banner .acc{background:#111}
.tabs button[aria-pressed=true]{background:#111;border-color:#111}
.step-n{background:#111}
.legal-tabs a.on{background:#111;border-color:#111}
section.s.dark{background:#111}
@media(max-width:900px){
  .app{display:block}
  .hero{padding:64px 20px 56px}section.s{padding:68px 20px}footer.bottom{padding:40px 20px}.legal-hero{padding-left:20px;padding-right:20px}
  html{scroll-padding-top:80px}
}
.person em{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:6px;max-width:34ch}
.person{align-items:flex-start}
.chips li{max-width:240px}.chips small{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.45}

/* ===== Design polish ===== */
/* Gold is for small highlights only (bars, dots, rules), never for text */
.eyebrow{display:inline-flex;flex-direction:column;gap:8px;align-items:flex-start}
.eyebrow::after{content:"";width:28px;height:3px;border-radius:2px;background:var(--gold)}
.pill::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:8px;vertical-align:1px}
.pill.quiet::before{background:#BDBDBD}
header.top,.banner{border-color:var(--line)}
.banner{border-top:3px solid var(--gold)}

/* Spacing rhythm: same section padding everywhere, more air above headings than below */
section.s{padding:96px 48px}
.hero{padding:104px 48px 88px}
.sec-head{gap:12px;margin-bottom:48px}
.sec-head h2{margin:0}
.richtext h2{margin:2.2em 0 .5em}.richtext h3{margin:1.8em 0 .4em}
.richtext h2:first-child,.richtext h3:first-child{margin-top:0}
.stack>h2,.stack>h3{margin-top:.6em;margin-bottom:0}

/* Product cards: equal height, same mark style, button pinned to the bottom */
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px;align-items:stretch}
.pcard{display:flex;flex-direction:column;gap:12px;padding:28px;border:1px solid var(--line);border-radius:16px;background:#fff}
.phead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.phead h3{font-size:22px;letter-spacing:-.01em;margin:0}
.phead .pill{margin-left:auto}
.phead.big h3,.phead.big .pname-s{font-size:30px;font-weight:800;letter-spacing:-.02em}
.ptag{margin:0;font-weight:700;color:var(--navy)}
.psum{margin:0;color:var(--muted);flex:1}
.pcard .plinks{margin-top:8px}
.pcard .plinks .btn{width:100%;text-align:center;text-decoration:none}
.btn.off{opacity:.55;pointer-events:none}
.mark{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:#111;color:#fff;font-weight:800;font-size:20px;line-height:1;overflow:hidden}
.phead.big .mark{width:52px;height:52px;font-size:24px}
.mark.m0{border-radius:50%}
.mark.m1{border-radius:10px}
.mark.m2{border-radius:14px 14px 14px 2px}
.mark img{width:100%;height:100%;object-fit:contain;background:#fff}

/* Footer in columns */
footer.bottom{padding:64px 48px 28px;background:#fff}
footer.bottom .fgrid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:40px;justify-content:initial}
footer.bottom .fbrand img{height:auto;width:130px}
.fcol{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.fcol h4{margin:0 0 4px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#111}
.fcol a{font-size:15px;color:var(--muted);text-decoration:none;display:inline-flex;gap:6px;align-items:center;padding:3px 0}
.fcol a:hover{color:#111;text-decoration:underline}
.fbar{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
footer.bottom .fbar{display:block}

/* Three-bar menu button */

@media(max-width:1100px){footer.bottom .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}footer.bottom .fbrand{grid-column:1/-1}}
@media(max-width:900px){
  section.s{padding:64px 20px}.hero{padding:64px 20px 56px}footer.bottom{padding:48px 20px 24px}
  .sec-head{margin-bottom:32px}
  .btn,.plinks a,.tabs button{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
  /* galleries swipe sideways */
  .shots{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:12px;padding-bottom:6px}
  .shots .shot{flex:0 0 82%;scroll-snap-align:center}
  .tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}.tabs button{flex:none}
}
@media(max-width:520px){footer.bottom .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}}

/* Line icons */
.ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;color:#111}
.ico svg{width:22px;height:22px}
.ico.sm{width:auto;height:auto;border:0;background:none;border-radius:0}
.ico.sm svg{width:19px;height:19px}
section.s.dark .ico{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.sidenav a{display:flex;align-items:center;gap:12px}
.sidenav a.cta{justify-content:center}
.crow{display:flex;gap:14px;align-items:flex-start}
.crow>div{min-width:0}

/* Icon beside the text, never stacked above it */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px 40px}
.facts>div{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center}
.facts>div>.ico{grid-row:1/span 2}
.facts>div>b{align-self:end;font-size:30px;line-height:1.1}
.facts>div>span{align-self:start;margin-top:2px}
.facts>div:not(:has(>.ico)){display:block}

.card:has(>.ico),.chips li:has(>.ico),.pt:has(>.ico){display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:6px;align-items:start}
.card:has(>.ico)>.ico,.chips li:has(>.ico)>.ico,.pt:has(>.ico)>.ico{grid-row:1/span 4;grid-column:1;background:var(--soft)}
.card:has(>.ico)>:not(.ico),.chips li:has(>.ico)>:not(.ico),.pt:has(>.ico)>:not(.ico){grid-column:2;margin:0}
.card{position:relative}
.card:has(>.ico)>.step-n{position:absolute;top:22px;right:0;width:26px;height:26px;font-size:13px}
.card:has(>.ico)>.step-n+h3{padding-right:34px}
.chips li:has(>.ico){min-width:260px}
section.s.dark .card:has(>.ico)>.ico{background:transparent}
@media(max-width:900px){
  .facts{grid-template-columns:minmax(0,1fr);gap:0}
  .facts>div{padding:18px 0;border-top:1px solid var(--line)}
  .facts>div:first-child{border-top:0;padding-top:0}
  .facts>div>b{font-size:26px}
  .chips{display:grid;grid-template-columns:minmax(0,1fr)}
  .chips li:has(>.ico){min-width:0;max-width:none}
  .card:has(>.ico){padding-top:20px}
}
.sidenav a .ico{color:inherit}

/* Product marks: real logo, or a line icon on black */
.mark,.ico.mark{width:52px;height:52px}
.phead.big .mark,.phead.big .ico.mark{width:60px;height:60px}
.ico.mark{background:#111;color:#fff;border:0}
.ico.mark svg{width:26px;height:26px}
.mark:has(img){background:#fff;border:1px solid var(--line);border-radius:14px}
.mark:has(img) img{padding:4px}
.ico.mark.m0{border-radius:14px}
.phead .pill{margin-left:0}.phead{row-gap:10px}

/* Icons inside buttons and social links */
.btn{gap:10px}
.btn .ico.sm svg,.btn>svg{width:18px;height:18px}
.soc{display:inline-flex;align-items:center;gap:10px;padding:11px 20px;min-height:44px;border:1px solid #BDBDBD;border-radius:999px;font-weight:600;text-decoration:none;background:#fff;color:#111}
.soc:hover{border-color:#111}
.side-bottom a{display:inline-flex;align-items:center;gap:6px}
.side-bottom .ico.sm svg{width:16px;height:16px}
.fbrand .links a{display:inline-flex;align-items:center;gap:8px}
.fbrand .links .ico.sm svg{width:17px;height:17px}
.btn .ico,.btn .ico.sm{color:inherit}
@media(max-width:900px){.panel .row .btn{width:100%}}

/* ===== Hamburger and slide-in drawer (900px and below) ===== */
.sub{display:none}
.bars{position:relative;display:block;width:22px;height:18px;color:inherit}
.bars i{position:absolute;left:0;width:22px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease,top .2s ease}
.bars i:nth-child(1){top:0}.bars i:nth-child(2){top:8px}.bars i:nth-child(3){top:16px}
.menu-btn[aria-expanded="true"] .bars i:nth-child(1){top:8px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .bars i:nth-child(3){top:8px;transform:rotate(-45deg)}
.menu-btn:focus-visible,.side-close:focus-visible,.sidenav a:focus-visible,.side-bottom a:focus-visible,.drawer-cta:focus-visible{outline:2px solid #111;outline-offset:2px}
html.menu-open{overflow:hidden}
@media(max-width:900px){
  .app{display:block}
  .topbar{display:flex;position:sticky;top:0;z-index:40;align-items:center;gap:6px;min-height:calc(60px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) max(12px,env(safe-area-inset-right,0px)) 0 max(8px,env(safe-area-inset-left,0px));background:#fff;border-bottom:1px solid var(--line)}
  .topbar .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;min-width:44px;padding:0;border:0;border-radius:12px;background:transparent;color:#111;cursor:pointer;flex:none}
  .topbar .brand{display:block;margin-right:auto}
  .topbar .brand img{height:40px;width:auto;display:block}
  .topbar .btn{min-height:44px;padding:0 18px;font-size:14px}
  .backdrop{display:block;position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .25s ease-out,visibility 0s .25s}
  .backdrop.show{opacity:1;visibility:visible;transition:opacity .25s ease-out,visibility 0s}
  .side{position:fixed;top:0;left:0;bottom:0;width:min(320px,85vw);height:100vh;height:100dvh;z-index:100;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:20px;padding:calc(16px + env(safe-area-inset-top,0px)) 18px calc(20px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));border:0;background:#fff;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;transform:translateX(-100%);visibility:hidden;transition:transform .25s ease-out,visibility 0s .25s;box-shadow:0 0 40px rgba(0,0,0,.18)}
  .side.open{transform:translateX(0);visibility:visible;transition:transform .25s ease-out,visibility 0s}
  .side-top{display:flex;align-items:center;justify-content:space-between;gap:12px;width:auto}
  .side .brand img{height:40px;width:auto}
  .side-close{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:0;border-radius:12px;background:transparent;color:#111;cursor:pointer}
  .side-close svg{width:22px;height:22px}
  .sidenav{display:flex;width:auto;padding:0;gap:2px}
  .sidenav a{min-height:48px;padding:12px 14px 12px 16px;position:relative}
  .sidenav a.on{background:var(--soft);color:#111}
  .sidenav a.on::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:2px;background:#111}
  .sidenav a.cta{margin-top:6px}
  .sidenav a.cta.on{background:#111;color:#fff}.sidenav a.cta.on::before{display:none}
  .sub{display:flex;flex-direction:column;margin:0 0 4px 26px;border-left:1px solid var(--line)}
  .sub a{min-height:44px;padding:10px 14px;font-weight:500;font-size:14px}
  .drawer-cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;margin-top:auto;width:100%}
  .side-bottom{margin-top:0;display:flex;flex-direction:column;gap:2px;padding-top:12px;border-top:1px solid var(--line)}
  .side-bottom .soc-row{display:flex;flex-wrap:wrap;gap:4px 8px}
  .side-bottom a{min-height:44px;padding:0 10px;font-size:14px}
  html{scroll-padding-top:76px}
}
.sub a{display:flex;align-items:center;gap:12px}
.sub .mark,.sub .ico.mark{width:30px;height:30px;font-size:14px;border-radius:9px}
.sub .mark.m0,.sub .ico.mark.m0{border-radius:50%}
.sub .ico.mark svg{width:16px;height:16px}
.sub .mark:has(img){border-radius:9px}
.sub .mark:has(img) img{padding:2px}
.sub a:hover .mark{opacity:.85}
.sidenav a .ico.mark,.sub .ico.mark{color:#fff}

/* Wordmark logos replace the product name */
.phead h3.wm{margin:0;line-height:0}
.phead h3.wm img,.phead .wmi{height:34px;width:auto;max-width:100%;display:block}
.phead.big h3.wm img,.phead.big .wmi{height:48px}
.sub a .wmi{height:22px;width:auto;display:block}
.phead h3.wm img,.phead .wmi{height:46px}
.phead.big h3.wm img,.phead.big .wmi{height:56px}
.sub a .wmi{height:28px}
.phead .wmi.hero-wm{height:72px}@media(max-width:900px){.phead .wmi.hero-wm{height:56px}}

/* Menu product names: plain text, or the logo standing in for the first letter */
.sub a .vname{display:inline-flex;align-items:center;gap:1px}
.sub a .vlogo{height:34px;width:auto;display:block;margin-right:-5px}
.sub a{gap:0}

/* Catalogue layout templates (chosen in the admin Catalogue builder) */
.panel.lay-media_right{flex-direction:row-reverse}
.panel.lay-stacked{flex-direction:column}.panel.lay-stacked>.grow{flex-basis:auto!important;width:100%}
.shots.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
@media(max-width:900px){.panel.lay-media_right{flex-direction:column}
  .shots.grid{display:grid;grid-template-columns:repeat(2,1fr);overflow:visible;padding-bottom:0}.shots.grid .shot{flex:none}}
.side-bottom .soc-row{display:flex;flex-wrap:wrap;gap:6px 18px;width:100%}