/* Dubai Asset — V3.1.0 (Luxury Premium)
   - Palette Dubaï : or, sable, bleu profond, émeraude
   - Effets glassmorphism renforcés
   - Typographie élégante avec polices self-hosted
   - Micro-interactions et transitions fluides
   - Maintien total des classes existantes
*/


/* -------------------------------------------------------------
   Self-hosted fonts (perf + CWV)
   - Inter: UI text
   - Playfair Display: headings (mapped to Noto Serif Display)
   ------------------------------------------------------------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/Inter-Regular.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/Inter-Medium.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/Inter-SemiBold.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/Inter-Bold.woff2') format('woff2');}

@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/PlayfairDisplay-Regular.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/PlayfairDisplay-SemiBold.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/PlayfairDisplay-Bold.woff2') format('woff2');}


:root {
  --bg: #f8f8f6;
  --bg2: #ffffff;
  
  --text: #0c1321;
  --muted: rgba(12, 19, 33, 0.72);
  --muted2: rgba(12, 19, 33, 0.55);
  
  --gold: #C19B53;
  --gold-light: #D4B36A;
  --gold-dark: #A8853D;
  --teal: #0E7C86;
  --teal-light: #1296A3;
  --sand: #E8DFD3;
  --deep-blue: #0A1A2D;
  
  --panel: rgba(255, 255, 255, 0.82);
  --panel2: rgba(255, 255, 255, 0.68);
  --border: rgba(10, 26, 45, 0.12);
  --border2: rgba(10, 26, 45, 0.08);
  --border-gold: rgba(193, 155, 83, 0.3);
  
  --shadow: 0 25px 70px rgba(2, 6, 23, 0.15);
  --shadow2: 0 15px 45px rgba(2, 6, 23, 0.1);
  --shadow-gold: 0 20px 50px rgba(193, 155, 83, 0.2);
  
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --radius: 20px;
  --radius-sm: 14px;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --fs-base: 16px;
  --fs-lead: clamp(16px, 1.9vw, 18px);
  --fs-h1: clamp(32px, 5.8vw, 72px);
  --fs-title: clamp(24px, 3.6vw, 44px);
  --lh-base: 1.65;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }

@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  .hero .bg img { animation: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 15% -8%, rgba(193, 155, 83, 0.15), transparent 65%),
    radial-gradient(1000px 700px at 90% 10%, rgba(14, 124, 134, 0.12), transparent 60%),
    linear-gradient(180deg, #fdfdfd 0%, var(--bg) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

a { 
  color: inherit; 
  text-decoration: none;
  transition: var(--transition);
}
img { max-width: 100%; display: block; }

/* Accessibility */
.skip-link{
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow2);
  transform: translateY(-160%);
  transition: transform 0.2s ease;
  z-index: 1000;
}
.skip-link:focus{
  transform: translateY(0);
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid rgba(193, 155, 83, 0.75);
  outline-offset: 3px;
}

.container {
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: 0 20px;
}
.section { padding: 90px 0; }
@media (max-width: 720px){
  .section { padding: 64px 0; }
}


/* -------------------------------------------------------------
   Performance: content-visibility (renders below-the-fold faster)
   Safe: ignored by unsupported browsers
   ------------------------------------------------------------- */
@supports (content-visibility: auto){
  .section{ content-visibility: auto; contain-intrinsic-size: 900px; }
}

/* -------------------------------------------------------------
   UI: scroll reveal (subtle, no content hidden if JS fails)
   - Add class="reveal" to any block/card to enable
   - JS adds .is-in when in viewport
   ------------------------------------------------------------- */
.reveal{
  opacity: 1;
  transform: translate3d(0, 14px, 0);
  transition: opacity 700ms ease, transform 700ms ease;
  will-change: transform, opacity;
}
.reveal.is-in{
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce){
  .reveal{ transform: none; transition: none; }
}

.section h2{
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-size: clamp(24px, 2.6vw, 36px);
  margin: 0 0 14px;
  color: var(--deep-blue);
}

.section.alt {
  background: linear-gradient(180deg, rgba(10, 26, 45, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
}

.h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: var(--fs-h1);
  margin: 0 0 20px;
  background: linear-gradient(135deg, var(--deep-blue) 0%, var(--teal) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-title{
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-size: var(--fs-title);
  margin: 0 0 14px;
  color: var(--deep-blue);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.8;
  color: var(--muted);
  max-width: 68ch;
  font-weight: 400;
}

/* Replace the box-shadow pulse (paint-heavy) with transform pulse */
.kicker{
  position: relative;
  padding-left: 26px; /* make room for dot */
}
.kicker::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
  width:12px;height:12px;border-radius:50%;
  background: var(--gold);
}
.kicker::after{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:12px;height:12px;border-radius:50%;
  transform: translateY(-50%) scale(1);
  border: 4px solid rgba(193,155,83,0.25);
  opacity:.35;
  animation: kickerRing 2s infinite;
  will-change: transform, opacity;
}
@keyframes kickerRing{
  0%,100%{ transform: translateY(-50%) scale(1); opacity:.35; }
  50%{ transform: translateY(-50%) scale(1.7); opacity:.08; }
}


/* Top bar - Version plus luxe */
.topbar {
  background: linear-gradient(90deg, var(--deep-blue) 0%, #152a45 100%);
  color: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  position: relative;
  z-index: 100;
}
.topbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.topbar .inner {
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.topbar-contact {
  display: flex;
  align-items: center;
  gap: 20px;
}
.topbar-contact a {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}
.topbar-contact a:hover {
  color: var(--gold);
}
.topbar .dot {
  color: rgba(255, 255, 255, 0.5);
}

/* Header - Version premium */
.header {
  position: sticky;
  top: 0;
  z-index: 99;
  backdrop-filter: blur(20px) saturate(180%);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(10, 26, 45, 0.08);
  transition: var(--transition);
}
.header.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 30px rgba(10, 26, 45, 0.05);
}
.header .row {
  padding: 14px 0;
  display: flex;
  align-items: center;
  /* PrestaShop-like header balance: logo + nav on the left, actions on the right */
  justify-content: flex-start;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  /* Logo-only brand: avoid extra spacing */
  gap: 0;
}
.brand .logo {
  /* Show the uploaded logo as-is (no forced golden square container) */
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  box-shadow: none;
  line-height: 0;
  flex: 0 0 auto;
}
.brand .logo img {
  /* Make the brand more present (fix visual imbalance when text is removed) */
  height: var(--brand-logo-h, 96px);
  width: auto;
  max-width: var(--brand-logo-w, 320px);
  display: block;
  object-fit: contain;
  filter: none;
}
.brand .name strong {
  display: block;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 20px;
  background: linear-gradient(135deg, var(--deep-blue) 0%, var(--teal) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.brand .name span {
  display: block;
  font-size: 12px;
  color: var(--muted2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  flex-wrap: nowrap;
}
.nav a {
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  position: relative;
  white-space: nowrap;
}
.nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: var(--transition);
}
.nav a:hover::after,
.nav a.active::after {
  width: 100%;
}
.nav a:hover,
.nav a.active {
  color: var(--deep-blue);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-left: auto;
}

/* Header quick actions (WhatsApp / Call) */
.header-quick{ display:flex; align-items:center; gap: 8px; }
.icon-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(10, 26, 45, 0.10);
  background: rgba(255,255,255,0.75);
  box-shadow: 0 10px 28px rgba(10, 26, 45, 0.06);
  color: var(--deep-blue);
  transition: var(--transition);
}
.icon-pill:hover{ transform: translateY(-2px); border-color: rgba(193,155,83,.35); color: var(--gold-dark); }
.icon{ display:block; }

/* Mobile navigation */
.nav-toggle{
  display: none;
  flex-direction: column;
  /* On mobile, keep the burger on the far right even with flex-start header */
  margin-left: auto;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 30px rgba(10, 26, 45, 0.08);
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}
.nav-toggle span{
  display: block;
  width: 18px;
  height: 2px;
  background: var(--deep-blue);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
body.menu-open .nav-toggle span:nth-child(1){
  transform: translateY(6px) rotate(45deg);
}
body.menu-open .nav-toggle span:nth-child(2){
  opacity: 0;
}
body.menu-open .nav-toggle span:nth-child(3){
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-menu[hidden]{ display: none; }
.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 200;
}
.mobile-menu__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(10, 26, 45, 0.45);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mobile-menu__panel{
  position: absolute;
  top: 0;
  right: 0;
  width: min(380px, 88vw);
  height: 100%;
  background: rgba(255, 255, 255, 0.98);
  border-left: 1px solid rgba(10, 26, 45, 0.10);
  box-shadow: 0 25px 70px rgba(2, 6, 23, 0.25);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu.open .mobile-menu__backdrop{ opacity: 1; }
.mobile-menu.open .mobile-menu__panel{ transform: translateX(0); }

.mobile-menu__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mobile-menu__brand{
  display: flex;
  align-items: center;
  gap: 10px;
}
.mobile-menu__brand .logo{
  /* Match header logo: display file as-is without a golden container */
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  box-shadow: none;
  line-height: 0;
  flex: 0 0 auto;
}
.mobile-menu__brand .logo img{
  height: 40px;
  width: auto;
  max-width: 160px;
  display: block;
  object-fit: contain;
  filter: none;
}
.mobile-menu__brand .title{
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--deep-blue);
}

.menu-close{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.mobile-nav{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}
.mobile-nav a{
  display: block;
  padding: 14px 14px;
  border-radius: 14px;
  font-weight: 600;
  color: var(--deep-blue);
  background: rgba(10, 26, 45, 0.03);
  border: 1px solid rgba(10, 26, 45, 0.06);
}
.mobile-nav a:hover{
  background: rgba(193, 155, 83, 0.10);
  border-color: rgba(193, 155, 83, 0.25);
}
.mobile-nav a.active{
  background: linear-gradient(135deg, rgba(193, 155, 83, 0.18) 0%, rgba(14, 124, 134, 0.10) 100%);
  border-color: rgba(193, 155, 83, 0.35);
}

.btn-full{
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}

.mobile-menu__langs{
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.mobile-menu__langs a{
  flex: 1;
  text-align: center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.85);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.mobile-menu__langs a.active{
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: #fff;
  border-color: transparent;
}

.lang-pill {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 4px 12px rgba(10, 26, 45, 0.05);
}
.lang-pill a {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--muted2);
  font-weight: 500;
}
.lang-pill a.active {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: white;
}

/* Buttons - Version améliorée */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid transparent;
  transition: var(--transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.6s;
}
.btn:hover::before {
  left: 100%;
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(10, 26, 45, 0.15);
}
.btn:active {
  transform: translateY(-1px);
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: white;
  border: none;
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover {
  box-shadow: 0 25px 60px rgba(193, 155, 83, 0.3);
}

.btn-dark {
  background: linear-gradient(135deg, var(--deep-blue) 0%, #152a45 100%);
  border: none;
  color: white;
}
.btn-dark:hover {
  box-shadow: 0 20px 40px rgba(10, 26, 45, 0.25);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* WhatsApp button (readable + recognizable) */
.btn-whatsapp{
  background: #25D366;
  color: #fff;
  border: 1px solid rgba(37, 211, 102, 0.55);
  box-shadow: 0 18px 46px rgba(37, 211, 102, 0.18);
}
.btn-whatsapp:hover{
  box-shadow: 0 24px 60px rgba(37, 211, 102, 0.26);
}
.btn-whatsapp:active{
  transform: translateY(-1px);
}

.btn-light-outline {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: white;
}
.btn-light-outline:hover {
  background: white;
  color: var(--deep-blue);
}

.badge, .pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  transition: var(--transition);
}
.badge:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Hero - Section premium */
.hero {
  position: relative;
  padding: 100px 0 80px;
  overflow: hidden;
  min-height: 85vh;
  display: flex;
  align-items: center;
}
/* Hero background layer (CWV-ready: no forced hero.jpg download) */
.hero .bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Hero image (LCP) is in HTML via <picture><img> */
.hero .bg picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero .bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
  filter: saturate(1.1) contrast(1.05);
  animation: zoomInOut 20s infinite alternate;
}
@keyframes zoomInOut {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}
.hero .fade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 800px at 20% 25%, rgba(193, 155, 83, 0.25) 0%, transparent 60%),
    linear-gradient(90deg, rgba(10, 26, 45, 0.85) 0%, rgba(10, 26, 45, 0.5) 60%, rgba(10, 26, 45, 0.1) 100%),
    linear-gradient(180deg, rgba(10, 26, 45, 0.3) 0%, transparent 40%, rgba(248, 248, 246, 0.8) 90%, #f8f8f6 100%);
}
.hero .content {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}
.hero .h1 {
  -webkit-text-fill-color: white;
  color: white;
  margin-bottom: 30px;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.hero .sub {
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.95);
  font-size: var(--fs-lead);
  line-height: 1.9;
  max-width: 60ch;
  font-weight: 400;
}
.hero .cta {
  margin-top: 30px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

/* Home hero upgrades (P1) */
.hero--home{ min-height: calc(100vh - var(--header-h, 78px)); }
.hero--home .content{
  grid-template-columns: 1.15fr 0.85fr;
  gap: 34px;
}
.hero-main{ max-width: 62ch; }
.hero-aside{ display:flex; flex-direction:column; gap: 14px; }
.hero-main, .hero-aside{ min-width: 0; }
.cta-link{
  align-self:center;
  color: rgba(255,255,255,0.92);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.cta-link:hover{ color: rgba(255,255,255,1); }

.trust-row{
  margin-top: 16px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.trust{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  font-weight: 700;
}
.trust__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(10,26,45,0.25);
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  font-size: 11px;
}

.picks-card{ padding: 18px 18px 14px; }
.picks-head{ display:flex; align-items:baseline; justify-content:space-between; gap: 12px; }
.picks-head h3{
  margin: 0;
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.96);
}
.picks-link{ color: rgba(255,255,255,0.88); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; font-size: 13px; }
.picks-link:hover{ color: rgba(255,255,255,1); }
.picks-list{ margin-top: 12px; display:flex; flex-direction:column; gap: 10px; }
.pick{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.10);
  transition: var(--transition);
}
.pick:hover{ transform: translateY(-2px); border-color: rgba(193,155,83,0.35); background: rgba(255,255,255,0.14); }
.pick__img{
  width: 78px;
  height: 58px;
  border-radius: 14px;
  overflow:hidden;
  flex: 0 0 auto;
}
.pick__body{ display:flex; flex-direction:column; gap: 3px; min-width: 0; }
.pick__title{ font-weight: 800; color: rgba(255,255,255,0.96); white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.pick__meta{ color: rgba(255,255,255,0.78); font-size: 12px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.pick__price{ color: rgba(245,242,234,0.95); font-size: 12px; font-weight: 800; }

@media (max-width: 980px){
  .hero--home .content{ grid-template-columns: 1fr; }
  .hero-main{ max-width: none; }
  .hero-aside{ max-width: 720px; }
}

@media (max-width: 520px){
  .hero .cta{ gap: 12px; }
  .hero .cta .btn{ width: 100%; justify-content: center; }
  .hero .cta .cta-link{ flex-basis: 100%; align-self: flex-start; }
}

/* Glass panel amélioré */
.glass {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  box-shadow: 
    0 25px 60px rgba(10, 26, 45, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: var(--transition);
}
.glass:hover {
  transform: translateY(-5px);
  box-shadow: 
    0 35px 80px rgba(10, 26, 45, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.process-card {
  padding: 24px;
}
.process-card h2,
.process-card h3 {
  margin: 0 0 10px;
  font-size: 20px;
  color: white;
  font-weight: 600;
}
.process-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  font-size: 14px;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 15px;
}
.mini {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  transition: var(--transition);
}
.mini:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}
.mini strong {
  display: block;
  font-size: 15px;
  color: white;
  font-weight: 600;
}
.mini span {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 6px;
}

/* KPIs améliorés */
.kpi {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.kpi .box {
  padding: 24px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--border2);
  box-shadow: var(--shadow2);
  transition: var(--transition);
  text-align: center;
}
.kpi .box:hover {
  transform: translateY(-5px);
  border-color: var(--border-gold);
  box-shadow: var(--shadow);
}
.kpi strong {
  display: block;
  font-size: 36px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--gold) 0%, var(--teal) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.kpi span {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Cards premium */
.cards {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
  border: 1px solid rgba(10, 26, 45, 0.08);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow2);
  transition: var(--transition);
  position: relative;
}
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--teal));
  opacity: 0;
  transition: var(--transition);
}
.card:hover::before {
  opacity: 1;
}
.card:hover {
  transform: translateY(-8px);
  border-color: var(--border-gold);
  box-shadow: var(--shadow);
}
.card .img{
  aspect-ratio: 16 / 10;
  height: auto;         /* IMPORTANT: let aspect-ratio control height */
  overflow: hidden;
  position: relative;
}

.card .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.card:hover .img img {
  transform: scale(1.05);
}
.card .body {
  padding: 24px;
}
.card h3 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 600;
  color: var(--deep-blue);
}
.card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
  font-size: 15px;
  min-height: 48px;
}
.card .meta {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--border2);
}

.list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Panels génériques */
.admin-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
  border: 1px solid rgba(10, 26, 45, 0.08);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow2);
  transition: var(--transition);
}
.admin-card:hover {
  box-shadow: var(--shadow);
}
.hr {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 24px 0;
}

.detail {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 30px;
  align-items: start;
}
.panel {
  position: sticky;
  top: 100px;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.gallery img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border2);
  box-shadow: var(--shadow);
  transition: var(--transition);
}
.gallery img:hover {
  transform: scale(1.01);
}

/* Tables */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 20px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow2);
}
.table th,
.table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border2);
  color: var(--text);
  font-size: 14px;
}
.table th {
  background: linear-gradient(135deg, var(--panel) 0%, var(--panel2) 100%);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
}
.table tbody tr {
  transition: var(--transition);
}
.table tbody tr:hover {
  background: rgba(193, 155, 83, 0.05);
}

/* Mobile: make tables horizontally scrollable (prevents layout overflow) */
@media (max-width: 720px){
  .table{
    display:block;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch;
  }
  .table th,
  .table td{
    padding: 12px 14px;
  }
}

/* Notices */
.notice {
  padding: 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: var(--panel);
  margin: 20px 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: var(--transition);
}
.notice::before {
  content: '';
  width: 6px;
  border-radius: 3px;
  background: var(--muted2);
  flex-shrink: 0;
}
.notice.ok {
  border-color: rgba(25, 160, 110, 0.3);
  background: rgba(25, 160, 110, 0.08);
}
.notice.ok::before {
  background: #19A06E;
}
.notice.err {
  border-color: rgba(230, 90, 90, 0.3);
  background: rgba(230, 90, 90, 0.08);
}
.notice.err::before {
  background: #E65A5A;
}

/* Forms */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.form-grid .col2 { grid-column: span 2; }
label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 500;
}

.form-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 500;
}
.input, select, textarea {
  width: 100%;
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  outline: none;
  font-size: 14px;
  transition: var(--transition);
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.04);
}
.input:focus,
select:focus,
textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 8px 25px rgba(193, 155, 83, 0.15);
}
textarea {
  resize: vertical;
  min-height: 120px;
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230c1321' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 16px;
}

/* Footer premium */
.footer {
  border-top: 1px solid var(--border2);
  padding: 60px 0 40px;
  margin-top: 80px;
  background: linear-gradient(180deg, rgba(10, 26, 45, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
  position: relative;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.footer .cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
.footer .muted {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}
.footer .hr {
  margin: 30px 0;
}

/* Footer CTA: make it full-width on small screens to avoid overflow */
@media (max-width: 520px){
  .footer .btn{
    width: 100% !important;
    justify-content: center;
  }
}
.footer-bottom {
  padding-top: 30px;
  border-top: 1px solid var(--border2);
  text-align: center;
  color: var(--muted2);
  font-size: 13px;
}

.muted { color: var(--muted); }
code {
  background: var(--panel);
  border: 1px solid var(--border2);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: 'Courier New', monospace;
}

/* Admin amélioré */
.admin-body {
  background:
    radial-gradient(1000px 700px at 20% -10%, rgba(193, 155, 83, 0.12), transparent 60%),
    linear-gradient(180deg, #fdfdfd 0%, var(--bg) 100%);
  background-attachment: fixed;
}
.admin-shell {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 100vh;
}
.sidebar {
  padding: 30px;
  border-right: 1px solid var(--border2);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}
.brandbox {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid var(--border2);
  background: var(--panel);
  margin-bottom: 30px;
  transition: var(--transition);
}
.brandbox:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}
.brandbox img {
  width: 40px;
  height: 40px;
}
.sidebar nav {
  display: grid;
  gap: 8px;
}
.sidebar nav a {
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  color: var(--muted);
  background: var(--panel);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: var(--transition);
}
.sidebar nav a:hover {
  border-color: var(--border);
  color: var(--text);
  transform: translateX(5px);
}
.sidebar nav a.active {
  border-color: var(--border-gold);
  background: linear-gradient(135deg, rgba(193, 155, 83, 0.1) 0%, rgba(14, 124, 134, 0.05) 100%);
  color: var(--text);
  font-weight: 600;
}

.admin-main {
  padding: 40px;
  background: var(--bg);
}
.table-admin {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow2);
  background: white;
}
.table-admin th,
.table-admin td {
  text-align: left;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border2);
  vertical-align: middle;
}
.table-admin th {
  background: linear-gradient(135deg, var(--panel) 0%, var(--panel2) 100%);
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Mobile: admin tables should also scroll instead of overflowing */
@media (max-width: 720px){
  .table-admin{
    display:block;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch;
  }
  .table-admin th,
  .table-admin td{
    padding: 12px 14px;
  }
}

/* Responsive */
@media (max-width: 1100px) {
  .cards,
  .list-grid,
  .kpi,
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer .cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .section { padding: 60px 0; }
  .hero { padding: 80px 0 60px; min-height: auto; }
  .hero--home{ min-height: calc(100vh - var(--header-h, 72px)); }
  .hero .content,
  .detail {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .nav { display: none; }
  .header-actions { display: none; }
  .nav-toggle { display: inline-flex; }
  body { background-attachment: scroll; }
  /* Mobile header layout: center the logo (PrestaShop style) and keep burger on the right */
  .header .row{
    padding: 12px 0;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 0;
  }
  .header .row .brand{
    grid-column: 2;
    justify-self: center;
  }
  .header .row .nav-toggle{
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
  }
  .brand .logo img{
    /* Slightly larger on mobile so the logo stays readable */
    height: var(--brand-logo-h-mobile, clamp(72px, 22vw, 110px));
    max-width: var(--brand-logo-w-mobile, 280px);
  }
  .brand .name span { display: none; }
  .brand .name strong { font-size: 18px; }
  /* Mobile UX: prevent iOS zoom on form fields */
  .input, select, textarea { font-size: 16px; }
  /* Header search uses a dedicated class (also prevent iOS zoom) */
  .header-search__input{ font-size: 16px; }
  .cards,
  .list-grid,
  .kpi,
  .form-grid,
  .footer .cols {
    grid-template-columns: 1fr;
  }
  .panel { position: static; }
  .admin-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
    padding: 20px;
  }
  .admin-main { padding: 20px; }
}

/* Animations supplémentaires */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeInUp 0.6s ease-out;
}

/* Scrollbar stylisée */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--gold), var(--teal));
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(var(--gold-light), var(--teal-light));
}

/* =========================================================
   Rich Content (CMS) — premium typography
   Fixes the global reset that removes default margins.
   ========================================================= */
.rich-content{
  color: var(--muted);
  font-size: 15px;
  line-height: 1.85;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* vertical rhythm */
.rich-content > * + *{ margin-top: 14px; }

.rich-content h2,
.rich-content h3{
  font-family: var(--font-serif);
  color: var(--deep-blue);
  letter-spacing: -0.01em;
}
.rich-content h2{
  font-size: 22px;
  line-height: 1.25;
  margin-top: 26px;
}
.rich-content h3{
  font-size: var(--fs-lead);
  line-height: 1.35;
  margin-top: 18px;
}

.rich-content p{ max-width: 70ch; }

.rich-content strong{
  color: var(--deep-blue);
  font-weight: 600;
}

.rich-content a{
  color: var(--deep-blue);
  text-decoration: underline;
  text-decoration-color: rgba(193,155,83,.55);
  text-underline-offset: 3px;
}
.rich-content a:hover{
  text-decoration-color: rgba(193,155,83,.95);
}

/* Lists (premium bullets) */
.rich-content > ul,
.rich-content details ul{
  list-style: none;
  padding-left: 0;
}
.rich-content > ul > li,
.rich-content details ul > li{
  position: relative;
  padding-left: 18px;
}
.rich-content > ul > li::before,
.rich-content details ul > li::before{
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  position: absolute;
  left: 0;
  top: 0.65em;
}
.rich-content li + li{ margin-top: 8px; }

/* Nested lists keep classic markers */
.rich-content ul ul,
.rich-content ul ol,
.rich-content ol ul,
.rich-content ol ol{
  margin-top: 8px;
  margin-left: 18px;
  padding-left: 18px;
}
.rich-content ul ul{ list-style: disc; }
.rich-content ol ol{ list-style: decimal; }

/* Ordered lists */
.rich-content > ol{
  list-style: none;
  padding-left: 0;
  counter-reset: rich_ol;
}
.rich-content > ol > li{
  position: relative;
  padding-left: 28px;
  counter-increment: rich_ol;
}
.rich-content > ol > li::before{
  content: counter(rich_ol) '.';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold-dark);
  font-weight: 700;
}

/* Details / FAQ blocks */
.rich-content details{
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.70);
  padding: 12px 14px;
}
.rich-content summary{
  cursor: pointer;
  font-weight: 650;
  color: var(--deep-blue);
  outline: none;
}
.rich-content details[open]{
  box-shadow: var(--shadow2);
}
.rich-content details > * + *{ margin-top: 10px; }

/* Small helper: buttons inside CMS content */
.rich-content .btn{ display: inline-flex; }
/* =========================================================
   Areas guide (show page) – UX polish
   ========================================================= */
.area-hero{
  position: relative;
  padding: 64px 0 46px;
  overflow: hidden;
  border-bottom: 1px solid var(--border2);
}
.area-hero__bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.02);
}
.area-hero__overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 520px at 15% 25%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.80) 45%, rgba(255,255,255,0.55) 70%, rgba(255,255,255,0.20) 100%),
    linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.72) 45%, rgba(255,255,255,0.35) 75%, rgba(255,255,255,0.15) 100%);
}
.area-hero__inner{ position: relative; }
.area-hero__content{
  max-width: 760px;
}
.area-hero__title{
  margin: 0;
  font-size: clamp(40px, 4vw, 56px);
  letter-spacing: -0.02em;
}
.area-hero__lead{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 16px;
}
.area-hero__meta{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.area-hero__actions{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.area-section{ padding-top: 26px; }
.area-layout{
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
}
.area-aside{
  position: sticky;
  top: 100px;
}
.area-aside__card .meta{
  margin-top: 12px;
  padding-top: 12px;
}
.area-aside__facts{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.area-aside__facts .fact{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 12px;
  border: 1px solid var(--border2);
  border-radius: 14px;
  background: rgba(255,255,255,0.55);
}
.area-aside__facts .k{
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.area-aside__facts .v{
  font-weight: 700;
  color: var(--text);
}
.area-aside__cta{
  margin-top: 14px;
}

.section-title{
  font-size: 28px;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Typography for rich HTML (description_html) */
.prose{
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.prose h2{
  margin: 20px 0 10px;
  font-size: 24px;
  letter-spacing: -0.01em;
}
.prose h3{
  margin: 18px 0 8px;
  font-size: var(--fs-lead);
}
.prose p{ margin: 0 0 12px; }
.prose ul,
.prose ol{
  margin: 0 0 14px;
  padding-left: 22px;
}
.prose li{ margin: 8px 0; }
.prose a{ text-decoration: underline; text-underline-offset: 3px; }
.prose details{
  border: 1px solid var(--border2);
  border-radius: 16px;
  background: rgba(255,255,255,0.55);
  padding: 12px 14px;
  margin: 10px 0;
}
.prose details > summary{
  cursor: pointer;
  font-weight: 700;
}

@media (max-width: 980px){
  .area-layout{ grid-template-columns: 1fr; }
  .area-aside{ position: static; }
}
/* Area aside layout fixes */
.area-aside__card{
  padding: 18px;
}

/* Prevent title/paragraph margins from escaping the card */
.area-aside__card > h3{
  margin: 0;
  line-height: 1.15;
}

.area-aside__card > p.muted{
  margin: 6px 0 12px !important; /* override inline margin-top */
}

/* Make grid robust (no overflow) */
.area-aside__facts{
  margin-top: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.area-aside__facts .fact{
  min-width: 0;
}

/* Mobile */
@media (max-width: 520px){
  .area-aside__facts{ grid-template-columns: 1fr; }
}
/* Area aside UI polish */
.area-aside__card::before{ opacity: 1; } /* keep gradient bar always visible */
.area-aside__card:hover{
  transform: none;
  border-color: var(--border2);
  box-shadow: var(--shadow2);
}

/* KPI tiles */
.area-aside__facts{
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.area-aside__facts .fact{
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;

  padding: 12px 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--border2);
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.52));
  box-shadow: 0 10px 28px rgba(15,23,42,0.06);
}

.area-aside__facts .fact::after{
  content: "";
  position: absolute;
  right: -22px;
  top: -22px;
  width: 86px;
  height: 86px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.70), rgba(255,255,255,0));
  opacity: .95;
}

.area-aside__facts .fact:nth-child(1)::after{
  background: radial-gradient(circle at 35% 35%, rgba(11,12,15,0.14), rgba(11,12,15,0));
}
.area-aside__facts .fact:nth-child(2){
  border-color: rgba(200,163,90,0.35);
}
.area-aside__facts .fact:nth-child(2)::after{
  background: radial-gradient(circle at 35% 35%, rgba(200,163,90,0.26), rgba(200,163,90,0));
}
.area-aside__facts .fact:nth-child(3){
  border-color: rgba(14,165,233,0.28);
}
.area-aside__facts .fact:nth-child(3)::after{
  background: radial-gradient(circle at 35% 35%, rgba(14,165,233,0.22), rgba(14,165,233,0));
}

.area-aside__facts .k{
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.area-aside__facts .v{
  font-size: 22px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Button nicer + full width */
.area-aside__cta .btn{
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* Mobile */
@media (max-width: 520px){
  .area-aside__facts{ grid-template-columns: 1fr; }
  .area-aside__facts .v{ font-size: 20px; }
}

/* Respect reduced motion (accessibility + perf) */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto !important; }
  .kicker::before,
  .hero .bg,
  .hero .bg img{
    animation: none !important;
  }
  .btn, .card, .glass, .nav a::after, .mobile-menu__panel, .mobile-menu__backdrop, .nav-toggle span{
    transition: none !important;
  }
}
/* Accessibility helpers */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Honeypot */
.hp-field{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;height:1px;
  overflow:hidden;
}

/* Form UX */
.form-fieldset{ border:0; padding:0; margin:0 0 16px; }
.form-legend{ font-weight:700; margin:0 0 10px; }
.form-hint{ margin:8px 0 0; font-size:13px; opacity:.8; }
.req{ opacity:.75; font-weight:700; }

.two-cols{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mt10{ margin-top:10px; }

/* Generic 2-cols helper: stack on small screens */
@media (max-width: 720px){
  .two-cols{ grid-template-columns: 1fr; }
}

.form-actions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.form-disclaimer{ margin-top:10px; font-size:13px; color: rgba(12, 19, 33, 0.72); }

/* Consent (privacy) */
.form-consent{
  margin-top: 12px;
  /* Explicitly align left and prevent awkward centering */
  display: flex;
  justify-content: flex-start;
}
.consent-label{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  /* Better contrast (user feedback: not readable) */
  color: rgba(12, 19, 33, 0.88);
}
.consent-label input[type="checkbox"]{
  margin-top: 3px;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.consent-label span{
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
.consent-label a{
  text-decoration: underline;
}

/* Quick shortlist form readability */
.quick-shortlist-form .form-disclaimer{
  font-size: 13px;
  opacity: .82;
}

/* WhatsApp button (used for primary WA CTAs where needed) */
.btn-whatsapp{
  background: #25D366;
  color: #fff;
  border: 1px solid rgba(37, 211, 102, 0.35);
  box-shadow: 0 18px 46px rgba(37, 211, 102, 0.22);
}
.btn-whatsapp:hover{
  box-shadow: 0 24px 60px rgba(37, 211, 102, 0.28);
}

/* ROI loading state (subtle, prevents "jumps") */
[data-roi-output].is-loading{
  opacity: .85;
}

/* Ensure select/textarea match inputs */
select.input, textarea.input{ width:100%; }
/* =========================================================
   Contact page — Mobile layout fix (scoped)
   ========================================================= */

.contact-form .form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* IMPORTANT: prevents truncation inside grid items */
.contact-form .form-grid > div{
  min-width: 0;
}

/* Make "col2" actually span full width */
.contact-form .form-grid .col2{
  grid-column: 1 / -1;
}

/* Inputs/selects/textarea full width + consistent height */
.contact-form .input,
.contact-form select.input,
.contact-form textarea.input,
.contact-form select,
.contact-form textarea,
.contact-form input{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Fix select text cut + comfortable tap area
   Important: the form wrapper uses box-sizing:border-box.
   A fixed height + 16px vertical padding was collapsing the native select
   text rendering in Chrome, so the chosen option looked blank after select.
*/
.contact-form select{
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  min-height: 52px;
  height: auto;
  padding: 12px 44px 12px 16px; /* room for arrow + readable text */
  line-height: 1.35;
  color: #0f172a;
  background-color: #fff;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.contact-form select option{
  color: #0f172a;
}

/* Textarea comfort */
.contact-form textarea{
  min-height: 120px;
  resize: vertical;
}

/* Budget min/max: 2 cols on normal mobile, 1 col on very small screens */
.contact-form .two-cols{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Buttons: better mobile ergonomics */
.contact-form .form-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 520px){
  .contact-form .form-actions{
    flex-direction: column;
  }
  .contact-form .form-actions .btn{
    width: 100%;
    justify-content: center;
  }
}

/* MOBILE: switch whole form to 1 column */
@media (max-width: 720px){
  .contact-form .form-grid{
    grid-template-columns: 1fr;
  }
  .contact-form .two-cols{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Contact form — Multi-step (progressive enhancement)
   ========================================================= */

.contact-stepper{
  display:none;
  margin: 0 0 14px;
}
.js .contact-stepper{
  display:block;
}
.contact-stepper__bar{
  height: 8px;
  border-radius: 999px;
  background: rgba(10,26,45,.10);
  overflow:hidden;
  border: 1px solid rgba(10,26,45,.10);
}
.contact-stepper__bar span{
  display:block;
  height:100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transition: width .25s ease;
}
.contact-stepper__labels{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.stepper-pill{
  border: 1px solid rgba(10,26,45,.14);
  background: rgba(255,255,255,.7);
  color: rgba(10,26,45,.85);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  transition: var(--transition);
}
.stepper-pill:hover{
  background: rgba(255,255,255,.9);
  border-color: rgba(193,155,83,.35);
}
.stepper-pill.is-active{
  border-color: rgba(193,155,83,.6);
  box-shadow: 0 10px 22px rgba(193,155,83,.18);
}

.js .contact-steps .contact-step{
  display:none;
}
.js .contact-steps .contact-step.is-active{
  display:block;
}

.step-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Choice pills (radio group) */
.choice-row{ display:flex; gap: 10px; flex-wrap:wrap; }
.choice{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(10,26,45,.14);
  background: rgba(255,255,255,.72);
  cursor:pointer;
  font-weight: 700;
  color: rgba(10,26,45,.85);
  transition: var(--transition);
}
.choice input{ accent-color: var(--gold-dark); }
.choice:hover{ border-color: rgba(193,155,83,.35); background: rgba(255,255,255,.88); }
@supports(selector(:has(*))){
  .choice:has(input:checked){
    border-color: rgba(193,155,83,.65);
    background: rgba(193,155,83,.12);
    box-shadow: 0 12px 26px rgba(193,155,83,.16);
  }
}
/* Hide step navigation buttons when JS is disabled (progressive enhancement) */
.step-actions [data-step-next],
.step-actions [data-step-prev]{
  display:none;
}
.js .step-actions [data-step-next],
.js .step-actions [data-step-prev]{
  display:inline-flex;
}
@media (max-width: 520px){
  .step-actions .btn{ width: 100%; justify-content:center; }
}

/* Quick shortlist form (2 fields) */
.quick-shortlist-form .form-grid{
  grid-template-columns: 1fr;
}
.quick-shortlist-form .col2{
  grid-column: 1 / -1;
}

/* Off-plan: espace filtres -> annonces */
.listing-card form{
  padding-bottom: 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.listing-card .listing-results{
  padding-top: 14px;
}
.filter-actions{
  display:flex;
  align-items:flex-end;
  gap:10px;
  align-self:end;
  flex-wrap:wrap;
}
@media (max-width:720px){
  .listing-card form{ padding-bottom:18px; margin-bottom:16px; }
  .listing-card .listing-results{ padding-top:16px; }
  .filter-actions{ gap:10px; }
}
.list-grid{
  display:grid;
  gap: 16px;
  margin-top: 14px; /* espace au-dessus des cartes */
}
@media (max-width: 720px){
  .list-grid{ gap: 14px; margin-top: 16px; }
}

/* --------------------------------------------------------------
   AJAX listings — loader + errors
   -------------------------------------------------------------- */

.listing-results,
[data-list]{
  position: relative;
}

.list-loader{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 3;
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(2px);
}

.list-loader[hidden]{
  display: none !important;
}

.list-loader__inner{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(17,17,17,.75);
  color: rgba(245,242,234,.95);
  font-size: 14px;
  line-height: 1;
}

.spinner{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(245,242,234,.35);
  border-top-color: rgba(245,242,234,.95);
  animation: daSpin 0.9s linear infinite;
}

@keyframes daSpin{
  to{ transform: rotate(360deg); }
}

.btn-small{
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.1;
}

/* --------------------------------------------------------------
   Lightbox (projects / properties galleries)
   -------------------------------------------------------------- */

.lb-trigger,
.lb-thumb{
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  text-decoration: none;
  color: inherit;
  cursor: zoom-in;
}

.lb-trigger:focus-visible,
.lb-thumb:focus-visible{
  outline: 3px solid rgba(245,242,234,.92);
  outline-offset: 2px;
  border-radius: 16px;
}

.lightbox{
  border: 0;
  padding: 0;
  background: transparent;
  max-width: none;
}

.lightbox::backdrop{
  background: rgba(0,0,0,.86);
}

.lightbox__inner{
  position: relative;
  width: min(980px, 92vw);
  margin: auto;
}

.lightbox__figure{
  margin: 0;
}

.lightbox__figure img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 18px;
  background: rgba(0,0,0,.25);
}

.lightbox__caption{
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  color: rgba(245,242,234,.8);
}

.lightbox__close,
.lightbox__nav{
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(245,242,234,.25);
  background: rgba(0,0,0,.45);
  color: rgba(245,242,234,.95);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lightbox__close{
  top: 10px;
  right: 10px;
  font-size: 24px;
  line-height: 1;
}

.lightbox__nav{
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  line-height: 1;
}

.lightbox__nav.prev{ left: 10px; }
.lightbox__nav.next{ right: 10px; }

@media (max-width: 520px){
  .lightbox__close{ top: 6px; right: 6px; }
  .lightbox__nav.prev{ left: 6px; }
  .lightbox__nav.next{ right: 6px; }
}

/* --------------------------------------------------------------
   CMS content — safer defaults (images/iframes) + predictable layout
   -------------------------------------------------------------- */

.rich-content img,
.prose img{
  max-width: 100%;
  height: auto;
}

.rich-content iframe,
.prose iframe{
  max-width: 100%;
}

.rich-content table,
.prose table{
  width: 100%;
  border-collapse: collapse;
}

.rich-content table th,
.rich-content table td,
.prose table th,
.prose table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* Mobile: CMS tables can be wider than the viewport */
@media (max-width: 720px){
  .rich-content table,
  .prose table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================================================
   Marketplace UX (Navigation + Trouver vite + Marketplace)
   ========================================================= */

:root{
  --header-h: 72px;
  --sticky-top: 100px;
}

/* Make existing sticky panels align with real header height */
.panel{
  top: var(--sticky-top, 100px);
}

/* Breadcrumbs */
.breadcrumbs{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  font-size:12px;
  color: rgba(245,242,234,.72);
  margin-bottom: 8px;
}
.breadcrumbs a{
  color: rgba(245,242,234,.9);
  text-decoration:none;
}
.breadcrumbs a:hover{
  text-decoration:underline;
}

/* Anchor nav (sticky section links on detail pages) */
.anchor-nav{
  position: sticky;
  top: var(--sticky-top, 100px);
  z-index: 30;
  margin-top: 12px;
  display:flex;
  gap:10px;
  align-items:center;
  padding: 10px 12px;
  background: rgba(25,25,25,.7);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}
.anchor-nav a{
  white-space:nowrap;
  font-size: 13px;
  color: rgba(245,242,234,.85);
  text-decoration:none;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
}
.anchor-nav a:hover{
  border-color: rgba(198,169,108,.45);
}
.anchor-nav a.is-active{
  color: rgba(245,242,234,1);
  border-color: rgba(198,169,108,.7);
  background: rgba(198,169,108,.10);
}

/* Header search (global "Trouver vite") */
.header-search-row{
  border-top: 1px solid rgba(10, 26, 45, 0.06);
  padding: 10px 0 14px;
  background: rgba(255, 255, 255, 0.92);
}

.header-search{
  position: relative;
  display:flex;
  align-items:center;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}

.header-search__field{
  display:flex;
  align-items:center;
  gap:10px;
  width: 100%;
}

.header-search__input{
  width:100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(10, 26, 45, 0.03);
  color: var(--deep-blue);
  font-size: 14px;
}

.header-search__input::placeholder{
  color: var(--muted2);
}

.header-search__input:focus{
  outline: none;
  border-color: rgba(193, 155, 83, 0.75);
  box-shadow: 0 0 0 3px rgba(193, 155, 83, 0.12);
  background: rgba(10, 26, 45, 0.02);
}

.header-search__btn{
  display:inline-flex;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.92);
  color: var(--deep-blue);
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 10px 30px rgba(10, 26, 45, 0.06);
}

.header-search__btn:hover{
  border-color: rgba(193, 155, 83, 0.45);
  box-shadow: 0 12px 34px rgba(193, 155, 83, 0.12);
}

.header-search__btn span{
  font-size: 16px;
  line-height: 1;
}

.header-search-chips{
  display:flex;
  justify-content:center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px auto 0;
  max-width: 980px;
}
.header-search-chips .chip{
  border-color: rgba(10,26,45,0.12);
  background: rgba(10,26,45,0.04);
  color: rgba(10,26,45,0.78);
}
.header-search-chips .chip:hover{
  border-color: rgba(193,155,83,0.35);
  background: rgba(193,155,83,0.10);
  color: rgba(10,26,45,0.92);
}
@media (max-width: 740px){
  .header-search-chips{
    justify-content:flex-start;
    overflow-x:auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .header-search-chips .chip{ white-space: nowrap; }
}

.mobile-search{
  position: relative;
  margin: 10px 0 6px;
}

/* Autocomplete dropdown */
.search-dropdown{
  position:absolute;
  left:0;
  right:0;
  top: calc(100% + 10px);
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow:hidden;
  z-index: 120;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
.search-dropdown[hidden]{
  display:none;
}
.search-group{
  padding: 10px 10px 6px;
  border-top: 1px solid var(--border2);
}
.search-group:first-child{
  border-top: none;
}
.search-group__title{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted2);
  margin: 0 0 6px;
}
.search-hit{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding: 10px 10px;
  border-radius: 12px;
  color: var(--deep-blue);
  text-decoration:none;
}
.search-hit:hover{
  background: rgba(10, 26, 45, 0.04);
}
.search-hit__sub{
  font-size: 12px;
  color: var(--muted);
}
.search-viewall{
  display:block;
  padding: 10px 12px;
  border-top: 1px solid var(--border2);
  text-decoration:none;
  color: rgba(193, 155, 83, 0.95);
  font-weight: 700;
}
.search-viewall:hover{
  background: rgba(193, 155, 83, 0.10);
}

/* Marketplace listing layout */
.listing-market{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  align-items:start;
}
.listing-market__filters{
  position: relative;
}
.listing-market__filters .filters-drawer__panel{
  position: sticky;
  top: var(--sticky-top, 100px);
}
.listing-market__filters .form-grid{
  grid-template-columns: 1fr;
  gap: 12px;
}
.listing-market__filters .filter-actions{
  display:flex;
  gap: 10px;
}
.listing-market__filters .filter-actions .btn{
  flex:1;
}

.listing-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.filter-chips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  min-height: 34px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(245,242,234,.92);
  font-size: 12px;
}
.chip button{
  border: none;
  background: transparent;
  color: rgba(245,242,234,.85);
  cursor:pointer;
  font-size: 14px;
  line-height: 1;
}
.chip button:hover{
  color: rgba(198,169,108,.95);
}

.input--sm{
  padding: 8px 10px;
  font-size: 13px;
}

.results-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin: 10px 0 12px;
  color: rgba(245,242,234,.72);
  font-size: 13px;
}
.results-count{
  font-weight: 700;
  color: rgba(245,242,234,.92);
}

/* Filters drawer (mobile) */
.filters-drawer__top{
  display:none;
}
.filters-drawer__backdrop{
  display:none;
}

@media (max-width: 980px){
  .listing-market{
    grid-template-columns: 1fr;
  }
  .listing-market__filters .filters-drawer__panel{
    position: static;
  }

  .filters-drawer{
    position: fixed;
    inset: 0;
    z-index: 320;
    display:none;
  }
  body.filters-open .filters-drawer{
    display:block;
  }
  .filters-drawer__backdrop{
    display:block;
    position:absolute;
    inset:0;
    background: rgba(0,0,0,.55);
  }
  .filters-drawer__panel{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    max-height: 88vh;
    overflow:auto;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
  }
  .filters-drawer__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    margin-bottom: 10px;
  }
  .filters-drawer__close{
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(245,242,234,.95);
    cursor: pointer;
  }
}

/* Bottom bar (mobile sticky filters CTA) */
.bottom-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 310;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(10,10,10,.85);
  border-top: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.bottom-bar__row{
  display:flex;
  gap: 10px;
}
.bottom-bar .btn{
  flex:1;
}

@media (min-width: 981px){
  .bottom-bar{ display:none; }
}

.has-bottom-bar{
  padding-bottom: 92px;
}

/* Gallery grid (detail pages) */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.gallery-thumb{
  aspect-ratio: 16 / 10;
  overflow:hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
}
.gallery-thumb a{ display:block; width:100%; height:100%; }

@media (max-width: 720px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* FAQ */
.faq{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.faq-item{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 8px 10px;
}
.faq-item summary{
  cursor:pointer;
  font-weight: 700;
  color: rgba(245,242,234,.92);
}
.faq-body{
  color: rgba(245,242,234,.78);
  line-height: 1.7;
  margin-top: 8px;
}

/* Mobile sticky CTA (detail pages) */
.mobile-cta-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 305;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(10,10,10,.88);
  border-top: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  display:flex;
  gap: 10px;
}
.mobile-cta-bar .btn{
  flex:1;
}

@media (min-width: 981px){
  .mobile-cta-bar{ display:none; }
}

body.has-mobile-cta{
  padding-bottom: 90px;
}


/* Floating WhatsApp (global conversion point) */
.wa-float{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 325;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  /* User feedback: make it readable on light backgrounds too */
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(10, 26, 45, 0.14);
  backdrop-filter: blur(10px);
  color: var(--deep-blue);
  text-decoration:none;
  box-shadow: 0 18px 46px rgba(0,0,0,.28);
}
.wa-float:hover{
  background: rgba(255,255,255,.98);
  border-color: rgba(37, 211, 102, 0.35);
}
.wa-float__icon{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #25D366;
  border: 1px solid rgba(37, 211, 102, 0.55);
  color: #fff;
}
.wa-float__text{
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;
  white-space: nowrap;
}
@media (max-width: 520px){
  .wa-float__text{ display:none; }
  .wa-float{ padding: 10px; }
}
body.has-mobile-cta .wa-float{
  bottom: calc(16px + 92px);
}
body.has-bottom-bar-ui .wa-float{
  bottom: calc(16px + 92px);
}


/* Search page */
.search-page{
  margin-top: 10px;
}
.search-page__row,
.search-page-row{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.search-page__row .input,
.search-page-row .input{
  flex: 1;
  min-width: 240px;
}
.search-results-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.search-hit-card{
  display:block;
  padding: 12px 12px;
  border: 1px solid var(--border2);
  border-radius: 14px;
  background: rgba(10, 26, 45, 0.03);
  text-decoration:none;
  color: var(--deep-blue);
  transition: var(--transition);
}
.search-hit-card:hover{
  background: rgba(193, 155, 83, 0.08);
  border-color: rgba(193, 155, 83, 0.35);
}
.search-hit-card__sub,
.search-hit-sub{
  color: var(--muted);
  font-size: 13px;
  margin-top: 6px;
}

.search-hit-title{
  font-weight: 800;
  color: var(--deep-blue);
}

@media (max-width: 720px){
  .search-results-grid{ grid-template-columns: 1fr; }
}
/* =========================================================
   Fix – long official website URL (aside KPI tiles)
   Prevent text overflow in "Site officiel" tile (developers)
   ========================================================= */
.area-aside__facts .fact,
.area-aside__facts .v{
  min-width: 0; /* autorise le shrink */
}

.area-aside__facts .v{
  max-width: 100%;
}

.area-aside__facts .v a{
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis; /* … */
  white-space: nowrap;
}
/* =========================================================
   Developer — "Site officiel" value as icon + tooltip
   (no overflow + consistent premium UI)
   ========================================================= */
.area-aside__facts .fact--site .v{
  font-size: 0; /* évite les baselines énormes */
}

.area-aside__facts .fact--site .fact-site-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(12,19,33,0.12);
  background: rgba(255,255,255,0.72);
  box-shadow: 0 10px 28px rgba(15,23,42,0.06);
  color: rgba(12,19,33,0.92);
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.area-aside__facts .fact--site .fact-site-link svg{
  width: 18px;
  height: 18px;
}

.area-aside__facts .fact--site .fact-site-link:hover{
  transform: translateY(-1px);
  border-color: rgba(14,165,233,0.30);
  background: rgba(255,255,255,0.86);
}

.area-aside__facts .fact--site .fact-site-link:focus-visible{
  outline: 2px solid rgba(14,165,233,0.35);
  outline-offset: 2px;
}

/* -------------------------------------------------------------
   Priority 3: lazy reveal (perceived performance)
   Add data-reveal on blocks you want to animate in.
------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ------------------------------------------------------------
   Front — Areas (list + detail) — remove inline styles
------------------------------------------------------------ */

.pagehead{ margin-bottom: 14px; }

.list-grid--spaced{ margin-top: 16px; }
.list-grid--tight{ margin-top: 14px; }

.section--stack{ padding-top: 28px; }

.ratio{ position: relative; overflow: hidden; }
.ratio--16x10{ aspect-ratio: 16 / 10; }

.media-picture{ display:block; width:100%; height:100%; }
.media-cover{ display:block; width:100%; height:100%; object-fit: cover; }

.card--media .img{ border-radius: 14px; }

/* Area hero background layout (no inline styles) */
.area-hero{ position: relative; overflow: hidden; }
.area-hero__bg{ position:absolute; inset:0; overflow:hidden; }
.area-hero__overlay{ position:absolute; inset:0; pointer-events:none; }
.area-hero__inner{ position: relative; z-index: 2; }

/* Pills tooltip (desktop hover) */
.pill--tip{ position: relative; cursor: help; }
.pill--tip:hover::after{
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  min-width: 220px;
  max-width: 320px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.92);
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  z-index: 30;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.pill--tip:hover::before{
  content: "";
  position: absolute;
  left: 18px;
  top: calc(100% + 2px);
  border: 8px solid transparent;
  border-bottom-color: rgba(17, 24, 39, 0.92);
}

/* Insights block to fill the hero visually (mobile friendly) */
.area-hero__insights{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.insight{
  border-radius: 14px;
  padding: 12px 12px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(8px);
}
.insight__k{ font-weight: 700; font-size: 12px; opacity: .95; }
.insight__v{ margin-top: 6px; font-size: 12px; opacity: .92; }

@media (max-width: 900px){
  .area-hero__insights{ grid-template-columns: 1fr; }
  .pill--tip:hover::after,
  .pill--tip:hover::before{ display:none; } /* tooltips off on mobile */
}

/* Aside spacing (no inline margin) */
.area-aside__desc{ margin-top: 6px; }
.area-aside__bullets{
  margin: 14px 0 0;
  padding-left: 18px;
  color: inherit;
}
.area-aside__bullets li{ margin: 8px 0; }
/* ---------------------------
   Area page — balance when only 1 card
---------------------------- */

.page-area .list-grid--cards{
  display:grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Quand il n’y a qu’1 seul item : carte “wide” pour remplir */
.page-area .list-grid--cards[data-count="1"]{
  grid-template-columns: 1fr;
}

.page-area .list-grid--cards[data-count="1"] > a.card{
  display:grid;
  grid-template-columns: 320px 1fr;
  align-items: stretch;
}

.page-area .list-grid--cards[data-count="1"] > a.card .img{
  border-radius: 18px 0 0 18px;
  overflow:hidden;
}

.page-area .list-grid--cards[data-count="1"] > a.card .body{
  padding: 18px 20px;
}

@media (max-width: 900px){
  .page-area .list-grid--cards[data-count="1"] > a.card{
    grid-template-columns: 1fr;
  }
  .page-area .list-grid--cards[data-count="1"] > a.card .img{
    border-radius: 18px 18px 0 0;
  }
}

/* Option premium : aside sticky (évite impression de “vide”) */
.area-aside__card{
  position: sticky;
  top: 110px; /* ajuste selon la hauteur de ton header */
}
/* ============================================================
   AREA PAGE — fixes UI (button contrast + wide card alignment)
   ============================================================ */

/* 1) Hero: bouton outline blanc sur blanc -> le rendre lisible */
.area-hero .area-hero__actions .btn-light-outline{
  opacity: 1 !important;
  color: #0b1220 !important;
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(15, 23, 42, .18) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.08) !important;
  backdrop-filter: blur(8px);
}
.area-hero .area-hero__actions .btn-light-outline:hover{
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(15, 23, 42, .26) !important;
}
.area-hero .area-hero__actions .btn-light-outline:focus-visible{
  outline: 3px solid rgba(37,185,215,.35);
  outline-offset: 2px;
}

/* (option) Si ton layout a parfois les boutons trop collés */
.area-hero__actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* 2) Carte wide quand count=1 : l’image ne doit JAMAIS recouvrir le texte */
.page-area .list-grid--cards[data-count="1"] > a.card{
  display: grid !important;
  grid-template-columns: 360px minmax(0, 1fr) !important;
  align-items: stretch !important;

  overflow: hidden;
}

/* Reset fort: si ton thème positionne .img en absolute dans les cards */
.page-area .list-grid--cards[data-count="1"] > a.card .img{
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;

  z-index: 1 !important;
  border-radius: 18px 0 0 18px;
}

/* Le texte doit passer au-dessus si jamais il y a un z-index dans le thème */
.page-area .list-grid--cards[data-count="1"] > a.card .body{
  position: relative !important;
  z-index: 2 !important;
  min-width: 0;
  padding: 18px 22px !important;

  /* reset si ton thème met des margins bizarres */
  margin: 0 !important;
}

/* Image cover stable */
.page-area .list-grid--cards[data-count="1"] > a.card .img picture,
.page-area .list-grid--cards[data-count="1"] > a.card .img img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Mobile: repasse en vertical */
@media (max-width: 900px){
  .page-area .list-grid--cards[data-count="1"] > a.card{
    grid-template-columns: 1fr !important;
  }
  .page-area .list-grid--cards[data-count="1"] > a.card .img{
    border-radius: 18px 18px 0 0;
  }
}
/* ============================================================
   MOBILE HARDENING — Areas detail page
   ============================================================ */

@media (max-width: 640px){

  /* Hero: titre + lead lisibles, sans débordement */
  .area-hero__title{
    font-size: clamp(30px, 9vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.02em;
  }
  .area-hero__lead{
    font-size: 13px;
    line-height: 1.35;
  }

  /* Pills: wrap propre */
  .area-hero__meta{
    flex-wrap: wrap;
    gap: 8px;
  }

  /* CTA: full width = meilleur confort tactile */
  .area-hero__actions{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .area-hero__actions .btn{
    width: 100%;
    justify-content: center;
  }

  /* Aside sticky -> OFF sur mobile (évite comportements bizarres) */
  .area-aside__card{
    position: static !important;
    top: auto !important;
  }

  /* Carte wide (count=1): padding optimisé mobile */
  .page-area .list-grid--cards[data-count="1"] > a.card .body{
    padding: 14px 16px !important;
  }
}
/* MOBILE 1000% — header/topbar/hero safe */
@media (max-width: 640px){

  /* Topbar: pas d’overflow, wrap propre */
  .topbar .inner{
    display:flex;
    gap:8px;
    justify-content:center;
    text-align:center;
    padding: 8px 14px;
  }
  .topbar .inner span{
    white-space: normal;
    line-height: 1.25;
  }

  /* Hero CTA full-width + finger friendly */
  .area-hero__actions{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .area-hero__actions .btn{
    width: 100%;
    justify-content: center;
    min-height: 44px; /* Apple HIG */
  }

  /* Sticky aside OFF sur mobile (évite les sauts) */
  .area-aside__card{
    position: static !important;
    top: auto !important;
  }

  /* Empêche les scroll horizontaux */
  html, body{ overflow-x:hidden; }
}
/* ----------------------------
   Front utilities (no inline)
----------------------------- */
.u-mt-6{margin-top:6px}
.u-mt-10{margin-top:10px}
.u-mt-12{margin-top:12px}
.u-mt-14{margin-top:14px}
.u-mt-16{margin-top:16px}
.u-mt-18{margin-top:18px}

.full-span{grid-column:1/-1}

/* Media blocks */
.card-media,
.da-media{
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:18px;
}
.card-media picture, .card-media img,
.da-media picture, .da-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Header CTAs */
.detail-header__ctas{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Titles */
.section-title{margin:0 0 12px}

/* Links */
.link-underlined{
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Text */
.lead--muted{color:var(--text-muted, rgba(245,242,234,.82))}
.text-muted{color:var(--text-muted, rgba(245,242,234,.82)); line-height:1.8}
.hint{color:var(--text-muted-2, rgba(245,242,234,.7)); font-size:12px; line-height:1.6}

/* Notice */
.notice{
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.notice__sub{margin-top:6px; color:var(--text-muted-2, rgba(245,242,234,.78)); line-height:1.7}

/* Button row */
.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.btn-block{width:100%; display:flex; justify-content:center}

/* Gallery grid */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
}
@media (max-width:980px){ .gallery-grid{grid-template-columns:repeat(3, 1fr)} }
@media (max-width:640px){ .gallery-grid{grid-template-columns:repeat(2, 1fr)} }

.gallery-thumb{
  border-radius:14px;
  overflow:hidden;
  background:rgba(0,0,0,.08);
}
.gallery-thumb a{display:block}

/* Mobile CTA bar */
.mobile-cta-bar{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  display:none;
  gap:10px;
  z-index:50;
}
.mobile-cta-bar .btn{flex:1; justify-content:center}
@media (max-width:820px){ .mobile-cta-bar{display:flex} }
/* ==========================================================================
   Dubai Asset — Front UX Patch (Off-plan + Project) — 2026-03-01
   - Fix anchors (sticky nav overlay)
   - Better contrast inside cards
   - Gallery grid + media ratios
   - Utilities used by updated templates
   ========================================================================== */

/* Utilities */
.u-mt-6{margin-top:6px}
.u-mt-10{margin-top:10px}
.u-mt-12{margin-top:12px}
.u-mt-14{margin-top:14px}
.u-mt-16{margin-top:16px}
.u-mt-18{margin-top:18px}
.full-span{grid-column:1/-1}

/* Anchor offset (sticky header + anchor nav) */
:root{
  --header-h: 76px; /* ajuste si besoin */
  --anchor-h: 56px;
  --sticky-offset: calc(var(--header-h) + var(--anchor-h) + 12px);
}
html{ scroll-padding-top: var(--sticky-offset); }
#overview, #gallery, #payment-plan, #location, #faq, #contact{
  scroll-margin-top: var(--sticky-offset);
}

/* Anchor nav premium */
.anchor-nav{
  position: sticky;
  top: calc(var(--header-h) + 8px);
  z-index: 50;
  background: rgba(17, 24, 39, .82);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
}
@media (max-width: 820px){
  .anchor-nav{
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    padding:8px;
  }
  .anchor-nav a{ display:inline-flex; padding:8px 10px; font-size:12px; }
}

/* Media ratios */
.ratio-16x10{
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 18px;
}
.card-media picture, .card-media img,
.da-media picture, .da-media img,
.gallery-thumb picture, .gallery-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Header CTAs */
.detail-header__ctas{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Titles */
.section-title{margin:0 0 12px}

/* Links */
.link-underlined{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Contrast: scope to front pages only */
.offplan-page .admin-card,
.project-page .admin-card{
  color: #0f172a;
}
.offplan-page .admin-card p,
.offplan-page .admin-card li,
.project-page .admin-card p,
.project-page .admin-card li{
  color: #475569;
}
.offplan-page .hint,
.project-page .hint{
  color:#64748b;
  font-size:12px;
  line-height:1.6;
}
.project-page .lead--muted{
  color: rgba(245,242,234,.82);
}
.project-page .text-muted{
  color:#475569;
  line-height:1.8;
}

/* Notice */
.notice{
  padding:14px;
  border-radius:14px;
  background: rgba(15, 23, 42, .03);
  border: 1px solid rgba(15, 23, 42, .08);
}
.notice__sub{
  margin-top:6px;
  color:#64748b;
  line-height:1.7;
}

/* Button rows */
.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.btn-block{width:100%; display:flex; justify-content:center}

/* Gallery grid */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
}
@media (max-width:980px){ .gallery-grid{grid-template-columns:repeat(3, 1fr)} }
@media (max-width:640px){ .gallery-grid{grid-template-columns:repeat(2, 1fr)} }

.gallery-thumb{
  border-radius:14px;
  overflow:hidden;
  background: rgba(15, 23, 42, .04);
}
.gallery-thumb a{display:block}

/* Checklist */
.checklist{
  margin:10px 0 0;
  padding-left:18px;
  color:#475569;
}
.checklist li{ margin:6px 0 }

/* Mobile CTA bar */
.mobile-cta-bar{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: none;
  gap: 10px;
  z-index: 60;
}
.mobile-cta-bar .btn{ flex:1; justify-content:center }
@media (max-width: 820px){ .mobile-cta-bar{ display:flex } }
/* ==========================================================================
   Dubai Asset — Header & Topbar Patch — 2026-03-01
   ========================================================================== */

:root{
  /* Ajuste si besoin selon ton rendu réel */
  --topbar-h: 34px;
  --header-h: 76px;

  /* anchor nav already uses --anchor-h */
  --anchor-h: 56px;

  --header-total: calc(var(--topbar-h) + var(--header-h));
}

/* Topbar premium */
.topbar{
  background: rgba(15, 23, 42, .92);
  color: rgba(255,255,255,.90);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.topbar .inner{
  display:flex;
  align-items:center;
  gap:10px;
  min-height: var(--topbar-h);
  font-size: 13px;
  letter-spacing: .2px;
}
.topbar .dot{
  color: rgba(255,255,255,.75);
  font-size: 12px;
}

/* Header height hint (for sticky offsets) */
.header{
  /* si ton header est sticky/fixed dans ton CSS existant,
     ces variables servent aux ancres */
}

/* Anchor offsets (anti “titre caché”) */
:root{
  --sticky-offset: calc(var(--header-total) + var(--anchor-h) + 12px);
}
html{ scroll-padding-top: var(--sticky-offset); }
#overview, #gallery, #payment-plan, #location, #faq, #contact{
  scroll-margin-top: var(--sticky-offset);
}

/* Anchor nav: position sous header+topbar */
.anchor-nav{
  top: calc(var(--header-total) + 8px);
}

/* Search chips (mobile) */
.header-search-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 10px;
}
.header-search-chips .chip{
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(15, 23, 42, .04);
  color: rgba(15, 23, 42, .86);
}
.header-search-chips .chip:hover{
  background: rgba(15, 23, 42, .07);
}

/* Mobile header spacing */
@media (max-width: 820px){
  :root{
    --header-h: 72px;
    --anchor-h: 52px;
  }
  .topbar .inner{ font-size: 12px; }
  .header-search-row{ padding-top: 8px; }
}
/* ==========================================================================
   DubaiAsset — Project page fixes (contrast + lightbox centering) — 2026-03-01
   ========================================================================== */

/* 1) Supprimer l'ancien menu noir flottant (au cas où il traîne encore) */
.anchor-nav{ display:none !important; }

/* 2) Contraste (trop clair sur clair) — scope project page */
.project-page{
  --p-text: #0f172a;
  --p-muted: #334155;
  --p-muted-2:#64748b;
  --p-border:#e2e8f0;
  --p-soft:  #f1f5f9;
}

.project-page .breadcrumbs,
.project-page .breadcrumbs a{
  color: var(--p-muted-2);
}
.project-page .breadcrumbs a:hover{ color: var(--p-text); }

.project-page .page-title{ color: var(--p-text); }
.project-page .lead{ color: var(--p-muted); }
.project-page .lead--muted{ color: var(--p-muted); } /* <-- ton problème principal */

.project-page .meta .pill{
  background: var(--p-soft);
  border: 1px solid var(--p-border);
  color: var(--p-text);
}

.project-page .admin-card{ color: var(--p-text); }
.project-page .admin-card p,
.project-page .admin-card li{ color: var(--p-muted); }

.project-page .hint{ color: var(--p-muted-2); }
.project-page .text-muted{ color: var(--p-muted); line-height:1.8; }

.project-page .notice{
  background: #ffffff;
  border: 1px solid var(--p-border);
}
.project-page .notice__sub{ color: var(--p-muted-2); }

/* Jump links (remplace le menu noir) */
.jump-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}
.jump-links .chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--p-soft);
  border: 1px solid var(--p-border);
  color: var(--p-text);
  font-size: 13px;
  text-decoration: none;
}
.jump-links .chip:hover{
  background: #eaf0f7;
}

/* 3) Lightbox centering (Tobii-like controls: × ‹ ›) */
.tobii,
.tobii__overlay,
.tobii__slider,
.tobii__slide{
  align-items: center !important;
  justify-content: center !important;
}

.tobii__slide{
  display: flex !important;
}

.tobii__figure{
  margin: 0 auto !important;
  max-width: min(92vw, 1400px) !important;
}

.tobii__image{
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  max-height: calc(100vh - 140px) !important;
  object-fit: contain !important;
}

.tobii__caption,
.tobii__counter{
  max-width: min(92vw, 1400px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Petites retouches mobile */
@media (max-width: 820px){
  .jump-links .chip{ font-size:12px; padding:7px 10px; }
  .tobii__image{ max-height: calc(100vh - 170px) !important; }
}

/* ==========================================================================
   DubaiAsset — Project Page Polish (compact header + luxe typography + fixes)
   Date: 2026-03-02
   Fixes:
   - Top area less cluttered on project pages (hide global search row)
   - CTA buttons never overlap (flex layout)
   - No more white-on-white in FAQ
   - Lightbox image perfectly centered (H+V)
   - Gallery thumbs centered; floorplans use contain
   ========================================================================== */

/* 0) Reduce "too crowded" top on project pages */
.is-project-page .header-search-row{ display:none !important; }
.is-project-page .header .row{ padding: 14px 0; }
.is-project-page .topbar .inner{ padding: 8px 0; }

/* Less vertical padding for the project section itself */
.section.project-page{ padding: 56px 0 78px; }
@media (max-width: 720px){
  .section.project-page{ padding: 44px 0 72px; }
}

/* 1) Project hero layout (CTA to the right on desktop) */
.project-page .detail-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 22px;
}
.project-page .detail-header__main{ flex: 1 1 auto; min-width: 0; }
.project-page .detail-header__ctas{ flex: 0 0 auto; justify-content:flex-end; align-self:flex-start; }
.project-page .detail-header__ctas .btn{ white-space: nowrap; }

/* Keep it stacked on smaller screens */
@media (max-width: 980px){
  .project-page .detail-header{ flex-direction:column; }
  .project-page .detail-header__ctas{ width:100%; justify-content:flex-start; }
}

/* Meta pills (no overlap) */
.project-page .detail-header .meta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}
.project-page .detail-header .meta.meta--tight{ gap: 8px; }
.project-page .detail-header .pill{ padding: 7px 12px; font-size: 12px; }

/* Jump links: smaller + less space */
.project-page .jump-links{ margin-top: 10px; gap: 8px; }
.project-page .jump-links .chip{ padding: 7px 10px; font-size: 12px; }

/* 2) Luxury hero lead (the sentence you pointed out) */
.project-page .hero-lead{
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.65;
  letter-spacing: -0.01em;
  color: rgba(10, 26, 45, 0.86);
  max-width: 78ch;
}

/* 3) Fix "white on white" in FAQ (scope project page) */
.project-page .faq-item{
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(10, 26, 45, 0.10);
  border-radius: 14px;
  padding: 10px 12px;
}
.project-page .faq-item summary{
  color: rgba(10, 26, 45, 0.92);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.project-page .faq-item summary::marker{ color: rgba(193, 155, 83, 0.9); }
.project-page .faq-body{
  color: rgba(10, 26, 45, 0.72);
  margin-top: 8px;
}
.project-page .faq-item[open]{
  border-color: rgba(193, 155, 83, 0.30);
  box-shadow: 0 18px 46px rgba(10, 26, 45, 0.08);
}

/* 4) Gallery thumbs centering (H+V) + floorplans contain */
.gallery-thumb{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gallery-thumb button,
.gallery-thumb a,
.gallery-thumb picture{
  width: 100%;
  height: 100%;
  display:block;
}
.gallery-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.gallery-thumb.is-plan{ background: rgba(255,255,255,0.92); }
.gallery-thumb.is-plan img{ object-fit: contain; background: #fff; }

/* 5) Lightbox — perfect centering (H+V) for the custom <dialog> */
.lightbox[open]{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: hidden;
}
.lightbox__inner{
  width: min(1200px, 94vw);
  margin: 0;
}
.lightbox__figure{
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox__figure img{
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 170px);
  object-fit: contain;
}

/* Safety: controls always above image */
.lightbox__close,
.lightbox__nav{ z-index: 3; }

@media (max-width: 520px){
  .lightbox__figure img{ max-height: calc(100vh - 200px); }
}
/* Accessible headings (SEO/outline) without impacting design */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.u-mt-0{ margin-top:0 !important; }
.u-m-0{ margin:0 !important; }
.u-h-14{ height:14px; }
/* Blog article trust / EEAT / internal linking */
.blog-article-wrap{ max-width: 1180px; }
.blog-article-header{ margin-bottom: 18px; }
.blog-article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:12px;
}
.blog-article-meta .pill a{
  color: inherit;
  text-decoration: none;
}
.blog-article-meta .pill a:hover,
.blog-article-meta .pill a:focus-visible{
  text-decoration: underline;
}
.blog-hero-media{
  margin: 18px 0 0;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(10,26,45,.08);
  box-shadow: 0 18px 42px rgba(10,26,45,.08);
  background: rgba(255,255,255,.8);
}
.blog-hero-media__picture,
.blog-hero-media__img,
.blog-hero-media picture,
.blog-hero-media img{
  display:block;
  width:100%;
  height:100%;
}
.blog-hero-media img{
  object-fit: cover;
  aspect-ratio: 16 / 10;
}
.blog-article-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items:start;
  margin-top: 20px;
}
.blog-article-aside{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.blog-trust-card{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,244,236,.92));
  border: 1px solid rgba(10,26,45,.08);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 12px 32px rgba(10,26,45,.06);
}
.blog-trust-card h2{
  margin: 0 0 8px;
  font-size: 18px;
}
.blog-trust-card__lead{
  margin: 0 0 10px;
  color: rgba(10,26,45,.78);
  font-weight: 600;
}
.blog-trust-card__bio{
  margin: 10px 0 0;
  color: rgba(10,26,45,.72);
}
.blog-trust-list,
.blog-resource-list,
.blog-toc__list{
  margin: 0;
  padding-left: 18px;
  color: rgba(10,26,45,.78);
}
.blog-trust-list li + li,
.blog-resource-list li + li,
.blog-toc__list li + li{ margin-top: 8px; }
.blog-resource-list a,
.blog-toc__list a{
  color: rgba(10,26,45,.88);
  text-decoration: none;
}
.blog-resource-list a:hover,
.blog-resource-list a:focus-visible,
.blog-toc__list a:hover,
.blog-toc__list a:focus-visible{
  color: #0A1A2D;
  text-decoration: underline;
}
.blog-toc__list li.level-3{
  margin-left: 14px;
  list-style-type: circle;
}
.blog-article-main .admin-card{
  border-radius: 22px;
  overflow: hidden;
}
.blog-related{
  margin-top: 24px;
}
.blog-related-grid{
  display:grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 16px;
}
.blog-related-card{
  display:grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 14px;
  align-items:stretch;
  padding: 12px;
  border: 1px solid rgba(10,26,45,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 12px 32px rgba(10,26,45,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-related-card:hover,
.blog-related-card:focus-visible{
  transform: translateY(-2px);
  border-color: rgba(193,155,83,.38);
  box-shadow: 0 18px 38px rgba(10,26,45,.09);
}
.blog-related-card__img{
  overflow: hidden;
  border-radius: 14px;
  min-height: 100%;
}
.blog-related-card__img picture,
.blog-related-card__img img,
.blog-related-card__img-tag{
  display:block;
  width:100%;
  height:100%;
}
.blog-related-card__img img{
  object-fit: cover;
}
.blog-related-card__body h3{
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.3;
}
.blog-related-card__body p{
  margin: 0;
  color: rgba(10,26,45,.72);
}
@media (min-width: 980px){
  .blog-article-grid{
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  }
  .blog-article-aside{
    position: sticky;
    top: 92px;
  }
  .blog-related-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px){
  .blog-related-card{
    grid-template-columns: 1fr;
  }
  .blog-related-card__img{
    min-height: 180px;
  }
  .blog-trust-card{
    padding: 16px;
  }
}


/* ==========================================================================
   DubaiAsset — Lightbox V2 (modern, unified frame + caption bottom)
   Date: 2026-03-05
   Changes:
   - Caption/description always below the image (never on the side)
   - Unified image stage size (consistent viewing area)
   - Cleaner modern UI (glass panel, better controls)
   ========================================================================== */

.lightbox::backdrop{
  background: rgba(0,0,0,.92);
}

.lightbox__inner{
  position: relative;
  width: min(1320px, 96vw);
  margin: 0;
  padding: 14px;
  border-radius: 22px;
  background: rgba(10, 12, 18, .58);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 28px 92px rgba(0,0,0,.62);
  backdrop-filter: blur(12px);
}

.lightbox__figure{
  margin: 0;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 12px;
}

/* Unified viewing area */
.lightbox__stage{
  position: relative;
  height: min(74vh, 760px);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__stage img{
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Caption bar under the image */
.lightbox__caption{
  margin: 0 !important;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.32);
  color: rgba(245,242,234,.92);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lightbox__captionText{
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lightbox__counter{
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: rgba(245,242,234,.92);
}

/* Controls inside stage */
.lightbox__nav{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.38);
  color: rgba(245,242,234,.98);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

.lightbox__nav.prev{ left: 10px !important; }
.lightbox__nav.next{ right: 10px !important; }

.lightbox__close{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.42);
  color: rgba(245,242,234,.98);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

.lightbox__close:hover,
.lightbox__nav:hover{
  background: rgba(0,0,0,.54);
}

@media (max-width: 640px){
  .lightbox__inner{
    width: 96vw;
    padding: 10px;
    border-radius: 18px;
  }
  .lightbox__stage{
    height: min(66vh, 520px);
    border-radius: 16px;
  }
  .lightbox__caption{
    font-size: 12.5px;
  }
  .lightbox__nav{
    width: 42px;
    height: 42px;
  }
}


/* ==========================================================================
   DubaiAsset — Areas & Developers refresh (catalog + detail)
   Aligned with off-plan cards / mobile hardened / SEO-friendly hierarchy
   ========================================================================== */

.catalog-page{
  --c-text:#0f172a;
  --c-muted:#475569;
  --c-muted-2:#64748b;
  --c-border:#e2e8f0;
  --c-soft:#f8fafc;
}

.catalog-page .text-muted{
  color: var(--c-muted);
  line-height: 1.8;
  max-width: 72ch;
}

.catalog-page .results-meta{
  color: var(--c-muted-2);
  margin-top: 0;
}

.catalog-page .results-count{
  color: var(--c-text);
}

.catalog-page .catalog-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.catalog-page .catalog-grid > .card{
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

.catalog-page .catalog-grid > .card .body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-width:0;
}

.catalog-page .catalog-grid > .card h3{
  word-break: break-word;
}

.catalog-card__eyebrow{
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.catalog-card__summary{
  color: var(--c-muted) !important;
  min-height: auto !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.catalog-page .catalog-grid > .card .meta{
  margin-top: auto;
}

.catalog-card__media{
  position: relative;
}

.catalog-card__badge{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:999px;
  background: rgba(15, 23, 42, .78);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  font-size:12px;
  font-weight:600;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.catalog-card__logo{
  position:absolute;
  left:14px;
  bottom:14px;
  z-index:2;
  width:72px;
  height:72px;
  border-radius:18px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
  overflow:hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 1100px){
  .catalog-page .catalog-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .catalog-card__logo{
    width:64px;
    height:64px;
    border-radius:16px;
  }
}

/* Detail pages (areas + developers) reuse the project page shell */
.guide-page{
  --p-text:#0f172a;
  --p-muted:#334155;
  --p-muted-2:#64748b;
  --p-border:#e2e8f0;
  --p-soft:#f8fafc;
}

.guide-page .breadcrumbs,
.guide-page .breadcrumbs a{
  color: var(--p-muted-2);
}

.guide-page .breadcrumbs a:hover{
  color: var(--p-text);
}

.guide-page .page-title{
  color: var(--p-text);
}

.guide-page .lead,
.guide-page .text-muted{
  color: var(--p-muted);
}

.guide-page .text-muted{
  line-height:1.8;
}

.guide-page .hero-lead{
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.65;
  letter-spacing: -0.01em;
  color: rgba(10, 26, 45, 0.86);
  max-width: 78ch;
}

.guide-page .meta .pill{
  background: var(--p-soft);
  border: 1px solid var(--p-border);
  color: var(--p-text);
}

.guide-page .admin-card{
  color: var(--p-text);
}

.guide-page .admin-card p,
.guide-page .admin-card li{
  color: var(--p-muted);
}

.guide-page .hint{
  color: var(--p-muted-2);
  font-size:12px;
  line-height:1.6;
}

.guide-page .jump-links{
  margin-top: 10px;
  gap: 8px;
}

.guide-page .jump-links .chip{
  padding: 7px 10px;
  font-size: 12px;
  background: var(--p-soft);
  border: 1px solid var(--p-border);
  color: var(--p-text);
}

.guide-page .jump-links .chip:hover{
  background: #eef4f9;
}

.guide-page .guide-section-head{
  margin-bottom: 14px;
}

.guide-page .guide-hero{
  position: relative;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow2);
}

.guide-page .guide-hero__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(15,23,42,.04) 0%, rgba(15,23,42,.22) 55%, rgba(15,23,42,.58) 100%);
  pointer-events:none;
  z-index:1;
}

.guide-page .guide-hero__caption{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.guide-page .guide-hero__caption .badge{
  background: rgba(255,255,255,.92);
  color: #0f172a;
  border: 1px solid rgba(255,255,255,.92);
}

.guide-page .guide-hero__caption-text{
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(15,23,42,.25);
}

.guide-page .guide-hero__logo{
  position:absolute;
  left:16px;
  top:16px;
  z-index:2;
  width:80px;
  height:80px;
  border-radius:20px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 32px rgba(15,23,42,.18);
  overflow:hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.guide-page .guide-hero__badge{
  position:absolute;
  top:16px;
  right:16px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(15,23,42,.78);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  font-size:12px;
  font-weight:600;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.guide-page .guide-results .results-meta{
  color: var(--p-muted-2);
  margin-top: 0;
}

.guide-page .guide-results .results-count{
  color: var(--p-text);
}

.guide-page .guide-results .list-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.guide-page .guide-results[data-count="1"] .list-grid{
  grid-template-columns: 1fr;
}

.guide-page .guide-results .card{
  min-width: 0;
}

.guide-page .guide-panel .table{
  margin-top: 0;
}

.guide-page .guide-panel .table td{
  vertical-align: top;
}

.guide-page .guide-panel .table td:last-child{
  word-break: break-word;
}

.guide-page .guide-panel__bullets strong{
  color: var(--p-text);
}

.guide-page .detail-header__ctas .btn,
.guide-page .btn-row .btn,
.guide-page .guide-panel .btn{
  min-height: 44px;
}

#projects,
#highlights{
  scroll-margin-top: var(--sticky-offset);
}

@media (max-width: 1100px){
  .guide-page .guide-results .list-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px){
  .guide-page .detail{
    grid-template-columns: 1fr;
  }

  .guide-page .panel{
    position: static;
  }
}

@media (max-width: 640px){
  .guide-page .detail-header__ctas{
    width:100%;
  }

  .guide-page .detail-header__ctas .btn{
    width:100%;
    justify-content:center;
  }

  .guide-page .guide-hero__logo{
    width:68px;
    height:68px;
    border-radius:18px;
  }

  .guide-page .guide-hero__badge{
    max-width: calc(100% - 32px);
    white-space: normal;
  }

  .guide-page .guide-hero__caption{
    left:12px;
    right:12px;
    bottom:12px;
  }

  .guide-page .guide-hero__caption-text{
    font-size: 13px;
  }
}


/* ========================================================================== 
   Dubai Asset — Contrast Hardening & Visual Refresh — 2026-03-08
   Goals:
   - remove low-contrast white-on-white / light-on-light states
   - strengthen reading comfort on all light surfaces
   - modernize buttons, cards, forms, search and detail pages
   ========================================================================== */

:root{
  --bg:#f6f4ef;
  --bg2:#ffffff;
  --text:#101828;
  --muted:rgba(16,24,40,.82);
  --muted2:rgba(16,24,40,.68);
  --text-muted:#475569;
  --text-muted-2:#64748b;
  --gold:#c9a35d;
  --gold-light:#e0bf80;
  --gold-dark:#8a6a2e;
  --gold-ink:#6f531d;
  --panel:rgba(255,255,255,.94);
  --panel2:rgba(255,255,255,.88);
  --border:rgba(15,23,42,.12);
  --border2:rgba(15,23,42,.08);
  --surface-soft:#f8fafc;
  --surface-warm:#fbf7f0;
  --success:#0f7a43;
  --success-2:#198754;
  --shadow:0 20px 50px rgba(15,23,42,.10);
  --shadow2:0 12px 30px rgba(15,23,42,.07);
}

body{
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 14% -8%, rgba(201,163,93,.14), transparent 66%),
    radial-gradient(1000px 720px at 92% 8%, rgba(14,124,134,.10), transparent 62%),
    linear-gradient(180deg, #fcfbf8 0%, var(--bg) 100%);
}

.section h2,
.page-title,
.card h3,
.admin-card h2,
.admin-card h3,
.table td,
.table th,
.notice strong,
.form-legend{ color: var(--deep-blue); }

.lead{ color: var(--muted); }
.text-muted,
.lead--muted,
.form-disclaimer{ color: var(--text-muted); }
.hint,
.form-hint,
.notice__sub{ color: var(--text-muted-2); }
label,
.form-label{ color:#334155; font-weight:600; }

.breadcrumbs,
.breadcrumbs a{ color:#64748b; }
.breadcrumbs a:hover{ color:#0f172a; text-decoration:underline; }

.badge,
.pill{
  background:rgba(255,255,255,.96);
  border-color:rgba(15,23,42,.10);
  color:#334155;
  box-shadow:0 8px 18px rgba(15,23,42,.06);
}
.badge:hover{
  color:var(--gold-dark);
  border-color:rgba(138,106,46,.24);
}

.btn{
  min-height:48px;
  padding:14px 26px;
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:0 12px 28px rgba(15,23,42,.10);
}
.btn:hover{ transform:translateY(-2px); }
.btn-gold{
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color:var(--deep-blue);
  border:1px solid rgba(138,106,46,.16);
  box-shadow:0 18px 40px rgba(201,163,93,.22);
}
.btn-gold:hover,
.btn-gold:focus-visible{ color:var(--deep-blue); }
.btn-dark{
  background:linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color:#fff;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 18px 38px rgba(15,23,42,.18);
}
.btn-outline{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(15,23,42,.14);
  color:#0f172a;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}
.btn-outline:hover,
.btn-outline:focus-visible{
  background:#fff;
  border-color:rgba(138,106,46,.35);
  color:var(--deep-blue);
}
.btn-light-outline{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.92);
  color:var(--deep-blue);
  box-shadow:0 14px 30px rgba(15,23,42,.14);
}
.btn-light-outline:hover,
.btn-light-outline:focus-visible{
  background:#fff;
  border-color:#fff;
  color:var(--deep-blue);
}
.btn-whatsapp{
  background:linear-gradient(135deg, var(--success) 0%, var(--success-2) 100%);
  color:#fff;
  border:1px solid rgba(15,122,67,.34);
  box-shadow:0 18px 44px rgba(15,122,67,.24);
}
.btn-whatsapp:hover{ box-shadow:0 24px 56px rgba(15,122,67,.30); }

.mobile-menu__langs a.active,
.lang-pill a.active{
  color:var(--deep-blue);
  border-color:rgba(138,106,46,.12);
}
.lang-pill a{ color:#334155; font-weight:600; }

.header,
.header.scrolled,
.nav-toggle,
.menu-close,
.icon-pill,
.mobile-menu__panel,
.search-dropdown,
.card,
.admin-card,
.panel{
  box-shadow:0 14px 38px rgba(15,23,42,.08);
}
.header{
  background:rgba(255,255,255,.94);
  border-bottom:1px solid rgba(15,23,42,.08);
}
.header.scrolled{
  background:rgba(255,255,255,.98);
}
.nav{ color:#334155; }
.nav a:hover,
.nav a.active{ color:var(--deep-blue); }
.icon-pill,
.nav-toggle,
.menu-close{
  background:#fff;
  border-color:rgba(15,23,42,.12);
}
.mobile-menu__panel{
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.98) 100%);
}
.mobile-nav a{
  background:#fff;
  border-color:rgba(15,23,42,.08);
  color:#0f172a;
}
.mobile-nav a:hover{
  background:rgba(201,163,93,.10);
  border-color:rgba(201,163,93,.22);
}
.mobile-nav a.active{
  color:#0f172a;
}

.glass{
  background:linear-gradient(180deg, rgba(10,26,45,.58) 0%, rgba(10,26,45,.78) 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 28px 64px rgba(2,6,23,.26), inset 0 1px 0 rgba(255,255,255,.08);
}
.glass:hover{
  box-shadow:0 34px 78px rgba(2,6,23,.30), inset 0 1px 0 rgba(255,255,255,.10);
}
.process-card h2,
.process-card h3,
.process-card p,
.picks-head h3,
.picks-link,
.pick__title,
.pick__meta,
.pick__price,
.mini strong,
.mini span,
.hero .sub,
.cta-link{ text-shadow:0 1px 3px rgba(2,6,23,.26); }
.mini{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
}
.mini:hover{ background:rgba(255,255,255,.14); }
.hero .fade{
  background:
    radial-gradient(1200px 800px at 20% 25%, rgba(201,163,93,.22) 0%, transparent 60%),
    linear-gradient(90deg, rgba(10,26,45,.90) 0%, rgba(10,26,45,.60) 55%, rgba(10,26,45,.18) 100%),
    linear-gradient(180deg, rgba(10,26,45,.34) 0%, transparent 42%, rgba(246,244,239,.86) 91%, #f6f4ef 100%);
}

.card,
.admin-card,
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 100%);
  border-color:rgba(15,23,42,.08);
}
.card p,
.admin-card p,
.admin-card li,
.table td,
.table th,
.footer .muted,
.footer-bottom{ color:#475569; }
.card:hover,
.admin-card:hover,
.panel:hover{ box-shadow:0 18px 44px rgba(15,23,42,.10); }

.table{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
}
.table th{
  background:linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  color:#475569;
}
.table tbody tr:nth-child(even) td{ background:#fcfdff; }
.table tbody tr:hover td{ background:#f8fbff; }

.notice{
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.notice.ok{ border-color:rgba(15,122,67,.22); }
.notice.err{ border-color:rgba(185,28,28,.22); }

.input,
select,
textarea,
.header-search__input,
.search-page__row .input,
.search-page-row .input{
  background:#fff;
  color:#0f172a;
  border-color:rgba(15,23,42,.12);
  box-shadow:0 8px 20px rgba(15,23,42,.05);
}
.input::placeholder,
textarea::placeholder,
.header-search__input::placeholder{ color:#94a3b8; opacity:1; }
.input:focus,
select:focus,
textarea:focus,
.header-search__input:focus{
  border-color:rgba(138,106,46,.52);
  box-shadow:0 0 0 4px rgba(201,163,93,.12), 0 16px 32px rgba(15,23,42,.08);
}
.header-search-row{
  background:rgba(255,255,255,.95);
}
.header-search__btn{
  background:#fff;
  border-color:rgba(15,23,42,.12);
}
.search-dropdown{
  background:rgba(255,255,255,.99);
  border-color:rgba(15,23,42,.10);
}
.search-group__title{ color:#64748b; }
.search-hit{ color:#0f172a; }
.search-hit__sub{ color:#64748b; }
.search-viewall{ color:var(--gold-dark); }
.search-viewall:hover{ background:rgba(201,163,93,.10); }

.chip,
.header-search-chips .chip{
  background:#fff;
  border-color:rgba(15,23,42,.12);
  color:#334155;
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}
.chip button{ color:#475569; }
.chip button:hover{ color:var(--gold-dark); }
.header-search-chips .chip:hover,
.jump-links .chip:hover,
.guide-page .jump-links .chip:hover{
  background:rgba(201,163,93,.10);
  border-color:rgba(201,163,93,.24);
  color:#0f172a;
}

.faq-item{
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border:1px solid rgba(15,23,42,.10);
}
.faq-item summary{ color:#0f172a; }
.faq-body{ color:#475569; }

.footer{
  background:linear-gradient(180deg, rgba(15,23,42,.03) 0%, rgba(255,255,255,.96) 100%);
}
.footer a:hover{ color:var(--deep-blue); }

.property-page{
  --p-text:#0f172a;
  --p-muted:#475569;
  --p-muted-2:#64748b;
  --p-border:rgba(15,23,42,.12);
  --p-soft:#f8fafc;
}
.property-page .breadcrumbs,
.property-page .breadcrumbs a{ color:var(--p-muted-2); }
.property-page .breadcrumbs a:hover{ color:var(--p-text); }
.property-page .page-title,
.property-page .admin-card,
.property-page .panel,
.property-page .table td:first-child{ color:var(--p-text); }
.property-page .lead,
.property-page .text-muted,
.property-page .admin-card p,
.property-page .admin-card li,
.property-page__summary{ color:var(--p-muted); }
.property-page .hint{ color:var(--p-muted-2); }
.property-page .meta .pill,
.property-page .notice{
  background:#fff;
  border-color:var(--p-border);
}
.property-page .faq-item{
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-color:var(--p-border);
}
.property-page .faq-item summary{ color:var(--p-text); }
.property-page .faq-body,
.property-page .notice__sub{ color:var(--p-muted); }
.property-page .table td,
.property-page .table th{ color:var(--p-text); }

/* ========================================================================== 
   Area guide refinement — showcase + continue hub
   ========================================================================== */
.guide-page .guide-showcase,
.guide-page .guide-next{
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 2.2vw, 30px);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(201,163,93,.14) 0%, transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.98) 100%);
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 18px 42px rgba(15,23,42,.08);
}

.guide-page .guide-showcase::before,
.guide-page .guide-next::before{
  content:'';
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg, rgba(201,163,93,.55), rgba(14,124,134,.25), transparent 70%);
}

.guide-page .guide-section-head--split{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.guide-page .guide-section-head__aside{
  flex:0 0 auto;
  padding-top:4px;
}

.guide-page .section-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-dark);
}

.guide-page .section-kicker::before{
  content:'';
  width:28px;
  height:1px;
  background:linear-gradient(90deg, var(--gold), rgba(14,124,134,.55));
}

.guide-page .badge--soft{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(201,163,93,.26);
  color: var(--gold-ink);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

.guide-page .guide-showcase .results-section--embedded{
  margin-top: 20px;
}

.guide-page .area-projects-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.guide-page .area-projects-grid[data-count="1"]{
  grid-template-columns: 1fr;
}

.guide-page .area-projects-grid > .area-project-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 14px 34px rgba(15,23,42,.06);
}

.guide-page .area-projects-grid > .area-project-card .body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-width:0;
  padding: 22px;
}

.guide-page .area-projects-grid > .area-project-card h3{
  font-size: clamp(18px, 1.45vw, 20px);
  line-height:1.35;
  margin:0 0 10px;
}

.guide-page .area-projects-grid > .area-project-card .catalog-card__eyebrow{
  margin-bottom:8px;
}

.guide-page .area-projects-grid > .area-project-card p{
  min-height:auto;
}

.guide-page .area-projects-grid > .area-project-card .catalog-card__summary{
  color: var(--p-muted) !important;
  margin-bottom: 0;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.guide-page .area-projects-grid > .area-project-card .meta{
  margin-top:auto;
}

.guide-page .guide-next__actions{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.guide-page .guide-next__actions--compact{
  margin-top: 16px;
}

.guide-page .guide-action-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  padding: 18px 20px 20px;
  border-radius: 20px;
  text-decoration:none;
  color: var(--p-text);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 10px 24px rgba(15,23,42,.05);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.guide-page .guide-action-card::after{
  content:'→';
  position:absolute;
  top:18px;
  right:18px;
  font-size:18px;
  color:rgba(15,23,42,.32);
  transition: transform .22s ease, color .22s ease;
}

.guide-page .guide-action-card:hover,
.guide-page .guide-action-card:focus-visible{
  transform: translateY(-4px);
  border-color: rgba(201,163,93,.34);
  box-shadow: 0 18px 34px rgba(15,23,42,.08);
}

.guide-page .guide-action-card:hover::after,
.guide-page .guide-action-card:focus-visible::after{
  transform: translateX(2px);
  color: var(--gold-dark);
}

.guide-page .guide-action-card__eyebrow{
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-dark);
}

.guide-page .guide-action-card strong{
  display:block;
  font-size:18px;
  line-height:1.35;
  padding-right:28px;
}

.guide-page .guide-action-card span:last-child{
  color: var(--p-muted);
  line-height:1.65;
  font-size:14px;
}

.guide-page .guide-next__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.guide-page .guide-next-card{
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(248,250,252,.98) 0%, rgba(255,255,255,.98) 100%);
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.guide-page .guide-next-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 10px;
}

.guide-page .guide-next-card__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-dark);
}

.guide-page .guide-next-card__eyebrow::before{
  content:'';
  width:22px;
  height:1px;
  background: linear-gradient(90deg, var(--gold), rgba(14,124,134,.45));
}

.guide-page .guide-next-card h3{
  margin:6px 0 0;
  font-size:20px;
  line-height:1.35;
}

.guide-page .guide-next-card > .text-muted{
  margin: 0 0 16px;
  max-width: none;
}

.guide-page .guide-link-list{
  display:grid;
  gap:10px;
}

.guide-page .guide-link-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  padding: 14px 14px 14px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(148,163,184,.18);
  color: var(--p-text);
  text-decoration:none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.guide-page .guide-link-row:hover,
.guide-page .guide-link-row:focus-visible{
  transform: translateX(2px);
  border-color: rgba(201,163,93,.30);
  box-shadow: 0 12px 24px rgba(15,23,42,.06);
}

.guide-page .guide-link-row__label{
  min-width:0;
  font-weight:600;
  line-height:1.45;
}

.guide-page .guide-link-row__meta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.guide-page .guide-link-row__icon{
  color: var(--p-muted-2);
  font-size:15px;
  line-height:1;
}

.guide-page .guide-link-row .pill{
  margin:0;
}

@media (max-width: 980px){
  .guide-page .guide-section-head--split{
    flex-direction:column;
  }

  .guide-page .guide-section-head__aside{
    padding-top:0;
  }

  .guide-page .area-projects-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px){
  .guide-page .guide-showcase,
  .guide-page .guide-next{
    padding: 18px;
  }

  .guide-page .guide-next__actions{
    grid-template-columns: 1fr;
  }

  .guide-page .guide-next-card{
    padding: 18px;
  }

  .guide-page .guide-next-card h3{
    font-size:18px;
  }

  .guide-page .area-projects-grid > .area-project-card .body{
    padding: 18px;
  }
}


/* ==========================================================================
   Unified section system — premium shells, research hubs and content blocks
   ========================================================================== */
.section-shell,
.section-showcase,
.section-hub,
.blog-related.section-shell{
  position:relative;
  overflow:hidden;
  padding:clamp(22px, 2.2vw, 30px);
  border-radius:26px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(201,163,93,.14) 0%, transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.985) 0%, rgba(248,250,252,.98) 100%);
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 18px 42px rgba(15,23,42,.08);
}

.section-shell::before,
.section-showcase::before,
.section-hub::before,
.blog-related.section-shell::before{
  content:'';
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg, rgba(201,163,93,.55), rgba(14,124,134,.25), transparent 70%);
}


.section-shell--showcase{
  background:
    radial-gradient(125% 145% at 100% 0%, rgba(201,163,93,.16) 0%, transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,250,252,.98) 100%);
}

.section-shell--hub{
  background:
    radial-gradient(120% 145% at 0% 0%, rgba(14,124,134,.10) 0%, transparent 42%),
    radial-gradient(120% 145% at 100% 100%, rgba(201,163,93,.10) 0%, transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,250,252,.98) 100%);
}

.section-shell--soft{
  background:
    radial-gradient(110% 140% at 0% 0%, rgba(14,124,134,.08) 0%, transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.985) 0%, rgba(249,250,252,.98) 100%);
}

.section-shell--cta{
  background:
    radial-gradient(100% 140% at 100% 100%, rgba(201,163,93,.12) 0%, transparent 46%),
    radial-gradient(110% 140% at 0% 0%, rgba(14,124,134,.06) 0%, transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.985) 0%, rgba(248,250,252,.98) 100%);
}

.section-shell--plain{
  background:linear-gradient(180deg, rgba(255,255,255,.985) 0%, rgba(248,250,252,.98) 100%);
}

.section-shell .guide-section-head,
.section-shell__head{
  margin-bottom:18px;
}

.section-shell .guide-section-head--split,
.section-shell__head--split{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.section-shell .guide-section-head__aside,
.section-shell__aside{
  flex:0 0 auto;
  padding-top:4px;
}

.section-kicker,
.section-shell__kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-dark);
}

.section-kicker::before,
.section-shell__kicker::before{
  content:'';
  width:28px;
  height:1px;
  background:linear-gradient(90deg, var(--gold), rgba(14,124,134,.55));
}

.badge--soft,
.section-shell__badge{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(201,163,93,.26);
  color:var(--gold-ink);
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}

.section-shell .section-title,
.blog-related.section-shell .section-title,
.section-shell h2.section-title,
.section-shell h3.section-title{
  margin:0;
}

.section-shell .text-muted{
  max-width:72ch;
}

.section-shell .lead{
  margin:6px 0 0;
}

.section-shell .btn-row{
  margin-top:18px;
}

.section-shell .btn-row .btn{
  min-height:44px;
}

.section-shell .results-section--embedded{
  margin-top:20px;
}

.section-project-grid,
.guide-page .area-projects-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
  align-items:stretch;
}

.section-project-grid[data-count="1"],
.guide-page .area-projects-grid[data-count="1"]{
  grid-template-columns:1fr;
}

.section-project-card,
.guide-page .area-projects-grid > .area-project-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
  background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 14px 34px rgba(15,23,42,.06);
}

.section-project-card .body,
.guide-page .area-projects-grid > .area-project-card .body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-width:0;
  padding:22px;
}

.section-project-card h3,
.guide-page .area-projects-grid > .area-project-card h3{
  font-size:clamp(18px, 1.45vw, 20px);
  line-height:1.35;
  margin:0 0 10px;
}

.section-project-card .catalog-card__eyebrow,
.guide-page .area-projects-grid > .area-project-card .catalog-card__eyebrow{
  margin-bottom:8px;
}

.section-project-card p,
.guide-page .area-projects-grid > .area-project-card p{
  min-height:auto;
}

.section-project-card .catalog-card__summary,
.guide-page .area-projects-grid > .area-project-card .catalog-card__summary{
  color:var(--p-muted) !important;
  margin-bottom:0;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.section-project-card .meta,
.guide-page .area-projects-grid > .area-project-card .meta{
  margin-top:auto;
}

.section-actions,
.guide-next__actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-top:18px;
}

.section-actions--compact,
.guide-next__actions--compact{
  margin-top:16px;
}

.section-action-card,
.guide-action-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  padding:18px 20px 20px;
  border-radius:20px;
  text-decoration:none;
  color:var(--p-text);
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border:1px solid rgba(148,163,184,.22);
  box-shadow:0 10px 24px rgba(15,23,42,.05);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.section-action-card::after,
.guide-action-card::after{
  content:'→';
  position:absolute;
  top:18px;
  right:18px;
  font-size:18px;
  color:rgba(15,23,42,.32);
  transition:transform .22s ease, color .22s ease;
}

.section-action-card:hover,
.section-action-card:focus-visible,
.guide-action-card:hover,
.guide-action-card:focus-visible{
  transform:translateY(-4px);
  border-color:rgba(201,163,93,.34);
  box-shadow:0 18px 34px rgba(15,23,42,.08);
}

.section-action-card:hover::after,
.section-action-card:focus-visible::after,
.guide-action-card:hover::after,
.guide-action-card:focus-visible::after{
  transform:translateX(2px);
  color:var(--gold-dark);
}

.section-action-card__eyebrow,
.guide-action-card__eyebrow{
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-dark);
}

.section-action-card strong,
.guide-action-card strong{
  display:block;
  font-size:18px;
  line-height:1.35;
  padding-right:28px;
}

.section-action-card span:last-child,
.guide-action-card span:last-child{
  color:var(--p-muted);
  line-height:1.65;
  font-size:14px;
}

.section-grid,
.guide-next__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:18px;
  margin-top:18px;
}

.section-card,
.guide-next-card{
  padding:22px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(248,250,252,.98) 0%, rgba(255,255,255,.98) 100%);
  border:1px solid rgba(148,163,184,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72), 0 10px 24px rgba(15,23,42,.04);
  min-width:0;
}

.section-card__head,
.guide-next-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}

.section-card__eyebrow,
.guide-next-card__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-dark);
}

.section-card__eyebrow::before,
.guide-next-card__eyebrow::before{
  content:'';
  width:22px;
  height:1px;
  background:linear-gradient(90deg, var(--gold), rgba(14,124,134,.45));
}

.section-card h3,
.guide-next-card h3{
  margin:6px 0 0;
  font-size:20px;
  line-height:1.35;
}

.section-card > .text-muted,
.guide-next-card > .text-muted{
  margin:0 0 16px;
  max-width:none;
}

.section-link-list,
.guide-link-list{
  display:grid;
  gap:10px;
}

.section-link-row,
.guide-link-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  padding:14px 14px 14px 16px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(148,163,184,.18);
  color:var(--p-text);
  text-decoration:none;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.section-link-row:hover,
.section-link-row:focus-visible,
.guide-link-row:hover,
.guide-link-row:focus-visible{
  transform:translateX(2px);
  border-color:rgba(201,163,93,.30);
  box-shadow:0 12px 24px rgba(15,23,42,.06);
}

.section-link-row__label,
.guide-link-row__label{
  min-width:0;
  font-weight:600;
  line-height:1.45;
}

.section-link-row__meta,
.guide-link-row__meta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.section-link-row__icon,
.guide-link-row__icon{
  color:var(--p-muted-2);
  font-size:15px;
  line-height:1;
}

.section-link-row .pill,
.guide-link-row .pill{
  margin:0;
}

.section-steps{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:16px;
  margin-top:14px;
}

.section-step{
  min-width:0;
  padding:18px 20px 20px;
  border-radius:20px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border:1px solid rgba(148,163,184,.22);
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}

.section-step strong{
  display:block;
  margin:0 0 8px;
  font-size:18px;
  line-height:1.35;
  color:#0f172a;
}

.section-step p{
  margin:0;
  color:#475569;
  line-height:1.65;
}

.section-mini-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
  margin-top:14px;
}

.section-mini-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  padding:20px;
  border-radius:20px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border:1px solid rgba(148,163,184,.22);
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}

.section-mini-card h3{
  margin:0;
  font-size:20px;
  line-height:1.35;
}

.section-mini-card p{
  margin:0;
  color:#475569;
  line-height:1.7;
}

.section-mini-card .btn,
.section-mini-card .btn-row .btn{
  min-height:44px;
}

.section-mini-card .btn-row{
  margin-top:auto;
}

.section-shell .notice{
  background:#fff;
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 10px 22px rgba(15,23,42,.05);
}

.section-shell .rich-content > :first-child{
  margin-top:0;
}

.section-shell .rich-content > :last-child{
  margin-bottom:0;
}

.project-sheet__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.project-sheet__update{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(148,163,184,.22);
  color:#475569;
  font-size:12px;
  font-weight:600;
  box-shadow:0 10px 22px rgba(15,23,42,.04);
}

.project-sheet__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.project-sheet__item{
  min-width:0;
  padding:16px 18px;
  border-radius:18px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border:1px solid rgba(148,163,184,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}

.project-sheet__item--wide{
  grid-column:1 / -1;
}

.project-sheet__k{
  display:block;
  margin-bottom:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-dark);
}

.project-sheet__v{
  display:block;
  color:#0f172a;
  font-weight:600;
  line-height:1.55;
}

.project-sheet__v a{
  color:inherit;
}

.project-sheet__v a:hover{
  color:var(--gold-dark);
}

.quick-shortlist-panel .form-grid{
  margin-top:12px;
}

@media (max-width: 980px){
  .section-shell .guide-section-head--split,
  .section-shell__head--split{
    flex-direction:column;
  }

  .section-shell .guide-section-head__aside,
  .section-shell__aside{
    padding-top:0;
  }

  .section-project-grid{
    grid-template-columns:1fr;
  }

  .project-sheet__grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 720px){
  .section-shell,
  .section-showcase,
  .section-hub,
  .blog-related.section-shell{
    padding:18px;
    border-radius:22px;
  }

  .section-actions,
  .guide-next__actions{
    grid-template-columns:1fr;
  }

  .section-grid,
  .guide-next__grid{
    grid-template-columns:1fr;
  }

  .section-card,
  .guide-next-card,
  .section-mini-card{
    padding:18px;
  }

  .section-project-card .body{
    padding:18px;
  }

  .project-sheet__head{
    flex-direction:column;
  }
}


/* ==========================================================================
   Unified section system — catalogue intros, search and entry pages
   ========================================================================== */

.pagehead.pagehead--section{
  margin-bottom:18px;
}

.pagehead.pagehead--section .page-title{
  margin-top:0;
}

.pagehead.pagehead--section > :last-child{
  margin-bottom:0;
}

.pagehead.pagehead--section .lead,
.pagehead.pagehead--section .text-muted{
  max-width:78ch;
}

.catalog-page .results-section.section-shell{
  margin-top:18px;
}

.catalog-page .results-section.section-shell .results-meta{
  margin:0 0 18px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(148,163,184,.16);
}

.catalog-page .results-section.section-shell .results-count{
  margin:0;
}

.catalog-page .results-section.section-shell .list-grid{
  margin-top:0;
}

.section-empty{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  padding:22px;
  border-radius:20px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border:1px solid rgba(148,163,184,.20);
  box-shadow:0 12px 26px rgba(15,23,42,.05);
}

.section-empty.full-span{
  grid-column:1 / -1;
}

.search-page-panel .search-page-form{
  margin:0;
}

.search-page-panel .lead{
  margin-bottom:0;
}

.search-group.section-shell{
  margin-top:16px;
}

.search-group__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.search-group__header h2,
.search-group__header .section-title{
  margin:0;
}

.search-group.section-shell .search-results-grid{
  margin-top:0;
}

.lang-entry-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
  margin-top:18px;
}

.lang-entry-card{
  height:100%;
}

.section-links-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
  margin-top:16px;
}

.section-link-tile{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  padding:18px;
  border-radius:18px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border:1px solid rgba(148,163,184,.18);
  text-decoration:none;
  color:#0f172a;
  box-shadow:0 10px 22px rgba(15,23,42,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.section-link-tile:hover,
.section-link-tile:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(193,155,83,.35);
  box-shadow:0 16px 28px rgba(15,23,42,.10);
}

.section-link-tile__eyebrow{
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-dark);
}

.section-link-tile__title{
  margin:0;
  font-size:19px;
  line-height:1.35;
  color:#0f172a;
}

.section-link-tile__text{
  margin:0;
  color:#475569;
  line-height:1.7;
}

.section-link-tile__footer{
  margin-top:auto;
  color:var(--gold-dark);
  font-weight:700;
}

@media (max-width: 720px){
  .pagehead.pagehead--section{
    margin-bottom:16px;
  }

  .section-empty{
    padding:18px;
  }

  .lang-entry-grid{
    grid-template-columns:1fr;
  }
}

/* ========================================================================== 
   Phase 1 + 2 + 3 — off-plan hub split, hero, shortcuts, FAQ and archive route
   ========================================================================== */
.offplan-page .catalog-switch{
  display:grid;
  gap:12px;
}

.offplan-page .catalog-switch__head{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.offplan-page .catalog-switch__head .section-kicker{
  margin-bottom:0;
}

.offplan-page .catalog-toggle{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.offplan-page .catalog-toggle__link{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:240px;
  padding:14px 18px;
  border-radius:18px;
  text-decoration:none;
  color:#0f172a;
  background:linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,250,252,.97) 100%);
  border:1px solid rgba(148,163,184,.22);
  box-shadow:0 12px 26px rgba(15,23,42,.05);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, color .22s ease;
}

.offplan-page .catalog-toggle__link:hover,
.offplan-page .catalog-toggle__link:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(201,163,93,.28);
  box-shadow:0 18px 34px rgba(15,23,42,.08);
}

.offplan-page .catalog-toggle__link.is-active{
  border-color:rgba(201,163,93,.40);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(14,124,134,.10) 0%, transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.995) 0%, rgba(248,250,252,.98) 100%);
  box-shadow:0 18px 36px rgba(15,23,42,.08);
}

.offplan-page .catalog-toggle__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:34px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(15,23,42,.05);
  border:1px solid rgba(15,23,42,.08);
  color:#334155;
  font-size:12px;
  font-weight:800;
  line-height:1;
}

.offplan-page .catalog-toggle__link.is-active .catalog-toggle__count{
  background:rgba(201,163,93,.14);
  border-color:rgba(201,163,93,.24);
  color:var(--gold-ink);
}

.offplan-page .catalog-mode-note,
.offplan-page .catalog-results-note{
  margin:0;
  max-width:78ch;
}

.offplan-page .catalog-results-note{
  margin-bottom:14px;
}

.offplan-page .results-meta--catalog{
  margin-bottom:8px;
}

.offplan-page .card--archive{
  background:linear-gradient(180deg, rgba(255,255,255,.985) 0%, rgba(248,250,252,.97) 100%);
  border-color:rgba(148,163,184,.24);
}

.offplan-page .card--archive::before{
  opacity:1;
  background:linear-gradient(90deg, rgba(153,27,27,.58) 0%, rgba(148,163,184,.46) 100%);
}

.offplan-page .card--archive:hover{
  border-color:rgba(153,27,27,.20);
}

.offplan-page .card--archive .meta{
  border-top-color:rgba(153,27,27,.10);
}

.catalog-card__eyebrow--archive{
  color:#991b1b;
}

.catalog-card__eyebrow--archive::before{
  background:linear-gradient(90deg, rgba(153,27,27,.82) 0%, rgba(148,163,184,.35) 100%);
}

.catalog-card__eyebrow--comingsoon{
  color:#0e7c86;
}

.catalog-card__eyebrow--comingsoon::before{
  background:linear-gradient(90deg, rgba(14,124,134,.82) 0%, rgba(201,163,93,.35) 100%);
}

.offplan-page .offplan-pagehead{
  display:grid;
  gap:22px;
}

.offplan-page .offplan-pagehead__topline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}

.offplan-page .offplan-pagehead .page-title{
  margin-bottom:10px;
}

.offplan-page .offplan-pagehead__note{
  margin:0;
  max-width:80ch;
}

.offplan-page .offplan-hero-metrics{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

.offplan-page .offplan-metric-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  padding:18px 18px 16px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,250,252,.98) 100%);
  border:1px solid rgba(148,163,184,.20);
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}

.offplan-page .offplan-metric-card strong{
  display:block;
  color:#0f172a;
  font-size:clamp(22px, 2vw, 28px);
  line-height:1.1;
  letter-spacing:-.03em;
}

.offplan-page .offplan-metric-card span{
  color:#475569;
  font-size:13px;
  font-weight:600;
  line-height:1.45;
}

.offplan-page .offplan-quick-actions__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}

.offplan-page .offplan-quick-action{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  padding:15px 16px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,250,252,.98) 100%);
  border:1px solid rgba(148,163,184,.20);
  color:#0f172a;
  text-decoration:none;
  font-weight:700;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.offplan-page .offplan-quick-action:hover,
.offplan-page .offplan-quick-action:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(201,163,93,.28);
  box-shadow:0 16px 28px rgba(15,23,42,.08);
}

.offplan-page .offplan-quick-action--accent{
  background:linear-gradient(135deg, rgba(201,163,93,.18) 0%, rgba(224,191,128,.24) 100%);
  border-color:rgba(138,106,46,.24);
  color:var(--gold-ink, #7a5b22);
}

.offplan-page .offplan-faq__list{
  display:grid;
  gap:12px;
}

.offplan-page .offplan-faq__item{
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,250,252,.98) 100%);
  border:1px solid rgba(148,163,184,.20);
  box-shadow:0 10px 24px rgba(15,23,42,.05);
  overflow:hidden;
}

.offplan-page .offplan-faq__item summary{
  list-style:none;
  cursor:pointer;
  padding:18px 20px;
  font-weight:700;
  color:#0f172a;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.offplan-page .offplan-faq__item summary::-webkit-details-marker{
  display:none;
}

.offplan-page .offplan-faq__item summary::after{
  content:'+';
  flex:0 0 auto;
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(15,23,42,.05);
  border:1px solid rgba(15,23,42,.08);
}

.offplan-page .offplan-faq__item[open] summary::after{
  content:'–';
}

.offplan-page .offplan-faq__answer{
  padding:0 20px 18px;
}

.offplan-page .offplan-faq__answer p{
  margin:0;
  color:#475569;
  line-height:1.75;
}

@media (max-width: 980px){
  .offplan-page .offplan-hero-metrics{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px){
  .offplan-page .catalog-toggle{
    display:grid;
    grid-template-columns:1fr;
  }

  .offplan-page .catalog-toggle__link{
    min-width:0;
    width:100%;
  }

  .offplan-page .offplan-hero-metrics{
    grid-template-columns:1fr;
  }

  .offplan-page .offplan-quick-actions__grid{
    grid-template-columns:1fr;
  }
}


/* ==========================================================================
   Project page polish — resources, continuation hub and payment-plan signal
   ========================================================================== */
body.project-modal-open{
  overflow:hidden;
}

.project-page .project-header-badges .badge--project-context-archive{
  background:linear-gradient(180deg, rgba(15,23,42,.98) 0%, rgba(30,41,59,.98) 100%);
  border-color:rgba(15,23,42,.12);
  color:#fff;
}

.project-page .detail,
.project-page .detail > .main,
.project-page .project-side-stack.panel,
.project-page .project-side-stack__inner{
  overflow:visible;
}

.project-page .project-side-stack.panel{
  position:sticky;
  top:calc(var(--sticky-top, 100px) + 8px);
  align-self:start;
  display:block;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  max-height:calc(100vh - var(--sticky-top, 100px) - 16px);
  max-height:calc(100dvh - var(--sticky-top, 100px) - 16px);
  overflow-y:auto;
  overflow-x:visible;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(148,163,184,.44) transparent;
}

.project-page .project-side-stack.panel::-webkit-scrollbar{
  width:8px;
}

.project-page .project-side-stack.panel::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.4);
  border-radius:999px;
}

.project-page .project-side-stack.panel::-webkit-scrollbar-track{
  background:transparent;
}

.project-page .project-side-stack__inner{
  display:grid;
  gap:20px;
}

.project-page .project-side-stack .admin-card{
  margin:0;
}

.project-page .project-side-stack .project-sticky-card{
  position:relative;
  top:auto;
  z-index:auto;
  scroll-margin-top:calc(var(--sticky-top, 100px) + 16px);
  transition:box-shadow .22s ease, transform .22s ease;
}

.project-page .project-media-card{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.project-page .project-media-card .text-muted{
  margin:0;
}

.project-page .project-media-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.project-page .project-media-card__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-dark);
}

.project-page .project-media-card__eyebrow::before{
  content:'';
  width:20px;
  height:1px;
  background:linear-gradient(90deg, var(--gold), rgba(14,124,134,.45));
}

.project-page .project-media-card h3{
  margin:8px 0 0;
  font-size:22px;
  line-height:1.3;
}

.project-page .project-media-card__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  min-height:48px;
  padding:0 14px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(15,23,42,.96) 0%, rgba(30,41,59,.96) 100%);
  color:#fff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 14px 28px rgba(15,23,42,.12);
}

.project-page .project-media-card__badge--play{
  font-size:18px;
  letter-spacing:0;
}

.project-page .project-media-card__preview{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16 / 10;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(148,163,184,.18);
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72), 0 16px 34px rgba(15,23,42,.06);
  color:inherit;
  text-decoration:none;
  isolation:isolate;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.project-page .project-media-card__preview:hover,
.project-page .project-media-card__preview:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(201,163,93,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78), 0 18px 38px rgba(15,23,42,.08);
}

.project-page .project-media-card__preview--pdf{
  min-height:232px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(15,23,42,.05) 100%),
    linear-gradient(135deg, rgba(248,250,252,.96) 0%, rgba(255,255,255,.98) 100%);
}

.project-page .project-media-card__preview--pdf iframe,
.project-page .project-media-card__preview--pdf .project-media-card__pdf-object{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  min-height:232px;
  border:0;
  background:#fff;
  pointer-events:none;
}

.project-page .project-media-card__preview--pdf .project-media-card__pdf-object img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.project-page .project-media-card__preview--pdf::before{
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height:48%;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(15,23,42,.16) 100%);
  z-index:1;
}

.project-page .project-media-card__preview-badge{
  position:absolute;
  top:16px;
  left:16px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:52px;
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#0f172a;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 10px 20px rgba(15,23,42,.12);
}

.project-page .project-media-card__preview-badge--play{
  font-size:18px;
  letter-spacing:0;
}

.project-page .project-media-card__overlay-btn{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  width:100%;
  padding:18px;
  border:0;
  background:transparent;
  cursor:pointer;
}

.project-page .project-media-card__overlay-btn:focus-visible,
.project-page .project-media-card__preview--video:focus-visible{
  outline:3px solid rgba(201,163,93,.34);
  outline-offset:3px;
}

.project-page .project-media-card__overlay-btn span,
.project-page .project-media-card__play-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  background:rgba(15,23,42,.84);
  color:#fff;
  font-weight:700;
  line-height:1;
  box-shadow:0 12px 26px rgba(15,23,42,.18);
}

.project-page .project-media-card__overlay-btn span::after,
.project-page .project-media-card__play-cta::after{
  content:'→';
  font-size:15px;
  line-height:1;
}

.project-page .project-media-card__preview--video{
  min-height:232px;
  padding:0;
  border-color:rgba(30,41,59,.08);
  background:#0f172a;
  color:inherit;
  text-align:left;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}

.project-page .project-media-card__preview--video picture,
.project-page .project-media-card__preview--video img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  min-height:232px;
  object-fit:cover;
}

.project-page .project-media-card__preview--video::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(15,23,42,.10) 0%, rgba(15,23,42,.62) 100%);
}

.project-page .project-media-card__play-cta{
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:2;
}

.project-page .project-media-card__preview--video img,
.project-page .project-media-card__preview--video .project-media-card__preview-badge,
.project-page .project-media-card__preview--video .project-media-card__play-cta{
  pointer-events:none;
}

.project-page .project-media-card__actions{
  margin-top:2px;
  align-items:stretch;
}

.project-page .project-media-card__actions .btn{
  min-height:46px;
}

.project-page .project-plan-signal{
  padding:18px 20px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.98) 100%);
  border:1px solid rgba(148,163,184,.20);
  box-shadow:0 12px 24px rgba(15,23,42,.05);
}

.project-page .project-plan-signal strong{
  display:block;
  font-size:18px;
  line-height:1.35;
  color:var(--p-text);
}

.project-page .project-plan-signal .text-muted{
  margin:10px 0 0;
}

.project-page .project-plan-signal__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-dark);
}

.project-page .project-plan-signal__eyebrow::before{
  content:'';
  width:20px;
  height:1px;
  background:linear-gradient(90deg, var(--gold), rgba(14,124,134,.45));
}

.project-page .project-plan-signal__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.project-page .project-explore-panel{
  overflow:hidden;
}

.project-page .project-explore-panel__head{
  margin-bottom:6px;
}

.project-page .project-explore-panel__aside{
  padding-top:6px;
}

.project-page .project-explore-actions{
  margin-top:18px;
}

.project-page .project-explore-grid{
  margin-top:18px;
}

.project-page .project-explore-card{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.project-page .project-related-mini-grid{
  display:grid;
  gap:16px;
  margin-top:18px;
}

.project-page .project-related-mini{
  display:grid;
  grid-template-columns:148px minmax(0, 1fr);
  gap:18px;
  min-width:0;
  padding:16px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(148,163,184,.16);
  text-decoration:none;
  color:var(--p-text);
  box-shadow:0 12px 28px rgba(15,23,42,.04);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.project-page .project-related-mini:hover,
.project-page .project-related-mini:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(201,163,93,.30);
  box-shadow:0 18px 34px rgba(15,23,42,.08);
}

.project-page .project-related-mini__media{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:#e2e8f0;
}

.project-page .project-related-mini__media picture,
.project-page .project-related-mini__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.project-page .project-related-mini__status{
  position:absolute;
  top:10px;
  left:10px;
  z-index:1;
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.86);
  color:#fff;
  font-size:11px;
  font-weight:700;
}

.project-page .project-related-mini__body{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.project-page .project-related-mini h4{
  margin:0 0 10px;
  font-size:18px;
  line-height:1.35;
}

.project-page .project-related-mini p{
  margin:0;
  color:var(--p-muted);
  font-size:14px;
  line-height:1.68;
}

.project-page .project-related-mini__facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-top:14px;
  color:var(--p-muted);
  font-size:13px;
  line-height:1.55;
}

.project-page .project-related-mini__facts span{
  display:inline-flex;
  align-items:center;
}

.project-page .project-related-mini__facts span:not(:first-child)::before{
  content:'•';
  margin-right:10px;
  color:rgba(15,23,42,.34);
}

.project-page .project-guide-list{
  display:grid;
  gap:12px;
  margin-top:14px;
}

.project-page .project-guide-link{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  padding:18px 20px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(148,163,184,.18);
  text-decoration:none;
  color:var(--p-text);
  box-shadow:0 10px 24px rgba(15,23,42,.04);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.project-page .project-guide-link::after{
  content:'→';
  position:absolute;
  top:18px;
  right:18px;
  color:rgba(15,23,42,.32);
  transition:transform .22s ease, color .22s ease;
}

.project-page .project-guide-link:hover,
.project-page .project-guide-link:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(201,163,93,.30);
  box-shadow:0 16px 32px rgba(15,23,42,.08);
}

.project-page .project-guide-link:hover::after,
.project-page .project-guide-link:focus-visible::after{
  transform:translateX(2px);
  color:var(--gold-dark);
}

.project-page .project-guide-link__eyebrow{
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-dark);
}

.project-page .project-guide-link strong{
  display:block;
  font-size:17px;
  line-height:1.4;
  padding-right:22px;
}

.project-page .project-guide-link span:last-child{
  color:var(--p-muted);
  line-height:1.65;
  font-size:14px;
}

.project-page .project-asset-modal{
  z-index:20000;
}

.project-page .project-asset-modal__backdrop{
  z-index:1;
}

.project-page .project-asset-modal__dialog{
  z-index:2;
}

.project-page .project-asset-modal__frame-wrap{
  background:#fff;
}

.project-page .project-asset-modal__frame.project-asset-modal__pdf-object{
  display:block;
  width:100%;
  min-height:72vh;
  min-height:72dvh;
  border:0;
  background:#fff;
}

.project-page .project-asset-modal__fallback{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  min-height:280px;
  padding:24px;
  color:#475569;
  line-height:1.7;
}

@media (max-width: 1180px){
  .project-page .project-side-stack.panel{
    position:static;
    top:auto;
    max-height:none;
    overflow:visible;
  }

  .project-page .project-side-stack__inner{
    gap:18px;
  }
}

@media (max-width: 720px){
  .project-page .project-related-mini{
    grid-template-columns:1fr;
    gap:16px;
  }

  .project-page .project-related-mini__media{
    max-width:none;
  }

  .project-page .project-media-card__head{
    gap:12px;
  }

  .project-page .project-media-card__badge{
    min-width:44px;
    min-height:44px;
    padding:0 12px;
  }

  .project-page .project-media-card__preview{
    aspect-ratio:16 / 11;
  }

  .project-page .project-media-card__preview--pdf,
  .project-page .project-media-card__preview--pdf iframe,
  .project-page .project-media-card__preview--pdf .project-media-card__pdf-object,
  .project-page .project-media-card__preview--video,
  .project-page .project-media-card__preview--video picture,
  .project-page .project-media-card__preview--video img{
    min-height:220px;
  }

  .project-page .project-media-card__actions{
    gap:10px;
  }

  .project-page .project-media-card__actions .btn{
    width:100%;
  }
}

/* ========================================================================== 
   Area + developer detail pages — premium unification with project pages
   ========================================================================== */
.guide-page .detail,
.guide-page .detail > .main,
.guide-page .guide-side-stack.panel{
  overflow: visible;
}

.guide-page .guide-intro-shell{
  display:grid;
  gap:24px;
}

.guide-page .guide-intro-shell .detail-header{
  margin:0;
}

.guide-page .guide-intro-shell .jump-links{
  margin-top:0;
}

.guide-page .guide-fact-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

.guide-page .guide-fact-card{
  position:relative;
  min-width:0;
  padding:18px 20px 20px;
  border-radius:20px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border:1px solid rgba(148,163,184,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.74), 0 12px 28px rgba(15,23,42,.05);
}

.guide-page .guide-fact-card::before{
  content:'';
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg, rgba(201,163,93,.56), rgba(14,124,134,.24), transparent 72%);
}

.guide-page .guide-fact-card__label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-dark);
}

.guide-page .guide-fact-card__label::before{
  content:'';
  width:18px;
  height:1px;
  background:linear-gradient(90deg, var(--gold), rgba(14,124,134,.45));
}

.guide-page .guide-fact-card strong{
  display:block;
  margin-top:10px;
  font-size:clamp(20px, 1.7vw, 24px);
  line-height:1.28;
  color:var(--p-text);
}

.guide-page .guide-fact-card p{
  margin:10px 0 0;
  color:var(--p-muted);
  font-size:14px;
  line-height:1.7;
}

.guide-page .guide-side-stack.panel{
  position:sticky;
  top:calc(var(--sticky-top, 100px) + 8px);
  display:grid;
  gap:18px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  align-self:start;
}

.guide-page .guide-side-stack .guide-side-card{
  margin:0;
  padding:22px;
  border-radius:24px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(201,163,93,.10) 0%, transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.985) 0%, rgba(248,250,252,.98) 100%);
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 18px 38px rgba(15,23,42,.07);
}

.guide-page .guide-side-card__head{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:16px;
}

.guide-page .guide-side-card__head .section-kicker{
  margin-bottom:0;
}

.guide-page .guide-side-card__text{
  margin:0;
  color:var(--p-muted);
  line-height:1.72;
}

.guide-page .guide-side-card .table{
  margin-top:0;
}

.guide-page .guide-side-card .table td{
  padding-block:15px;
}

.guide-page .guide-side-card .checklist{
  margin:0;
}

.guide-page .guide-side-card--actions .guide-side-card__head{
  margin-bottom:14px;
}

.guide-page .guide-side-nav{
  display:grid;
  gap:10px;
}

.guide-page .guide-side-nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  padding:14px 16px;
  border-radius:16px;
  text-decoration:none;
  color:var(--p-text);
  background:#fff;
  border:1px solid rgba(148,163,184,.16);
  box-shadow:0 10px 24px rgba(15,23,42,.04);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.guide-page .guide-side-nav a:hover,
.guide-page .guide-side-nav a:focus-visible{
  transform:translateX(2px);
  border-color:rgba(201,163,93,.30);
  box-shadow:0 16px 30px rgba(15,23,42,.08);
}

.guide-page .guide-side-nav a span:first-child{
  min-width:0;
  font-weight:600;
  line-height:1.45;
}

.guide-page .guide-side-nav a span:last-child{
  flex:0 0 auto;
  color:var(--p-muted-2);
}

.guide-page .guide-side-actions{
  display:grid;
  gap:10px;
  margin-top:16px;
}

.guide-page .guide-side-actions .btn{
  width:100%;
  justify-content:center;
}

.guide-page .guide-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-top:18px;
  padding:18px 20px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.98) 100%);
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 12px 26px rgba(15,23,42,.05);
}

.guide-page .guide-toolbar__meta{
  min-width:0;
}

.guide-page .guide-toolbar__meta p{
  margin:0;
}

.guide-page .guide-toolbar__meta p + p{
  margin-top:6px;
}

.guide-page .guide-toolbar__form{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.guide-page .guide-toolbar__label{
  display:block;
  margin:0 0 6px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--p-muted-2);
}

.guide-page .guide-pagination{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.guide-page .guide-pagination p{
  margin:0;
}

.guide-page .guide-pagination__pages{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.guide-page .developer-projects-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
  align-items:stretch;
}

.guide-page .developer-projects-grid[data-count="1"]{
  grid-template-columns:1fr;
}

.guide-page .developer-projects-grid > .developer-project-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
  background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 14px 34px rgba(15,23,42,.06);
}

.guide-page .developer-projects-grid > .developer-project-card .body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-width:0;
  padding:22px;
}

.guide-page .developer-projects-grid > .developer-project-card h3{
  font-size:clamp(18px, 1.45vw, 20px);
  line-height:1.35;
  margin:0 0 10px;
}

.guide-page .developer-projects-grid > .developer-project-card .catalog-card__eyebrow{
  margin-bottom:8px;
}

.guide-page .developer-projects-grid > .developer-project-card p{
  min-height:auto;
}

.guide-page .developer-projects-grid > .developer-project-card .catalog-card__summary{
  color:var(--p-muted) !important;
  margin-bottom:0;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.guide-page .developer-projects-grid > .developer-project-card .meta{
  margin-top:auto;
}

#overview,
#projects,
#highlights,
#contact,
#area-research-links,
#developer-research-links{
  scroll-margin-top:var(--sticky-offset);
}

@media (max-width: 1180px){
  .guide-page .guide-fact-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 1100px){
  .guide-page .developer-projects-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 980px){
  .guide-page .guide-side-stack.panel{
    position:static;
    top:auto;
  }

  .guide-page .guide-intro-shell{
    gap:20px;
  }
}

@media (max-width: 720px){
  .guide-page .guide-side-stack .guide-side-card{
    padding:18px;
    border-radius:20px;
  }

  .guide-page .guide-toolbar{
    padding:16px;
    border-radius:18px;
  }

  .guide-page .guide-pagination{
    align-items:flex-start;
  }
}

/* ==========================================================================
   Area + developer detail pages — premium unified polish
   ========================================================================== */
.guide-page .detail.detail--guide-premium{
  grid-template-columns:minmax(0, 1.16fr) minmax(320px, .84fr);
  gap:28px;
}

.guide-page .guide-hero{
  border-radius:30px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 22px 48px rgba(15,23,42,.12);
}

.guide-page .guide-summary-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.guide-page .guide-summary-card{
  position:relative;
  padding:26px;
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.18);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(201,163,93,.16) 0%, transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.98) 100%);
  box-shadow:0 18px 36px rgba(15,23,42,.07);
}

.guide-page .guide-summary-card::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg, rgba(201,163,93,.96) 0%, rgba(14,124,134,.72) 100%);
}

.guide-page .guide-summary-card__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-dark);
}

.guide-page .guide-summary-card__eyebrow::before{
  content:'';
  width:18px;
  height:1px;
  background:linear-gradient(90deg, var(--gold), rgba(14,124,134,.45));
}

.guide-page .guide-summary-card__value{
  display:block;
  margin-top:14px;
  font-size:clamp(28px, 2vw, 36px);
  line-height:1.08;
  letter-spacing:-.03em;
  color:var(--p-text);
}

.guide-page .guide-summary-card p{
  margin:12px 0 0;
  font-size:14px;
  line-height:1.72;
}

.guide-page .guide-side-stack.panel{
  position:sticky;
  top:calc(var(--sticky-top, 100px) + 8px);
  align-self:start;
  display:grid;
  gap:20px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  max-height:calc(100vh - var(--sticky-top, 100px) - 16px);
  max-height:calc(100dvh - var(--sticky-top, 100px) - 16px);
  overflow-y:auto;
  overflow-x:visible;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(148,163,184,.44) transparent;
}

.guide-page .guide-side-stack.panel::-webkit-scrollbar{
  width:8px;
}

.guide-page .guide-side-stack.panel::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.4);
  border-radius:999px;
}

.guide-page .guide-side-stack.panel::-webkit-scrollbar-track{
  background:transparent;
}

.guide-page .guide-side-stack .admin-card{
  margin:0;
}

.guide-page .guide-side-stack .guide-side-card.panel{
  position:relative;
  top:auto;
}

.guide-page .guide-side-card{
  padding:28px;
  border-radius:28px;
}

.guide-page .guide-side-card__head{
  margin-bottom:16px;
}

.guide-page .guide-side-card__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-dark);
}

.guide-page .guide-side-card__eyebrow::before{
  content:'';
  width:20px;
  height:1px;
  background:linear-gradient(90deg, var(--gold), rgba(14,124,134,.45));
}

.guide-page .guide-side-card .section-title,
.guide-page .guide-side-card h3{
  margin:8px 0 0;
  line-height:1.28;
}

.guide-page .guide-side-card .table td{
  vertical-align:top;
}

.guide-page .guide-side-card .table td:first-child{
  width:43%;
  color:var(--p-muted-2);
}

.guide-page .guide-side-card--insight{
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.98) 100%);
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 18px 36px rgba(15,23,42,.07);
}

.guide-page .guide-side-card--cta{
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(201,163,93,.18) 0%, transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,250,252,.99) 100%);
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 20px 42px rgba(15,23,42,.08);
}

.guide-page .guide-side-card__actions{
  display:grid;
  gap:10px;
}

.guide-page .guide-side-links{
  display:grid;
  gap:10px;
  margin-top:16px;
}

.guide-page .guide-side-links__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(255,255,255,.9);
  color:var(--p-text);
  text-decoration:none;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.guide-page .guide-side-links__item:hover,
.guide-page .guide-side-links__item:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(201,163,93,.28);
  box-shadow:0 14px 28px rgba(15,23,42,.08);
}

.guide-page .guide-side-links__item span:last-child{
  color:var(--gold-dark);
  font-weight:800;
}

.guide-page .guide-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:20px 22px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.98) 100%);
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 16px 32px rgba(15,23,42,.06);
}

.guide-page .guide-toolbar__stats{
  flex:1 1 320px;
  min-width:0;
}

.guide-page .guide-toolbar__value{
  margin:0;
  color:var(--p-text);
  font-weight:800;
  line-height:1.45;
}

.guide-page .guide-toolbar__hint{
  margin:6px 0 0;
  color:var(--p-muted);
  font-size:14px;
  line-height:1.7;
}

.guide-page .guide-toolbar__controls{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.guide-page .guide-toolbar__field{
  min-width:220px;
}

.guide-page .guide-toolbar__label{
  display:block;
  margin:0 0 8px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--p-muted-2);
}

.guide-page .guide-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.guide-page .guide-pagination__status{
  margin:0;
  color:var(--p-muted);
}

.guide-page .guide-pagination__actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.guide-page .guide-pagination__pill{
  min-width:42px;
  justify-content:center;
  text-decoration:none;
}

.guide-page .guide-pagination__pill.is-current{
  background:linear-gradient(180deg, rgba(201,163,93,.22) 0%, rgba(201,163,93,.14) 100%);
  border-color:rgba(201,163,93,.32);
  color:var(--p-text);
  box-shadow:0 10px 22px rgba(201,163,93,.18);
}

.guide-page .guide-pagination__ellipsis{
  color:var(--p-muted-2);
  font-weight:800;
  padding:0 4px;
}

.guide-page .developer-projects-grid,
.guide-page .area-projects-grid{
  gap:20px;
}

.guide-page .developer-projects-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.guide-page .developer-project-card,
.guide-page .area-project-card{
  min-width:0;
}

.guide-page .developer-project-card .body,
.guide-page .area-project-card .body{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.guide-page .developer-project-card h3,
.guide-page .area-project-card h3{
  margin:0;
}

.guide-page .developer-project-card .catalog-card__summary,
.guide-page .area-project-card .catalog-card__summary{
  margin:0;
}

.guide-page .developer-project-card .meta,
.guide-page .area-project-card .meta{
  margin-top:auto;
}

@media (max-width: 1180px){
  .guide-page .detail.detail--guide-premium{
    grid-template-columns:minmax(0, 1fr) minmax(300px, .9fr);
  }

  .guide-page .guide-summary-grid,
  .guide-page .developer-projects-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px){
  .guide-page .detail.detail--guide-premium{
    grid-template-columns:1fr;
  }

  .guide-page .guide-side-stack.panel{
    position:static;
    top:auto;
    max-height:none;
    overflow:visible;
  }
}

@media (max-width: 720px){
  .guide-page .guide-summary-grid,
  .guide-page .developer-projects-grid{
    grid-template-columns:1fr;
  }

  .guide-page .guide-summary-card,
  .guide-page .guide-side-card{
    padding:22px;
    border-radius:24px;
  }

  .guide-page .guide-toolbar{
    padding:18px;
  }

  .guide-page .guide-toolbar__controls,
  .guide-page .guide-toolbar__field,
  .guide-page .guide-toolbar .input{
    width:100%;
    min-width:0;
  }

  .guide-page .guide-pagination{
    align-items:flex-start;
  }

  .guide-page .guide-pagination__actions{
    width:100%;
  }
}

/* === Premium project card facts and developer archive filters === */
.project-card__facts-wrap{
  margin-top:auto;
  display:grid;
  gap:8px;
  padding-top:14px;
  border-top:1px solid rgba(148,163,184,.16);
}

.project-card__facts{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 16px;
  font-size:14px;
  line-height:1.6;
  color:var(--c-text);
}

.project-card__facts--secondary{
  color:var(--c-muted);
}

.project-card__facts span{
  display:inline-flex;
  align-items:center;
  min-width:0;
}

.project-card__facts span + span::before{
  content:'•';
  display:inline-block;
  margin-right:12px;
  color:rgba(15,23,42,.28);
}

.catalog-page .project-card__facts{
  color:var(--c-text);
}

.catalog-page .project-card__facts--secondary{
  color:var(--c-muted);
}

.guide-page .project-card__facts{
  color:var(--p-text);
}

.guide-page .project-card__facts--secondary{
  color:var(--p-muted);
}

.guide-page .developer-project-card .project-card__facts-wrap,
.guide-page .area-project-card .project-card__facts-wrap{
  border-top-color:rgba(148,163,184,.14);
}

.developer-filter-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}

.developer-filter-pill strong{
  font-weight:800;
}

.developer-filter-pill.is-active{
  background:#0f172a;
  border-color:#0f172a;
  color:#fff;
}

.guide-page .guide-scope-switch{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:6px;
  border-radius:20px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(255,255,255,.88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}

.guide-page .guide-scope-switch__item{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:140px;
  padding:10px 14px;
  border-radius:14px;
  color:var(--p-text);
  text-decoration:none;
  font-weight:700;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.guide-page .guide-scope-switch__item strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(15,23,42,.08);
  color:inherit;
  font-size:13px;
  line-height:1;
}

.guide-page .guide-scope-switch__item:hover,
.guide-page .guide-scope-switch__item:focus-visible{
  background:rgba(15,23,42,.06);
  outline:none;
}

.guide-page .guide-scope-switch__item.is-active{
  background:#0f172a;
  color:#fff;
  box-shadow:0 14px 26px rgba(15,23,42,.14);
}

.guide-page .guide-scope-switch__item.is-active strong{
  background:rgba(255,255,255,.16);
}

.guide-side-collections{
  display:grid;
  gap:8px;
}

.guide-side-collections__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(248,250,252,.92);
  color:var(--p-text);
  text-decoration:none;
  font-weight:700;
}

.guide-side-collections__item strong{
  color:var(--gold-dark);
}

.guide-side-collections__item.is-active{
  background:#0f172a;
  border-color:#0f172a;
  color:#fff;
}

.guide-side-collections__item.is-active strong{
  color:#fff;
}

@media (max-width: 900px){
  .guide-page .guide-scope-switch{
    width:100%;
  }

  .guide-page .guide-scope-switch__item{
    flex:1 1 calc(50% - 6px);
    min-width:0;
  }
}

@media (max-width: 720px){
  .project-card__facts{
    font-size:13px;
    gap:6px 12px;
  }

  .project-card__facts span + span::before{
    margin-right:10px;
  }

  .guide-page .guide-toolbar__controls{
    width:100%;
  }

  .guide-page .guide-toolbar__field,
  .guide-page .guide-toolbar__form,
  .guide-page .guide-toolbar .input{
    width:100%;
  }

  .guide-page .guide-scope-switch__item{
    width:100%;
    flex:1 1 100%;
  }
}


/* ==========================================================================
   Lot 1 hardening patch — 2026-03-20
   - collapse refined header at 980px
   - reserve bottom space only when mobile sticky UI is truly active
   - restore property-page section navigation
   ========================================================================== */
@media (max-width: 1080px){
  .nav{
    display: none;
  }

  .header-actions{
    display: none;
  }

  .nav-toggle{
    display: inline-flex;
  }

  .header .row{
    align-items: center;
  }
}

@media (max-width: 1080px) and (min-width: 769px){
  .header .row{
    display: flex;
    justify-content: flex-start;
    gap: 16px;
  }

  .header .row .brand{
    min-width: 0;
  }

  .header .row .nav-toggle{
    margin-left: auto;
  }
}

@media (max-width: 820px){
  body.has-mobile-cta{
    padding-bottom: 90px;
  }

  body.has-mobile-cta .wa-float{
    bottom: calc(16px + 92px);
  }
}

@media (min-width: 821px){
  body.has-mobile-cta{
    padding-bottom: 0;
  }

  body.has-mobile-cta .wa-float{
    bottom: 16px;
  }
}

@media (max-width: 980px){
  body.has-bottom-bar-ui .wa-float{
    bottom: calc(16px + 92px);
  }
}

@media (min-width: 981px){
  body.has-bottom-bar-ui .wa-float{
    bottom: 16px;
  }
}

/* ==========================================================================
   Lot 3 hardening patch — 2026-03-20
   - retire legacy anchor-nav in favor of shared jump-links
   - unify active section-link styling across detail pages
   - stabilize guide sidebars on area/developer pages
   ========================================================================== */
.project-page,
.property-page,
.guide-page{
  --anchor-h: 0px;
}

.jump-links[data-section-links] .chip.is-active{
  background: rgba(201,163,93,.10);
  border-color: rgba(201,163,93,.30);
  color: #0f172a;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

.guide-page .guide-side-stack.panel{
  position: sticky;
  top: calc(var(--sticky-top, 100px) + 8px);
  align-self: start;
  display: grid;
  gap: 20px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  max-height: calc(100vh - var(--sticky-top, 100px) - 16px);
  max-height: calc(100dvh - var(--sticky-top, 100px) - 16px);
  overflow-y: auto;
  overflow-x: visible;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.44) transparent;
}

.guide-page .guide-side-stack.panel::-webkit-scrollbar{
  width: 8px;
}

.guide-page .guide-side-stack.panel::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.4);
  border-radius: 999px;
}

.guide-page .guide-side-stack.panel::-webkit-scrollbar-track{
  background: transparent;
}

.guide-page .guide-side-stack .admin-card{
  margin: 0;
}

@media (max-width: 1180px){
  .guide-page .detail.detail--guide-premium{
    grid-template-columns: 1fr;
  }

  .guide-page .guide-side-stack.panel{
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
  }
}