:root{
    --accent:#4d7fc4;
    --dark:#0b0d10;
    --nav-h:70px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Helvetica Neue', Arial, sans-serif;
    background:#fff;
    color:#1a1a1a;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  a{color:inherit;}

  /* ============ NAV (reused pattern from the home page) ============ */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:1000;
    height:var(--nav-h);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 5vw;
    background:linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0));
    transition:background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease, height .3s ease;
  }
  .nav.scrolled{
    background:rgba(9,10,13,.66);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    box-shadow:0 1px 0 rgba(255,255,255,.06);
    height:60px;
  }
  .nav.hovered{ background:#fff; box-shadow:0 2px 18px rgba(0,0,0,.16); }
  .nav.hovered .logo-text,
  .nav.hovered .menu > li > a{ color:var(--dark); }
  .nav.hovered .logo-mark path{ fill:var(--dark); }
  .nav.hovered .menu > li > a::after{ background:var(--dark); }
  .nav.hovered .cn-badge{ background:rgba(0,0,0,.08); color:var(--dark); }

  .logo{ display:flex; align-items:center; gap:10px; text-decoration:none; }
  .logo-mark path{ fill:#fff; transition:fill .3s ease; }
  .logo-text{ font-size:18px; font-weight:800; letter-spacing:.04em; color:#fff; transition:color .3s ease; }

  .menu{ list-style:none; display:flex; align-items:center; gap:32px; height:100%; }
  .menu > li{ height:100%; display:flex; align-items:center; }
  .menu > li > a{
    color:#fff; text-decoration:none; font-size:13px; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase; position:relative;
    transition:color .3s ease; white-space:nowrap;
  }
  .menu > li > a::after{
    content:""; position:absolute; left:0; right:100%; bottom:-8px;
    height:2px; background:#fff; transition:right .25s ease, background .3s ease;
  }
  .menu > li:hover > a::after{ right:0; }
  .menu > li.active > a{ color:var(--accent); }

  .right-cluster{ display:flex; align-items:center; gap:18px; }
  .cn-badge{
    width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.16); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
    transition:background .3s ease, color .3s ease;
  }

  /* ============ HERO (parallax) ============ */
  .hero{
    position:relative; height:50vh; min-height:340px; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .hero-bg{
    position:absolute; inset:-10% 0 0 0; height:120%;
    background-size:cover; background-position:center;
    /* background-color:#1a1c20; */
    background-image:
      repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 46px),
      linear-gradient(160deg,#2b2f36,#111318 70%);
    will-change:transform;
  }
  .hero-scrim{ position:absolute; inset:0; background:rgba(0,0,0,.48); }
  .hero-copy{ position:relative; z-index:2; text-align:center; }
  .hero-copy h1{
    font-size:clamp(28px,4.5vw,48px); color:#fff; font-weight:700; letter-spacing:.06em;
    opacity:0; transform:translateY(20px);
    animation:heroIn .7s ease .15s forwards;
  }
  @keyframes heroIn{ to{ opacity:1; transform:translateY(0);} }

  /* ============ SCROLL-REVEAL base ============ */
  .reveal{ opacity:0; transition:opacity .7s ease, transform .7s ease; }
  .reveal.from-left{ transform:translateX(-50px); }
  .reveal.from-right{ transform:translateX(50px); }
  .reveal.from-bottom{ transform:translateY(36px); }
  .reveal.in-view{ opacity:1; transform:translate(0,0); }

 .contact-info{
    max-width:1240px; margin:0 auto;
    padding:90px 5vw 100px;
    display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;
  }
  .contact-info h2{ font-size:clamp(24px,3vw,32px); font-weight:800; margin-bottom:34px; }

  .info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px 24px; margin-bottom:36px; }
  .info-item{
    display:flex; gap:14px;
    opacity:0; transform:translateX(-50px);
    transition:opacity .6s ease, transform .6s ease;
  }
  .info-item.in-view{ opacity:1; transform:translateX(0); }
  .info-item .ii-icon{
    flex:none; width:38px; height:38px; border-radius:50%;
    background:rgba(77,127,196,.1);
    display:flex; align-items:center; justify-content:center;
    transition:background .3s ease, transform .3s ease;
  }
  .info-item:hover .ii-icon{ background:var(--accent, #4d7fc4); transform:translateY(-3px); }
  .info-item .ii-icon svg{ width:17px; height:17px; stroke:var(--accent, #4d7fc4); fill:none; stroke-width:1.7; transition:stroke .3s ease; }
  .info-item:hover .ii-icon svg{ stroke:#fff; }
  .info-item .ii-label{ font-size:12px; color:#8a8a8f; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
  .info-item .ii-value{ font-size:15px; font-weight:600; color:#1a1a1a; }
  .info-item a.ii-value{ text-decoration:none; transition:color .25s ease; }
  .info-item a.ii-value:hover{ color:var(--accent, #4d7fc4); }

  /* skeleton loading rows */
  .info-skel{
    height:38px;
    border-radius:6px;
    background:linear-gradient(100deg, #eee 30%, #f6f6f7 50%, #eee 70%);
    background-size:200% 100%;
    animation:infoSkelShine 1.4s ease-in-out infinite;
  }
  @keyframes infoSkelShine{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

  .contact-error{
    grid-column:1 / -1;
    color:#b23c3c;
    font-size:13.5px;
    padding:10px 0;
  }

  .social-row{ display:flex; gap:12px; }
  .social-row a{
    width:38px; height:38px; border-radius:50%;
    background:rgba(0,0,0,.05);
    display:flex; align-items:center; justify-content:center;
    transition:background .25s ease, transform .25s ease;
  }
  .social-row a:hover{ background:var(--accent, #4d7fc4); transform:translateY(-3px); }
  .social-row a:hover svg{ fill:#fff; }
  .social-row svg{ width:15px; height:15px; fill:#555; transition:fill .25s ease; }

  .map-frame{
    position:relative; height:420px; overflow:hidden;
    background:#eee;
    box-shadow:0 20px 40px rgba(0,0,0,.12);
  }
  .map-frame iframe{ width:100%; height:100%; border:0; filter:grayscale(.15); }

  .reveal{ opacity:0; transition:opacity .7s ease, transform .7s ease; }
  .reveal.from-left{ transform:translateX(-50px); }
  .reveal.from-right{ transform:translateX(50px); }
  .reveal.in-view{ opacity:1; transform:translate(0,0); }

  @media (max-width:900px){
    .contact-info{ grid-template-columns:1fr; }
    .info-grid{ grid-template-columns:1fr; }
  }

  /* ============ FILL IN YOUR REQUIREMENTS ============ */
  .enquiry{ background:#f6f6f7; padding:90px 5vw 100px; }
  .enquiry-head{ text-align:center; margin-bottom:50px; }
  .enquiry-head h2{ font-size:clamp(24px,3vw,32px); font-weight:800; margin-bottom:12px;color }
  .enquiry-head p{ color:#7a7a80; font-size:14.5px; }

  .enquiry-panel{
    max-width:1100px; margin:0 auto;
    display:grid; grid-template-columns:.85fr 1.15fr;
    background:#fff; box-shadow:0 20px 50px rgba(0,0,0,.08);
  }
  .enquiry-media{ position:relative; overflow:hidden; min-height:420px; }
  .enquiry-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
  .enquiry-media:hover img{ transform:scale(1.06); }

  .enquiry-form{ padding:46px 44px; }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
  .field{ position:relative; }
  .field label{
    position:absolute; left:0; top:12px;
    color:#9a9aa0; font-size:14px; pointer-events:none;
    transition:top .2s ease, font-size .2s ease, color .2s ease;
  }
  .field input, .field textarea{
    width:100%; border:none; border-bottom:1.5px solid #e2e2e5;
    padding:10px 0; font-size:14.5px; background:transparent; outline:none;
    transition:border-color .25s ease;
    font-family:inherit;
  }
  .field textarea{ resize:vertical; min-height:70px; }
  .field input:focus, .field textarea:focus{ border-color:var(--accent); }
  .field input:focus ~ label,
  .field input:not(:placeholder-shown) ~ label,
  .field textarea:focus ~ label,
  .field textarea:not(:placeholder-shown) ~ label{
    top:-14px; font-size:11.5px; color:var(--accent);
  }
  .field.full{ grid-column:1 / -1; margin-bottom:26px; }

  .form-actions{ display:flex; gap:14px; }
  .btn-submit, .btn-reset{
    border:none; cursor:pointer; padding:13px 38px; font-size:14px; letter-spacing:.03em;
    transition:transform .2s ease, box-shadow .2s ease, background .25s ease;
  }
  .btn-submit{ background:var(--accent); color:#fff; }
  .btn-submit:hover{ background:#3f6fb0; box-shadow:0 10px 22px rgba(77,127,196,.35); transform:translateY(-2px); }
  .btn-reset{ background:#e7e7ea; color:#444; }
  .btn-reset:hover{ background:#dcdce0; }

  /* ============ FOOTER ============ */
  .site-footer{ background:#0e0f11; padding:44px 5vw 30px; text-align:center; }
  .footer-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:30px; margin-bottom:26px; }
  .footer-nav a{ color:rgba(255,255,255,.65); text-decoration:none; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; transition:color .25s ease; }
  .footer-nav a:hover{ color:#fff; }
  .footer-social{ display:flex; justify-content:center; gap:14px; margin-bottom:30px; }
  .footer-social a{ width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; transition:background .25s ease; }
  .footer-social a:hover{ background:rgba(255,255,255,.16); }
  .footer-social svg{ width:14px; height:14px; fill:rgba(255,255,255,.7); }
  .footer-legal{ border-top:1px solid rgba(255,255,255,.08); padding-top:20px; }
  .footer-legal p{ margin:0; color:rgba(255,255,255,.4); font-size:11.5px; line-height:1.7; }
  .back-to-top{
    margin:20px auto 0; display:flex; width:38px; height:21px; border:1px solid rgba(255,255,255,.25);
    border-radius:30px; background:transparent; align-items:center; justify-content:center; cursor:pointer;
    transition:border-color .25s ease, transform .25s ease;
  }
  .back-to-top:hover{ border-color:rgba(255,255,255,.6); transform:translateY(-2px); }
  .back-to-top svg{ width:12px; height:12px; stroke:rgba(255,255,255,.75); fill:none; stroke-width:2; }

  /* ============ responsive ============ */
  @media (max-width:900px){
    .menu{ display:none; }
    .contact-info{ grid-template-columns:1fr; }
    .info-grid{ grid-template-columns:1fr; }
    .enquiry-panel{ grid-template-columns:1fr; }
    .enquiry-media{ min-height:220px; }
    .field-row{ grid-template-columns:1fr; }
  }