/* ============================================================
   AVM Engineering Pte Ltd — stylesheet
   ============================================================ */

:root{
  /* asian.com.sg's own tokens, read from cleniq.css: base #5b9b37, gold
     accent #ffaa17, near-black #121212, grey #878c8f, light ground #edf0f3. */
  --green:#5b9b37;
  --green-hover:#4e852f;
  --green-deep:#3f6d26;
  --green-tint:#eef4e9;
  --amber:#ffaa17;         /* their primary: buttons and accents            */
  --amber-hover:#f09c07;
  --wa:#25d366;
  --ink:#121212;
  --body:#878c8f;
  --line:#e4e6e8;
  --bg:#ffffff;
  --bg-soft:#edf0f3;       /* the grey behind why-choose                    */
  --bg-soft-2:#e4e9ee;
  --footer:#010d18;        /* their footer                                  */
  --banner:#081420;        /* their inner page banner ground                */
  --radius:20px;
  --radius-lg:30px;
  --shadow:0 4px 24px rgba(18,18,18,.06);
  --shadow-lg:0 18px 50px rgba(18,18,18,.14);
  --max:1200px;

  /* The reference's pair: DM Sans for running text, Unbounded for headings
     and figures. Swapping these two lines back to Calibri, Carlito is the
     whole change if AVM's own font is wanted instead. */
  --font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Unbounded','DM Sans',-apple-system,sans-serif;

  /* legacy aliases, now resolving to the reference's palette */
  --navy:#121212;
  --navy-2:#5b9b37;
  --navy-deep:#000000;
  --blue:#5b9b37;
  --blue-hover:#4e852f;
  --blue-dark:#ffaa17;
  --blue-dark-hover:#f09c07;
  --blue-light:#ffaa17;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--font);
  font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{
  /* Every word starts capital, as the reference sets its headings. */
  text-transform:capitalize;
  color:var(--ink);margin:0 0 .5em;letter-spacing:-.01em;
  font-family:var(--font-display);font-weight:500;line-height:1.2;
}
h1{font-size:clamp(2.1rem,4.4vw,3.4rem)}
h2{font-size:clamp(1.9rem,3.6vw,3.125rem);line-height:1.2}
h3{font-size:1.15rem;font-weight:500}
p{margin:0 0 1rem}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 22px}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:1rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);margin-bottom:6px;
}
/* The reference sets a small mark either side of the tagline. */
.eyebrow::before,.eyebrow::after{content:"\2726";color:var(--green);font-size:.8em;line-height:1}
.section-title .eyebrow{justify-content:center}
.hero .eyebrow::before,.hero .eyebrow::after{color:var(--amber)}
.page-head .eyebrow::before,.page-head .eyebrow::after{color:var(--amber)}
.eyebrow.dark{color:var(--green-deep)}
.eyebrow.light{color:var(--green-deep)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:15px;
  padding:20px 44px;border-radius:0;font-weight:700;font-size:1rem;
  letter-spacing:.075em;text-transform:uppercase;
  border:1.5px solid transparent;cursor:pointer;transition:.4s ease;
  font-family:inherit;line-height:1;
}
.btn-sm{padding:14px 28px;font-size:.92rem;letter-spacing:.06em}
.btn .ico{width:18px;height:18px;fill:currentColor;flex:none}
.hero-cta .ico{fill:none}
.btn-cta{background:var(--amber);color:var(--ink)}
.btn-cta:hover{background:var(--green);color:#fff}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.2)}
.btn-outline{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-outline:hover{border-color:var(--blue);color:var(--blue)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:#1eb855;transform:translateY(-2px);box-shadow:0 10px 24px rgba(37,211,102,.32)}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  background:#fff;border-bottom:1px solid var(--line);transition:.22s ease;
}
.site-header.solid{box-shadow:0 1px 14px rgba(0,0,0,.07)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:88px}

.brand{display:flex;align-items:center}
.brand img{height:64px;width:auto;display:block}

.nav{display:flex;align-items:center;gap:26px}
.nav .nav-cta{order:-1;margin-right:8px}
.nav a{color:var(--ink);font-size:17px;letter-spacing:.05em;font-weight:700;transition:.18s}
.nav a:hover{color:var(--green-hover)}
.nav .nav-cta{color:#fff;font-weight:700}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}

/* ---------- nav dropdown ---------- */
.nav a.is-current,.sub-toggle.is-current{color:var(--green-deep);font-weight:700}
.has-sub{position:relative}
.sub-toggle{
  display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;
  font-family:inherit;font-size:17px;letter-spacing:.05em;font-weight:700;color:var(--ink);cursor:pointer;transition:.18s;
}
.sub-toggle:hover{color:var(--green-hover)}
.sub-toggle svg{width:15px;height:15px;transition:transform .2s}
.has-sub.open .sub-toggle svg{transform:rotate(180deg)}
.submenu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:190px;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.12);padding:7px;
  display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:.16s ease;z-index:5;
}
.has-sub:hover .submenu,.has-sub.open .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.submenu a{padding:10px 14px;border-radius:8px;font-size:16px;font-weight:700;white-space:nowrap}
.submenu a:hover{background:var(--bg-soft);color:var(--navy)}

/* ---------- contact reach cards ---------- */
/* Icon plate on a reach card. */
.mini-ico{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;
  font-weight:700;font-size:.8rem;color:#fff;
}
.mini-ico.wa{background:var(--wa)}
.mini-ico.em{background:var(--navy);font-size:1.05rem}
.mini-ico.ph{background:var(--green-deep)}
.reach{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.reach-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;transition:.18s;
}
.reach-card:hover{border-color:var(--green);box-shadow:0 10px 26px rgba(0,0,0,.07);transform:translateY(-3px)}
.reach-card .mini-ico{margin-bottom:10px}
.reach-card strong{font-size:1rem;color:var(--ink)}
.reach-card small{font-size:.9rem;color:var(--navy);font-weight:700}
.reach-card em{font-style:normal;font-size:.8rem;color:var(--body);margin-top:4px}

/* ---------- hero ---------- */
/* The slides are the hero's backdrop rather than a panel beside the copy, so
   the hero owns the stacking context: slides at 0, scrim at 1, copy at 2. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:150px 0 130px;background:var(--ink);border-bottom:0;
  min-height:clamp(540px,72vh,720px);display:flex;align-items:center;
}
/* The hero's parts sit directly in the grid so the image band can break the
   column; the text is capped in width, the band is not. */
.hero-inner{position:relative;z-index:2;display:block}
.hero h1{
  color:#fff;letter-spacing:0;font-weight:500;
  font-size:76px;line-height:92px;margin:0 0 33px;
}
/* The line under the title, carrying the same accent as the eyebrow. */
.hero-kicker{
  color:var(--amber);font-weight:700;font-size:1.05rem;line-height:1.5;
  margin:0 0 16px;max-width:46ch;
}
.hero h1 em{font-style:normal;color:var(--blue-light)}
.lead{color:var(--body);font-size:1.02rem;max-width:50ch;margin-bottom:22px}
.hero-badges{list-style:none;display:flex;flex-wrap:wrap;gap:9px 22px;padding:0;margin:0}
.hero-badges li{color:rgba(255,255,255,.84);font-size:.88rem;display:flex;align-items:center;gap:8px}
.hero-badges li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-dark);flex:none}

/* ---------- sections ---------- */
.section{padding:86px 0}
.section-alt{background:var(--bg-soft)}
.section-dark{background:var(--banner);color:rgba(255,255,255,.78)}
.section-dark h2{color:#fff}
.section-head{max-width:640px;margin:0 auto 44px;text-align:center}
.section-head.left{margin:0 0 34px;text-align:left;max-width:62ch}
.section-head p{font-size:1.03rem}

/* ---------- services: three groups of four ---------- */
.rule-head{
  display:flex;align-items:center;gap:18px;text-align:center;
  font-size:clamp(1.1rem,2.1vw,1.42rem);font-weight:700;color:var(--navy);
  text-transform:uppercase;letter-spacing:.05em;margin:0 0 34px;
}
.rule-head::before,.rule-head::after{content:"";flex:1;height:1px;background:var(--line)}
.group-head{
  text-align:center;font-size:.95rem;font-weight:400;color:var(--body);
  text-transform:uppercase;letter-spacing:.16em;margin:0 0 18px;
}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:30px}
.svc{
  position:relative;background:#fff;border:1px solid rgba(151,155,158,.18);
  border-radius:16px;cursor:pointer;transition:.18s ease;overflow:visible;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  aspect-ratio:1/1;padding:18px 14px;text-align:center;
}
.svc:hover,.svc:focus-visible{
  border-color:transparent;box-shadow:0 12px 30px rgba(0,0,0,.10);
  transform:translateY(-4px);outline:0;
}
/* Media panel: a tinted plate carrying the icon until a photograph is dropped in. */
.svc-media{
  position:relative;display:flex;justify-content:center;
  background:none;border:0;padding:0;margin:0 0 14px;overflow:visible;
}
.svc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc.has-photo .svc-ico{display:none}
.svc-ico{display:grid;place-items:center;color:var(--green);margin:0;transition:color .4s ease}
/* Drawn the way pfspl.com.sg draws its set: thin, square-cornered line work
   in gold, no fills. */
.svc-ico svg{width:38px;height:38px;overflow:visible}
.svc-ico svg [stroke]{stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter}
.svc:hover .svc-media img{transform:scale(1.04)}
.svc-media img{transition:transform .35s ease}
.svc-body{padding:0}
.svc h4{font-size:.95rem;font-weight:500;color:var(--ink);margin:0;line-height:1.35}
/* their tiles carry the name only */
.svc p{display:none}
.svc.active{border-top-color:var(--green)}
.services-note{margin:4px 0 0;font-size:.88rem;color:var(--body);text-align:center}

/* ---------- inner page head ---------- */
/* The page photograph sits under a wash of the same green the hero uses, so
   every banner across the site reads as one colour. */
.page-head::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:var(--banner-img,url("../assets/avm/skyline.jpg")) var(--banner-pos,center)/cover no-repeat;
  opacity:.22;
}
.page-head::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(91,155,55,.86),rgba(91,155,55,.66));
}
.page-head h1{margin-bottom:.3em}
.page-head .lead{margin-bottom:0}


/* ---------- customers ---------- */
.cust-grid{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.cust{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:18px;display:flex;align-items:flex-start;gap:14px;
  text-align:left;transition:.18s ease;
}
.cust:hover{border-color:var(--green);box-shadow:0 8px 22px rgba(0,0,0,.07);transform:translateY(-2px)}
.cust-mono{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(124,191,36,.18);color:var(--green-deep);
  font-weight:700;font-size:.74rem;letter-spacing:.02em;
}
.cust.has-logo .cust-mono{display:none}
.cust-logo{max-width:84px;max-height:46px;width:auto;height:auto;object-fit:contain;flex:none}
.cust-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.cust-name{font-size:.9rem;font-weight:700;color:var(--navy);line-height:1.35}
.cust-addr{font-size:.79rem;color:var(--body);line-height:1.5}

/* ---------- work gallery ---------- */
.gallery-note{text-align:center;font-size:.88rem;color:var(--body);margin:0 0 24px}
.gallery-note code{background:#fff;border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:.85em}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.shot{
  margin:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.shot > span{
  display:grid;place-items:center;aspect-ratio:4/3;
  background:repeating-linear-gradient(45deg,#f3f5f1,#f3f5f1 10px,#e8ece4 10px,#e8ece4 20px);
  color:#9ba09a;font-size:.85rem;font-weight:700;
}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.shot figcaption{padding:11px 14px;font-size:.82rem;color:var(--body)}
.cta-line{text-align:center;margin:28px 0 0;font-size:.92rem;color:var(--body)}
.cta-line a{color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.cta-line a:hover{color:var(--green-hover)}

/* ---------- why ---------- */
.why-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.why-rows{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:22px}
.why-rows li{display:flex;gap:15px;align-items:flex-start}
.why-ico{
  width:40px;height:40px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--green-hover);
}
.why-ico svg{width:21px;height:21px}
.why-rows strong{display:block;color:var(--ink);font-size:.98rem;font-weight:700;margin-bottom:3px}
.why-rows p{margin:0;font-size:.89rem;color:var(--body);line-height:1.6}

.assure{
  background:rgba(124,191,36,.14);border:1px solid rgba(124,191,36,.34);
  border-radius:18px;padding:32px 30px;
}
.assure-badge{
  width:62px;height:62px;border-radius:16px;display:grid;place-items:center;
  background:#fff;color:var(--green-hover);margin-bottom:18px;box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.assure-badge svg{width:32px;height:32px}
.assure h3{font-size:1.4rem;font-weight:700;color:var(--ink);margin:0 0 8px;letter-spacing:-.02em}
.assure p{font-size:.92rem;color:var(--body);margin:0 0 20px}
.assure-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0;padding-top:18px;border-top:1px solid rgba(124,191,36,.38)}
.assure-stats dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--body);margin-bottom:3px}
.assure-stats dd{margin:0;font-size:1rem;font-weight:700;color:var(--navy)}

/* ---------- booking ---------- */
.booking-shell{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:0;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;
}
.cal-panel{padding:30px;background:var(--bg-soft);border-right:1px solid var(--line)}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cal-title{font-weight:700;color:var(--ink);font-size:1.05rem}
.cal-nav{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;
  color:var(--navy);font-size:1.25rem;line-height:1;cursor:pointer;transition:.18s;
}
.cal-nav:hover:not(:disabled){background:var(--blue);color:#fff;border-color:var(--blue)}
.cal-nav:disabled{opacity:.35;cursor:not-allowed}
.cal-dow,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-dow span{
  text-align:center;font-size:.68rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#9aa09b;padding-bottom:7px;
}
.cal-cell{
  aspect-ratio:1/1;display:grid;place-items:center;border-radius:9px;border:1px solid transparent;
  background:#fff;color:var(--ink);font-size:.88rem;font-weight:400;cursor:pointer;
  transition:.15s;font-family:inherit;
}
.cal-cell:hover:not(:disabled){border-color:var(--green);color:var(--green-hover)}
.cal-cell:disabled{background:transparent;color:#c8ccc4;cursor:not-allowed;text-decoration:line-through}
.cal-cell.empty{background:transparent;border:0;cursor:default}
.cal-cell.today{box-shadow:inset 0 0 0 1.5px var(--green)}
.cal-cell.selected{background:var(--green-deep);color:#fff;border-color:var(--green);font-weight:700}
.cal-legend{display:flex;gap:18px;margin-top:16px;font-size:.75rem;color:#8b918c}
.cal-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.lg-sel{background:var(--green)}
.lg-off{background:#e2e6dd}

.slot-block{margin-top:24px;border-top:1px solid var(--line);padding-top:20px}
.slot-label{font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8b918c;margin-bottom:11px}
.slots{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.slot{
  padding:11px 8px;border-radius:9px;border:1px solid var(--line);background:#fff;
  font-size:.83rem;font-weight:400;color:var(--ink);cursor:pointer;transition:.15s;font-family:inherit;
}
.slot:hover{border-color:var(--green);color:var(--green-hover)}
.slot.active{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}

.form-panel{padding:30px}
.field{margin-bottom:15px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:block;font-size:.82rem;font-weight:700;color:var(--ink);margin-bottom:6px}
label span{color:#e5484d}
label small{font-weight:400;color:#9aa09b}
input,select,textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:.92rem;color:var(--ink);background:#fff;transition:.16s;
}
textarea{resize:vertical;min-height:78px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,35,139,.13)}
input.invalid,select.invalid{border-color:#e5484d;background:#fff6f6}
input::placeholder,textarea::placeholder{color:#b3b8b1}

.summary{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:18px 0 14px}
.summary-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8b918c;margin:0 0 4px}
.summary-date{margin:0;font-weight:700;color:var(--ink);font-size:.95rem}
.summary-date.set{color:#4e7a17}
.form-error{
  background:#fff2f2;border:1px solid #ffd0d2;color:#c93438;border-radius:10px;
  padding:11px 14px;font-size:.86rem;margin:0 0 14px;
}
.submit-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.submit-row .btn{width:100%}
.submit-note{font-size:.78rem;color:#9aa09b;margin:12px 0 0;text-align:center}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.contact-lead{color:rgba(255,255,255,.75)}
.contact-list{margin:26px 0 0;display:grid;gap:2px}
.contact-list > div{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.contact-list dt{font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--green)}
.contact-list dd{margin:0;color:#fff;font-size:.94rem}
.contact-list dd a:hover{color:var(--green)}
.map-wrap{border-radius:var(--radius-lg);overflow:hidden;height:355px;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.12)}
.map-wrap iframe{width:100%;height:100%;border:0;filter:grayscale(.2)}

/* ---------- footer ---------- */
.site-footer{background:var(--footer);color:rgba(255,255,255,.62);padding:44px 0 22px;font-size:.9rem}
.footer-inner{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-inner strong{color:#fff;font-size:.98rem;letter-spacing:.01em}
.footer-inner p{margin:6px 0 0;max-width:44ch;font-size:.86rem}
.footer-nav{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
.footer-nav a:hover{color:var(--green)}
.footer-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:18px;font-size:.8rem;color:rgba(255,255,255,.45)}

/* ---------- floating whatsapp ---------- */
.fab-wa{
  position:fixed;right:20px;bottom:20px;z-index:70;width:54px;height:54px;border-radius:50%;
  background:var(--wa);display:grid;place-items:center;box-shadow:0 8px 26px rgba(37,211,102,.42);
  transition:.2s;
}
.fab-wa:hover{transform:scale(1.08)}
.fab-wa svg{width:29px;height:29px;fill:#fff}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .reach{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .cust-grid{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .hero{padding:112px 0 60px}
  .hero-inner{grid-template-columns:1fr;gap:34px}
  .why-grid,.contact-grid{grid-template-columns:1fr;gap:32px}
  .booking-shell{grid-template-columns:1fr}
  .cal-panel{border-right:0;border-bottom:1px solid var(--line)}
  .brand img{height:54px}
  .nav{gap:22px}
}
@media (max-width:720px){
  .nav{
    position:absolute;top:100%;left:14px;right:14px;flex-direction:column;align-items:stretch;
    gap:0;background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;display:none;
  }
  .nav.open{display:flex}
  .nav a{padding:13px 14px;border-radius:9px}
  .has-sub{width:100%}
  .sub-toggle{width:100%;justify-content:space-between;padding:13px 14px}
  .submenu{
    position:static;transform:none;box-shadow:none;border:0;border-radius:0;
    min-width:0;padding:0 0 0 12px;display:none;opacity:1;visibility:visible;
  }
  .has-sub.open .submenu{display:flex}
  .reach{grid-template-columns:1fr}
  .nav a:hover{background:var(--bg-soft)}
  .nav .nav-cta{text-align:center;justify-content:center;margin-top:6px}
  .nav-toggle{display:flex}
  .section{padding:58px 0}
  .field-row,.submit-row,.assure-stats{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:1fr 1fr;gap:12px}
  .svc-body{padding:13px 12px 16px}
  .svc p{font-size:.78rem}
  .svc-ico svg{width:36px;height:36px}
  .rule-head{gap:12px;letter-spacing:.03em}
  .cust-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .page-head{padding:150px 0 70px;min-height:0}
  .assure-stats > div{display:flex;justify-content:space-between;align-items:baseline}
  .assure{padding:26px 22px}
  .cal-panel,.form-panel{padding:22px 18px}
  .footer-inner{flex-direction:column;gap:20px}
  .fab-wa{width:50px;height:50px;right:14px;bottom:14px}
  .brand img{height:46px}
  .header-inner{min-height:70px}
}


/* ---------- how it works (three steps) ----------
   The reference runs its process steps as equal columns with a large outlined
   numeral. Numbers are the structure here, so they are a real ordered list —
   the sequence is the content, not decoration. */
.process-row{
  list-style:none;margin:34px 0 0;padding:0;
  display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.process-step{
  position:relative;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);padding:30px 24px 24px;box-shadow:var(--shadow);
}
.process-n{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--green-deep);color:#fff;
  font-family:var(--font);font-weight:700;font-size:1.05rem;
  margin-bottom:16px;
}
/* The middle step carries the accent, so the eye lands on the commitment —
   "you hear back the same day" — rather than on step one. */
.process-step:nth-child(2) .process-n{background:var(--blue-dark);color:#fff}
.process-step h3{margin-bottom:.35em}
.process-step p{margin:0;font-size:.95rem}

@media (max-width:640px){
  .process-step{padding:24px 20px 20px}
}


/* ---------- hero copy on the green ground ---------- */
.hero .lead{color:rgba(255,255,255,.90)}
.hero .eyebrow{color:rgba(255,255,255,.9)}
/* The ghost button was drawn for a dark photograph; on the green it outlines
   in the same navy the primary button fills with. */
.hero .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.hero .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

@media (max-width:860px){
  .hero{min-height:0;padding:118px 0 64px}
}


/* ============================================================
   asian.com.sg layout
   The reference runs, in order: a contact top bar above the menu, a
   full-bleed background slider, "why choose us" cards, an about block with
   an experience badge, a sliding-text band, a two-column services block,
   a work band, three process steps, the appointment form
   and a four-widget footer. The blocks below are those, carrying AVM's own
   content.
   ============================================================ */

/* ---------- top bar ---------- */
/* Part of the fixed header rather than a separate strip, so the two scroll
   as one; it collapses once the page moves, which is what the reference's
   sticky header does. */
.topbar{
  background:transparent;color:rgba(255,255,255,.88);font-size:.88rem;
  padding-top:12px;max-height:74px;overflow:hidden;
  transition:max-height .22s ease,opacity .22s ease,padding .22s ease;
}
.site-header.solid .topbar{max-height:0;opacity:0;padding-top:0}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--green);border-radius:25px;padding:11px 40px;min-height:0;
}
.topbar-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px;margin:0;padding:0}
.topbar-list li{display:flex;align-items:center;gap:8px;font-weight:700}
.topbar-list svg{width:15px;height:15px;flex:none;color:var(--blue-light)}
.topbar a:hover{color:var(--blue-light)}
.topbar-note{color:rgba(255,255,255,.78);font-weight:700;white-space:nowrap}

.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 28px}
.hero .btn-ghost{backdrop-filter:blur(2px)}

/* ---------- section titles ---------- */
.section-title{max-width:660px;margin:0 auto 46px;text-align:center}
.section-title.left{margin:0 0 34px;text-align:left}
.section-title h2{margin-bottom:.4em}
.section-title p{font-size:1.02rem;margin:0}

/* ---------- why choose us (icon cards) ---------- */
.why-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.why-card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 24px 26px;transition:.2s ease;overflow:hidden;
}
.why-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
.why-card .why-ico{
  width:58px;height:58px;border-radius:16px;background:var(--green-tint);
  border:0;color:var(--green-deep);margin-bottom:18px;
}
.why-card .why-ico svg{width:28px;height:28px}
.why-card h3{font-size:1.02rem;margin-bottom:.45em}
.why-card p{margin:0;font-size:.9rem;line-height:1.6}
/* The oversized numeral the reference floats behind each card. */
.why-card::after{
  content:attr(data-n);position:absolute;right:14px;top:6px;pointer-events:none;
  font-family:var(--font);font-weight:700;font-size:3.4rem;
  color:rgba(91,155,55,.07);line-height:1;
}

/* ---------- about band ---------- */
.about-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:54px;align-items:center}
.about-media{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.about-media img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);aspect-ratio:3/4}
.about-media img:first-child{margin-top:26px}
/* The reference's "7+ years" plate; ours counts from incorporation in 2013. */
.about-badge{
  position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);
  background:var(--blue-dark);color:#fff;border-radius:14px;padding:14px 24px;
  text-align:center;box-shadow:var(--shadow-lg);white-space:nowrap;
}
.about-badge b{
  display:block;font-family:var(--font);font-size:1.5rem;line-height:1;
}
.about-badge span{font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.about-copy h2{margin-bottom:.45em}
.about-list{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:8px}
.about-list li{
  font-size:.8rem;font-weight:700;padding:6px 12px;border-radius:999px;
  background:#fff;border:1px solid rgba(78,122,23,.26);color:var(--green-deep);
}
.about-facts{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:12px}
.about-facts li{display:flex;gap:11px;align-items:flex-start;font-size:.93rem}
.about-facts svg{width:19px;height:19px;flex:none;color:var(--green-deep);margin-top:3px}
.about-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 26px;
  padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.about-stats dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.about-stats dd{
  margin:0;font-family:var(--font);font-weight:700;
  font-size:1.02rem;color:var(--ink);
}

/* ---------- sliding text band ---------- */
.marquee{background:var(--green);color:#fff;overflow:hidden;padding:30px 0}
/* At the top of the page it has to clear the fixed header: the contact bar
   plus the menu row. The contact bar is not there on a phone. It carries the
   same green as the banner beneath it, so the two read as one. */
.marquee-top{margin-top:128px;background:var(--green)}
@media (max-width:860px){
  .marquee-top{margin-top:70px}
}
.marquee-track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee-track > span{
  display:flex;align-items:center;gap:22px;padding-right:22px;white-space:nowrap;
  font-family:var(--font);font-weight:700;font-size:1rem;
  text-transform:uppercase;letter-spacing:.03em;
}
.marquee-track > span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber);flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---------- services: intro column beside the grid ---------- */
.svc-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:46px;align-items:start}
.svc-intro{position:sticky;top:96px}
.svc-intro h2{margin-bottom:.45em}
.svc-intro p{font-size:.96rem}
.svc-intro-media{
  margin:24px 0 0;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:4/3;background:var(--ink);
}
.svc-intro-media img{width:100%;height:100%;object-fit:cover}
.svc-layout .svc-grid{grid-template-columns:repeat(3,1fr);gap:18px}
.svc-layout .group-head{text-align:left;margin-bottom:14px}

/* ---------- trusted by (the reference's work band) ---------- */
.trust-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 24px}
.trust-row span{
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 17px;
  font-size:.85rem;font-weight:700;color:var(--green-deep);
}


/* ---------- inner page banner ----------
   The same flat brand-green panel the home page opens on, so every page shares
   one ground; dark type for the same contrast reason. */
/* The inner banner runs deeper than the copy needs, so the green reads as a
   field rather than a strip behind the words. */
.page-head{
  position:relative;isolation:isolate;overflow:hidden;
  padding:215px 0 150px;background:var(--green);border-bottom:0;
  min-height:clamp(460px,56vh,600px);display:flex;align-items:center;
}
.page-head > .container{width:100%}
.page-head h1{color:#fff}
.page-head .lead{color:rgba(255,255,255,.84)}
.page-head .eyebrow{color:var(--amber)}

/* ---------- four-widget footer ---------- */
.footer-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:34px;
  padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-widget h4{
  color:#fff;font-family:var(--font);font-size:.98rem;
  font-weight:700;margin:0 0 16px;
}
.footer-widget p{font-size:.86rem;margin:0 0 14px}
.footer-widget ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:.87rem}
.footer-widget a:hover{color:var(--blue-light)}
.footer-widget .brand-line{
  color:#fff;font-family:var(--font);font-size:.95rem;
  font-weight:700;display:block;margin-bottom:12px;
}
.footer-contact li{display:flex;gap:11px;align-items:flex-start}
.footer-contact svg{width:16px;height:16px;flex:none;color:var(--blue-light);margin-top:3px}
.footer-hours{font-size:.86rem;margin:0 0 16px}
.footer-hours span{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-hours span b{color:#fff;font-weight:700}

@media (max-width:980px){
  .why-cards{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr;gap:56px}
  .svc-layout{grid-template-columns:1fr;gap:34px}
  .svc-intro{position:static}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:860px){
  .topbar{display:none}
  .page-head{padding:165px 0 80px;min-height:0}
}
@media (max-width:720px){
  .why-cards{grid-template-columns:1fr}
  .about-media img:first-child{margin-top:0}
  .about-stats{grid-template-columns:1fr;gap:16px}
  .about-stats > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  .svc-layout .svc-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr;gap:26px}
  .hero-actions .btn{width:100%}
}

/* The note sits inside the services column now, not under a centred grid. */
.svc-layout .services-note{text-align:left}
/* Intro paragraph under a section heading, on a light ground. */
.lede{font-size:1.02rem;max-width:62ch;margin:0}

/* ---------- sector tiles ----------
   Photographs of the building types AVM works in, each captioned with real
   customers from that sector. */
.sector-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 26px}
.sector{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:var(--green-deep);isolation:isolate;transition:.2s ease;
}
.sector:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.sector img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;display:block;transition:transform .4s ease}
.sector:hover img{transform:scale(1.05)}

.sector-body{
  position:absolute;inset:auto 0 0 0;padding:22px 20px 18px;color:#fff;
  background:linear-gradient(to top,rgba(18,18,18,.92),rgba(18,18,18,.55) 55%,rgba(18,18,18,0));
}
/* The reference reveals a square mark on each portfolio tile. */
.sector::after{
  content:"+";position:absolute;top:16px;right:16px;z-index:2;
  width:50px;height:50px;display:grid;place-items:center;
  background:var(--blue-dark);color:#fff;font-size:1.5rem;line-height:1;
  opacity:0;transform:translateY(-8px);transition:.3s ease;
}
.sector:hover::after{opacity:1;transform:translateY(0)}
.sector-body h3{color:#fff;font-size:1rem;margin:0 0 4px}
.sector-body p{margin:0;font-size:.8rem;color:rgba(255,255,255,.82);line-height:1.45}

@media (max-width:980px){
  .sector-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .sector-grid{grid-template-columns:1fr;gap:12px}
  .sector img{aspect-ratio:16/9}
}

/* ---------- full scope list ----------
   The trades as AVM lists them on their own site: a heading per trade, every
   line under it. Two columns on a wide screen, one on a phone. */
.scope-grid{columns:2;column-gap:44px}
.scope-group{break-inside:avoid;margin:0 0 26px}
.scope-group h3{
  font-size:.95rem;color:var(--green-deep);text-transform:uppercase;
  letter-spacing:.06em;margin:0 0 10px;
}
.scope-group ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.scope-group li{
  position:relative;padding-left:22px;font-size:.93rem;line-height:1.55;
}
.scope-group li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:9px;height:9px;border-radius:2px;background:var(--green);
}
@media (max-width:760px){
  .scope-grid{columns:1}
}

/* ---------- hero slideshow band ----------
   The images are their own band between the kicker and the paragraph, with no
   frame, running the full width of the screen. The hero children sit directly
   in the grid so the band can break the column and bleed past the container's
   gutters on both sides. */
/* The green panel reaches both left corners and curves toward the photo. */
.hero::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:0 auto 0 0;width:40%;
  clip-path:ellipse(100% 135% at 0 0);
  background:var(--green);
}
.hero-cta{justify-self:start}
.hero-star{
  position:absolute;z-index:2;display:block;color:rgba(255,255,255,.62);
  animation:zoomInOut 3s ease-in-out infinite;
  transition:transform .6s ease,color .6s ease;
}
.hero-star svg{width:100%;height:auto;display:block}
/* The reference's own sizes and offsets, in the pixels it uses: 88px at
   200/135, 135px at 566/127, 95px at 245/520, 135px at 335/905, measured from
   the banner's top-left. */
/* The copy runs from roughly a fifth to two thirds down the banner, so the
   stars sit above and below it rather than on it. */
.hero-star-1{width:clamp(56px,5vw,84px);top:6%;left:3vw;animation-duration:3s}
.hero-star-2{width:clamp(44px,4vw,68px);top:12%;left:26vw;animation-duration:6s;animation-delay:-1.4s}
.hero-star-3{width:clamp(70px,6vw,110px);top:74%;left:4vw;animation-duration:4s;animation-delay:-2.6s}
.hero-star-4{width:clamp(38px,3.4vw,58px);top:83%;left:32vw;animation-duration:5s;animation-delay:-3.1s}
/* They drop star-2 below 1320px, where it would foul the copy. */
@media (max-width:1320px){
  .hero-star-2{display:none}
}
@media (max-width:1200px){
  .hero h1{font-size:62px;line-height:74px;margin-bottom:28px}
}
@media (max-width:992px){
  .hero h1{font-size:52px;line-height:64px;margin-bottom:24px}
}
@media (max-width:767px){
  .hero h1{font-size:35px;line-height:45px;margin-bottom:22px}
}
/* Star-4 sits at 905px, which is past the circle's edge once the window is
   narrower than about 1400px — on their site too. Hidden rather than left
   stranded on the photograph. */
@media (max-width:1400px){
  .hero-star-4{display:none}
}
@keyframes zoomInOut{
  0%,100%{transform:scale(.72) rotate(0deg);opacity:.5}
  50%{transform:scale(1.28) rotate(90deg);opacity:1}
}
/* and they wake up when the banner is hovered */
.hero:hover .hero-star{color:rgba(255,255,255,.9);transform:rotate(45deg) scale(1.18)}
.hero:hover .hero-star-2{transform:rotate(-30deg) scale(1.3)}
.hero:hover .hero-star-4{transform:rotate(60deg) scale(1.25)}
@media (prefers-reduced-motion:reduce){
  .hero-star{animation:none}
  .hero:hover .hero-star{transform:none}
}
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr);row-gap:0;position:relative;z-index:1}
.hero-inner > :not(.hero-media){max-width:min(700px,52vw)}
@media (min-width:901px){
  .hero-inner{width:34%;max-width:none;margin-left:0;margin-right:auto;padding-inline:32px;justify-items:center}
  .hero-inner > :not(.hero-media){max-width:100%;margin-left:0}
  .hero h1{font-size:clamp(32px,3.1vw,50px);line-height:1.18;text-align:center}
  .hero-cta{justify-self:center}
}

.hero-media{position:absolute;inset:0;z-index:-2}
.slideshow{position:absolute;inset:0}
.slides{position:absolute;inset:0;overflow:hidden;background:var(--green)}
.slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .8s ease;pointer-events:none}
.slide.is-on{opacity:1;pointer-events:auto}
/* A 3:2 photograph in a 21:9 band loses a third of its height, so the crop is
   anchored to the top of the frame by default — centred, the people working in
   these photographs lose their heads. Slides whose subject sits lower carry
   their own object-position inline. */
.slide img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;display:block}
/* Keep the complete maintenance illustration clear of the green overlay. */
.slide-full-image img{object-fit:cover;object-position:left center!important}
@media (min-width:901px){
  .slide{left:28%}
}

/* Each frame says which service it is showing, on the page's own gutter. */
.slide figcaption{
  position:absolute;right:22px;bottom:26px;left:auto;padding:0;
  background:none;color:#fff;font-weight:700;font-size:.9rem;text-align:right;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.slide figcaption .slide-cta{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;justify-content:flex-end;color:#fff;
}
/* The whole frame is the hit area, not just the caption. */
.slide figcaption .slide-cta::after{content:"";position:absolute;inset:0}
.slide figcaption em{
  font-style:normal;font-weight:700;font-size:.82rem;color:var(--green);
  display:inline-flex;align-items:center;gap:6px;transition:.18s ease;
}
.slide figcaption em::after{content:"\2192";font-size:1em}
.slide-cta:hover em,.slide-cta:focus-visible em{color:#fff;gap:10px}
.slide-cta:focus-visible{outline:2px solid #fff;outline-offset:4px}
.dots{position:absolute;right:22px;bottom:70px;z-index:2;display:flex;gap:8px;justify-content:flex-end;margin:0;padding:0}
.dots button{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.45);transition:.2s;
}
.dots button:hover{background:rgba(255,255,255,.75)}
.dots button.on{background:var(--amber);width:26px;border-radius:5px}
.dots button:focus-visible{outline:2px solid var(--blue-dark);outline-offset:3px}

@media (max-width:900px){
  /* No room for the curve beside the copy: the hero becomes the green panel,
     with the slider as a band under it and the curve along their join. */
  .hero{display:flex;flex-direction:column;align-items:stretch;padding:0;min-height:0;background:var(--green)}
  .hero::before{display:none}
  /* The phone hero is a column, so only the one star in the green stays. */
  .hero-star-2,.hero-star-3,.hero-star-4{display:none}
  .hero-star-1{top:96px;left:auto;right:18px;width:52px}
  .hero-inner{padding-block:104px 56px;position:relative;z-index:1;order:1}
  .hero-inner > :not(.hero-media){max-width:none}
  .hero-media{
    position:relative;inset:auto;z-index:0;order:2;height:280px;
    border-radius:38% 38% 0 0 / 12% 12% 0 0;overflow:hidden;margin-top:-14px;
  }
  .slide figcaption{right:16px;bottom:14px}
  .dots{right:16px;bottom:52px}
}

/* ---------- statement band ----------
   What the banner used to carry: the positioning line and the paragraph, in
   two columns under the hero. */
.statement{padding:86px 0 78px}
.statement-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.statement-lead{
  font-family:var(--font-display);font-size:clamp(1.3rem,2.4vw,1.9rem);
  line-height:1.25;color:var(--ink);font-weight:700;margin:0;
}
.statement p{margin:0 0 20px;max-width:62ch}
.statement .hero-badges{margin:0 0 22px}
.statement .hero-badges li{color:var(--body)}
.statement .hero-badges li::before{background:var(--green)}
@media (max-width:900px){
  .statement{padding:56px 0 52px}
  .statement-inner{grid-template-columns:1fr;gap:24px}
}

/* ---------- about page: the audit graphic, at icon scale ---------- */
.audit-card{
  display:flex;gap:26px;align-items:center;
  border:1px solid var(--line);padding:26px;margin-top:44px;
}
.audit-card img{width:130px;height:130px;object-fit:contain;flex:none}
.audit-card h3{margin:0 0 6px}
.audit-card p{margin:0;max-width:66ch}
@media (max-width:640px){
  .audit-card{flex-direction:column;align-items:flex-start;gap:16px;padding:20px}
}

/* ============================================================
   Hover behaviour, taken from asian.com.sg
   Three effects carry their site: bubbles rising into a button, a dark wash
   wiping across an image with the caption scaling in behind it, and a green
   panel that scales and un-rotates over a card.
   ============================================================ */

/* ---------- buttons: five bubbles rise and swallow the fill ---------- */
.btn{position:relative;overflow:hidden;z-index:1}
.btn .bubble{
  position:absolute;width:20%;height:100%;top:0;
  left:calc((var(--n) - 1) * 20%);
  background:var(--green);border-radius:50%;
  transform:translateY(150%);z-index:-1;
  transition:transform .5s ease;transition-delay:calc((var(--n) - 1) * .08s);
}
.btn:hover .bubble,.btn:focus-visible .bubble{transform:translateY(0) scale(2.2)}
.btn-cta:hover,.btn-cta:focus-visible{background:var(--amber);color:#fff}
.btn-outline:hover .bubble,.btn-wa:hover .bubble{background:var(--ink)}
.btn-wa:hover{background:var(--wa)}
.hero .btn-ghost:hover{background:transparent;color:#fff;border-color:#fff}
@media (prefers-reduced-motion:reduce){
  .btn .bubble{display:none}
}

/* ---------- image tiles: the wash wipes across, the caption scales in ---- */
.sector::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:rgba(18,18,18,.78);opacity:0;visibility:hidden;
  transition:all .4s ease-in-out;
}
.sector:hover::before{opacity:1;visibility:visible}
.sector-body{z-index:2;transition:transform .4s ease,opacity .4s ease}
.sector:hover .sector-body{transform:perspective(400px) scale(1.04);transition-delay:.15s}
.sector::after{z-index:3}

/* ---------- service cards: the plate lifts, the title turns green ------- */
.svc{transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease}
/* The reference flips the whole card: a green panel scales in from
   scaleX(.7) rotateX(20deg), the icon scales down to .9 and turns white, and
   the type follows. */
.svc::after{
  content:"";position:absolute;inset:0;z-index:0;background:var(--green);border-radius:16px;
  transform:scaleX(.7) rotateX(20deg);opacity:0;transition:all .4s linear;
}
.svc:hover::after,.svc:focus-visible::after{transform:scaleX(1) rotateX(0deg);opacity:1}
.svc-media,.svc-body{position:relative;z-index:1}
.svc-ico{transition:color .5s linear .1s,transform .5s linear .1s}
.svc:hover .svc-ico,.svc:focus-visible .svc-ico{color:#fff;transform:scale(.9)}
.svc p{transition:color .5s ease}
.svc:hover p,.svc:focus-visible p{color:rgba(255,255,255,.88)}
.svc:hover h4,.svc:focus-visible h4{color:#fff}
.svc h4{transition:color .4s ease}
.svc:hover h4,.svc:focus-visible h4{color:var(--green)}


/* ---------- why-choose cards: a green panel scales in behind the copy --- */
.why-card{position:relative;z-index:1;transition:transform .4s ease,box-shadow .4s ease}
.why-card::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--green);
  transform:scaleX(.7) rotateX(5deg);opacity:0;
  transition:all .4s linear;
}
.why-card:hover::before{transform:scaleX(1) rotateX(0deg);opacity:1}
.why-card:hover h3,.why-card:hover p{color:#fff;transition:color .3s ease}
.why-card:hover .why-ico{background:rgba(255,255,255,.18);color:#fff}
.why-card .why-ico{transition:background .3s ease,color .3s ease}
.why-card:hover::after{color:rgba(255,255,255,.18)}

/* ---------- customer tiles and links ---------- */
.cust{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.cust:hover .cust-name{color:var(--green)}
.cust-name{transition:color .35s ease}
.nav a,.sub-toggle{position:relative}
.nav a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;
  background:var(--green);transition:right .35s ease;
}
.nav a:not(.nav-cta):hover::after,.nav a.is-current::after{right:0}

/* ---------- cards with no photograph ----------
   The numbered badge hangs over the media plate on a service card; on a card
   without one it landed on the heading, so here it sits in the flow above it. */
.svc-plain{padding:28px 24px 24px}
.svc-plain h4{margin-top:0}

.sector-credits{font-size:.75rem;color:var(--body);margin-top:20px;text-align:center}
.sector-credits summary{cursor:pointer}
.sector-credits p{max-width:900px;margin:10px auto;line-height:1.7}

/* Both company names stay together in the header branding. */
.header-inner > .brand{flex-direction:column;align-items:flex-start;flex-shrink:0;gap:3px}
.brand-company{color:var(--blue-dark);font-size:16px;font-weight:700;line-height:1.25;padding-left:12px;white-space:nowrap}
@media (max-width:767px){
  .brand-company{font-size:13px;padding-left:8px}
}

/* Document previews preserve the full certificate and link to the source PDF. */
#certifications{scroll-margin-top:130px}
.certificate-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.certificate-card{background:#fff;border:1px solid var(--line,#e3e7e1);border-radius:16px;overflow:hidden}
.certificate-card > a{display:block;padding:18px;background:#f5f7f4}
.certificate-card img{display:block;width:100%;height:auto;aspect-ratio:707/1000;object-fit:contain;background:#fff;transition:transform .2s}
.certificate-card > a:hover img{transform:scale(1.02)}
.certificate-copy{padding:20px}
.certificate-copy h3{font-size:1.05rem;line-height:1.35;margin:0 0 8px}
.certificate-copy p{font-size:.9rem;line-height:1.5;margin:0 0 10px}
.certificate-copy > span{display:block;font-size:.82rem;color:var(--body);margin-bottom:16px}
.certificate-copy > a{font-size:.9rem;font-weight:700;color:var(--blue-dark)}
.certificate-scope{font-size:.88rem;margin:20px 0 36px}
.certificate-awards-title{margin-bottom:20px}
.certificate-grid-awards{grid-template-columns:repeat(4,minmax(0,1fr))}
.credential-band{padding:30px 0;background:#f3f7ef;border-block:1px solid #e1e9da}
.credential-band-inner{display:flex;justify-content:space-between;align-items:center;gap:24px}
.credential-band strong{font-size:1.15rem}
.credential-band p{margin:6px 0 0;font-size:.95rem}
.credential-band a{font-weight:700;color:var(--blue-dark);white-space:nowrap}
@media(max-width:1000px){.certificate-grid,.certificate-grid-awards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.certificate-grid,.certificate-grid-awards{grid-template-columns:1fr}.credential-band-inner{flex-direction:column;align-items:flex-start}}

/* ---------- footer certificate strip ---------- */
.footer-badges{display:grid;grid-template-columns:1fr 1fr;gap:34px;padding-top:28px;padding-bottom:6px}
.footer-badges h4{color:#fff;font-family:var(--font);font-size:.98rem;font-weight:700;margin:0 0 16px}
.footer-badges a{display:inline-block;transition:opacity .2s}
.footer-badges a:hover{opacity:.85}
.footer-badges img{display:block;max-width:100%;height:auto}
.footer-certs{padding-top:22px;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-certs h4{color:#fff;font-family:var(--font);font-size:.98rem;font-weight:700;margin:0 0 14px}
.footer-certs ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:12px}
.footer-certs a{display:block;background:#fff;border-radius:6px;padding:4px;transition:transform .2s}
.footer-certs a:hover{transform:translateY(-3px)}
.footer-certs img{display:block;width:56px;height:auto;aspect-ratio:113/160}
@media(max-width:600px){.footer-badges{grid-template-columns:1fr;gap:24px}.footer-certs ul{gap:10px}.footer-certs img{width:48px}}