/* ==========================================================================
   home.css — Premium Light / Glass Home
   Ready to copy-paste. Keeps your existing IDs/classes used by JS:
   #visual .slide.active, #cap, #tao .tao-slide.active, #taoCap, #navToggle
   ========================================================================== */

/* ---- Base / Reset ---- */
:root{
  --ink: #141414;
  --muted: rgba(20,20,20,.72);
  --muted2: rgba(20,20,20,.58);
  --line: rgba(20,20,20,.10);
  --line2: rgba(20,20,20,.08);

  --glass: rgba(255,255,255,.62);
  --glass2: rgba(255,255,255,.52);

  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;

  --shadow-1: 0 30px 70px rgba(0,0,0,.10);
  --shadow-2: 0 18px 40px rgba(0,0,0,.10);
  --shadow-3: 0 14px 30px rgba(0,0,0,.08);

  --gold-1: rgba(210,170,95,.95);
  --gold-2: rgba(170,120,50,.92);
}

*{ 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(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width:100%; height:auto; }
a{ color: inherit; }
.wrap{
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
}

/* ---- Page Background (uses your uploads/birkbeck.jpeg) ---- */
/* --- Background image shown normally (no wash-out) --- */
.site--premium{
  background-image: url("/uploads/background.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: #1b1b1b;
}

/* Optional: add a very subtle vignette (premium) WITHOUT whitening the photo */
.site--premium::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(0,0,0,.18), transparent 60%),
    radial-gradient(1200px 700px at 90% 30%, rgba(0,0,0,.14), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.10));
  z-index: 0;
}

/* Ensure your content sits above the vignette overlay */
.header--premium,
.page--premium{
  position: relative;
  z-index: 1;
}

/* A mild fallback if body is missing site--premium for any reason */
.site{
  min-height: 100%;
}

/* ---- Header / Nav (Desktop) ---- */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
}
.header--premium{
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line2);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  padding: 14px 0;
}

.brand{
  display:flex;
  flex-direction:column;
  gap: 2px;
}
.brand__name{
  font-size: 22px;
  letter-spacing: .2px;
  text-decoration:none;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.05;
}
.brand__tag{
  font-size: 12px;
  color: var(--muted2);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* keep old .logo link styles if present */
.logo a{
  text-decoration:none;
  font-weight: 700;
  color: var(--ink);
}

/* nav */
.nav{
  display:flex;
  align-items:center;
  gap: 4px;
}
.nav a{
  text-decoration:none;
  padding: 10px 10px;
  border-radius: 12px;
  color: rgba(20,20,20,.78);
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.nav a:hover{
  background: rgba(255,255,255,.55);
  border-color: var(--line);
}
.nav a.is-active{
  color: #111;
  background: rgba(255,255,255,.75);
  border-color: rgba(20,20,20,.10);
}

/* CTA */
.nav-cta,
.nav-cta--premium{
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2));
  color: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
.nav-cta:hover,
.nav-cta--premium:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
}

/* ---- Burger / Mobile ---- */
.burger{
  display:none;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.55);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  position: relative;
}
.burger i{
  width: 18px;
  height: 2px;
  background: rgba(20,20,20,.80);
  position: relative;
  display:block;
}
.burger i::before,
.burger i::after{
  content:"";
  position:absolute;
  left:0;
  width: 18px;
  height: 2px;
  background: rgba(20,20,20,.80);
}
.burger i::before{ top: -6px; }
.burger i::after{ top: 6px; }

.mobile-panel{
  display:none;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line2);
}
.mobile-inner{
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
  padding: 10px 0 16px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.mobile-panel a{
  text-decoration:none;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.50);
  color: rgba(20,20,20,.80);
}
.mobile-panel a:hover{
  background: rgba(255,255,255,.70);
}

/* checkbox open/close */
#navToggle:checked ~ .mobile-panel{
  display:block;
}

/* ---- Page / Layout ---- */
.page{
  min-height: calc(100vh - 70px);
}
.page--premium{
  padding-bottom: 28px;
}

.layout{
  padding-top: 28px;
  padding-bottom: 38px;
}

/* ---- Buttons (keep compatibility with your existing .btn usage) ---- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(20,20,20,.10);
  background: rgba(255,255,255,.65);
  color: var(--ink);
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
  font-weight: 600;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
.btn.primary{
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2));
  color: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}
.btn.ghost{
  background: transparent;
  border: 1px solid rgba(20,20,20,.14);
}

/* Older “card” class (if any pages still use it) */
.card{
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--glass);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-1);
}

/* ---- Premium Hero Section ---- */
.heroPremium{
  border-radius: var(--radius-lg);
  overflow: clip;
}
.heroPremium__glass{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
  padding: 28px;
  background: var(--glass);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(20,20,20,.10);
  box-shadow: var(--shadow-1), 0 1px 0 rgba(255,255,255,.7) inset;
}
.heroPremium__kicker{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  color: var(--muted);
  font-size: 14px;
}
.wave{ transform: translateY(1px); }
.heroPremium__kicker .dot{ opacity: .5; }

.heroPremium__title{
  margin: 12px 0 10px;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #121212;
}
.heroPremium__titleAccent{
  font-weight: 750;
  background: linear-gradient(90deg, #2a2a2a, #8a6a2d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.heroPremium__lead{
  margin: 10px 0 16px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(20,20,20,.78);
  max-width: 64ch;
}

.heroPremium__chips{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin: 10px 0 18px;
}
.chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(20,20,20,.10);
  color: rgba(20,20,20,.78);
  font-size: 13px;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 6px;
}

/* ---- Portrait Card (uses #visual, .slide, #cap) ---- */
.portraitCard{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(20,20,20,.10);
  box-shadow: var(--shadow-2);
  min-height: 360px;
}

/* slideshow compatibility */
.slide,
.portraitCard__img{
  width:100%;
  height: 420px;
  object-fit: cover;
  display:none;
  transform: scale(1.02);
}
.slide.active{ display:block; }
.portraitCard__img.slide.active{ display:block; }

.portraitCard__shine,
.shine{
  position:absolute;
  inset:-30%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
  pointer-events:none;
}

.portraitCard__caption,
.caption{
  position:absolute;
  left: 14px;
  bottom: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(20,20,20,.08);
  color: rgba(20,20,20,.78);
  font-size: 13px;
}

/* ---- Mini Gallery (uses #tao, .tao-slide, #taoCap) ---- */
.miniGallery{
  margin: 14px 0 0;
  border-radius: var(--radius-md);
  overflow:hidden;
  border: 1px solid rgba(20,20,20,.10);
  background: rgba(255,255,255,.45);
  box-shadow: var(--shadow-3);
}

/* slideshow compatibility */
.tao-slide,
.miniGallery__img{
  width:100%;
  height: 180px;
  object-fit: cover;
  display:none;
}
.tao-slide.active{ display:block; }
.miniGallery__img.tao-slide.active{ display:block; }

.miniGallery__cap,
#taoCap{
  display:block;
  padding: 10px 12px;
  font-size: 13px;
  color: rgba(20,20,20,.75);
  border-top: 1px solid rgba(20,20,20,.08);
  background: rgba(255,255,255,.55);
}

/* ---- Footer ---- */
.foot{
  margin-top: 10px;
}
.foot--premium{
  background: rgba(255,255,255,.45);
  border-top: 1px solid var(--line2);
  backdrop-filter: blur(12px);
}
.foot-inner{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:space-between;
  padding: 18px 0;
  color: rgba(20,20,20,.74);
}
.foot a{
  color: rgba(20,20,20,.78);
  text-decoration:none;
  border-bottom: 1px solid rgba(20,20,20,.18);
}
.foot a:hover{
  border-bottom-color: rgba(20,20,20,.35);
}

/* ---- Accessibility helpers ---- */
:focus-visible{
  outline: 3px solid rgba(170,120,50,.35);
  outline-offset: 3px;
  border-radius: 10px;
}

/* ---- Responsive ---- */
@media (max-width: 980px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .heroPremium__glass{
    grid-template-columns: 1fr;
  }
  .slide, .portraitCard__img{ height: 360px; }
}

@media (max-width: 520px){
  .wrap{ width: min(1100px, calc(100% - 28px)); }
  .brand__name{ font-size: 20px; }
  .brand__tag{ font-size: 11px; }
  .heroPremium__glass{ padding: 18px; }
  .btn{ width: 100%; justify-content:center; }
  .hero-actions{ gap: 8px; }
}

/* If images fail, keep cards premium-looking */
.portraitCard,
.miniGallery{
  position: relative;
}

.portraitCard::before,
.miniGallery::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 300px at 20% 10%, rgba(210,170,95,.18), transparent 55%),
    radial-gradient(600px 300px at 80% 80%, rgba(170,210,255,.20), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35));
  opacity: .9;
  pointer-events:none;
}

/* Only show overlay when image is missing/hidden */
.portraitCard.has-image::before,
.miniGallery.has-image::before{
  display:none;
}

.portraitCard,
.miniGallery{
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
}

/* Hide captions under the images */
#cap,
#taoCap,
.caption,
.miniGallery__cap{
  display: none !important;
}

.site--premium::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(
      rgba(12,18,24,0.65),
      rgba(12,18,24,0.75)
    );
  z-index:-1;
}



/* =========================================================
   PREMIUM FIX PACK — Background, Hero image, Footer position
   Paste at VERY END of /public/css/home.css
   ========================================================= */

/* ---------- 0) Footer always near bottom (layout) ---------- */
html, body { height: 100%; }
body.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page { flex: 1 0 auto; }
.foot { margin-top: auto; }

/* ---------- 1) Background: calm + premium (no competition) ---------- */
/* Kill competing overlays from previous attempts (safe override) */
.site--premium::before,
.site--premium::after,
.page--premium::before,
.page--premium::after{
  content: none !important;
  display: none !important;
}

/* Single background image + a subtle cinematic veil */
body.site--premium{
  background: #0b0f16 url("/uploads/computing.jpg") center/cover no-repeat fixed !important;
  position: relative;
  isolation: isolate;
}

/* One controlled overlay to soften busy patterns */
body.site--premium::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* softening layer */
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(0,0,0,.50), transparent 55%),
    radial-gradient(1000px 600px at 90% 35%, rgba(0,0,0,.40), transparent 60%),
    linear-gradient(180deg, rgba(9,12,18,.62), rgba(9,12,18,.80));

  /* calm the image without killing it */
  backdrop-filter: blur(3px);
}

/* ---------- 2) Hero cards: premium glass ---------- */
.heroCard{
  background: rgba(255,255,255,0.90) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  backdrop-filter: blur(16px) saturate(125%) !important;
  box-shadow:
    0 34px 90px rgba(0,0,0,0.34),
    0 10px 24px rgba(0,0,0,0.18) !important;
}

/* Make the hero area feel “anchored” and less floaty */
.heroPremium{
  padding: 36px 0 24px !important;
}

/* ---------- 3) Main picture (portrait card) improvement ---------- */
.portraitCard{
  overflow: hidden;
  border-radius: 22px !important;
}

/* Better image rendering + more “photographic” tone */
.portraitCard img.slide{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: contrast(1.06) saturate(1.02) brightness(0.98);
}

/* Subtle vignette + top highlight (premium framing) */
.portraitCard::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 450px at 20% 20%, rgba(255,255,255,.20), transparent 55%),
    radial-gradient(900px 650px at 60% 70%, rgba(0,0,0,.22), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.22));
  mix-blend-mode: multiply;
  opacity: .85;
}

/* Optional: if the right image is an illustration, keep it crisp but less “stocky” */
.portraitCard img.slide{
  border-radius: 22px;
}

/* Hide captions completely (clean) */
#cap, #taoCap, .caption, .miniGallery__cap { display:none !important; }

/* ---------- 4) Footer: premium + close to bottom ---------- */
.foot--premium{
  padding: 18px 0 24px !important;
  background: transparent !important;
  border: none !important;
}

.foot--premium .foot-inner{
  width: min(980px, calc(100% - 48px));
  margin: 0 auto;
  padding: 14px 18px;

  border-radius: 16px;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 18px 45px rgba(0,0,0,0.35);
}

.foot--premium .foot-left{
  color: rgba(255,255,255,0.84);
  font-size: 13.5px;
}

.foot--premium .foot-left a{
  color: rgba(255,255,255,0.94);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.22);
}
.foot--premium .foot-left a:hover{
  border-bottom-color: rgba(255,255,255,0.45);
}

/* Mobile: keep footer card clean */
@media (max-width: 720px){
  .foot--premium .foot-inner{
    width: calc(100% - 28px);
  }
}

/* Remove footer completely */
.foot,
.foot--premium{
  display: none !important;
}



/* =========================================================
   LUXURY CLEANUP PATCH (paste at VERY END)
   Goal: calmer background, cleaner type, fewer conflicts
   ========================================================= */

/* 0) Stop hiding the footer (you currently do this at the end) */
.foot,
.foot--premium{
  display: block !important;
}

/* 1) Premium typography defaults (drop-in; adjust fonts if you want) */
:root{
  --bg-veil-1: rgba(8, 10, 14, .55);
  --bg-veil-2: rgba(8, 10, 14, .78);

  --paper: rgba(255,255,255,.78);
  --paper-strong: rgba(255,255,255,.88);

  --stroke: rgba(255,255,255,.16);
  --stroke-soft: rgba(20,20,20,.10);

  --lux-shadow: 0 30px 90px rgba(0,0,0,.35);
  --lux-shadow-soft: 0 14px 40px rgba(0,0,0,.22);

  --radius-xl: 28px;
}

/* optional: if you import fonts, set them here */
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  letter-spacing: -0.01em;
}

.heroPremium__title{
  /* “editorial luxury” headline */
  font-family: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  letter-spacing: -0.02em;
}

/* 2) Background: ONE overlay only (removes the “fighting ::before” problem) */
.site--premium{
  position: relative;
  isolation: isolate;
  background: #07090d url("/uploads/computing.jpg") center/cover no-repeat fixed !important;
}

/* kill earlier overlays safely */
.site--premium::after{ content:none !important; }
.site--premium::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(900px 600px at 80% 30%, rgba(210,170,95,.08), transparent 60%),
    linear-gradient(180deg, var(--bg-veil-1), var(--bg-veil-2));
  backdrop-filter: blur(4px);
}

/* 3) Header: less pill-like, more refined */
.header--premium{
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.nav a{
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,.82);
}
.nav a:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.10);
}
.nav a.is-active{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
}

/* CTA: keep gold but make it more “metal” and less flat */
.nav-cta,
.nav-cta--premium,
.btn.primary{
  background: linear-gradient(180deg, rgba(214,178,104,.98), rgba(166,118,48,.96));
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
}

/* 4) Hero: quieter, more premium glass */
.heroPremium__glass{
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--lux-shadow);
}

/* make text inside hero crisp against dark bg */
.heroPremium__kicker,
.heroPremium__lead,
.chip{
  color: rgba(255,255,255,.78);
}

.heroPremium__title{
  color: rgba(255,255,255,.94);
}
.heroPremium__titleAccent{
  /* less “gradient text”, more subtle warmth */
  background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(214,178,104,.92));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Chips: thinner + less contrast */
.chip{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 500;
}

/* Buttons: make secondary feel premium, not “default UI” */
.btn{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
}
.btn:hover{
  box-shadow: var(--lux-shadow-soft);
}

/* 5) Portrait card: editorial framing */
.portraitCard{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px) saturate(130%);
  box-shadow: var(--lux-shadow-soft);
}

.portraitCard img.slide{
  filter: contrast(1.05) saturate(1.03) brightness(.98);
}

.portraitCard::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 500px at 30% 20%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 700px at 60% 80%, rgba(0,0,0,.30), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.22));
  opacity: .9;
}

/* 6) Footer: luxury “card” */
.foot--premium{
  background: transparent;
  border: none;
}
.foot--premium .foot-inner{
  border-radius: 16px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  color: rgba(255,255,255,.78);
}
.foot--premium .foot-inner a{
  color: rgba(255,255,255,.90);
  border-bottom-color: rgba(255,255,255,.22);
}

/* 7) Motion/accessibility polish */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}
:focus-visible{
  outline: 3px solid rgba(214,178,104,.35);
  outline-offset: 3px;
}



/* =========================================================
   LUXURY TIGHTENING PATCH (paste at VERY END)
   Focus: sharper hierarchy, unified pills, better glass
   ========================================================= */

:root{
  --lux-radius: 22px;
  --lux-pill: 999px;

  --lux-glass: rgba(255,255,255,.12);
  --lux-glass-2: rgba(255,255,255,.08);
  --lux-stroke: rgba(255,255,255,.14);
  --lux-stroke-2: rgba(255,255,255,.10);

  --lux-text: rgba(255,255,255,.92);
  --lux-muted: rgba(255,255,255,.72);
  --lux-dim: rgba(255,255,255,.60);

  --lux-shadow: 0 34px 90px rgba(0,0,0,.38);
  --lux-shadow-soft: 0 14px 40px rgba(0,0,0,.26);
}

/* 1) Hero glass: slightly less blur + more defined edge */
.heroPremium__glass{
  border-radius: calc(var(--lux-radius) + 6px) !important;
  background: var(--lux-glass) !important;
  border: 1px solid var(--lux-stroke) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  box-shadow: var(--lux-shadow) !important;
}

/* Add a “readability wash” ONLY behind left column */
.heroPremium__glass > :first-child{
  position: relative;
}
.heroPremium__glass > :first-child::before{
  content:"";
  position:absolute;
  inset:-10px -10px -10px -10px;
  border-radius: calc(var(--lux-radius) + 8px);
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.34),
    rgba(0,0,0,.18)
  );
  pointer-events:none;
  z-index:0;
}
.heroPremium__glass > :first-child *{
  position: relative;
  z-index: 1;
}

/* 2) Typography contrast: crisp white + calmer muted */
.heroPremium__title{
  color: var(--lux-text) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.heroPremium__lead{
  color: var(--lux-muted) !important;
}
.heroPremium__kicker{
  color: var(--lux-dim) !important;
}

/* Reduce “gradient-y” look: keep warmth but quieter */
.heroPremium__titleAccent{
  background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(214,178,104,.85)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* 3) Unify pills: nav + chips share same visual language */
.chip,
.nav a{
  border-radius: var(--lux-pill) !important;
  background: var(--lux-glass-2) !important;
  border: 1px solid var(--lux-stroke-2) !important;
  color: rgba(255,255,255,.82) !important;
}

/* Nav should be quieter by default */
.nav a{
  padding: 9px 12px !important;
}
.nav a:hover{
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.16) !important;
}
.nav a.is-active{
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.20) !important;
  color: rgba(255,255,255,.95) !important;
}

/* CTA stays gold + slightly more “metal” */
.nav-cta,
.nav-cta--premium,
.btn.primary{
  border-radius: var(--lux-pill) !important;
  background: linear-gradient(180deg, rgba(214,178,104,.98), rgba(166,118,48,.96)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.30) !important;
}

/* 4) Buttons: secondary should feel like premium ghost */
.btn{
  border-radius: var(--lux-pill) !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.88) !important;
}
.btn:hover{
  box-shadow: var(--lux-shadow-soft) !important;
}

/* 5) Portrait card: better framing */
.portraitCard{
  border-radius: calc(var(--lux-radius) + 6px) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.08) !important;
  box-shadow: var(--lux-shadow-soft) !important;
  overflow: hidden !important;
}

/* Inner highlight stroke (expensive “glass edge”) */
.portraitCard::before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: calc(var(--lux-radius) + 2px);
  border: 1px solid rgba(255,255,255,.10);
  pointer-events:none;
  z-index:2;
}

/* Subtle photo vignette */
.portraitCard::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(800px 500px at 30% 20%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 700px at 60% 80%, rgba(0,0,0,.32), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.22));
  opacity: .9;
  z-index:1;
}

/* 6) Footer: quieter, aligned to the premium system */
.foot--premium .foot-inner{
  background: rgba(0,0,0,.22) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(12px) saturate(120%) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.28) !important;
}
.foot--premium .foot-left{
  color: rgba(255,255,255,.72) !important;
}

/* 7) Micro polish: selection + reduce “cheap” transitions */
::selection{
  background: rgba(214,178,104,.28);
}



/* =========================================================
   QUIET LUXURY PATCH — paste at END of home.css
   Keeps your existing classes/IDs intact.
   ========================================================= */

:root{
  --lux-ink: rgba(255,255,255,.92);
  --lux-muted: rgba(255,255,255,.72);
  --lux-dim: rgba(255,255,255,.58);

  --lux-glass: rgba(255,255,255,.12);
  --lux-glass2: rgba(255,255,255,.08);
  --lux-stroke: rgba(255,255,255,.14);
  --lux-stroke2: rgba(255,255,255,.10);

  --lux-radius: 28px;
  --lux-radius2: 22px;

  --lux-shadow: 0 34px 90px rgba(0,0,0,.40);
  --lux-shadow2: 0 16px 44px rgba(0,0,0,.28);

  --lux-gold1: rgba(214,178,104,.98);
  --lux-gold2: rgba(166,118,48,.96);
}

/* ---------- Background overlay: calm + consistent ---------- */
body.site--premium::before{
  /* if you already have this, this gently overrides it */
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(255,255,255,.05), transparent 55%),
    radial-gradient(1000px 600px at 80% 25%, rgba(214,178,104,.07), transparent 60%),
    linear-gradient(180deg, rgba(8,10,14,.55), rgba(8,10,14,.78)) !important;
  backdrop-filter: blur(4px) !important;
}

/* ---------- Header: quieter links, premium CTA ---------- */
.header--premium{
  background: rgba(255,255,255,.08) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
}

.brand__name{ color: rgba(255,255,255,.92) !important; }
.brand__tag{ color: rgba(255,255,255,.60) !important; }

/* Base nav links become “quiet text links” */
.nav a{
  background: transparent !important;
  border: 1px solid transparent !important;
  color: rgba(255,255,255,.78) !important;
  padding: 10px 10px !important;
  border-radius: 12px !important;
}
.nav a:hover{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* Only active nav item gets a pill */
.nav a.is-active{
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
}

/* CTA keeps gold + looks “metal” */
.nav-cta,
.nav-cta--premium{
  background: linear-gradient(180deg, var(--lux-gold1), var(--lux-gold2)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #111 !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.30) !important;
}
.nav-cta:hover{ filter: brightness(1.03); transform: translateY(-1px); }

/* Optional: account group separator (if you add .nav__group wrapper) */
.nav__group{
  display:inline-flex;
  gap:4px;
  margin: 0 6px;
  padding: 0 6px;
  border-left: 1px solid rgba(255,255,255,.10);
  border-right: 1px solid rgba(255,255,255,.10);
}

/* ---------- Hero: sharper + more “editorial” ---------- */
.heroPremium__glass{
  border-radius: var(--lux-radius) !important;
  background: var(--lux-glass) !important;
  border: 1px solid var(--lux-stroke) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  box-shadow: var(--lux-shadow) !important;
}

/* Left column readability wash (key luxury trick) */
.heroPremium__left{
  position: relative;
  border-radius: var(--lux-radius2);
}
.heroPremium__left::before{
  content:"";
  position:absolute;
  inset:-14px -14px -14px -14px;
  border-radius: calc(var(--lux-radius2) + 12px);
  background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.16));
  pointer-events:none;
  z-index:0;
}
.heroPremium__left > *{ position: relative; z-index: 1; }

/* Typography contrast */
.heroPremium__kicker{ color: var(--lux-dim) !important; }
.heroPremium__title{ color: var(--lux-ink) !important; }
.heroPremium__lead{ color: var(--lux-muted) !important; }

.heroPremium__titleAccent{
  background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(214,178,104,.86)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Chips: thinner + calmer */
.chip{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.76) !important;
}

/* Buttons: unify */
.btn{
  border-radius: 999px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.88) !important;
}
.btn.primary{
  background: linear-gradient(180deg, var(--lux-gold1), var(--lux-gold2)) !important;
  color: #111 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}
.btn.ghost{
  background: transparent !important;
  border-color: rgba(255,255,255,.16) !important;
}

/* ---------- Portrait: premium framing ---------- */
.portraitCard{
  border-radius: var(--lux-radius) !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: var(--lux-shadow2) !important;
  overflow: hidden !important;
}

/* Inner highlight stroke */
.portraitCard::before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: calc(var(--lux-radius) - 8px);
  border: 1px solid rgba(255,255,255,.10);
  pointer-events:none;
  z-index: 2;
}

/* Vignette */
.portraitCard::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 30% 18%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 720px at 60% 86%, rgba(0,0,0,.32), transparent 66%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.22));
  opacity:.92;
  z-index: 1;
}

.portraitCard img.slide{
  filter: contrast(1.05) saturate(1.03) brightness(.98);
}

/* ---------- Footer: smaller + quieter ---------- */
.foot--premium .foot-inner{
  background: rgba(0,0,0,.22) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.26) !important;
}
.foot--premium .foot-left{ color: rgba(255,255,255,.70) !important; }

/* =========================================================
   MICRO-LUXURY POLISH (paste at END)
   Focus: reduce bottom fog, add frame discipline, calm pills
   ========================================================= */

/* 1) Reduce the “fog bank” under the left panel */
.heroPremium__left{
  overflow: hidden; /* keeps gradients clean inside */
}

.heroPremium__left::before{
  /* make the wash more subtle and stop it from looking like a blur slab */
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.30),
    rgba(0,0,0,.12)
  ) !important;
  filter: none !important;
}

/* If you have any heavy blur layer on the hero, soften it */
.heroPremium__glass{
  backdrop-filter: blur(14px) saturate(140%) !important;
}

/* 2) Give the whole hero a premium inner stroke (expensive “glass edge”) */
.heroPremium__glass{
  position: relative;
}

.heroPremium__glass::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: calc(var(--radius-lg, 24px) - 6px);
  border: 1px solid rgba(255,255,255,.10);
  pointer-events:none;
}

/* 3) Calm nav pills: slightly smaller + less bubble */
.nav a{
  padding: 9px 10px !important;
  border-radius: 12px !important;
}

.nav a.is-active{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.14) !important;
}

.nav-cta{
  box-shadow: 0 12px 26px rgba(0,0,0,.26) !important;
}

/* 4) Chips: thinner + less dominant */
.chip{
  padding: 7px 11px !important;
  font-size: 12.5px !important;
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* 5) Buttons: add a touch more separation (premium spacing) */
.hero-actions{
  margin-top: 10px !important;
  gap: 12px !important;
}

/* 6) Portrait: slightly more editorial (tiny) */
.portraitCard img.slide{
  filter: contrast(1.06) saturate(1.02) brightness(.98) !important;
}

/* =========================================================
   TEXT READABILITY FIX (hero left)
   Paste at END of home.css
   ========================================================= */

/* 1) Give the left column its own controlled backdrop */
.heroPremium__left{
  position: relative;
  padding: 26px 26px 24px;          /* a touch more breathing room */
  border-radius: 22px;
  overflow: hidden;                /* keeps layers clean */
}

/* 2) This is the key: an “ink wash” that makes type crisp */
.heroPremium__left::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius: 28px;
  pointer-events:none;
  z-index:0;

  /* darker at top where headlines live, lighter near buttons */
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(0,0,0,.52), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.22) 55%, rgba(0,0,0,.10));
}

/* 3) Keep all text above the wash */
.heroPremium__left > *{
  position: relative;
  z-index: 1;
}

/* 4) Reduce “mush” from the overall hero glass blur */
.heroPremium__glass{
  backdrop-filter: blur(12px) saturate(135%) !important;
}

/* 5) Typography: crisp edges + better hierarchy */
.heroPremium__kicker{
  color: rgba(255,255,255,.68) !important;
  letter-spacing: .01em;
}

.heroPremium__title{
  color: rgba(255,255,255,.95) !important;
  line-height: 1.04 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

.heroPremium__titleAccent{
  /* less “milky” gray; more intentional */
  opacity: .92;
  text-shadow: 0 1px 0 rgba(0,0,0,.32);
}

.heroPremium__lead{
  color: rgba(255,255,255,.78) !important;
  line-height: 1.65 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.28);
  max-width: 62ch;
}

/* 6) Chips/buttons: slightly calmer so they don’t crowd the copy */
.heroPremium__chips{
  margin-top: 14px !important;
  gap: 10px !important;
}
.chip{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.78) !important;
  padding: 7px 11px !important;
  font-size: 12.5px !important;
}

.hero-actions{
  margin-top: 12px !important;
  gap: 12px !important;
}

.heroPremium__titleAccent{
  background: linear-gradient(90deg, rgba(255,255,255,.90), rgba(214,178,104,.78)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.heroPremium__lead{ margin-top: 14px !important; }

/* Center the footer card + its contents */
.foot--premium .foot-inner{
  justify-content: center !important;  /* overrides space-between */
  text-align: center;
}

.foot--premium .foot-left{
  width: 100%;
  text-align: center;
}

/* optional: if you keep .foot-right, hide or center it too */
.foot--premium .foot-right{
  display: none; /* remove if you actually use it */
}

/* ===== Footer style like screenshot (centered + social circles) ===== */

.foot--premium{
  background: transparent !important;
  border: none !important;
  padding: 26px 0 34px !important;
}

.foot--premium .foot-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 22px;

  border-radius: 18px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  text-align: center;
}

.foot-left{
  color: rgba(255,255,255,.88);
  font-size: 14px;
}
.foot-left strong{
  font-weight: 700;
}

/* social row */
.foot-social{
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.social-btn{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);

  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.social-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
}

.social-btn svg{
  width: 18px;
  height: 18px;
  fill: rgba(255,255,255,.90);
}

/* mobile breathing room */
@media (max-width: 520px){
  .foot--premium .foot-inner{
    width: calc(100% - 28px);
    margin: 0 auto;
  }
}

/* =========================================================
   PREMIUM MOBILE MENU (glass + dark, matches site)
   Paste at END of home.css
   ========================================================= */

.mobile-panel--premium{
  display: none; /* stays controlled by checkbox rule */
  padding: 12px 0 16px;
  background: rgba(0,0,0,.22);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px) saturate(120%);
}

#navToggle:checked ~ .mobile-panel--premium{
  display: block;
}

.mobile-panel--premium .mobile-inner{
  padding: 12px 0 18px;
  gap: 10px;
}

/* Links as elegant “glass pills” */
.mobile-panel--premium a{
  display: flex;
  align-items: center;
  padding: 14px 14px;
  border-radius: 16px;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.88);

  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.mobile-panel--premium a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.16);
}

/* Optional: highlight Contact subtly */
.mobile-panel--premium a:last-child{
  background: linear-gradient(180deg, rgba(214,178,104,.95), rgba(166,118,48,.92));
  color: #111;
  border-color: rgba(255,255,255,.18);
}