@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/manrope-600.woff2) format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/manrope-700.woff2) format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/manrope-800.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-500.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-700.woff2) format('woff2');}

:root{
  --ink:#0E1419; --ink-2:#39424C; --muted:#69737F; --line:#E4E8ED; --line-2:#EEF1F5;
  --bg:#FFFFFF; --bg-2:#F6F8FA; --bg-3:#EDF1F5;
  --blue:#0B63CE; --blue-dk:#084C9E; --blue-soft:#EAF2FD; --blue-line:#CBE0F8;
  --green:#0F7A57; --green-soft:#E8F5F0;
  --amber:#B8770B; --amber-soft:#FFF7E8; --amber-line:#E8B45C;
  --r:14px; --r-sm:10px; --r-lg:20px;
  --shadow-sm:0 1px 2px rgba(14,20,25,.05), 0 2px 8px rgba(14,20,25,.05);
  --shadow:0 2px 6px rgba(14,20,25,.06), 0 14px 34px rgba(14,20,25,.08);
  --shadow-lg:0 30px 70px rgba(14,20,25,.16);
  --max:1200px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);
}
img{max-width:100%; display:block}
h1,h2,h3,h4{font-family:'Manrope','Inter',system-ui,sans-serif; margin:0; line-height:1.12; letter-spacing:-.02em; font-weight:800}
h1{font-size:clamp(2.1rem,4.4vw,3.5rem)}
h2{font-size:clamp(1.7rem,3vw,2.5rem)}
h3{font-size:1.18rem; font-weight:700; letter-spacing:-.01em}
p{margin:0 0 1rem}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px; border-radius:6px}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-999px; top:8px; background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px; z-index:200}
.skip:focus{left:16px}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1px solid transparent;
  border-radius:999px; padding:13px 24px; font-weight:700; font-size:.95rem; cursor:pointer; transition:.18s ease;
  font-family:'Manrope',sans-serif; letter-spacing:-.01em; text-decoration:none}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 8px 20px rgba(11,99,206,.26)}
.btn-primary:hover{background:var(--blue-dk); transform:translateY(-1px)}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink); background:var(--bg-2)}
.btn-dark{background:var(--ink); color:#fff}
.btn-dark:hover{background:#000}
.btn-sm{padding:9px 16px; font-size:.86rem}
.btn-lg{padding:16px 30px; font-size:1.02rem}
.btn[disabled]{opacity:.42; cursor:not-allowed; transform:none}

/* ---------- top bar + header ---------- */
.utility{background:var(--ink); color:#C9D2DC; font-size:.8rem; padding:8px 0}
.utility .wrap{display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.utility a{color:#fff; font-weight:600}
.utility .u-left{display:flex; align-items:center; gap:10px}
.dot{width:6px; height:6px; border-radius:50%; background:#3FBF8F; display:inline-block; flex:none}
header.site{position:sticky; top:0; z-index:90; background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); transition:box-shadow .2s ease}
header.site.stuck{box-shadow:0 6px 24px rgba(14,20,25,.08)}
.nav{display:flex; align-items:center; gap:22px; height:74px}
.nav .logo img{height:26px; width:auto}
.nav nav{display:flex; gap:22px; margin-left:auto}
.nav nav a{color:var(--ink-2); font-weight:600; font-size:.93rem; padding:6px 0; border-bottom:2px solid transparent}
.nav nav a:hover{color:var(--ink); border-color:var(--blue); text-decoration:none}
.nav .cta{display:flex; align-items:center; gap:10px}
.basket-btn{position:relative; border:1px solid var(--line); background:#fff; border-radius:999px; padding:10px 16px;
  font-weight:700; font-size:.88rem; cursor:pointer; display:inline-flex; gap:8px; align-items:center}
.basket-btn:hover{border-color:var(--ink)}
.badge{background:var(--blue); color:#fff; border-radius:999px; min-width:20px; height:20px; font-size:.72rem;
  display:inline-flex; align-items:center; justify-content:center; padding:0 6px; font-weight:800}
.menu-toggle{display:none; border:1px solid var(--line); background:#fff; border-radius:10px; padding:9px 12px; cursor:pointer}
.mobile-nav{display:none; border-top:1px solid var(--line); background:#fff}
.mobile-nav a{display:block; padding:13px 24px; border-bottom:1px solid var(--line-2); color:var(--ink); font-weight:600}
.mobile-nav.open{display:block}

/* ---------- hero ---------- */
.hero{padding:52px 0 40px; background:
  radial-gradient(900px 380px at 8% -10%, #EFF5FD 0%, rgba(255,255,255,0) 62%),
  linear-gradient(180deg,#FFFFFF 0%, #F7F9FB 100%)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:52px; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:9px; background:var(--blue-soft); color:var(--blue-dk);
  border:1px solid var(--blue-line); padding:7px 14px; border-radius:999px; font-size:.77rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; margin-bottom:20px}
.hero h1{font-size:clamp(2rem,3.7vw,3.05rem)}
.hero h1 span.hl{color:var(--blue)}
.lede{font-size:1.08rem; color:var(--ink-2); max-width:33em; margin-top:18px}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.hero-points{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 20px; margin-top:28px;
  padding-top:22px; border-top:1px solid var(--line)}
.hero-points div{display:flex; gap:10px; font-size:.9rem; color:var(--ink-2); font-weight:600}
.tick{flex:none; width:20px; height:20px; border-radius:50%; background:var(--green-soft); color:var(--green);
  display:grid; place-items:center; font-size:.68rem; font-weight:900; margin-top:2px}
.mosaic{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:auto 150px; gap:12px}
.mosaic figure{margin:0; position:relative; overflow:hidden; border-radius:var(--r); background:var(--bg-3)}
.mosaic img{width:100%; height:100%; object-fit:cover}
.m-prod img{transform:scale(1.08); transform-origin:center top}
.m-main{grid-column:1 / -1; aspect-ratio:16/10; box-shadow:var(--shadow)}
.m-main figcaption{position:absolute; left:14px; bottom:14px; background:rgba(255,255,255,.94); border-radius:999px;
  padding:7px 14px; font-size:.8rem; font-weight:700; display:flex; align-items:center; gap:8px; color:var(--ink)}
.m-prod figcaption{position:absolute; left:10px; bottom:10px; background:rgba(14,20,25,.78); color:#fff; border-radius:999px;
  padding:4px 11px; font-size:.74rem; font-weight:700}
.m-stat{background:var(--blue); color:#fff; border-radius:var(--r); padding:18px; display:flex; flex-direction:column; justify-content:flex-end}
.m-stat .k{font-family:'Manrope',sans-serif; font-weight:800; font-size:2rem; letter-spacing:-.03em; line-height:1}
.m-stat .v{font-size:.82rem; line-height:1.4; margin-top:8px; color:#DCE9FB}
.m-prod:nth-of-type(2){grid-column:1}
.quick{margin-top:40px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  padding:14px 14px 14px 22px; display:flex; align-items:center; gap:20px}
.quick-lbl{flex:none}
.quick-lbl b{display:block; font-family:'Manrope',sans-serif; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue)}
.quick-lbl span{font-family:'Manrope',sans-serif; font-weight:800; font-size:1.02rem}
.quick-opts{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; flex:1}
.quick-opts button{border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:10px 16px; font-weight:700;
  font-size:.86rem; cursor:pointer; transition:.15s; font-family:'Manrope',sans-serif}
.quick-opts button:hover{border-color:var(--blue); background:var(--blue-soft); color:var(--blue-dk)}

/* ---------- partners ---------- */
.partners{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; padding:26px 0}
.partners .label{text-align:center; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:700; margin-bottom:18px}
.partner-row{display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap}
.partner-row img{height:34px; width:auto; opacity:.78; filter:grayscale(1); transition:.2s}
.partner-row img:hover{opacity:1; filter:none}

/* ---------- generic section ---------- */
section{padding:84px 0}
.sec-head{max-width:720px; margin-bottom:40px}
.sec-tag{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue);
  font-weight:800; margin-bottom:12px}
.sec-head p{color:var(--ink-2); font-size:1.05rem; margin-top:16px}
.alt{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

/* ---------- flagged (for discussion) ---------- */
.flag{position:relative; outline:1.5px dashed var(--amber-line); outline-offset:6px; border-radius:6px}
.flag-note{display:inline-flex; align-items:center; gap:7px; background:var(--amber-soft); color:var(--amber);
  border:1px solid var(--amber-line); border-radius:999px; padding:5px 12px; font-size:.74rem; font-weight:700; margin-bottom:14px}

/* ---------- finder ---------- */
.finder{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden}
.finder-top{display:flex; align-items:center; gap:16px; padding:20px 26px; border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,#FBFCFE,#fff); flex-wrap:wrap}
.steps{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.step-pip{display:flex; align-items:center; gap:8px; font-size:.82rem; font-weight:700; color:var(--muted)}
.step-pip i{width:24px; height:24px; border-radius:50%; background:var(--bg-3); color:var(--muted); display:grid;
  place-items:center; font-style:normal; font-size:.78rem; font-weight:800}
.step-pip.active{color:var(--ink)} .step-pip.active i{background:var(--blue); color:#fff}
.step-pip.done i{background:var(--green-soft); color:var(--green)}
.step-sep{width:18px; height:1px; background:var(--line)}
.finder-body{padding:30px 26px}
.q{font-family:'Manrope',sans-serif; font-weight:800; font-size:1.4rem; letter-spacing:-.02em; margin-bottom:6px}
.q-sub{color:var(--muted); font-size:.92rem; margin-bottom:22px}
.opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:12px}
.opt{border:1.5px solid var(--line); background:#fff; border-radius:var(--r); padding:16px 18px; text-align:left;
  cursor:pointer; transition:.16s ease; display:flex; gap:13px; align-items:flex-start}
.opt:hover{border-color:var(--blue); background:var(--blue-soft); transform:translateY(-2px)}
.opt.sel{border-color:var(--blue); background:var(--blue-soft); box-shadow:0 0 0 3px rgba(11,99,206,.12)}
.opt .ico{flex:none; width:36px; height:36px; border-radius:9px; background:var(--bg-3); display:grid; place-items:center}
.opt .ico svg{width:19px; height:19px; stroke:var(--blue); fill:none; stroke-width:1.7}
.opt b{display:block; font-family:'Manrope',sans-serif; font-size:.96rem}
.opt small{color:var(--muted); font-size:.81rem; line-height:1.4; display:block; margin-top:2px}
.finder-foot{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 26px;
  border-top:1px solid var(--line-2); background:var(--bg-2); flex-wrap:wrap}
.progress{height:5px; background:var(--bg-3); border-radius:99px; overflow:hidden; flex:1; min-width:120px; max-width:280px}
.progress i{display:block; height:100%; background:var(--blue); width:25%; transition:width .3s ease}
.link-btn{background:none; border:0; color:var(--muted); font-weight:600; cursor:pointer; font-size:.9rem; padding:8px}
.link-btn:hover{color:var(--ink)}

.results{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.mat{border:1px solid var(--line); border-radius:var(--r); padding:20px; background:#fff; display:flex; flex-direction:column}
.mat.best{border-color:var(--blue); box-shadow:0 0 0 3px rgba(11,99,206,.10)}
.mat .rank{font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin-bottom:8px}
.mat h4{font-family:'Manrope',sans-serif; font-size:1.06rem; font-weight:800; margin-bottom:4px}
.mat .desc{font-size:.87rem; color:var(--ink-2); margin:8px 0 14px}
.spec{border-top:1px solid var(--line-2); padding:8px 0; display:flex; justify-content:space-between; gap:12px; font-size:.84rem}
.spec span{color:var(--muted)} .spec b{font-weight:700; text-align:right}
.tags{display:flex; gap:6px; flex-wrap:wrap; margin:14px 0 16px}
.tag{font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--bg-3); color:var(--ink-2)}
.tag.eco{background:var(--green-soft); color:var(--green)}
.mat .acts{margin-top:auto; display:flex; gap:8px; flex-wrap:wrap}

/* ---------- material grid ---------- */
.chips{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:28px}
.chip{border:1px solid var(--line); background:#fff; border-radius:999px; padding:9px 17px; font-size:.87rem;
  font-weight:600; cursor:pointer; transition:.15s}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.card{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff; transition:.2s ease;
  display:flex; flex-direction:column}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--blue-line)}
.card .ph{aspect-ratio:16/7; overflow:hidden; background:var(--bg-3)}
.card .ph img{width:100%; height:100%; object-fit:cover}
.card .bd{padding:20px; display:flex; flex-direction:column; flex:1}
.card h3{margin-bottom:8px}
.card p{font-size:.89rem; color:var(--ink-2); margin-bottom:14px}
.card .mini{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px}
.card .bottom{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px}
.card .more{font-weight:700; font-size:.88rem}

/* ---------- calculator ---------- */
.calc{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow); background:#fff}
.calc-in{padding:30px}
.calc-out{padding:30px; background:var(--ink); color:#fff}
.field{margin-bottom:16px}
.field label{display:block; font-size:.84rem; font-weight:700; margin-bottom:6px; color:var(--ink-2)}
.field .hint{font-weight:500; color:var(--muted); font-size:.78rem}
.inp{width:100%; border:1.5px solid var(--line); border-radius:var(--r-sm); padding:11px 14px; background:#fff; transition:.15s}
.inp:focus{border-color:var(--blue); outline:none; box-shadow:0 0 0 3px rgba(11,99,206,.12)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.readout{border-bottom:1px solid rgba(255,255,255,.12); padding:16px 0; display:flex; align-items:baseline; justify-content:space-between; gap:14px}
.readout .lbl{font-size:.85rem; color:#A9B6C4}
.readout .val{font-family:'Manrope',sans-serif; font-weight:800; font-size:1.7rem; letter-spacing:-.03em}
.readout .val small{font-size:.8rem; font-weight:600; color:#A9B6C4; margin-left:4px}
.calc-out h3{color:#fff; margin-bottom:6px}
.calc-note{font-size:.8rem; color:#93A1B0; margin-top:18px}

/* ---------- band ---------- */
.band{display:grid; grid-template-columns:.8fr 1.2fr; gap:52px; align-items:center}
.band img{border-radius:var(--r-lg); aspect-ratio:3/2; object-fit:cover; box-shadow:var(--shadow)}
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:30px; padding-top:26px; border-top:1px solid var(--line)}
.stat .n{font-family:'Manrope',sans-serif; font-weight:800; font-size:1.9rem; letter-spacing:-.03em; color:var(--blue)}
.stat .t{font-size:.85rem; color:var(--ink-2); line-height:1.4}

/* ---------- sustainability ---------- */
.eco-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.eco{border:1px solid var(--line); border-radius:var(--r); padding:26px; background:#fff}
.eco .ic{width:44px; height:44px; border-radius:11px; background:var(--green-soft); display:grid; place-items:center; margin-bottom:16px}
.eco .ic svg{width:22px; height:22px; stroke:var(--green); fill:none; stroke-width:1.7}
.eco p{font-size:.9rem; color:var(--ink-2); margin:10px 0 0}

/* ---------- knowledge + faq ---------- */
.know{display:grid; grid-template-columns:1.05fr .95fr; gap:52px}
.art{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line)}
.art:first-of-type{border-top:1px solid var(--line)}
.art .num{font-family:'Manrope',sans-serif; font-weight:800; color:var(--blue-line); font-size:1.1rem; flex:none; width:30px}
.art h4{font-family:'Manrope',sans-serif; font-size:1rem; font-weight:700; margin-bottom:4px}
.art p{font-size:.86rem; color:var(--muted); margin:0}
details{border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:10px; background:#fff}
details[open]{border-color:var(--blue-line); box-shadow:var(--shadow-sm)}
summary{cursor:pointer; padding:16px 18px; font-weight:700; font-size:.96rem; list-style:none; display:flex;
  justify-content:space-between; gap:14px; align-items:center; font-family:'Manrope',sans-serif}
summary::-webkit-details-marker{display:none}
summary:after{content:"+"; color:var(--blue); font-weight:800; font-size:1.2rem; flex:none}
details[open] summary:after{content:"\2212"}
details .ans{padding:0 18px 18px; font-size:.9rem; color:var(--ink-2)}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:44px}
.form-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; box-shadow:var(--shadow)}
.seg{display:flex; gap:8px; margin-bottom:20px; background:var(--bg-2); padding:5px; border-radius:999px; flex-wrap:wrap}
.seg button{flex:1; min-width:110px; border:0; background:none; padding:10px 14px; border-radius:999px; font-weight:700;
  font-size:.87rem; cursor:pointer; color:var(--ink-2)}
.seg button.on{background:#fff; color:var(--ink); box-shadow:var(--shadow-sm)}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:.82rem; color:var(--muted); margin:6px 0 18px}
.consent input{margin-top:4px}
.info-block{border-top:1px solid var(--line); padding:18px 0; display:flex; gap:16px}
.info-block .ic{width:38px; height:38px; border-radius:10px; background:var(--blue-soft); display:grid; place-items:center; flex:none}
.info-block .ic svg{width:18px; height:18px; stroke:var(--blue); fill:none; stroke-width:1.7}
.info-block b{display:block; font-family:'Manrope',sans-serif; font-size:.95rem}
.info-block span{font-size:.9rem; color:var(--ink-2)}
.ok-msg{display:none; background:var(--green-soft); border:1px solid #A8D8C6; color:var(--green); border-radius:var(--r);
  padding:18px; font-size:.92rem; font-weight:600}
.ok-msg.show{display:block}

/* ---------- drawer ---------- */
.scrim{position:fixed; inset:0; background:rgba(14,20,25,.45); opacity:0; pointer-events:none; transition:.25s; z-index:110}
.scrim.show{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; height:100%; width:min(430px,100%); background:#fff; z-index:120;
  transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg)}
.drawer.open{transform:none}
.drawer-head{padding:20px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between}
.drawer-head h3{font-size:1.1rem}
.drawer-body{padding:20px 22px; overflow:auto; flex:1}
.drawer-foot{padding:18px 22px; border-top:1px solid var(--line); background:var(--bg-2)}
.line-item{border:1px solid var(--line); border-radius:var(--r-sm); padding:14px; margin-bottom:12px}
.line-item .t{display:flex; justify-content:space-between; gap:12px; align-items:flex-start}
.line-item b{font-family:'Manrope',sans-serif; font-size:.94rem}
.line-item small{color:var(--muted); font-size:.8rem; display:block; margin-top:2px}
.rm{border:0; background:none; color:var(--muted); cursor:pointer; font-size:1.1rem; line-height:1; padding:2px 4px}
.rm:hover{color:#C0392B}
.empty{text-align:center; color:var(--muted); padding:40px 10px; font-size:.92rem}
.x{border:1px solid var(--line); background:#fff; border-radius:9px; width:34px; height:34px; cursor:pointer; font-size:1.05rem; line-height:1}

/* ---------- footer ---------- */
footer.site{background:var(--ink); color:#A9B6C4; padding:62px 0 26px; font-size:.9rem}
footer.site h4{font-family:'Manrope',sans-serif; color:#fff; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px}
footer.site a{color:#CBD5E0; display:block; padding:5px 0}
footer.site a:hover{color:#fff}
.f-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px}
.f-grid img{height:26px; margin-bottom:18px}
.f-bottom{margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); display:flex;
  justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.82rem}
.credit{color:#8A97A5}
.credit a{display:inline; color:#C7D2DE}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* ---------- concept ribbon ---------- */
.ribbon{position:fixed; bottom:16px; left:16px; z-index:150; background:var(--ink); color:#fff; font-size:.7rem;
  font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:8px 14px; border-radius:999px;
  box-shadow:var(--shadow); pointer-events:none}

@media (max-width:1000px){
  .hero-grid,.band,.know,.contact-grid,.calc{grid-template-columns:1fr}
  .cards,.eco-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f-grid{grid-template-columns:1fr 1fr}
  .nav nav{display:none}
  .menu-toggle{display:inline-flex; margin-left:auto}
  .nav .cta .btn-primary{display:none}
  .hero-grid{gap:34px}
  .quick{flex-direction:column; align-items:flex-start; padding:18px}
  .quick-opts{justify-content:flex-start}
}
@media (max-width:640px){
  section{padding:58px 0}
  .wrap{padding:0 18px}
  .cards,.eco-grid,.stat-row,.f-grid,.two{grid-template-columns:1fr}
  .hero{padding:32px 0 36px}
  .mosaic{grid-template-rows:auto 110px; gap:8px}
  .m-stat{padding:12px} .m-stat .k{font-size:1.45rem} .m-stat .v{font-size:.72rem}
  .m-main figcaption{font-size:.72rem; left:10px; bottom:10px; padding:6px 11px}
  .quick-opts button{padding:9px 13px; font-size:.82rem}
  .hero-points{grid-template-columns:1fr}
  .partner-row{justify-content:center; gap:22px}
  .partner-row img{height:26px}
  .ribbon{left:12px; bottom:12px; font-size:.64rem; padding:7px 12px}
  .calc-in,.calc-out,.form-card,.finder-body{padding:22px 18px}
  .basket-btn span.lbl{display:none}
}