/* =========================================================
   CELEBRIO — The House of Luxuriance
   Main Stylesheet
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Jost:wght@300;400;500;600&display=swap');

:root{
  /* Palette */
  --color-bg:#F7F2E9;
  --color-surface:#FFFFFF;
  --color-surface-2:#EFE7D6;
  --color-ink:#1C1710;
  --color-ink-soft:#4A4139;
  --color-muted:#8A7F70;
  --color-border:#E3D9C4;
  --color-gold:#B08A4E;
  --color-gold-dark:#8C6B36;
  --color-gold-light:#D8B978;
  --color-black:#141210;

  /* Type */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', Arial, sans-serif;

  /* Layout */
  --max-width: 1240px;
  --gutter: 32px;
  --radius-sm: 2px;
  --radius-md: 4px;

  --shadow-card: 0 18px 40px -22px rgba(28,23,16,0.35);
  --transition: 420ms cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--color-bg);
  color:var(--color-ink);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  transition:background var(--transition), color var(--transition);
}

img{max-width:100%;display:block;}
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }

.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--gutter);
}

.eyebrow{
  font-family:var(--font-body);
  font-size:0.72rem;
  letter-spacing:0.18em;
  color:var(--color-gold-dark);
  font-weight:500;
  display:inline-block;
  margin-bottom:14px;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  margin:0 0 0.4em;
  color:var(--color-ink);
  line-height:1.12;
}

h1{ font-size:clamp(2.6rem,5vw,4.6rem); }
h2{ font-size:clamp(2rem,3.4vw,3.1rem); }
h3{ font-size:1.5rem; }

.italic-gold{ font-style:italic; color:#e3ba78; }

p{ margin:0 0 1em; color:var(--color-ink-soft); }
.lede{ font-size:1.08rem; color:var(--color-ink-soft); max-width:640px; }

.section{ padding:110px 0; position:relative; }
.section--tight{ padding:70px 0; }
.section--dark{ background:var(--color-black); color:#EFE7D6; }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark p{ color:#EFE7D6; }
.section--surface{ background:var(--color-surface-2); }

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:56px;
  flex-wrap:wrap;
}
.section-head .lede{ margin:0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  font-size:0.85rem;
  letter-spacing:0.04em;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  transition:all var(--transition);
  white-space:nowrap;
}
.btn-primary{
  background:var(--color-black);
  color:#F5EEDD;
  border-color:var(--color-black);
}
.btn-primary:hover{ background:var(--color-gold-dark); border-color:var(--color-gold-dark); transform:translateY(-2px); }
.btn-gold{
  background:var(--color-gold);
  color:#1C1710;
}
.btn-gold:hover{ background:var(--color-gold-dark); color:#fff; transform:translateY(-2px); }
.btn-outline{
  background:transparent;
  border-color:var(--color-ink);
  color:var(--color-ink);
}
.btn-outline:hover{ background:var(--color-ink); color:var(--color-bg); }
.btn-outline-light{
  background:transparent;
  border-color:rgba(239,231,214,.5);
  color:#EFE7D6;
}
.btn-outline-light:hover{ background:#EFE7D6; color:var(--color-black); }
.btn-block{ width:100%; justify-content:center; }
.btn-sm{ padding:10px 18px; font-size:0.78rem; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(247,242,233,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-border);
  transition:background var(--transition), border-color var(--transition);
}
.site-header .nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:84px;
}
.brand{
  font-family:var(--font-display);
  font-size:1.5rem;
  letter-spacing:0.04em;
  font-weight:600;
}
.brand small{
  display:block;
  font-family:var(--font-body);
  font-size:0.55rem;
  letter-spacing:0.22em;
  color:var(--color-muted);
  font-weight:400;
  margin-top:2px;
}
.main-nav{ display:flex; align-items:center; gap:6px; }
.main-nav > ul{ display:flex; align-items:center; gap:4px; }
.main-nav a.nav-link{
  display:flex; align-items:center; gap:6px;
  padding:10px 16px;
  font-size:0.82rem;
  letter-spacing:0.03em;
  color:var(--color-ink-soft);
  border-radius:var(--radius-sm);
  transition:color var(--transition), background var(--transition);
}
.main-nav a.nav-link:hover,
.main-nav li.active > a.nav-link{ color:var(--color-gold-dark); background:rgba(176,138,78,0.08); }

.has-dropdown{ position:relative; }
.dropdown-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:190px;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:8px;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:all var(--transition);
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown.open .dropdown-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown-menu--right{
  left:auto;
  right:0;
}
[dir="rtl"] .dropdown-menu--right{
  right:auto;
  left:0;
}
.dropdown-menu a{
  display:block;
  padding:10px 14px;
  font-size:0.82rem;
  color:var(--color-ink-soft);
  border-radius:var(--radius-sm);
}
.dropdown-menu a:hover{ background:var(--color-surface-2); color:var(--color-gold-dark); }

.header-actions{ display:flex; align-items:center; gap:8px; margin-left:18px; }
[dir="rtl"] .header-actions{ margin-left:0; margin-right:18px; }
.nav-utils{ display:flex; align-items:center; gap:6px; }
.icon-btn{
  width:42px; height:42px; min-width:42px; min-height:42px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--color-border);
  border-radius:50%;
  background:transparent;
  color:var(--color-ink);
  font-size:0.95rem;
  transition:all var(--transition);
}
.icon-btn:hover{ background:var(--color-black); color:#EFE7D6; border-color:var(--color-black); }
.icon-btn.active{ background:var(--color-gold); border-color:var(--color-gold); color:#1c1710; }

.nav-utils--mobile{ display:none; }

.nav-toggle{
  display:none;
  width:42px; height:42px; min-width:42px; min-height:42px;
  border:1px solid var(--color-border);
  border-radius:50%;
  background:transparent;
  align-items:center; justify-content:center;
  font-size:1.1rem;
}

@media (min-width: 1025px){
  .nav-group-heading, .mobile-only-link{ display:none !important; }
}

/* =========================================================
   MOBILE & TABLET NAVIGATION DRAWER (<= 1024px)
   ========================================================= */
@media (max-width:1024px){
  .site-header{ backdrop-filter:none; -webkit-backdrop-filter:none; }
  .header-actions{ margin-left:0; }
  [dir="rtl"] .header-actions{ margin-right:0; }
  .desktop-only-login{ display:none !important; }
  .nav-toggle{ display:flex; }

  .main-nav{
    position:fixed; inset:84px 0 0 0;
    height:calc(100vh - 84px);
    width:100%;
    max-width:100%;
    background:var(--color-bg);
    flex-direction:column;
    align-items:stretch;
    padding:24px var(--gutter) 60px;
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform var(--transition);
    gap:18px;
    z-index:9999;
    box-shadow:-8px 0 32px rgba(0,0,0,0.2);
  }
  [dir="rtl"] .main-nav{ transform:translateX(-100%); box-shadow:8px 0 32px rgba(0,0,0,0.2); }
  .main-nav.open{ transform:translateX(0); }
  [dir="rtl"] .main-nav.open{ transform:translateX(0); }

  .main-nav > ul{ flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .main-nav a.nav-link{
    padding:14px 8px;
    font-size:0.95rem;
    font-weight:500;
    border-bottom:1px solid var(--color-border);
    border-radius:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:44px;
  }
  .dropdown-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none; display:none; padding-left:16px; margin-bottom:8px;
  }
  [dir="rtl"] .dropdown-menu{ padding-left:0; padding-right:16px; }
  .has-dropdown.open .dropdown-menu{ display:block; }
  .dropdown-menu a{ padding:12px 14px; font-size:0.88rem; border-bottom:1px solid rgba(0,0,0,0.04); min-height:44px; display:flex; align-items:center; }

  .sidebar-login-wrap{
    margin-top:20px;
    padding-top:16px;
    border-top:1px solid var(--color-border);
  }

  .nav-group-heading{
    font-size:0.68rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--color-muted);
    margin:18px 8px 6px;
    font-weight:600;
  }

  .nav-utils--desktop{ display:none; }
  .nav-utils--mobile{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    margin:16px 0 0;
    padding-top:16px;
    border-top:1px solid var(--color-border);
    min-width:0;
  }
  .nav-utils--mobile .sidebar-ctrl-btn{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:12px 8px;
    border:1px solid var(--color-border);
    border-radius:var(--radius-sm);
    background:var(--color-surface);
    color:var(--color-ink);
    font-size:0.75rem;
    font-weight:500;
    text-decoration:none;
    transition:all var(--transition);
    min-height:44px;
  }
  .nav-utils--mobile .sidebar-ctrl-btn i{ font-size:1.05rem; color:var(--color-gold-dark); }
  .nav-utils--mobile .sidebar-ctrl-btn:hover,
  .nav-utils--mobile .sidebar-ctrl-btn.active{
    background:var(--color-black);
    color:#EFE7D6;
    border-color:var(--color-black);
  }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding:64px 0 90px;
  position:relative;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:56px;
  align-items:center;
}
.hero-copy .eyebrow{ display:block; }
.hero-copy h1{ margin-bottom:22px; }
.hero-actions{ display:flex; align-items:center; gap:22px; margin-top:32px; flex-wrap:wrap; }
.hero-actions .link-underline{
  border-bottom:1px solid var(--color-ink);
  padding-bottom:3px;
  font-size:0.85rem;
}
.hero-media{ position:relative; }
.hero-media .frame{
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  aspect-ratio:4/5;
}
.hero-stats{
  display:flex; gap:0;
  margin-top:56px;
  border-top:1px solid var(--color-border);
  padding-top:32px;
}
.stat{ flex:1; padding-right:24px; }
.stat b{
  font-family:var(--font-display);
  font-size:2.1rem;
  display:block;
  color:var(--color-gold-dark);
  font-weight:600;
}
.stat span{ font-size:0.78rem; color:var(--color-muted); letter-spacing:0.02em; }

/* generic image placeholder (gradient art instead of photography) */
.art{
  width:100%; height:100%;
  background-size:cover; background-position:center;
  position:relative;

}
.art::after{
  content:"";
  position:absolute; inset:0;
  
}
.art-riviera{ background:linear-gradient(135deg,#5F7A8C,#CBB183 45%,#E8D9B5); }
.art-midnight{ background:linear-gradient(135deg,#191410,#3B2C1E 40%,#B08A4E); }
.art-bloom{ background:linear-gradient(135deg,#EDE3CE,#C9B78F 50%,#8C6B36); }
.art-island{ background:linear-gradient(135deg,#274653,#4E8E8C 45%,#DDD3B5); }
.art-royal{ background:linear-gradient(135deg,#2E2116,#7A5A34 45%,#D8B978); }
.art-solar{ background:linear-gradient(135deg,#26113A,#A23E48 45%,#D8B978); }

.art-terra{ background:linear-gradient(135deg,#3C2A1E,#B5713F 55%,#E9C79A); }
.art-cover span.card-label{
  position:absolute; left:20px; bottom:18px; z-index:2;
  color:#fff; font-family:var(--font-display); font-size:1.1rem; font-style:italic;
}

/* =========================================================
   CARDS
   ========================================================= */
.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:transform var(--transition), box-shadow var(--transition);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); }
.card .art{ aspect-ratio:4/3; position:relative; overflow:hidden; }
.card .art img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s cubic-bezier(.22,.61,.36,1); }
.card:hover .art img{ transform:scale(1.06); }
.card-body{ padding:24px; }
.card-body .kicker{ font-size:0.7rem; letter-spacing:0.12em; color:var(--color-gold-dark); margin-bottom:8px; display:block; }
.card-body h3{ font-size:1.35rem; margin-bottom:8px; }
.card-body p{ font-size:0.92rem; margin-bottom:14px; }
.card-meta{ display:flex; justify-content:space-between; font-size:0.75rem; color:var(--color-muted); border-top:1px solid var(--color-border); padding-top:14px; }

/* Sense / feature tiles */
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--color-border); border:1px solid var(--color-border); }
.tile{ background:var(--color-surface); padding:34px 26px; transition:background var(--transition); }
.tile:hover{ background:var(--color-surface-2); }
.tile i{ font-size:1.4rem; color:var(--color-gold-dark); margin-bottom:16px; display:block; }
.tile h4{ font-size:1.05rem; margin-bottom:8px; }
.tile p{ font-size:0.85rem; margin:0; }

/* =========================================================
   PRICING / TIERS
   ========================================================= */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:stretch; }
.tier{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:38px 30px;
  display:flex; flex-direction:column;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.tier:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); }
.tier--featured{ background:var(--color-black); color:#EFE7D6; border-color:var(--color-black); position:relative; }
.tier--featured h3,.tier--featured p,.tier--featured .tier-price{ color:#EFE7D6; }
.tier--featured .tier-badge{
  position:absolute; top:-13px; right:30px;
  background:var(--color-gold); color:#1c1710;
  font-size:0.65rem; letter-spacing:0.1em; padding:6px 14px; border-radius:20px;
}
.tier-price{ font-family:var(--font-display); font-size:2.4rem; font-weight:600; margin:14px 0 4px; }
.tier-price sub{ font-size:0.9rem; font-weight:400; color:var(--color-muted); }
.tier-list{ margin:24px 0 30px; flex:1; }
.tier-list li{ display:flex; gap:10px; padding:8px 0; font-size:0.88rem; border-top:1px dashed var(--color-border); }
.tier--featured .tier-list li{ border-color:rgba(239,231,214,0.18); }
.tier-list li:first-child{ border-top:none; }
.tier-list li i{ color:var(--color-gold); margin-top:3px; }

/* =========================================================
   FORMS
   ========================================================= */
.form-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:40px;
  box-shadow:var(--shadow-card);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ margin-bottom:20px; position:relative; }
.field label{ display:block; font-size:0.78rem; letter-spacing:0.03em; margin-bottom:8px; color:var(--color-ink-soft); }
.field input,.field select,.field textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:var(--color-bg);
  color:var(--color-ink);
  font-size:0.92rem;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--color-gold); box-shadow:0 0 0 3px rgba(176,138,78,0.18);
}
.field textarea{ min-height:120px; resize:vertical; }
.field .error-msg{
  display:none;
  font-size:0.75rem; color:#B23A3A; margin-top:6px; align-items:center; gap:6px;
}
.field.error input,.field.error select,.field.error textarea{ border-color:#B23A3A; }
.field.error .error-msg{ display:flex; }
.field.success input,.field.success select,.field.success textarea{ border-color:#4C7A4C; }
.form-note{ font-size:0.78rem; color:var(--color-muted); margin-top:10px; }
.form-success-banner{
  display:none; align-items:center; gap:12px;
  background:#EAF3EA; color:#2F5C2F; border:1px solid #C7DEC7;
  padding:16px 18px; border-radius:var(--radius-sm); margin-bottom:24px; font-size:0.88rem;
}
.form-success-banner.show{ display:flex; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--color-black);
  color:#C9BFA9;
  padding:80px 0 0;
}
.footer-top{
  display:grid;
  grid-template-columns:1.3fr 0.85fr 0.85fr 1fr 1.25fr;
  gap:40px;
  padding-bottom:60px;
  border-bottom:1px solid rgba(201,191,169,0.15);
}
.footer-brand .brand{ color:#F1E9D4; }
.footer-brand p{ color:#9C927E; font-size:0.88rem; max-width:280px; margin-top:14px; }
.footer-col h5{ font-size:0.75rem; letter-spacing:0.12em; color:#EFE7D6; margin-bottom:18px; font-weight:500; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col a{ color:#9C927E; font-size:0.88rem; transition:color var(--transition); }
.footer-col a:hover{ color:var(--color-gold-light); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding:26px 0; font-size:0.76rem; color:#7C7364; flex-wrap:wrap; gap:16px;
}
.footer-bottom-right{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.footer-bottom-right a{ color:#9C927E; transition:color var(--transition); }
.footer-bottom-right a:hover{ color:var(--color-gold-light); }
.back-to-top{
  position:fixed; right:24px; bottom:24px; z-index:999;
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer; flex:none;
  background:var(--color-gold); color:#1c1710; font-size:0.95rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(12px);
  transition:opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background var(--transition), color var(--transition);
}
.back-to-top.is-visible{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
.back-to-top:hover{ background:var(--color-gold-dark); color:#fff; transform:translateY(-3px); }
@media (max-width:600px){
  .back-to-top{ right:16px; bottom:16px; width:42px; height:42px; }
}
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(201,191,169,0.25);
  display:flex; align-items:center; justify-content:center; color:#C9BFA9;
  transition:all var(--transition);
}
.footer-social a:hover{ background:var(--color-gold); color:#1c1710; border-color:var(--color-gold); }

.footer-contact{ display:flex; flex-direction:column; gap:12px; }
.footer-contact li{ display:flex; align-items:flex-start; gap:10px; margin-bottom:0; }
.footer-contact li i{ color:var(--color-gold-light); width:14px; margin-top:3px; font-size:0.82rem; flex:none; }
.footer-contact li span{ color:#9C927E; font-size:0.88rem; line-height:1.5; }

.footer-newsletter p{ color:#9C927E; font-size:0.88rem; margin-bottom:16px; }
.newsletter-form{ display:flex; gap:10px; }
.newsletter-form input{
  flex:1; min-width:0; background:rgba(239,231,214,0.05); border:1px solid rgba(201,191,169,0.25);
  border-radius:6px; padding:12px 14px; color:#EFE7D6; font-family:inherit; font-size:0.85rem;
}
.newsletter-form input::placeholder{ color:#7C7364; }
.newsletter-form input:focus{ outline:none; border-color:var(--color-gold); }
.newsletter-form .btn{ flex:none; white-space:nowrap; }
.newsletter-msg{ font-size:0.76rem; margin-top:10px; color:var(--color-gold-light); min-height:1em; }
.newsletter-msg.error{ color:#D98787; }

/* =========================================================
   MISC / UTILITIES
   ========================================================= */
.divider-gold{ width:64px; height:2px; background:var(--color-gold); margin:0 0 24px; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.text-center{ text-align:center; }
.mt-0{margin-top:0;}
.table-wrap{ overflow-x:auto; }
table.matrix{ width:100%; border-collapse:collapse; background:var(--color-surface); }
table.matrix th,table.matrix td{ padding:16px 18px; border:1px solid var(--color-border); font-size:0.86rem; text-align:left; }
table.matrix thead th{ background:var(--color-black); color:#EFE7D6; font-weight:500; font-family:var(--font-display); font-size:1rem; }
table.matrix tbody th{ text-align:left; font-weight:500; color:var(--color-ink-soft); background:var(--color-surface-2); }
table.matrix td.hl{ background:rgba(176,138,78,.08); }

.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:20px; font-size:0.7rem; letter-spacing:0.08em;
  background:rgba(176,138,78,.12); color:var(--color-gold-dark); border:1px solid rgba(176,138,78,.3);
}

.icon-chevron{ font-size:.6rem; }
.footer-social--spaced{ margin-top:22px; }
.is-hidden{ display:none !important; }
.site-header.is-scrolled{ box-shadow:0 8px 24px -18px rgba(0,0,0,.4); }

.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.filter-btn{
  padding:10px 20px; border:1px solid var(--color-border); border-radius:24px;
  font-size:0.8rem; background:transparent; color:var(--color-ink-soft);
  transition:all var(--transition);
}
.filter-btn:hover,.filter-btn.active{ background:var(--color-black); color:#EFE7D6; border-color:var(--color-black); }

.breadcrumb{ font-size:0.78rem; color:var(--color-muted); margin-bottom:18px; }
.breadcrumb a{ color:var(--color-gold-dark); }

.page-hero{
  padding:70px 0 60px;
  border-bottom:1px solid var(--color-border);
}

.img-float{
  animation:imgFloat 5s ease-in-out infinite;
}
@keyframes imgFloat{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-18px); }
}
@media (prefers-reduced-motion: reduce){
  .img-float{ animation:none; }
}

.page-hero .grid-2{ align-items:center; gap:50px; }
.page-hero--image{
  position:relative;
  background-size:cover;
  background-position:center;
  padding:150px 0 110px;
}
.page-hero--image .page-hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,23,16,0.5), #716b5b);
  z-index:0;
}
.page-hero--image .container{ position:relative; z-index:1; }
.page-hero--image .badge{
  background:rgba(0,0,0,0.35);
  color:#F1E2BC;
  border-color:rgba(241,226,188,0.4);
}

.page-hero--image h1{ color:#F5EFE0; text-shadow:0 2px 14px rgba(0,0,0,0.55); }
.page-hero--image h1 .italic-gold{ color:var(--color-gold); }
.page-hero--image .lede{ color:rgba(245,239,224,0.92); text-shadow:0 1px 8px rgba(0,0,0,0.45); }

.page-hero--image{
  position:relative;
  background-size:cover;
  background-position:center;
  padding:150px 0 110px;
}
.page-hero--image .page-hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,10,0.65), rgba(20,16,10,0.85));
  z-index:0;
}
.page-hero--image .container{ position:relative; z-index:1; }
.page-hero--image .badge{
  background:rgba(0,0,0,0.35);
  color:#F1E2BC;
  border-color:rgba(241,226,188,0.4);
}
.page-hero--image h1{ color:#F5EFE0; text-shadow:0 2px 14px rgba(0,0,0,0.55); }
.page-hero--image h1 .italic-gold{ color:var(--color-gold); }
.page-hero--image .lede{ color:rgba(245,239,224,0.92); text-shadow:0 1px 8px rgba(0,0,0,0.45); }
.page-hero--image .filter-btn{
  background:rgba(0,0,0,0.3);
  color:#F1E2BC;
  border-color:rgba(241,226,188,0.35);
}
.page-hero--image .filter-btn:hover,
.page-hero--image .filter-btn.active{
  background:var(--color-gold);
  color:#1C1710;
  border-color:var(--color-gold);
}


.quote-block{
  border-left:3px solid var(--color-gold);
  padding-left:24px; font-family:var(--font-display); font-style:italic; font-size:1.3rem; color:var(--color-ink);
}
[dir="rtl"] .quote-block{ border-left:none; border-right:3px solid var(--color-gold); padding-left:0; padding-right:24px; }

/* Scroll reveal */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 900ms ease, transform 900ms ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(24px); transition:opacity 700ms ease, transform 700ms ease; }
.reveal-stagger.in-view > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in-view > *:nth-child(1){ transition-delay:0ms; }
.reveal-stagger.in-view > *:nth-child(2){ transition-delay:120ms; }
.reveal-stagger.in-view > *:nth-child(3){ transition-delay:240ms; }
.reveal-stagger.in-view > *:nth-child(4){ transition-delay:360ms; }

/* Scroll reveal — text sliding in from the left, used in hero sections */
.reveal-left{ opacity:0; transform:translateX(-56px); transition:opacity 900ms ease, transform 900ms ease; }
.reveal-left.in-view{ opacity:1; transform:translateX(0); }
.reveal-left-stagger > *{ opacity:0; transform:translateX(-42px); transition:opacity 750ms ease, transform 750ms ease; }
.reveal-left-stagger.in-view > *{ opacity:1; transform:translateX(0); }
.reveal-left-stagger.in-view > *:nth-child(1){ transition-delay:0ms; }
.reveal-left-stagger.in-view > *:nth-child(2){ transition-delay:130ms; }
.reveal-left-stagger.in-view > *:nth-child(3){ transition-delay:260ms; }
.reveal-left-stagger.in-view > *:nth-child(4){ transition-delay:390ms; }
.reveal-left-stagger.in-view > *:nth-child(5){ transition-delay:520ms; }
.reveal-left-stagger.in-view > *:nth-child(6){ transition-delay:650ms; }




/* Split-screen slide-in (used by the "Five Senses" section on Home 1) */
.split-screen > *{
  opacity:0;
  transition:transform 900ms cubic-bezier(.22,.61,.36,1), opacity 900ms ease;
}
.split-screen > *:nth-child(1){ transform:translateX(-110px); transition-delay:0ms; }
.split-screen > *:nth-child(2){ transform:translateX(110px); transition-delay:140ms; }
.split-screen.in-view > *{ opacity:1; transform:translateX(0); }

/* Zig-zag alternating scroll reveal (left/right slide-in), used on
   the Curated Vendors artisan list — each row alternates direction. */
.zz-item{
  opacity:0;
  transition:opacity 700ms ease, transform 700ms cubic-bezier(.22,.61,.36,1);
}
.zz-item.zz-left{ transform:translateX(-70px); }
.zz-item.zz-right{ transform:translateX(70px); }
.zz-item.in-view{ opacity:1; transform:translateX(0); }

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-stagger > *,.reveal-left,.reveal-left-stagger > *{ transition:none !important; opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   INTERACTIVE / MODERN ANIMATION ENHANCEMENTS
   ========================================================= */

/* Scroll progress bar */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--color-gold),var(--color-gold-light));
  z-index:10000; transition:width 80ms linear;
}

/* Custom cursor */
html.has-custom-cursor,
html.has-custom-cursor body,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor .btn,
html.has-custom-cursor input,
html.has-custom-cursor select,
html.has-custom-cursor textarea{ cursor:none; }

.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:10001;
  border-radius:50%; will-change:transform;
}
.cursor-dot{
  width:8px; height:8px; background:var(--color-gold);
  transition:opacity 200ms ease, background 250ms ease;
}
.cursor-ring{
  width:38px; height:38px; margin:-15px 0 0 -15px;
  border:1px solid var(--color-gold);
  transition:width 280ms cubic-bezier(.22,.61,.36,1), height 280ms cubic-bezier(.22,.61,.36,1),
             margin 280ms cubic-bezier(.22,.61,.36,1), border-color 250ms ease, background 250ms ease, opacity 200ms ease;
}
.cursor-dot{ margin:-4px 0 0 -4px; }
.cursor-ring.hover{
  width:64px; height:64px; margin:-32px 0 0 -32px;
  background:rgba(176,138,78,0.12); border-color:var(--color-gold-dark);
}
.cursor-dot.hidden,.cursor-ring.hidden{ opacity:0; }

/* Ripple */
.btn{ position:relative; overflow:hidden; }
.ripple{
  position:absolute; border-radius:50%; transform:scale(0);
  background:currentColor; opacity:.35; pointer-events:none;
  animation:rippleAnim 650ms ease-out;
}
@keyframes rippleAnim{ to{ transform:scale(3); opacity:0; } }

/* Tilt-ready surfaces */
.card,.tier{ transform-style:preserve-3d; will-change:transform; }

/* Magnetic buttons prep */
.btn-gold,.btn-primary,.icon-btn{ will-change:transform; }

/* Fan Carousel */
.fan-carousel{ margin-top:44px; position:relative; overflow:hidden; padding:20px 0 40px; }
.fan-stage{
  position:relative; height:490px; max-width:1080px; margin:0 auto;
}
.fan-card{
  position:absolute; top:0; left:50%; width:290px; height:430px; margin-left:-145px;
  border-radius:var(--radius-md); overflow:hidden; cursor:pointer;
  background:var(--color-surface); border:1px solid var(--color-border);
  box-shadow:0 24px 50px -30px rgba(0,0,0,.45);
  transition:transform 650ms cubic-bezier(.22,.61,.36,1), opacity 500ms ease, box-shadow 400ms ease, border-color 400ms ease;
  user-select:none;
}
.fan-card .art{ height:56%; position:relative; }
.fan-card .art img{ width:100%; height:100%; object-fit:cover; display:block; }
.fan-card-body{ padding:20px; display:flex; flex-direction:column; justify-content:space-between; height:44%; }
.fan-card-body h3{ font-size:1.18rem; margin:6px 0 8px; line-height:1.25; }
.fan-card-body p{ font-size:0.8rem; color:var(--color-muted); line-height:1.4; display:-webkit-box;  -webkit-box-orient:vertical; overflow:hidden; }
.fan-card.is-active{ box-shadow:0 30px 60px -20px rgba(176,138,78,0.35); border-color:var(--color-gold); }
.fan-controls{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:36px; position:relative; z-index:10; }
.fan-dots{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.fan-dot{ width:8px; height:8px; border-radius:50%; border:none; background:var(--color-border); padding:0; transition:all var(--transition); cursor:pointer; }
.fan-dot.active{ background:var(--color-gold); width:28px; border-radius:6px; }

@media (max-width:1024px){
  .fan-stage{ height:440px; }
  .fan-card{ width:260px; height:390px; margin-left:-130px; }
}

@media (max-width:720px){
  .fan-stage{ height:380px; }
  .fan-card{ width:220px; height:340px; margin-left:-110px; }
  .fan-card-body{ padding:14px; }
  .fan-card-body h3{ font-size:1.05rem; }
  .fan-card-body p{ font-size:0.75rem; }
  .fan-card .art{ height:52%; }
}

@media (max-width:480px){
  .fan-stage{ height:350px; }
  .fan-card{ width:190px; height:320px; margin-left:-95px; }
}

/* =========================================================
   AUTH / LOGIN TABS
   ========================================================= */
.auth-wrap{ max-width:480px; margin:0 auto; }
.auth-tabs{ display:flex; border:1px solid var(--color-border); border-radius:24px; overflow:hidden; margin-bottom:34px; }
.auth-tab{ flex:1; text-align:center; padding:13px; font-size:.82rem; background:transparent; border:none; color:var(--color-ink-soft); transition:all var(--transition); }
.auth-tab.active{ background:var(--color-black); color:#EFE7D6; }
.auth-panel{ display:none; }
.auth-panel.active{ display:block; }

/* =========================================================
   RESPONSIVE BREAKPOINTS (1440px, 1024px, 768px, 480px, 320px)
   ========================================================= */

/* Large Desktop (1440px+) */
@media (min-width: 1440px){
  :root{ --max-width: 1360px; }
  .hero-grid{ grid-template-columns: 1.1fr 0.9fr; gap: 72px; }
}

/* Tablet & Mobile (<= 1024px) */
@media (max-width:1024px){
  :root{ --gutter: 24px; }
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .tiers{ grid-template-columns:1fr; gap:24px; }
  .footer-top{ grid-template-columns:repeat(2, 1fr); gap:32px; }
  .tiles{ grid-template-columns:repeat(2,1fr); }
  table.matrix{ min-width:640px; }
  .form-card{ padding:30px; }
  .hero-float-badge{ left: 0; }
  [dir="rtl"] .hero-float-badge{ right: 0; left: auto; }
}

/* Medium Tablet / Mobile Landscape (<= 768px) */
@media (max-width:768px){
  :root{ --gutter: 20px; }
  .grid-2,.grid-3{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .section{ padding:70px 0; }
  .hero{ padding:36px 0 60px; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:16px; }
  .tiles{ grid-template-columns:1fr; }
  .stat{ padding-right:12px; }
  .hero-stats-bar{ flex-direction:column; padding:20px; gap:16px; }
  .hero-stats-bar .stat{ border-right:none !important; border-bottom:1px solid var(--color-border); padding-bottom:14px; }
  .hero-stats-bar .stat:last-child{ border-bottom:none; padding-bottom:0; }
  .narrative-track{ gap:40px; }
}

/* Mobile Portrait (<= 480px) */
@media (max-width:480px){
  :root{ --gutter: 16px; }
  .form-card{ padding:20px 16px; }
  .hero-actions{ flex-direction:column; align-items:stretch; gap:12px; }
  .hero-actions .btn{ justify-content:center; width:100%; }
  .btn{ padding:14px 20px; width:100%; justify-content:center; }
  .icon-btn, .nav-toggle{ width:40px; height:40px; min-width:40px; min-height:40px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* Small Mobile (<= 320px) */
@media (max-width:320px){
  .brand{ font-size:1.2rem; }
  .brand small{ font-size:0.48rem; letter-spacing:0.16em; }
  .header-actions{ gap:4px; }
  .icon-btn, .nav-toggle{ width:36px; height:36px; min-width:36px; min-height:36px; font-size:0.85rem; }
  .fan-stage{ height:320px; }
  .fan-card{ width:160px; height:290px; margin-left:-80px; }
}

/* =========================================================
   AUTO-GENERATED UTILITY CLASSES
   (extracted from former inline style attributes)
   ========================================================= */
.u1 { align-items:center; }
.u2 { margin-top:18px; }
.u3 { aspect-ratio:4/3; }
.u4 { color:var(--color-gold-dark); font-size:1.3rem; }
.u5 { margin-top:14px; }
.u6 { margin-top:20px; }
.u7 { color:var(--color-gold-light); }
.u8 { color:#C9BFA9; }
.u9 { align-items:flex-start; gap:50px; }
.u10 { display:flex; align-items:flex-start; gap:10px; font-size:.82rem; }
.u11 { width:auto; margin-top:3px; }
.u12 { display:grid; gap:18px; margin:20px 0 30px; }
.u13 { display:flex; gap:14px; }
.u14 { color:var(--color-gold-dark); margin-top:4px; }
.u15 { margin:2px 0 0; }
.u16 { margin-top:24px; }
.u17 { color:var(--color-gold-dark); width:20px; }
.u18 { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.u19 { margin-top:16px; }
.u20 { align-items:flex-start; gap:36px; }
.u21 { display:grid; gap:1px; background:var(--color-border); border:1px solid var(--color-border); margin-top:18px; }
.u22 { background:var(--color-surface); padding:18px 20px; display:flex; justify-content:space-between; }
.u23 { color:#4C7A4C; margin-right:8px; }
.u24 { color:var(--color-gold-dark); margin-right:8px; }
.u25 { color:var(--color-muted); margin-right:8px; }
.u26 { display:flex; gap:16px; align-items:center; }
.u27 { width:64px; height:64px; border-radius:50%; flex:none; }
.u28 { margin:2px 0 0; font-size:.85rem; }
.u29 { padding-top:48px; }
.u30 { max-width:760px; }
.u31 { margin-top:48px; gap:20px; }
.u32 { aspect-ratio:16/10; }
.u33 { max-width:900px; margin:0 auto; }
.u34 { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; border-top:1px solid var(--color-border); padding-top:20px; }
.u35 { margin:0; }
.u36 { padding:110px 0; }
.u37 { align-items:center; gap:40px; }
.u38 { display:grid; gap:1px; background:var(--color-border); border:1px solid var(--color-border); }
.u39 { background:var(--color-surface); padding:22px 24px; }
.u40 { background:var(--color-black); border-color:rgba(239,231,214,.15); display:flex; flex-direction:column; justify-content:center; }
.u41 { color:#F1E9D4; }
.u42 { border-radius:4px; overflow:hidden; box-shadow:var(--shadow-card); }
.u43 { margin-top:32px; }
.u44 { padding:120px 0; text-align:center; position:relative; overflow:hidden; }
.u45 { max-width:760px; margin-top:40px; }
.u46 { padding:70px 0 110px; }
.u47 { margin-bottom:36px; }
.u48 { margin-top:16px; font-size:2.4rem; }
.u49 { display:flex; justify-content:center; gap:8px; margin-top:22px; }
.u50 { font-size:.85rem; }
.u51 { color:var(--color-gold-dark); }
.u52 { margin-top:12px; }
.u53 { font-size:.82rem; }
.u54 { margin:22px 0; display:grid; gap:16px; }
.u55 { display:flex; gap:12px; }
.u56 { color:var(--color-gold-light); margin-top:4px; }
.u57 { color:#C9BFA9; margin:4px 0 0; }
.u58 { margin-top:26px; }
.u59 { margin:24px 0; }
.u60 { gap:16px; }
.u61 { gap:14px; }
.u62 { grid-column:1/-1; }
.u63 { aspect-ratio:16/9; }
.u64 { color:var(--color-gold-dark); font-size:1.4rem; }
.u65 { margin-bottom:6px; }
.u66 { margin-bottom:26px; }
.u67 { margin-top:34px; }
.u68 { display:grid; gap:60px; }
.u69 { max-width:820px; margin:0 auto; }
.u70 { margin-bottom:22px; }

/* =========================================================
   HOMEPAGE TRENDY ENHANCEMENTS (merged from home-trendy.css)
   Originally homepage-only; classes below are also reused on
   other pages (spotlight, glass-card, aurora, flip cards, etc.)
   ========================================================= */

/* ---------------------------------------------------------
   0. Shared helpers
   --------------------------------------------------------- */
.glass-card{
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.14);
}
[data-theme="dark"] .glass-card{ background:rgba(255,255,255,0.04); }
.section--dark .glass-card,
.cta-trendy .glass-card{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.14);
}

/* Spotlight hover glow — JS sets --mx / --my (0-100%) on mousemove */
.spotlight{ position:relative; isolation:isolate; }
.spotlight::before{
  content:"";
  position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit;
  opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(216,185,120,0.22), transparent 65%);
  transition:opacity 320ms ease;
}
.spotlight:hover::before{ opacity:1; }

/* Aurora / mesh gradient background */
.aurora{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.aurora-blob{
  position:absolute; border-radius:50%;
  filter:blur(70px);
  opacity:0.55;
  will-change:transform;
}
.aurora-blob--1{
  width:520px; height:520px; top:-160px; left:-120px;
  background:radial-gradient(circle, var(--color-gold-light), transparent 70%);
  animation:auroraDrift1 22s ease-in-out infinite;
}
.aurora-blob--2{
  width:420px; height:420px; top:10%; right:-140px;
  background:radial-gradient(circle, var(--color-gold), transparent 70%);
  animation:auroraDrift2 26s ease-in-out infinite;
}
.aurora-blob--3{
  width:360px; height:360px; bottom:-160px; left:30%;
  background:radial-gradient(circle, #E8D9B5, transparent 70%);
  animation:auroraDrift3 30s ease-in-out infinite;
}
.aurora-grain{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(28,23,16,0.06) 1px, transparent 1px);
  background-size:3px 3px;
  opacity:0.5;
  mix-blend-mode:multiply;
}
[data-theme="dark"] .aurora-grain{ mix-blend-mode:overlay; opacity:0.25; }
[data-theme="dark"] .aurora-blob{ opacity:0.25; }

@keyframes auroraDrift1{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(60px,40px) scale(1.12); }
}
@keyframes auroraDrift2{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-50px,60px) scale(1.08); }
}
@keyframes auroraDrift3{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(40px,-50px) scale(1.15); }
}
@media (prefers-reduced-motion: reduce){
  .aurora-blob{ animation:none !important; }
}

/* ---------------------------------------------------------
   1. HERO — trendy version
   --------------------------------------------------------- */
.hero--trendy{ position:relative; overflow:hidden; padding-bottom:150px; }
.hero--trendy .hero-grid{ position:relative; z-index:1; }

.eyebrow-chip{
  display:inline-flex; align-items:center;
  padding:8px 16px 8px 14px;
  border:1px solid rgba(176,138,78,0.35);
  border-radius:30px;
  background:rgba(176,138,78,0.08);
}
.eyebrow-chip i{ font-size:0.75em; }

.hero-media{ position:relative; }
.tilt-frame{ transform-style:preserve-3d; will-change:transform; transition:transform 120ms ease-out; }

.hero-float-badge{
  position:absolute; left:-36px; bottom:34px;
  display:flex; align-items:center; gap:14px;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  box-shadow:var(--shadow-card);
  border-radius:16px;
  padding:16px 22px;
  max-width:250px;
  animation:floatY 5s ease-in-out infinite;
}
[dir="rtl"] .hero-float-badge{ left:auto; right:-36px; }
.hero-float-badge i{ font-size:1.4rem; color:var(--color-gold-dark); }
.hero-float-badge b{ display:block; font-family:var(--font-display); font-size:1.3rem; line-height:1.1; }
.hero-float-badge span{ font-size:0.72rem; color:var(--color-muted); }
.hero-float-badge--top{
  left:auto; right:-30px; bottom:auto; top:28px;
  animation-delay:-2.5s;
}
[dir="rtl"] .hero-float-badge--top{ right:auto; left:-30px; }
@keyframes floatY{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}

.hero-stats-float{ position:relative; z-index:1; margin-top:56px; }
.hero-stats-bar{
  display:flex; flex-wrap:wrap;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  box-shadow:var(--shadow-card);
  border-radius:18px;
  padding:30px 8px;
}
.hero-stats-bar .stat{
  flex:1; min-width:150px;
  padding:0 24px;
  border-right:1px solid var(--color-border);
}
[dir="rtl"] .hero-stats-bar .stat{ border-right:none; border-left:1px solid var(--color-border); }
.hero-stats-bar .stat:last-child{ border-right:none; }

.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:30px; height:46px; border-radius:20px;
  border:2px solid var(--color-border);
  background:transparent; z-index:1;
  display:flex; justify-content:center; padding-top:8px;
}
.scroll-cue span{
  width:5px; height:5px; border-radius:50%; background:var(--color-gold);
  animation:scrollCueDot 1.8s ease infinite;
}
@keyframes scrollCueDot{
  0%{ transform:translateY(0); opacity:1; }
  70%{ transform:translateY(16px); opacity:0; }
  100%{ opacity:0; }
}

@media (max-width:720px){
  .hero-float-badge{ display:none; }
  .hero-stats-bar .stat{ min-width:44%; padding:10px 14px; border:none !important; }
  .scroll-cue{ display:none; }
}

/* ---------------------------------------------------------
   2. MARQUEE STRIP
   --------------------------------------------------------- */
.marquee-strip{
  background:var(--color-black);
  color:#EFE7D6;
  overflow:hidden;
  padding:16px 0;
  white-space:nowrap;
  position:relative;
}
.marquee-track{
  display:inline-flex; align-items:center; gap:22px;
  animation:marqueeScroll 32s linear infinite;
  font-family:var(--font-display); font-style:italic; font-size:1.05rem;
  letter-spacing:0.02em;
}
.marquee-track i{ font-size:0.5rem; color:var(--color-gold); }
.marquee-strip:hover .marquee-track{ animation-play-state:paused; }
@keyframes marqueeScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
}

/* ---------------------------------------------------------
   3. BENTO GRID (Five Senses)
   --------------------------------------------------------- */
.bento-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:220px;
  gap:20px;
}
.bento-item{
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  transition:transform 420ms cubic-bezier(.22,.61,.36,1), box-shadow 420ms ease;
}
.bento-item:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); z-index:3; }
.bento-item--wide{ grid-column:span 2; grid-row:span 2; }
.bento-art{ position:absolute; inset:0; }
.bento-art img{ width:100%; height:100%; object-fit:cover; transition:transform 700ms ease; }
.bento-item:hover .bento-art img{ transform:scale(1.08); }
.bento-art::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,17,13,0) 30%, rgba(20,17,13,0.85) 100%);
}
.bento-art--icon{ display:flex; align-items:center; justify-content:center; }
.bento-art--icon i{ font-size:2.6rem; color:rgba(255,255,255,0.28); transition:transform 420ms ease, color 420ms ease; }
.bento-item:hover .bento-art--icon i{ transform:scale(1.15) rotate(-6deg); color:rgba(255,255,255,0.5); }
.bento-copy{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:20px 22px; }
.bento-item--wide .bento-copy{ padding:26px; }
.bento-copy .kicker{ display:block; font-size:0.68rem; letter-spacing:0.12em; color:var(--color-gold-light); margin-bottom:6px; }
.bento-copy h3{ color:#fff; font-size:1.15rem; margin:0 0 4px; }
.bento-item--wide .bento-copy h3{ font-size:1.5rem; }
.bento-copy p{ color:#D9CFB9; font-size:0.85rem; margin:0; max-width:340px; }

@media (max-width:980px){
  .bento-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:200px; }
  .bento-item--wide{ grid-column:span 2; }
}
@media (max-width:560px){
  .bento-grid{ grid-template-columns:1fr; }
  .bento-item--wide{ grid-column:span 1; }
}

/* ---------------------------------------------------------
   4. EDGE DIVIDER (angled section transition)
   --------------------------------------------------------- */
.edge-divider{ position:relative; height:80px; margin-top:-1px; line-height:0; }
.edge-divider svg{ width:100%; height:100%; display:block; }
.edge-divider--to-dark svg path{ fill:var(--color-black); }

/* ---------------------------------------------------------
   5. CONCIERGE ESTIMATOR
   --------------------------------------------------------- */
.estimator-section{ position:relative; }
.estimator-grid{ align-items:stretch; }
.estimator-section .field input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:6px;
  background:linear-gradient(90deg, var(--color-gold) 0%, var(--color-gold) var(--range-pct,50%), rgba(239,231,214,0.18) var(--range-pct,50%));
  outline:none;
}
.estimator-section .field input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:50%;
  background:var(--color-gold-light); border:3px solid var(--color-black);
  cursor:pointer; box-shadow:0 0 0 4px rgba(216,185,120,0.25);
}
.estimator-section .field input[type="range"]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:var(--color-gold-light); border:3px solid var(--color-black);
  cursor:pointer; box-shadow:0 0 0 4px rgba(216,185,120,0.25);
}
.range-scale{ display:flex; justify-content:space-between; font-size:0.72rem; color:#9C927E; margin-top:8px; }

.estimate-card{ position:relative; overflow:hidden; align-items:center; text-align:center; gap:6px; }
.estimate-value{ transition:opacity 200ms ease; }
.estimate-ring{
  width:150px; height:150px; border-radius:50%; margin:18px auto 6px;
  background:conic-gradient(var(--color-gold) var(--ring-pct,32%), rgba(239,231,214,0.12) 0);
  display:flex; align-items:center; justify-content:center;
  transition:background 300ms ease;
}
.estimate-ring::before{
  content:"\2726";
  width:112px; height:112px; border-radius:50%; background:var(--color-black);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-gold-light); font-size:1.8rem;
}

@media (max-width:720px){
  .estimator-grid{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------
   6. PROJECT RIVIERA — interactive frame
   --------------------------------------------------------- */
.riviera-layout{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; }
.riviera-frame{ position:relative; }
.riviera-chip{
  position:absolute;
  background:var(--color-black);
  color:#EFE7D6;
  border:1px solid rgba(216,185,120,0.35);
  border-radius:12px;
  padding:12px 18px;
  box-shadow:0 20px 40px -18px rgba(0,0,0,0.55);
  text-align:center;
  animation:floatY 6s ease-in-out infinite;
}
.riviera-chip b{ display:block; font-family:var(--font-display); color:var(--color-gold-light); font-size:1.3rem; line-height:1.1; }
.riviera-chip span{ font-size:0.66rem; letter-spacing:0.04em; color:#C9BFA9; }
.riviera-chip--1{ top:8%; left:-10%; animation-delay:0s; }
.riviera-chip--2{ bottom:14%; left:-8%; animation-delay:0.6s; }
.riviera-chip--3{ bottom:-6%; right:10%; animation-delay:1.2s; }
[dir="rtl"] .riviera-chip--1,[dir="rtl"] .riviera-chip--2{ left:auto; right:-10%; }
[dir="rtl"] .riviera-chip--3{ right:auto; left:10%; }

.riviera-signature{ margin:18px 0 22px; font-family:var(--font-display); font-style:italic; color:var(--color-gold-dark); }

@media (max-width:980px){
  .riviera-layout{ grid-template-columns:1fr; }
  .riviera-chip{ position:static; display:inline-block; margin:6px 8px 0 0; animation:none; }
}

/* ---------------------------------------------------------
   7. TESTIMONIAL MARQUEE
   --------------------------------------------------------- */
.testimonial-section{ overflow:hidden; }
.testimonial-marquee{
  margin-top:20px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.testimonial-track{
  display:flex; gap:24px; width:max-content;
  animation:marqueeScroll 40s linear infinite;
  padding:6px 0 30px;
}
.testimonial-marquee:hover .testimonial-track{ animation-play-state:paused; }
.testimonial-card{
  width:340px; flex:none;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:26px 26px 22px;
  box-shadow:var(--shadow-card);
}
.testimonial-card img{
  width:44px; height:44px; border-radius:50%; object-fit:cover;
  margin-bottom:14px; border:2px solid var(--color-gold-light);
}
.testimonial-card p{
  font-family:var(--font-display); font-style:italic; font-size:1.02rem;
  color:var(--color-ink); margin-bottom:16px;
}
.testimonial-name{ font-size:0.8rem; font-weight:500; color:var(--color-ink); }
.testimonial-name span{ display:block; font-weight:400; font-size:0.72rem; color:var(--color-muted); margin-top:2px; }

@media (max-width:720px){
  .testimonial-card{ width:270px; }
}

/* ---------------------------------------------------------
   8. CTA — trendy
   --------------------------------------------------------- */
.cta-trendy{ position:relative; overflow:hidden; }
.cta-content{ position:relative; z-index:2; }
.cta-marquee-bg{
  position:absolute; inset:0; z-index:0;
  display:flex; align-items:center;
  overflow:hidden;
  pointer-events:none;
}
.cta-marquee-bg span{
  display:inline-block; white-space:nowrap;
  font-family:var(--font-display); font-weight:600; font-size:8rem;
  color:transparent;
  -webkit-text-stroke:1px rgba(176,138,78,0.18);
  animation:marqueeScroll 26s linear infinite;
}
[data-theme="dark"] .cta-marquee-bg span{ -webkit-text-stroke:1px rgba(216,185,120,0.16); }
.aurora--cta .aurora-blob--1{ top:-200px; left:10%; }
.aurora--cta .aurora-blob--2{ bottom:-200px; right:10%; top:auto; }

@media (max-width:720px){
  .cta-marquee-bg span{ font-size:4.5rem; }
}

/* =========================================================
   NEW SHARED COMPONENTS — used across About/Services/Blog/
   Packages/Vendors/Contact/Login/Dashboard/Client/Admin to
   give each page its own interactive identity (no page reuses
   the same section formula as another).
   ========================================================= */

/* ---------- Story timeline (About) ---------- */
.story-timeline{ position:relative; margin-top:8px; padding-left:44px; }
.story-timeline::before{ content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--color-border); }
.story-point{ position:relative; padding-bottom:52px; }
.story-point:last-child{ padding-bottom:0; }
.story-dot{ position:absolute; left:-44px; top:2px; width:20px; height:20px; border-radius:50%; background:var(--color-surface); border:2px solid var(--color-gold); display:flex; align-items:center; justify-content:center; transition:transform var(--transition), background var(--transition); }
.story-dot::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--color-gold); transition:background var(--transition); }
.story-point.in-view .story-dot{ transform:scale(1.15); background:var(--color-black); }
.story-point.in-view .story-dot::after{ background:var(--color-gold-light); }
.story-year{ font-family:var(--font-display); font-size:1.5rem; color:var(--color-gold-dark); margin-bottom:6px; display:block; font-style:italic; }
.story-point h3{ margin-bottom:8px; }
.story-point p{ max-width:620px; }

/* ---------- Flip cards (About directors / Packages modules / Vendors pillars) ---------- */
.flip-card{ perspective:1600px; height:360px; }
.flip-card-inner{ position:relative; width:100%; height:100%; transition:transform 700ms cubic-bezier(.22,.61,.36,1); transform-style:preserve-3d; }
.flip-card:hover .flip-card-inner,
.flip-card:focus-within .flip-card-inner{ transform:rotateY(180deg); }
.flip-card-front,.flip-card-back{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--color-border);
  display:flex; flex-direction:column;
}
.flip-card-front{ background:var(--color-surface); }
.flip-card-front .art{ height:62%; flex:none; }
.flip-card-front-body{ padding:20px 22px; flex:1; display:flex; flex-direction:column; justify-content:center; }
.flip-card-back{ transform:rotateY(180deg); background:var(--color-black); color:#EFE7D6; padding:30px; justify-content:center; text-align:center; align-items:center; }
.flip-card-back i{ font-size:1.8rem; color:var(--color-gold-light); margin-bottom:14px; }
.flip-card-back h4{ color:#F1E9D4; margin-bottom:10px; }
.flip-card-back p{ color:#C9BFA9; font-size:0.9rem; margin:0; }
.flip-card-hint{ font-size:0.68rem; letter-spacing:0.1em; color:var(--color-muted); margin-top:10px; display:block; }
[data-theme="dark"] .flip-card-front{ background:var(--color-surface); }

/* Small flip cards (module tiles) */
.flip-card--sm{ height:260px; }
.flip-card--sm .flip-card-front{ align-items:center; justify-content:center; text-align:center; padding:26px; }
.flip-card--sm .flip-card-front i{ font-size:1.7rem; color:var(--color-gold-dark); margin-bottom:14px; }

@media (max-width:720px){
  .flip-card,.flip-card-inner{ height:auto; perspective:none; }
  .flip-card:hover .flip-card-inner,.flip-card:focus-within .flip-card-inner{ transform:none; }
  .flip-card-front,.flip-card-back{ position:static; backface-visibility:visible; }
  .flip-card-back{ transform:none; border-top:none; }
}

/* ---------- Accordion (Packages FAQ / Vendors criteria) ---------- */
.accordion{ border-top:1px solid var(--color-border); max-width:840px; }
.accordion-item{ border-bottom:1px solid var(--color-border); }
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 4px; background:none; border:none; text-align:left;
  font-family:var(--font-display); font-size:1.2rem; color:var(--color-ink);
}
[dir="rtl"] .accordion-trigger{ text-align:right; }
.accordion-trigger .accordion-num{ font-family:var(--font-body); font-size:0.72rem; color:var(--color-gold-dark); letter-spacing:0.1em; margin-right:14px; }
[dir="rtl"] .accordion-trigger .accordion-num{ margin-right:0; margin-left:14px; }
.accordion-trigger i{ transition:transform var(--transition); color:var(--color-gold-dark); flex:none; }
.accordion-item.open .accordion-trigger i{ transform:rotate(45deg); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height 420ms cubic-bezier(.22,.61,.36,1); }
.accordion-item.open .accordion-panel{ max-height:420px; }
.accordion-panel-inner{ padding:0 4px 26px; max-width:680px; }
.accordion-panel-inner p{ margin:0; }

/* ---------- Masonry / gallery grid (Themes gallery) ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:160px; gap:20px; }
.gallery-item{ position:relative; grid-row:span 2; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--color-border); transition:transform 420ms cubic-bezier(.22,.61,.36,1), box-shadow 420ms ease; }
.gallery-item--tall{ grid-row:span 3; }
.gallery-item:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); z-index:2; }
.gallery-item .art{ position:absolute; inset:0; }
.gallery-item .art::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,17,13,0) 40%,rgba(20,17,13,0.88) 100%); }
.gallery-copy{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:20px 22px; transform:translateY(14px); opacity:0.92; transition:transform var(--transition); }
.gallery-item:hover .gallery-copy{ transform:translateY(0); }
.gallery-copy .kicker{ display:block; font-size:0.66rem; letter-spacing:0.12em; color:var(--color-gold-light); margin-bottom:6px; }
.gallery-copy h3{ color:#fff; font-size:1.15rem; margin:0 0 4px; }
.gallery-copy p{ color:#D9CFB9; font-size:0.82rem; margin:0; max-height:0; overflow:hidden; transition:max-height 380ms ease; }
.gallery-item:hover .gallery-copy p{ max-height:80px; }
.gallery-meta{ display:flex; gap:14px; margin-top:8px; font-size:0.72rem; color:#B9AF98; }

@media (max-width:980px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .gallery-grid{ grid-template-columns:1fr; grid-auto-rows:220px; }
  .gallery-item,.gallery-item--tall{ grid-row:span 1; }
  .gallery-copy p{ max-height:80px; }
}

/* ---------- Sticky-scroll narrative (Services) ---------- */
.narrative{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:64px; align-items:start; }
.narrative-visual{ position:sticky; top:112px; }
.narrative-visual .frame{ aspect-ratio:4/5; }
.narrative-visual-badges{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.narrative-badge{ font-size:0.7rem; letter-spacing:0.06em; padding:6px 12px; border-radius:20px; border:1px solid var(--color-border); color:var(--color-muted); transition:all var(--transition); }
.narrative-badge.is-active{ background:var(--color-black); color:#EFE7D6; border-color:var(--color-black); }
.narrative-track{ display:flex; flex-direction:column; gap:96px; }
.narrative-step{ opacity:0.32; transition:opacity 500ms ease; scroll-margin-top:120px; }
.narrative-step.is-active{ opacity:1; }
.narrative-step .stat{ padding-right:20px; }

@media (max-width:980px){
  .narrative{ grid-template-columns:1fr; }
  .narrative-visual{ position:static; margin-bottom:8px; }
  .narrative-track{ gap:56px; }
  .narrative-step{ opacity:1; }
}

/* ---------- Multi-step form (Contact concierge intake) ---------- */
.form-stepper{ display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:40px; max-width:520px; margin-left:auto; margin-right:auto; }
.form-stepper .step-node{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; position:relative; }
.form-stepper .step-node .num{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--color-border);
  display:flex; align-items:center; justify-content:center; font-size:0.85rem; color:var(--color-muted);
  background:var(--color-surface); transition:all var(--transition); position:relative; z-index:1;
}
.form-stepper .step-node .label{ font-size:0.7rem; letter-spacing:0.05em; color:var(--color-muted); text-align:center; }
.form-stepper .step-node::before{
  content:""; position:absolute; top:17px; left:-50%; width:100%; height:1px; background:var(--color-border); z-index:0;
}
.form-stepper .step-node:first-child::before{ display:none; }
.form-stepper .step-node.is-active .num,
.form-stepper .step-node.is-done .num{ background:var(--color-black); border-color:var(--color-black); color:#EFE7D6; }
.form-stepper .step-node.is-active .label,
.form-stepper .step-node.is-done .label{ color:var(--color-ink); }
.form-stepper .step-node.is-done::before,
.form-stepper .step-node.is-active::before{ background:var(--color-gold); }

.form-panel{ display:none; }
.form-panel.active{ display:block; }
.form-panel-nav{ display:flex; justify-content:space-between; gap:16px; margin-top:8px; }
.form-panel-nav .btn{ flex:1; }

/* ---------- Password visibility toggle (Login) ---------- */
.field-with-icon{ position:relative; }
.field-with-icon input{ padding-right:46px; }
[dir="rtl"] .field-with-icon input{ padding-right:16px; padding-left:46px; }
.field-toggle-visibility{
  position:absolute; right:14px; top:38px; background:none; border:none; color:var(--color-muted); font-size:0.9rem;
}
[dir="rtl"] .field-toggle-visibility{ right:auto; left:14px; }

/* ---------- Trust strip (Login) ---------- */
.trust-strip{ display:flex; flex-wrap:wrap; gap:22px; margin-top:28px; }
.trust-strip span{ display:flex; align-items:center; gap:8px; font-size:0.78rem; color:var(--color-muted); }
.trust-strip i{ color:var(--color-gold-dark); }

/* ---------- Toast notifications ---------- */
.toast-stack{ position:fixed; bottom:26px; right:26px; z-index:10050; display:flex; flex-direction:column; gap:10px; max-width:330px; }
[dir="rtl"] .toast-stack{ right:auto; left:26px; }
.toast{
  background:var(--color-black); color:#EFE7D6; padding:15px 20px; border-radius:10px;
  box-shadow:0 20px 40px -18px rgba(0,0,0,0.55); font-size:0.85rem; line-height:1.4;
  border:1px solid rgba(216,185,120,0.3); display:flex; align-items:flex-start; gap:10px;
  transform:translateY(16px); opacity:0; transition:transform 320ms ease, opacity 320ms ease;
}
.toast.show{ transform:translateY(0); opacity:1; }
.toast i{ color:var(--color-gold-light); margin-top:2px; }
@media (max-width:560px){
  .toast-stack{ left:16px; right:16px; max-width:none; }
  [dir="rtl"] .toast-stack{ left:16px; right:16px; }
}

/* ---------- Progress bars (Dashboards) ---------- */
.progress{ height:8px; border-radius:20px; background:var(--color-border); overflow:hidden; }
.progress-fill{
  display:block; height:100%; border-radius:20px; width:0;
  background:linear-gradient(90deg,var(--color-gold),var(--color-gold-light));
  transition:width 1.1s cubic-bezier(.22,.61,.36,1);
}
.bar-label{ display:flex; justify-content:space-between; font-size:0.78rem; color:var(--color-ink-soft); margin-bottom:8px; }

/* ---------- Pills / status chips ---------- */
.pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; font-size:0.68rem; letter-spacing:0.05em; font-weight:500; white-space:nowrap; }
.pill-success{ background:rgba(76,122,76,0.12); color:#3E6B3E; border:1px solid rgba(76,122,76,0.3); }
.pill-warning{ background:rgba(176,138,78,0.14); color:var(--color-gold-dark); border:1px solid rgba(176,138,78,0.32); }
.pill-info{ background:rgba(95,122,140,0.14); color:#4C6A7A; border:1px solid rgba(95,122,140,0.3); }
[data-theme="dark"] .pill-success{ color:#9AD39A; }
[data-theme="dark"] .pill-info{ color:#9FC2D6; }

/* ---------- App shell: simplified header row + sticky section tabs ---------- */
.app-header-row{ gap:14px; }
.dash-tabs{
  position:sticky; top:84px; z-index:900;
  background:rgba(247,242,233,0.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-border);
  overflow:hidden;
}
[data-theme="dark"] .dash-tabs{ background:rgba(17,16,8,0.92); }
.dash-tabs-row{ display:flex; align-items:center; justify-content:space-between; height:58px; gap:16px; overflow-x:auto; }
.dash-tabs-list{ display:flex; gap:4px; }
.dash-tab{ padding:10px 16px; font-size:0.8rem; color:var(--color-ink-soft); border-radius:20px; white-space:nowrap; transition:all var(--transition); }
.dash-tab.active,.dash-tab:hover{ background:var(--color-black); color:#EFE7D6; }
.dash-meta{ font-size:0.76rem; color:var(--color-muted); white-space:nowrap; display:flex; align-items:center; gap:8px; }

/* ---------- Dashboard hero ---------- */
.dash-hero{ padding:56px 0 44px; border-bottom:1px solid var(--color-border); }
.dash-hero-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:40px; }
.dash-title{ margin-bottom:6px !important; }
.dash-subtitle{ color:var(--color-ink-soft); margin:0; max-width:560px; }
.dash-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.countdown-label{ font-size:0.7rem; letter-spacing:0.1em; color:var(--color-muted); text-align:right; margin-bottom:8px; }
[dir="rtl"] .countdown-label{ text-align:left; }
.countdown{ display:flex; gap:10px; }
.countdown-unit{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; padding:10px 14px; text-align:center; min-width:58px; }
.countdown-unit b{ display:block; font-family:var(--font-display); font-size:1.4rem; color:var(--color-gold-dark); }
.countdown-unit span{ font-size:0.62rem; color:var(--color-muted); letter-spacing:0.05em; }

.dash-section{ padding:64px 0; border-bottom:1px solid var(--color-border); }
.dash-section:last-of-type{ border-bottom:none; }
.dash-section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:36px; }

/* ---------- Metric grid ---------- */
.metric-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--color-border); border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; }
.metric-card{ background:var(--color-surface); padding:26px 24px; transition:background var(--transition); }
.metric-card:hover{ background:var(--color-surface-2); }
.metric-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.metric-label{ font-size:0.72rem; letter-spacing:0.06em; color:var(--color-muted); max-width:140px; line-height:1.4; }
.metric-icon{ color:var(--color-gold-dark); font-size:1.1rem; }
.metric-value{ font-family:var(--font-display); font-size:1.5rem; margin-bottom:4px; }
.metric-sub{ font-size:0.76rem; color:var(--color-muted); margin:0; }
.ledger-summary{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:36px; }
.ledger-summary .metric-card{ border:1px solid var(--color-border); border-radius:var(--radius-md); }

@media (max-width:1024px){
  .metric-grid{ grid-template-columns:repeat(2,1fr); }
  .ledger-summary{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .metric-grid{ grid-template-columns:1fr; }
}

/* ---------- Theme swatch selector (Client scenography) ---------- */
.swatch-row{ display:flex; gap:16px; margin:14px 0 18px; }
.swatch-item{ display:flex; align-items:center; gap:7px; font-size:0.76rem; color:var(--color-muted); }
.swatch-dot{ width:14px; height:14px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,0.1); }
.swatch-gold{ background:var(--color-gold); } .swatch-bronze{ background:#8C6B36; }
.swatch-alabaster{ background:#EDE3CE; } .swatch-emerald{ background:#4C7A5C; }
.swatch-obsidian{ background:#232019; } .swatch-rosegold{ background:#C79E8C; }
.theme-card-foot{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; border-top:1px solid var(--color-border); padding-top:16px; margin-top:6px; }
.theme-card.is-selected{ border-color:var(--color-gold); box-shadow:var(--shadow-card); }
.theme-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-bottom:36px; }
@media (max-width:980px){ .theme-grid{ grid-template-columns:1fr; } }

.console-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:28px 30px; margin-top:12px; }
.console-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:720px){ .console-grid{ grid-template-columns:1fr; } }

/* ---------- Vendor / gala cards (Client & Admin) ---------- */
.vendor-grid,.gala-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.vendor-card,.gala-card{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md);
  padding:26px 28px; transition:transform var(--transition), box-shadow var(--transition);
}
.vendor-card:hover,.gala-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
.vendor-top,.gala-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:12px; }
.vendor-cat{ display:block; font-size:0.68rem; letter-spacing:0.1em; color:var(--color-gold-dark); margin-bottom:6px; }
.vendor-name,.gala-name{ font-size:1.15rem; margin:0; }
.vendor-desc{ font-size:0.88rem; color:var(--color-ink-soft); margin-bottom:14px; }
.tag-row{ display:flex; gap:16px; flex-wrap:wrap; font-size:0.76rem; color:var(--color-muted); margin-bottom:16px; }
.tag-row i{ color:var(--color-gold-dark); margin-right:5px; }
.vendor-foot,.gala-foot{ display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid var(--color-border); padding-top:16px; flex-wrap:wrap; }
.vendor-price,.gala-price{ font-family:var(--font-display); font-size:1.2rem; color:var(--color-gold-dark); }
.gala-meta{ display:flex; gap:22px; margin-bottom:16px; flex-wrap:wrap; }
.gala-meta span{ display:flex; flex-direction:column; font-size:0.72rem; color:var(--color-muted); }
.gala-meta b{ font-family:var(--font-display); font-size:1rem; color:var(--color-ink); font-weight:500; }
@media (max-width:900px){
  .vendor-grid,.gala-grid{ grid-template-columns:1fr; }
  .vendor-card,.gala-card{ min-width:0; }
  .vendor-top,.gala-top{ flex-wrap:wrap; }
}

/* ---------- Day tabs + timeline (Client run of show) ---------- */
.day-tabs{ display:flex; gap:8px; margin-bottom:28px; flex-wrap:wrap; }
.day-tab{ padding:10px 18px; border:1px solid var(--color-border); border-radius:24px; font-size:0.8rem; color:var(--color-ink-soft); background:transparent; transition:all var(--transition); }
.day-tab.active{ background:var(--color-black); color:#EFE7D6; border-color:var(--color-black); }
.timeline{ position:relative; padding-left:24px; }
.timeline::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--color-border); }
.timeline-item{ position:relative; display:flex; gap:22px; align-items:flex-start; padding-bottom:30px; flex-wrap:wrap; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{ content:""; position:absolute; left:-24px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--color-gold); border:2px solid var(--color-surface); box-shadow:0 0 0 1px var(--color-gold); }
.timeline-time{ font-family:var(--font-display); font-size:0.95rem; color:var(--color-gold-dark); min-width:88px; flex:none; }
.timeline-body{ flex:1; min-width:220px; }
.timeline-body h4{ font-size:1rem; margin-bottom:4px; }
.timeline-body p{ font-size:0.86rem; margin:0; }
.timeline-tag{ flex:none; }

/* ---------- Director / lead card ---------- */
.director-card{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:26px 30px; }
.director-info{ display:flex; align-items:center; gap:18px; }
.director-avatar{ width:64px; height:64px; border-radius:50%; flex:none; }
.director-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- Curtain / readiness card (Admin) ---------- */
.curtain-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:28px 30px; }
.curtain-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:22px; margin-bottom:20px; }
.ready-ring{
  width:88px; height:88px; border-radius:50%; flex:none;
  background:conic-gradient(var(--color-gold) 94%, var(--color-border) 0);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
}
.ready-ring::before{ content:""; position:absolute; }
.ready-ring b{ font-family:var(--font-display); font-size:1.15rem; }
.ready-ring span{ font-size:0.6rem; color:var(--color-muted); }
.curtain-checks{ display:flex; gap:20px; flex-wrap:wrap; font-size:0.82rem; color:var(--color-ink-soft); margin-bottom:18px; }
.curtain-checks i{ color:#4C7A4C; margin-right:6px; }

/* ---------- Telemetry list (Admin) ---------- */
.telemetry-list{ display:flex; flex-direction:column; gap:1px; background:var(--color-border); border:1px solid var(--color-border); border-radius:var(--radius-sm); overflow:hidden; }
.telemetry-row{ background:var(--color-surface); padding:14px 18px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.telemetry-place{ font-size:0.88rem; color:var(--color-ink); flex:1; min-width:140px; }
.telemetry-place small{ display:block; color:var(--color-muted); font-size:0.72rem; font-weight:400; }
.telemetry-temp{ font-family:var(--font-display); font-size:1.2rem; color:var(--color-gold-dark); }
.telemetry-note{ font-size:0.74rem; color:var(--color-muted); flex:1; text-align:right; min-width:180px; }
[dir="rtl"] .telemetry-note{ text-align:left; }

/* ---------- Comms feed (Admin) ---------- */
.comms-feed{ display:flex; flex-direction:column; gap:16px; margin-bottom:28px; }
.comms-msg{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:20px 24px; }
.comms-msg-head{ display:flex; justify-content:space-between; margin-bottom:8px; font-size:0.85rem; }
.comms-msg-head span{ color:var(--color-muted); font-size:0.76rem; }
.comms-msg p{ margin:0 0 12px; font-size:0.9rem; }

/* ---------- Seal strip (Admin) ---------- */
.seal-strip{ display:flex; align-items:center; gap:26px; background:var(--color-black); color:#EFE7D6; border-radius:var(--radius-md); padding:30px 34px; flex-wrap:wrap; }
.seal-strip > i{ font-size:2rem; color:var(--color-gold-light); flex:none; }
.seal-strip strong{ display:block; color:#F1E9D4; margin-bottom:4px; }
.seal-strip p{ color:#B9AF98 !important; margin:0; max-width:480px; }
.seal-cols{ display:flex; gap:30px; margin-left:auto; flex-wrap:wrap; }
[dir="rtl"] .seal-cols{ margin-left:0; margin-right:auto; }
.seal-col{ font-size:0.78rem; color:#B9AF98; }
.seal-col b{ display:block; color:#F1E9D4; font-family:var(--font-display); font-size:0.95rem; margin-bottom:2px; }

/* ---------- Dashboard Interactive Controls & Sliders ---------- */
.range-slider-group{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.range-slider-header{ display:flex; justify-content:space-between; font-size:0.78rem; font-weight:500; color:var(--color-ink-soft); }
.range-slider-val{ color:var(--color-gold-dark); font-family:var(--font-display); font-weight:600; }
.slider-control{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:3px;
  background:var(--color-border); outline:none; cursor:pointer; transition:background var(--transition);
}
.slider-control::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--color-gold-dark); border:2px solid var(--color-surface); box-shadow:0 2px 6px rgba(0,0,0,0.25); cursor:pointer;
}
.slider-control::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--color-gold-dark); border:2px solid var(--color-surface); box-shadow:0 2px 6px rgba(0,0,0,0.25); cursor:pointer;
}

/* Modal dialog container */
.dash-modal-overlay{
  position:fixed; inset:0; z-index:10000; background:rgba(15,13,8,0.75); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden;
  transition:all 300ms ease;
}
.dash-modal-overlay.active{ opacity:1; visibility:visible; }
.dash-modal-content{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); width:100%; max-width:540px; padding:32px; transform:scale(0.95); transition:transform 300ms ease;
}
.dash-modal-overlay.active .dash-modal-content{ transform:scale(1); }
.dash-modal-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; border-bottom:1px solid var(--color-border); padding-bottom:14px; }
.dash-modal-header h3{ margin:0; font-size:1.25rem; }
.dash-modal-close{ background:transparent; border:none; font-size:1.2rem; color:var(--color-muted); cursor:pointer; transition:color var(--transition); }
.dash-modal-close:hover{ color:var(--color-ink); }

@media (prefers-reduced-motion: reduce){
  .flip-card-inner{ transition:none !important; }
  .toast{ transition:none !important; }
}

/* ---------- Small helpers used by page rewrites ---------- */
.above-aurora{ position:relative; z-index:1; }
.quote-block--center{ text-align:center; border:none; padding:0; max-width:760px; margin:0 auto; }
[dir="rtl"] .quote-block--center{ border:none; padding:0; }
.signature-line{ color:var(--color-gold-light); }

/* =========================================================
   CLIENT DASHBOARD — client.html only
   ========================================================= */
.client-dashboard{ background:#f3efe7; }
.client-dashboard > .dash-hero,
.client-dashboard > .dash-section{ display:none; }
.client-dashboard-shell{ max-width:1240px; margin:0 auto; padding:48px 32px 96px; }
.client-dashboard-welcome{ display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:30px; }
.client-dashboard-welcome h1{ font-size:clamp(2.3rem,4vw,4rem); margin-bottom:8px; }
.client-dashboard-welcome p{ margin:0; color:var(--color-muted); }
.client-dashboard-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end; }
.client-live-status{ color:#3e6b3e; font-size:.76rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.client-live-status i{ font-size:.48rem; vertical-align:middle; margin-right:5px; }
.client-metric-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--color-border); border:1px solid var(--color-border); border-radius:6px; overflow:hidden; margin-bottom:54px; box-shadow:0 12px 28px rgba(28,23,16,.06); }
.client-metric-card{ display:flex; align-items:flex-start; gap:14px; min-width:0; padding:22px 20px; background:var(--color-surface); }
.client-metric-card--accent{ background:#201d17; color:#f8f0df; }
.client-metric-card--accent .client-metric-label,.client-metric-card--accent small{ color:#b9af98; }
.client-metric-icon{ width:34px; height:34px; flex:none; display:grid; place-items:center; border:1px solid var(--color-border); border-radius:50%; color:var(--color-gold-dark); }
.client-metric-card--accent .client-metric-icon{ border-color:#6d5731; color:var(--color-gold-light); }
.client-metric-label,.client-metric-card small{ display:block; color:var(--color-muted); font-size:.7rem; letter-spacing:.05em; }
.client-metric-card strong{ display:block; margin:4px 0 2px; font-family:var(--font-display); font-size:1.25rem; line-height:1.12; font-weight:600; }
.client-dashboard-section{ padding:0 0 58px; margin-bottom:56px; border-bottom:1px solid var(--color-border); scroll-margin-top:150px; }
.client-section-heading{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.client-section-heading h2{ margin:0; font-size:clamp(1.8rem,3vw,2.65rem); }
.client-section-heading p,.client-section-note{ margin:0 0 5px; color:var(--color-muted); font-size:.82rem; }
.client-section-note i{ color:var(--color-gold-dark); margin-right:5px; }
.client-theme-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.client-theme-card{ min-width:0; overflow:hidden; background:var(--color-surface); border:1px solid var(--color-border); border-radius:5px; transition:transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease; }
.client-theme-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
.client-theme-card.is-selected{ border-color:var(--color-gold); box-shadow:0 0 0 2px rgba(176,138,78,.12), var(--shadow-card); }
.client-theme-image{ height:170px; overflow:hidden; background:var(--color-surface-2); }
.client-theme-image img{ width:100%; height:100%; object-fit:cover; transition:transform 500ms ease; }
.client-theme-card:hover .client-theme-image img{ transform:scale(1.04); }
.client-theme-content{ padding:18px 20px 20px; }
.client-theme-top{ display:flex; justify-content:space-between; align-items:center; min-height:24px; margin-bottom:12px; }
.client-theme-number{ color:var(--color-gold-dark); font-family:var(--font-display); font-size:1.2rem; }
.client-theme-content h3{ font-size:1.35rem; margin-bottom:8px; }
.client-theme-content p{ min-height:52px; font-size:.84rem; line-height:1.55; margin-bottom:18px; }
.client-theme-content .btn{ width:auto; }
.client-panel{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:5px; box-shadow:0 12px 28px rgba(28,23,16,.05); }
.client-table-panel{ overflow:hidden; }
.client-table-scroll{ overflow-x:auto; }
.client-data-table{ width:100%; min-width:760px; border-collapse:collapse; text-align:left; }
.client-data-table th{ padding:14px 18px; background:#211e18; color:#efe7d6; font:500 .72rem var(--font-body); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.client-data-table td{ padding:16px 18px; border-bottom:1px solid var(--color-border); color:var(--color-ink-soft); font-size:.82rem; white-space:nowrap; }
.client-data-table tr:last-child td{ border-bottom:none; }
.client-data-table td:first-child{ color:var(--color-ink); }
.client-data-table td strong,.client-data-table td small{ display:block; }
.client-data-table td small{ color:var(--color-muted); font-size:.72rem; margin-top:3px; }
.client-status{ display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:20px; font-size:.69rem; font-weight:600; white-space:nowrap; }
.client-status--confirmed,.client-status--paid,.client-status--completed{ color:#3e6b3e; background:rgba(76,122,76,.12); border:1px solid rgba(76,122,76,.25); }
.client-status--pending{ color:#8c6b36; background:rgba(176,138,78,.14); border:1px solid rgba(176,138,78,.3); }
.client-status--progress{ color:#4c6a7a; background:rgba(95,122,140,.14); border:1px solid rgba(95,122,140,.3); }
.client-status i{ font-size:.7rem; }
.client-timeline-panel{ padding:30px 34px; }
.client-stepper{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.client-stepper::before{ content:""; position:absolute; top:18px; left:7%; right:7%; height:1px; background:var(--color-border); }
.client-step{ position:relative; z-index:1; padding-right:24px; }
.client-step:last-child{ padding-right:0; }
.client-step-marker{ width:36px; height:36px; display:grid; place-items:center; margin-bottom:16px; border:1px solid var(--color-border); border-radius:50%; background:var(--color-surface); color:var(--color-muted); font-size:.8rem; }
.client-step.is-complete .client-step-marker{ background:#3e6b3e; border-color:#3e6b3e; color:#fff; }
.client-step.is-current .client-step-marker{ background:var(--color-gold); border-color:var(--color-gold); color:var(--color-ink); box-shadow:0 0 0 5px rgba(176,138,78,.14); }
.client-step small{ display:block; color:var(--color-gold-dark); font-size:.7rem; letter-spacing:.05em; margin-bottom:5px; }
.client-step strong{ display:block; font-family:var(--font-display); font-size:1.12rem; font-weight:600; }
.client-step p{ margin:5px 0 0; color:var(--color-muted); font-size:.78rem; line-height:1.5; }
.client-payment-summary{ display:grid; grid-template-columns:repeat(3,1fr) 1.4fr; align-items:center; gap:18px; padding:20px 22px; margin-bottom:18px; background:#211e18; border-radius:5px; color:#efe7d6; }
.client-payment-summary span{ display:block; color:#b9af98; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; }
.client-payment-summary strong{ display:block; margin-top:5px; font:600 1.35rem var(--font-display); }
.client-progress{ height:7px; overflow:hidden; border-radius:9px; background:#514936; }
.client-progress span{ display:block; width:80%; height:100%; border-radius:inherit; background:var(--color-gold-light); }
.client-invoice-table .icon-btn{ width:34px; height:34px; min-width:34px; min-height:34px; font-size:.75rem; }
@media (max-width:1024px){
  .client-dashboard-shell{ padding:38px 24px 72px; }
  .client-metric-grid{ grid-template-columns:repeat(2,1fr); }
  .client-theme-grid{ grid-template-columns:repeat(2,1fr); }
  .client-theme-card:last-child{ grid-column:span 2; }
  .client-theme-card:last-child .client-theme-image{ height:210px; }
}
@media (max-width:640px){
  .client-dashboard-shell{ padding:28px 16px 56px; }
  .client-dashboard-welcome,.client-section-heading{ align-items:flex-start; flex-direction:column; }
  .client-dashboard-actions{ justify-content:flex-start; }
  .client-metric-grid,.client-theme-grid{ grid-template-columns:1fr; }
  .client-theme-card:last-child{ grid-column:auto; }
  .client-theme-card:last-child .client-theme-image,.client-theme-image{ height:190px; }
  .client-dashboard-section{ margin-bottom:40px; padding-bottom:40px; }
  .client-timeline-panel{ padding:24px 20px; }
  .client-stepper{ display:block; padding-left:4px; }
  .client-stepper::before{ top:18px; bottom:18px; left:21px; right:auto; width:1px; height:auto; }
  .client-step{ display:grid; grid-template-columns:36px 1fr; gap:16px; padding:0 0 26px; }
  .client-step:last-child{ padding-bottom:0; }
  .client-step-marker{ margin:0; }
  .client-payment-summary{ grid-template-columns:repeat(2,1fr); gap:18px; }
  .client-progress{ grid-column:1/-1; }
}

/* Dashboard-only simplified header (admin.html / client.html) */
.dash-header .dash-header-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  gap: 12px;
}
.dash-header-utils{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* keep icons in one row and legible on small screens */
@media (max-width: 480px){
  .dash-header .brand{ font-size: 1.1rem; }
  .dash-header .brand small{ font-size: 0.45rem; letter-spacing: 0.14em; }
  .dash-header-utils .icon-btn{
    width: 38px; height: 38px; min-width: 38px; min-height: 38px;
    font-size: 0.85rem;
  }
  .dash-header-utils{ gap: 6px; }
}

/* Sidebar version of dash-tabs (Admin / Client dashboards) */
.dash-sidebar{
  position: fixed;
  top: 84px; /* matches .site-header height */
  left: 0;
  width: 240px;
  height: calc(100vh - 84px);
  background: var(--color-black);
  border-bottom: none;
  border-right: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 14px;
  overflow-y: auto;
  z-index: 900;
}
.dash-sidebar-list{ display: flex; flex-direction: column; gap: 4px; }
.dash-sidebar .dash-tab{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  color: #C9C0AE;
  white-space: nowrap;
}
.dash-sidebar .dash-tab i{ width: 18px; text-align: center; color: var(--color-gold-light); }
.dash-sidebar .dash-tab:hover{ background: rgba(255,255,255,0.06); color: #fff; }
.dash-sidebar .dash-tab.active{ background: #fff; color: var(--color-black); }
.dash-sidebar .dash-tab.active i{ color: var(--color-black); }
.dash-sidebar .dash-meta{
  font-size: 0.72rem;
  color: var(--color-muted);
  padding: 12px 16px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Push page content beside the sidebar instead of below the old top bar */
body:has(.dash-sidebar) main{
  margin-left: 240px;
}

@media (max-width: 900px){
  .dash-sidebar{
    position: static;
    width: 100%;
    height: auto;
    flex-direction: row;
    overflow-x: auto;
    padding: 12px;
  }
  .dash-sidebar-list{ flex-direction: row; }
  .dash-sidebar .dash-meta{ display: none; }
  body:has(.dash-sidebar) main{ margin-left: 0; }
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-mark{
  height: 34px;
  width: auto;
  flex-shrink: 0;
}
.brand-text{
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

/* footer brand: smaller mark, no tagline row so keep it compact */
.footer-brand .brand-mark{ height: 28px; }

@media (max-width: 480px){
  .brand-mark{ height: 26px; }
}

.stat b{ font-variant-numeric: tabular-nums; }
.zz-item{
  align-items: center;
}