/* ================================================================
   OBEDIO - styles.css
   Shared design system for all pages
   ================================================================ */

    /* ================================================================
       OBEDIO  -  Silent Luxury
       Rolex meets Apple meets Bang & Olufsen
       ================================================================ */

    :root {
      --gold: #C9A962;
      --gold-dim: #c9a96225;
      --gold-glow: #c9a96215;
      --gold-bright: #d4b76e;
      --black: #080705;
      --charcoal: #0f0e0b;
      --dark: #0a0908;
      --cream: #F0EBE0;
      --cream-dim: #f0ebe0cc;
      --muted: #7a756e;
      --muted-light: #a09a92;
      --surface: #141210;
      --surface-light: #1a1814;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      scrollbar-width: thin;
      scrollbar-color: var(--gold-dim) var(--black);
    }

    body {
      background: var(--black);
      color: var(--cream);
      font-family: 'Cormorant Garamond', 'Georgia', serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
      line-height: 1.7;
    }

    html {
      background: var(--black);
    }

    ::selection {
      background: var(--gold);
      color: var(--black);
    }

    /* ── Typography ── */

    h1, h2, h3, h4, .nav-logo, .section-label {
      font-family: 'Cinzel', 'Georgia', serif;
    }

    .section-label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 5px;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 32px;
      opacity: 0.85;
    }

    .section-headline {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(36px, 5vw, 64px);
      font-weight: 300;
      line-height: 1.15;
      color: var(--cream);
      letter-spacing: 1px;
      margin-bottom: 24px;
    }

    .section-headline em {
      font-style: italic;
      color: var(--gold);
    }

    .section-subline {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(18px, 2.2vw, 24px);
      font-weight: 300;
      color: var(--muted-light);
      line-height: 1.6;
      max-width: 600px;
    }

    .body-text {
      font-size: clamp(17px, 1.8vw, 20px);
      font-weight: 300;
      color: var(--cream-dim);
      line-height: 1.8;
      max-width: 560px;
    }

    .gold-text { color: var(--gold); }

    /* ── Layout ── */

    .section {
      position: relative;
      z-index: 1;
      padding: 140px 48px;
      overflow: hidden;
    }

    .section-inner {
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    .section-dark { background: rgba(8, 7, 5, 0.94); }
    .section-charcoal { background: rgba(15, 14, 11, 0.94); }
    .section-surface { background: rgba(20, 18, 16, 0.94); }

    @media (max-width: 768px) {
      .section-dark { background: rgba(30, 28, 25, 0.90); }
      .section-charcoal { background: rgba(35, 32, 28, 0.90); }
      .section-surface { background: rgba(40, 36, 32, 0.90); }
    }

    /* Subtle gold separator between sections */
    .section + .section::before {
      content: '';
      display: block;
      width: 40px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      opacity: 0.15;
      margin: 0 auto 0;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }

    /* ── Reveal animation ── */

    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
                  transform 1s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-delay-1 { transition-delay: 0.15s; }
    .reveal-delay-2 { transition-delay: 0.3s; }
    .reveal-delay-3 { transition-delay: 0.45s; }
    .reveal-delay-4 { transition-delay: 0.6s; }
    .reveal-delay-5 { transition-delay: 0.75s; }

    /* ── Images ── */

    .img-full {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 2px;
    }

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

    /* ── Gold divider ── */

    .gold-divider {
      width: 60px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      opacity: 0.3;
      margin: 48px 0;
    }

    .gold-divider-center {
      width: 60px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      opacity: 0.3;
      margin: 48px auto;
    }

    /* ================================================================
       NAVIGATION
       ================================================================ */

    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      padding: 0 48px;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: background 0.5s ease, box-shadow 0.5s ease, backdrop-filter 0.5s ease;
    }

    .nav.scrolled {
      background: rgba(8, 7, 5, 0.92);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 1px 0 rgba(201, 169, 98, 0.08);
    }

    .nav-logo {
      display: flex;
      align-items: center;
      text-decoration: none;
      transition: opacity 0.3s ease;
      flex-shrink: 0;
    }

    .nav-logo img {
      height: 22px;
      width: auto;
    }

    .nav-logo:hover { opacity: 0.7; }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 40px;
      list-style: none;
    }

    .nav-links a {
      font-family: 'Cinzel', serif;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 2px;
      color: var(--muted-light);
      text-decoration: none;
      text-transform: uppercase;
      transition: color 0.3s ease;
      position: relative;
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 1px;
      background: var(--gold);
      transition: width 0.3s ease;
    }

    .nav-links a:hover { color: var(--cream); }
    .nav-links a:hover::after { width: 100%; }

    .nav-links a.highlight {
      color: var(--gold);
      border: 1px solid var(--gold-dim);
      padding: 8px 20px;
      transition: all 0.3s ease;
    }

    .nav-links a.highlight::after { display: none; }
    .nav-links a.highlight:hover {
      background: rgba(201, 169, 98, 0.08);
      border-color: var(--gold);
    }

    .nav-links a.highlight-solid {
      color: var(--black);
      background: var(--gold);
      padding: 8px 20px;
      transition: all 0.3s ease;
    }
    .nav-links a.highlight-solid::after { display: none; }
    .nav-links a.highlight-solid:hover { background: #dfc07a; }

    /* Brochures dropdown */
    .nav-links .dropdown { position: relative; }
    .nav-links .dropdown-trigger {
      display: flex;
      align-items: center;
      gap: 5px;
      font-family: 'Cinzel', serif;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 2px;
      color: var(--muted-light);
      text-decoration: none;
      text-transform: uppercase;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      position: relative;
    }
    .nav-links .dropdown-trigger::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 1px;
      background: var(--gold);
      transition: width 0.3s ease;
    }
    .nav-links .dropdown-trigger:hover { color: var(--cream); }
    .nav-links .dropdown-trigger:hover::after { width: 100%; }
    .nav-links .chevron { font-size: 8px; transition: transform 0.3s; }
    .nav-links .dropdown:hover .chevron { transform: rotate(180deg); }
    .nav-links .dropdown-menu {
      position: absolute;
      top: calc(100% + 12px);
      left: 50%;
      transform: translateX(-50%);
      background: rgba(8,7,5,0.98);
      border: 1px solid var(--gold-dim);
      min-width: 180px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s, visibility 0.2s;
      padding: 8px 0;
      list-style: none;
    }
    .nav-links .dropdown:hover .dropdown-menu,
    .nav-links .dropdown-menu:hover { opacity: 1; visibility: visible; }
    .nav-links .dropdown-menu li a {
      display: block;
      padding: 10px 20px;
      font-size: 10px;
      white-space: nowrap;
    }
    .nav-links .dropdown-menu li a::after { display: none; }
    .nav-links .dropdown-menu li a:hover { color: var(--cream); background: rgba(201,169,98,0.06); }

    /* Language switcher */
    .lang-switcher {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: 16px;
    }

    .lang-link {
      font-family: 'Cinzel', serif !important;
      font-size: 10px !important;
      font-weight: 500 !important;
      letter-spacing: 2px !important;
      color: var(--muted-light) !important;
      text-decoration: none !important;
      text-transform: uppercase !important;
      transition: color 0.3s ease !important;
      border: none !important;
      padding: 0 !important;
    }

    .lang-link:hover,
    .lang-link.active {
      color: var(--gold) !important;
    }

    .lang-link::after {
      display: none !important;
    }

    .lang-separator {
      color: var(--muted);
      font-size: 10px;
      opacity: 0.5;
    }

    /* Hamburger */
    .nav-hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 8px;
      z-index: 1001;
    }

    .nav-hamburger span {
      display: block;
      width: 24px;
      height: 1px;
      background: var(--gold);
      transition: all 0.3s ease;
    }

    .nav-hamburger.open span:nth-child(1) {
      transform: rotate(45deg) translate(4px, 4px);
    }
    .nav-hamburger.open span:nth-child(2) { opacity: 0; }
    .nav-hamburger.open span:nth-child(3) {
      transform: rotate(-45deg) translate(4px, -4px);
    }

    /* Mobile menu */
    .nav-mobile {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(8, 7, 5, 0.97);
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
      z-index: 999;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 36px;
    }

    .nav-mobile.open { display: flex; }

    .nav-mobile a {
      font-family: 'Cinzel', serif;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 5px;
      color: var(--cream);
      text-decoration: none;
      text-transform: uppercase;
      opacity: 0.7;
      transition: opacity 0.3s ease, color 0.3s ease;
    }

    .nav-mobile a:hover { opacity: 1; color: var(--gold); }

    .mobile-lang-switcher {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .mobile-lang-switcher a {
      font-size: 11px !important;
      letter-spacing: 3px !important;
      color: var(--muted-light) !important;
      opacity: 0.8 !important;
    }

    .mobile-lang-switcher a:hover {
      color: var(--gold) !important;
      opacity: 1 !important;
    }

    .mobile-lang-switcher span {
      color: var(--muted);
      opacity: 0.5;
    }

    @media (max-width: 900px) {
      .nav-links { display: none; }
      .nav-hamburger { display: flex; }
      .nav { padding: 0 24px; }
      .lang-switcher { display: none; }
    }

    /* ================================================================
       3D BACKGROUND  -  Rotating SmartButton (after hero)
       ================================================================ */

    #bg3d-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
      opacity: 0;
      transition: opacity 1.5s ease;
    }

    #bg3d-canvas.visible {
      opacity: 0.65;
      filter: blur(3px);
    }

    /* ================================================================
       SECTION 1: HERO  -  "Understood." Animation
       ================================================================ */

    #hero {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100vh;
      min-height: 600px;
      overflow: hidden;
      padding: 0;
      background: var(--black);
    }

    /* Hero background slideshow */
    .hero-slideshow {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .hero-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 2s ease;
      background-size: cover;
      background-position: center;
    }

    .hero-slide.active {
      opacity: 1;
    }

    .hero-slide::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(8, 7, 5, 0.65) 0%,
        rgba(8, 7, 5, 0.55) 40%,
        rgba(8, 7, 5, 0.35) 75%,
        rgba(8, 7, 5, 0.25) 100%
      );
    }

    #hero-animation {
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    /* Iframe for the hero animation */
    #hero-animation iframe {
      width: 100%;
      height: 100%;
      border: none;
      background: transparent;
    }

    /* Scroll indicator */
    .scroll-indicator {
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      opacity: 0;
      transition: opacity 1.5s ease;
      cursor: pointer;
    }

    .scroll-indicator.visible { opacity: 1; }

    .scroll-indicator-text {
      font-family: 'Cinzel', serif;
      font-size: 10px;
      letter-spacing: 4px;
      color: var(--muted);
      text-transform: uppercase;
    }

    .scroll-indicator-line {
      width: 1px;
      height: 32px;
      background: linear-gradient(to bottom, var(--gold), transparent);
      opacity: 0.4;
      animation: scrollPulse 2s ease-in-out infinite;
    }

    @keyframes scrollPulse {
      0%, 100% { opacity: 0.2; transform: scaleY(0.7); }
      50%      { opacity: 0.5; transform: scaleY(1); }
    }


    /* ================================================================
       SECTION 2: THE PRODUCT
       ================================================================ */

    .product-hero-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      margin-bottom: 120px;
    }

    .product-hero-image {
      position: relative;
    }

    .product-hero-image img {
      width: 100%;
      max-width: 520px;
      height: auto;
      display: block;
      margin: 0 auto;
    }

    /* Subtle glow around product image */
    .product-hero-image::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60%;
      height: 60%;
      background: radial-gradient(ellipse, rgba(201, 169, 98, 0.04) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    .product-hero-image .img-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      height: 80%;
      background: radial-gradient(ellipse, rgba(201, 169, 98, 0.06) 0%, transparent 70%);
      pointer-events: none;
      z-index: -1;
    }

    .product-scale-ref {
      font-family: 'Cinzel', serif;
      font-size: 12px;
      letter-spacing: 3px;
      color: var(--muted-light);
      text-transform: uppercase;
      text-align: center;
      margin-top: 20px;
    }

    /* Three pillars - big numbers */
    .pillars {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      margin: 120px 0;
      text-align: center;
    }

    .pillar-number {
      font-family: 'Cinzel', serif;
      font-size: clamp(56px, 7vw, 96px);
      font-weight: 400;
      color: var(--gold);
      line-height: 1;
      margin-bottom: 8px;
      opacity: 0.9;
    }

    .pillar-label {
      font-family: 'Cinzel', serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 5px;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 24px;
      opacity: 0.6;
    }

    .pillar-divider {
      width: 40px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      margin: 0 auto 24px;
      opacity: 0.3;
    }

    .pillar h3 {
      display: none;
    }

    .pillar p {
      font-size: 16px;
      font-weight: 300;
      color: var(--muted-light);
      line-height: 1.7;
      max-width: 260px;
      margin: 0 auto;
    }

    /* Ecosystem section */
    .ecosystem-block {
      position: relative;
      margin-top: 120px;
      text-align: center;
    }

    .ecosystem-block img {
      max-width: 800px;
      width: 100%;
      margin: 48px auto 0;
      display: block;
    }

    /* ================================================================
       SECTION 3: FOR OWNERS & GUESTS
       ================================================================ */

    .owners-hero-img {
      width: 100%;
      height: 60vh;
      min-height: 400px;
      object-fit: cover;
      border-radius: 2px;
      margin: 80px 0 0;
    }

    .owners-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      margin-top: 120px;
    }

    .owners-grid-reverse {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      margin-top: 120px;
    }

    .owners-img-wrap {
      position: relative;
      overflow: hidden;
      border-radius: 2px;
    }

    .owners-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 8s ease;
    }

    .owners-img-wrap:hover img {
      transform: scale(1.03);
    }

    /* ================================================================
       SECTION 4: FOR CREW
       ================================================================ */

    .crew-hero-banner {
      width: 100%;
      height: 50vh;
      min-height: 350px;
      object-fit: cover;
      border-radius: 2px;
      margin-bottom: 100px;
    }

    .crew-features {
      display: flex;
      flex-direction: column;
      gap: 80px;
      margin-top: 80px;
    }

    .crew-feature {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .crew-feature-reverse {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .crew-feature-reverse .crew-feature-img { order: 2; }
    .crew-feature-reverse .crew-feature-text { order: 1; }

    .crew-feature-img {
      overflow: hidden;
      border-radius: 2px;
    }

    .crew-feature-img img {
      width: 100%;
      height: auto;
      display: block;
    }

    .crew-feature-text h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(24px, 3vw, 32px);
      font-weight: 300;
      color: var(--cream);
      margin-bottom: 16px;
    }

    .crew-feature-text p {
      font-size: 17px;
      font-weight: 300;
      color: var(--muted-light);
      line-height: 1.7;
    }

    .crew-pain-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 40px;
      margin-top: 80px;
    }

    .crew-pain-card {
      padding: 44px 36px;
      border: 1px solid rgba(201, 169, 98, 0.06);
      border-radius: 2px;
      background: rgba(201, 169, 98, 0.02);
      transition: border-color 0.5s ease, background 0.5s ease, transform 0.5s ease;
    }

    .crew-pain-card:hover {
      border-color: rgba(201, 169, 98, 0.15);
      background: rgba(201, 169, 98, 0.04);
      transform: translateY(-3px);
    }

    .crew-pain-icon {
      width: 48px;
      height: 48px;
      margin-bottom: 24px;
      display: block;
    }

    .crew-pain-icon svg {
      width: 100%;
      height: 100%;
      stroke: var(--gold);
      stroke-width: 1.2;
      fill: none;
      opacity: 0.8;
    }

    .crew-pain-card:hover .crew-pain-icon svg {
      opacity: 1;
    }

    .crew-pain-card h4 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 22px;
      font-weight: 400;
      color: var(--gold);
      margin-bottom: 12px;
    }

    .crew-pain-card p {
      font-size: 16px;
      font-weight: 300;
      color: var(--cream-dim);
      line-height: 1.6;
    }

    /* ================================================================
       SECTION 5: FOR INTEGRATORS
       ================================================================ */

    .integrator-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
      margin: 80px 0;
      text-align: center;
    }

    .integrator-stat {
      padding: 40px 20px;
      border: 1px solid rgba(201, 169, 98, 0.06);
      border-radius: 2px;
      background: rgba(201, 169, 98, 0.015);
      transition: border-color 0.5s ease, transform 0.5s ease;
    }

    .integrator-stat:hover {
      border-color: rgba(201, 169, 98, 0.15);
      transform: translateY(-3px);
    }

    .integrator-stat-icon {
      width: 44px;
      height: 44px;
      margin: 0 auto 20px;
      display: block;
    }

    .integrator-stat-icon svg {
      width: 100%;
      height: 100%;
      stroke: var(--gold);
      stroke-width: 1.2;
      fill: none;
      opacity: 0.7;
    }

    .integrator-stat:hover .integrator-stat-icon svg {
      opacity: 1;
    }

    .integrator-stat h3 {
      font-family: 'Cinzel', serif;
      font-size: clamp(36px, 4.5vw, 56px);
      font-weight: 400;
      color: var(--gold);
      margin-bottom: 8px;
      line-height: 1;
    }

    .integrator-stat p {
      font-family: 'Cinzel', serif;
      font-size: 11px;
      letter-spacing: 3px;
      color: var(--cream-dim);
      text-transform: uppercase;
    }

    .compat-grid {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 60px;
      margin: 60px 0;
      flex-wrap: wrap;
    }

    .compat-item {
      text-align: center;
    }

    .compat-item .compat-name {
      font-family: 'Cinzel', serif;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 3px;
      color: var(--cream);
      margin-bottom: 6px;
    }

    .compat-item .compat-status {
      font-family: 'Cinzel', serif;
      font-size: 11px;
      letter-spacing: 3px;
      text-transform: uppercase;
    }

    .compat-status.ready { color: var(--gold); }
    .compat-status.soon { color: var(--muted); }

    .tech-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 48px;
      margin-top: 80px;
    }

    .tech-card {
      padding: 44px 36px;
      border: 1px solid rgba(201, 169, 98, 0.06);
      border-radius: 2px;
      background: rgba(201, 169, 98, 0.015);
      text-align: center;
      transition: border-color 0.5s ease, background 0.5s ease, transform 0.5s ease;
    }

    .tech-card:hover {
      border-color: rgba(201, 169, 98, 0.15);
      background: rgba(201, 169, 98, 0.04);
      transform: translateY(-3px);
    }

    .tech-icon {
      width: 52px;
      height: 52px;
      margin: 0 auto 24px;
      display: block;
    }

    .tech-icon svg {
      width: 100%;
      height: 100%;
      stroke: var(--gold);
      stroke-width: 1.2;
      fill: none;
      opacity: 0.8;
    }

    .tech-card:hover .tech-icon svg {
      opacity: 1;
    }

    .tech-card h4 {
      font-family: 'Cinzel', serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 4px;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .tech-card p {
      font-size: 16px;
      font-weight: 300;
      color: var(--cream-dim);
      line-height: 1.7;
      text-align: left;
    }

    /* ================================================================
       SECTION 6: CRAFTSMANSHIP
       ================================================================ */

    .materials-showcase {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin: 80px 0;
    }

    .material-card {
      position: relative;
      overflow: hidden;
      border-radius: 2px;
      aspect-ratio: 4/3;
    }

    .material-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 6s ease;
    }

    .material-card:hover img {
      transform: scale(1.05);
    }

    .material-card-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 40px;
      background: linear-gradient(to top, rgba(8, 7, 5, 0.8), transparent);
    }

    .material-card-overlay h4 {
      font-family: 'Cinzel', serif;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 4px;
      color: var(--cream);
      text-transform: uppercase;
    }

    .material-card-overlay p {
      font-size: 15px;
      font-weight: 300;
      color: var(--muted-light);
      margin-top: 4px;
    }

    /* Bespoke Journey Timeline */
    .bespoke-journey {
      margin: 80px 0 0;
    }

    .bespoke-steps {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 0;
      margin-top: 60px;
    }

    .bespoke-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      max-width: 180px;
      text-align: center;
    }

    .bespoke-step-number {
      font-family: 'Cinzel', serif;
      font-size: 11px;
      letter-spacing: 3px;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 16px;
      opacity: 0.7;
    }

    .bespoke-step-img {
      width: 150px;
      height: 150px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid rgba(201,169,98,0.15);
      position: relative;
    }

    .bespoke-step-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 4s ease;
    }

    .bespoke-step-img:hover img {
      transform: scale(1.08);
    }

    .bespoke-step-label {
      font-family: 'Cinzel', serif;
      font-size: 12px;
      letter-spacing: 3px;
      color: var(--cream);
      text-transform: uppercase;
      margin-top: 16px;
    }

    .bespoke-step-desc {
      font-size: 14px;
      font-weight: 300;
      color: var(--muted-light);
      margin-top: 6px;
      line-height: 1.5;
    }

    .bespoke-arrow {
      display: flex;
      align-items: center;
      padding-top: 60px;
      color: var(--gold);
      font-size: 24px;
      opacity: 0.4;
      flex-shrink: 0;
      margin: 0 4px;
    }

    .bespoke-arrow svg {
      width: 24px;
      height: 24px;
    }

    @media (max-width: 900px) {
      .bespoke-steps {
        flex-direction: column;
        align-items: center;
        gap: 40px;
      }
      .bespoke-arrow {
        padding-top: 0;
        transform: rotate(90deg);
        margin: -16px 0;
      }
      .bespoke-step {
        max-width: 280px;
      }
      .bespoke-step-img {
        width: 240px;
        height: 240px;
      }
    }

    .finishes-list {
      display: flex;
      flex-wrap: wrap;
      gap: 20px 40px;
      margin-top: 60px;
      justify-content: center;
    }

    .finish-item {
      font-family: 'Cinzel', serif;
      font-size: 11px;
      letter-spacing: 3px;
      color: var(--muted-light);
      text-transform: uppercase;
      position: relative;
      padding-left: 16px;
    }

    .finish-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      transform: translateY(-50%);
      background: var(--gold);
      opacity: 0.4;
    }

    /* ================================================================
    .cta-button {
      display: inline-block;
      font-family: 'Cinzel', serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--gold);
      border: 1px solid var(--gold-dim);
      padding: 16px 48px;
      text-decoration: none;
      margin-top: 48px;
      transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .cta-button:hover {
      background: rgba(201, 169, 98, 0.08);
      border-color: var(--gold);
      letter-spacing: 5px;
      padding: 16px 56px;
    }

    /* ================================================================
       SECTION 8: THE STORY
       ================================================================ */

    .story-quote {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(28px, 4vw, 48px);
      font-weight: 300;
      font-style: italic;
      color: var(--cream);
      line-height: 1.3;
      max-width: 800px;
    }

    .story-attribution {
      margin-top: 48px;
    }

    .story-attribution .name {
      font-family: 'Cinzel', serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 4px;
      color: var(--gold);
      text-transform: uppercase;
    }

    .story-attribution .title {
      font-size: 15px;
      font-weight: 300;
      color: var(--muted-light);
      margin-top: 6px;
    }

    /* ================================================================
       SECTION 9: CONTACT
       ================================================================ */

    .contact-section {
      text-align: center;
      padding: 160px 48px;
    }

    .contact-links {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      margin-top: 48px;
    }

    .contact-links a {
      font-family: 'Cormorant Garamond', serif;
      font-size: 20px;
      font-weight: 300;
      color: var(--cream-dim);
      text-decoration: none;
      letter-spacing: 1px;
      transition: color 0.3s ease;
    }

    .contact-links a:hover { color: var(--gold); }

    .contact-phones {
      display: flex;
      gap: 40px;
      margin-top: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .contact-phones a {
      font-family: 'Cormorant Garamond', serif;
      font-size: 17px;
      font-weight: 300;
      color: var(--muted-light);
      text-decoration: none;
      letter-spacing: 1px;
      transition: color 0.3s ease;
    }

    .contact-phones a:hover { color: var(--gold); }

    /* ================================================================
       FOOTER
       ================================================================ */

    .footer {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 48px;
      border-top: 1px solid rgba(201, 169, 98, 0.06);
      background: rgba(8, 7, 5, 0.95);
    }

    .footer-logo {
      display: flex;
      justify-content: center;
      opacity: 0.4;
    }

    .footer-logo img {
      height: 18px;
      width: auto;
    }

    .footer-copy {
      font-size: 13px;
      color: var(--muted-light);
      margin-top: 12px;
      letter-spacing: 1px;
    }

    /* ================================================================
       RESPONSIVE
       ================================================================ */

    @media (max-width: 900px) {
      .section { padding: 100px 24px; }

      .product-hero-grid,
      .owners-grid,
      .owners-grid-reverse,
      .crew-feature,
      .crew-feature-reverse {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      .crew-feature-reverse .crew-feature-img { order: 0; }
      .crew-feature-reverse .crew-feature-text { order: 0; }

      .pillars {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      .integrator-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
      }

      .materials-showcase {
        grid-template-columns: 1fr;
      }

      .tech-grid {
        grid-template-columns: 1fr;
      }

      .contact-section { padding: 100px 24px; }
    }

    @media (max-width: 600px) {
      .section { padding: 80px 20px; }

      .integrator-stats {
        grid-template-columns: 1fr 1fr;
      }

      .compat-grid { gap: 32px; }

      .owners-hero-img {
        height: 40vh;
        min-height: 280px;
      }

      .crew-hero-banner {
        height: 35vh;
        min-height: 250px;
      }
    }

    /* ── Parallax for large screens ── */
    @media (min-width: 901px) {
      .parallax-img {
        transition: transform 0.1s linear;
      }
    }

    /* ════════════════════════════════════════
       PARALLAX BREAK SECTIONS
       ════════════════════════════════════════ */
    .parallax-break {
      height: 50vh;
      min-height: 350px;
      position: relative;
      overflow: hidden;
    }
    .parallax-break-img {
      position: absolute;
      width: 100%;
      height: 140%;
      object-fit: cover;
      top: -20%;
      filter: brightness(0.45) contrast(1.1);
      transition: transform 0.1s linear;
    }
    .parallax-break-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 2;
      text-align: center;
      padding: 0 40px;
    }
    .parallax-break-overlay h2 {
      font-family: 'Cinzel', serif;
      font-size: clamp(28px, 4.5vw, 48px);
      font-weight: 400;
      color: var(--cream);
      letter-spacing: 6px;
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.9s ease, transform 0.9s ease;
    }
    .parallax-break-overlay h2.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .parallax-break-overlay p {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(15px, 2vw, 18px);
      color: var(--gold-bright);
      font-style: italic;
      font-weight: 300;
      margin-top: 12px;
      letter-spacing: 1px;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.9s ease 0.15s, transform 0.9s ease 0.15s;
    }
    .parallax-break-overlay p.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* (reserved) */
    @media (max-width: 900px) {
      .parallax-break { height: 40vh; min-height: 250px; }
    }

    /* ════════════════════════════════════════
       ECOSYSTEM VISUAL GRID
       ════════════════════════════════════════ */

    .eco-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 24px;
      margin: 80px 0 0;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }

    .eco-item {
      text-align: center;
      padding: 32px 16px;
      border: 1px solid rgba(201, 169, 98, 0.06);
      border-radius: 2px;
      background: rgba(201, 169, 98, 0.02);
      transition: border-color 0.5s ease, background 0.5s ease;
    }

    .eco-item:hover {
      border-color: rgba(201, 169, 98, 0.15);
      background: rgba(201, 169, 98, 0.04);
    }

    .eco-icon {
      font-size: 28px;
      margin-bottom: 12px;
      display: block;
    }

    .eco-item h4 {
      font-family: 'Cinzel', serif;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 3px;
      color: var(--cream);
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .eco-item p {
      font-size: 14px;
      font-weight: 300;
      color: var(--muted-light);
      line-height: 1.5;
    }

    /* ════════════════════════════════════════
       EMERGENCY BLOCK
       ════════════════════════════════════════ */

    .emergency-block {
      margin-top: 120px;
      padding: 60px;
      border: 1px solid rgba(220, 60, 60, 0.15);
      border-radius: 2px;
      background: rgba(220, 60, 60, 0.03);
      position: relative;
      overflow: hidden;
    }

    .emergency-block::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 3px;
      height: 100%;
      background: linear-gradient(to bottom, #dc3c3c, transparent);
      opacity: 0.6;
    }

    .emergency-block h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(28px, 3.5vw, 44px);
      font-weight: 300;
      color: var(--cream);
      margin-bottom: 16px;
    }

    .emergency-block h3 em {
      color: #dc3c3c;
      font-style: italic;
    }

    .emergency-block p {
      font-size: clamp(17px, 1.8vw, 20px);
      font-weight: 300;
      color: var(--cream-dim);
      line-height: 1.8;
      max-width: 600px;
    }

    /* ════════════════════════════════════════
       PRIVACY FORTRESS
       ════════════════════════════════════════ */

    .privacy-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      margin-top: 80px;
    }

    .privacy-card {
      padding: 48px 36px;
      border: 1px solid rgba(201, 169, 98, 0.08);
      border-radius: 2px;
      background: rgba(201, 169, 98, 0.015);
      text-align: center;
      transition: border-color 0.6s ease, background 0.6s ease, transform 0.6s ease;
    }

    .privacy-card:hover {
      border-color: rgba(201, 169, 98, 0.2);
      background: rgba(201, 169, 98, 0.04);
      transform: translateY(-4px);
    }

    .privacy-card .priv-icon {
      width: 56px;
      height: 56px;
      margin: 0 auto 28px;
      display: block;
    }

    .privacy-card .priv-icon svg {
      width: 100%;
      height: 100%;
      stroke: var(--gold);
      stroke-width: 1.2;
      fill: none;
      opacity: 0.85;
      transition: opacity 0.4s ease;
    }

    .privacy-card:hover .priv-icon svg {
      opacity: 1;
    }

    .privacy-card h4 {
      font-family: 'Cinzel', serif;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 4px;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .privacy-card p {
      font-size: 16px;
      font-weight: 300;
      color: var(--muted-light);
      line-height: 1.7;
    }

    /* ════════════════════════════════════════
       MANAGEMENT / DASHBOARD
       ════════════════════════════════════════ */

    .mgmt-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 40px;
      margin-top: 80px;
    }

    .mgmt-card {
      padding: 40px;
      border: 1px solid rgba(201, 169, 98, 0.06);
      border-radius: 2px;
      background: rgba(201, 169, 98, 0.02);
      transition: border-color 0.5s ease;
    }

    .mgmt-card:hover {
      border-color: rgba(201, 169, 98, 0.12);
    }

    .mgmt-card h4 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 22px;
      font-weight: 400;
      color: var(--gold);
      margin-bottom: 12px;
    }

    .mgmt-card p {
      font-size: 16px;
      font-weight: 300;
      color: var(--muted-light);
      line-height: 1.6;
    }

    /* ════════════════════════════════════════
       HANDS-FREE HERO
       ════════════════════════════════════════ */

    .handsfree-hero {
      margin-top: 120px;
      padding: 80px 60px;
      background: rgba(201, 169, 98, 0.03);
      border: 1px solid rgba(201, 169, 98, 0.08);
      border-radius: 2px;
      text-align: center;
    }

    .handsfree-hero h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(28px, 4vw, 48px);
      font-weight: 300;
      color: var(--cream);
      margin-bottom: 24px;
    }

    .handsfree-hero h3 em {
      color: var(--gold);
      font-style: italic;
    }

    .handsfree-hero p {
      font-size: clamp(17px, 1.8vw, 20px);
      font-weight: 300;
      color: var(--cream-dim);
      line-height: 1.8;
      max-width: 640px;
      margin: 0 auto;
    }

    .handsfree-steps {
      display: flex;
      justify-content: center;
      gap: 48px;
      margin-top: 60px;
      flex-wrap: wrap;
    }

    .handsfree-step {
      text-align: center;
      max-width: 180px;
    }

    .handsfree-step-num {
      font-family: 'Cinzel', serif;
      font-size: 28px;
      font-weight: 400;
      color: var(--gold);
      margin-bottom: 8px;
    }

    .handsfree-step p {
      font-size: 16px;
      font-weight: 400;
      color: var(--cream-dim);
      line-height: 1.5;
      max-width: none;
    }

    @media (max-width: 600px) {
      .eco-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
      .eco-item { padding: 20px 12px; }
      .emergency-block { padding: 40px 24px; }
      .handsfree-hero { padding: 60px 24px; }
      .handsfree-steps { gap: 32px; }
      .privacy-grid { grid-template-columns: 1fr; gap: 24px; }
      .privacy-card { padding: 32px 24px; }
    }

    /* ── Film grain overlay (site-wide) ── */
    .site-grain {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9999;
      opacity: 0.018;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 128px 128px;
    }

    /* Beyond Yachts - Responsive Grid */
    @media (max-width: 900px) {
      #beyond .section-inner > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
      }
      #beyond .section-inner > div[style*="grid-template-columns"] > div {
        order: unset !important;
      }
    }

/* ── ECG Animation (extracted from inline <style> at index.html line 2351) ── */
          /* ECG Lifeline */
          .ecg-container {
            margin-top: 56px;
            position: relative;
            width: 100%;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
          }
          .ecg-svg {
            width: 100%;
            height: auto;
            display: block;
            overflow: visible;
          }
          .ecg-path {
            fill: none;
            stroke: #dc3c3c;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
          }
          .ecg-glow {
            fill: none;
            stroke: #dc3c3c;
            stroke-width: 8;
            stroke-linecap: round;
            stroke-linejoin: round;
            opacity: 0;
            filter: url(#ecgBlur);
          }
          .ecg-container.animated .ecg-glow {
            opacity: 0.35;
          }
          /* Labels ABOVE the ECG line */
          .ecg-labels-top {
            position: relative;
            height: 80px;
            margin-bottom: 4px;
          }
          .ecg-label-top {
            position: absolute;
            transform: translateX(-50%);
            text-align: center;
            bottom: 0;
            opacity: 0;
            transition: opacity 0.6s ease, transform 0.6s ease;
            transform: translateX(-50%) translateY(-8px);
          }
          .ecg-container.animated .ecg-label-top {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
          }
          .ecg-container.animated .ecg-label-top:nth-child(1) { transition-delay: 0.8s; }
          .ecg-container.animated .ecg-label-top:nth-child(2) { transition-delay: 2.0s; }
          .ecg-container.animated .ecg-label-top:nth-child(3) { transition-delay: 3.0s; }
          .ecg-label-top .ecg-time {
            font-family: 'Cinzel', serif;
            font-size: clamp(28px, 3.5vw, 42px);
            color: #dc3c3c;
            font-weight: 400;
            line-height: 1;
          }
          .ecg-label-top .ecg-label {
            font-family: 'Cinzel', serif;
            font-size: 11px;
            letter-spacing: 3px;
            color: rgba(220,60,60,0.6);
            text-transform: uppercase;
            margin-top: 6px;
          }
          /* Descriptions BELOW the ECG line */
          .ecg-labels-bottom {
            display: flex;
            justify-content: center;
            gap: clamp(24px, 5vw, 80px);
            margin-top: 16px;
          }
          .ecg-label-bottom {
            text-align: center;
            opacity: 0;
            transition: opacity 0.6s ease;
          }
          .ecg-container.animated .ecg-label-bottom {
            opacity: 1;
          }
          .ecg-container.animated .ecg-label-bottom:nth-child(1) { transition-delay: 1.0s; }
          .ecg-container.animated .ecg-label-bottom:nth-child(2) { transition-delay: 2.2s; }
          .ecg-container.animated .ecg-label-bottom:nth-child(3) { transition-delay: 3.2s; }
          .ecg-label-bottom .ecg-desc {
            font-size: clamp(14px, 1.5vw, 17px);
            color: rgba(220,60,60,0.75);
            font-weight: 300;
            line-height: 1.4;
          }
          /* Mobile */
          @media (max-width: 600px) {
            .ecg-labels-top {
              position: static;
              height: auto;
              display: flex;
              flex-direction: row;
              justify-content: space-around;
              margin: 24px 0 0;
            }
            .ecg-label-top {
              position: static !important;
              transform: none !important;
            }
            .ecg-container.animated .ecg-label-top {
              transform: none !important;
            }
            .ecg-labels-bottom {
              flex-direction: column;
              align-items: center;
              gap: 8px;
              margin-top: 16px;
            }
            .ecg-label-bottom .ecg-desc { font-size: 13px; }
          }
          /* Tagline */
          .ecg-tagline {
            margin-top: 64px;
            font-size: clamp(24px, 3vw, 36px);
            font-style: italic;
            color: rgba(220,60,60,0.9);
            text-align: center;
            letter-spacing: 0.5px;
            font-weight: 400;
            opacity: 0;
            transform: translateY(16px) scale(0.95);
            transition: opacity 1s ease 5.8s, transform 1s ease 5.8s;
          }
          .ecg-container.animated .ecg-tagline {
            opacity: 1;
            transform: translateY(0) scale(1);
          }

/* -- Preview Cards (homepage only, new in refactor) -- */
/* ── 30. Preview Cards ── */
.preview-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
  margin-top: 80px;
}

.preview-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(201, 169, 98, 0.08);
  border-radius: 2px;
  background: rgba(201, 169, 98, 0.015);
  transition: border-color 0.5s ease, transform 0.5s ease;
}

.preview-card:hover {
  border-color: rgba(201, 169, 98, 0.2);
  transform: translateY(-4px);
}

.preview-card-image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  filter: brightness(0.75);
  transition: filter 0.5s ease, transform 6s ease;
}

.preview-card:hover .preview-card-image {
  filter: brightness(0.85);
  transform: scale(1.03);
}

.preview-card-body {
  padding: 40px 36px;
}

.preview-card-body .section-label {
  margin-bottom: 16px;
}

.preview-card-body h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 300;
  color: var(--cream);
  line-height: 1.3;
  margin-bottom: 16px;
}

.preview-card-body h3 em {
  font-style: italic;
  color: var(--gold);
}

.preview-card-body p {
  font-size: 16px;
  font-weight: 300;
  color: var(--muted-light);
  line-height: 1.7;
  margin-bottom: 32px;
}

@media (max-width: 600px) {
  .preview-cards-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .preview-card-body {
    padding: 28px 24px;
  }
}