/* Inner pages (Contact and any other page): header, phone menu, footer and the
   Contact Us layout. From contact.html <style>. */
  /* Same colours, fonts and page width as index.html. Layout follows hovenclean.my/contact-us. */
  :root{
    --navy:#0b1f3a; --blue:#0d7ff2; --blue-deep:#0a66c7; --ink:#4a5a70; --text:#3d4b5f;
    --line:#edf1f6; --field:#cfd9e6; --wa:#25d366; --foot:#6b7a8f; --white:#fff;
    --display:Outfit,system-ui,sans-serif; --body:'Nunito Sans',system-ui,sans-serif;
    --gx:max(60px,calc((100% - 1160px) / 2));   /* side gutter, matches the landing page */
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--white);color:var(--text);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
  img{max-width:100%;display:block}
  a{color:var(--blue)}
  h1,h2{font-family:var(--display);margin:0;text-wrap:balance}
  :focus-visible{outline:3px solid var(--blue);outline-offset:3px}
  a[href^="https://wa.me"],.btn{transition:filter .15s,transform .15s}
  a[href^="https://wa.me"]:hover,.btn:hover{filter:brightness(.95);transform:translateY(-1px)}

  /* ---------- header (desktop nav ≥1024px, ☰ menu below) ---------- */
  .site-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--gx);border-bottom:1px solid var(--line)}
  .site-head .logo img{height:46px}
  .d-nav{display:flex;gap:36px;font:600 15px var(--body);color:#33445c}
  .d-nav a{color:inherit;text-decoration:none;transition:color .15s;position:relative}
  .d-nav a:hover{color:var(--blue)}
  .d-nav a[aria-current="page"]{color:var(--blue)}
  .d-nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:var(--blue)}
  .wa-pill{display:flex;align-items:center;gap:8px;background:var(--wa);color:var(--white);text-decoration:none;font:600 15px var(--display);padding:12px 20px;border-radius:999px;white-space:nowrap}
  .wa-pill svg{width:18px;height:18px}
  .m-actions{display:none}
  .wa-round{width:44px;height:44px;border-radius:50%;background:var(--wa);color:var(--white);display:flex;align-items:center;justify-content:center}
  .wa-round svg{width:20px;height:20px}

  /* ---------- 1. blue banner ---------- */
  .hero{position:relative;padding:84px var(--gx) 88px;text-align:center;color:var(--white);
    background:url("../images/clean-nest-all-female-team-arriving-at-modern-kl-c.webp") center/cover no-repeat;display:grid;justify-items:center;gap:14px}
  .hero::before{content:"";position:absolute;inset:0;background:linear-gradient(rgb(10 102 199 / .87),rgb(13 127 242 / .82))}
  .hero>*{position:relative}
  .hero .kicker{font:700 14px/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
  .hero h1{font-size:58px;line-height:1.05;font-weight:700}
  .hero p{margin:0;max-width:48ch;font-size:16.5px;color:rgb(255 255 255 / .93)}

  /* ---------- 2. photo + form ---------- */
  .msg{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:90px var(--gx)}
  .msg-photo{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 25%}
  .kicker-blue{font:700 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-deep)}
  .msg-col{display:grid;gap:14px;min-width:0}
  .msg-col h2,.info h2{font-size:38px;line-height:1.12;font-weight:700;color:var(--navy)}
  .msg-col>p{margin:0;color:var(--ink);font-size:16px;max-width:52ch}
  .form{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
  .field{display:grid;gap:7px;min-width:0}
  .field.full,.form-foot,.form-note{grid-column:1/-1}
  .field label{font:600 12px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
  .field label span{color:#c0392b}
  .field input,.field textarea{font:16px/1.4 var(--body);color:var(--navy);background:var(--white);border:1px solid var(--field);border-radius:3px;padding:11px 12px;width:100%}
  .field textarea{min-height:110px;resize:vertical}
  .field input:focus,.field textarea:focus{outline:2px solid #b9dafc;border-color:var(--blue)}
  .field input:user-invalid,.field textarea:user-invalid{border-color:#c0392b}
  .form-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
  .btn{font:700 14px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;border:0;border-radius:3px;padding:16px 34px;background:var(--blue-deep);color:var(--white);cursor:pointer}
  .form-foot small{font-size:13.5px;color:var(--ink)}
  .form-note{margin:0;padding:14px 16px;border-radius:6px;background:#e8f7ee;color:#0f5530;font-size:15px}
  .form-note[hidden]{display:none}

  /* ---------- 3. opening hours + 4. address ---------- */
  .info{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:10px var(--gx) 96px;align-items:start}
  .info-block{display:grid;gap:24px;min-width:0}
  .hours{list-style:none;margin:0;padding:0;display:grid;gap:10px}
  .hours li{display:flex;align-items:baseline;gap:8px}
  .hours svg{width:15px;height:15px;flex:none;align-self:center;color:var(--navy)}
  .hours b{font-weight:600;color:var(--navy);white-space:nowrap}
  .hours i{flex:1;min-width:16px;border-bottom:1.5px dotted #b9c6d6;transform:translateY(-4px)}
  .hours span{white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums}
  .calls{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
  .calls a{display:flex;align-items:center;justify-content:center;gap:9px;border-radius:3px;padding:16px;font:700 15px var(--display);color:var(--white);text-decoration:none;white-space:nowrap}
  .calls svg{width:18px;height:18px;flex:none}
  .calls .call{background:var(--blue-deep)}
  .calls .wa{background:var(--wa)}
  .company{display:grid;gap:2px;color:var(--ink)}
  .company b{font-size:17px;color:var(--navy)}
  .address{margin:0;color:var(--ink);font-style:normal}
  .map{width:100%;aspect-ratio:16/10;border:1px solid var(--line);display:block}

  /* ---------- footer ---------- */
  .site-foot{border-top:1px solid var(--line);padding:28px var(--gx);display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--foot)}
  .site-foot img{height:38px}
  .sticky-wa{display:none}

  /* ---------- phone & tablet (same switch point as the landing page) ---------- */
  @media (max-width:1023px){
    :root{--gx:20px}
    .site-head{padding-block:14px}
    .site-head .logo img{height:36px}
    .d-nav,.wa-pill{display:none}
    .m-actions{display:flex}
    .hero{padding-block:48px 52px;gap:12px}
    .hero .kicker{font-size:12px}
    .hero h1{font-size:42px}
    .hero p{font-size:15.5px}
    .msg{grid-template-columns:1fr;gap:36px;padding-block:44px}
    .msg-photo{aspect-ratio:4/3.4}
    .msg-col h2,.info h2{font-size:31px}
    .form{gap:16px 12px}
    .info{grid-template-columns:1fr;gap:56px;padding-block:8px 52px}
    .info-address{order:-1}                 /* reference shows the address before the hours on phones */
    .calls{grid-template-columns:1fr;gap:12px}
    .site-foot{flex-direction:column;gap:10px;padding:24px 20px 16px;font-size:12px}
    .site-foot img{height:32px}
    .sticky-wa{display:block;position:sticky;bottom:0;padding:12px 16px calc(20px + env(safe-area-inset-bottom,0px));background:linear-gradient(rgba(255,255,255,0),#fff 35%)}
    .sticky-wa a{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--wa);color:var(--white);text-decoration:none;font:700 17px var(--display);letter-spacing:.04em;padding:17px;border-radius:16px;box-shadow:0 10px 30px rgba(37,211,102,.4)}
    .sticky-wa svg{width:20px;height:20px}
  }
  @media (max-width:360px){ .form{grid-template-columns:1fr} }
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}