@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');


:root{
        --gold:#d4b06a;
        --gold2:#f1d28a;
        --gold-gradient: linear-gradient(135deg, #BF953F 0%, #FCF6BA 50%, #B38728 100%);
        /* Dark */
        --bg:#0a0a0c;
        --bg2:#101015;
        --panel:rgba(255,255,255,.06);
        --panel2:rgba(255,255,255,.03);
        --text:#efeff6;
        --muted:#b8b8c6;
        --border:rgba(255,255,255,.10);
        --shadow: 0 24px 70px rgba(0,0,0,.45);
        --gold-text: #D4AF37;
      }
  
      body.light{
        /* Light luxury */
        --bg:#f6f2ec;
        --bg2:#ffffff;
        --panel:rgba(0,0,0,.04);
        --panel2:rgba(0,0,0,.02);
        --text:#151517;
        --muted:#5b5b66;
        --border:rgba(0,0,0,.10);
        --shadow: 0 24px 70px rgba(0,0,0,.18);
      }
  
      /* ==========================
        BASE
      =========================== */
      *{box-sizing:border-box}
      html,body{height:100%}
      body{
        margin:0;
        font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        /* background:
          radial-gradient(900px 520px at 10% -10%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 60%),
          radial-gradient(900px 520px at 90% 0%, color-mix(in srgb, var(--gold2) 12%, transparent), transparent 62%),
          linear-gradient(180deg, var(--bg), var(--bg2)); */
        color:var(--text);
        transition: background .35s ease, color .35s ease;
        overflow-x:hidden;
      }
      a{color:inherit;text-decoration:none}
      img{max-width:100%;display:block}
      .container{width:min(1180px, calc(100% - 40px)); margin-inline:auto;}
      .section{padding: 92px 0;}
      .kicker{
        color: color-mix(in srgb, var(--gold) 88%, var(--text));
        font-weight: 800;
        letter-spacing: .22em;
        text-transform: uppercase;
        font-size: 12px;
        opacity:.95;
      }
      .h2{
        font-family:"Playfair Display",serif;
        font-size: clamp(34px, 3.7vw, 54px);
        line-height:1.08;
        margin: 12px 0 14px;
        letter-spacing:.3px;
      }
      .lead{
        color: var(--muted);
        max-width: 64ch;
        line-height: 1.75;
        font-size: 16px;
        margin:0;
      }
      .btn{
        display:inline-flex; align-items:center; justify-content:center; gap:10px;
        padding: 13px 18px;
        border-radius: 16px;
        border: 1px solid color-mix(in srgb, var(--gold) 58%, transparent);
        background: linear-gradient(180deg,
          color-mix(in srgb, var(--gold) 28%, transparent),
          color-mix(in srgb, var(--gold) 14%, transparent)
        );
        color: #fff;
        font-weight: 700;
        cursor:pointer;
        transition: transform .18s ease, border-color .18s ease, filter .18s ease;
        user-select:none;
        box-shadow: 0 20px 44px rgba(0,0,0,.22);
      }
      body.light .btn{ color: #151517; }
      .btn:hover{
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--gold2) 70%, transparent);
        filter: saturate(1.1);
      }
      .btn.secondary{
        background: linear-gradient(180deg, var(--panel), var(--panel2));
        border:1px solid var(--border);
        color: var(--text);
        box-shadow:none;
      }
      .btn.secondary:hover{
        border-color: color-mix(in srgb, var(--gold) 35%, var(--border));
      }
  
      /* ==========================
        NAV
      =========================== */
      .nav{
        position: sticky;
        top:0;
        z-index: 60;
        backdrop-filter: blur(14px);
        /* background: color-mix(in srgb, var(--bg) 82%, transparent); */
        border-bottom: 1px solid var(--border);
      }
      .nav-row{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap: 14px;
        padding: 14px 0;
      }
      .brand{
        display:flex; align-items:center; gap:12px;
        /* min-width: 240px; */
      }
      .logo{
        width:42px;height:42px;border-radius:16px;
        border:1px solid color-mix(in srgb, var(--gold) 55%, transparent);
        background:
          radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gold2) 92%, white), color-mix(in srgb, var(--gold) 26%, transparent) 44%, color-mix(in srgb, var(--gold) 12%, transparent) 65%),
          linear-gradient(180deg, var(--panel), var(--panel2));
        box-shadow: var(--shadow);
        position:relative;
        overflow:hidden;
      }
      .logo:after{
        content:"";
        position:absolute; inset:-40%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
        transform: rotate(25deg) translateX(-40%);
        animation: shine 7s ease-in-out infinite;
        opacity:.6;
      }
      @keyframes shine{
        0%,45%{ transform: rotate(25deg) translateX(-60%); }
        80%,100%{ transform: rotate(25deg) translateX(60%); }
      }
      .brand .title{
        font-family:"Playfair Display",serif;
        font-size: 18px;
        font-weight: 800;
        letter-spacing:.4px;
        margin:0;
        line-height:1.1;
      }
      .brand small{
        display:block;
        font-weight: 600;
        color: var(--muted);
        margin-top: 3px;
        font-size: 12px;
      }
      .links{
        display:flex; gap:22px; align-items:center;
        font-size: 14px;
        font-weight: 700;
        color: color-mix(in srgb, var(--text) 88%, transparent);
      }
      .links a{
        opacity:1;
        padding: 10px 6px;
        position:relative;
        color: #fff;
        transition: opacity .18s ease;
        font-size: 16px;
      }
      .links a:hover{opacity:1; color: color-mix(in srgb, var(--gold2) 55%, var(--text));}
      .links a:after{
        content:"";
        position:absolute;
        left:6px; right:6px; bottom:6px;
        height:2px;
        border-radius:2px;
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 78%, transparent), transparent);
        transform: scaleX(0);
        transition: transform .2s ease;
      }
      .links a:hover:after{ transform: scaleX(1); }
  
      .nav-cta{ display:flex; align-items:center; gap:10px; }
      .burger{
        display:none;
        width:44px;height:44px;border-radius:16px;
        border:1px solid var(--border);
        background: linear-gradient(180deg, var(--panel), var(--panel2));
        cursor:pointer;
        align-items:center; justify-content:center;
      }
      .burger span{ width:18px;height:2px;background:var(--text); border-radius:2px; position:relative; opacity:.9;}
      .burger span:before,.burger span:after{
        content:""; position:absolute; left:0; width:18px;height:2px;background:var(--text); border-radius:2px;
      }
      .burger span:before{ top:-6px; }
      .burger span:after{ top:6px; }
  
      .mobile{
        display:none;
        padding: 10px 0 14px;
        border-top: 1px solid var(--border);
      }
      .mobile a{
        display:block;
        padding: 12px 10px;
        border-radius: 16px;
        border:1px solid transparent;
        font-weight: 800;
        opacity:.92;
      }
      .mobile a:hover{
        border-color: color-mix(in srgb, var(--gold) 30%, var(--border));
        background: color-mix(in srgb, var(--gold) 10%, transparent);
        opacity:1;
      }
  
      /* ==========================
        THEME TOGGLE
      =========================== */
      .toggle{
        width:56px; height:30px; border-radius:999px;
        border:1px solid var(--border);
        background: linear-gradient(180deg, var(--panel), var(--panel2));
        position:relative;
        cursor:pointer;
        overflow:hidden;
      }
      .toggle:before{
        content:"";
        position:absolute; inset:-30%;
        background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--gold2) 35%, transparent), transparent 55%);
        opacity:.7;
      }
      .knob{
        width:24px;height:24px;border-radius:50%;
        position:absolute; top:2px; left:2px;
        background: linear-gradient(180deg, var(--gold2), var(--gold));
        box-shadow: 0 10px 28px rgba(0,0,0,.22);
        transition: left .25s ease;
      }
      body.light .knob{ left:30px; }
  
      /* ==========================
        CURSOR GLOW (creative)
      =========================== */
      .glow{
        position:fixed;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        pointer-events:none;
        left: -9999px; top:-9999px;
        background: radial-gradient(circle at center,
          color-mix(in srgb, var(--gold2) 18%, transparent) 0%,
          transparent 55%);
        filter: blur(6px);
        opacity:.9;
        mix-blend-mode: screen;
        z-index: 5;
        transition: opacity .25s ease;
      }
      body.light .glow{
        mix-blend-mode: multiply;
        opacity:.55;
      }
      .trail{
        position:fixed;
        width: 18px;height:18px;border-radius:50%;
        pointer-events:none;
        background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--gold2) 70%, transparent), transparent 70%);
        filter: blur(1px);
        opacity:.9;
        z-index: 6;
        transform: translate(-50%,-50%);
      }
  
      /* ==========================
        HERO (video + creative)
      =========================== */
      .hero{
        position:relative;
        min-height: 92vh;
        display:flex;
        align-items:center;
        overflow:hidden;
        /* border-bottom: 1px solid var(--border); */
      }
      .hero-media{
        position:absolute; inset:0;
        z-index:0;
        overflow:hidden;
        background:
          linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.78)),
          url("../images/cover.jpg");
        background-size:cover;
        background-position:center;
      }
      body.light .hero-media{
        background:
          linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.86)),
          url("../images/cover.jpg");
        background-size:cover;
        background-position:center;
      }
      .hero video{
        position:absolute; inset:0;
        width:100%; height:100%;
        object-fit:cover;
        opacity: .30;
        filter: saturate(1.05) contrast(1.05);
      }
      body.light .hero video{ opacity:.18; filter: saturate(1.02) contrast(1.02); }
  
      .hero:before{
        content:"";
        position:absolute; inset:-2px;
        background:
          radial-gradient(900px 520px at 20% 10%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 60%),
          radial-gradient(900px 520px at 90% 20%, color-mix(in srgb, var(--gold2) 16%, transparent), transparent 65%);
        z-index:1;
        pointer-events:none;
        opacity:.9;
      }
      .hero-inner{
        position:relative;
        z-index:2;
        padding: 64px 0 42px;
      }
      .pill{
        display:inline-flex; align-items:center; gap:10px;
        padding: 10px 14px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: linear-gradient(180deg, var(--panel), var(--panel2));
        color: var(--muted);
        font-weight: 800;
        letter-spacing:.02em;
        font-size: 13px;
        box-shadow: 0 18px 46px rgba(0,0,0,.22);
        backdrop-filter: blur(10px);
      }
      .dot{
        width:9px;height:9px;border-radius:50%;
        background: radial-gradient(circle at 30% 30%, var(--gold2), var(--gold));
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 14%, transparent);
      }
      .hero-grid{
        display:grid;
        grid-template-columns: 1.15fr .85fr;
        gap: 22px;
        align-items:stretch;
        margin-top: 18px;
      }
      .hero h1{
        font-family:"Playfair Display",serif;
        font-size: clamp(50px, 6.2vw, 92px);
        line-height: 1.02;
        margin: 16px 0 14px;
        letter-spacing:.4px;
        text-shadow: 0 26px 80px rgba(0,0,0,.35);
      }
      .hero h1 .gold{
        background: linear-gradient(180deg, var(--gold2), var(--gold));
        -webkit-background-clip: text;
        background-clip:text;
        color:transparent;
      }
      .hero p{
        margin: 0 0 18px;
        color: var(--muted);
        font-size: 17px;
        line-height: 1.8;
        /* max-width: 58ch; */
      }
      .hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 10px; }
  
      .hero-card{
        border-radius: 26px;
        border:1px solid var(--border);
        background: linear-gradient(180deg, var(--panel), var(--panel2));
        box-shadow: var(--shadow);
        overflow:hidden;
        position:relative;
        padding: 16px;
        backdrop-filter: blur(14px);
      }
      .hero-card:after{
        content:"";
        position:absolute; inset:-1px;
        background: linear-gradient(135deg,
          transparent,
          color-mix(in srgb, var(--gold) 18%, transparent),
          transparent);
        opacity:.55;
        pointer-events:none;
      }
      .mini{
        border-radius: 20px;
        border:1px solid var(--border);
        background: color-mix(in srgb, var(--bg) 20%, transparent);
        padding: 14px;
        position:relative;
      }
      .mini h3{
        margin:0 0 6px;
        font-size: 13px;
        letter-spacing:.2px;
        font-weight: 900;
        color: color-mix(in srgb, var(--text) 92%, transparent);
      }
      .mini p{
        margin:0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.55;
      }
      .mini-grid{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 12px;
      }
      .quote{
        margin-top: 14px;
        font-family:"Playfair Display",serif;
        font-weight: 800;
        font-size: 22px;
        line-height: 1.2;
        letter-spacing:.2px;
      }
      .quote span{ color: var(--gold2); }
      .hero-card-footer{
        display:flex; align-items:center; justify-content:space-between; gap:12px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--border);
      }
      .meta{
        color: var(--muted);
        font-size: 13px;
        line-height: 1.5;
      }
  
      /* ==========================
        STATS (animated count)
      =========================== */
      .stats{
        padding: 34px 0;
      }
      .stats-wrap{
        border-radius: 28px;
        /* border:1px solid var(--border); */
        background: linear-gradient(180deg, var(--panel), var(--panel2));
        box-shadow: var(--shadow);
        padding: 16px;
        backdrop-filter: blur(14px);
      }
      .stats-grid{
        display:grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
      }
      .stat{
        border-radius: 22px;
        border:1px solid var(--border);
        background: color-mix(in srgb, var(--bg) 18%, transparent);
        padding: 18px;
      }
      .stat .num{
        font-family:"Playfair Display",serif;
        font-size: 46px;
        line-height:1;
        letter-spacing:.3px;
        background: linear-gradient(180deg, var(--gold2), var(--gold));
        -webkit-background-clip:text; background-clip:text;
        color:transparent;
      }
      .stat .lbl{
        margin-top: 8px;
        font-weight: 900;
        font-size: 13px;
        letter-spacing:.15px;
        color: color-mix(in srgb, var(--text) 92%, transparent);
      }
      .stat .sub{
        margin-top: 6px;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.45;
      }
  
      /* ==========================
        CARDS / GRIDS
      =========================== */
      .head{
        display:flex;
        align-items:flex-end;
        justify-content:space-between;
        gap: 16px;
        flex-wrap:wrap;
        margin-bottom: 20px;
      }
      .grid3{
        display:grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }
      .grid4{
        display:grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
      }
      .grid2{
        display:grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }
      .card{
        border-radius: 26px;
        border:1px solid var(--border);
        background: linear-gradient(180deg, var(--panel), var(--panel2));
        box-shadow: 0 18px 60px rgba(0,0,0,.22);
        padding: 18px;
        backdrop-filter: blur(12px);
        overflow:hidden;
        position:relative;
        transition: transform .18s ease, border-color .18s ease;
      }
      .card:hover{
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--gold) 28%, var(--border));
      }
      .icon{
        width:46px;height:46px;border-radius:18px;
        display:flex; align-items:center; justify-content:center;
        border:1px solid color-mix(in srgb, var(--gold) 35%, transparent);
        background: color-mix(in srgb, var(--gold) 12%, transparent);
        margin-bottom: 12px;
        box-shadow: 0 16px 46px rgba(0,0,0,.18);
      }
      .card h4{
        margin: 0 0 8px;
        font-family:"Playfair Display",serif;
        font-size: 20px;
        letter-spacing:.2px;
      }
      .card p{
        margin:0;
        color: var(--muted);
        line-height: 1.7;
        font-size: 14px;
      }
  
      /* ==========================
        SERVICES (photo background)
      =========================== */
      .services{
        position:relative;
        overflow:hidden;
        border-top:1px solid var(--border);
        border-bottom:1px solid var(--border);
      }
      .services:before{
        content:"";
        position:absolute; inset:0;
        background:
          linear-gradient(180deg,
            color-mix(in srgb, var(--bg) 40%, transparent),
            color-mix(in srgb, var(--bg) 92%, transparent)),
          url("https://images.unsplash.com/photo-1613490493576-7fde63acd811?q=80&w=2000&auto=format&fit=crop");
        background-size:cover;
        background-position:center;
        filter: saturate(1.05);
        z-index:0;
        opacity:1;
      }
      body.light .services:before{
        background:
          linear-gradient(180deg,
            rgba(255,255,255,.70),
            rgba(255,255,255,.92)),
          url("https://images.unsplash.com/photo-1613490493576-7fde63acd811?q=80&w=2000&auto=format&fit=crop");
        background-size:cover;
        background-position:center;
      }
      .services .container{ position:relative; z-index:1; }
  
      /* ==========================
        PROJECTS SLIDER (Swiper)
      =========================== */
      .swiper{
        width:100%;
        padding-bottom: 44px;
      }
      .project{
        border-radius: 28px;
        overflow:hidden;
        border: 1px solid var(--border);
        background: linear-gradient(180deg, var(--panel), var(--panel2));
        box-shadow: 0 22px 70px rgba(0,0,0,.22);
      }
      .project .cover{
        height: 230px;
        position:relative;
        overflow:hidden;
      }
      .project .cover img{
        width:100%; height:100%;
        object-fit:cover;
        transform: scale(1.02);
        transition: transform .5s ease;
        filter: contrast(1.05) saturate(1.05);
      }
      .project:hover .cover img{ transform: scale(1.08); }
      .project .cover:after{
        content:"";
        position:absolute; inset:0;
        background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
      }
      body.light .project .cover:after{ background: linear-gradient(180deg, transparent, rgba(255,255,255,.10)); }
      .project .body{
        padding: 18px;
      }
      .chips{
        display:flex; flex-wrap:wrap; gap:8px;
        margin-bottom: 10px;
      }
      .chip{
        font-size: 12px;
        font-weight: 800;
        padding: 7px 10px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: color-mix(in srgb, var(--bg) 18%, transparent);
        color: color-mix(in srgb, var(--text) 90%, transparent);
      }
      .project h4{
        margin: 0 0 8px;
        font-family:"Playfair Display",serif;
        font-size: 22px;
      }
      .project p{
        margin:0;
        color: var(--muted);
        line-height: 1.65;
        font-size: 14px;
      }
      .project .meta2{
        display:flex; flex-wrap:wrap; gap:12px;
        margin-top: 12px;
        color: color-mix(in srgb, var(--gold2) 85%, var(--text));
        font-weight: 900;
        font-size: 20px;
      }
      .swiper-button-next, .swiper-button-prev{
        color: color-mix(in srgb, var(--gold2) 85%, var(--text)) !important;
        transform: scale(.92);
      }
      .swiper-pagination-bullet{
        background: color-mix(in srgb, var(--gold) 75%, transparent) !important;
        opacity:.35 !important;
      }
      .swiper-pagination-bullet-active{
        opacity:1 !important;
        background: color-mix(in srgb, var(--gold2) 85%, transparent) !important;
      }
  
      /* ==========================
        FOOTER
      =========================== */
      footer{
        padding: 70px 0 36px;
        border-top: 1px solid var(--border);
        background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 70%, transparent));
      }
      .footer-grid{
        display:grid;
        grid-template-columns: 1.4fr .8fr .8fr;
        gap: 16px;
      }
      footer h5{
        margin: 0 0 10px;
        font-family:"Playfair Display",serif;
        font-size: 16px;
        letter-spacing:.2px;
      }
      footer p, footer a{
        margin:0;
        color: var(--muted);
        line-height: 1.7;
        font-size: 14px;
      }
      footer a:hover{ color: var(--gold2); }
      .copy{
        margin-top: 20px;
        padding-top: 16px;
        border-top: 1px solid var(--border);
        color: color-mix(in srgb, var(--muted) 88%, transparent);
        font-size: 13px;
        display:flex;
        justify-content:space-between;
        flex-wrap:wrap;
        gap: 12px;
      }
  
      /* ==========================
        MODAL
      =========================== */
      .backdrop{
        position:fixed; inset:0;
        display:none;
        align-items:center; justify-content:center;
        padding: 22px;
        background: rgba(0,0,0,.65);
        backdrop-filter: blur(12px);
        z-index: 90;
      }
      body.light .backdrop{ background: rgba(0,0,0,.35); }
      .modal{
        width: min(620px, 100%);
        border-radius: 28px;
        border:1px solid var(--border);
        background: linear-gradient(180deg, var(--panel), var(--panel2));
        box-shadow: var(--shadow);
        padding: 16px;
        overflow:hidden;
      }
      .modal header{
        display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
        margin-bottom: 10px;
      }
      .modal h3{
        margin: 0;
        font-family:"Playfair Display",serif;
        font-size: 24px;
        letter-spacing:.2px;
      }
      .x{
        width:44px;height:44px;border-radius:16px;
        border:1px solid var(--border);
        background: linear-gradient(180deg, var(--panel), var(--panel2));
        cursor:pointer;
        display:flex; align-items:center; justify-content:center;
      }
      .form{
        display:grid; gap: 10px;
        margin-top: 10px;
      }
      .row2{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      label{
        font-size: 12px;
        font-weight: 900;
        color: color-mix(in srgb, var(--muted) 92%, transparent);
        letter-spacing:.02em;
      }
      input, textarea{
        width:100%;
        padding: 12px 12px;
        border-radius: 16px;
        border: 1px solid var(--border);
        background: color-mix(in srgb, var(--bg) 18%, transparent);
        color: var(--text);
        outline:none;
        transition: border-color .2s ease, box-shadow .2s ease;
        font: inherit;
        font-size: 14px;
      }
      textarea{ min-height: 110px; resize: vertical; }
      input:focus, textarea:focus{
        border-color: color-mix(in srgb, var(--gold2) 60%, transparent);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 14%, transparent);
      }
      .modal .actions{
        display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;
        margin-top: 12px;
        padding-top: 12px;
        border-top:1px solid var(--border);
      }
  
      /* ==========================
        REVEAL ANIMATIONS
      =========================== */
      .reveal{
        opacity:0;
        transform: translateY(14px);
        transition: opacity .6s ease, transform .6s ease;
      }
      .reveal.on{
        opacity:1;
        transform: translateY(0);
      }
  
      /* ==========================
        RESPONSIVE
      =========================== */
      @media (max-width: 980px){
        .hero-grid{ grid-template-columns: 1fr; }
        .links{ display:none; }
        .burger{ display:flex; }
        .stats-grid{ grid-template-columns: repeat(2, 1fr); }
        .grid3{ grid-template-columns: 1fr; }
        .grid2{ grid-template-columns: 1fr; }
        .footer-grid{ grid-template-columns: 1fr; }
        .row2{ grid-template-columns: 1fr; }
      }

      .nav {
        backdrop-filter: blur(14px);
        background: linear-gradient(180deg, rgba(11, 11, 13, .85), rgba(11, 11, 13, .55));
        border-bottom: 1px solid rgba(255, 255, 255, .06);
      }

      /* CENTER HERO CONTENT */
.hero{
    display:flex;
    align-items:center;
  }
  
  .hero-inner{
    width:100%;
  }
  
  .hero-grid{
    display:flex;
    justify-content:center;
  }
  
  .hero-center{
    text-align:center;
    max-width:760px;
    margin:auto;
  }
  
  /* Center buttons nicely */
  .hero-actions{
    justify-content:center;
  }
  
  /* Center pill */
  .pill{
    margin:0 auto 18px;
  }

  .num{
    position:relative;
    display:inline-block;
    font-family:"Playfair Display", serif;
    font-size:36px;
    background:linear-gradient(180deg,var(--gold2),var(--gold));
    -webkit-background-clip:text;
    color:transparent;
  }
  
  /* Prefix */
  .num::before{
    content: attr(data-prefix);
    margin-right:4px;
    font-size:.75em;
    vertical-align:top;
  }
  
  /* Suffix */
  .num::after{
    content: attr(data-suffix);
    margin-left:4px;
    font-size:.6em;
    vertical-align:top;
  }
  .num::before,
.num::after{
  opacity:.85;
  letter-spacing:.04em;
}
.stat {
    text-align: center;
}

.hero {
    /* margin-top: -40px; */
}

.gold-text {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--gold-text);
}

h1,h2,h3,h4,h5,h6 {
     font-family: "Playfair Display",serif;
}
.ab-blocks {
    color: #A0A0A0;
    font-size: 20px;
}

.lux-bg.soft{
    background:
      radial-gradient(700px 400px at 20% 0%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 60%),
      linear-gradient(180deg, var(--bg), var(--bg2));
      transition: background .35s ease, color .35s ease;
      overflow-x:hidden;
  }
  
  .lux-bg.center{
    background:
      radial-gradient(800px 420px at 50% 0%, color-mix(in srgb, var(--gold2) 18%, transparent), transparent 65%),
      linear-gradient(180deg, var(--bg), var(--bg2));
      transition: background .35s ease, color .35s ease;
      overflow-x:hidden;
  }

 .nav {
    backdrop-filter: blur(14px);
    background: 
 color-mix(in srgb, var(--bg) 82%, transparent);
    border-bottom: 1px solid var(--border);
 }

 .nav a, .btn, .pill, p {
    font-family: "Nunito Sans", sans-serif;
 }
.imr-photo {
    padding: 0px;height: 390px
}
 @media (max-width: 600px) {
    .brand {
        max-width: 140px;
        width: 140px!important;
    }
    .imr-photo {
        padding: 0px;height: 240px
    }
    .grid4 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
    }
}