:root{
      --bg:#0b0b0b;
      --panel:#101010;
      --panel-border:rgba(255,255,255,.10);
      --card:#141414;
      --card-2:#101010;
      --muted:rgba(255,255,255,.74);
      --text:#fff;
      --gold:#d4af37;
      --gold-glow:212,175,55;
      --hero-image: url('assets/home_page.png');
      --hairline:rgba(255,255,255,.08);
    }

    html, body { background:var(--bg); color:var(--text); margin:0; }
    header{ position:relative; z-index:1000; }
    footer{ position:relative; z-index:1; }

    body::before, body::after, main::before, main::after, #app::before, #app::after,
    .page::before, .page::after, .excellence-section::before, .excellence-section::after,
    .process-section::before, .process-section::after, .cta-section::before, .cta-section::after {
      content:none !important; background:none !important; box-shadow:none !important;
    }

    /* ---------------- HERO ---------------- */
     .hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    text-align: center;
    margin-top: 70px;
    background: url('../assets/home_page.png') center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
  }
  
  /* Hero section: image starts immediately after header */
  @media (max-width: 768px) {
    .hero {
      margin-top: 70px !important; /* Start immediately after header */
      height: calc(100vw * 0.75) !important; /* Same image dimensions */
      min-height: calc(100vw * 0.75) !important;
      max-height: calc(100vh - 70px) !important;
      background-position: center top !important; /* Image starts from top of hero section */
      background-size: contain !important; /* Smaller image size, full image visible */
      background-attachment: scroll !important; /* Scroll with content, not fixed */
      background-color: #0b0b0b;
      padding: 0 !important;
      overflow: visible !important;
      position: relative !important;
    }
    .hero-content { 
      padding: 0 15px; 
      transform: none;
      max-width: 90%;
      margin: 0 auto;
      padding-top: 8px !important; /* Minimal top padding */
      padding-bottom: 3px !important;
    }
    .hero-title { 
      font-size: 1.2rem !important; /* Further reduced */
      line-height: 1.2;
      margin-bottom: 6px !important; /* Reduced margin */
    }
    .hero-subtitle { 
      font-size: 0.7rem !important; /* Further reduced */
      line-height: 1.3;
      margin-bottom: 10px !important; /* Reduced margin */
    }
    .hero-buttons {
      flex-direction: column;
      gap: 6px !important; /* Further reduced gap */
      width: 100%;
      max-width: 200px !important; /* Further reduced */
      margin: 0 auto;
    }
    .hero-buttons .btn {
      width: 100%;
      padding: 8px 14px !important; /* Further reduced padding */
      font-size: 0.7rem !important; /* Further reduced */
    }
  }

  @media (max-width: 480px) {
    .hero {
      margin-top: 70px !important; /* Start immediately after header */
      height: calc(100vw * 0.75) !important; /* Same image dimensions */
      min-height: calc(100vw * 0.75) !important;
      max-height: calc(100vh - 70px) !important;
      background-size: contain !important; /* Smaller image size, full image visible */
      background-position: center top !important; /* Image starts from top of hero section */
      background-attachment: scroll !important; /* Scroll with content, not fixed */
      background-color: #0b0b0b;
      padding: 0 !important;
      overflow: visible !important;
      position: relative !important;
    }
    .hero-content {
      padding-top: 6px !important;
      padding-bottom: 2px !important;
    }
    .hero-title { 
      font-size: 1rem !important; /* Further reduced */
      margin-bottom: 5px !important;
    }
    .hero-subtitle {
      font-size: 0.65rem !important; /* Further reduced */
      margin-bottom: 8px !important;
    }
    .hero-buttons {
      max-width: 180px !important; /* Further reduced */
      gap: 5px !important; /* Further reduced */
    }
    .hero-buttons .btn {
      padding: 7px 12px !important; /* Further reduced */
      font-size: 0.65rem !important; /* Further reduced */
    }
  }

    .hero::before{
      content:""; position:absolute; left:0; right:0; bottom:0; height:200px; pointer-events:none;
      background:linear-gradient(to bottom,
                   rgba(11,11,11,0) 0%,
                   rgba(11,11,11,.55) 60%,
                   rgba(11,11,11,1) 100%);
      filter:blur(.6px);
    }

    .hero-content{ position:relative; z-index:1; text-align:center; max-width:960px; padding:0 16px; }

    /* THIN, ELEGANT GOLD SEAM UNDER HERO */
    .hero-transition{
      position:relative;
      height:28px;
      margin-top:-28px;
      margin-bottom:-8px;
      pointer-events:none;
    }
    .hero-transition::before{
      content:"";
      position:absolute; left:4%; right:4%; top:50%; transform:translateY(-50%);
      height:2px; border-radius:2px;
      background:linear-gradient(90deg,
                   rgba(var(--gold-glow),0) 0%,
                   rgba(var(--gold-glow),.95) 50%,
                   rgba(var(--gold-glow),0) 100%);
      box-shadow:0 0 14px rgba(var(--gold-glow),.38);
    }
    .hero-transition::after{
      content:"";
      position:absolute; left:6%; right:6%; top:50%; transform:translateY(-50%);
      height:1px; border-radius:1px; opacity:.55;
      background:linear-gradient(90deg,
                   rgba(var(--gold-glow),0) 0%,
                   rgba(var(--gold-glow),.55) 50%,
                   rgba(var(--gold-glow),0) 100%);
      filter:blur(.4px);
    }

    /* generic container */
    .container{ max-width:1280px; margin:0 auto; padding:0 20px; }

    /* ================= EXCELLENCE ================= */
    .excellence-section{ padding:148px 0 40px; background:var(--bg); position:relative; }

    .excellence-title-wrap{
      max-width:1280px;
      margin:0 auto 18px;
      padding:0 20px;
      text-align:center;
    }
    .excellence-title{
      margin:0;
      font-weight:800;
      letter-spacing:.01em;
      line-height:1.1;
      font-size:clamp(22px,3.8vw,36px);
      color:#f5f5f5;
      text-rendering:optimizeLegibility;
    }
    .excellence-title::after{
      content:"";
      display:block;
      width:140px;
      height:1.5px;
      margin:12px auto 0;
      border-radius:2px;
      background:linear-gradient(90deg,
        rgba(var(--gold-glow),0) 0%,
        rgba(var(--gold-glow),1) 50%,
        rgba(var(--gold-glow),0) 100%);
      box-shadow:0 0 10px rgba(var(--gold-glow),.35);
      opacity:.9;
    }

    .excellence-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap:36px; align-items:stretch; }
    @media (max-width:1000px){ .excellence-grid{ grid-template-columns:1fr; } }

    .image-frame{ position:relative; border-radius:18px; overflow:hidden;
      box-shadow:0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset; background:#0d0d0d; min-height:720px; }
    .image-frame img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.02) contrast(1.02); }
    .gold-border{ pointer-events:none; position:absolute; inset:14px; border-radius:14px; border:2px solid var(--gold);
      box-shadow: 0 0 26px rgba(var(--gold-glow),.35), inset 0 0 18px rgba(var(--gold-glow),.25); }

    /* ---------- CLEANED "ABOUT" CARD ---------- */
    .about-info-panel{
      position:relative;
      background:linear-gradient(180deg, #111, #0f0f0f);
      border:1px solid var(--hairline);
      border-radius:22px;
      padding:30px 28px;
      box-shadow:
        0 10px 24px rgba(0,0,0,.40),
        0 0 0 1px rgba(255,255,255,.03) inset;
    }

    /* eyebrow */
    .about-eyebrow{
      display:block;
      letter-spacing:.18em;
      font-size:.82rem;
      color:rgba(255,255,255,.68);
      text-transform:uppercase;
      margin-bottom:8px;
    }

    /* single accent rule via ::after (no extra DOM) */
    .about-title{
      position:relative;
      margin:0 0 18px;
      font-size:clamp(28px,4.2vw,44px);
      line-height:1.06;
      font-weight:900;
      letter-spacing:.2px;
    }
    .about-title::after{
      content:"";
      display:block;
      width:112px;
      height:4px;
      border-radius:2px;
      margin-top:14px;
      background:linear-gradient(90deg, rgba(var(--gold-glow),0), rgba(var(--gold-glow),1), rgba(var(--gold-glow),0));
      box-shadow:0 0 14px rgba(var(--gold-glow),.35);
    }

    /* features list */
    .features{ display:flex; flex-direction:column; gap:0; margin-top:6px; }

    .feature-row{
      display:grid; grid-template-columns:56px 1fr;
      column-gap:16px; align-items:start;
      padding:18px 0;
      position:relative;
    }

    /* single, ultra-thin separators - no double lines */
    .feature-row + .feature-row{
      border-top:0; /* ensure we don't stack borders */
    }
    .feature-row + .feature-row::before{
      content:"";
      position:absolute; left:72px; right:0; top:0; height:1px;
      background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.12), rgba(255,255,255,.0));
    }

    .feature-icon{
      width:48px; height:48px; border-radius:999px; display:grid; place-items:center;
      color:#111;
      background: radial-gradient(120px 120px at 50% -30%, rgba(var(--gold-glow),.9), rgba(var(--gold-glow),.75));
      box-shadow:
        0 6px 16px rgba(0,0,0,.35),
        inset 0 0 0 1px rgba(255,255,255,.12);
      font-size:20px;
    }

    .feature-text h3{ margin:0 0 8px; font-size:1.15rem; }
    .feature-text p{ margin:0; color:var(--muted); line-height:1.7; }

    /* --------------- PORTFOLIO PREVIEW --------------- */
    .portfolio{ padding:60px 0 0; background:var(--bg); }
    .p-head{ text-align:center; margin:0 auto 18px; max-width:1400px; padding:0 20px; }
    .p-eyebrow{ display:inline-block; letter-spacing:.18em; text-transform:uppercase; font-size:.78rem; color:rgba(255,255,255,.7);
      border:1px solid rgba(255,255,255,.14); padding:6px 10px; border-radius:999px; background: rgba(255,255,255,.05); }
    .p-title{ margin:10px 0 6px; font-size:clamp(28px,4.6vw,44px); line-height:1.05; font-weight:800; }
    .p-sub{ margin:0 auto; color:var(--muted); max-width:900px; }

    .p-shell{ position:relative; overflow:visible; }
    .p-stage{
      position:relative; width:100%; border-radius:22px; overflow:hidden;
      box-shadow:0 22px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset; background:#0d0d0d;
    }
    .p-slide{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease; pointer-events:none; }
    .p-slide.active{ opacity:1; pointer-events:auto; }
    .p-media{ position:absolute; inset:0; }
    .p-media img{ width:100%; height:100%; object-fit:cover; display:block; }
    .p-stage::before{ content:""; display:block; padding-top:46%; }

    .p-info{
      position:absolute; left:24px; right:24px; bottom:24px; max-width:min(820px, 56%);
      background:linear-gradient( to right, rgba(10,10,10,.66), rgba(10,10,10,.46) );
      -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
      border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:16px 18px 14px 18px;
      box-shadow:0 14px 32px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.04) inset;
    }
    .p-info::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:5px; border-radius:999px;
      background:linear-gradient(180deg, rgba(var(--gold-glow),0), rgba(var(--gold-glow),.9), rgba(var(--gold-glow),0)); box-shadow:0 0 14px rgba(var(--gold-glow),.35); }
    .p-kind{ color:#fff; margin:0 0 6px 12px; font-size:clamp(20px,2.4vw,32px); font-weight:900; letter-spacing:.2px; }
    .p-desc{ color:rgba(255,255,255,.9); margin:0 0 10px 12px; font-size:clamp(14px,1.5vw,17px); line-height:1.55; max-width:92%; }
    .p-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-left:12px; }
    .p-tag{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; font-size:.82rem; color:#f6f6f6;
      border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); }
    .tag-ppf{ background:rgba(0,190,170,.18); border-color:rgba(0,190,170,.45); }
    .tag-ceramic{ background:rgba(212,175,55,.18); border-color:rgba(212,175,55,.45); }
    .tag-correction{ background:rgba(255,160,65,.18); border-color:rgba(255,160,65,.45); }
    .tag-tint{ background:rgba(160,120,255,.18); border-color:rgba(160,120,255,.45); }

    .p-fs-btn{
      position:absolute; top:14px; right:14px; z-index:5;
      width:42px; height:42px; border-radius:999px; display:grid; place-items:center;
      color:#fff; background:rgba(16,16,16,.92); border:1px solid rgba(var(--gold-glow),.45);
      box-shadow:0 0 0 1px rgba(var(--gold-glow),.18) inset, 0 8px 20px rgba(0,0,0,.45), 0 0 18px rgba(var(--gold-glow),.22);
      cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
    }
    .p-fs-btn:hover{ transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 0 0 1px rgba(var(--gold-glow),.38) inset, 0 12px 24px rgba(0,0,0,.55), 0 0 28px rgba(var(--gold-glow),.35); }

    .p-media:fullscreen{ background:#000; }
    .p-media:fullscreen img{ object-fit:contain; background:#000; }

    .p-arrow{
      position:absolute; top: calc(50% + 8px); transform:translateY(-50%);
      width:64px; height:64px; border-radius:999px; z-index:4; display:grid; place-items:center;
      color:#fff; background:rgba(16,16,16,.92);
      border:1px solid rgba(var(--gold-glow),.45);
      box-shadow:0 0 0 1px rgba(var(--gold-glow),.18) inset, 0 8px 20px rgba(0,0,0,.45), 0 0 28px rgba(var(--gold-glow),.22);
      cursor:pointer; transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
    }
    #p-prev{ left:-120px; } #p-next{ right:-120px; }
    .p-arrow:hover{ transform:translateY(-50%) translateY(-2px); filter:brightness(1.05); box-shadow:0 0 0 1px rgba(var(--gold-glow),.38) inset, 0 12px 24px rgba(0,0,0,.55), 0 0 36px rgba(var(--gold-glow),.35); }

    .p-dots{ position:absolute; left:0; right:0; bottom:12px; display:flex; gap:10px; justify-content:center; z-index:4; }
    .p-dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.32); cursor:pointer; transition:transform .15s ease, background .2s ease, box-shadow .2s ease; }
    .p-dot.active{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 12px rgba(var(--gold-glow),.6); transform:scale(1.15); }

    /* ============ PORTFOLIO MODAL FOR MOBILE ============ */
    .portfolio-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.95);
      z-index: 10000;
      overflow-y: auto;
    }
    
    .portfolio-modal.active {
      display: block;
    }
    
    .modal-content {
      position: relative;
      background: var(--bg);
      margin: 20px auto;
      max-width: 95%;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
      border: 1px solid rgba(var(--gold-glow), 0.3);
    }
    
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      background: var(--panel);
      border-bottom: 1px solid rgba(var(--gold-glow), 0.2);
    }
    
    .modal-title {
      margin: 0;
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--text);
    }
    
    .close-modal {
      background: none;
      border: none;
      color: var(--text);
      font-size: 1.5rem;
      cursor: pointer;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease;
    }
    
    .close-modal:hover {
      background: rgba(255, 255, 255, 0.1);
    }
    
    .modal-image {
      width: 100%;
      height: auto;
      display: block;
    }
    
    .modal-body {
      padding: 20px;
    }
    
    .modal-desc {
      color: var(--muted);
      margin: 0 0 16px 0;
      line-height: 1.6;
      font-size: 1rem;
    }
    
    .modal-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .modal-nav {
      display: flex;
      justify-content: space-between;
      padding: 16px 20px;
      background: var(--panel);
      border-top: 1px solid rgba(var(--gold-glow), 0.2);
    }
    
    .modal-nav-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      background: rgba(var(--gold-glow), 0.1);
      border: 1px solid rgba(var(--gold-glow), 0.3);
      border-radius: 8px;
      color: var(--text);
      cursor: pointer;
      transition: all 0.2s ease;
      font-weight: 600;
    }
    
    .modal-nav-btn:hover {
      background: rgba(var(--gold-glow), 0.2);
      transform: translateY(-2px);
    }
    
    .modal-nav-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    /* Mobile-specific portfolio styles - HIDE INFO CARD, SHOW ONLY BUTTON */
    @media (max-width:920px){
      .p-info{ 
        display: none !important; /* Completely hide the info card on mobile */
      }
      
      /* View Details Button - Bottom Center */
      .p-view-details {
        display: block;
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        padding: 12px 24px;
        background: rgba(var(--gold-glow), 0.9);
        border: 1px solid rgba(var(--gold-glow), 0.6);
        border-radius: 25px;
        color: #000;
        font-size: 0.9rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 6;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
      }
      
      .p-view-details:hover {
        background: rgba(var(--gold-glow), 1);
        transform: translateX(-50%) translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
      }

      .p-arrow{ width:52px; height:52px; }
      #p-prev{ left:-24px; } #p-next{ right:-24px; }
      .p-fs-btn{ top:10px; right:10px; width:38px; height:38px; }
    }

    @media (max-width: 768px) {
      .p-arrow {
        width: 44px !important;
        height: 44px !important;
        z-index: 10 !important;
      }
      
      #p-prev, #p-next {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
      }
      
      #p-prev {
        left: 15px !important;
        right: auto !important;
      }
      
      #p-next {
        right: 15px !important;
        left: auto !important;
      }
      
      .p-view-details {
        bottom: 15px;
        padding: 10px 20px;
        font-size: 0.85rem;
      }
    }

    @media (max-width: 480px) {
      .p-arrow {
        width: 36px !important;
        height: 36px !important;
      }
      
      #p-prev {
        left: 8px !important;
      }
      
      #p-next {
        right: 8px !important;
      }
      
      .p-fs-btn {
        width: 32px !important;
        height: 32px !important;
        top: 8px !important;
        right: 8px !important;
      }
      
      .p-view-details {
        bottom: 12px;
        padding: 8px 16px;
        font-size: 0.8rem;
      }
    }

    /* --------------- OUR APPROACH --------------- */
    .process-section{ padding:140px 0 140px; background:var(--bg); }
    .process-header{ text-align:center; margin:0 0 40px; }
    .process-title{ margin:0; font-size:clamp(36px,6vw,64px); line-height:1.02; letter-spacing:.2px; }
    .process-title .accent{ color:var(--gold); }
    .process-underline{ width:110px; height:4px; border-radius:2px; background:var(--gold); margin:18px auto 0; }
    .process-steps{ display:grid; gap:clamp(20px,2.6vw,30px); grid-template-columns: repeat(4, minmax(240px, 1fr)); align-items:stretch; }
    @media (max-width:1200px){ .process-steps{ grid-template-columns: repeat(2, minmax(260px, 1fr)); } }
    @media (max-width:640px){ .process-steps{ grid-template-columns: 1fr; } }
    .process-item{ background: linear-gradient(180deg, var(--card), var(--card-2)); border:1px solid rgba(255,255,255,.065); border-radius:22px; padding:24px; min-height: 280px; box-shadow:0 2px 16px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03) inset; position:relative; transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease; }
    .process-item::before{ content:""; position:absolute; left:16px; right:16px; top:14px; height:3px; border-radius:2px; background:linear-gradient(90deg, rgba(var(--gold-glow),0), rgba(var(--gold-glow),.85), rgba(var(--gold-glow),0)); }
    .process-item:hover{ transform: translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(var(--gold-glow),.28) inset, 0 0 28px rgba(var(--gold-glow),.20); border-color: rgba(var(--gold-glow),.28); }
    .step-number{ font-weight:800; font-size:28px; color: rgba(255,255,255,.55); margin-bottom:8px; }
    .step-content h3{ margin:0 0 10px; font-size:1.15rem; }
    .step-content p{ margin:0; color:var(--muted); line-height:1.65; }

    /* --------------- TESTIMONIALS --------------- */
    .testimonials{ margin:40px 0 140px; padding:60px 0 10px; background:var(--bg); }
    .testimonials .container{ max-width:1280px; margin:0 auto; padding:0 20px; }
    .t-head{ text-align:center; margin-bottom:28px; }
    .t-eyebrow{ display:inline-block; letter-spacing:.18em; text-transform:uppercase; font-size:.78rem; color:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.12); padding:6px 10px; border-radius:999px; background: rgba(255,255,255,.04); }
    .t-title{ margin:12px 0 6px; font-size:clamp(30px,4.6vw,56px); line-height:1.04; letter-spacing:.2px; font-weight:800; }
    .t-sub{ margin:0 auto; color:var(--muted); font-size:clamp(14px,1.8vw,20px); max-width:780px; }
    .t-shell{ position:relative; margin-top:34px; }
    .t-viewport{ position:relative; overflow:visible; border-radius:18px; }
    .t-track{ display:grid; grid-template-columns: repeat(3, 1fr); gap:28px; transition: transform .45s ease, opacity .25s ease; }
    .t-card{ background: linear-gradient(180deg, #111, #0f0f0f); border:1px solid rgba(255,255,255,.08); border-radius:24px; padding:34px 30px 28px; min-height: 420px; box-shadow: 0 12px 30px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.03) inset; position:relative; }
    .t-card::before{ content:""; position:absolute; left:18px; right:18px; top:14px; height:3px; border-radius:2px; background:linear-gradient(90deg, rgba(var(--gold-glow),0), rgba(var(--gold-glow),.9), rgba(var(--gold-glow),0)); opacity:.8; }
    .t-quote{ font-size:46px; line-height:0; color:rgba(255,255,255,.25); margin-bottom:8px; }
    .t-text{ color:rgba(255,255,255,.92); line-height:1.75; margin:8px 0 18px; font-size:clamp(15px,1.9vw,18px); }
    .t-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
    .t-badge{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; font-size:.82rem; border:1px solid rgba(255,255,255,.08); color:#f6f6f6; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }
    .badge-ceramic{ background:rgba(212,175,55,.18); border-color:rgba(212,175,55,.45); }
    .badge-ppf{ background:rgba(0,190,170,.18); border-color:rgba(0,190,170,.45); }
    .badge-tint{ background:rgba(160,120,255,.18); border-color:rgba(160,120,255,.45); }
    .badge-detail{ background:rgba(70,150,255,.18); border-color:rgba(70,150,255,.45); }
    .badge-correction{ background:rgba(255,160,65,.18); border-color:rgba(255,160,65,.45); }
    .badge-aftercare{ background:rgba(80,200,120,.18); border-color:rgba(80,200,120,.45); }
    .t-stars{ color:var(--gold); letter-spacing:2px; font-size:1.05rem; }
    .t-author{ color:#fff; font-weight:900; margin-left:10px; }
    .t-meta{ display:flex; align-items:center; gap:12px; color:var(--muted); margin-top:12px; font-size:.92rem; }
    .t-date{ opacity:.8; }
    .t-arrow{ position:absolute; top: calc(50% + 8px); transform:translateY(-50%); width:64px; height:64px; border-radius:999px; display:grid; place-items:center; border:1px solid rgba(var(--gold-glow),.45); background:rgba(16,16,16,.92); color:#fff; box-shadow:0 0 0 1px rgba(var(--gold-glow),.18) inset, 0 8px 20px rgba(0,0,0,.45), 0 0 28px rgba(var(--gold-glow),.22); cursor:pointer; transition: transform .15s ease, box-shadow .2s ease, filter .2s ease; z-index:5; }
    .t-arrow:hover{ transform:translateY(-50%) translateY(-2px); filter:brightness(1.05); box-shadow:0 0 0 1px rgba(var(--gold-glow),.38) inset, 0 12px 24px rgba(0,0,0,.55), 0 0 36px rgba(var(--gold-glow),.35); }
    #t-prev{ left:-120px; } #t-next{ right:-120px; }
    .t-dots{ display:flex; gap:10px; justify-content:center; margin-top:26px; }
    .t-dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.32); cursor:pointer; transition:transform .15s ease, background .2s ease, box-shadow .2s ease; }
    .t-dot.active{ background: var(--gold); border-color: var(--gold); box-shadow: 0 0 12px rgba(var(--gold-glow),.6); transform: scale(1.15); }
    
    /* Testimonials mobile fixes */
    @media (max-width:1400px){ 
      #t-prev{ left:-80px; } 
      #t-next{ right:-80px; } 
    }
    
    @media (max-width:1100px){
      .t-track{ grid-template-columns: 1fr; }
      .t-card{ min-height: 380px; }
      .t-arrow{ width:52px; height:52px; top: calc(50% + 6px); }
      #t-prev{ left:-24px; } #t-next{ right:-24px; }
    }
    
    @media (max-width: 768px) {
      .t-arrow {
        width: 44px !important;
        height: 44px !important;
        top: 50% !important;
      }
      
      #t-prev, #t-next {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
      }
      
      #t-prev {
        left: 10px !important;
        right: auto !important;
      }
      
      #t-next {
        right: 10px !important;
        left: auto !important;
      }
      
      .t-track {
        padding: 0 50px !important;
      }
      
      .t-card {
        padding: 24px 20px 20px !important;
        min-height: auto !important;
      }
      
      .t-text {
        font-size: 15px !important;
        line-height: 1.6 !important;
      }
      
      .t-badges {
        gap: 8px !important;
        margin-bottom: 12px !important;
      }
      
      .t-badge {
        font-size: 0.75rem !important;
        padding: 5px 10px !important;
      }
      
      .t-meta {
        flex-wrap: wrap !important;
        gap: 8px !important;
      }
    }
    
    @media (max-width: 480px) {
      .t-arrow {
        width: 36px !important;
        height: 36px !important;
      }
      
      #t-prev {
        left: 5px !important;
      }
      
      #t-next {
        right: 5px !important;
      }
      
      .t-track {
        padding: 0 40px !important;
      }
      
      .t-dots {
        margin-top: 20px !important;
      }
    }

    /* --------------- CTA --------------- */
    .cta-section{ margin-top:200px; padding:120px 0 360px !important; background:var(--bg); }
    @media (max-width:640px){ .cta-section{ margin-top:160px; padding-bottom:240px !important; } }
    .cta-card{
      background:#101010; border:1px solid rgba(var(--gold-glow),.45); border-radius:26px;
      padding:clamp(32px,4.5vw,48px); text-align:center; max-width:1100px; margin:0 auto;
      box-shadow: 0 0 0 1px rgba(var(--gold-glow),.22) inset, 0 8px 30px rgba(0,0,0,.45), 0 0 36px rgba(var(--gold-glow),.24), 0 0 120px rgba(var(--gold-glow),.22);
    }
    .cta-card .section-title{ margin:0 0 14px; position:relative; font-weight:800; letter-spacing:.2px; font-size:clamp(28px,4.2vw,48px); }
    .cta-card .section-title::after{ content:""; display:block; width:110px; height:4px; border-radius:2px; background:linear-gradient(90deg, rgba(var(--gold-glow),.0), rgba(var(--gold-glow),1), rgba(var(--gold-glow),.0)); margin:18px auto 0; box-shadow: 0 0 18px rgba(var(--gold-glow),.35); }
    .section-subtitle{ margin:16px auto 26px; color:var(--muted); max-width:820px; }
    .cta-buttons{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:22px; }
    .btn-pill{ display:inline-flex; align-items:center; justify-content:center; height:56px; padding:0 26px; border-radius:999px; text-decoration:none; font-weight:800; line-height:1; white-space:nowrap; transition: transform .15s ease, box-shadow .2s ease, filter .2s ease; }
    .btn-large{ background:var(--gold); color:#111; border:1px solid var(--gold); box-shadow: 0 6px 22px rgba(var(--gold-glow),.35); }
    .btn-large:hover{ transform: translateY(-2px); filter: brightness(1.05); }
    .btn-outline{ background:transparent; color:#fff; border:1px solid var(--gold); box-shadow: 0 6px 22px rgba(var(--gold-glow),.18) inset; }
    .btn-outline:hover{ transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(var(--gold-glow),.45) inset, 0 6px 22px rgba(var(--gold-glow),.28); }
    .btn-outline i{ margin-right:10px; }

    /* Accessibility niceties */
    button:focus-visible, a:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
    @media (prefers-reduced-motion: reduce){
      *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
    }

    /* layout */
.excellence-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap:36px; align-items:stretch; }
@media (max-width:1000px){ .excellence-grid{ grid-template-columns:1fr; } }

/* image frame */
.image-frame{ position:relative; border-radius:18px; overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset; background:#0d0d0d; min-height:520px; }
.image-frame img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.02) contrast(1.02); }
.gold-border{ pointer-events:none; position:absolute; inset:14px; border-radius:14px; border:2px solid var(--gold);
  box-shadow: 0 0 26px rgba(var(--gold-glow),.35), inset 0 0 18px rgba(var(--gold-glow),.25); }

/* card */
.about-info-panel{
  position:relative; background:linear-gradient(180deg, #111, #0f0f0f);
  border:1px solid var(--hairline); border-radius:22px; padding:28px; 
  box-shadow:0 10px 24px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.about-eyebrow{ display:block; letter-spacing:.18em; font-size:.78rem; color:rgba(255,255,255,.68); text-transform:uppercase; margin-bottom:8px; }
.about-title{ margin:0 0 10px; font-size:clamp(26px,3.8vw,38px); line-height:1.08; font-weight:700; letter-spacing:.1px; }
.about-title::after{
  content:""; display:block; width:112px; height:3.5px; border-radius:2px; margin-top:12px;
  background:linear-gradient(90deg, rgba(var(--gold-glow),0), rgba(var(--gold-glow),1), rgba(var(--gold-glow),0));
  box-shadow:0 0 14px rgba(var(--gold-glow),.35);
}
.about-sub{ margin:12px 0 8px; color:rgba(255,255,255,.86); font-size:1rem; line-height:1.6; }

/* meta grid */
.about-meta{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin:14px 0 8px; }
@media (max-width:560px){ .about-meta{ grid-template-columns:1fr; } }
.meta{ display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); }
.meta i{ width:28px; height:28px; border-radius:999px; display:grid; place-items:center;
  background:rgba(var(--gold-glow),.14); color:var(--gold); }
.meta h4{ margin:0 0 4px; font-size:.98rem; font-weight:700; }
.meta p{ margin:0; font-size:.92rem; color:var(--muted); line-height:1.5; }

/* features list */
.features{ display:flex; flex-direction:column; gap:0; margin-top:10px; }
.feature-row{ display:grid; grid-template-columns:56px 1fr; column-gap:16px; align-items:start; padding:18px 0; position:relative; }
.feature-row + .feature-row::before{
  content:""; position:absolute; left:72px; right:0; top:0; height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.12), rgba(255,255,255,0));
}
.feature-icon{
  width:48px; height:48px; border-radius:999px; display:grid; place-items:center; color:#111;
  background: radial-gradient(120px 120px at 50% -30%, rgba(var(--gold-glow),.9), rgba(var(--gold-glow),.75));
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.12);
  font-size:20px;
}
.feature-text h3{ margin:0 0 8px; font-size:1.08rem; font-weight:700; }
.feature-text p{ margin:0; color:var(--muted); line-height:1.7; }

/* capability badges */
.about-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.about-badge{
  display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; font-size:.82rem; color:#f6f6f6;
  border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06);
}



/* Make the photo column fill the grid row height */
.excellence-image,
.excellence-image .image-frame { 
  height: 100%;
}

/* Set the minimum you want; it will grow beyond this to match the card */
.excellence-image .image-frame{
  min-height: 900px;  /* tweak to taste */
  border-radius:18px;
  overflow:hidden;
  background:#0d0d0d;
  box-shadow:0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
}

.excellence-image .image-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.02) contrast(1.02);
}

/* Keep it reasonable on small screens */
@media (max-width:1000px){
  .excellence-image,
  .excellence-image .image-frame { height:auto; }
  .excellence-image .image-frame { min-height:520px; }
}

/* Mobile image fixes for index page */
@media (max-width: 768px) {
  /* Excellence section images */
  .excellence-image .image-frame {
    min-height: 400px;
    height: auto;
  }
  
  .excellence-image .image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  /* Portfolio images */
  .p-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  /* Modal images */
  .modal-image {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    object-position: center;
  }
}

/* =============== OUR APPROACH - CLEAN & DETAILED =============== */
.process-section.process--clean{ padding:120px 0 120px; background:var(--bg); }

/* make this section a bit wider without changing other sections */
.process-section.process--clean .container{ max-width:1400px; }

.process-header{ text-align:center; margin:0 0 26px; }
.process-title{ margin:0; font-size:clamp(36px,6vw,64px); line-height:1.02; letter-spacing:.2px; font-weight:800; }
.process-sub{ margin:10px auto 14px; color:var(--muted); max-width:780px; }
.process-underline{ width:110px; height:4px; border-radius:2px; background:var(--gold); margin:18px auto 0; }

/* meta badges under header */
.process-meta{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin:14px auto 8px; max-width:980px;
}
.p-meta{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:999px; font-size:.85rem;
  color:#f6f6f6; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.p-meta i{ color:var(--gold); }

/* cards grid (more breathing room per card) */
.process-steps{
  display:grid; gap:clamp(20px,2.6vw,28px);
  grid-template-columns: repeat(4, minmax(280px, 1fr));
  align-items:stretch;
}
@media (max-width:1460px){ .process-steps{ grid-template-columns: repeat(3, minmax(280px, 1fr)); } }
@media (max-width:1000px){ .process-steps{ grid-template-columns:repeat(2,minmax(260px,1fr)); } }
@media (max-width:640px){ .process-steps{ grid-template-columns:1fr; } }

/* card shell */
.process-card{
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:22px 22px 16px;
  min-height:auto;
  box-shadow:0 10px 26px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.03) inset;
  position:relative; transition:transform .18s ease, box-shadow .22s ease, border-color .2s ease;
  overflow:hidden; /* keep glows/pills inside rounded corners */
}
.process-card::before{
  /* thin gold accent bar across the top */
  content:""; position:absolute; left:18px; right:18px; top:12px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, rgba(var(--gold-glow),0), rgba(var(--gold-glow),.85), rgba(var(--gold-glow),0));
  opacity:.8;
}
.process-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(var(--gold-glow),.18) inset;
  border-color:rgba(var(--gold-glow),.20);
}

/* card header - prevent title from getting crushed */
.card-top{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto; /* number | title | badge */
  align-items:center;
  column-gap:12px;
  margin:8px 0 6px;
}
.card-num{
  font-weight:800; font-size:24px; color:rgba(255,255,255,.65); min-width:40px; white-space:nowrap;
}
.card-title{
  margin:0; font-size:1.15rem; font-weight:800; letter-spacing:.2px;
  min-width:0;               /* allow shrink */
  white-space:normal;
  overflow-wrap:break-word;  /* wrap naturally if needed */
  word-break:normal;
}

/* smaller, cleaner time badge */
.card-badge{
  margin-left:auto; display:inline-flex; align-items:center; gap:8px;
  padding:5px 9px; border-radius:999px; font-size:.78rem; line-height:1; color:#111;
  background:var(--gold); border:1px solid var(--gold);
  box-shadow:0 3px 12px rgba(var(--gold-glow),.18);
  white-space:nowrap; max-width:100%;
}
.card-badge i{ color:#111; }

/* list */
.card-list{ margin:8px 0 12px 0; padding-left:0; list-style:none; }
.card-list li{
  position:relative; padding-left:22px; margin:8px 0; color:var(--muted); line-height:1.65;
}
.card-list li::before{
  content:""; position:absolute; left:0; top:.74em; width:10px; height:10px; border-radius:999px;
  background:var(--gold); box-shadow:0 0 8px rgba(var(--gold-glow),.28);
}

/* tags - compact so they never push layout */
.card-tags{ display:flex; flex-wrap:wrap; gap:6px; row-gap:6px; margin:6px 0 2px; }
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:5px 9px;
  border-radius:999px; font-size:.78rem; line-height:1; color:#f6f6f6;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  white-space:nowrap; flex:0 0 auto;
}
.pill i{ color:#fff; opacity:.95; font-size:.9em; }

/* ---- colored tag variants (clean, subtle) ---- */
.pill--estimate   { background:rgba(80,150,255,.14);  border-color:rgba(80,150,255,.38);  }
.pill--map        { background:rgba(160,120,255,.16); border-color:rgba(160,120,255,.42); }
.pill--booking    { background:rgba(120,200,120,.16); border-color:rgba(120,200,120,.42); }

.pill--decon      { background:rgba(0,180,170,.16);  border-color:rgba(0,180,170,.42); }
.pill--adhesion   { background:rgba(255,180,80,.16); border-color:rgba(255,180,80,.42); }

.pill--installed  { background:rgba(212,175,55,.18); border-color:rgba(212,175,55,.45); }
.pill--photo      { background:rgba(120,160,255,.16); border-color:rgba(120,160,255,.40); }

.pill--aftercare  { background:rgba(212,175,55,.18); border-color:rgba(212,175,55,.45); }
.pill--starter    { background:rgba(255,160,65,.18); border-color:rgba(255,160,65,.45); }
.pill--warranty   { background:rgba(80,200,120,.18); border-color:rgba(80,200,120,.45); }

/* accessibility / small screens */
@media (max-width:1100px){
  .process-card{ padding:20px; }
}

/* ================= RESPONSIVE FIXES ================= */

/* 1. Recent Builds & Finishes Section Fixes - ARROW OVERLAP FIX */
@media (max-width: 920px) {
  .p-arrow {
    width: 44px !important;
    height: 44px !important;
    z-index: 10 !important;
  }
  
  #p-prev, #p-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  
  #p-prev {
    left: 15px !important;
    right: auto !important;
  }
  
  #p-next {
    right: 15px !important;
    left: auto !important;
  }
}

@media (max-width: 768px) {
  .p-arrow {
    width: 40px !important;
    height: 40px !important;
  }
  
  #p-prev {
    left: 12px !important;
  }
  
  #p-next {
    right: 12px !important;
  }
}

@media (max-width: 480px) {
  .p-arrow {
    width: 36px !important;
    height: 36px !important;
  }
  
  #p-prev {
    left: 8px !important;
  }
  
  #p-next {
    right: 8px !important;
  }
  
  .p-fs-btn {
    width: 32px !important;
    height: 32px !important;
    top: 8px !important;
    right: 8px !important;
  }
}

/* 2. Our Approach Section Centering Fix */
.process-section.process--clean .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (max-width: 1460px) {
  .process-steps {
    grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
    justify-content: center !important;
  }
}

@media (max-width: 1000px) {
  .process-steps {
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
    justify-content: center !important;
    gap: 20px !important;
  }
  
  .process-card {
    margin: 0 auto !important;
    max-width: 400px !important;
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  .process-steps {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }
  
  .process-card {
    max-width: 500px !important;
    margin: 0 auto !important;
  }
  
  .process-section.process--clean .container {
    padding: 0 16px;
  }
}

@media (max-width: 640px) {
  .process-card {
    max-width: 100% !important;
    padding: 20px 18px !important;
  }
  
  .card-top {
    grid-template-columns: auto 1fr !important;
    row-gap: 8px !important;
  }
  
  .card-badge {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    margin-left: 0 !important;
  }
}

/* 3. Testimonials & CTA Section Responsive Fixes */
@media (max-width: 1100px) {
  .t-track {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }
  
  .t-card {
    max-width: 600px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  
  .t-arrow {
    width: 48px !important;
    height: 48px !important;
  }
  
  #t-prev {
    left: 10px !important;
  }
  
  #t-next {
    right: 10px !important;
  }
}

@media (max-width: 768px) {
  .t-card {
    padding: 24px 20px 20px !important;
    min-height: auto !important;
  }
  
  .t-text {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
  
  .t-badges {
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  
  .t-badge {
    font-size: 0.75rem !important;
    padding: 5px 10px !important;
  }
  
  .t-meta {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  /* CTA Section Fixes */
  .cta-section {
    margin-top: 120px !important;
    padding: 80px 0 240px !important;
  }
  
  .cta-card {
    margin: 0 16px !important;
    padding: 32px 24px !important;
  }
  
  .cta-card .section-title {
    font-size: clamp(24px, 5vw, 32px) !important;
  }
  
  .section-subtitle {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  
  .cta-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  
  .btn-pill {
    width: 100% !important;
    max-width: 280px !important;
    height: 50px !important;
  }
}

@media (max-width: 480px) {
  .t-arrow {
    width: 40px !important;
    height: 40px !important;
    top: 50% !important;
  }
  
  #t-prev {
    left: 5px !important;
  }
  
  #t-next {
    right: 5px !important;
  }
  
  .t-dots {
    margin-top: 20px !important;
  }
  
  .cta-section {
    padding: 60px 0 180px !important;
  }
  
  .cta-card {
    padding: 24px 20px !important;
    margin: 0 12px !important;
  }
}

/* Additional iPad specific fixes */
@media (min-width: 769px) and (max-width: 1024px) {
  .process-steps {
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
    justify-content: center !important;
    gap: 24px !important;
  }
  
  .process-card {
    margin: 0 auto !important;
    max-width: 340px !important;
  }
  
  .t-card {
    max-width: 700px !important;
  }
  
  .cta-card {
    margin: 0 40px !important;
  }
}

/* Ensure all containers are properly centered */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Fix for any overflow issues on mobile */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    width: 100%;
  }
  
  .container {
    padding: 0 16px;
  }
}

/* Menu Bar Fix for Mobile */
/* This will help with the menu not opening on smaller screens */
@media (max-width: 768px) {
  /* Ensure the menu container is properly styled */
  #menu-container {
    position: relative;
    z-index: 1000;
  }
  
  /* If using a hamburger menu, make sure it's visible and clickable */
  .menu-toggle, .hamburger, .nav-toggle {
    display: block !important;
    z-index: 1001;
    position: relative;
  }
  
  /* Ensure navigation links are properly hidden/shown */
  .nav-menu, .menu-items {
    transition: all 0.3s ease;
  }
  
  /* If menu is supposed to be off-canvas */
  .nav-menu.active, .menu-items.active {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Fallback menu styles in case the external menu fails to load */
.fallback-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}

.fallback-nav-menu {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.fallback-nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.5rem;
  cursor: pointer;
}

@media (max-width: 768px) {
  .fallback-nav-toggle {
    display: block;
  }
  
  .fallback-nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    flex-direction: column;
    padding: 1rem;
    border-top: 1px solid var(--hairline);
  }
  
  .fallback-nav-menu.active {
    display: flex;
  }
}