:root{
      --brand:#1b1b1b;
      --brand-2:#b88a44;          /* warm gold */
      --muted:#6c757d;
      --bg:#faf7f2;               /* warm light background */
      --shadow: 0 10px 25px rgba(0,0,0,.08);
      --radius: 16px;

      /* Spotlight section colors (like your screenshot) */
      --spot-card-bg:#e9dccb;
      --spot-btn-bg:#465246;
      --spot-cta:#caa36a;
      --spot-radius: 22px;
    }

    body{
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--brand);
      background:#fff;
    }

    /* Top strip */
    .top-strip{
      background: #111;
      color: #eaeaea;
      font-size: .92rem;
    }
    .top-strip a{ color:#eaeaea; text-decoration:none; }
    .top-strip a:hover{ text-decoration:underline; }

    /* Navbar */
    .navbar{
      transition: all .25s ease;
      background: rgba(255,255,255,.86);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(0,0,0,.06);
    }
    .navbar.navbar-scrolled{
      background: rgba(255,255,255,.96);
      box-shadow: 0 8px 18px rgba(0,0,0,.08);
    }
    .brand-mark{
      width: 38px; height: 38px;
      border-radius: 50%;
      display: grid; place-items:center;
      border: 2px solid var(--brand-2);
      color: var(--brand);
      font-weight: 800;
      letter-spacing: .5px;
    }
    .nav-item a{ color: var(--brand) !important; text-decoration: none !important; padding-left: 0.5rem; padding-right: 0.5rem;}
    .nav-item a:hover{ color: var(--brand-2) !important; }

    /* Buttons */
    .btn-brand{
      background: var(--brand);
      color: #fff;
      border: 1px solid var(--brand);
      border-radius: 999px;
      padding: .65rem 1.05rem;
    }
    .btn-brand:hover{ background:#000; color:#fff; border-color:#000; }
    .btn-outline-brand{
      border-radius: 999px;
      border: 1px solid rgba(0,0,0,.25);
      padding: .65rem 1.05rem;
    }
    .btn-outline-brand:hover{
      border-color: var(--brand);
      background: rgba(0,0,0,.03);
    }

    /* Hero Banner */
    .page-hero{
    padding: 100px 0 60px;
    background: linear-gradient(120deg, rgba(0,0,0,.6), rgba(0,0,0,.3)),
    url("../images/banner.png");
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    }

    .page-hero h1{
    font-weight: 800;
    }

    /* Hero */
    .hero{
      min-height: 86vh;
      display: grid;
      place-items: center;
      color: #fff;
      position: relative;
      padding: 6rem 0 4rem;
    }
    .hero .pill{
      display: inline-flex;
      gap: .5rem;
      align-items: center;
      padding: .4rem .8rem;
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      font-size: .95rem;
    }
    .hero h1{
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.08;
    }
    .hero .lead{ color: rgba(255,255,255,.88); }
    .hero-card{
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.25);
      border-radius: var(--radius);
      padding: 1.25rem;
      backdrop-filter: blur(8px);
    }


    /* Services Grid */
    .service-card{
    background:#fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow:hidden;
    transition: all .3s ease;
    height:100%;
    }

    .service-card:hover{
    transform: translateY(-6px);
    }

    .service-img{
    height:220px;
    background-size:cover;
    background-position:center;
    }

    .service-content{
    padding:20px;
    }

    .btn-brand{
    background: var(--brand);
    color:#fff;
    border-radius:999px;
    }

    .btn-brand:hover{
    background:#000;
    color:#fff;
    }
    /* Section base */
    section{ padding: 4.5rem 0; }
    .section-bg{ background: var(--bg); }
    .section-title{
      font-weight: 800;
      letter-spacing: -0.01em;
    }
    .section-sub{
      color: var(--muted);
      max-width: 60ch;
    }

    /* Cards */
    .feature-card, .project-card, .blog-card, .stat-card{
      background: #ffffff;
      border: 1px solid rgba(0,0,0,.06);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .feature-card{
      padding: 1.25rem;
      height: 100%;
    }
    .icon-badge{
      width: 44px; height: 44px;
      border-radius: 12px;
      display: grid; place-items:center;
      background: rgba(184,138,68,.14);
      color: var(--brand-2);
      font-size: 1.25rem;
    }

    /* Projects grid */
    .project-img{
      height: 220px;
      border-top-left-radius: var(--radius);
      border-top-right-radius: var(--radius);
      background-size: cover;
      background-position: center;
    }
    .chip{
      display:inline-flex;
      padding:.25rem .6rem;
      border-radius:999px;
      font-size:.85rem;
      border:1px solid rgba(0,0,0,.10);
      color: var(--muted);
      background: #fff;
    }

    /* Process */
    .step{
      display:flex;
      gap:1rem;
      padding:1.1rem;
      border-radius: var(--radius);
      border:1px solid rgba(0,0,0,.06);
      background:#fff;
      box-shadow: 0 8px 18px rgba(0,0,0,.06);
      height: 100%;
    }
    .step .num{
      width: 44px; height: 44px;
      border-radius: 999px;
      display:grid; place-items:center;
      background: var(--brand);
      color:#fff;
      font-weight:800;
      flex: 0 0 auto;
    }

    /* CTA band */
    .cta-band{
      background:
        radial-gradient(900px 300px at 10% 0%, rgba(184,138,68,.28), transparent 55%),
        radial-gradient(900px 300px at 90% 100%, rgba(0,0,0,.12), transparent 55%),
        #111;
      color:#fff;
      border-radius: calc(var(--radius) + 8px);
      padding: 2.2rem;
    }

    /* Footer */
    footer{
      background:#0f0f0f;
      color:#d8d8d8;
    }
    footer a{ color:#d8d8d8; text-decoration:none; }
    footer a:hover{ text-decoration:underline; }
    .footer-line{ border-top: 1px solid rgba(255,255,255,.12); }

    /* Smooth scroll offset for sticky nav */
    [id]{ scroll-margin-top: 92px; }

    /* ===========================
       Spotlight Projects Section
       (like your screenshot)
    ============================ */
    .spotlight-section{
      position: relative;
      min-height: 86vh;
      display: grid;
      place-items: center;
      overflow: hidden;
      padding: 0; /* section already has padding; keep this section immersive */
    }
    .spotlight-bg{
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transform: scale(1);
      filter: brightness(.78) saturate(.95);
      transition:
        filter 1.1s cubic-bezier(.22,.61,.36,1),
        transform 1.1s cubic-bezier(.22,.61,.36,1);
      will-change: filter, transform;
    }
    .spotlight-overlay{
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,.12);
      transition: background 1.1s cubic-bezier(.22,.61,.36,1);
    }
    /* brighter when active */
    .spotlight-section.is-active .spotlight-bg{
      filter: brightness(1.08) saturate(1.12);
      transform: scale(1.05);
    }
    .spotlight-section.is-active .spotlight-overlay{
      background: rgba(0,0,0,.05);
    }

    .spotlight-wrap{
      position: relative;
      z-index: 2;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding-left: clamp(10px, 4vw, 60px);
      padding-right: clamp(10px, 4vw, 60px);
    }
    .spotlight-card{
      width: min(820px, 94vw);
      background: var(--spot-card-bg);
      border-radius: var(--spot-radius);
      padding: 26px;
      box-shadow: 0 18px 45px rgba(0,0,0,.22);
    }
    .spotlight-title{
      font-size: clamp(34px, 4vw, 56px);
      line-height: 1.06;
      font-weight: 750;
      letter-spacing: -0.02em;
      margin: 0;
    }
    .spotlight-sub{
      font-size: 20px;
      font-weight: 650;
      opacity: .82;
      margin-top: 6px;
    }
    .spotlight-icon{
      width: 54px;
      height: 54px;
      border-radius: 999px;
      background: #fff;
      display: grid;
      place-items: center;
      font-size: 18px;
      box-shadow: 0 10px 20px rgba(0,0,0,.12);
      flex: 0 0 auto;
    }
    .spotlight-image{
      margin-top: 18px;
      border-radius: 18px;
      overflow: hidden;
      background: #ddd;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
    }
    .spotlight-image img{
      width: 100%;
      height: 360px;
      object-fit: cover;
      display: block;
    }
    .spotlight-btn{
      margin-top: 18px;
      height: 64px;
      border-radius: 999px;
      background: var(--spot-btn-bg);
      color: #fff;
      text-decoration: none;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      font-size: 20px;
      font-weight: 750;
      letter-spacing: .2px;
      box-shadow: 0 14px 28px rgba(0,0,0,.16);
    }
    .spotlight-btn:hover{ filter: brightness(.95); color:#fff; }

    .enquire-fab{
      position: absolute;
      right: 28px;
      bottom: 28px;
      z-index: 3;
      width: 120px;
      height: 120px;
      border-radius: 999px;
      border: none;
      background: var(--spot-cta);
      color: #fff;
      font-weight: 900;
      line-height: 1.05;
      font-size: 20px;
      box-shadow: 0 18px 35px rgba(0,0,0,.26);
      text-transform: uppercase;
    }
    .enquire-fab:active{ transform: translateY(1px); }

    /* Carousel controls for spotlight */
    .spot-controls{
      position: absolute;
      left: 24px;
      bottom: 24px;
      z-index: 4;
      display: flex;
      gap: 10px;
    }
    .spot-controls .btn{
      border-radius: 999px;
      background: rgba(255,255,255,.88);
      border: 1px solid rgba(0,0,0,.12);
      padding: .55rem .85rem;
    }
    .spot-controls .btn:hover{ background: #fff; }

    @media (max-width: 768px){
      .spotlight-card{ padding: 18px; }
      .spotlight-image img{ height: 260px; }
      .spotlight-btn{ height: 58px; font-size: 18px; }
      .enquire-fab{ width: 96px; height: 96px; font-size: 16px; right: 16px; bottom: 16px; }
      .spotlight-icon{ width: 48px; height: 48px; }
      .spot-controls{ left: 14px; bottom: 14px; }
    }