/* ============================================================
   Altaliea Alsaeia Trading L.L.C. — shared stylesheet
   One file for every page. Palette and type live in :root.
   ============================================================ */

:root{
  --ink:#10201E;          /* deep petrol green — dark sections, text */
  --ink-2:#1C332F;        /* one step up, for hovers on ink */
  --surface:#ECEFEA;      /* page background */
  --white:#FFFFFF;        /* panels and cards */
  --amber:#E0A32E;        /* division 01 — industrial automation */
  --teal:#2E9AA5;         /* division 02 — chemical products */
  --muted:#5C6D68;        /* secondary text */
  --rule:#CCD3CB;         /* hairlines */
  --on-ink:#B9C6C2;       /* body text on ink */
  --on-ink-dim:#8FA39D;   /* labels on ink */
  --ink-line:#43554F;     /* rules on ink */

  --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --display:Archivo,"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;

  --pad:clamp(18px,4vw,56px);
  --max:1400px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important; animation:none!important}
}
body{margin:0; background:var(--surface); color:var(--ink);
     font-family:var(--sans); font-size:16px; line-height:1.6; text-wrap:pretty;
     -webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
h1,h2,h3,h4{font-family:var(--display); font-weight:800; letter-spacing:-0.025em; margin:0; text-wrap:balance}
p,ul,ol,dl,table{margin:0}
a{color:var(--ink); text-decoration-color:var(--teal); text-decoration-thickness:2px; text-underline-offset:3px}
a:hover{color:var(--teal)}
:focus-visible{outline:2px solid var(--teal); outline-offset:3px}
.ink :focus-visible,.site-foot :focus-visible,.a-band :focus-visible{outline-color:var(--amber)}
::selection{background:var(--amber); color:var(--ink)}

.wrap{max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.mono{font-family:var(--mono)}
.kick{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.ink .kick,.a-band .kick,.site-foot .kick{color:var(--on-ink-dim)}
.tbd{font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--muted);
     border-bottom:2px dotted var(--rule); padding-bottom:1px}
.site-foot .tbd{color:var(--on-ink-dim); border-bottom-color:var(--ink-line)}

/* skip link ------------------------------------------------- */
.skip{position:absolute; left:-9999px; top:0; z-index:60; background:var(--amber); color:var(--ink);
      font-family:var(--display); font-weight:700; padding:14px 20px; text-decoration:none}
.skip:focus{left:8px; top:8px}

/* buttons --------------------------------------------------- */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700;
     font-size:14.5px; padding:14px 22px; border:2px solid var(--ink); background:var(--ink);
     color:var(--white); text-decoration:none; cursor:pointer; text-align:left}
.btn:hover{background:var(--ink-2); color:var(--white); border-color:var(--ink-2)}
.btn:active{background:#0a1614}
.btn-out{background:transparent; color:var(--ink)}
.btn-out:hover{background:var(--ink); color:var(--white); border-color:var(--ink)}
.btn-lite{background:var(--white); color:var(--ink); border-color:var(--white)}
.btn-lite:hover{background:var(--amber); border-color:var(--amber); color:var(--ink)}
.btn-ghost-d{background:transparent; color:var(--white); border-color:var(--ink-line)}
.btn-ghost-d:hover{background:var(--ink-2); color:var(--white); border-color:var(--white)}
.btn-sm{padding:11px 16px; font-size:13.5px}
.btn-block{display:flex; width:100%; justify-content:flex-start}

/* ============================================================
   HEADER  —  do not add a padding shorthand to .head-in or any
   class on it; the horizontal padding comes from .wrap.
   ============================================================ */
.site-head{background:var(--white); border-bottom:2px solid var(--ink); position:relative; z-index:20}
.head-in{display:flex; align-items:center; gap:24px; min-height:78px}
.brand{display:flex; align-items:center; gap:14px; flex-shrink:0; text-decoration:none}
.brand svg{display:block; height:27px; width:auto; flex-shrink:0}
.brand .nm{font-family:var(--display); font-weight:800; font-size:17px; line-height:1;
           letter-spacing:-0.005em; color:var(--ink); white-space:nowrap}
.brand .bar{width:2px; height:30px; background:var(--rule)}
.brand .desc{font-family:var(--mono); font-size:8.5px; line-height:1.55; letter-spacing:.14em;
             text-transform:uppercase; color:var(--muted); white-space:nowrap}
.site-nav{margin-left:auto; display:flex; align-items:center; gap:26px}
.site-nav a{font-size:14.5px; font-weight:500; text-decoration:none; color:var(--ink); white-space:nowrap}
.site-nav a:hover{color:var(--teal)}
.site-nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--amber)}
.site-nav .btn:hover{color:var(--white)}

/* ============================================================
   HERO  (home page)
   ============================================================ */
.a-type{padding-top:clamp(40px,6vw,78px); padding-bottom:clamp(32px,4vw,48px)}
.a-type h1{font-size:clamp(32px,5.1vw,68px); line-height:1.02; max-width:23ch; margin:16px 0 0}
.a-grid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
        gap:clamp(24px,5vw,72px); align-items:end; margin-top:clamp(26px,3.4vw,40px)}
.a-grid .lede{font-size:clamp(16px,1.35vw,18.5px); line-height:1.6; color:var(--muted); max-width:56ch}
.a-grid .lede b{color:var(--ink); font-weight:600}
.a-cta{display:flex; flex-wrap:wrap; gap:12px}

/* ---- PHOTO SLOT ------------------------------------------------
   The band below IS the hero image slot. To place the photograph:
   1. save it as assets/hero.jpg (2400px wide or more, ~3:1)
   2. uncomment the two lines marked PHOTO in .a-band
   Nothing else changes — the type and the division index stay put.
   ---------------------------------------------------------------- */
.a-band{background:var(--ink); color:var(--white); position:relative;
        /* PHOTO: background-image:linear-gradient(rgba(16,32,30,.82),rgba(16,32,30,.82)),url("hero.jpg"); */
        /* PHOTO: background-size:cover; background-position:center; */
        }
.a-band-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,360px); gap:clamp(24px,4vw,56px);
           align-items:end; padding-top:clamp(38px,5vw,62px); padding-bottom:clamp(34px,4vw,54px);
           min-height:300px}
.a-band-in>*{min-width:0}
.a-band h2{font-size:clamp(23px,3.05vw,42px); line-height:1.1; max-width:24ch}
.a-band h2 em{font-style:normal; color:var(--amber)}
.a-band h2 i{font-style:normal; color:var(--teal)}
.a-band .sub{color:var(--on-ink); font-size:14.5px; margin-top:16px; max-width:52ch}
.a-divs{display:grid; gap:2px; width:100%}
.a-div{background:rgba(23,41,38,.66); border-left:3px solid var(--amber); padding:14px 18px; text-decoration:none; display:block}
.a-div.t{border-left-color:var(--teal)}
a.a-div:hover{background:var(--ink-2)}
.a-div .l{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; color:var(--on-ink-dim)}
.a-div .n{display:block; font-family:var(--display); font-weight:700; font-size:15px; color:var(--white); margin:5px 0 4px}
.a-div .c{display:block; font-family:var(--mono); font-size:11px; line-height:1.55; color:var(--on-ink); text-wrap:pretty}

/* capability bar -------------------------------------------- */
.cap{background:var(--white); border-bottom:2px solid var(--ink)}
.cap-in{display:grid; grid-template-columns:repeat(4,1fr)}
.cap-cell{padding:24px 26px 26px; border-left:2px solid var(--surface)}
.cap-cell:first-child{border-left:0; padding-left:0}
.cap-cell:last-child{padding-right:0}
.cap-cell h3{font-size:15px; font-weight:700; letter-spacing:-0.01em; margin:10px 0 6px}
.cap-cell p{font-size:13.5px; line-height:1.5; color:var(--muted)}
.cap-cell .n{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--muted)}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{padding-top:clamp(48px,6vw,88px); padding-bottom:clamp(48px,6vw,88px); border-bottom:2px solid var(--ink)}
.sec.ink{background:var(--ink); color:var(--white); border-bottom-color:var(--ink)}
.sec.ink a{color:var(--white); text-decoration-color:var(--amber)}
.sec.ink a:hover{color:var(--amber)}
.sec-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(22px,4vw,64px); align-items:start}
.sec-head h2{font-size:clamp(26px,3.4vw,44px); line-height:1.06; margin:14px 0 0}
.sec-head .lede{font-size:clamp(15.5px,1.3vw,18px); line-height:1.65; color:var(--muted)}
.sec.ink .sec-head .lede{color:var(--on-ink)}
.sec-head .lede p+p{margin-top:14px}
.sec-body{margin-top:clamp(30px,4vw,52px)}

/* divisions ------------------------------------------------- */
.divs{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--rule)}
.div-card{background:var(--white); padding:clamp(24px,2.6vw,38px); display:flex; flex-direction:column; gap:20px}
.div-card .top{border-top:4px solid var(--amber); padding-top:18px}
.div-card.t .top{border-top-color:var(--teal)}
.div-card h3{font-size:clamp(20px,2.2vw,28px); line-height:1.1; margin:10px 0 0}
.div-card p{color:var(--muted); font-size:15.5px}
.div-list{list-style:none; padding:0; display:grid; gap:0; border-top:2px solid var(--rule)}
.div-list li{border-bottom:2px solid var(--rule)}
.div-list a{display:flex; align-items:baseline; gap:12px; padding:13px 0; text-decoration:none; font-weight:500; font-size:15px}
.div-list a:hover{color:var(--teal)}
.div-list .c{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--muted); margin-left:auto; white-space:nowrap}
.div-card .foot{margin-top:auto}

/* industries ------------------------------------------------ */
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--ink-line)}
.sec:not(.ink) .grid-4{background:var(--rule)}
.ind{background:var(--ink); padding:24px 22px 26px}
.sec:not(.ink) .ind{background:var(--white)}
.ind .n{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--on-ink-dim)}
.ind h3{font-size:16.5px; line-height:1.2; margin:10px 0 8px}
.ind p{font-size:13.5px; line-height:1.5; color:var(--on-ink)}
.sec:not(.ink) .ind p{color:var(--muted)}

/* brand / partner slots ------------------------------------- */
.slots{display:grid; grid-template-columns:repeat(6,1fr); gap:2px; background:var(--rule)}
.slot{background:var(--white); aspect-ratio:16/7; display:flex; align-items:center; justify-content:center}
.slot span{font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--muted)}

/* why choose ------------------------------------------------ */
.reasons{display:grid; grid-template-columns:1fr 1fr; gap:2px 0; column-gap:clamp(24px,4vw,64px)}
.reason{border-top:2px solid var(--ink-line); padding:20px 0 24px}
.reason .n{font-family:var(--display); font-weight:800; font-size:26px; line-height:1; color:var(--amber)}
.reason:nth-child(even) .n{color:var(--teal)}
.reason h3{font-size:17px; margin:12px 0 8px}
.reason p{font-size:14.5px; line-height:1.6; color:var(--on-ink)}

/* enquiry form ---------------------------------------------- */
.enq{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:2px; background:var(--rule)}
.enq>*{min-width:0}
.enq-form{background:var(--white); padding:clamp(24px,3vw,40px)}
.enq-side{background:var(--white); padding:clamp(24px,3vw,40px)}
.f-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:24px}
.field{display:flex; flex-direction:column; gap:7px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.field input,.field select,.field textarea{font-family:var(--sans); font-size:15px; color:var(--ink);
  background:var(--surface); border:2px solid var(--rule); padding:12px 14px; width:100%}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink); outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--teal); outline-offset:1px}
.f-note{font-size:13px; color:var(--muted); margin-top:16px}
.contact-list{list-style:none; padding:0; margin-top:22px; border-top:2px solid var(--rule)}
.contact-list li{border-bottom:2px solid var(--rule); padding:14px 0; display:grid;
                 grid-template-columns:112px minmax(0,1fr); gap:14px; align-items:baseline}
.contact-list dt,.contact-list .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
                                  text-transform:uppercase; color:var(--muted)}
.contact-list .v{font-size:15px; font-weight:500}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{background:var(--ink); color:var(--on-ink); padding-top:clamp(40px,5vw,64px); padding-bottom:36px}
.foot-top{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,56px)}
.foot-top svg{display:block; height:86px; width:auto}
.site-foot h3{font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.16em;
              text-transform:uppercase; color:var(--on-ink-dim); margin-bottom:16px}
.site-foot ul{list-style:none; padding:0; display:grid; gap:9px}
.site-foot a{color:var(--on-ink); text-decoration:none; font-size:14.5px}
.site-foot a:hover{color:var(--amber)}
.site-foot .about{font-size:14px; line-height:1.6; margin-top:18px; max-width:38ch}
.foot-bot{border-top:2px solid var(--ink-line); margin-top:clamp(32px,4vw,48px); padding-top:22px;
          display:flex; flex-wrap:wrap; gap:8px 28px; align-items:baseline;
          font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:var(--on-ink-dim)}
.foot-bot .lic{color:var(--white)}

/* ============================================================
   CATALOGUE  (products.html)
   ============================================================ */
.cat-head{padding-top:clamp(34px,4vw,56px); padding-bottom:clamp(30px,3.6vw,46px)}
.cat-head h1{font-size:clamp(30px,4.4vw,58px); line-height:1.03; max-width:20ch; margin:14px 0 0}
.cat-head .lede{font-size:clamp(16px,1.35vw,18.5px); color:var(--muted); max-width:62ch; margin-top:20px}
.crumb{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; color:var(--muted)}
.crumb a{text-decoration:none; color:var(--muted)}
.crumb a:hover{color:var(--teal)}
.crumb span{color:var(--rule); padding:0 8px}
.div-band{border-top:2px solid var(--ink); padding-top:clamp(30px,3.4vw,44px); padding-bottom:clamp(40px,5vw,72px)}
.div-band .hd{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 20px; padding-bottom:22px}
.div-band .hd h2{font-size:clamp(22px,2.7vw,34px); line-height:1.1}
.div-band .hd .rule{flex:1; min-width:40px; height:4px; background:var(--amber)}
.div-band.t .hd .rule{background:var(--teal)}
.div-band .hd p{color:var(--muted); font-size:15px; flex-basis:100%; max-width:70ch}
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--rule)}
.card{background:var(--white); padding:26px 24px 24px; display:flex; flex-direction:column; gap:12px;
      text-decoration:none; border-top:4px solid var(--amber)}
.card.t{border-top-color:var(--teal)}
.card:hover{background:#fff; color:var(--ink)}
.card:hover h3{color:var(--teal)}
.card .n{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--muted)}
.card h3{font-size:19px; line-height:1.15}
.card p{font-size:14px; line-height:1.55; color:var(--muted)}
.card .items{display:block; font-family:var(--mono); font-size:11px; line-height:1.6; color:var(--muted);
             border-top:2px solid var(--rule); padding-top:12px; margin-top:auto}
.card .go{display:block; font-family:var(--display); font-weight:700; font-size:13.5px; color:var(--ink)}
.card .n{display:block}

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.p-head{padding-top:clamp(28px,3.4vw,44px); padding-bottom:clamp(30px,3.6vw,48px); border-bottom:2px solid var(--ink)}
.p-tag{display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
       background:var(--amber); color:var(--ink); padding:6px 12px; margin-top:18px; font-weight:500}
.p-tag.t{background:var(--teal); color:var(--white)}
.p-head h1{font-size:clamp(30px,4.2vw,56px); line-height:1.03; max-width:22ch; margin:18px 0 0}
.p-head .lede{font-size:clamp(16px,1.35vw,19px); line-height:1.6; color:var(--muted); max-width:64ch; margin-top:20px}
.p-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,352px); gap:0}
.p-main{min-width:0; background:var(--surface); padding:clamp(30px,3.6vw,56px) clamp(0px,2.4vw,40px) clamp(40px,5vw,72px) 0}
.p-side{min-width:0; background:var(--surface); border-left:2px solid var(--rule); padding:clamp(30px,3.6vw,56px) 0 clamp(40px,5vw,72px) clamp(22px,2.4vw,36px)}

.facts{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--rule); border:2px solid var(--rule)}
.fact{background:var(--white); padding:18px 20px}
.fact dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.fact dd{margin:8px 0 0; font-size:15px; line-height:1.5; font-weight:500}
.prose{margin-top:clamp(30px,3.4vw,44px); max-width:68ch}
.prose h2{font-size:clamp(20px,2.2vw,27px); line-height:1.1; margin:0 0 16px}
.prose h3{font-size:17px; margin:32px 0 10px}
.prose p{font-size:16.5px; line-height:1.68; color:#233b37}
.prose p+p{margin-top:16px}
.blk{margin-top:clamp(34px,4vw,56px)}
.blk>h2{font-size:clamp(20px,2.2vw,27px); line-height:1.1; margin-bottom:8px}
.blk>.hint{font-size:14px; color:var(--muted); margin-bottom:20px; max-width:64ch}
.tbl-scroll{overflow-x:auto; max-width:100%; border:2px solid var(--rule); background:var(--white)}
table{border-collapse:collapse; width:100%; min-width:520px}
caption{text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
        color:var(--muted); padding:14px 18px; border-bottom:2px solid var(--rule)}
th,td{text-align:left; padding:13px 18px; border-bottom:2px solid var(--surface); font-size:14.5px; vertical-align:top}
thead th{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
         color:var(--muted); font-weight:500; border-bottom:2px solid var(--rule); white-space:nowrap}
tbody th{font-weight:600}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
td.cas,th.cas{font-family:var(--mono); font-size:13px; white-space:nowrap}
.apps{list-style:none; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--rule);
      border:2px solid var(--rule)}
.apps li{background:var(--white); padding:14px 18px; font-size:14.5px}
.apps li b{font-weight:600}
.apps li span{display:block; color:var(--muted); font-size:13.5px; margin-top:3px}

/* sticky sidebar -------------------------------------------- */
.stick{position:sticky; top:22px; display:grid; gap:2px}
.panel{background:var(--white); border:2px solid var(--rule); padding:22px 22px 24px}
.panel.dark{background:var(--ink); color:var(--white); border-color:var(--ink)}
.panel h2{font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.16em;
          text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.panel.dark h2{color:var(--on-ink-dim)}
.panel.dark h3{font-size:19px; line-height:1.15; margin-bottom:10px}
.panel.dark p{font-size:14px; color:var(--on-ink); margin-bottom:18px}
.panel.dark a:not(.btn){color:var(--white); text-decoration-color:var(--amber)}
.panel.dark a:not(.btn):hover{color:var(--amber)}
.check{list-style:none; padding:0; display:grid; gap:0}
.check li{font-size:14.5px; line-height:1.5; padding:11px 0 11px 22px; border-bottom:2px solid var(--surface); position:relative}
.check li:last-child{border-bottom:0; padding-bottom:0}
.check li::before{content:""; position:absolute; left:0; top:18px; width:10px; height:2px; background:var(--amber)}
.p-side.t .check li::before{background:var(--teal)}
.xlinks{list-style:none; padding:0; border-top:2px solid var(--surface)}
.xlinks li{border-bottom:2px solid var(--surface)}
.xlinks li:last-child{border-bottom:0}
.xlinks a{display:flex; align-items:baseline; gap:10px; padding:12px 0; font-size:14.5px; font-weight:500; text-decoration:none}
.xlinks a:hover{color:var(--teal)}
.xlinks .c{font-family:var(--mono); font-size:10.5px; color:var(--muted); margin-left:auto}

/* strip CTA ------------------------------------------------- */
.strip{background:var(--ink); color:var(--white); padding-top:clamp(36px,4.4vw,60px); padding-bottom:clamp(36px,4.4vw,60px)}
.strip-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto); gap:clamp(22px,4vw,56px); align-items:center}
.strip h2{font-size:clamp(22px,2.8vw,36px); line-height:1.1; max-width:26ch}
.strip p{color:var(--on-ink); margin-top:12px; max-width:52ch; font-size:15px}
.strip .acts{display:flex; flex-wrap:wrap; gap:12px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1200px){
  .grid-4{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
  .slots{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1140px){
  .cap-in{grid-template-columns:1fr 1fr}
  .cap-cell{padding-left:26px}
  .cap-cell:nth-child(3){border-left:0; padding-left:0}
  .cap-cell:nth-child(1),.cap-cell:nth-child(2){padding-left:0}
  .cap-cell:nth-child(2){padding-left:26px}
  .cap-cell:nth-child(4){padding-left:26px}
  .cap-cell:nth-child(n+3){border-top:2px solid var(--surface); padding-top:24px}
  .foot-top{grid-template-columns:1fr 1fr; row-gap:38px}
}
@media (max-width:1024px){
  .site-head .head-in{flex-wrap:wrap; padding-top:16px; padding-bottom:14px; min-height:0; gap:14px 20px}
  .brand{margin-right:auto}
  .brand .bar,.brand .desc{display:none}
  .site-nav{margin-left:0; flex-basis:100%; flex-wrap:wrap; gap:14px 22px;
            border-top:2px solid var(--surface); padding-top:14px}
  .site-nav .btn{margin-left:auto}
  .a-band-in{grid-template-columns:1fr; gap:30px}
  .a-grid{grid-template-columns:1fr; gap:26px; align-items:start}
  .p-body{grid-template-columns:1fr}
  .p-main{padding-right:0; padding-bottom:clamp(30px,4vw,44px)}
  .p-side{padding-left:0; padding-top:0; border-left:0; border-top:2px solid var(--rule)}
  .stick{position:static}
  .sec-head{grid-template-columns:1fr; gap:18px}
  .enq{grid-template-columns:1fr}
  .strip-in{grid-template-columns:1fr}
}
@media (max-width:820px){
  .divs{grid-template-columns:1fr}
  .reasons{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .apps{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cap-in{grid-template-columns:1fr}
  .cap-cell,.cap-cell:nth-child(2),.cap-cell:nth-child(4){border-left:0; padding-left:0; padding-right:0}
  .cap-cell:nth-child(n+2){border-top:2px solid var(--surface); padding-top:22px}
  .grid-4,.cards,.f-grid{grid-template-columns:1fr}
  .slots{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr}
  .a-cta .btn,.strip .acts .btn{flex:1 1 100%; justify-content:flex-start}
  .site-nav{gap:12px 18px}
  .site-nav .btn{flex-basis:100%; margin-left:0; justify-content:flex-start}
  .contact-list li{grid-template-columns:1fr; gap:4px}
  .div-list .c,.xlinks .c{display:none}
  .div-list a{padding:14px 0}
}

/* ============================================================
   IDENTITY STRIP  —  the nameplate above the header
   ============================================================ */
.ident{background:var(--ink); color:var(--on-ink)}
.ident-in{display:flex; flex-wrap:wrap; align-items:center; gap:7px 26px;
          padding-top:11px; padding-bottom:11px}
.ident .legal{font-family:var(--display); font-weight:700; font-size:13px;
              letter-spacing:-0.01em; color:var(--white)}
.ident .loc{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase}
.ident .dv{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
           display:flex; align-items:center; gap:9px; white-space:nowrap}
.ident .dvs{display:flex; flex-wrap:wrap; gap:7px 22px; margin-left:auto}
.ident .sw{display:block; width:9px; height:9px; background:var(--amber); flex-shrink:0}
.ident .sw.t{background:var(--teal)}
.ident .sm{display:none}
@media (max-width:900px){
  .ident .dvs{margin-left:0}
  .ident-in{gap:7px 20px}
}
@media (max-width:560px){
  .ident .loc{display:none}
  .ident .legal{flex-basis:100%}
  .ident .lg{display:none}
  .ident .sm{display:inline}
  .ident .dvs{gap:7px 18px}
}