/* ==========================================================================
   Hydrotech Engineering Trading Enterprise
   Single stylesheet. No framework, no build step, no web-font download.
   ========================================================================== */

:root{
  --brand:#0E4C6B;          /* deep water blue */
  --brand-d:#082F44;
  --brand-l:#17A2C4;        /* cyan, taken from the logo ring */
  --cta:#E2621C;            /* hi-vis orange, taken from site PPE */
  --cta-d:#C24F10;
  --ink:#0F1519;
  --ink-2:#3B4A55;
  --muted:#61707C;
  --line:#E1E7EB;
  --soft:#F3F7F9;
  --white:#fff;
  --wa:#25D366;
  --max:1180px;
  --r:14px;
  --shadow:0 1px 2px rgba(15,21,25,.05), 0 12px 28px -12px rgba(15,21,25,.18);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);font-family:var(--font);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.15;letter-spacing:-.022em;margin:0 0 .5em;font-weight:750}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.6rem,3vw,2.35rem)}
h3{font-size:1.19rem;letter-spacing:-.012em}
p{margin:0 0 1rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.muted{color:var(--muted)}
.sm{font-size:.875rem}
.center{text-align:center}
.mt{margin-top:18px}

.skip{position:absolute;left:-9999px;background:var(--brand);color:#fff;padding:12px 18px;z-index:99}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:3px solid var(--brand-l);outline-offset:2px;border-radius:4px}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--cta);color:#fff;font-weight:650;font-size:1rem;
  padding:14px 26px;border-radius:999px;border:2px solid var(--cta);
  cursor:pointer;transition:.16s ease;text-decoration:none;white-space:nowrap;
}
.btn:hover{background:var(--cta-d);border-color:var(--cta-d);text-decoration:none;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--brand);border-color:currentColor}
.btn-ghost:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-sm{padding:10px 18px;font-size:.92rem}
.btn-wa{background:var(--wa);border-color:var(--wa);width:100%;margin:6px 0 22px}
.btn-wa:hover{background:#1eb257;border-color:#1eb257}
.more{color:var(--brand);font-weight:650;font-size:.95rem;display:inline-block}
.more::after{content:" →"}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{max-width:var(--max);margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand img{border-radius:50%;flex:0 0 auto}
.brand span{display:flex;flex-direction:column;line-height:1.12}
.brand strong{font-size:1.22rem;letter-spacing:-.03em;font-weight:800}
.brand em{font-style:normal;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.site-head nav{margin-left:auto}
.site-head ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.site-head nav a{color:var(--ink-2);font-weight:600;font-size:.97rem;padding:6px 0;position:relative}
.site-head nav a:hover{color:var(--brand);text-decoration:none}
.site-head nav a.is-current{color:var(--brand)}
.site-head nav a.is-current::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--brand-l)}
.burger{display:none}
.head-cta{flex:0 0 auto}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;color:#fff;isolation:isolate;padding:112px 0 96px;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(8,47,68,.94) 0%,rgba(8,47,68,.82) 45%,rgba(8,47,68,.42) 100%)}
.hero-in{max-width:820px}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;font-weight:700;
  color:var(--brand-l);margin:0 0 14px}
.hero h1{color:#fff;margin-bottom:18px}
.lede{font-size:1.14rem;color:rgba(255,255,255,.9);max-width:62ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 18px}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.65)}
.hero .btn-ghost:hover{background:#fff;color:var(--brand);border-color:#fff}
.hero-call{font-size:.98rem;color:rgba(255,255,255,.78);margin:0}
.hero-call a{color:#fff;font-weight:650;border-bottom:1px solid rgba(255,255,255,.4)}
.hero-call a:hover{text-decoration:none;border-color:#fff}

/* ── Stats ───────────────────────────────────────────────────────────────── */
.stats{background:var(--brand-d);color:#fff}
/* Column count is tied to the number of stats in the homepage template in
   build/build.py. There were four until 3 Oct 2026, when "DN63 to DN500 /
   Pipe range installed" was dropped. Add or remove a stat there and this
   number has to follow, or the row leaves a silent empty column. */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding-top:0;padding-bottom:0}
.stat-grid div{padding:26px 10px;text-align:center}
.stat-grid strong{display:block;font-size:1.85rem;font-weight:800;letter-spacing:-.02em}
.stat-grid span{font-size:.82rem;color:rgba(255,255,255,.72);text-transform:uppercase;letter-spacing:.07em}

/* ── Sections ────────────────────────────────────────────────────────────── */
.sec{padding:76px 22px}
.alt{background:var(--soft);border-block:1px solid var(--line)}
.sec-head{max-width:640px;margin-bottom:38px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head p{color:var(--muted);font-size:1.06rem;margin:0}
.page-head{background:var(--brand-d);color:#fff;padding:74px 0 62px}
.page-head.tall{padding:110px 0}
.page-head h1{color:#fff;max-width:19ch}
.page-head .lede{color:rgba(255,255,255,.82)}
.page-head .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}

/* ── Services ────────────────────────────────────────────────────────────── */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px}
.svc{border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;background:#fff;
  transition:.18s ease}
.svc:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:#cfdae1}
.svc-n{font-size:.78rem;font-weight:800;letter-spacing:.14em;color:var(--brand-l)}
.svc h3{margin:8px 0 8px}
.svc p{color:var(--muted);font-size:.97rem}
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:38px 0;border-bottom:1px solid var(--line)}
.svc-row:last-child{border-bottom:0}
.svc-row-head h2{margin:6px 0 10px}
.svc-row-head p{color:var(--muted);margin:0}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding:9px 0 9px 30px;border-bottom:1px dashed var(--line)}
.ticks li:last-child{border-bottom:0}
.ticks li::before{content:"";position:absolute;left:2px;top:16px;width:14px;height:8px;
  border-left:2.5px solid var(--brand-l);border-bottom:2.5px solid var(--brand-l);
  transform:rotate(-45deg)}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:26px}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;color:inherit;transition:.18s ease}
.card:hover{text-decoration:none;box-shadow:var(--shadow);transform:translateY(-3px);border-color:#cfdae1}
.card-img{aspect-ratio:3/2;overflow:hidden;background:var(--soft)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:.4s ease}
.card:hover .card-img img{transform:scale(1.045)}
.card-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.card h3{margin:9px 0 8px;font-size:1.13rem}
.card p{color:var(--muted);font-size:.95rem;flex:1}
.tag{display:inline-block;background:#E7F1F6;color:var(--brand);font-size:.71rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px}

/* ── Client logos ────────────────────────────────────────────────────────── */
.logos{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,1fr);gap:14px;align-items:center}
.logos li{border:1px solid var(--line);border-radius:10px;padding:18px 16px;height:104px;
  display:flex;align-items:center;justify-content:center;background:#fff}
/* contain, never cover — this is what clipped SINCO and ASPAC on the old site */
.logos img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.72;transition:.2s ease}
.logos li:hover img{filter:none;opacity:1}

/* ── CTA band ────────────────────────────────────────────────────────────── */
.band{background:var(--brand);color:#fff}
.band-in{display:flex;align-items:center;justify-content:space-between;gap:34px;
  flex-wrap:wrap;padding:52px 22px}
.band h2{color:#fff;margin:0 0 6px}
.band p{color:rgba(255,255,255,.82);margin:0;max-width:52ch}
.band-actions{display:flex;gap:12px;flex-wrap:wrap}
.band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.band .btn-ghost:hover{background:#fff;color:var(--brand);border-color:#fff}

/* ── Project detail ──────────────────────────────────────────────────────── */
.crumbs{background:var(--soft);border-bottom:1px solid var(--line);font-size:.88rem;padding:12px 0}
.crumbs span{color:#b6c2ca;margin:0 6px}
.crumbs b{color:var(--ink-2);font-weight:600}
.proj-head{padding:52px 22px 26px;max-width:840px}
.proj-head h1{margin:12px 0 12px}
.proj-head .lede{color:var(--muted)}
.proj-figure{margin:0;max-width:var(--max);padding:0 22px;margin-inline:auto}
.proj-figure img{width:100%;border-radius:var(--r);aspect-ratio:3/2;object-fit:cover}
.proj-body{display:grid;grid-template-columns:1.6fr 1fr;gap:52px;padding:48px 22px 76px}
.proj-text p{font-size:1.06rem;color:var(--ink-2)}
.proj-facts{background:var(--soft);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;align-self:start;position:sticky;top:88px}
.proj-facts h2{font-size:1.05rem;margin:0 0 12px}
.proj-facts dl{margin:0 0 20px}
.proj-facts dl div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px dashed var(--line)}
.proj-facts dt{color:var(--muted);font-size:.88rem}
.proj-facts dd{margin:0;font-weight:650;font-size:.92rem;text-align:right}
.pager{display:flex;justify-content:space-between;gap:20px;padding-block:34px}
.pager a{max-width:46%;font-weight:650;color:var(--ink)}
.pager span{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted);margin-bottom:3px;font-weight:700}
.pager-r{text-align:right;margin-left:auto}

/* ── About ───────────────────────────────────────────────────────────────── */
.two-col{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:start}
.two-col h2{margin-top:34px}
.two-col h2:first-child{margin-top:0}
.round{border-radius:var(--r);width:100%;aspect-ratio:3/2;object-fit:cover}
.callout{margin-top:18px;background:var(--soft);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 22px}
.callout h3{font-size:1rem;margin:0 0 6px}
.callout p{margin:0;color:var(--muted);font-size:.95rem}

/* ── Contact ─────────────────────────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:52px;align-items:start}
.form{display:flex;flex-direction:column;gap:16px}
.f-row{display:flex;flex-direction:column;gap:6px}
.f-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{font-weight:650;font-size:.92rem}
label span{color:var(--cta)}
input,select,textarea{
  font:inherit;font-size:1rem;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink);width:100%;transition:.15s ease}
input:focus,select:focus,textarea:focus{border-color:var(--brand-l);outline:none;
  box-shadow:0 0 0 3px rgba(23,162,196,.16)}
textarea{resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-error{
  margin:0;padding:13px 16px;border-radius:10px;font-weight:600;font-size:.96rem;
  background:#FDF0E9;border:1.5px solid var(--cta);color:#8A3A0B}
.form-error[hidden]{display:none}
.form .btn{align-self:flex-start}
.contact-side{background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.contact-side h2{font-size:1.2rem;margin-bottom:14px}
.contact-side h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--muted);margin:22px 0 4px}
.big-links{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.big-links a{font-size:1.12rem;font-weight:700;letter-spacing:-.01em}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-foot{background:var(--ink);color:#C8D2DA;margin-top:0}
.foot-grid{max-width:var(--max);margin:0 auto;padding:56px 22px 34px;display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.site-foot h3{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px}
.site-foot a{color:#C8D2DA}
.site-foot a:hover{color:#fff}
.site-foot p{font-size:.93rem;margin:0}
.foot-brand{margin-bottom:12px}
.foot-brand strong{color:#fff}
.foot-brand em{color:#8C9AA6}
.plain{list-style:none;margin:0;padding:0;font-size:.93rem}
.plain li{padding:3px 0}

/* 🔴 Keep the contact column inside the screen.
   info@hydrotechengineering.org is a 29 character token with nowhere to break.
   A grid item defaults to min-width:auto, so that single word was sizing its
   own track wider than the 1fr it was given, which pushed the footer off the
   right edge of the phone and gave the whole page a sideways scroll.
   min-width:0 lets the track shrink to its share; overflow-wrap:anywhere lets
   the address itself break, and also feeds the smaller min-content width back
   into the grid, which is why break-word is not enough here.
   Found 3 Oct 2026 by loading the live site on the Galaxy Z Flip 3 over USB and
   looking at the footer. It is invisible at desktop width and the build audit
   does not catch it, so check the footer on a phone after any contact change. */
.foot-grid>*{min-width:0}
.site-foot a,.site-foot p,.plain li{overflow-wrap:anywhere}

.foot-base{border-top:1px solid #232D35}
.foot-base p{max-width:var(--max);margin:0 auto;padding:18px 22px;font-size:.85rem;color:#8C9AA6}

/* ── Floating WhatsApp ───────────────────────────────────────────────────── */
.wa{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;
  gap:10px;background:var(--wa);color:#fff;padding:13px 20px 13px 16px;border-radius:999px;
  font-weight:700;font-size:.95rem;box-shadow:0 10px 26px -8px rgba(37,211,102,.75);
  transition:.18s ease}
.wa:hover{text-decoration:none;transform:translateY(-2px);background:#1eb257}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:960px){
  .proj-body,.two-col,.contact-grid{grid-template-columns:1fr;gap:34px}
  .proj-facts{position:static}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .svc-row{grid-template-columns:1fr;gap:14px}
  /* Stays three across on a phone. Two columns would leave the third stat
     orphaned on a row of its own now that there are three rather than four. */
  .stat-grid{grid-template-columns:repeat(3,1fr)}
  .stat-grid div{padding:20px 4px}
  .stat-grid strong{font-size:1.4rem}
  /* Tuned by rendering it at 390px and looking, not by guessing. At .68rem with
     .04em tracking "MAJOR PROJECTS DELIVERED" broke onto three lines while the
     other two took two, leaving the band visibly ragged along the bottom. */
  .stat-grid span{font-size:.6rem;letter-spacing:.02em;line-height:1.35}
  .logos{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  body{font-size:16px}
  .head-cta{display:none}
  .burger{display:block;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;
    cursor:pointer;position:relative}
  .burger span,.burger span::before,.burger span::after{position:absolute;left:11px;width:20px;
    height:2px;background:var(--ink);content:"";transition:.2s}
  .burger span{top:20px}
  .burger span::before{top:-6px;left:0}
  .burger span::after{top:6px;left:0}
  .site-head ul{position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;
    gap:0;border-bottom:1px solid var(--line);padding:6px 22px 16px;display:none;
    box-shadow:0 18px 26px -18px rgba(15,21,25,.35)}
  #navtoggle:checked ~ ul{display:flex}
  .site-head nav a{display:block;padding:12px 0;border-bottom:1px solid var(--line);font-size:1.02rem}
  .hero{padding:76px 0 68px}
  .sec{padding:56px 22px}
  .band-in{flex-direction:column;align-items:flex-start;padding:42px 22px}
  .wa span{display:none}
  .wa{padding:15px;right:14px;bottom:14px}
  .pager a{max-width:48%;font-size:.92rem}
  .f-two{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ── Footer social row ───────────────────────────────────────────────────────
   Renders only when a profile url exists in SOCIAL in build/build.py, so there
   is never an empty or dead icon on the site. */
.foot-social{display:flex;gap:10px;list-style:none;padding:0;margin:16px 0 0}
.foot-social a{
  display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:rgba(255,255,255,.07);color:#fff;transition:background .15s,transform .12s;
}
.foot-social a:hover{background:var(--brand,#1AA3C4);transform:translateY(-2px)}