/* ============================================================================
   ZINSOLAR ENGINEERING — design system
   VertByte · Pakej 3.2
   Single stylesheet. There is deliberately NO style.min.css: one file cannot
   drift out of sync with itself.
   ========================================================================= */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root{
  /* surfaces */
  --base:#f6f8fa;
  --panel:#ffffff;
  --panel-alt:#eceff4;
  --line:#d9e0e8;
  --line-soft:#e8edf2;

  /* dark surfaces */
  --navy:#0b1220;
  --navy-2:#111c2e;
  --navy-3:#1b2942;

  /* ink */
  --ink:#0b1220;
  --ink-2:#2b3648;
  --mist:#5b6779;
  --ink-inv:#f4f7fa;
  --mist-inv:#a7b4c6;

  /* accent — sampled from the ZESB sun mark */
  --amber:#f5a524;
  --amber-deep:#8a4d05;   /* amber-family colour that passes AA on light bg */
  --amber-soft:#fdf0d9;
  --sky:#0b5f8f;
  --red:#a51d1d;
  --green:#0f6b45;

  /* geometry */
  --r:2px;
  --r-lg:3px;
  --wrap:1200px;
  --wrap-narrow:820px;
  --gut:clamp(20px,5vw,40px);
  --sec-y:clamp(64px,9vw,112px);

  /* type */
  --f-display:'Lexend','Segoe UI',system-ui,sans-serif;
  --f-body:'Source Sans 3','Segoe UI',system-ui,-apple-system,sans-serif;

  --t:180ms cubic-bezier(.2,.6,.3,1);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--base);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,picture,svg,video{max-width:100%;display:block}
h1,h2,h3,h4,h5{font-family:var(--f-display);font-weight:600;line-height:1.14;letter-spacing:-.018em;margin:0 0 .5em}
h1{font-size:clamp(2.3rem,5.2vw,4rem);letter-spacing:-.028em}
h2{font-size:clamp(1.8rem,3.6vw,2.85rem);letter-spacing:-.024em}
h3{font-size:clamp(1.2rem,2vw,1.5rem)}
h4{font-size:1.06rem}
p{margin:0 0 1.1em;max-width:70ch}
a{color:inherit}
ul,ol{margin:0 0 1.1em;padding-left:1.15em}
li{margin:0 0 .4em}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:var(--r)}
::selection{background:var(--amber);color:var(--navy)}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - var(--gut)*2,var(--wrap-narrow))}
.sec{padding-block:var(--sec-y)}
.sec--tight{padding-block:calc(var(--sec-y)*.62)}
.sec--alt{background:var(--panel-alt)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--navy);color:var(--ink-inv)}
.sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4{color:var(--ink-inv)}
.sec--dark p{color:var(--mist-inv)}
/* hero already carries its own bottom space — do not double it up */
.hero + .sec{padding-top:calc(var(--sec-y)*.72)}

.grid{display:grid;gap:clamp(20px,2.6vw,34px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
/* A grid item defaults to min-width:auto, so it refuses to shrink below its
   content. A scrollable table inside one therefore pushes the whole PAGE wide
   instead of scrolling itself — which is exactly what the NEM subsidy table did
   at 375px. This one line is what makes overflow-x actually work in a grid. */
.grid > *,.split > *,.plans > *,.branches > *{min-width:0}
.stack-sm > * + *{margin-top:.6rem}

/* ── The repeated visual idea: the busbar rule ───────────────────────────── */
/* A short amber bar with three square nodes, like the busbar on a PV cell.
   It sits above every section heading and is the one motif used site-wide.   */
.kicker{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--f-display);font-size:.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.22em;color:var(--amber-deep);
  margin:0 0 1rem;
}
.kicker::before{
  content:"";flex:none;width:34px;height:6px;
  background:
    linear-gradient(var(--amber),var(--amber)) left center/34px 2px no-repeat,
    linear-gradient(var(--amber),var(--amber)) 0 0/6px 6px no-repeat,
    linear-gradient(var(--amber),var(--amber)) 14px 0/6px 6px no-repeat,
    linear-gradient(var(--amber),var(--amber)) 28px 0/6px 6px no-repeat;
}
.sec--dark .kicker{color:var(--amber)}
.sec-head{max-width:62ch;margin-bottom:clamp(30px,4vw,52px)}
.sec-head p{color:var(--mist);font-size:1.06rem}
.sec--dark .sec-head p{color:var(--mist-inv)}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
/* Themed through variables only. Hover changes the VARIABLES, never
   background/color directly — mixing the two makes :hover win over every
   variant at equal specificity and text disappears.                          */
.btn{
  --bg:var(--amber);--fg:var(--navy);--bd:var(--amber);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.92rem 1.6rem;border:1.5px solid var(--bd);border-radius:var(--r);
  background:var(--bg);color:var(--fg);
  font-family:var(--f-display);font-weight:600;font-size:.94rem;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t);
}
.btn:hover{--bg:#ffb946;--bd:#ffb946;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line)}
.btn--ghost:hover{--bg:var(--ink);--fg:var(--ink-inv);--bd:var(--ink)}
.btn--onDark{--bg:transparent;--fg:var(--ink-inv);--bd:rgba(255,255,255,.35)}
.btn--onDark:hover{--bg:var(--ink-inv);--fg:var(--navy);--bd:var(--ink-inv)}
.btn--wide{width:100%}
.btn--sm{padding:.6rem 1rem;font-size:.85rem}
.btn[disabled],.btn[aria-disabled=true]{opacity:.5;pointer-events:none}
.btn .ico{width:1.05em;height:1.05em}

/* underline link that grows on hover — the second half of the motif */
.ulink{
  display:inline-flex;align-items:center;gap:.45rem;
  color:var(--ink);font-family:var(--f-display);font-weight:600;font-size:.92rem;
  text-decoration:none;padding-bottom:3px;
  background:linear-gradient(var(--amber),var(--amber)) left bottom/28px 2px no-repeat;
  transition:background-size var(--t),color var(--t);
}
.ulink:hover{background-size:100% 2px}
.sec--dark .ulink{color:var(--ink-inv)}

/* ── Icons ───────────────────────────────────────────────────────────────── */
.ico{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.6;
     stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ── Images ──────────────────────────────────────────────────────────────── */
.pic{display:block;overflow:hidden;background:var(--panel-alt);border-radius:var(--r)}
.pic img{width:100%;height:100%;object-fit:cover;transition:transform 420ms cubic-bezier(.2,.6,.3,1)}
.zoom:hover .pic img{transform:scale(1.045)}
.ph{position:relative;display:grid;place-items:center;color:#b6c2d0;background:var(--panel-alt)}
.ph svg{width:min(38%,120px);height:auto;opacity:.75}
.ph__note{position:absolute;left:0;right:0;bottom:0;padding:.35rem .5rem;
  font-size:.62rem;font-family:ui-monospace,monospace;color:#7d8a99;
  background:rgba(255,255,255,.86);text-align:center;letter-spacing:.02em}

/* ── Header ──────────────────────────────────────────────────────────────── */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--navy);color:#fff;padding:.7rem 1rem;border-radius:var(--r)}

.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);
     backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:1.4rem;min-height:78px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.brand img,.brand .pic{height:52px;width:auto;background:none}
.brand .ph{width:52px;height:52px}
.brand__txt{display:none}
@media (min-width:1180px){
  .brand__txt{display:block;line-height:1.15}
  .brand__txt b{display:block;font-family:var(--f-display);font-size:.95rem;font-weight:600;letter-spacing:-.01em}
  .brand__txt span{font-size:.7rem;color:var(--mist);text-transform:uppercase;letter-spacing:.14em}
}

.nav{margin-left:auto;display:none;min-width:0}
.nav > ul{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:0}
.nav > ul > li{margin:0;position:relative}
.nav > ul > li > a,
.nav__top{
  display:flex;align-items:center;gap:.28rem;
  padding:.55rem .72rem;border:0;border-radius:var(--r);background:none;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  font-family:var(--f-display);font-size:.88rem;font-weight:500;color:var(--ink-2);
  transition:color var(--t),background var(--t);
}
.nav > ul > li > a:hover,.nav__top:hover{color:var(--ink);background:var(--panel-alt)}
.nav > ul > li > a[aria-current=page],
.nav__top[data-active="1"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--amber)}
.nav__chev{width:14px;height:14px;flex:none;transition:transform var(--t)}
.nav__top[aria-expanded=true]{color:var(--ink);background:var(--panel-alt)}
.nav__top[aria-expanded=true] .nav__chev{transform:rotate(180deg)}

/* ── Dropdown panel ──────────────────────────────────────────────────────── */
.dd{
  position:absolute;top:calc(100% + 10px);left:0;z-index:120;
  min-width:308px;padding:.4rem;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  border-top:2px solid var(--amber);
  box-shadow:0 18px 40px -18px rgba(11,18,32,.42);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--t),transform var(--t),visibility var(--t);
}
/* Opening is driven by aria-expanded, which JS sets on hover, click and focus.
   CSS :hover is NOT used here — with both active, hovering one group while
   another was click-opened left two panels overlapping. :focus-within stays so
   keyboard users are covered, and .no-js keeps hover working without scripts. */
.has-dd:focus-within > .dd,
.nav__top[aria-expanded=true] + .dd{opacity:1;visibility:visible;transform:translateY(0)}
.no-js .has-dd:hover > .dd{opacity:1;visibility:visible;transform:translateY(0)}
/* A gap between the button and the panel would drop the hover — bridge it. */
.dd::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.dd ul{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.dd li{margin:0}
.dd a{
  display:block;padding:.7rem .8rem;border-radius:var(--r);text-decoration:none;
  transition:background var(--t);
}
.dd a:hover{background:var(--panel-alt)}
.dd a b{
  display:block;font-family:var(--f-display);font-size:.9rem;font-weight:600;
  color:var(--ink);margin-bottom:.1rem;
}
.dd a span{display:block;font-size:.79rem;line-height:1.45;color:var(--mist)}
.dd a[aria-current=page]{background:var(--amber-soft)}
.dd a[aria-current=page] b{color:var(--amber-deep)}

.hdr__act{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex:none}
/* Six top-level items fit comfortably from 1024px up. */
@media (min-width:1024px){
  .nav{display:block}
  .hdr__act{margin-left:.5rem}
}
@media (min-width:1400px){.nav > ul > li > a,.nav__top{padding:.55rem .86rem;font-size:.9rem}}

.lang{
  display:inline-flex;align-items:center;gap:.3rem;padding:.5rem .7rem;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  font-family:var(--f-display);font-size:.78rem;font-weight:600;letter-spacing:.08em;
  color:var(--ink-2);text-decoration:none;transition:border-color var(--t),color var(--t);
}
.lang:hover{border-color:var(--ink);color:var(--ink)}
/* The header CTA is the first thing to go when space runs out — the same button
   sits at the end of every page and inside the drawer. */
.hdr .btn{display:none;white-space:nowrap}
@media (min-width:1240px){.hdr .btn{display:inline-flex}}
@media (max-width:1023px){.hdr .btn{display:inline-flex}}
@media (max-width:560px){.hdr .btn{display:none}}

.burger{display:inline-grid;place-items:center;width:44px;height:44px;
        border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink)}
@media (min-width:1024px){.burger{display:none}}

.drawer{position:fixed;inset:0;z-index:150;background:var(--navy);color:var(--ink-inv);
        padding:calc(var(--gut)) var(--gut) 3rem;overflow-y:auto}
.drawer[hidden]{display:none !important}
.drawer__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2.2rem}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer li{border-bottom:1px solid rgba(255,255,255,.12);margin:0}
.drawer a{display:block;padding:.95rem 0;text-decoration:none;color:var(--ink-inv);
          font-family:var(--f-display);font-size:1.16rem;font-weight:500}
.drawer a:hover{color:var(--amber)}
.drawer a[aria-current=page]{color:var(--amber)}
/* Groups are plain headings here — an accordion would hide ten short links
   behind two extra taps for no benefit. */
.drawer__grp{
  margin:1.9rem 0 .3rem;font-family:var(--f-display);font-size:.7rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--amber);
}
.drawer__grp + ul a{font-size:1.06rem;padding-left:.9rem;
  box-shadow:inset 2px 0 0 rgba(245,165,36,.35)}
.drawer .btn{margin-top:2rem;width:100%}
.drawer__x{width:44px;height:44px;display:grid;place-items:center;background:none;
           border:1px solid rgba(255,255,255,.28);border-radius:var(--r);color:var(--ink-inv)}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--navy);color:var(--ink-inv);isolation:isolate;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(11,18,32,.95) 0%,rgba(11,18,32,.86) 42%,rgba(11,18,32,.55) 100%);
}
.hero__in{position:relative;z-index:1;padding-block:clamp(76px,12vw,148px)}
.hero h1{max-width:16ch;color:#fff;margin-bottom:1.1rem}
.hero h1 em{font-style:normal;color:var(--amber);display:block}
.hero__lead{max-width:56ch;font-size:clamp(1.02rem,1.5vw,1.16rem);color:#cdd8e6}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero__marks{
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:2.8rem;padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.16);
}
.hero__marks span{display:flex;align-items:center;gap:.55rem;font-size:.86rem;color:#b9c6d6}
.hero__marks .ico{width:1.05rem;height:1.05rem;color:var(--amber)}

/* page banner (inner pages) */
.banner{position:relative;background:var(--navy);color:var(--ink-inv);overflow:hidden;isolation:isolate}
.banner__bg{position:absolute;inset:0;z-index:-2;opacity:.5}
.banner__bg img{width:100%;height:100%;object-fit:cover}
.banner__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,18,32,.94),rgba(11,18,32,.6))}
.banner__in{padding-block:clamp(56px,8vw,104px)}
.banner h1{max-width:20ch;color:#fff}
.banner p{max-width:60ch;color:#c2cfdf}
.crumbs{display:flex;gap:.5rem;font-size:.78rem;color:#8ea0b6;margin-bottom:1.1rem;
        list-style:none;padding:0;flex-wrap:wrap}
.crumbs a{color:#8ea0b6;text-decoration:none}
.crumbs a:hover{color:var(--amber)}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
      padding:clamp(22px,2.6vw,32px);transition:border-color var(--t),transform var(--t)}
.card:hover{border-color:#b9c5d4;transform:translateY(-2px)}
.card h3{margin-bottom:.4rem}
.card p{color:var(--mist);font-size:.97rem;margin-bottom:0}
.card__n{font-family:var(--f-display);font-size:2.6rem;font-weight:600;line-height:1;
         color:var(--amber);opacity:.42;margin-bottom:.7rem}
.card__ico{width:44px;height:44px;display:grid;place-items:center;margin-bottom:1.1rem;
           border:1.5px solid var(--amber);border-radius:var(--r);color:var(--amber-deep)}
.sec--dark .card{background:var(--navy-2);border-color:rgba(255,255,255,.13)}
.sec--dark .card p{color:var(--mist-inv)}
.sec--dark .card:hover{border-color:rgba(255,255,255,.3)}
.sec--dark .card__ico{color:var(--amber)}

/* plain bordered list rows */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rows li{display:flex;gap:1rem;padding:1.05rem 0;border-bottom:1px solid var(--line);margin:0}
.rows .ico{color:var(--amber-deep);margin-top:.22rem}
.sec--dark .rows{border-color:rgba(255,255,255,.14)}
.sec--dark .rows li{border-color:rgba(255,255,255,.14)}
.sec--dark .rows .ico{color:var(--amber)}

/* numbered steps */
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:0}
.steps li{counter-increment:s;position:relative;padding:1.4rem 0 1.4rem 4.2rem;
          border-bottom:1px solid var(--line);margin:0}
.steps li:first-child{border-top:1px solid var(--line)}
.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1.25rem;
  font-family:var(--f-display);font-size:1rem;font-weight:600;color:var(--amber-deep);
  letter-spacing:.06em;
}
.sec--dark .steps li,.sec--dark .steps li:first-child{border-color:rgba(255,255,255,.14)}
.sec--dark .steps li::before{color:var(--amber)}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.tbl-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:.97rem;min-width:460px}
th,td{padding:.95rem 1.1rem;text-align:left;border-bottom:1px solid var(--line-soft)}
thead th{background:var(--panel-alt);font-family:var(--f-display);font-size:.76rem;font-weight:600;
         text-transform:uppercase;letter-spacing:.13em;color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}

/* ── Project / gallery grid ──────────────────────────────────────────────── */
.tiles{display:grid;gap:clamp(14px,1.6vw,20px);
       grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.tile{position:relative;display:block;text-decoration:none;color:inherit;overflow:hidden;
      border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.tile .pic{aspect-ratio:4/3}
.tile__cap{padding:.85rem 1rem 1rem}
.tile__cap b{display:block;font-family:var(--f-display);font-size:.95rem;font-weight:600}
.tile__cap span{font-size:.8rem;color:var(--mist)}
.tile__tag{position:absolute;top:.6rem;left:.6rem;z-index:2;padding:.22rem .55rem;
  background:var(--amber);color:var(--navy);border-radius:var(--r);
  font-family:var(--f-display);font-size:.68rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase}

/* filter chips */
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.8rem;padding:0;list-style:none}
.chips button{
  padding:.48rem .95rem;border:1px solid var(--line);border-radius:999px;background:var(--panel);
  font-family:var(--f-display);font-size:.83rem;font-weight:500;color:var(--ink-2);
  transition:all var(--t);
}
.chips button:hover{border-color:var(--ink)}
.chips button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}

/* logo wall */
.logos{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);
       grid-template-columns:repeat(auto-fill,minmax(min(50%,168px),1fr));overflow:hidden}
.logos div{background:var(--panel);display:grid;place-items:center;padding:1.5rem 1.1rem;min-height:104px}
.logos img{max-height:56px;width:auto;object-fit:contain;
           filter:grayscale(1);opacity:.72;transition:filter var(--t),opacity var(--t)}
.logos div:hover img{filter:none;opacity:1}
.logos .ph{width:100%;height:56px;background:none}

/* ── Pricing / membership ────────────────────────────────────────────────── */
.plans{display:grid;gap:clamp(20px,2.6vw,28px);grid-template-columns:1fr}
@media (min-width:900px){.plans{grid-template-columns:repeat(2,1fr);align-items:start}}
.plan{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
      padding:clamp(26px,3vw,40px)}
.plan--hot{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.plan__flag{position:absolute;top:-1px;right:clamp(20px,3vw,32px);transform:translateY(-50%);
  background:var(--amber);color:var(--navy);padding:.3rem .8rem;border-radius:var(--r);
  font-family:var(--f-display);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.plan__tier{font-family:var(--f-display);font-size:.76rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--amber-deep);margin-bottom:.7rem}
.plan__price{display:flex;align-items:baseline;gap:.35rem;margin:0 0 .2rem}
.plan__price b{font-family:var(--f-display);font-size:clamp(2.4rem,4.6vw,3.2rem);font-weight:600;
  letter-spacing:-.03em;line-height:1}
.plan__price span{font-size:1rem;color:var(--mist)}
.plan__note{font-size:.84rem;color:var(--mist);letter-spacing:.03em;margin-bottom:1.6rem}
.plan__feat{list-style:none;margin:0 0 1.9rem;padding:0}
.plan__feat li{display:flex;gap:.85rem;padding:.95rem 0;border-top:1px solid var(--line-soft);margin:0}
.plan__feat li:last-child{border-bottom:1px solid var(--line-soft)}
.plan__feat b{display:block;font-family:var(--f-display);font-size:.95rem;font-weight:600;margin-bottom:.12rem}
.plan__feat p{font-size:.88rem;color:var(--mist);margin:0}
.plan__feat .ico{color:var(--amber-deep);margin-top:.2rem}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form{display:grid;gap:1.15rem}
.field{display:grid;gap:.4rem}
.field label{font-family:var(--f-display);font-size:.85rem;font-weight:600;color:var(--ink-2)}
.field .req{color:var(--red)}
.field input,.field select,.field textarea{
  width:100%;padding:.82rem .95rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);color:var(--ink);font:inherit;font-size:.98rem;
  transition:border-color var(--t),box-shadow var(--t);
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(11,95,143,.14)}
.field small{font-size:.8rem;color:var(--mist)}
.field--err input,.field--err select,.field--err textarea{border-color:var(--red)}
.field__err{font-size:.82rem;color:var(--red);font-weight:600}
.field-row{display:grid;gap:1.15rem}
@media (min-width:640px){.field-row{grid-template-columns:1fr 1fr}}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;color:var(--ink-2)}
.check input{width:20px;height:20px;flex:none;margin-top:.18rem;accent-color:var(--amber)}

.picker{display:grid;gap:.7rem}
@media (min-width:640px){.picker{grid-template-columns:1fr 1fr}}
.picker label{
  display:flex;gap:.75rem;align-items:flex-start;padding:1rem 1.1rem;cursor:pointer;
  border:1.5px solid var(--line);border-radius:var(--r);background:var(--panel);
  transition:border-color var(--t),background var(--t);
}
.picker label:hover{border-color:#aab8c8}
.picker input{width:20px;height:20px;flex:none;margin-top:.15rem;accent-color:var(--amber)}
.picker input:checked + span{color:var(--ink)}
.picker label:has(input:checked){border-color:var(--amber);background:var(--amber-soft)}
.picker b{display:block;font-family:var(--f-display);font-weight:600;font-size:.96rem}
.picker small{color:var(--mist);font-size:.84rem}

/* ── Notices ─────────────────────────────────────────────────────────────── */
.note{display:flex;gap:.85rem;padding:1rem 1.15rem;border-radius:var(--r);
      border:1px solid var(--line);background:var(--panel);font-size:.93rem}
.note .ico{flex:none;margin-top:.15rem}
.note--warn{border-color:#e6c489;background:#fdf6e8;color:#6b4a08}
.note--err{border-color:#e2b1b1;background:#fbeeee;color:#7a1a1a}
.note--ok{border-color:#a9d6c1;background:#eaf7f1;color:#0d5b3c}
.note--info{border-color:#a9c6da;background:#eef5fa;color:#0b4665}

/* ── Accordion (FAQ) ─────────────────────────────────────────────────────── */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding:1.25rem 0;cursor:pointer;list-style:none;
  font-family:var(--f-display);font-size:1.03rem;font-weight:500;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";flex:none;width:14px;height:14px;
  background:linear-gradient(var(--ink-2),var(--ink-2)) center/14px 1.6px no-repeat,
             linear-gradient(var(--ink-2),var(--ink-2)) center/1.6px 14px no-repeat;
  transition:transform var(--t)}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc details[open] summary{color:var(--amber-deep)}
.acc__body{padding:0 0 1.5rem;max-width:74ch}
.acc__body p{color:var(--mist);margin-bottom:.8rem}
.acc__body p:last-child{margin-bottom:0}

/* ── Timeline ────────────────────────────────────────────────────────────── */
.tl{list-style:none;margin:0;padding:0 0 0 2.1rem;position:relative}
.tl::before{content:"";position:absolute;left:5px;top:.7rem;bottom:.7rem;width:1px;background:var(--line)}
.tl li{position:relative;padding-bottom:2.2rem;margin:0}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-2.1rem;top:.5rem;width:11px;height:11px;
  background:var(--amber);border-radius:var(--r)}
.tl__yr{font-family:var(--f-display);font-size:.76rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--amber-deep);display:block;margin-bottom:.25rem}
.tl h3{font-size:1.12rem;margin-bottom:.3rem}
.tl p{color:var(--mist);font-size:.95rem;margin:0}

/* ── People ──────────────────────────────────────────────────────────────── */
.people{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);
        grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));overflow:hidden}
.person{background:var(--panel);padding:1.35rem 1.4rem}
.person b{display:block;font-family:var(--f-display);font-size:1rem;font-weight:600}
.person span{font-size:.85rem;color:var(--mist)}
.person--vacant b{color:var(--mist);font-style:italic}
.dept{font-family:var(--f-display);font-size:.74rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--amber-deep);margin:2.4rem 0 1rem}
.dept:first-of-type{margin-top:0}

/* ── News ────────────────────────────────────────────────────────────────── */
.posts{display:grid;gap:clamp(20px,2.6vw,30px);
       grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.post{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
      border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;
      transition:border-color var(--t),transform var(--t)}
.post:hover{border-color:#b9c5d4;transform:translateY(-2px)}
.post .pic{aspect-ratio:3/2}
.post__body{padding:1.35rem 1.4rem 1.6rem;display:flex;flex-direction:column;flex:1}
.post__date{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-deep);
  font-weight:600;font-family:var(--f-display);margin-bottom:.55rem}
.post h3{font-size:1.1rem;margin-bottom:.5rem}
.post p{font-size:.92rem;color:var(--mist);margin-bottom:1.1rem}
.post .ulink{margin-top:auto;align-self:flex-start}

/* ── Documents (policy) ──────────────────────────────────────────────────── */
.docs{display:grid;gap:clamp(16px,2vw,22px);
      grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.doc{display:flex;flex-direction:column;gap:.9rem;padding:1.6rem;background:var(--panel);
     border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:inherit;
     transition:border-color var(--t),transform var(--t)}
.doc:hover{border-color:var(--amber);transform:translateY(-2px)}
.doc__ico{width:42px;height:52px;position:relative;border:1.5px solid var(--amber);
  border-radius:var(--r);display:grid;place-items:end center;padding-bottom:.35rem;
  font-family:var(--f-display);font-size:.6rem;font-weight:700;letter-spacing:.1em;color:var(--amber-deep)}
.doc h3{font-size:1rem;line-height:1.35;margin:0}
.doc span{font-size:.83rem;color:var(--mist);margin-top:auto}

/* ── Contact ─────────────────────────────────────────────────────────────── */
.branches{display:grid;gap:clamp(20px,3vw,32px)}
@media (min-width:860px){.branches{grid-template-columns:1fr 1fr}}
.branch{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.branch__body{padding:clamp(20px,2.4vw,28px)}
.branch h3{font-size:1.15rem;margin-bottom:.75rem}
.branch dl{display:grid;gap:.6rem;margin:0;font-size:.93rem}
.branch dt{font-family:var(--f-display);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mist)}
.branch dd{margin:0 0 .35rem;color:var(--ink-2)}
.branch iframe{width:100%;height:240px;border:0;display:block;filter:grayscale(.25)}

/* ── CTA band ────────────────────────────────────────────────────────────── */
.band{position:relative;background:var(--navy);color:var(--ink-inv);overflow:hidden;isolation:isolate}
.band__bg{position:absolute;inset:0;z-index:-2;opacity:.55}
.band__bg img{width:100%;height:100%;object-fit:cover}
.band__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,18,32,.93),rgba(11,18,32,.7))}
.band__in{padding-block:clamp(56px,8vw,96px)}
.band h2{max-width:18ch;color:#fff}
.band p{max-width:56ch;color:#c2cfdf}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.ftr{background:var(--navy);color:var(--mist-inv);padding-block:clamp(48px,6vw,76px) 0;font-size:.93rem}
.ftr__top{display:grid;gap:clamp(28px,4vw,48px);grid-template-columns:1fr}
@media (min-width:760px){.ftr__top{grid-template-columns:1.3fr 1fr 1.4fr}}
.ftr h4{color:#fff;font-size:.76rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.1rem}
.ftr a{color:var(--mist-inv);text-decoration:none;transition:color var(--t)}
.ftr a:hover{color:var(--amber)}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:.55rem}
.ftr__brand img,.ftr__brand .pic{height:58px;width:auto;background:none;margin-bottom:1.1rem}
.ftr__brand .ph{width:58px;height:58px}
.ftr__soc{display:flex;gap:.55rem;margin-top:1.2rem}
.ftr__soc a{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r);color:var(--ink-inv)}
.ftr__soc a:hover{border-color:var(--amber);color:var(--amber)}
.ftr__b{display:grid;gap:.15rem;margin-bottom:1.2rem}
.ftr__b b{color:#fff;font-family:var(--f-display);font-size:.95rem;font-weight:600}
.ftr__hours{border-top:1px solid rgba(255,255,255,.14);margin-top:2.6rem;padding-top:1.6rem;
  display:grid;gap:.25rem;font-size:.87rem}
.ftr__bot{border-top:1px solid rgba(255,255,255,.14);margin-top:1.6rem;padding-block:1.4rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;font-size:.82rem}

/* ── Floating WhatsApp ───────────────────────────────────────────────────── */
.wa{position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:90;
    display:flex;align-items:center;gap:.6rem;padding:.85rem 1.25rem;border-radius:999px;
    background:#1faf54;color:#fff;text-decoration:none;font-family:var(--f-display);
    font-size:.92rem;font-weight:600;box-shadow:0 8px 26px rgba(11,18,32,.28);
    transition:transform var(--t),background var(--t)}
.wa:hover{background:#189347;transform:translateY(-2px)}
/* Bigger than the body icon size — this is the one control on the page that has
   to be readable at a glance from the corner of the eye. */
.wa .ico{width:1.55rem;height:1.55rem;stroke-width:1.5}
.wa span{display:none}
@media (min-width:600px){.wa span{display:inline}}
/* Icon-only on small screens, so make it a proper round tap target. */
@media (max-width:599px){
  .wa{padding:0;width:56px;height:56px;justify-content:center}
  .wa .ico{width:1.75rem;height:1.75rem}
}

/* ── Utilities ───────────────────────────────────────────────────────────── */
.lead{font-size:clamp(1.04rem,1.6vw,1.2rem);color:var(--mist)}
.muted{color:var(--mist)}
.small{font-size:.86rem}
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.tag{display:inline-block;padding:.24rem .6rem;border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--f-display);font-size:.7rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2)}
.tag--amber{background:var(--amber-soft);border-color:#eccf9a;color:var(--amber-deep)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Motion ──────────────────────────────────────────────────────────────── */
/* Elements already on screen at load must snap in, never animate — a fade on
   above-the-fold content causes a paint stall and an apparently blank hero.   */
.reveal{opacity:0;transform:translateY(14px);transition:opacity 420ms ease,transform 420ms cubic-bezier(.2,.6,.3,1)}
.reveal.in,.no-js .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}

/* ── Responsive collapse ─────────────────────────────────────────────────── */
@media (max-width:1023px){
  .split{grid-template-columns:1fr}
  .g-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:719px){
  body{font-size:16px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .hero__marks{gap:.5rem 1.2rem}
  .steps li{padding-left:3.4rem}
}

/* ── Lightbox (built by main.js) ─────────────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(16px,4vw,48px);
    background:rgba(6,10,18,.93)}
.lb[hidden]{display:none !important}
.lb__fig{margin:0;max-width:min(1100px,100%);max-height:100%;display:grid;gap:.9rem}
.lb__fig img{max-height:78vh;width:auto;margin-inline:auto;object-fit:contain;border-radius:var(--r)}
.lb__fig figcaption{color:#cbd6e4;font-size:.9rem;text-align:center}
.lb__x{position:absolute;top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);
  width:46px;height:46px;font-size:1.7rem;line-height:1;background:none;color:#fff;
  border:1px solid rgba(255,255,255,.3);border-radius:var(--r)}
.lb__x:hover{background:rgba(255,255,255,.12)}

/* ── Print (receipts) ────────────────────────────────────────────────────── */
@media print{
  .hdr,.ftr,.wa,.band,.no-print{display:none !important}
  body{background:#fff;font-size:12pt}
  .sec{padding-block:0}
  .card,.plan{border-color:#999}
}