/* ===========================
       NW Paramount Construction LLC
       Standalone website (single-file)
       =========================== */

    :root{
  --bg:#ffffff;
  --panel: rgba(11,11,11,.04);
  --panel-2: rgba(11,11,11,.07);
  --text: rgba(11,11,11,.92);
  --muted: rgba(11,11,11,.72);
  --faint: rgba(11,11,11,.55);
  --brand: #c9a24d;
  --brand-2:#e7cf98;
  --accent: #c9a24d;
  --danger:#d64545;
  --ok:#2e9a6f;
  --shadow: 0 18px 60px rgba(0,0,0,.12);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.10);
  --ring: 0 0 0 4px rgba(201,162,77,.22);
  --radius: 18px;
  --radius-sm: 14px;
  --container: 1100px;
}
*{ box-sizing: border-box; }
    html, body{ height: 100%; }
    body{
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color: var(--text);
      background:
        radial-gradient(1200px 700px at 20% 0%, rgba(51,208,255,.18), transparent 55%),
        radial-gradient(900px 600px at 80% 10%, rgba(124,255,206,.14), transparent 55%),
        radial-gradient(800px 500px at 50% 120%, rgba(247,197,72,.10), transparent 55%),
        linear-gradient(180deg, #06101b 0%, #07121d 50%, #050B12 100%);
      overflow-x: hidden;
      line-height: 1.5;
    }

    a{ color: inherit; }
    a:hover{ text-decoration: none; }

    /* Accessibility */
    .skip-link{
      position: absolute;
      left: -999px;
      top: 8px;
      padding: 10px 12px;
      background: #fff;
      color: #000;
      border-radius: 10px;
      z-index: 9999;
    }
    .skip-link:focus{ left: 12px; outline: none; }

    /* Layout */
    .container{
      width: min(var(--max), 100% - 2*var(--gutter));
      margin: 0 auto;
    }

    /* Top bar */
    .topbar{
      position: sticky;
      top: 0;
      z-index: 40;
      backdrop-filter: blur(14px);
      background: linear-gradient(180deg, rgba(7,18,29,.88), rgba(7,18,29,.62));
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .topbar-inner{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 12px 0;
    }

    .brand{
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 220px;
    }
    .logo{
      width: 86px;
      height: 86px;
      border-radius: 26px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(51,208,255,.25), rgba(124,255,206,.18));
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: var(--shadow-soft);
    }
    .logo img{width:100%;height:100%;object-fit:contain;padding:4px;display:block;}

    .brand-title{
      display: flex;
      flex-direction: column;
      gap: 2px;
      line-height: 1.1;
    }
    .brand-title strong{ font-size: 0.98rem; letter-spacing: .2px; }
    .brand-title span{ font-size: 0.86rem; color: var(--muted); }

    nav{
      display: flex;
      align-items: center;
      gap: 18px;
    }
    nav a{
      font-size: 0.94rem;
      color: var(--muted);
      text-decoration: none;
      padding: 8px 10px;
      border-radius: 10px;
    }
    nav a:hover{ background: rgba(255,255,255,.06); color: var(--text); }

    .cta-row{
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: var(--text);
      text-decoration: none;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(0,0,0,.18);
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
      user-select: none;
      font-weight: 600;
      letter-spacing: .2px;
      white-space: nowrap;
    }
    .btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.20); }
    .btn:focus{ outline: none; box-shadow: var(--ring); }
    .btn.primary{
      background: linear-gradient(135deg, rgba(51,208,255,.92), rgba(124,255,206,.92));
      color: #041018;
      border-color: rgba(255,255,255,.0);
    }
    .btn.primary:hover{ filter: brightness(1.02); }
    .btn.ghost{
      background: transparent;
      border-color: rgba(255,255,255,.18);
    }
    .btn.small{
      padding: 8px 12px;
      border-radius: 11px;
      font-size: 0.92rem;
    }
    .pill{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      color: var(--muted);
      font-size: 0.92rem;
    }
    .icon{
      width: 18px; height: 18px; display: inline-block;
    }

    /* Mobile nav */
    .nav-toggle{
      display: none;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: var(--text);
      cursor: pointer;
    }
    .nav-toggle:focus{ outline: none; box-shadow: var(--ring); }

    @media (max-width: 920px){
      nav{ display: none; }
      .nav-toggle{ display: inline-grid; place-items: center; }
      .cta-row{ gap: 8px; }
      .brand{ min-width: 0; }
    }

    .mobile-drawer{
      display: none;
      border-top: 1px solid rgba(255,255,255,.08);
      padding: 10px 0 16px;
    }
    .mobile-drawer a{
      display: block;
      padding: 12px 10px;
      border-radius: 12px;
      color: var(--muted);
      text-decoration: none;
    }
    .mobile-drawer a:hover{ background: rgba(255,255,255,.06); color: var(--text); }
    .mobile-drawer.open{ display: block; }

    /* Hero */
    .hero{
      padding: 44px 0 24px;
      position: relative;
      overflow: clip;
    }
    .hero-grid{
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 24px;
      align-items: stretch;
    }
    @media (max-width: 980px){
      .hero-grid{ grid-template-columns: 1fr; }
    }
    .hero-card{
      padding: 28px;
      border-radius: var(--radius);
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }
    .hero-card::before{
      content:"";
      position: absolute;
      inset: -1px;
      background:
        radial-gradient(600px 300px at 10% 0%, rgba(51,208,255,.22), transparent 60%),
        radial-gradient(600px 300px at 80% 0%, rgba(124,255,206,.18), transparent 60%),
        radial-gradient(700px 400px at 40% 110%, rgba(247,197,72,.12), transparent 65%);
      pointer-events: none;
      opacity: .8;
    }
    .hero-card > *{ position: relative; z-index: 1; }

    .hero h1{
      font-size: var(--h1);
      line-height: 1.05;
      margin: 10px 0 10px;
      letter-spacing: -0.5px;
    }
    .hero p{
      font-size: var(--p);
      color: var(--muted);
      margin: 0 0 16px;
      max-width: 64ch;
    }
    .hero .kicker{
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }
    .stars{
      display: inline-flex; align-items: center; gap: 2px;
      color: var(--accent);
    }
    .subtle{
      font-size: .95rem;
      color: var(--muted);
    }
    .hero-actions{
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 16px;
    }
    .trust-row{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 20px;
    }
    @media (max-width: 680px){
      .trust-row{ grid-template-columns: 1fr; }
    }
    .trust{
      padding: 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.18);
    }
    .trust strong{ display: block; font-size: .95rem; }
    .trust span{ display: block; font-size: .9rem; color: var(--muted); margin-top: 2px; }

    /* Side card */
    .side{
      display: grid;
      gap: 12px;
    }
    .mini{
      padding: 18px;
      border-radius: var(--radius);
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: var(--shadow-soft);
    }
    .mini h3{
      font-size: var(--h3);
      margin: 0 0 10px;
    }
    .mini p{
      margin: 0;
      color: var(--muted);
      font-size: 0.98rem;
    }
    .info-list{
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }
    .info{
      display: grid;
      grid-template-columns: 20px 1fr;
      gap: 10px;
      align-items: start;
      padding: 10px 10px;
      border-radius: 14px;
      background: rgba(0,0,0,.16);
      border: 1px solid rgba(255,255,255,.10);
    }
    .info a{ color: var(--text); text-decoration: none; }
    .info a:hover{ text-decoration: underline; }
    .muted{ color: var(--muted); }

    /* Sections */
    section{
      padding: 34px 0;
    }
    .section-head{
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 14px;
      margin-bottom: 16px;
    }
    .section-head h2{
      font-size: var(--h2);
      margin: 0;
      letter-spacing: -0.3px;
    }
    .section-head p{
      margin: 0;
      color: var(--muted);
      max-width: 70ch;
    }

    .grid{
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 14px;
    }
    .card{
      border-radius: var(--radius);
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: var(--shadow-soft);
      padding: 18px;
    }

    /* Services */
    .service{
      grid-column: span 4;
      position: relative;
      overflow: hidden;
    }
    .service::after{
      content:"";
      position: absolute;
      inset: -1px;
      background:
        radial-gradient(240px 160px at 20% 0%, rgba(51,208,255,.14), transparent 65%),
        radial-gradient(240px 160px at 80% 0%, rgba(124,255,206,.10), transparent 65%);
      pointer-events: none;
      opacity: .9;
    }
    .service > *{ position: relative; z-index: 1; }

    .service h3{ margin: 0 0 8px; font-size: 1.08rem; }
    .service p{ margin: 0; color: var(--muted); font-size: 0.98rem; }

    @media (max-width: 980px){
      .service{ grid-column: span 6; }
    }
    @media (max-width: 640px){
      .service{ grid-column: span 12; }
    }

    .tag-row{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }
    .tag{
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 0.88rem;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.15);
      color: var(--muted);
    }

    /* Process */
    .step{
      grid-column: span 3;
    }
    @media (max-width: 980px){
      .step{ grid-column: span 6; }
    }
    @media (max-width: 640px){
      .step{ grid-column: span 12; }
    }
    .step .num{
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: rgba(51,208,255,.14);
      border: 1px solid rgba(51,208,255,.25);
      color: var(--text);
      font-weight: 800;
      margin-bottom: 10px;
    }
    .step h3{ margin: 0 0 6px; }
    .step p{ margin: 0; color: var(--muted); }

    /* Gallery */
    .gallery{
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 14px;
    }
    .gallery .tile{
      grid-column: span 4;
      padding: 0;
      overflow: hidden;
      position: relative;
    }
    @media (max-width: 980px){
      .gallery .tile{ grid-column: span 6; }
    }
    @media (max-width: 640px){
      .gallery .tile{ grid-column: span 12; }
    }
    .ph{
      aspect-ratio: 16/11;
      width: 100%;
      border-radius: var(--radius);
      display: grid;
      place-items: center;
      background:
        linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
        repeating-linear-gradient(90deg, rgba(247,197,72,.10), rgba(247,197,72,.10) 12px, rgba(255,255,255,.02) 12px, rgba(255,255,255,.02) 24px);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
      position: relative;
    }
    .ph::before{
      content:"";
      position: absolute;
      inset: -1px;
      background:
        radial-gradient(340px 180px at 10% 10%, rgba(51,208,255,.20), transparent 60%),
        radial-gradient(340px 180px at 90% 10%, rgba(124,255,206,.14), transparent 60%);
      opacity: .85;
    }
    .ph > *{ position: relative; z-index: 1; }
    .ph .label{
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(7,18,29,.62);
      border: 1px solid rgba(255,255,255,.12);
      max-width: 92%;
    }
    .ph strong{ display: block; font-size: 1rem; }
    .ph span{ display: block; color: var(--muted); font-size: .92rem; margin-top: 2px; }

    .tile .actions{
      position: absolute;
      right: 12px;
      top: 12px;
      display: flex;
      gap: 8px;
      z-index: 2;
    }

    /* Before/after slider */
    .ba{
      grid-column: span 12;
      padding: 18px;
    }
    .ba-wrap{
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .ba-frame{
      position: relative;
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: var(--shadow-soft);
      min-height: 220px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    }
    .ba-layer{
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 18px;
      text-align: center;
    }
    .ba-before{
      background:
        repeating-linear-gradient(45deg, rgba(255,92,122,.22), rgba(255,92,122,.22) 12px, rgba(0,0,0,.06) 12px, rgba(0,0,0,.06) 24px);
    }
    .ba-after{
      background:
        repeating-linear-gradient(45deg, rgba(102,255,184,.20), rgba(102,255,184,.20) 12px, rgba(0,0,0,.06) 12px, rgba(0,0,0,.06) 24px);
      clip-path: inset(0 0 0 50%);
    }
    .ba-handle{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 0;
      border-left: 2px solid rgba(255,255,255,.8);
      pointer-events: none;
    }
    .ba-knob{
      position: absolute;
      left: calc(50% - 18px);
      top: calc(50% - 18px);
      width: 36px;
      height: 36px;
      border-radius: 999px;
      background: rgba(7,18,29,.75);
      border: 1px solid rgba(255,255,255,.20);
      display: grid;
      place-items: center;
      box-shadow: var(--shadow-soft);
      pointer-events: none;
    }
    .ba-controls{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      justify-content: space-between;
    }
    .range{
      width: min(520px, 100%);
    }
    input[type="range"]{
      width: 100%;
      accent-color: var(--brand);
    }
    .note{
      color: var(--muted);
      font-size: .95rem;
    }

    /* Reviews */
    .review{
      grid-column: span 4;
    }
    @media (max-width: 980px){
      .review{ grid-column: span 6; }
    }
    @media (max-width: 640px){
      .review{ grid-column: span 12; }
    }
    .quote{
      margin: 0;
      color: var(--text);
      font-size: 1rem;
    }
    .byline{
      margin-top: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: .95rem;
    }
    .avatar{
      width: 34px;
      height: 34px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      display: grid;
      place-items: center;
      font-weight: 800;
      color: var(--text);
    }

    /* FAQ */
    .faq{
      grid-column: span 6;
      padding: 0;
      overflow: hidden;
    }
    @media (max-width: 840px){
      .faq{ grid-column: span 12; }
    }
    details{
      border-bottom: 1px solid rgba(255,255,255,.08);
      padding: 14px 16px;
      background: rgba(255,255,255,.02);
    }
    details:last-child{ border-bottom: none; }
    summary{
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-weight: 700;
    }
    summary::-webkit-details-marker{ display: none; }
    details p{
      margin: 10px 0 0;
      color: var(--muted);
      max-width: 80ch;
    }
    .chev{
      width: 18px; height: 18px;
      opacity: .85;
      transform: rotate(0deg);
      transition: transform .15s ease;
      flex: 0 0 auto;
    }
    details[open] .chev{ transform: rotate(180deg); }

    /* Contact */
    .contact-grid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    @media (max-width: 980px){
      .contact-grid{ grid-template-columns: 1fr; }
    }
    label{
      display: block;
      font-size: 0.92rem;
      color: var(--muted);
      margin-bottom: 6px;
    }
    input, textarea, select{
      width: 100%;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.18);
      color: var(--text);
      padding: 12px 12px;
      outline: none;
      font-size: 1rem;
    }
    textarea{ min-height: 120px; resize: vertical; }
    input:focus, textarea:focus, select:focus{ box-shadow: var(--ring); border-color: rgba(51,208,255,.35); }

    .field{ margin-bottom: 12px; }
    .form-actions{
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
    }
    .form-hint{
      color: var(--muted);
      font-size: .94rem;
      margin-top: 10px;
    }
    .alert{
      display: none;
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.16);
      color: var(--muted);
    }
    .alert.show{ display: block; }
    .alert.ok{
      border-color: rgba(102,255,184,.30);
    }
    .alert.bad{
      border-color: rgba(255,92,122,.32);
    }

    .map{
      width: 100%;
      border: 0;
      border-radius: var(--radius);
      min-height: 340px;
      background: rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: var(--shadow-soft);
    }

    /* Footer */
    footer{
      padding: 28px 0 40px;
      border-top: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.12);
    }
    .footer-grid{
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 16px;
      align-items: start;
    }
    @media (max-width: 900px){
      .footer-grid{ grid-template-columns: 1fr; }
    }
    .fine{
      color: var(--faint);
      font-size: .92rem;
      line-height: 1.5;
    }
    .link-row{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }
    .link-row a{
      color: var(--muted);
      text-decoration: none;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
    }
    .link-row a:hover{ color: var(--text); background: rgba(255,255,255,.06); }

    /* Back-to-top */
    .to-top{
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 60;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity .18s ease, transform .18s ease;
      pointer-events: none;
    }
    .to-top.show{
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    /* Small helper text */
    .mono{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: .95rem;
    }
  

/* --- White/Black/Gold overrides --- */
body{background:#fff !important;color:var(--text) !important;}
.topbar{background: rgba(11,11,11,.96) !important;border-bottom:1px solid rgba(201,162,77,.35) !important;}
.topbar .brand-title{color: rgba(255,255,255,.96) !important;}
.topbar .brand-title span{color: rgba(255,255,255,.72) !important;}
.topbar nav a{color: rgba(255,255,255,.86) !important;}
.topbar nav a:hover{color: var(--brand) !important;background: rgba(255,255,255,.10) !important;}
.topbar .btn{color: rgba(255,255,255,.92) !important;border-color: rgba(255,255,255,.22) !important;background: rgba(255,255,255,.06) !important;}
.topbar .btn.primary{background: var(--brand) !important;color:#0b0b0b !important;border-color: transparent !important;box-shadow: 0 12px 28px rgba(201,162,77,.25) !important;}
.topbar .btn.primary:hover{box-shadow: 0 14px 34px rgba(201,162,77,.35) !important;transform: translateY(-1px);}
.hero::before{background: radial-gradient(800px 420px at 18% 22%, rgba(201,162,77,.18), transparent 60%),
                       radial-gradient(700px 360px at 82% 18%, rgba(201,162,77,.12), transparent 60%),
                       radial-gradient(700px 420px at 55% 88%, rgba(0,0,0,.06), transparent 60%) !important;}
.hero-card,.mini,.card,.ph,.ba-frame,.alert{background:#fff !important;border:1px solid rgba(11,11,11,.10) !important;box-shadow: var(--shadow-soft) !important;}
.card:hover{border-color: rgba(201,162,77,.45) !important;}
.hero-card::before{background: radial-gradient(420px 260px at 20% 18%, rgba(201,162,77,.18), transparent 62%),
                           radial-gradient(420px 260px at 90% 12%, rgba(201,162,77,.10), transparent 62%) !important;opacity:1 !important;}
.logo{background: linear-gradient(135deg, rgba(201,162,77,.35), rgba(201,162,77,.14)) !important;border-color: rgba(201,162,77,.35) !important;}
.btn{background: rgba(11,11,11,.03) !important;border-color: rgba(11,11,11,.14) !important;color: var(--text) !important;}
.btn:hover{background: rgba(11,11,11,.06) !important;border-color: rgba(11,11,11,.18) !important;}
.btn.primary{background: var(--brand) !important;color:#0b0b0b !important;border-color: transparent !important;box-shadow: 0 12px 28px rgba(201,162,77,.22) !important;transition: box-shadow .25s, transform .25s;}
.btn.primary:hover{box-shadow: 0 14px 34px rgba(201,162,77,.32) !important;transform: translateY(-1px);}
.chip{border-color: rgba(11,11,11,.14) !important;background: rgba(11,11,11,.03) !important;color: var(--muted) !important;}
.muted{color: var(--muted) !important;}
.faint{color: var(--faint) !important;}
.fine{color: var(--muted) !important;}
a:hover{color: var(--brand);}
.ba-before .ba-img{background: repeating-linear-gradient(135deg, rgba(11,11,11,.10) 0 10px, rgba(11,11,11,.06) 10px 20px) !important;}
.ba-after .ba-img{background: repeating-linear-gradient(135deg, rgba(201,162,77,.22) 0 10px, rgba(201,162,77,.12) 10px 20px) !important;}
footer{background: rgba(11,11,11,.96) !important;border-top:1px solid rgba(201,162,77,.25) !important;}
.ph{border-style: dashed !important;}


/* --- Logo image (arm + hammer) --- */
.logo{ padding: 0px; }
.logo .logo-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}


@media (max-width: 520px){
  .logo{width:64px;height:64px;border-radius:22px;}
  .logo img{padding:4px;}
}

.brand{cursor:pointer;}


/* --- Homepage hero background image --- */
.hero{
  background-image: url('hero-floor.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 72px 0 40px;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg,
    rgba(11,11,11,.78) 0%,
    rgba(11,11,11,.52) 40%,
    rgba(11,11,11,.25) 100%);
  z-index:0;
}
.hero .container{position:relative; z-index:1;}
.hero .hero-card{
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.30) !important;
}
@media (max-width: 980px){
  .hero{padding: 62px 0 28px;}
  .hero::before{
    background: linear-gradient(180deg,
      rgba(11,11,11,.78) 0%,
      rgba(11,11,11,.48) 55%,
      rgba(11,11,11,.20) 100%);
  }
}

/* --- Hero mini cards (centered) --- */
.hero-grid.hero-grid-single{
  grid-template-columns: 1fr !important;
  justify-items: center;
}
.hero-grid.hero-grid-single .hero-card{
  max-width: 920px;
  width: 100%;
}
.hero-mini-row{
  width: 100%;
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 440px));
  gap: 14px;
  justify-content: center;
}
@media (max-width: 980px){
  .hero-mini-row{ grid-template-columns: 1fr; max-width: 920px; margin-left: auto; margin-right: auto; }
}

/* Remove white backgrounds on these two cards, keep it clean */
.mini.glass{
  background: rgba(11,11,11,.42) !important;
  border: 1px solid rgba(201,162,77,.35) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.mini.glass h3{ color: rgba(255,255,255,.96) !important; }
.mini.glass p, .mini.glass .muted{ color: rgba(255,255,255,.78) !important; }
.mini.glass .chip{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.90) !important;
}
.mini.glass .chip:hover{
  border-color: rgba(201,162,77,.60) !important;
}