/* Casagrand Moondance Kumbalgodu - site-wide stylesheet.
 * Extracted from inline <style> blocks in index.html (base) and the multi-page
 * shell (page-local additions). Keep edits here rather than inline on pages.
 */

/* ===== Base (shared with single-page index) ===== */
@font-face {
      font-family: 'Inter';
      src: url('../assets/fonts/inter-300.woff2') format('woff2');
      font-weight: 300;
      font-style: normal;
      font-display: optional;
    }
    @font-face {
      font-family: 'Inter';
      src: url('../assets/fonts/inter-400.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Inter';
      src: url('../assets/fonts/inter-500.woff2') format('woff2');
      font-weight: 500;
      font-style: normal;
      font-display: optional;
    }
    @font-face {
      font-family: 'Inter';
      src: url('../assets/fonts/inter-600.woff2') format('woff2');
      font-weight: 600;
      font-style: normal;
      font-display: optional;
    }
    @font-face {
      font-family: 'Playfair Display';
      src: url('../assets/fonts/playfair-400.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: optional;
    }
    @font-face {
      font-family: 'Playfair Display';
      src: url('../assets/fonts/playfair-600.woff2') format('woff2');
      font-weight: 600;
      font-style: normal;
      font-display: optional;
    }
    @font-face {
      font-family: 'Playfair Display';
      src: url('../assets/fonts/playfair-700.woff2') format('woff2');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }
    /* ─── Reset & Base ─── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body {
      font-family: 'Inter', sans-serif;
      color: var(--dark-primary);
      background: var(--light-primary);
      line-height: 1.7;
      overflow-x: hidden;
    }
    img { display: block; max-width: 100%; height: auto; }
    a { color: inherit; text-decoration: none; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; }
    .text-link,
    .text-link-light {
      font-weight: 600;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.18em;
    }
    .text-link { color: var(--brand-secondary); }
    .text-link:hover { color: var(--dark-primary); }
    .text-link-light { color: var(--brand-tertiary); }
    .text-link-light:hover { color: var(--light-secondary); }

    /* ─── CSS Variables (9-colour builder contract - see guide/builder-theme-guide.md) ─── */
    :root {
      --brand-primary: #b88638;
      --brand-secondary: #8b6224;
      --brand-tertiary: #f2d9a5;
      --dark-primary: #1c1c1e;
      --dark-secondary: #545454;
      --dark-tertiary: #6f5123;
      --light-primary: #faf7f2;
      --light-secondary: #ffffff;
      --light-tertiary: #f0eae0;
      --section-pad: 4rem 1.25rem;
      --max-w: 1160px;
      --radius: 12px;
    }

    /* ─── Typography ─── */
    h1, h2, h3, h4 { font-family: 'Playfair Display', serif; line-height: 1.2; }
    h1 { font-size: clamp(2rem, 7vw, 3.8rem); }
    h2 { font-size: clamp(1.6rem, 5vw, 2.6rem); }
    h3 { font-size: clamp(1.1rem, 3vw, 1.5rem); }
    p { font-size: 1rem; color: color-mix(in srgb, var(--dark-primary) 88%, var(--light-secondary)); }

    .section-label {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--brand-secondary);
      margin-bottom: 0.5rem;
    }
    .section-title { margin-bottom: 1rem; }
    .section-desc { color: var(--dark-secondary); max-width: 620px; margin-bottom: 2.5rem; }
    .container {
      width: 100%;
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 1.25rem;
    }
    /* Section already applies --section-pad horizontal gutter */
    main section > .container,
    #footer .container {
      padding-left: 0;
      padding-right: 0;
    }

    /* ─── Buttons ─── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.8rem 1.8rem;
      border-radius: 4px;
      font-size: 0.9rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      transition: all 0.25s ease;
    }
    .btn-gold {
      background: var(--brand-primary);
      color: var(--dark-primary);
    }
    .btn-gold:hover { background: var(--brand-tertiary); transform: translateY(-1px); }
    .btn-outline {
      border: 1.5px solid color-mix(in srgb, var(--light-secondary) 70%, transparent);
      color: var(--light-secondary);
    }
    .btn-outline:hover { background: color-mix(in srgb, var(--light-secondary) 12%, transparent); }
    .btn-outline-dark {
      border: 1.5px solid var(--brand-secondary);
      color: var(--brand-secondary);
    }
    .btn-outline-dark:hover { background: var(--brand-secondary); color: var(--light-secondary); }
    .cta-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 0.9rem;
      margin-top: 1.5rem;
      text-align: center;
    }

    /* ─── NAV ─── */
    #nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      padding: 1rem 1.25rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
    }
    #nav.scrolled {
      background: var(--dark-primary);
      box-shadow: 0 2px 20px color-mix(in srgb, var(--dark-primary) 30%, transparent);
      padding: 0.65rem 1.25rem;
    }
    .nav-links {
      display: none;
      gap: 1.15rem;
      list-style: none;
      flex-wrap: wrap;
      justify-content: flex-end;
      max-width: min(52rem, calc(100vw - 22rem));
      row-gap: 0.35rem;
    }
    .nav-links a {
      font-size: 0.85rem;
      font-weight: 500;
      color: color-mix(in srgb, var(--light-secondary) 85%, transparent);
      letter-spacing: 0.04em;
      transition: color 0.2s;
    }
    .nav-links a:hover { color: var(--brand-primary); }
    .nav-cta {
      display: none;
      padding: 0.5rem 1.2rem;
      background: var(--brand-primary);
      color: var(--dark-primary);
      border-radius: 4px;
      font-size: 0.82rem;
      font-weight: 600;
      transition: background 0.2s;
    }
    .nav-cta:hover { background: var(--brand-secondary); }
    .hamburger {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 4px;
      z-index: 1100;
    }
    .hamburger span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--light-secondary);
      border-radius: 2px;
      transition: all 0.3s ease;
    }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Mobile Menu Overlay */
    #mobile-menu {
      position: fixed;
      inset: 0;
      background: var(--dark-primary);
      z-index: 1050;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 1.1rem;
      padding: 4.5rem 1.25rem 1.5rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }
    #mobile-menu.open { opacity: 1; pointer-events: all; }
    #mobile-menu .menu-close {
      position: fixed;
      top: 1rem;
      right: 1rem;
      width: 44px;
      height: 44px;
      border: 1px solid color-mix(in srgb, var(--light-secondary) 16%, transparent);
      border-radius: 999px;
      color: var(--light-secondary);
      font-size: 1.5rem;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease, border-color 0.2s ease;
      background: var(--dark-primary);
    }
    #mobile-menu .menu-close:hover {
      background: color-mix(in srgb, var(--light-secondary) 8%, transparent);
      border-color: color-mix(in srgb, var(--light-secondary) 28%, transparent);
    }
    #mobile-menu a {
      font-family: 'Playfair Display', serif;
      font-size: 1.25rem;
      line-height: 1.2;
      padding: 0.35rem 0;
      color: var(--light-secondary);
      transition: color 0.2s;
    }
    #mobile-menu a:hover { color: var(--brand-primary); }
    #mobile-menu .menu-cta {
      margin-top: 0.75rem;
      padding: 0.8rem 2.25rem;
      background: var(--brand-primary);
      color: var(--dark-primary);
      border-radius: 4px;
      font-size: 0.95rem;
      font-weight: 600;
      font-family: 'Inter', sans-serif;
    }
    @media (min-height: 720px) {
      #mobile-menu {
        gap: 1.4rem;
      }
      #mobile-menu a { font-size: 1.4rem; }
    }

    @media (min-width: 1025px) {
      .hamburger { display: none; }
      .nav-links, .nav-cta { display: flex; }
      .nav-links { align-items: center; }
      #mobile-menu { display: none !important; }
    }

    /* ─── HERO ─── */
    #hero {
      position: relative;
      min-height: 680px;
      display: flex;
      overflow: hidden;
    }
    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }
    .hero-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        color-mix(in srgb, var(--dark-primary) 99%, transparent) 0%,
        color-mix(in srgb, var(--dark-primary) 90%, transparent) 34%,
        color-mix(in srgb, var(--dark-primary) 76%, transparent) 62%,
        color-mix(in srgb, var(--dark-primary) 58%, transparent) 100%
      );
      z-index: 1;
    }
    .hero-content {
      position: relative;
      z-index: 2;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-end;
      padding: clamp(7.5rem, 18vw, 9.5rem) 1.25rem 3.5rem;
      width: 100%;
      max-width: var(--max-w);
      margin: 0 auto;
    }
    .hero-content::before {
      content: '';
      position: absolute;
      inset: auto 0 1.5rem;
      width: min(760px, 100%);
      height: min(430px, calc(100% - 6.5rem));
      background: linear-gradient(135deg, color-mix(in srgb, var(--dark-primary) 74%, transparent), color-mix(in srgb, var(--dark-primary) 40%, transparent));
      border-radius: 28px;
      filter: blur(2px);
      z-index: -1;
    }
    @media (min-width: 1025px) {
      .hero-content {
        padding-top: 8.75rem;
        padding-bottom: 4rem;
      }
      .hero-content::before {
        bottom: 1.75rem;
        height: min(460px, calc(100% - 5.5rem));
      }
    }
    .hero-badge {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      gap: 0.4rem;
      background: color-mix(in srgb, var(--brand-primary) 20%, transparent);
      border: 1px solid color-mix(in srgb, var(--brand-primary) 40%, transparent);
      color: var(--brand-tertiary);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 0.35rem 0.85rem;
      border-radius: 100px;
      margin-bottom: 1.25rem;
    }
    .hero-title {
      color: var(--light-secondary);
      margin-bottom: 1rem;
      max-width: 700px;
    }
    .hero-title .hero-title-tagline {
      display: block;
      font-size: 0.58em;
      font-weight: 400;
      line-height: 1.25;
      margin-top: 0.35em;
      letter-spacing: 0.02em;
      opacity: 0.95;
    }
    .hero-sub {
      color: color-mix(in srgb, var(--light-secondary) 90%, transparent);
      font-size: clamp(0.95rem, 2.5vw, 1.15rem);
      max-width: 560px;
      margin-bottom: 1.25rem;
      font-weight: 300;
    }
    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem 1.5rem;
      margin-bottom: 2rem;
    }
    .hero-date {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      color: color-mix(in srgb, var(--light-secondary) 92%, transparent);
      font-size: 0.84rem;
      font-weight: 500;
    }
    .hero-date span {
      color: var(--brand-tertiary);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
    .hero-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 1.5rem;
      border-top: 1px solid color-mix(in srgb, var(--light-secondary) 15%, transparent);
      padding-top: 1.5rem;
    }
    .hero-stat {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: color-mix(in srgb, var(--light-secondary) 90%, transparent);
      font-size: 0.82rem;
      font-weight: 500;
    }
    .hero-stat::before {
      content: '';
      display: block;
      width: 6px;
      height: 6px;
      background: var(--brand-primary);
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* ─── HIGHLIGHTS ─── */
    #highlights {
      background: var(--dark-primary);
      padding: 3rem 1.25rem;
    }
    .highlights-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1px;
      background: color-mix(in srgb, var(--light-secondary) 8%, transparent);
      border: 1px solid color-mix(in srgb, var(--light-secondary) 8%, transparent);
      border-radius: var(--radius);
      overflow: hidden;
      max-width: var(--max-w);
      margin: 0 auto;
    }
    .highlight-card {
      background: color-mix(in srgb, var(--light-secondary) 6%, transparent);
      padding: 1.75rem 1.5rem;
      text-align: center;
      transition: background 0.2s;
    }
    .highlight-card:hover { background: color-mix(in srgb, var(--brand-primary) 8%, transparent); }
    .highlight-num {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2rem, 6vw, 3rem);
      font-weight: 700;
      color: var(--brand-primary);
      display: block;
      line-height: 1;
      margin-bottom: 0.4rem;
    }
    .highlight-label {
      font-size: 0.78rem;
      color: color-mix(in srgb, var(--light-secondary) 74%, transparent);
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    @media (min-width: 1025px) {
      .highlights-grid { grid-template-columns: repeat(5, 1fr); }
    }

    /* ─── ABOUT ─── */
    #about {
      padding: var(--section-pad);
      background: var(--light-primary);
    }
    .about-inner {
      display: grid;
      gap: 3rem;
      max-width: var(--max-w);
      margin: 0 auto;
    }
    .about-image {
      border-radius: var(--radius);
      overflow: hidden;
      aspect-ratio: 4/3;
    }
    .about-image img { width: 100%; height: 100%; object-fit: cover; }
    .about-text p { margin-bottom: 1.2rem; line-height: 1.8; }
    .about-text p:last-child { margin-bottom: 0; }
    @media (min-width: 1025px) {
      .about-inner { grid-template-columns: 1fr 1fr; align-items: center; }
      .about-image {
        position: sticky;
        top: 6.5rem;
        align-self: start;
      }
    }

    /* ─── WHY KUMBALGODU ─── */
    #why {
      padding: var(--section-pad);
      background: var(--dark-primary);
    }
    #why .section-title { color: var(--light-secondary); }
    #why .section-label { color: var(--brand-primary); }
    #why .section-desc { color: color-mix(in srgb, var(--light-secondary) 82%, transparent); }
    .why-grid {
      display: grid;
      gap: 1.25rem;
      max-width: var(--max-w);
      margin: 0 auto;
    }
    .why-card {
      background: color-mix(in srgb, var(--light-secondary) 4%, transparent);
      border: 1px solid color-mix(in srgb, var(--light-secondary) 8%, transparent);
      border-radius: var(--radius);
      padding: 1.5rem;
      transition: border-color 0.25s, background 0.25s;
    }
    .why-card:hover {
      border-color: color-mix(in srgb, var(--brand-primary) 35%, transparent);
      background: color-mix(in srgb, var(--brand-primary) 6%, transparent);
    }
    .why-icon {
      width: 44px;
      height: 44px;
      background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
    }
    .why-icon svg { width: 22px; height: 22px; stroke: var(--brand-primary); fill: none; stroke-width: 1.8; }
    .why-card h3 { color: var(--light-secondary); font-size: 1.05rem; margin-bottom: 0.5rem; }
    .why-card p { color: color-mix(in srgb, var(--light-secondary) 82%, transparent); font-size: 0.9rem; line-height: 1.6; }
    @media (min-width: 1025px) {
      .why-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 1025px) {
      .why-grid { grid-template-columns: repeat(3, 1fr); }
    }

    /* ─── CONFIGURATIONS ─── */
    #configurations {
      padding: var(--section-pad);
      background: var(--light-tertiary);
    }
    .config-header { margin: 0 auto 2rem; }
    .tab-bar {
      display: flex;
      gap: 0;
      overflow-x: auto;
      scrollbar-width: none;
      border-bottom: 2px solid var(--light-tertiary);
      margin-bottom: 2rem;
    }
    .tab-bar::-webkit-scrollbar { display: none; }
    .tab-btn {
      padding: 0.8rem 1.4rem;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--dark-secondary);
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
      white-space: nowrap;
      transition: color 0.2s, border-color 0.2s;
      flex-shrink: 0;
    }
    .tab-btn.active { color: var(--brand-secondary); border-bottom-color: var(--brand-secondary); }
    .tab-panel { display: none; }
    .tab-panel.active { display: grid; gap: 2rem; }
    @media (min-width: 1025px) {
      .tab-panel.active { grid-template-columns: 1fr 1fr; align-items: start; }
    }
    .config-plan {
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--light-secondary);
      box-shadow: 0 4px 24px color-mix(in srgb, var(--dark-primary) 8%, transparent);
    }
    .config-plan img { width: 100%; }
    .config-info { padding: 0.5rem 0; }
    .config-info h3 { font-size: 1.4rem; margin-bottom: 0.25rem; }
    .config-price {
      font-size: 1.6rem;
      font-family: 'Playfair Display', serif;
      color: var(--brand-primary);
      font-weight: 700;
      margin-bottom: 1rem;
    }
    .config-price span { font-size: 0.9rem; font-family: 'Inter', sans-serif; color: var(--dark-secondary); font-weight: 400; }
    .config-desc { font-size: 0.93rem; line-height: 1.75; margin-bottom: 1.5rem; color: var(--dark-secondary); }
    .spec-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
    .spec-table tr { border-bottom: 1px solid var(--light-tertiary); }
    .spec-table td { padding: 0.65rem 0; font-size: 0.88rem; }
    .spec-table td:first-child { color: var(--dark-secondary); width: 45%; }
    .spec-table td:last-child { font-weight: 600; color: var(--dark-primary); }

    /* ─── GALLERY ─── */
    #gallery {
      padding: var(--section-pad);
      background: var(--dark-primary);
    }
    #gallery .section-title { color: var(--light-secondary); }
    #gallery .section-label { color: var(--brand-primary); }
    #gallery .section-desc { color: color-mix(in srgb, var(--light-secondary) 82%, transparent); }
    .gallery-header { max-width: var(--max-w); margin: 0 auto 2rem; }
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
      max-width: var(--max-w);
      margin: 0 auto;
    }
    .gallery-item {
      border-radius: 8px;
      overflow: hidden;
      aspect-ratio: 4/3;
      cursor: pointer;
      position: relative;
    }
    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }
    .gallery-item:hover img { transform: scale(1.05); }
    .gallery-item-overlay {
      position: absolute;
      inset: 0;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s;
    }
    .gallery-item:hover .gallery-item-overlay { background: color-mix(in srgb, var(--dark-primary) 30%, transparent); }
    .gallery-zoom-icon {
      opacity: 0;
      transition: opacity 0.3s;
      color: var(--light-secondary);
    }
    .gallery-item:hover .gallery-zoom-icon { opacity: 1; }
    .gallery-zoom-icon svg { width: 36px; height: 36px; stroke: var(--light-secondary); fill: none; stroke-width: 1.5; }
    @media (min-width: 1025px) {
      .gallery-grid { grid-template-columns: repeat(4, 1fr); }
      .gallery-item:first-child { grid-column: span 2; aspect-ratio: 16/9; }
    }

    /* Lightbox */
    #lightbox {
      position: fixed;
      inset: 0;
      background: color-mix(in srgb, var(--dark-primary) 95%, transparent);
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
    }
    #lightbox.open { opacity: 1; pointer-events: all; }
    .lightbox-img {
      max-width: 90vw;
      max-height: 85vh;
      border-radius: 6px;
      object-fit: contain;
    }
    .lightbox-close {
      position: absolute;
      top: 1.25rem; right: 1.25rem;
      color: color-mix(in srgb, var(--light-secondary) 70%, transparent);
      font-size: 2rem;
      line-height: 1;
      transition: color 0.2s;
    }
    .lightbox-close:hover { color: var(--light-secondary); }
    .lightbox-prev, .lightbox-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 48px; height: 48px;
      background: color-mix(in srgb, var(--light-secondary) 10%, transparent);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--light-secondary);
      font-size: 1.3rem;
      transition: background 0.2s;
    }
    .lightbox-prev:hover, .lightbox-next:hover { background: color-mix(in srgb, var(--brand-primary) 40%, transparent); }
    .lightbox-prev { left: 1rem; }
    .lightbox-next { right: 1rem; }
    .lightbox-caption {
      position: absolute;
      bottom: 1.5rem;
      left: 50%;
      transform: translateX(-50%);
      color: color-mix(in srgb, var(--light-secondary) 88%, transparent);
      font-size: 0.85rem;
      white-space: nowrap;
    }

    /* ─── AMENITIES ─── */
    #amenities {
      padding: var(--section-pad);
      background: var(--light-primary);
    }
    .amenities-header { max-width: var(--max-w); margin: 0 auto 2rem; }
    .amenities-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      max-width: var(--max-w);
      margin: 0 auto;
    }
    .amenity-card {
      background: var(--light-secondary);
      border-radius: var(--radius);
      padding: 1.25rem;
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      min-width: 0;
      box-shadow: 0 2px 12px color-mix(in srgb, var(--dark-primary) 5%, transparent);
      transition: box-shadow 0.25s, transform 0.25s;
    }
    .amenity-card:hover { box-shadow: 0 6px 24px color-mix(in srgb, var(--dark-primary) 10%, transparent); transform: translateY(-2px); }
    .amenity-card > div:last-child { min-width: 0; }
    .amenity-icon {
      width: 42px;
      height: 42px;
      background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .amenity-icon svg { width: 20px; height: 20px; stroke: var(--brand-primary); fill: none; stroke-width: 1.8; }
    .amenity-name {
      font-weight: 600;
      font-size: 0.88rem;
      margin-bottom: 0.2rem;
      overflow-wrap: anywhere;
    }
    .amenity-desc {
      font-size: 0.78rem;
      color: var(--dark-secondary);
      line-height: 1.5;
      overflow-wrap: anywhere;
    }
    @media (min-width: 641px) {
      .amenities-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 1025px) {
      .amenities-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (min-width: 1025px) {
      .amenities-grid { grid-template-columns: repeat(4, 1fr); }
    }

    #reviews {
      padding: var(--section-pad);
      background: var(--light-primary);
    }

    /* ─── BUILDER (dark band, matches pricing) ─── */
    #builder {
      padding: var(--section-pad);
      background: var(--dark-primary);
    }
    #builder .section-title { color: var(--light-secondary); }
    #builder .section-label { color: var(--brand-tertiary); }
    .builder-inner { max-width: var(--max-w); margin: 0 auto; }
    .builder-desc {
      max-width: 780px;
      color: color-mix(in srgb, var(--light-secondary) 82%, transparent);
      line-height: 1.8;
    }
    .builder-desc + .builder-desc { margin-top: 1rem; }
    .builder-actions {
      margin-top: 1.75rem;
      display: flex;
      gap: 0.9rem;
      flex-wrap: wrap;
    }
    #builder .btn-outline-dark {
      border-color: var(--brand-tertiary);
      color: var(--brand-tertiary);
    }
    #builder .btn-outline-dark:hover {
      background: var(--brand-tertiary);
      color: var(--dark-primary);
    }
    .reviews-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
      max-width: 720px;
      margin: 0 0 1.75rem;
    }
    .reviews-stat {
      background: var(--light-secondary);
      border: 1px solid color-mix(in srgb, var(--dark-primary) 8%, transparent);
      border-radius: var(--radius);
      padding: 1.1rem 1rem;
      text-align: center;
      box-shadow: 0 2px 12px color-mix(in srgb, var(--dark-primary) 5%, transparent);
    }
    .reviews-stat-num {
      display: block;
      font-family: 'Playfair Display', serif;
      font-size: 1.35rem;
      color: var(--brand-primary);
      line-height: 1.2;
      margin-bottom: 0.35rem;
    }
    .reviews-stat-label {
      display: block;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--dark-secondary);
    }
    .reviews-subtitle {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.15rem, 2.5vw, 1.45rem);
      color: var(--dark-primary);
      margin: 2rem 0 0.85rem;
    }
    .reviews-lead,
    .reviews-bottom {
      max-width: 780px;
      color: color-mix(in srgb, var(--dark-primary) 88%, var(--light-secondary));
      line-height: 1.8;
      margin-bottom: 1rem;
    }
    .reviews-pros-grid {
      display: grid;
      gap: 1rem;
      grid-template-columns: 1fr;
      margin-bottom: 0.5rem;
    }
    .reviews-pro-card {
      background: var(--light-secondary);
      border: 1px solid color-mix(in srgb, var(--dark-primary) 8%, transparent);
      border-radius: var(--radius);
      padding: 1.25rem 1.35rem;
      box-shadow: 0 2px 12px color-mix(in srgb, var(--dark-primary) 5%, transparent);
    }
    .reviews-pro-card h4 {
      font-size: 1rem;
      color: var(--dark-primary);
      margin-bottom: 0.55rem;
    }
    .reviews-pro-card p {
      font-size: 0.9rem;
      color: var(--dark-secondary);
      line-height: 1.65;
      margin: 0;
    }
    .reviews-checklist {
      max-width: 780px;
      margin: 0 0 1.25rem;
      padding-left: 1.2rem;
      color: color-mix(in srgb, var(--dark-primary) 88%, var(--light-secondary));
      line-height: 1.75;
    }
    .reviews-checklist li { margin-bottom: 0.65rem; }
    .reviews-checklist li:last-child { margin-bottom: 0; }
    @media (min-width: 641px) {
      .reviews-pros-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 640px) {
      .reviews-stats { grid-template-columns: 1fr; }
    }

    /* ─── MASTER PLAN ─── */
    #masterplan {
      padding: var(--section-pad);
      background: var(--dark-primary);
    }
    #masterplan .section-title { color: var(--light-secondary); }
    #masterplan .section-label { color: var(--brand-primary); }
    .masterplan-inner { max-width: var(--max-w); margin: 0 auto; }
    .masterplan-desc {
      color: color-mix(in srgb, var(--light-secondary) 82%, transparent);
      max-width: 680px;
      margin-bottom: 2rem;
      line-height: 1.8;
    }
    .masterplan-image {
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 0 8px 48px color-mix(in srgb, var(--dark-primary) 40%, transparent);
    }
    .masterplan-image img { width: 100%; }

    /* ─── LOCATION ─── */
    #location {
      padding: var(--section-pad);
      background: var(--light-primary);
    }
    .location-inner {
      display: grid;
      gap: 2.5rem;
      max-width: var(--max-w);
      margin: 0 auto;
    }
    .location-map-wrap {
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 0 4px 24px color-mix(in srgb, var(--dark-primary) 8%, transparent);
    }
    .location-map-wrap img { width: 100%; }
    .map-link-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      margin-top: 1rem;
      padding: 0.65rem 1.4rem;
      background: var(--brand-primary);
      color: var(--dark-primary);
      border-radius: 4px;
      font-size: 0.85rem;
      font-weight: 600;
      transition: background 0.2s;
    }
    .map-link-btn:hover { background: var(--brand-secondary); }
    .map-link-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
    .location-desc { font-size: 0.93rem; line-height: 1.8; margin-bottom: 1.5rem; color: var(--dark-secondary); }
    .landmarks-list { display: grid; gap: 1rem; }
    #location .section-label { color: var(--brand-secondary); }
    .landmark-group h3 {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--brand-secondary);
      margin-bottom: 0.6rem;
    }
    .landmark-group ul { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
    .landmark-group li {
      display: flex;
      justify-content: space-between;
      font-size: 0.85rem;
      color: var(--dark-secondary);
      padding-bottom: 0.4rem;
      border-bottom: 1px solid var(--light-tertiary);
    }
    .landmark-group li span { font-weight: 600; color: var(--dark-primary); }
    @media (min-width: 1025px) {
      .location-inner { grid-template-columns: 1fr 1fr; align-items: start; }
    }

    /* ─── PRICING ─── */
    #pricing {
      padding: var(--section-pad);
      background: var(--dark-primary);
    }
    #pricing .section-title { color: var(--light-secondary); }
    #pricing .section-label { color: var(--brand-tertiary); }
    .pricing-header { max-width: var(--max-w); margin: 0 auto 2rem; }
    .pricing-desc { color: color-mix(in srgb, var(--light-secondary) 82%, transparent); max-width: 560px; }
    .pricing-grid {
      display: grid;
      gap: 1.25rem;
      max-width: var(--max-w);
      margin: 0 auto;
    }
    .pricing-card {
      background: color-mix(in srgb, var(--light-secondary) 4%, transparent);
      border: 1px solid color-mix(in srgb, var(--light-secondary) 8%, transparent);
      border-radius: var(--radius);
      padding: 1.75rem;
      transition: border-color 0.25s;
    }
    .pricing-card.featured {
      border-color: var(--brand-primary);
      background: color-mix(in srgb, var(--brand-primary) 7%, transparent);
    }
    .pricing-card.featured::before {
      content: 'Most Popular';
      display: inline-block;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--brand-primary);
      background: color-mix(in srgb, var(--brand-primary) 15%, transparent);
      padding: 0.2rem 0.7rem;
      border-radius: 100px;
      margin-bottom: 1rem;
    }
    .pricing-card:not(.featured):hover { border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent); }
    #pricing .pricing-card .btn-outline-dark {
      border-color: var(--brand-tertiary);
      color: var(--brand-tertiary);
    }
    #pricing .pricing-card .btn-outline-dark:hover {
      background: var(--brand-tertiary);
      color: var(--dark-primary);
    }
    .pricing-config {
      font-family: 'Playfair Display', serif;
      font-size: 1.3rem;
      color: var(--light-secondary);
      margin-bottom: 0.25rem;
    }
    .pricing-area {
      font-size: 0.82rem;
      color: color-mix(in srgb, var(--light-secondary) 76%, transparent);
      margin-bottom: 1.25rem;
    }
    .pricing-price-main {
      font-family: 'Playfair Display', serif;
      font-size: 1.9rem;
      color: var(--brand-primary);
      font-weight: 700;
      margin-bottom: 0.25rem;
    }
    .pricing-rate {
      font-size: 0.8rem;
      color: color-mix(in srgb, var(--light-secondary) 78%, transparent);
      margin-bottom: 1.5rem;
    }
    .pricing-divider { height: 1px; background: color-mix(in srgb, var(--light-secondary) 8%, transparent); margin-bottom: 1.25rem; }
    .pricing-detail { display: flex; justify-content: space-between; font-size: 0.83rem; margin-bottom: 0.6rem; }
    .pricing-detail-label { color: color-mix(in srgb, var(--light-secondary) 76%, transparent); }
    .pricing-detail-val { color: color-mix(in srgb, var(--light-secondary) 85%, transparent); font-weight: 500; }
    .pricing-footnote {
      max-width: var(--max-w);
      margin: 2rem auto 0;
      color: color-mix(in srgb, var(--light-secondary) 72%, transparent);
      font-size: 0.8rem;
      line-height: 1.7;
    }
    @media (min-width: 1025px) {
      .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 1025px) {
      .pricing-grid { grid-template-columns: repeat(4, 1fr); }
    }

    /* ─── FAQ (homepage + subpages) ─── */
    #faq {
      padding: var(--section-pad);
      background: var(--light-primary);
    }
    .faq-inner { max-width: 760px; margin: 0 auto; }
    .faq-header { margin-bottom: 2rem; }
    .faq-list {
      display: grid;
      gap: 0.75rem;
    }
    .faq-item {
      background: var(--light-secondary);
      border: 1px solid color-mix(in srgb, var(--dark-primary) 14%, transparent);
      border-radius: var(--radius);
      box-shadow: 0 1px 2px color-mix(in srgb, var(--dark-primary) 5%, transparent);
      overflow: hidden;
      transition: border-color 0.2s ease;
    }
    .faq-item.open {
      border-color: color-mix(in srgb, var(--brand-secondary) 55%, transparent);
    }
    .faq-q {
      width: 100%;
      text-align: left;
      padding: 1rem 1.25rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--dark-primary);
      transition: color 0.2s;
    }
    .faq-q:hover { color: var(--brand-primary); }
    .faq-q:focus-visible {
      outline: 2px solid var(--brand-secondary);
      outline-offset: -2px;
    }
    .faq-q svg {
      width: 18px; height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      flex-shrink: 0;
      transition: transform 0.3s;
    }
    .faq-item.open .faq-q svg { transform: rotate(180deg); }
    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease, padding 0.25s ease;
    }
    .faq-item.open .faq-a {
      max-height: 32rem;
      padding: 0 1.25rem 1.1rem;
    }
    .faq-a p {
      font-size: 0.9rem;
      color: var(--dark-secondary);
      line-height: 1.8;
      margin: 0;
    }
    @media (prefers-reduced-motion: reduce) {
      .faq-item,
      .faq-q svg,
      .faq-a { transition: none; }
    }

    /* ─── ENQUIRY FORM ─── */
    #contact {
      padding: var(--section-pad);
      background: var(--dark-primary);
    }
    .contact-inner {
      display: grid;
      gap: 3rem;
      max-width: var(--max-w);
      margin: 0 auto;
    }
    .contact-info .section-title { color: var(--light-secondary); }
    .contact-info .section-label { color: var(--brand-primary); }
    .contact-pitch {
      color: color-mix(in srgb, var(--light-secondary) 82%, transparent);
      font-size: 0.93rem;
      line-height: 1.8;
      margin-top: 1rem;
    }
    .contact-detail {
      margin-top: 2rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .contact-detail-item {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
    }
    .contact-detail-icon {
      width: 38px; height: 38px;
      background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .contact-detail-icon svg { width: 18px; height: 18px; stroke: var(--brand-primary); fill: none; stroke-width: 1.8; }
    .contact-detail-text { font-size: 0.88rem; color: color-mix(in srgb, var(--light-secondary) 82%, transparent); padding-top: 0.2rem; }
    .contact-detail-text strong { display: block; color: var(--light-secondary); font-size: 0.92rem; margin-bottom: 0.1rem; }
    .form-card {
      background: color-mix(in srgb, var(--light-secondary) 4%, transparent);
      border: 1px solid color-mix(in srgb, var(--light-secondary) 8%, transparent);
      border-radius: var(--radius);
      padding: 2rem 1.5rem;
    }
    .form-row { display: grid; gap: 1rem; margin-bottom: 1rem; }
    @media (min-width: 641px) {
      .form-row { grid-template-columns: 1fr 1fr; }
    }
    .form-group { display: flex; flex-direction: column; gap: 0.4rem; }
    .form-group label { font-size: 0.78rem; font-weight: 600; color: color-mix(in srgb, var(--light-secondary) 82%, transparent); letter-spacing: 0.05em; }
    .form-group input,
    .form-group select,
    .form-group textarea {
      background: color-mix(in srgb, var(--light-secondary) 6%, transparent);
      border: 1px solid color-mix(in srgb, var(--light-secondary) 12%, transparent);
      border-radius: 6px;
      padding: 0.75rem 1rem;
      font-family: 'Inter', sans-serif;
      font-size: 0.9rem;
      color: var(--light-secondary);
      transition: border-color 0.2s;
      outline: none;
      width: 100%;
    }
    .form-group select option { background: var(--dark-primary); color: var(--light-secondary); }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus { border-color: var(--brand-primary); }
    .form-group input.error,
    .form-group select.error,
    .form-group textarea.error { border-color: var(--brand-secondary); }
    .field-error { font-size: 0.75rem; color: var(--brand-tertiary); display: none; }
    .field-error.show { display: block; }
    .form-group textarea { resize: vertical; min-height: 90px; }
    .form-submit {
      width: 100%;
      padding: 0.9rem;
      background: var(--brand-primary);
      color: var(--dark-primary);
      border-radius: 6px;
      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      margin-top: 0.5rem;
      transition: background 0.2s, transform 0.2s;
    }
    .form-submit:hover { background: var(--brand-secondary); transform: translateY(-1px); }
    .form-submit:disabled {
      opacity: 0.72;
      cursor: not-allowed;
      transform: none;
    }
    .form-status {
      margin-top: 1rem;
      padding: 0.95rem 1rem;
      border-radius: 8px;
      font-size: 0.9rem;
      line-height: 1.6;
      border: 1px solid transparent;
    }
    .form-status[hidden] { display: none; }
    .form-status.success {
      background: color-mix(in srgb, var(--brand-primary) 16%, transparent);
      border-color: color-mix(in srgb, var(--brand-primary) 45%, transparent);
      color: color-mix(in srgb, var(--light-secondary) 90%, transparent);
    }
    .form-status.error {
      background: color-mix(in srgb, var(--brand-secondary) 16%, transparent);
      border-color: color-mix(in srgb, var(--brand-secondary) 40%, transparent);
      color: var(--light-primary);
    }
    @media (min-width: 1025px) {
      .contact-inner { grid-template-columns: 1fr 1.4fr; align-items: start; }
    }

    /* ─── RELATED PROJECTS ─── */
    .related-projects[data-related-projects-section] {
      padding: var(--section-pad) !important;
      background: var(--light-primary) !important;
      color: var(--dark-primary) !important;
      border-top: 1px solid color-mix(in srgb, var(--dark-primary) 6%, transparent);
    }
    .related-projects[data-related-projects-section] .related-projects__inner {
      max-width: var(--max-w) !important;
      margin: 0 auto !important;
    }
    .related-projects[data-related-projects-section] .related-projects__header {
      max-width: none !important;
      margin: 0 0 2.5rem !important;
      width: 100%;
}
    .related-projects[data-related-projects-section] .related-projects__header h2 {
      color: var(--dark-primary) !important;
      max-width: none !important;
      display: block;
      width: 100%;
}
    .related-projects[data-related-projects-section] .related-projects__header h2::after {
      content: "";
      display: block;
      width: 48px;
      height: 3px;
      margin: 1rem 0 1.5rem;
      border-radius: 2px;
      background: var(--brand-primary);
    }
    .related-projects[data-related-projects-section] .related-projects__header p {
      margin: 0 !important;
      color: var(--dark-secondary) !important;
      font-size: 1rem !important;
      line-height: 1.75 !important;
    }
    .related-projects[data-related-projects-section] .related-projects__grid {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 1.25rem !important;
    }
    .related-projects[data-related-projects-section] .related-projects__card {
      position: relative;
      overflow: hidden;
      cursor: pointer;
      border: 1px solid color-mix(in srgb, var(--dark-primary) 8%, transparent) !important;
      border-radius: var(--radius) !important;
      background: var(--light-secondary) !important;
      box-shadow: 0 4px 24px color-mix(in srgb, var(--dark-primary) 8%, transparent) !important;
    }
    .related-projects[data-related-projects-section] .related-projects__card:hover {
      border-color: color-mix(in srgb, var(--brand-primary) 35%, transparent) !important;
      box-shadow: 0 6px 24px color-mix(in srgb, var(--dark-primary) 10%, transparent) !important;
      transform: translateY(-3px) !important;
    }
    .related-projects[data-related-projects-section] .related-projects__image {
      display: block;
      width: 100%;
      height: auto;
      object-fit: cover;
      aspect-ratio: 4 / 3 !important;
    }
    .related-projects[data-related-projects-section] .related-projects__body h3 a::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
    }
    .related-projects[data-related-projects-section] .related-projects__body {
      padding: 1.35rem !important;
    }
    .related-projects[data-related-projects-section] .related-projects__meta {
      margin-bottom: 0.55rem !important;
      color: var(--brand-secondary) !important;
      font-family: 'Inter', sans-serif !important;
      font-size: 0.72rem !important;
      font-weight: 600 !important;
      letter-spacing: 0.16em !important;
    }
    .related-projects[data-related-projects-section] .related-projects__body h3 {
      color: var(--dark-primary) !important;
      font-family: 'Playfair Display', serif !important;
      font-size: 1.25rem !important;
      font-weight: 600 !important;
      line-height: 1.25 !important;
    }
    .related-projects[data-related-projects-section] .related-projects__body h3 a {
      color: inherit !important;
    }
    .related-projects[data-related-projects-section] .related-projects__body h3 a:focus-visible {
      outline-color: var(--brand-primary) !important;
    }
    .related-projects[data-related-projects-section] .related-projects__body p:last-child {
      margin-top: 0.75rem !important;
      color: var(--dark-secondary) !important;
      font-size: 0.93rem !important;
      line-height: 1.65 !important;
    }
    .related-projects[data-related-projects-section] .related-projects__cta {
      display: flex;
      justify-content: center;
      gap: 0.75rem;
      flex-wrap: wrap;
      margin-top: clamp(1.5rem, 3vw, 2rem);
    }
    .related-projects[data-related-projects-section] .related-projects__btn {
      display: inline-block;
      padding: 0.7rem 1.5rem;
      border-radius: 6px;
      font-size: 0.92rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-decoration: none;
      border: 1.5px solid var(--rp-accent, var(--brand-primary));
      transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .related-projects[data-related-projects-section] .related-projects__btn--primary {
      background: var(--rp-accent, var(--brand-primary));
      color: var(--dark-primary);
    }
    .related-projects[data-related-projects-section] .related-projects__btn--primary:hover {
      transform: translateY(-1px);
      opacity: 0.92;
    }
    .related-projects[data-related-projects-section] .related-projects__btn--secondary {
      background: transparent;
      color: var(--dark-primary);
      border-color: color-mix(in srgb, var(--dark-primary) 32%, transparent);
    }
    .related-projects[data-related-projects-section] .related-projects__btn--secondary:hover {
      background: color-mix(in srgb, var(--dark-primary) 8%, transparent);
      border-color: color-mix(in srgb, var(--dark-primary) 55%, transparent);
    }
    @media (max-width: 1024px) {
      .related-projects[data-related-projects-section] .related-projects__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }
    @media (max-width: 640px) {
      .related-projects[data-related-projects-section] .related-projects__grid {
        grid-template-columns: 1fr !important;
      }
    }

    /* ─── FOOTER ─── */
    #footer {
      background: var(--dark-primary);
      padding: 3rem 1.25rem 1.5rem;
      border-top: 1px solid color-mix(in srgb, var(--light-secondary) 6%, transparent);
    }
    .footer-inner {
      display: grid;
      gap: 2.5rem;
      max-width: var(--max-w);
      margin: 0 auto;
    }
    .footer-brand .footer-logo {
      display: inline-flex;
      align-items: center;
      gap: 0.625rem;
      text-decoration: none;
      color: var(--light-secondary);
      margin-bottom: 0.75rem;
    }
    .footer-tagline { font-size: 0.83rem; color: color-mix(in srgb, var(--light-secondary) 72%, transparent); line-height: 1.6; max-width: 260px; }
    .footer-about-text { font-size: 0.83rem; color: color-mix(in srgb, var(--light-secondary) 74%, transparent); line-height: 1.7; }
    .contact-form-card {
      background: color-mix(in srgb, var(--light-secondary) 4%, transparent);
      border: 1px solid color-mix(in srgb, var(--light-secondary) 12%, transparent);
      border-radius: var(--radius);
      padding: 2rem 1.5rem;
    }
    .page-updated--light {
      margin: 0.6rem 0 1rem;
      color: color-mix(in srgb, var(--dark-primary) 72%, transparent);
      font-size: 0.9rem;
      line-height: 1.4;
    }
    .page-updated--light time { font-weight: 600; }
    .footer-col-title {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--brand-primary);
      margin-bottom: 1rem;
    }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
    .footer-col ul li a { font-size: 0.83rem; color: color-mix(in srgb, var(--light-secondary) 78%, transparent); transition: color 0.2s; }
    .footer-col ul li a:hover { color: var(--brand-primary); }
    .footer-col address { font-style: normal; font-size: 0.83rem; color: color-mix(in srgb, var(--light-secondary) 76%, transparent); line-height: 1.8; }
    .footer-disclaimer {
      max-width: var(--max-w);
      margin: 2.5rem auto 0;
      padding-top: 1.5rem;
      border-top: 1px solid color-mix(in srgb, var(--light-secondary) 6%, transparent);
      font-size: 0.75rem;
      color: color-mix(in srgb, var(--light-secondary) 62%, transparent);
      line-height: 1.7;
    }
    .footer-copy {
      max-width: var(--max-w);
      margin: 1rem auto 0;
      font-size: 0.75rem;
      color: color-mix(in srgb, var(--light-secondary) 62%, transparent);
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    @media (min-width: 1025px) {
      .footer-inner { grid-template-columns: 1.5fr 1fr 1fr 1.5fr; }
    }

    /* ─── Scroll-reveal utility ─── */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.55s ease, transform 0.55s ease;
    }
    .reveal.visible { opacity: 1; transform: none; }

    /* ─── Divider ─── */
    .gold-divider {
      width: 48px;
      height: 3px;
      background: var(--brand-primary);
      border-radius: 2px;
      margin: 1rem 0 1.5rem;
    }

/* ===== Multi-page shell additions (hero, prose, data tables, notices) ===== */
/* Page-local additions for multi-page shell */
    .page-updated { color: color-mix(in srgb, var(--light-secondary) 72%, transparent); font-size: 0.85rem; letter-spacing: 0.05em; margin-bottom: 0.75rem; }
    .page-updated time { color: var(--brand-tertiary); font-weight: 600; }
    .page-hero { padding: 8rem 1.25rem 3.5rem; background: var(--dark-primary); color: var(--light-secondary); position: relative; overflow: hidden; }
    .page-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 8%, transparent) 0%, transparent 60%); z-index: 0; }
    .page-hero-inner { max-width: var(--max-w); margin: 0 auto; position: relative; z-index: 1; display: grid; gap: 2.5rem; }
    .page-hero h1 { color: var(--light-secondary); margin-bottom: 1rem; }
    .page-hero .lead { font-size: 1.05rem; color: color-mix(in srgb, var(--light-secondary) 85%, transparent); line-height: 1.85; max-width: 640px; margin-bottom: 1.5rem; }
    .page-hero .lead a { color: var(--brand-tertiary); text-decoration: underline; text-underline-offset: 0.18em; }
    .page-hero-image { border-radius: var(--radius); overflow: hidden; box-shadow: 0 8px 48px color-mix(in srgb, var(--dark-primary) 40%, transparent); }
    .page-hero-image img { width: 100%; display: block; }
    .page-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0 2rem; border-top: 1px solid color-mix(in srgb, var(--light-secondary) 12%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--light-secondary) 12%, transparent); padding: 1.25rem 0; }
    .page-hero-stat .num { font-family: 'Playfair Display', serif; font-size: clamp(1.35rem, 4vw, 1.9rem); color: var(--brand-primary); display: block; line-height: 1.1; }
    .page-hero-stat .lbl { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--light-secondary) 66%, transparent); }
    .page-hero-ctas { display: flex; gap: 0.9rem; flex-wrap: wrap; }
    @media (min-width: 1025px) { .page-hero-inner { grid-template-columns: 1.1fr 1fr; align-items: center; } }
    .prose-section { padding: var(--section-pad); }
    .prose-section.bg-light { background: var(--light-primary); }
    .prose-section.bg-white { background: var(--light-secondary); }
    .prose-section.bg-dark { background: var(--dark-primary); color: color-mix(in srgb, var(--light-secondary) 88%, transparent); }
    .prose-section.bg-dark h2 { color: var(--light-secondary); }
    .prose-section.bg-dark a { color: var(--brand-tertiary); text-decoration: underline; text-underline-offset: 0.18em; }
    .prose-inner { max-width: 780px; margin: 0 auto; }
    .prose-inner.wide { max-width: var(--max-w); }
    .prose-inner h2 { margin-bottom: 1rem; }
    .prose-inner p { font-size: 1rem; line-height: 1.85; margin-bottom: 1.2rem; color: color-mix(in srgb, var(--dark-primary) 88%, var(--light-secondary)); }
    .prose-section.bg-dark .prose-inner p { color: color-mix(in srgb, var(--light-secondary) 82%, transparent); }
    .prose-inner a { color: var(--brand-secondary); text-decoration: underline; text-underline-offset: 0.18em; font-weight: 600; }
    .prose-section.bg-dark .prose-inner a { color: var(--brand-tertiary); }
    .prose-inner ul, .prose-inner ol { margin: 0 0 1.4rem 1.2rem; }
    .prose-inner li { font-size: 0.97rem; line-height: 1.8; margin-bottom: 0.45rem; color: inherit; }
    .data-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.75rem; font-size: 0.9rem; }
    .data-table th, .data-table td { padding: 0.7rem 0.85rem; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--dark-primary) 8%, transparent); }
    .prose-section.bg-dark .data-table th, .prose-section.bg-dark .data-table td { border-bottom-color: color-mix(in srgb, var(--light-secondary) 12%, transparent); }
    .data-table th { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-secondary); font-weight: 700; }
    .prose-section.bg-dark .data-table th { color: var(--brand-tertiary); }
    .closing-cta { padding: 4rem 1.25rem; background: var(--dark-primary); color: var(--light-secondary); text-align: center; }
    .closing-cta-inner { max-width: 620px; margin: 0 auto; }
    .closing-cta h2 { color: var(--light-secondary); margin-bottom: 0.9rem; }
    .closing-cta p { color: color-mix(in srgb, var(--light-secondary) 78%, transparent); margin-bottom: 1.75rem; line-height: 1.8; }
    .notice { background: color-mix(in srgb, var(--brand-primary) 8%, transparent); border-left: 3px solid var(--brand-primary); padding: 1rem 1.25rem; border-radius: 4px; font-size: 0.9rem; line-height: 1.75; color: var(--dark-secondary); margin: 1.25rem 0 1.75rem; }
    .prose-section.bg-dark .notice { background: color-mix(in srgb, var(--brand-primary) 12%, transparent); color: color-mix(in srgb, var(--light-secondary) 82%, transparent); }

/* phase-b brand-text */
.brand-logo-img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex: 0 0 32px;
  filter: none !important;
}
@media (min-width: 1025px) {
  .brand-logo-img {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
  }
}
.brand-text { display: inline-flex; flex-direction: column; line-height: 1.15; gap: 0; color: inherit; text-decoration: none; }
.brand-developer { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
.brand-project { font-size: 1rem; font-weight: 700; }
a:has(> .brand-text), a.nav-logo, a.footer-logo, a.footer-brand, a.navbar_logo-link, a.footer_logo-link, a.navbar__brand, a.brand { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: inherit; }
#nav .nav-logo, #nav .nav-logo .brand-text { color: var(--light-secondary); }
#nav .nav-logo .brand-developer { color: color-mix(in srgb, var(--light-secondary) 75%, transparent); }
#footer .footer-logo, #footer .footer-logo .brand-text { color: var(--light-secondary); }
#footer .footer-logo .brand-developer { color: color-mix(in srgb, var(--light-secondary) 75%, transparent); }

/* 404 page (standalone layout; links full stylesheet for tokens) */
body.page-404 {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--brand-primary) 20%, transparent), transparent 44%),
    linear-gradient(180deg, color-mix(in srgb, var(--dark-primary) 92%, var(--dark-primary)) 0%, var(--dark-primary) 100%);
  color: var(--brand-tertiary);
  font-family: 'Inter', sans-serif;
}
body.page-404 main {
  width: min(100%, 640px);
  padding: 2.75rem;
  border: 1px solid color-mix(in srgb, var(--light-secondary) 8%, transparent);
  border-radius: 24px;
  background: color-mix(in srgb, var(--dark-primary) 90%, transparent);
  box-shadow: 0 24px 80px color-mix(in srgb, var(--dark-primary) 35%, transparent);
  text-align: center;
}
body.page-404 main img {
  display: block;
  width: 140px;
  height: auto;
  margin: 0 auto 1.75rem;
}
body.page-404 .eyebrow {
  margin: 0 0 0.75rem;
  color: var(--brand-primary);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
body.page-404 h1 {
  margin: 0 0 1rem;
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.1;
  color: var(--brand-tertiary);
}
body.page-404 main p {
  margin: 0 auto 1.75rem;
  max-width: 34rem;
  color: color-mix(in srgb, var(--brand-tertiary) 76%, transparent);
  line-height: 1.7;
}
body.page-404 main a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  background: var(--brand-primary);
  color: var(--dark-primary);
  font-weight: 600;
  text-decoration: none;
}
body.page-404 main a:hover {
  background: var(--brand-tertiary);
}

/* fleet: nav links title-case + 12px (2026-06-05) */
.nav-links a:not([class*="cta"]):not([class*="btn"]):not([class*="button"]){font-size:12px !important;text-transform:none !important}

/* fleet: nav collapses at tablet 1024 (2026-06-05) */
@media(min-width:1025px){.nav-links{display:flex !important}.hamburger{display:none !important}}
@media(max-width:1024px){.nav-links{display:none !important}.hamburger{display:flex !important}.nav-links.is-open,.is-open .nav-links,.nav-links.open,.open .nav-links,.nav-links.active,.active .nav-links,.nav-links.w--open,.w--open .nav-links,.nav-links.on,.on .nav-links,.nav-links.visible,.visible .nav-links,.nav-links.is-visible,.is-visible .nav-links,.nav-links.expanded,.expanded .nav-links,.nav-links.show,.show .nav-links,.nav-links.shown,.shown .nav-links,.nav-links.opened,.opened .nav-links,.nav-links.menu-open,.menu-open .nav-links,.nav-links.nav-open,.nav-open .nav-links,.nav-links[data-nav-menu-open]{display:flex !important;flex-direction:column !important}}

/* fleet: nav brand text size cap — brand NAME <=15px so no logo text exceeds 16px (2026-06-06) */
[class*="brand-project"],[class*="brand-name"],[class*="brand-title"],[class*="brand-lockup__name"]{font-size:15px !important}
[class*="brand-developer"]{font-size:11px !important}