/* ==========================================================================
   Pronitron — "Atrium"
   Light, airy, bento-tile layout. Floating pill navigation.
   Palette taken from the logo: blue #1B7FBF + green #2EAB64.

   Part one is the design system as drawn in the static Atrium mock-up. Part
   two ("Database-driven site") adds what a live site needs on top of it:
   the search sheet and language switch in the nav, prose styling for bodies
   typed into the admin panel, news cards, the partner strip and the search
   results page. Nothing in part two changes part one.
   ========================================================================== */

:root{
  /* Logo palette */
  --blue:#1B7FBF;
  --blue-d:#14608F;
  --blue-l:#E7F1FA;
  --blue-l2:#D3E6F6;
  --green:#2EAB64;
  --green-d:#22854E;
  --green-l:#E6F5EC;
  --green-l2:#D0EBDA;

  /* Neutrals — warm, never black */
  --ink:#10303B;
  --ink-2:#1D4653;
  --body:#4C6873;
  --muted:#7A929B;
  --line:#E2ECEF;
  --line-2:#EDF4F6;
  --white:#FFFFFF;
  --canvas:#F4F9F9;

  --r-xs:12px; --r-s:16px; --r:22px; --r-l:28px; --r-xl:36px;
  --shadow-s:0 1px 2px rgba(16,48,59,.04),0 4px 12px rgba(16,48,59,.05);
  --shadow:0 2px 6px rgba(16,48,59,.05),0 14px 34px rgba(16,48,59,.07);
  --shadow-l:0 6px 16px rgba(16,48,59,.06),0 28px 60px rgba(16,48,59,.10);
  --maxw:1280px;
  --pad:clamp(18px,3.5vw,40px);

  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --sans:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px}
body{
  margin:0;background:var(--canvas);color:var(--body);
  font-family:var(--sans);font-size:16.5px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none;transition:color .18s ease}
h1,h2,h3,h4{margin:0;color:var(--ink);font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-.025em}
h1{font-size:clamp(2.3rem,5vw,3.9rem)}
h2{font-size:clamp(1.75rem,3.2vw,2.65rem)}
h3{font-size:clamp(1.1rem,1.5vw,1.32rem);letter-spacing:-.015em}
h4{font-size:1rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1.1em}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--green-l2);color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(44px,6vw,86px)}
.sec--top{padding-top:clamp(26px,3vw,44px)}
.lead{font-size:clamp(1.02rem,1.4vw,1.18rem);color:var(--ink-2);line-height:1.66}
.dim{color:var(--muted)}

/* ---------- Eyebrow ---------- */
.eb{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:700;letter-spacing:.04em;
  color:var(--green-d);background:var(--green-l);padding:7px 15px;border-radius:999px;margin-bottom:18px}
.eb::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.eb--blue{color:var(--blue-d);background:var(--blue-l)}
.eb--blue::before{background:var(--blue)}

/* ---------- Section head ---------- */
.shead{max-width:660px;margin-bottom:clamp(28px,3.4vw,48px)}
.shead h2{margin-bottom:14px}
.shead p{margin-bottom:0;color:var(--muted)}
.shead-row{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;
  margin-bottom:clamp(28px,3.4vw,48px)}
.shead-row .shead{margin-bottom:0}

/* ---------- Floating pill nav ---------- */
.topnav{position:sticky;top:0;z-index:80;padding:14px 0 6px;transition:padding .25s ease}
.topnav.stuck{padding-top:10px}
.nav-in{
  max-width:var(--maxw);margin:0 auto;background:var(--white);border:1px solid var(--line);
  border-radius:999px;padding:9px 9px 9px 22px;display:flex;align-items:center;gap:18px;
  box-shadow:var(--shadow-s);transition:box-shadow .25s ease;
}
.topnav.stuck .nav-in{box-shadow:var(--shadow)}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:38px;width:auto}

.menu{display:flex;align-items:center;gap:2px;margin-inline:auto}
.menu > li{position:relative}
.menu > li > a{
  display:flex;align-items:center;gap:6px;padding:9px 15px;border-radius:999px;
  font-size:.93rem;font-weight:600;color:var(--ink-2);transition:background .18s ease,color .18s ease;
}
.menu > li > a:hover,.menu > li.open > a{background:var(--blue-l);color:var(--blue-d)}
.menu > li.cur > a{color:var(--blue);background:var(--blue-l)}
.menu .cv{width:9px;height:9px;opacity:.55;transition:transform .22s ease}
.menu > li.open .cv{transform:rotate(180deg)}

.drop{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,8px);min-width:262px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:10px;
  box-shadow:var(--shadow-l);opacity:0;visibility:hidden;transition:opacity .2s ease,transform .22s ease,visibility .22s;
}
.menu > li:hover .drop,.menu > li.open .drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.drop a{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:var(--r-xs);
  font-size:.92rem;font-weight:600;color:var(--ink-2);transition:background .16s ease,color .16s ease}
.drop a small{font-weight:500;font-size:.79rem;color:var(--muted);letter-spacing:0}
.drop a:hover{background:var(--canvas);color:var(--blue-d)}
/* Only the mobile menu needs this: there the parent is a toggle, not a link. */
.drop a.drop-all{display:none}
.drop .glabel{padding:11px 14px 5px;font-size:.7rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}

.nav-cta{display:flex;align-items:center;gap:8px;flex:none}
.mbtn{display:none;width:42px;height:42px;border:0;border-radius:50%;background:var(--canvas);
  cursor:pointer;place-items:center;color:var(--ink)}
.mbtn i{display:block;width:17px;height:11px;position:relative}
.mbtn i::before,.mbtn i::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;
  background:currentColor;transition:transform .26s ease}
.mbtn i::before{top:0}
.mbtn i::after{bottom:0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);
  font-weight:700;font-size:.92rem;padding:13px 24px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:transform .18s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease}
.btn svg{width:16px;height:16px}
.b-blue{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(27,127,191,.24)}
.b-blue:hover{background:var(--blue-d);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(27,127,191,.3)}
.b-green{background:var(--green);color:#fff;box-shadow:0 6px 16px rgba(46,171,100,.24)}
.b-green:hover{background:var(--green-d);color:#fff;transform:translateY(-2px)}
.b-white{background:var(--white);color:var(--ink);border-color:var(--line)}
.b-white:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.b-soft{background:var(--blue-l);color:var(--blue-d)}
.b-soft:hover{background:var(--blue-l2);color:var(--blue-d);transform:translateY(-2px)}
.b-sm{padding:10px 18px;font-size:.85rem}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.4vw,18px)}
.t3{grid-column:span 3}.t4{grid-column:span 4}.t5{grid-column:span 5}
.t6{grid-column:span 6}.t7{grid-column:span 7}.t8{grid-column:span 8}
.t9{grid-column:span 9}.t12{grid-column:span 12}

.tile{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(22px,2.3vw,32px);position:relative;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s ease,border-color .26s ease;
}
a.tile:hover,.tile--hover:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--blue-l2)}
.tile h3{margin-bottom:9px}
.tile p{font-size:.95rem;margin-bottom:0}
.tile--blue{background:linear-gradient(150deg,var(--blue-l) 0%,#F3F9FD 70%);border-color:var(--blue-l2)}
.tile--green{background:linear-gradient(150deg,var(--green-l) 0%,#F4FBF7 70%);border-color:var(--green-l2)}
.tile--deep{background:linear-gradient(145deg,var(--blue) 0%,var(--green) 130%);border-color:transparent;color:#fff}
.tile--deep h2,.tile--deep h3{color:#fff}
.tile--deep p{color:rgba(255,255,255,.85)}
.tile--pad0{padding:0}
.tile--center{align-items:center;text-align:center}

.tnum{font-family:var(--display);font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:auto;
  letter-spacing:.02em}
.tico{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px;
  background:var(--blue-l);color:var(--blue);transition:background .25s ease,color .25s ease,transform .25s ease}
.tico svg{width:23px;height:23px;stroke-width:1.7}
.tico--g{background:var(--green-l);color:var(--green)}
a.tile:hover .tico{transform:scale(1.07) rotate(-4deg)}
.tgo{margin-top:18px;font-size:.86rem;font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:7px}
.tgo svg{width:14px;height:14px;transition:transform .2s ease}
a.tile:hover .tgo svg{transform:translateX(4px)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:760px;z-index:-1;
  background:
    radial-gradient(620px 380px at 18% 22%,rgba(46,171,100,.16),transparent 66%),
    radial-gradient(680px 420px at 82% 8%,rgba(27,127,191,.18),transparent 66%);
}
.hero-in{padding-block:clamp(30px,4.5vw,58px) clamp(30px,4vw,52px)}
.hero h1{margin-bottom:20px;max-width:16ch}
.hero h1 .g{
  background:linear-gradient(96deg,var(--blue),var(--green));-webkit-background-clip:text;
  background-clip:text;color:transparent;
}
.hero-sub{max-width:56ch;font-size:clamp(1.02rem,1.4vw,1.16rem);color:var(--ink-2)}
.hero-media{background:var(--white);border-radius:var(--r-l);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;padding:clamp(24px,3.4%,44px);min-height:260px}
.hero-media img{max-height:300px;width:auto;object-fit:contain}

.mini{display:flex;flex-direction:column;justify-content:center;gap:4px}
.mini b{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:700;color:var(--ink);
  line-height:1.05;letter-spacing:-.03em}
.mini span{font-size:.8rem;color:var(--muted);font-weight:600}
.tile--blue .mini b{color:var(--blue-d)}
.tile--green .mini b{color:var(--green-d)}

/* ---------- Pills / chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--white);border:1px solid var(--line);border-radius:999px;padding:8px 15px;
  font-size:.85rem;font-weight:600;color:var(--ink-2);transition:border-color .2s ease,color .2s ease,transform .2s ease}
.chip:hover{border-color:var(--green);color:var(--green-d);transform:translateY(-2px)}
.chip--soft{background:var(--blue-l);border-color:transparent;color:var(--blue-d)}
.chip--g{background:var(--green-l);border-color:transparent;color:var(--green-d)}

/* ---------- Checklist ---------- */
.checks li{position:relative;padding-left:31px;margin-bottom:10px;font-size:.95rem}
.checks li::before{content:"";position:absolute;left:0;top:.28em;width:20px;height:20px;border-radius:7px;
  background:var(--green-l)}
.checks li::after{content:"";position:absolute;left:6.6px;top:.55em;width:6px;height:10px;
  border:solid var(--green);border-width:0 2px 2px 0;transform:rotate(45deg)}
.checks--blue li::before{background:var(--blue-l)}
.checks--blue li::after{border-color:var(--blue)}
.cols2{columns:2;column-gap:clamp(22px,3vw,48px)}
.cols2 li{break-inside:avoid}

/* ---------- Product tiles ---------- */
.pmedia{background:linear-gradient(160deg,var(--blue-l) 0%,var(--green-l) 130%);border-radius:var(--r);
  aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;padding:clamp(20px,3%,34px);
  margin-bottom:20px;overflow:hidden}
.pmedia img{max-height:100%;width:auto;object-fit:contain;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
a.tile:hover .pmedia img{transform:scale(1.05)}
.ptag{position:absolute;top:20px;right:20px;background:var(--white);border-radius:999px;padding:6px 13px;
  font-size:.72rem;font-weight:700;color:var(--blue-d);box-shadow:var(--shadow-s)}

/* ---------- Data list ---------- */
.dl{border-top:1px solid var(--line-2)}
.dl > div{display:grid;grid-template-columns:minmax(160px,.45fr) 1fr;gap:14px 24px;
  padding:13px 0;border-bottom:1px solid var(--line-2)}
.dl dt{font-weight:700;color:var(--ink);font-size:.9rem}
.dl dd{margin:0;font-size:.93rem}

/* ---------- Steps ---------- */
.steps{counter-reset:s}
.step{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--line-2)}
.step:last-child{border-bottom:0}
.step::before{counter-increment:s;content:counter(s);width:34px;height:34px;border-radius:12px;
  background:var(--blue-l);color:var(--blue-d);display:grid;place-items:center;font-weight:800;font-size:.9rem;
  font-family:var(--display)}
.step h4{margin-bottom:6px}
.step p{margin:0;font-size:.94rem}

/* ---------- Info rows (contact) ---------- */
.info-row{display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start;
  padding:16px 0;border-bottom:1px solid var(--line-2)}
.info-row:first-child{padding-top:0}
.info-row:last-child{border-bottom:0;padding-bottom:0}
.info-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:var(--blue-l);color:var(--blue)}
.info-row:nth-child(even) .info-ic{background:var(--green-l);color:var(--green)}
.info-ic svg{width:18px;height:18px}
.info-row h4{margin:0 0 3px;font-size:.92rem}
.info-row p{margin:0;font-size:.94rem;line-height:1.55;word-break:break-word}

/* ---------- Timeline (history) ---------- */
.tl{position:relative;padding-left:34px}
.tl::before{content:"";position:absolute;left:9px;top:10px;bottom:10px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--blue),var(--green))}
.tlx{position:relative;margin-bottom:30px}
.tlx:last-child{margin-bottom:0}
.tlx::before{content:"";position:absolute;left:-32px;top:6px;width:12px;height:12px;border-radius:50%;
  background:var(--white);border:3px solid var(--blue);box-shadow:0 0 0 4px var(--blue-l)}
.tlx .yr{display:inline-block;font-size:.78rem;font-weight:800;color:var(--green-d);background:var(--green-l);
  padding:4px 12px;border-radius:999px;margin-bottom:9px}

/* ---------- Disclosure ---------- */
.dq{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.dq + .dq{margin-top:12px}
.dq-h{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;
  background:none;border:0;cursor:pointer;padding:20px 26px;font-family:var(--display);font-weight:600;
  font-size:1.03rem;color:var(--ink);transition:background .2s ease}
.dq-h:hover{background:var(--canvas)}
.dq-s{width:28px;height:28px;flex:none;border-radius:50%;background:var(--blue-l);color:var(--blue-d);
  display:grid;place-items:center;font-size:1.05rem;line-height:1;transition:transform .28s ease,background .25s ease,color .25s ease}
.dq.on .dq-s{transform:rotate(45deg);background:var(--blue);color:#fff}
.dq-b{display:none;padding:0 26px 26px}
.dq.on .dq-b{display:block;animation:fu .3s ease both}
@keyframes fu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px);background:var(--white);
  border:1px solid var(--line);border-radius:999px;padding:6px;width:fit-content;max-width:100%;overflow-x:auto}
.tabs button{background:none;border:0;border-radius:999px;cursor:pointer;white-space:nowrap;
  font-family:var(--sans);font-weight:700;font-size:.88rem;color:var(--muted);padding:10px 20px;
  transition:background .2s ease,color .2s ease}
.tabs button:hover{color:var(--ink)}
.tabs button.on{background:var(--blue);color:#fff}
.pane{display:none}
.pane.on{display:block;animation:fu .34s ease both}

/* ---------- Quote ---------- */
.quote{background:var(--green-l);border-radius:var(--r);padding:26px 30px;margin:1.8em 0;color:var(--ink-2)}
.quote p:last-child{margin-bottom:0}

/* ---------- Page head ---------- */
.phead{padding-block:clamp(24px,3vw,40px) clamp(20px,2.4vw,32px)}
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.83rem;color:var(--muted);margin-bottom:16px}
.crumb a{color:var(--muted);font-weight:600}
.crumb a:hover{color:var(--blue)}
.phead h1{max-width:20ch;margin-bottom:16px}
.phead p{max-width:64ch;margin-bottom:0}

/* ---------- Forms ---------- */
.fm .fr{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fm .fi{margin-bottom:16px}
.fm label{display:block;font-size:.83rem;font-weight:700;color:var(--ink);margin-bottom:7px}
.fm input,.fm select,.fm textarea{width:100%;padding:13px 16px;border:1px solid var(--line);
  border-radius:var(--r-xs);background:var(--canvas);font-family:inherit;font-size:.95rem;color:var(--ink);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}
.fm textarea{min-height:126px;resize:vertical}
.fm input:focus,.fm select:focus,.fm textarea:focus{outline:0;border-color:var(--blue);background:var(--white);
  box-shadow:0 0 0 4px rgba(27,127,191,.10)}
.fnote{font-size:.82rem;color:var(--muted);margin:12px 0 0}
.fst{display:none;margin-top:14px;padding:12px 16px;border-radius:var(--r-xs);background:var(--green-l);
  color:var(--green-d);font-size:.9rem;font-weight:600}
.fst.on{display:block}

/* ---------- Map ---------- */
.map{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);line-height:0}
.map iframe{width:100%;height:400px;border:0;display:block}

/* ---------- CTA ---------- */
.cta-tile{background:linear-gradient(135deg,var(--blue) 0%,var(--green) 118%);border-radius:var(--r-xl);
  padding:clamp(32px,4.4vw,64px);color:#fff;position:relative;overflow:hidden}
.cta-tile::after{content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:rgba(255,255,255,.10)}
.cta-tile h2{color:#fff;margin-bottom:12px;max-width:20ch}
.cta-tile p{color:rgba(255,255,255,.88);max-width:56ch;margin-bottom:26px}
.cta-tile .btn.b-white:hover{color:var(--blue-d)}

/* ---------- Footer ---------- */
.foot{background:var(--white);border-top:1px solid var(--line);padding-top:clamp(40px,5vw,66px);margin-top:clamp(30px,4vw,56px)}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:clamp(24px,3.4vw,48px)}
.foot img{height:42px;margin-bottom:16px}
.foot p{font-size:.93rem;max-width:34ch}
.foot h4{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;
  font-family:var(--sans);font-weight:800}
.foot li{margin-bottom:9px}
.foot li a{color:var(--body);font-size:.93rem;font-weight:500}
.foot li a:hover{color:var(--blue)}
.fc li{display:flex;gap:10px;align-items:flex-start;font-size:.93rem}
.fc svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--green)}
.fsoc{display:flex;gap:9px;margin-top:18px}
.fsoc a{width:38px;height:38px;border-radius:12px;background:var(--canvas);display:grid;place-items:center;
  color:var(--ink-2);transition:background .2s ease,color .2s ease,transform .2s ease}
.fsoc a:hover{background:var(--blue);color:#fff;transform:translateY(-2px)}
.fsoc svg{width:16px;height:16px}
.fend{margin-top:clamp(30px,4vw,52px);border-top:1px solid var(--line);padding:20px 0;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}

/* ---------- WhatsApp ---------- */
.wa{position:fixed;right:20px;bottom:20px;z-index:70;width:54px;height:54px;border-radius:50%;
  background:var(--green);display:grid;place-items:center;box-shadow:0 8px 22px rgba(46,171,100,.36);
  transition:transform .2s ease}
.wa:hover{transform:scale(1.07) translateY(-2px)}
.wa svg{width:27px;height:27px;fill:#fff}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .t3{grid-column:span 6}.t4{grid-column:span 6}.t5{grid-column:span 12}
  .t7{grid-column:span 12}.t8{grid-column:span 12}.t9{grid-column:span 12}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .mbtn{display:grid}
  /* Full-screen menu. .topnav keeps a higher z-index than the sheet, so the
     logo and the close button stay visible and tappable above it. The top
     padding clears that floating pill. */
  :root{--navh:78px}
  .menu{
    position:fixed;inset:0;height:100dvh;max-height:none;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    background:var(--white);border-radius:0;box-shadow:none;
    flex-direction:column;align-items:stretch;gap:0;margin:0;z-index:95;
    padding:calc(var(--navh) + 12px) 20px calc(30px + env(safe-area-inset-bottom,0px));
    transform:translateY(100%);transition:transform .34s cubic-bezier(.2,.75,.25,1);
  }
  body.menu-open .menu{transform:none}
  body.menu-open{overflow:hidden}
  .menu > li{border-bottom:1px solid var(--line-2)}
  .menu > li:last-child{border-bottom:0}
  .menu > li > a{padding:17px 4px;justify-content:space-between;font-size:1.12rem;border-radius:var(--r-xs)}
  .drop{position:static;opacity:1;visibility:visible;box-shadow:none;border:0;
    display:none;min-width:0;background:transparent;padding:2px 0 14px 14px;margin:0 0 6px 8px;
    border-left:2px solid var(--blue-l2)}
  /* The desktop rules below carry specificity (0,3,1); the plain .drop reset
     above is (0,1,0), so the centring transform has to be undone at equal
     weight or the open submenu slides half its width off the sheet. */
  .menu > li:hover > .drop,
  .menu > li.open > .drop{transform:none;left:auto;top:auto}
  .menu > li.open > .drop{display:block;animation:fu .26s ease both}
  .drop a{padding:11px 12px;border-radius:var(--r-xs)}
  .drop a.drop-all{display:block;font-weight:700;color:var(--blue-d);font-size:.92rem}
  .drop a small{color:var(--muted)}
  .drop .glabel{padding:12px 12px 4px}
  .scrim{position:fixed;inset:0;background:rgba(16,48,59,.42);z-index:90;opacity:0;visibility:hidden;
    transition:opacity .3s ease,visibility .3s}
  body.menu-open .scrim{opacity:0;visibility:hidden}
  body.menu-open .mbtn i::before{transform:translateY(4.5px) rotate(45deg)}
  body.menu-open .mbtn i::after{transform:translateY(-4.5px) rotate(-45deg)}
  .nav-cta .btn{display:none}
  /* .menu is a child of .topnav, so its z-index competes only inside
     .topnav's stacking context — raise the whole nav above the scrim. */
  .topnav{z-index:96}
  /* .menu leaves the flex flow when it becomes a fixed sheet, so push the
     toggle to the right edge instead of letting it sit beside the logo. */
  .nav-cta{margin-left:auto}
}
@media (max-width:680px){
  :root{--navh:74px}
  .t3,.t4,.t6,.t7,.t8,.t9{grid-column:span 12}
  .cols2{columns:1}
  .fm .fr{grid-template-columns:1fr}
  .dl > div{grid-template-columns:1fr;gap:3px}
  .fgrid{grid-template-columns:1fr}
  .btn{width:100%}
  .btns{flex-direction:column}
  .nav-in{padding-left:16px}
  .logo img{height:34px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* ==========================================================================
   PART TWO — Database-driven site
   ========================================================================== */

/* ---------- Skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--white);color:var(--ink);
  padding:12px 20px;border-radius:0 0 var(--r-xs) 0;font-weight:700;box-shadow:var(--shadow)}
.skip:focus{left:0}

/* ---------- Nav tools: language switch + search ---------- */
.nav-tools{display:flex;align-items:center;gap:7px;flex:none}
.lang{display:inline-flex;background:var(--canvas);border-radius:999px;padding:3px;flex:none}
.lang a{padding:6px 11px;border-radius:999px;font-size:.75rem;font-weight:800;letter-spacing:.04em;
  color:var(--muted);transition:background .18s ease,color .18s ease}
.lang a:hover{color:var(--ink-2)}
.lang a.on{background:var(--white);color:var(--blue-d);box-shadow:var(--shadow-s)}
.iconbtn{width:40px;height:40px;flex:none;border:0;border-radius:50%;background:var(--canvas);
  color:var(--ink-2);display:grid;place-items:center;cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .18s ease}
.iconbtn:hover{background:var(--blue-l);color:var(--blue-d);transform:translateY(-1px)}
.iconbtn svg{width:17px;height:17px}

/* Search sheet — drops out of the pill nav, covers the page behind a scrim. */
.sheet{position:fixed;inset:0;z-index:110;background:rgba(16,48,59,.38);opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s}
body.search-open .sheet{opacity:1;visibility:visible}
.sheet-in{background:var(--white);border-radius:0 0 var(--r-xl) var(--r-xl);box-shadow:var(--shadow-l);
  padding:clamp(22px,3.4vw,40px) 0;transform:translateY(-16px);transition:transform .28s cubic-bezier(.2,.75,.25,1)}
body.search-open .sheet-in{transform:none}
.sheet-form{display:flex;align-items:center;gap:10px;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.sheet-form input{flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;background:var(--canvas);
  padding:15px 24px;font-family:inherit;font-size:1.02rem;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease}
.sheet-form input:focus{outline:0;border-color:var(--blue);background:var(--white);box-shadow:0 0 0 4px rgba(27,127,191,.10)}
.sheet-hint{max-width:var(--maxw);margin:12px auto 0;padding-inline:var(--pad);font-size:.85rem;color:var(--muted)}

/* ---------- Headline chips (the ticker collection) ---------- */
.hlbar{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none;-ms-overflow-style:none}
.hlbar::-webkit-scrollbar{display:none}
.hl{flex:none;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:8px 16px;
  font-size:.84rem;font-weight:600;color:var(--ink-2);white-space:nowrap;
  transition:border-color .2s ease,color .2s ease,transform .2s ease,background .2s ease}
.hl:hover{border-color:var(--blue);color:var(--blue-d);transform:translateY(-2px)}
.hl.on{background:var(--green);border-color:transparent;color:#fff}
.hl.on:hover{background:var(--green-d);color:#fff}

/* ---------- Cards built from content ---------- */
.cmedia{border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;margin-bottom:18px;background:var(--canvas);flex:none}
.cmedia img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
a.tile:hover .cmedia img{transform:scale(1.05)}
.ndate{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.ndate::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.tsub{color:var(--blue);font-weight:700;font-size:.86rem;margin:-4px 0 10px}
.tile--green .tsub,.tone-green .tsub{color:var(--green-d)}

/* ---------- Partner strip ---------- */
.pstrip{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:clamp(10px,1.2vw,16px)}
.pitem{background:var(--white);border:1px solid var(--line);border-radius:var(--r);min-height:96px;
  display:grid;place-items:center;padding:18px;text-align:center;color:var(--ink-2);font-weight:700;
  font-size:.92rem;letter-spacing:-.01em;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.pitem:hover{border-color:var(--blue-l2);transform:translateY(-3px);box-shadow:var(--shadow-s)}
.pitem img{max-height:46px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .25s ease,opacity .25s ease}
.pitem:hover img{filter:none;opacity:1}

/* ---------- Prose (bodies typed into the admin panel) ---------- */
.prose{color:var(--body);font-size:1rem;line-height:1.72}
.prose > :first-child{margin-top:0}
.prose > :last-child{margin-bottom:0}
.prose h2{font-size:clamp(1.35rem,2.2vw,1.85rem);margin:1.7em 0 .55em}
.prose h3{font-size:clamp(1.08rem,1.5vw,1.25rem);margin:1.5em 0 .45em}
.prose h4{margin:1.4em 0 .4em}
.prose p{margin:0 0 1.05em}
.prose strong{color:var(--ink)}
.prose a{font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose ul{list-style:none;margin:0 0 1.2em}
.prose ul li{position:relative;padding-left:30px;margin-bottom:9px}
.prose ul li::before{content:"";position:absolute;left:0;top:.32em;width:19px;height:19px;border-radius:7px;background:var(--green-l)}
.prose ul li::after{content:"";position:absolute;left:6.2px;top:.58em;width:5.5px;height:9.5px;
  border:solid var(--green);border-width:0 2px 2px 0;transform:rotate(45deg)}
.prose ol{margin:0 0 1.2em;padding-left:22px}
.prose ol li{margin-bottom:9px;padding-left:5px}
.prose ol li::marker{color:var(--blue);font-weight:700}
.prose img{border-radius:var(--r);margin:1.4em 0}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.prose blockquote{background:var(--green-l);border-radius:var(--r);padding:22px 26px;margin:1.6em 0;color:var(--ink-2)}
.prose blockquote p:last-child{margin-bottom:0}
.prose code{background:var(--canvas);border:1px solid var(--line);border-radius:7px;padding:1px 6px;font-size:.88em}
.prose table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.94rem}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line-2)}
.prose th{color:var(--ink);font-weight:700;background:var(--canvas)}
.prose-wrap{overflow-x:auto}

/* ---------- Specs table ---------- */
.specs{width:100%;border-collapse:collapse;font-size:.94rem}
.specs th{width:40%;text-align:left;padding:13px 16px 13px 0;color:var(--ink);font-weight:700;
  border-bottom:1px solid var(--line-2);vertical-align:top}
.specs td{padding:13px 0;border-bottom:1px solid var(--line-2)}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}

/* ---------- Search results ---------- */
.sres-head{display:flex;align-items:center;gap:12px;font-size:1.15rem;margin:34px 0 16px}
.sres-head:first-child{margin-top:0}
.sres-head span{font-size:.75rem;font-weight:800;color:var(--blue-d);background:var(--blue-l);
  border-radius:999px;padding:4px 11px;font-family:var(--sans)}
.sres{display:grid;gap:10px}
.sres a{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.sres a:hover{border-color:var(--blue-l2);transform:translateY(-2px);box-shadow:var(--shadow-s)}
.sres-img{width:58px;height:58px;border-radius:var(--r-xs);overflow:hidden;background:var(--canvas);flex:none}
.sres-img img{width:100%;height:100%;object-fit:cover}
.sres-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.sres-body strong{color:var(--ink);font-family:var(--display);font-weight:600;font-size:1.02rem;letter-spacing:-.015em}
.sres-body em{font-style:normal;font-size:.78rem;font-weight:700;color:var(--green-d)}
.sres-body span{font-size:.9rem;color:var(--body)}
.sres-go{color:var(--blue);display:grid;place-items:center}
.sres-go svg{width:17px;height:17px;transition:transform .2s ease}
.sres a:hover .sres-go svg{transform:translateX(4px)}
mark{background:var(--green-l2);color:var(--ink);border-radius:4px;padding:0 3px}

/* ---------- Notices and empty states ---------- */
.alert{display:flex;align-items:flex-start;gap:11px;border-radius:var(--r-xs);padding:14px 18px;
  font-size:.93rem;font-weight:600;margin-bottom:18px}
.alert svg{width:18px;height:18px;flex:none;margin-top:1px}
.alert--ok{background:var(--green-l);color:var(--green-d)}
.empty{background:var(--white);border:1px dashed var(--line);border-radius:var(--r-l);
  padding:clamp(32px,5vw,60px);text-align:center;color:var(--muted)}
.empty h3{margin-bottom:8px}

/* ---------- Tiles that are also links ---------- */
.tile--row{flex-direction:row;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.tile--img{padding:0;min-height:320px}
.tile--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dl dd a{font-weight:600}

/* ---------- Responsive additions ---------- */
@media (max-width:900px){
  .nav-tools .lang{order:2}
  .sheet-in{border-radius:0 0 var(--r-l) var(--r-l)}
}
@media (max-width:680px){
  .sres a{grid-template-columns:1fr;gap:10px}
  .sres-go{display:none}
  .iconbtn{width:38px;height:38px}
  .lang a{padding:6px 9px}
  .nav-in{gap:10px}
  .tile--img{min-height:220px}
}