/* ==========================================================================
   MENKAR INTERNATIONAL — STYLESHEET
   Colours are set once in :root below. Change them there and they change
   everywhere on the site.
   ========================================================================== */

:root{
  --indigo:#1C2E63;      /* brand indigo — from the company profile */
  --indigo-d:#101D45;
  --indigo-l:#34509B;
  --green:#00A85A;       /* brand green */
  --green-d:#008948;
  --bg:#FFFFFF;
  --bg-2:#F2F5FA;
  --ink:#141B2E;
  --ink-2:#575A78;
  --line:#DBE0EC;
  --card:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1226; --bg-2:#131C36; --ink:#EDEEF7; --ink-2:#A8ABC9;
    --line:#26325C; --card:#131C36; --indigo:#7E9AD8; --indigo-d:#101D45;
    --indigo-l:#9DB4E8; --green:#25C97A; --green-d:#1FAE68;
  }
}
:root[data-theme="dark"]{
  --bg:#0B1226; --bg-2:#131C36; --ink:#EDEEF7; --ink-2:#A8ABC9;
  --line:#26325C; --card:#131C36; --indigo:#7E9AD8; --indigo-d:#101D45;
  --indigo-l:#9DB4E8; --green:#25C97A; --green-d:#1FAE68;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16.5px;line-height:1.62}
img{display:block;max-width:100%}
a{color:inherit}
button,input{font:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:3px}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.5rem}
h1,h2,h3,h4{font-family:"Archivo",Helvetica,Arial,sans-serif;letter-spacing:-.02em;margin:0}

/* ---------- navigation ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--indigo);color:#fff;border-bottom:3px solid var(--green)}
.nav .wrap{display:flex;align-items:center;gap:1.25rem;height:64px}
.logo{font-family:"Archivo",sans-serif;font-weight:800;font-style:italic;font-size:1.5rem;
  text-decoration:none;line-height:1}
.logo span{display:block;font-style:normal;font-weight:600;font-size:.52rem;letter-spacing:.42em;
  margin-top:1px;opacity:.9}
.nav nav{margin-left:auto;display:flex;gap:1.4rem;align-items:center}
.nav nav a{text-decoration:none;font-size:.92rem;font-weight:500;opacity:.85;padding-bottom:2px;
  border-bottom:2px solid transparent}
.nav nav a:hover{opacity:1}
.nav nav a.active{opacity:1;font-weight:600;border-bottom-color:var(--green)}
.cartbtn{background:var(--green);color:#fff;border:0;padding:.5rem .95rem;border-radius:4px;
  font-weight:600;font-size:.9rem;cursor:pointer;display:inline-flex;gap:.45rem;align-items:center}
.cartbtn:hover{background:var(--green-d)}
.cartbtn .n{background:rgba(0,0,0,.28);border-radius:99px;padding:0 .42rem;font-size:.8rem;
  min-width:1.25rem;text-align:center}
.menu-toggle{display:none;margin-left:auto;background:transparent;border:1px solid rgba(255,255,255,.4);
  color:#fff;border-radius:4px;padding:.35rem .6rem;cursor:pointer}

/* ---------- page switching ---------- */
.page{display:none}
.page.on{display:block}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--indigo-d);color:#fff;overflow:hidden}
.hero img.bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.30}
.hero .wrap{position:relative;padding:5rem 1.5rem 4.5rem}
.kicker{display:inline-block;background:var(--green);color:#fff;font-weight:600;font-size:.82rem;
  padding:.3rem .75rem;border-radius:3px;margin-bottom:1.15rem}
.hero h1{font-size:clamp(2.3rem,6vw,4rem);font-weight:800;line-height:1.03;max-width:19ch}
.hero p{max-width:52ch;margin:1.15rem 0 2rem;font-size:1.08rem;color:#DCDDF2}
.cta{display:inline-block;background:var(--green);color:#fff;text-decoration:none;font-weight:600;
  padding:.85rem 1.6rem;border-radius:4px;cursor:pointer;border:0}
.cta:hover{background:var(--green-d)}
.cta.alt{background:transparent;border:1.5px solid rgba(255,255,255,.55);margin-left:.6rem}
.cta.alt:hover{background:rgba(255,255,255,.14)}
.hero-strip{position:relative;display:flex;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.2)}
.hero-strip div{flex:1 1 12rem;padding:1.1rem 1.5rem;border-right:1px solid rgba(255,255,255,.16)}
.hero-strip b{font-family:"Archivo",sans-serif;display:block;font-size:1.02rem;font-weight:700}
.hero-strip small{color:#C3C5E6;font-size:.85rem}

/* ---------- inner page banner ---------- */
.banner{background:var(--indigo-d);color:#fff;padding:3rem 0 2.75rem}
.banner h1{font-size:clamp(1.9rem,5vw,3rem);font-weight:800;line-height:1.06}
.banner p{color:#C7C9E8;max-width:58ch;margin:.7rem 0 0}

section{padding:4.5rem 0}
section.tight{padding:3.25rem 0}
.shead h2{font-size:clamp(1.7rem,4.2vw,2.5rem);font-weight:700;line-height:1.12}
.shead p{color:var(--ink-2);max-width:56ch;margin:.6rem 0 0}
.alt-bg{background:var(--bg-2)}

/* ---------- service rows ---------- */
.svc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:3rem;align-items:center;
  margin-top:3.25rem;padding-top:3.25rem;border-top:1px solid var(--line)}
.svc.first{border-top:0;padding-top:0;margin-top:0}
.svc.flip figure{order:2}
.svc figure{margin:0}
.svc figure img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:5px}
.svc h3{font-size:1.5rem;font-weight:700}
.svc .lead{color:var(--ink-2);margin:.5rem 0 1.2rem}
.svc ul{list-style:none;padding:0;margin:0;display:grid;gap:.85rem}
.svc li{padding-left:1.6rem;position:relative;font-size:.96rem}
.svc li::before{content:"";position:absolute;left:0;top:.55em;width:.65rem;height:.65rem;
  background:var(--green);border-radius:2px}
.svc li b{display:block;font-family:"Archivo",sans-serif;font-weight:600}
.svc li span{color:var(--ink-2)}

/* ---------- home summary cards ---------- */
.sumgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.25rem;margin-top:2.5rem}
.sum{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--card);
  display:flex;flex-direction:column;text-decoration:none}
.sum img{width:100%;aspect-ratio:16/10;object-fit:cover}
.sum div{padding:1.1rem}
.sum h3{font-size:1.08rem;font-weight:700;margin-bottom:.3rem}
.sum p{margin:0;font-size:.9rem;color:var(--ink-2)}

.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:2.5rem;margin-top:2.5rem}
.why h3{font-size:1.18rem;font-weight:700;margin-bottom:.4rem;padding-top:1rem;border-top:3px solid var(--green)}
.why p{color:var(--ink-2);margin:0;font-size:.96rem}

/* ---------- products: search + filters ---------- */
.shoptools{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  margin-bottom:1.5rem}
.search{position:relative;flex:1 1 18rem;max-width:26rem}
.search input{width:100%;padding:.7rem 2.5rem .7rem 2.6rem;border:1px solid var(--line);
  background:var(--card);color:var(--ink);border-radius:5px;font-size:.95rem}
.search input::placeholder{color:var(--ink-2)}
.search svg{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);width:1.05rem;height:1.05rem;
  fill:none;stroke:var(--ink-2);stroke-width:2}
.search .clr{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:transparent;
  border:0;color:var(--ink-2);cursor:pointer;font-size:1.2rem;line-height:1;padding:.2rem .4rem;display:none}
.search .clr.on{display:block}
.count{color:var(--ink-2);font-size:.88rem;white-space:nowrap}

.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.75rem}
.filters button{background:var(--card);border:1px solid var(--line);color:var(--ink-2);
  padding:.45rem .95rem;border-radius:99px;cursor:pointer;font-size:.9rem}
.filters button:hover{border-color:var(--indigo)}
.filters button[aria-pressed="true"]{background:var(--indigo);border-color:var(--indigo);color:#fff;font-weight:600}

/* ---------- product cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.25rem}
.item{background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column}
.item .ph{position:relative;background:var(--bg-2)}
.item .ph img{width:100%;aspect-ratio:16/10;object-fit:cover}
.item .cat{position:absolute;top:.6rem;left:.6rem;background:rgba(20,20,50,.82);color:#fff;
  font-size:.72rem;font-weight:600;padding:.18rem .5rem;border-radius:3px}
.item .body{padding:1rem 1.1rem 1.1rem;display:flex;flex-direction:column;flex:1}
.item h4{font-size:1.02rem;font-weight:600;margin:0 0 .35rem;line-height:1.3}
.item p{margin:0 0 1rem;font-size:.87rem;color:var(--ink-2);flex:1}
.item .row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.item .pr{font-family:"Archivo",sans-serif;font-weight:700;font-size:1.15rem}
.item .pr small{display:block;font-family:"IBM Plex Sans",sans-serif;font-weight:400;
  font-size:.75rem;color:var(--ink-2)}
.add{background:var(--indigo);color:#fff;border:0;border-radius:4px;padding:.5rem .9rem;
  font-weight:600;font-size:.88rem;cursor:pointer;white-space:nowrap}
.add:hover{background:var(--indigo-l)}
.add.in{background:var(--green)}
.noresult{grid-column:1/-1;text-align:center;color:var(--ink-2);padding:3.5rem 1rem}
.noresult b{display:block;font-family:"Archivo",sans-serif;color:var(--ink);font-size:1.1rem;margin-bottom:.3rem}
.fine-note{color:var(--ink-2);font-size:.87rem;margin-top:1.75rem;border-left:3px solid var(--green);padding-left:1rem}

/* ---------- cart drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(10,10,30,.55);opacity:0;pointer-events:none;
  transition:opacity .18s ease;z-index:60}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(24rem,100%);background:var(--bg);
  z-index:70;transform:translateX(101%);transition:transform .22s ease;display:flex;flex-direction:column;
  border-left:1px solid var(--line)}
.drawer.on{transform:none}
.drawer header{background:var(--indigo);color:#fff;padding:1rem 1.25rem;display:flex;
  align-items:center;justify-content:space-between}
.drawer header h3{font-size:1.1rem;font-weight:700}
.drawer header button{background:transparent;border:0;color:#fff;font-size:1.5rem;cursor:pointer;line-height:1}
.ditems{flex:1;overflow:auto;padding:1rem 1.25rem}
.ditem{display:grid;grid-template-columns:1fr auto;gap:.4rem .75rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.ditem strong{font-family:"Archivo",sans-serif;font-weight:600;font-size:.95rem}
.ditem .sub{grid-column:1/-1;display:flex;align-items:center;gap:.6rem;color:var(--ink-2);font-size:.85rem}
.qty{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.qty button{background:var(--bg-2);border:0;width:1.9rem;height:1.7rem;cursor:pointer;color:var(--ink);font-weight:700}
.qty span{min-width:2rem;text-align:center;line-height:1.7rem;font-size:.88rem}
.rm{background:transparent;border:0;color:var(--ink-2);cursor:pointer;text-decoration:underline;font-size:.82rem}
.dfoot{border-top:1px solid var(--line);padding:1.1rem 1.25rem;background:var(--bg-2)}
.tot{display:flex;justify-content:space-between;font-family:"Archivo",sans-serif;font-weight:700;
  font-size:1.15rem;margin-bottom:.35rem}
.dfoot .fine{color:var(--ink-2);font-size:.8rem;margin:0 0 .9rem}
.wabtn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;background:var(--green);
  color:#fff;border:0;border-radius:4px;padding:.85rem;font-weight:700;cursor:pointer;text-decoration:none}
.wabtn:hover{background:var(--green-d)}
.mailbtn{display:block;text-align:center;width:100%;margin-top:.55rem;background:transparent;
  border:1px solid var(--line);border-radius:4px;padding:.7rem;color:var(--ink);text-decoration:none;font-size:.9rem}
.empty{color:var(--ink-2);text-align:center;padding:3rem 1rem;font-size:.95rem}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.85rem}
.gal figure{margin:0;position:relative;border-radius:5px;overflow:hidden}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(transparent,rgba(20,20,50,.9));color:#fff;font-size:.83rem;padding:1.9rem .75rem .65rem}

/* ---------- contact ---------- */
.contact{background:var(--indigo-d);color:#fff}
.contact h2{color:#fff}
.contact .shead p{color:#C7C9E8}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:2.5rem;margin-top:2.5rem}
.cgrid h4{font-size:.95rem;font-weight:700;color:var(--green);margin-bottom:.7rem}
.cgrid p{margin:0 0 .45rem;color:#DCDDF2;font-size:.96rem}
.cgrid a{color:#fff;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:3px}
.cgrid a:hover{text-decoration-color:#fff}
footer{background:#0D1834;color:#9EA1C4;font-size:.85rem;padding:1.6rem 0}
footer .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between}

/* ---------- mobile ---------- */
@media (max-width:860px){
  .svc{grid-template-columns:1fr;gap:1.5rem}
  .svc.flip figure{order:0}
  .nav nav{position:absolute;top:64px;left:0;right:0;background:var(--indigo);flex-direction:column;
    gap:0;padding:.5rem 0;display:none;border-bottom:3px solid var(--green)}
  .nav nav.open{display:flex}
  .nav nav a{padding:.7rem 1.5rem;width:100%;border-bottom:0}
  .nav nav a.active{border-bottom:0;text-decoration:underline;text-underline-offset:4px}
  .menu-toggle{display:block}
  .cartbtn{margin-left:.5rem}
  .shoptools{gap:.6rem}
  .search{max-width:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- product subcategory dropdown ---------- */
.subwrap{display:flex;align-items:center;gap:.6rem;margin:0 0 1.75rem}
.subwrap label{font-size:.88rem;color:var(--ink-2);font-weight:600}
.subwrap select{padding:.5rem 2rem .5rem .8rem;border:1px solid var(--line);border-radius:5px;
  background:var(--card);color:var(--ink);font-size:.92rem;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 1.05rem) 55%, calc(100% - .75rem) 55%;
  background-size:.32rem .32rem,.32rem .32rem;background-repeat:no-repeat}
.subwrap select:hover{border-color:var(--indigo)}

/* ---------- water service request cards ---------- */
.requests{margin:0 0 2.5rem;padding-bottom:2rem;border-bottom:1px solid var(--line)}
.reqhead{font-size:1.25rem;font-weight:700;margin:0 0 .2rem}
.reqsub{color:var(--ink-2);font-size:.92rem;margin:0 0 1.25rem;max-width:52ch}
.reqgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.reqcard{display:flex;flex-direction:column;gap:.4rem;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--green);
  border-radius:6px;padding:1.1rem 1.15rem;transition:border-color .15s ease,transform .15s ease}
.reqcard:hover{border-color:var(--green);transform:translateY(-2px)}
.reqcard:hover strong{color:var(--green-d)}
.reqcard strong{font-family:"Archivo",sans-serif;font-weight:700;font-size:1rem;line-height:1.3}
.reqcard span{color:var(--ink-2);font-size:.87rem;flex:1}
.reqcard em{font-style:normal;color:var(--green-d);font-weight:600;font-size:.85rem;margin-top:.3rem}