/* ───── RESET & VARIABLES ───── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --hoy-orange:  #E8471C;
      --hoy-orange2: #D13D18;
      --navy:        #05101E;
      --navy-mid:    #0A1E35;
      --navy-light:  #102743;
      --gold:        #C8A552;
      --gold-light:  #D4B96A;
      --cream:       #F5F0E6;
      --cream-soft:  #EDE7DA;
      --white:       #FFFFFF;
      --text-muted:  rgba(245,240,230,0.55);
      /* TAAK 24 — site-brede fontwissel naar Inter (Porsche-stijl, mockup 5).
         Eén stack voor display en body, zoals Porsche Next wordt ingezet.
         Inter staat onder de SIL Open Font License en is vrij voor commercieel gebruik. */
      --font-display:'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      --font-sans:   'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

    html { scroll-behavior: smooth; }

    body {
      background: var(--navy);
      color: var(--cream);
      font-family: var(--font-sans);
      font-weight: 300;
      overflow-x: hidden;
    }

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

    /* ───── SCROLLBAR ───── */
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: var(--navy); }
    ::-webkit-scrollbar-thumb { background: var(--hoy-orange); border-radius: 2px; }

    /* ───── NAVIGATION ───── */
    .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; align-items: center; justify-content: space-between;
      padding: 1.5rem 4rem;
      transition: all 0.5s ease;
    }
    .nav.scrolled {
      background: rgba(5,16,30,0.92);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      padding: 1rem 4rem;
      border-bottom: 1px solid rgba(200,165,82,0.15);
    }
    .nav-logo { display: flex; align-items: center; gap: 0.75rem; }
    .nav-logo svg { height: 44px; width: auto; }
    .nav-logo img { height: 44px; width: auto; max-width: 220px; display: block; object-fit: contain; }
    .footer-logo { height: 60px; width: auto; max-width: 280px; display: block; object-fit: contain; margin-bottom: 1rem; }
    @media (max-width: 640px) {
      .nav-logo img { height: 36px; }
      .footer-logo { height: 48px; }
    }
    .nav-links {
      display: flex; align-items: center; gap: 2.5rem;
      list-style: none;
    }
    .nav-links a {
      font-family: var(--font-sans);
      font-size: 0.7rem;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(245,240,230,0.8);
      transition: color 0.3s;
      position: relative;
    }
    .nav-links a::after {
      content:''; position:absolute; bottom:-4px; left:0; right:0; height:1px;
      background: var(--gold); transform: scaleX(0); transition: transform 0.3s;
    }
    .nav-links a:hover { color: var(--white); }
    .nav-links a:hover::after { transform: scaleX(1); }
    .nav-cta {
      background: var(--hoy-orange); color: var(--white) !important;
      padding: 0.55rem 1.4rem; border-radius: 1px;
      font-weight: 400; letter-spacing: 0.15em;
      transition: background 0.3s !important;
    }
    .nav-cta:hover { background: var(--hoy-orange2) !important; }
    .nav-cta::after { display:none !important; }
    .nav-lang {
      font-size: 0.65rem; letter-spacing: 0.12em;
      color: var(--text-muted); cursor:pointer;
      transition: color 0.3s;
    }
    .nav-lang:hover { color: var(--gold); }

    /* ───── HERO ───── */
    .hero {
      position: relative; height: 88vh; min-height: 600px; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .hero-video {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; object-position: center;
      z-index: 0;
      pointer-events: none;
      /* TAAK 19 / P1 — neutrale navy eerste frame i.p.v. poster-flits */
      background-color: #05101E;
    }
    .hero-bg {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(to bottom, rgba(5,16,30,0.3) 0%, rgba(5,16,30,0.1) 40%, rgba(5,16,30,0.6) 100%),
        url('/uploads/boten/1501/Afbeelding1.jpg');
      background-size: cover;
      background-position: center 40%;
    }
    .hero-bg-fallback {
      z-index: 0;
      opacity: 0;
    }
    .hero video.hero-video:not([src]) + .hero-bg-fallback,
    .hero video.hero-video[data-failed="1"] + .hero-bg-fallback { opacity: 1; }
    .hero-overlay {
      position: absolute; inset: 0;
      background: rgba(0,0,0,0.45);
      z-index: 1;
    }
    @keyframes kenBurns {
      0%   { transform: scale(1.00) translate(0px, 0px); }
      25%  { transform: scale(1.06) translate(-18px, -12px); }
      50%  { transform: scale(1.10) translate(12px, -20px); }
      75%  { transform: scale(1.07) translate(-8px, 10px); }
      100% { transform: scale(1.04) translate(14px, -6px); }
    }
    .hero-vignette {
      position: absolute; inset:0;
      background: radial-gradient(ellipse at center, transparent 30%, rgba(5,16,30,0.55) 100%);
      z-index: 1;
      pointer-events: none;
    }
    .hero-bottom-fade {
      position: absolute; bottom:0; left:0; right:0; height:240px;
      background: linear-gradient(to bottom, transparent, var(--navy));
      z-index: 1;
      pointer-events: none;
    }
    .hero-content {
      position: relative; z-index: 2;
      text-align: center; padding: 0 2rem;
      max-width: 960px;
      margin-top: 4rem; /* compenseer 88vh hero — houdt eyebrow weg van nav */
    }
    @media (max-width: 640px) {
      .hero-content { margin-top: 2rem; }
    }
    .hero-eyebrow {
      display: inline-block;
      font-family: var(--font-sans);
      font-size: 0.78rem; letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--gold-light);
      font-weight: 500;
      padding: 0.55rem 1.25rem;
      border: 1px solid var(--gold);
      background: rgba(5, 16, 30, 0.62);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      margin-bottom: 1.75rem;
      animation: fadeUp 1s ease 0.2s both;
    }
    @media (max-width: 640px) {
      .hero-eyebrow { font-size: 0.68rem; letter-spacing: 0.22em; padding: 0.45rem 1rem; }
    }
    .hero-title {
      font-family: var(--font-display);
      font-size: clamp(3.8rem, 9vw, 8rem);
      font-weight: 300; line-height: 0.92;
      color: var(--white);
      animation: fadeUp 1s ease 0.5s both;
    }
    .hero-title em {
      font-style: italic; color: var(--cream-soft);
    }
    .hero-subtitle {
      font-family: var(--font-display);
      font-size: clamp(1.1rem, 2.2vw, 1.5rem);
      font-weight: 300; font-style: italic;
      color: rgba(245,240,230,0.75);
      margin-top: 1.2rem;
      animation: fadeUp 1s ease 0.8s both;
    }
    .hero-actions {
      display: flex; gap: 1.2rem; justify-content: center;
      margin-top: 2.5rem;
      animation: fadeUp 1s ease 1.1s both;
    }
    .hero-search {
      display: flex; gap: 0; align-items: stretch;
      max-width: 560px; margin: 2.5rem auto 0;
      background: rgba(255,255,255,0.08);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 4px; overflow: hidden;
      animation: fadeUp 1s ease 0.95s both;
    }
    .hero-search input[type=search] {
      flex: 1; background: transparent; border: 0; outline: none;
      padding: 1.05rem 1.4rem;
      color: var(--white);
      font-family: var(--font-sans);
      font-size: 0.85rem; letter-spacing: 0.02em;
    }
    .hero-search input[type=search]::placeholder { color: rgba(255,255,255,0.55); }
    .hero-search input[type=search]:focus { background: rgba(255,255,255,0.05); }
    .hero-search button {
      background: var(--hoy-orange); color: var(--white);
      font-family: var(--font-sans); font-size: 0.65rem;
      letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
      border: 0; padding: 0 1.6rem; cursor: pointer;
      display: inline-flex; align-items: center; gap: 0.55rem;
      transition: background 0.25s;
    }
    .hero-search button:hover { background: var(--hoy-orange2); }
    .hero-search button svg { display: block; }
    @media (max-width: 640px) {
      .hero-search { flex-direction: column; border-radius: 6px; }
      .hero-search input[type=search] { text-align: center; }
      .hero-search button { padding: 0.95rem 1.4rem; justify-content: center; }
    }
    .btn-primary {
      background: var(--hoy-orange);
      color: var(--white);
      font-family: var(--font-sans);
      font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
      padding: 1rem 2.4rem; border: none; cursor: pointer;
      transition: all 0.3s; display:inline-block;
    }
    .btn-primary:hover { background: var(--hoy-orange2); transform: translateY(-2px); }
    .btn-outline {
      background: transparent;
      color: var(--cream);
      font-family: var(--font-sans);
      font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
      padding: 1rem 2.4rem; border: 1px solid rgba(245,240,230,0.4); cursor: pointer;
      transition: all 0.3s; display: inline-block;
    }
    .btn-outline:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }

    .hero-scroll {
      position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
      z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
      animation: fadeUp 1s ease 1.5s both;
    }
    .hero-scroll span {
      font-family: var(--font-sans); font-size: 0.58rem;
      letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-muted);
    }
    .scroll-line {
      width: 1px; height: 40px;
      background: linear-gradient(to bottom, var(--gold), transparent);
      animation: scrollDrop 2s ease-in-out infinite;
    }
    @keyframes scrollDrop {
      0%,100% { opacity:0; transform: translateY(-8px); }
      50% { opacity:1; transform: translateY(0); }
    }

    @keyframes fadeUp {
      from { opacity:0; transform: translateY(28px); }
      to   { opacity:1; transform: translateY(0); }
    }

    /* ───── TICKER ───── */
    /* Subtiel, geen omkaderd balkje — alleen gouden tekst over de achtergrond.
       Marco's feedback: verwijder de oranje bar + asymmetrische border. */
    .ticker {
      background: transparent;
      overflow: hidden; padding: 1rem 0;
      position: relative; z-index: 3;
      border: none;
    }
    .ticker-inner {
      display: flex; gap: 0;
      white-space: nowrap;
      animation: tickerScroll 28s linear infinite;
    }
    .ticker-item {
      display: inline-flex; align-items: center; gap: 1.8rem;
      padding: 0 2rem;
      font-family: var(--font-sans); font-size: 0.62rem;
      font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase;
      color: var(--gold);
    }
    .ticker-dot {
      width: 4px; height: 4px; border-radius: 50%;
      background: var(--gold); opacity: 0.55; flex-shrink: 0;
    }
    @keyframes tickerScroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* ───── SECTION BASE ───── */
    section { position: relative; }
    .section-label {
      font-family: var(--font-sans); font-size: 0.6rem;
      font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 0.75rem;
    }
    .section-title {
      font-family: var(--font-display); font-weight: 400;
      font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.1;
      color: var(--cream);
    }
    .section-title em { font-style: italic; }

    /* ───── FEATURED YACHTS ───── */
    .yachts {
      padding: 7rem 4rem;
      background: var(--navy);
    }
    .yachts-header {
      display: flex; align-items: flex-end; justify-content: space-between;
      margin-bottom: 3.5rem;
    }
    .yachts-link {
      font-family: var(--font-sans); font-size: 0.65rem;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--gold); border-bottom: 1px solid var(--gold);
      padding-bottom: 2px; transition: opacity 0.3s;
    }
    .yachts-link:hover { opacity: 0.7; }

    .yachts-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr;
      gap: 1.5px;
    }
    .yacht-card {
      position: relative; overflow: hidden; cursor: pointer;
      aspect-ratio: 4/3;
    }
    .yacht-card:first-child { aspect-ratio: auto; grid-row: span 2; }
    .yacht-card:nth-child(4) { grid-column: span 2; aspect-ratio: auto; height: 260px; }

    .yacht-card-bg {
      position: absolute; inset: 0;
      background-size: cover; background-position: center;
      transition: transform 0.8s ease;
    }
    .yacht-card:hover .yacht-card-bg { transform: scale(1.06); }
    .yacht-card-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(5,16,30,0.85) 0%, rgba(5,16,30,0.1) 60%);
    }
    .yacht-card-content {
      position: absolute; bottom:0; left:0; right:0;
      padding: 1.8rem 2rem;
    }
    .yacht-badge {
      display: inline-block;
      background: var(--hoy-orange); color: white;
      font-family: var(--font-sans); font-size: 0.55rem;
      letter-spacing: 0.2em; text-transform: uppercase;
      padding: 0.3rem 0.7rem; margin-bottom: 0.8rem;
    }
    .yacht-name {
      font-family: var(--font-display); font-size: 1.8rem;
      font-weight: 400; color: var(--white); line-height: 1;
    }
    .yacht-card:first-child .yacht-name { font-size: 2.6rem; }
    .yacht-specs {
      display: flex; gap: 1.5rem; margin-top: 0.6rem;
      font-size: 0.62rem; letter-spacing: 0.12em;
      color: rgba(245,240,230,0.65);
    }
    .yacht-price {
      margin-top: 0.8rem;
      font-family: var(--font-display); font-size: 1.3rem;
      color: var(--gold-light); font-weight: 400;
    }
    .yacht-card:first-child .yacht-price { font-size: 1.6rem; }

    /* Yacht card backgrounds — echte HOY jachten (mix prijsklasse) */
    .card-bg-1 { background-image:
      linear-gradient(to top, rgba(5,16,30,0.4) 0%, transparent 50%),
      url('/uploads/boten/1561/29.jpg'); } /* Sunseeker Manhattan 73 */
    .card-bg-2 { background-image:
      linear-gradient(to top, rgba(5,16,30,0.4) 0%, transparent 50%),
      url('/uploads/boten/1593/2.jpg'); } /* CNB 76 zeiljacht */
    .card-bg-3 { background-image:
      linear-gradient(to top, rgba(5,16,30,0.4) 0%, transparent 50%),
      url('/uploads/boten/1396/d743168cfe95aba64ef8f4c768d4d6b0-foto1.jpg'); } /* Princess V62 */
    .card-bg-4 { background-image:
      linear-gradient(to top, rgba(5,16,30,0.3) 0%, transparent 40%),
      url('/uploads/boten/1596/MC-5-1.jpg'); } /* Monte Carlo 5 */

    /* ───── PHILOSOPHY ───── */
    .philosophy {
      position: relative; overflow: hidden;
      min-height: 80vh;
      display: flex; align-items: center;
    }
    .philosophy-bg {
      position: absolute; inset: -12%;
      background-image:
        url('/uploads/boten/1554/DSC09470.jpg'), /* Najad 440 AC */
        url('/uploads/boten/1595/DSC01267.jpg'); /* Grand Soleil 43 */
      background-size: cover;
      background-position: center 30%;
      background-color: var(--navy-mid);
      will-change: transform;
      transition: transform 0.1s linear;
    }
    .philosophy-overlay {
      position: absolute; inset:0;
      background: linear-gradient(105deg, rgba(5,16,30,0.88) 45%, rgba(5,16,30,0.4) 100%);
    }
    .philosophy-content {
      position: relative; z-index:2;
      padding: 8rem 4rem;
      max-width: 680px;
    }
    .philosophy-quote {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3.2rem);
      font-weight: 300; font-style: italic;
      color: var(--cream); line-height: 1.3;
    }
    .philosophy-quote strong {
      font-style: normal; font-weight: 400;
      color: var(--gold);
    }
    .philosophy-text {
      font-family: var(--font-sans); font-size: 0.85rem;
      font-weight: 300; line-height: 1.9;
      color: var(--text-muted);
      margin-top: 2rem; max-width: 480px;
    }
    .philosophy-certs {
      display: flex; gap: 2rem; margin-top: 3rem; flex-wrap: wrap;
    }
    .cert-badge {
      font-family: var(--font-sans); font-size: 0.6rem;
      font-weight: 600; letter-spacing: 0.2em;
      color: var(--gold); text-transform: uppercase;
      border: 1px solid rgba(200,165,82,0.35);
      padding: 0.45rem 0.9rem;
    }

    /* ───── SERVICES ───── */
    .services {
      padding: 7rem 4rem;
      background: var(--navy-mid);
    }
    .services-header { margin-bottom: 4rem; text-align: center; }
    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
    }
    .service-item {
      padding: 3rem 2.5rem;
      background: var(--navy);
      border-bottom: 2px solid transparent;
      transition: all 0.4s;
      position: relative; overflow: hidden;
    }
    .service-item::before {
      content:''; position:absolute; bottom:0; left:0; right:0;
      height: 2px; background: var(--hoy-orange);
      transform: scaleX(0); transition: transform 0.4s;
    }
    .service-item:hover { background: var(--navy-light); }
    .service-item:hover::before { transform: scaleX(1); }
    .service-icon {
      width: 40px; height: 40px; margin-bottom: 1.5rem;
      color: var(--gold); opacity: 0.8;
    }
    .service-name {
      font-family: var(--font-display); font-size: 1.4rem;
      font-weight: 400; color: var(--cream);
      margin-bottom: 0.75rem;
    }
    .service-desc {
      font-size: 0.78rem; line-height: 1.8;
      color: var(--text-muted); font-weight: 300;
    }

    /* ───── BRANDS ───── */
    .brands {
      padding: 5rem 4rem;
      background: var(--navy);
      border-top: 1px solid rgba(200,165,82,0.1);
    }
    .brands-header { text-align: center; margin-bottom: 3rem; }
    .brands-grid {
      display: flex; flex-wrap: wrap;
      gap: 0; justify-content: center;
    }
    .brand-item {
      padding: 1.4rem 2.8rem;
      border: 1px solid rgba(245,240,230,0.06);
      font-family: var(--font-display); font-size: 1.1rem;
      font-weight: 400; font-style: italic;
      color: rgba(245,240,230,0.35);
      transition: all 0.3s; cursor: pointer;
      letter-spacing: 0.05em;
    }
    .brand-item:hover {
      color: var(--cream); background: rgba(232,71,28,0.06);
      border-color: rgba(232,71,28,0.25);
    }

    /* ───── AI SECTION ───── */
    .ai-section {
      padding: 7rem 4rem;
      background: var(--navy-light);
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 6rem; align-items: center;
    }
    .ai-visual {
      position: relative;
    }
    .ai-chat-mock {
      background: rgba(10,30,53,0.8);
      border: 1px solid rgba(200,165,82,0.2);
      border-radius: 8px; overflow: hidden;
      backdrop-filter: blur(10px);
    }
    .ai-chat-header {
      background: rgba(200,165,82,0.12);
      padding: 1rem 1.5rem;
      display: flex; align-items: center; gap: 0.75rem;
      border-bottom: 1px solid rgba(200,165,82,0.15);
    }
    .ai-chat-dot { width:8px; height:8px; border-radius:50%; background: var(--hoy-orange); }
    .ai-chat-title {
      font-family: var(--font-sans); font-size: 0.62rem;
      letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
    }
    .ai-chat-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
    .chat-bubble {
      padding: 0.8rem 1.2rem; border-radius: 6px;
      font-size: 0.78rem; line-height: 1.6; font-weight: 300;
      max-width: 85%;
    }
    .chat-bubble.user {
      background: var(--hoy-orange); color: white;
      align-self: flex-end; border-radius: 12px 12px 2px 12px;
    }
    .chat-bubble.ai {
      background: rgba(200,165,82,0.1); color: var(--cream);
      border: 1px solid rgba(200,165,82,0.15);
      align-self: flex-start; border-radius: 12px 12px 12px 2px;
    }
    .ai-typing {
      display: flex; gap: 4px; align-items: center; padding: 0.6rem 1rem;
    }
    .ai-typing span {
      width:6px; height:6px; border-radius:50%;
      background: var(--gold); opacity: 0.6;
      animation: typing 1.2s ease-in-out infinite;
    }
    .ai-typing span:nth-child(2) { animation-delay: 0.2s; }
    .ai-typing span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes typing {
      0%,100% { transform: translateY(0); opacity:0.4; }
      50% { transform: translateY(-5px); opacity:1; }
    }
    .ai-content .section-title { margin-bottom: 1.5rem; }
    .ai-features { list-style:none; margin: 2rem 0; display: flex; flex-direction:column; gap:1rem; }
    .ai-feature {
      display: flex; gap: 1rem; align-items: flex-start;
      font-size: 0.8rem; font-weight: 300; color: var(--text-muted); line-height: 1.6;
    }
    .ai-feature-icon {
      color: var(--hoy-orange); font-size: 1rem; flex-shrink:0; margin-top:1px;
    }

    /* ───── SELL CTA — compact navy met oranje accent (Marco feedback) ───── */
    .sell-cta {
      position: relative; overflow: hidden;
      padding: 4.5rem 4rem; text-align: center;
      background: var(--navy);
      border-top: 3px solid var(--hoy-orange);
    }
    .sell-cta-bg {
      position: absolute; inset: 0;
      background: radial-gradient(circle at 50% 100%, rgba(255,107,53,0.14) 0%, transparent 60%);
      opacity: 1;
    }
    .sell-cta-content { position:relative; z-index:2; }
    .sell-cta .section-label { color: rgba(255,255,255,0.7); }
    .sell-cta .section-title { color: var(--white); margin-bottom: 1.5rem; }
    .sell-cta-text {
      font-size: 0.9rem; font-weight: 300; line-height: 1.9;
      color: rgba(255,255,255,0.8); max-width: 540px; margin: 0 auto 2.5rem;
    }
    .btn-white {
      background: var(--white); color: var(--hoy-orange);
      font-family: var(--font-sans); font-size: 0.68rem;
      letter-spacing: 0.2em; text-transform: uppercase;
      padding: 1rem 2.4rem; display: inline-block;
      font-weight: 400; transition: all 0.3s;
    }
    .btn-white:hover { background: var(--navy); color: var(--white); transform: translateY(-2px); }

    /* ───── STATS ───── */
    .stats {
      padding: 5rem 4rem;
      background: var(--navy-mid);
      display: grid; grid-template-columns: repeat(4,1fr);
      gap: 1px;
    }
    .stat-item {
      padding: 3rem 2rem; text-align: center;
      background: var(--navy);
    }
    .stat-number {
      font-family: var(--font-display); font-size: 4rem;
      font-weight: 300; color: var(--hoy-orange); line-height: 1;
    }
    .stat-label {
      font-family: var(--font-sans); font-size: 0.62rem;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--text-muted); margin-top: 0.75rem;
    }

    /* ───── FOOTER ───── */
    footer {
      background: var(--hoy-orange);
      padding: 4rem 4rem 2rem;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1.2fr 1fr 1fr;
      gap: 3rem; margin-bottom: 3rem;
    }
    .footer-brand svg { height: 52px; margin-bottom: 1.2rem; }
    .footer-tagline {
      font-family: var(--font-display); font-style: italic;
      font-size: 1rem; color: rgba(255,255,255,0.8); line-height: 1.5;
      max-width: 220px; margin-bottom: 1.5rem;
    }
    .footer-social { display:flex; gap:0.8rem; }
    .social-btn {
      width:34px; height:34px; border: 1px solid rgba(255,255,255,0.35);
      display:flex; align-items:center; justify-content:center;
      transition: all 0.3s; cursor:pointer;
    }
    .social-btn:hover { background: rgba(255,255,255,0.15); border-color: white; }
    .social-btn svg { width:14px; height:14px; fill: white; }

    .footer-col-title {
      font-family: var(--font-sans); font-size: 0.62rem;
      font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase;
      color: white; margin-bottom: 1.2rem;
    }
    .footer-address {
      font-size: 0.78rem; font-weight: 300; line-height: 2;
      color: rgba(255,255,255,0.8);
    }
    .footer-address strong { color: white; font-weight: 400; display: block; margin-top: 0.5rem; }
    .footer-links { list-style:none; display:flex; flex-direction:column; gap:0.5rem; }
    .footer-links li {
      font-size: 0.78rem; font-weight: 300;
      color: rgba(255,255,255,0.75); transition: color 0.2s; cursor:pointer;
    }
    .footer-links li:hover { color: white; }

    .footer-bottom {
      display: flex; justify-content: space-between; align-items: center;
      padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.2);
    }
    .footer-copy {
      font-size: 0.65rem; letter-spacing: 0.12em;
      color: rgba(255,255,255,0.6);
    }
    .footer-cert {
      display: flex; gap: 1.2rem;
      font-size: 0.62rem; letter-spacing: 0.15em; font-weight: 600;
      color: rgba(255,255,255,0.7);
    }

    /* ───── REVEAL ANIMATIONS ───── */
    .reveal {
      opacity: 0; transform: translateY(32px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .reveal.visible { opacity:1; transform: translateY(0); }
    .reveal-left {
      opacity:0; transform: translateX(-32px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .reveal-left.visible { opacity:1; transform: translateX(0); }
    .reveal-right {
      opacity:0; transform: translateX(32px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .reveal-right.visible { opacity:1; transform: translateX(0); }

    /* stagger delays */
    .delay-1 { transition-delay: 0.1s; }
    .delay-2 { transition-delay: 0.2s; }
    .delay-3 { transition-delay: 0.3s; }
    .delay-4 { transition-delay: 0.4s; }
    .delay-5 { transition-delay: 0.5s; }

    /* ───── WAVE DIVIDER ───── */
    .wave-divider { line-height:0; }
    .wave-divider svg { display:block; width:100%; }

    /* ───── RESPONSIVE (basic) ───── */
    @media (max-width: 1024px) {
      .nav { padding: 1.2rem 2rem; }
      .nav.scrolled { padding: 0.8rem 2rem; }
      .nav-links { gap: 1.5rem; }
      .yachts { padding: 5rem 2rem; }
      .yachts-grid { grid-template-columns: 1fr 1fr; }
      .yacht-card:first-child { grid-row:auto; aspect-ratio:4/3; }
      .yacht-card:nth-child(4) { grid-column:auto; height:auto; aspect-ratio:4/3; }
      .philosophy-content { padding: 5rem 2rem; }
      .services { padding: 5rem 2rem; }
      .services-grid { grid-template-columns: repeat(2,1fr); }
      .ai-section { grid-template-columns:1fr; padding: 5rem 2rem; gap:3rem; }
      .stats { grid-template-columns: repeat(2,1fr); }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .brands { padding: 4rem 2rem; }
      .sell-cta { padding: 5rem 2rem; }
    }
    /* ── Hamburger toggle: desktop hidden, mobile visible ── */
    .nav-toggle {
      display: none;
      background: transparent; border: 0; padding: 0.6rem;
      width: 44px; height: 44px;
      cursor: pointer;
      flex-direction: column; justify-content: space-around;
      box-sizing: border-box;
    }
    .nav-toggle-bar {
      display: block; width: 24px; height: 2px;
      background: var(--cream);
      transition: transform 0.3s ease, opacity 0.2s ease;
      transform-origin: center;
    }
    .nav-mobile-lang { display: none; }
    @media (max-width: 640px) {
      .hero-title { font-size: 3.2rem; }
      .hero-actions { flex-direction:column; align-items:center; }
      .yachts-grid { grid-template-columns: 1fr; }
      .services-grid { grid-template-columns: 1fr; }
      .stats { grid-template-columns: 1fr 1fr; }
      .footer-grid { grid-template-columns:1fr; }

      /* Mobiele navigatie */
      .nav { padding: 1rem 1.25rem; }
      .nav.scrolled { padding: 0.7rem 1.25rem; }
      .nav-toggle { display: inline-flex; }
      .nav-lang { display: none; } /* verbergen op mobiel — staat in dropdown */

      .nav-links {
        position: fixed;
        top: 0; left: 0; right: 0;
        margin: 0; padding: 5rem 1.5rem 2rem;
        background: rgba(5, 16, 30, 0.97);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(200,165,82,0.18);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        list-style: none;
        max-height: calc(100vh - 0px);
        overflow-y: auto;
        opacity: 0; visibility: hidden;
        transform: translateY(-12px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
        z-index: 99; /* onder de toggle (z=100) */
      }
      .nav-open .nav-links {
        opacity: 1; visibility: visible;
        transform: translateY(0);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
      }
      .nav-links li {
        border-top: 1px solid rgba(200,165,82,0.12);
      }
      .nav-links li:last-child { border-bottom: 1px solid rgba(200,165,82,0.12); }
      .nav-links a {
        display: block;
        padding: 1.1rem 0.5rem;
        font-size: 0.78rem;
        letter-spacing: 0.22em;
      }
      .nav-links a::after { display: none; }
      .nav-links .nav-cta {
        display: inline-block;
        margin: 0.6rem 0;
        padding: 0.7rem 1.4rem;
      }
      .nav-mobile-lang {
        display: flex;
        gap: 0.6rem;
        justify-content: center;
        padding: 1.1rem 0.5rem;
        font-size: 0.7rem;
        letter-spacing: 0.18em;
      }
      .nav-mobile-lang span { color: var(--text-muted); }
      .nav-mobile-lang a { padding: 0; display: inline; }

      /* Hamburger -> X transformatie */
      .nav-open .nav-toggle-bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }
      .nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
      .nav-open .nav-toggle-bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

      body.nav-open { overflow: hidden; }
    }
  
/* ───── YACHT DETAIL TABS ───── */
.yacht-tabs {
  display: flex; flex-wrap: wrap; gap: 0;
  border-bottom: 1px solid rgba(200,165,82,0.18);
  margin-bottom: 1.5rem;
}
.yacht-tab {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  padding: 1rem 1.6rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.yacht-tab:hover { color: var(--cream); }
.yacht-tab.active { color: var(--gold-light); border-bottom-color: var(--gold-light); }
.yacht-tab-panel { display: none; animation: fadeIn 0.25s ease; }
.yacht-tab-panel.active { display: block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

/* ───── LIGHTBOX ───── */
.hoy-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(5,16,30,0.95); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 4rem 5rem;
  animation: fadeIn 0.2s ease;
}
.hoy-lightbox[hidden] { display: none; }
.hoy-lb-img {
  max-width: 100%; max-height: calc(100vh - 8rem);
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.hoy-lb-close, .hoy-lb-prev, .hoy-lb-next {
  position: absolute; background: rgba(255,255,255,0.08);
  color: var(--white); border: 1px solid rgba(255,255,255,0.18);
  cursor: pointer; font-family: var(--font-sans);
  transition: background 0.2s, transform 0.2s;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.hoy-lb-close { top: 1.5rem; right: 1.5rem; width: 44px; height: 44px; font-size: 1.8rem; line-height: 1; }
.hoy-lb-prev, .hoy-lb-next { top: 50%; width: 52px; height: 52px; font-size: 1.2rem; transform: translateY(-50%); }
.hoy-lb-prev { left: 1.5rem; }
.hoy-lb-next { right: 1.5rem; }
.hoy-lb-close:hover, .hoy-lb-prev:hover, .hoy-lb-next:hover { background: var(--hoy-orange); }
.hoy-lb-prev:hover, .hoy-lb-next:hover { transform: translateY(-50%) scale(1.05); }
.hoy-lb-caption {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 1rem; color: var(--cream-soft);
  letter-spacing: 0.05em;
}
.hoy-lb-counter {
  position: absolute; top: 1.8rem; left: 1.8rem;
  font-family: var(--font-sans); font-size: 0.7rem;
  letter-spacing: 0.2em; color: rgba(255,255,255,0.55);
}
@media (max-width: 640px) {
  .hoy-lightbox { padding: 3rem 1rem; }
  .hoy-lb-prev, .hoy-lb-next { width: 40px; height: 40px; }
  .hoy-lb-prev { left: 0.5rem; } .hoy-lb-next { right: 0.5rem; }
  .yacht-tab { padding: 0.8rem 1rem; font-size: 0.65rem; }
}

/* ───── PAGE HEADER (sub-pages) ───── */
.page-header {
  position: relative;
  padding: 11rem 4rem 5rem;
  background: var(--navy-mid);
  text-align: center;
  overflow: hidden;
}
.page-header::before {
  content:''; position:absolute; inset:0;
  background-image: linear-gradient(180deg, rgba(5,16,30,0.85) 0%, rgba(5,16,30,0.95) 100%),
    url('/uploads/boten/1585/DSC09491.jpg'); /* Bavaria 37 Sport HT — page-header */
  background-size: cover; background-position: center;
  opacity: 0.45;
}
.page-header > * { position: relative; z-index: 1; }
.page-header .section-label { color: var(--gold); }
.page-header .section-title { color: var(--white); margin-top: 0.5rem; }
.page-header-text {
  margin: 1.5rem auto 0; max-width: 640px;
  font-size: 0.85rem; line-height: 1.9; color: var(--text-muted); font-weight: 300;
}

/* ───── CATALOG (jachten) ───── */
.catalog {
  padding: 5rem 4rem 7rem;
  background: var(--navy);
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
}
.filter-sidebar {
  background: var(--navy-mid);
  border: 1px solid rgba(200,165,82,0.15);
  padding: 2rem 1.6rem;
  align-self: start;
  position: sticky; top: 110px;
}
.filter-group { margin-bottom: 1.8rem; }
.filter-group h4 {
  font-family: var(--font-sans); font-size: 0.62rem;
  font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.85rem;
}
.filter-input,
.filter-sidebar select,
.filter-sidebar input[type="text"],
.filter-sidebar input[type="number"] {
  width: 100%;
  background: var(--navy);
  border: 1px solid rgba(200,165,82,0.18);
  color: var(--cream);
  padding: 0.55rem 0.7rem;
  font-family: var(--font-sans); font-size: 0.78rem;
  font-weight: 300;
  outline: none;
  transition: border-color 0.3s;
}
.filter-input:focus, .filter-sidebar select:focus { border-color: var(--gold); }
.filter-checkbox {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.78rem; color: var(--cream);
  font-weight: 300; cursor: pointer;
  padding: 0.25rem 0; transition: color 0.2s;
}
.filter-checkbox input { accent-color: var(--hoy-orange); }
.filter-checkbox:hover { color: var(--gold); }
.filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.filter-actions {
  display: flex; gap: 0.6rem; margin-top: 1rem;
}
.btn-filter {
  background: var(--hoy-orange); color: white;
  font-family: var(--font-sans); font-size: 0.62rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.7rem 1rem; border: none; cursor: pointer;
  transition: background 0.3s; flex: 1;
}
.btn-filter:hover { background: var(--hoy-orange2); }
.btn-filter-reset {
  background: transparent; color: var(--cream);
  border: 1px solid rgba(245,240,230,0.3);
  padding: 0.7rem 1rem;
  font-family: var(--font-sans); font-size: 0.62rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  cursor: pointer; transition: all 0.3s; flex: 1;
  text-decoration: none; text-align: center; display: block;
}
.btn-filter-reset:hover { border-color: var(--gold); color: var(--gold); }

.catalog-results-info {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 1.6rem;
}
.catalog-results-count {
  font-family: var(--font-display); font-size: 1.1rem;
  color: var(--cream); font-style: italic;
}
.catalog-results-count strong { color: var(--gold); font-style: normal; font-weight: 400; }

.catalog-grid {
  display: grid;
  /* TAAK 20 / P3 — 4 kolommen op desktop, responsief afbouwend (zie media-queries onder) */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}
/* TAAK 20 / P3 — 4 -> 3 -> 2 -> 1 kolom. Volgorde groot->klein zodat de smalste
   breakpoint (640px, verderop) als laatste wint. */
@media (max-width: 1400px) { .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.catalog-card {
  background: var(--navy-mid);
  border: 1px solid rgba(200,165,82,0.1);
  position: relative; overflow: hidden;
  transition: all 0.4s;
  display: flex; flex-direction: column;
}
.catalog-card:hover {
  border-color: rgba(200,165,82,0.4);
  transform: translateY(-4px);
}
.catalog-card-image {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--navy);
}
.catalog-card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s;
}
.catalog-card:hover .catalog-card-image img { transform: scale(1.05); }
.catalog-card-image-placeholder {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: rgba(245,240,230,0.2);
  font-family: var(--font-display); font-style: italic;
}
.catalog-card-badge {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--hoy-orange); color: white;
  font-family: var(--font-sans); font-size: 0.55rem;
  padding: 0.3rem 0.7rem;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.catalog-card-content { padding: 1.5rem 1.6rem 1.8rem; }
.catalog-card-name {
  font-family: var(--font-display); font-size: 1.4rem;
  font-weight: 400; color: var(--cream); line-height: 1.1;
}
.catalog-card-name em { font-style: italic; color: var(--gold-light); }
.catalog-card-specs {
  display: flex; gap: 1.2rem; margin-top: 0.6rem;
  font-size: 0.62rem; letter-spacing: 0.12em;
  color: var(--text-muted); text-transform: uppercase;
}
.catalog-card-price {
  margin-top: 0.9rem;
  font-family: var(--font-display); font-size: 1.15rem;
  color: var(--gold-light);
  border-top: 1px solid rgba(200,165,82,0.15);
  padding-top: 0.85rem;
}
.catalog-empty {
  padding: 5rem 2rem; text-align: center;
  background: var(--navy-mid);
  border: 1px solid rgba(200,165,82,0.15);
}
.catalog-empty h3 {
  font-family: var(--font-display); font-size: 1.8rem;
  color: var(--cream); margin-bottom: 0.8rem;
  font-weight: 400;
}
.catalog-empty p {
  color: var(--text-muted); font-size: 0.85rem;
  font-weight: 300; margin-bottom: 1.5rem;
}

/* ───── PAGINATION ───── */
.pagination {
  display: flex; gap: 0.4rem; justify-content: center;
  margin-top: 3rem; flex-wrap: wrap;
}
.pagination a, .pagination span {
  display: flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px;
  border: 1px solid rgba(200,165,82,0.25);
  font-family: var(--font-sans); font-size: 0.72rem;
  color: var(--cream); padding: 0 0.6rem;
  text-decoration: none;
  transition: all 0.3s;
}
.pagination a:hover {
  background: var(--hoy-orange); color: white; border-color: var(--hoy-orange);
}
.pagination .active {
  background: var(--gold); color: var(--navy);
  border-color: var(--gold); font-weight: 600;
}
.pagination .disabled { opacity: 0.3; cursor: not-allowed; }

/* ───── YACHT DETAIL ───── */
.yacht-hero {
  position: relative;
  height: 80vh; min-height: 500px;
  margin-top: 0;
  overflow: hidden;
}
.yacht-hero-bg {
  position: absolute; inset:0;
  background-size: cover; background-position: center;
}
.yacht-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(5,16,30,0.55) 0%, rgba(5,16,30,0.2) 40%, rgba(5,16,30,0.95) 100%);
}
.yacht-hero-content {
  position: absolute; bottom: 4rem; left: 4rem; right: 4rem;
  max-width: 960px; z-index: 2;
}
.yacht-hero-back {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-sans); font-size: 0.62rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.5rem;
  text-decoration: none;
}
.yacht-hero-back:hover { color: var(--cream); }
.yacht-hero-title {
  font-family: var(--font-display); font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 300; color: var(--white); line-height: 0.95;
}
.yacht-hero-title em { font-style: italic; color: var(--cream-soft); }
.yacht-hero-meta {
  display: flex; gap: 2rem; margin-top: 1.2rem;
  font-size: 0.7rem; letter-spacing: 0.18em;
  color: rgba(245,240,230,0.7); text-transform: uppercase;
}
.yacht-hero-price {
  margin-top: 1.5rem;
  font-family: var(--font-display); font-size: 2rem;
  color: var(--gold-light);
}

.yacht-section {
  background: var(--navy);
  padding: 5rem 4rem;
}
.yacht-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 4rem;
  max-width: 1400px; margin: 0 auto;
}
.yacht-block {
  background: var(--navy-mid);
  border: 1px solid rgba(200,165,82,0.12);
  padding: 2.2rem 2.4rem;
  margin-bottom: 1.5rem;
}
.yacht-block h2 {
  font-family: var(--font-display); font-size: 1.6rem;
  font-weight: 400; color: var(--gold-light);
  margin-bottom: 1.2rem;
  border-bottom: 1px solid rgba(200,165,82,0.18);
  padding-bottom: 0.7rem;
}
.yacht-block-content {
  font-family: var(--font-sans); font-size: 0.85rem;
  font-weight: 300; line-height: 1.85;
  color: var(--cream); white-space: pre-line;
}
.yacht-block-content br { display: block; margin-bottom: 0.4em; }

.yacht-aside {
  align-self: start; position: sticky; top: 110px;
}
.yacht-spec-table {
  width: 100%; font-size: 0.78rem;
}
.yacht-spec-table tr {
  border-bottom: 1px solid rgba(200,165,82,0.1);
}
.yacht-spec-table td {
  padding: 0.7rem 0;
}
.yacht-spec-table td:first-child {
  font-family: var(--font-sans); font-size: 0.62rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gold); width: 50%;
}
.yacht-spec-table td:last-child {
  text-align: right; color: var(--cream); font-weight: 300;
}

.yacht-cta {
  margin-top: 1.8rem;
  display: flex; flex-direction: column; gap: 0.8rem;
}
.yacht-cta .btn-primary, .yacht-cta .btn-outline {
  width: 100%; text-align: center;
}

.yacht-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 3rem;
}
.yacht-gallery img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  cursor: pointer;
  transition: opacity 0.3s, transform 0.6s;
}
.yacht-gallery img:hover { transform: scale(1.02); }

/* Lightbox */
.lightbox {
  display: none; position: fixed; inset:0;
  background: rgba(5,16,30,0.96);
  z-index: 999; align-items: center; justify-content: center;
  padding: 2rem;
}
.lightbox.active { display: flex; }
.lightbox img { max-width: 90%; max-height: 90%; object-fit: contain; }
.lightbox-close {
  position: absolute; top: 2rem; right: 2rem;
  background: none; border: none; color: white;
  font-size: 2.5rem; cursor: pointer;
  font-family: var(--font-display);
}
.lightbox-prev, .lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: white;
  font-size: 3rem; cursor: pointer; padding: 1rem;
  font-family: var(--font-display); opacity: 0.7;
  transition: opacity 0.2s;
}
.lightbox-prev:hover, .lightbox-next:hover { opacity: 1; }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

/* ───── CONTACT FORM ───── */
.contact-section {
  padding: 5rem 4rem;
  background: var(--navy);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  max-width: 1300px; margin: 0 auto;
}
.contact-info-block {
  background: var(--navy-mid);
  border-left: 2px solid var(--gold);
  padding: 1.4rem 1.8rem;
  margin-bottom: 1.2rem;
}
.contact-info-block h4 {
  font-family: var(--font-sans); font-size: 0.62rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.4rem;
}
.contact-info-block p {
  font-size: 0.85rem; line-height: 1.7;
  color: var(--cream); font-weight: 300;
}
.contact-info-block a { color: var(--cream); transition: color 0.2s; }
.contact-info-block a:hover { color: var(--gold); }

.contact-form {
  background: var(--navy-mid);
  border: 1px solid rgba(200,165,82,0.15);
  padding: 2.5rem 2.8rem;
}
.contact-form h2 {
  font-family: var(--font-display); font-size: 1.8rem;
  color: var(--cream); margin-bottom: 0.5rem;
  font-weight: 400;
}
.contact-form h2 em { font-style: italic; color: var(--gold-light); }
.contact-form p { color: var(--text-muted); font-size: 0.78rem; margin-bottom: 1.8rem; }
.form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-bottom: 1rem;
}
.form-field { margin-bottom: 1rem; }
.form-field label {
  display: block; font-family: var(--font-sans);
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.4rem;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  background: var(--navy);
  border: 1px solid rgba(200,165,82,0.25);
  color: var(--cream);
  padding: 0.75rem 0.9rem;
  font-family: var(--font-sans); font-size: 0.85rem;
  font-weight: 300;
  outline: none;
  transition: border-color 0.3s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  border-color: var(--gold);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-success {
  background: rgba(200,165,82,0.1);
  border: 1px solid var(--gold);
  padding: 1rem 1.2rem;
  color: var(--gold-light);
  margin-bottom: 1.4rem;
  font-size: 0.85rem;
}
.form-error {
  background: rgba(232,71,28,0.1);
  border: 1px solid var(--hoy-orange);
  padding: 1rem 1.2rem;
  color: var(--hoy-orange);
  margin-bottom: 1.4rem;
  font-size: 0.85rem;
}

/* ───── DIENSTEN PAGE BLOCKS ───── */
.diensten-deepdive {
  padding: 5rem 4rem;
  background: var(--navy);
}
.deepdive-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; max-width: 1300px; margin: 0 auto;
}
.deepdive-item {
  background: var(--navy-mid);
  padding: 3rem 3rem;
  border-bottom: 2px solid transparent;
  transition: all 0.4s;
}
.deepdive-item:hover { background: var(--navy-light); border-bottom-color: var(--hoy-orange); }
.deepdive-item h3 {
  font-family: var(--font-display); font-size: 1.6rem;
  color: var(--cream); margin-bottom: 0.4rem;
  font-weight: 400;
}
.deepdive-item h3 em { font-style: italic; color: var(--gold-light); }
.deepdive-item p {
  font-size: 0.85rem; line-height: 1.85;
  color: var(--text-muted); font-weight: 300;
  margin-top: 0.6rem;
}

/* ───── OVER ONS TIMELINE / TEAM ───── */
.about-section {
  padding: 5rem 4rem;
  background: var(--navy-mid);
  text-align: center;
}
.about-text {
  max-width: 720px; margin: 0 auto;
  font-size: 0.95rem; line-height: 1.95;
  color: var(--cream); font-weight: 300;
}
.about-text p { margin-bottom: 1rem; }

/* ───── RESPONSIVE ───── */
@media (max-width: 1024px) {
  .catalog { grid-template-columns: 1fr; padding: 4rem 2rem 6rem; }
  .filter-sidebar { position: static; }
  .yacht-grid { grid-template-columns: 1fr; gap: 2rem; padding: 0 2rem; }
  .yacht-aside { position: static; }
  .yacht-section { padding: 4rem 0; }
  .yacht-hero-content { left: 2rem; right: 2rem; }
  .contact-section { grid-template-columns: 1fr; gap: 2.5rem; padding: 4rem 2rem; }
  .deepdive-grid { grid-template-columns: 1fr; }
  .page-header { padding: 9rem 2rem 4rem; }
}
@media (max-width: 640px) {
  .catalog-grid { grid-template-columns: 1fr; }
  .yacht-gallery { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ───── VIDEO SECTION (home + verkoop) ───── */
.video-section {
  padding: 6rem 4rem 4rem;
  text-align: center;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-mid) 100%);
}
.video-section-header {
  max-width: 720px;
  margin: 0 auto 3rem;
}
.video-section .section-label { color: var(--gold); }
.video-section h2 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 300;
  color: var(--cream);
  margin: 0.5rem 0 1rem;
}
.video-section h2 em { font-style: italic; color: var(--gold-light); }
.video-section .video-intro {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
}
.video-frame {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(200,165,82,0.35), rgba(232,71,28,0.15) 45%, rgba(200,165,82,0.35));
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(200,165,82,0.25) inset;
}
.video-frame::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, var(--gold) 0%, rgba(200,165,82,0.1) 40%, var(--gold) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.video-frame-inner {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.7);
}
.video-frame-inner iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 900px) {
  .video-section { padding: 4rem 1.5rem 3rem; }
  .video-frame { padding: 8px; }
}

/* ───── VERKOOP PAGE ───── */
.verkoop-usps {
  padding: 5rem 4rem;
  background: var(--navy-mid);
}
.verkoop-usps-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3.5rem;
}
.verkoop-usps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  max-width: 1280px;
  margin: 0 auto;
}
.verkoop-usp {
  padding: 2rem 1.75rem;
  border: 1px solid rgba(200,165,82,0.18);
  background: rgba(10, 30, 53, 0.5);
  border-radius: 6px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.verkoop-usp:hover { transform: translateY(-4px); border-color: rgba(200,165,82,0.45); }
.verkoop-usp svg { width: 38px; height: 38px; color: var(--gold); margin-bottom: 1rem; }
.verkoop-usp h3 {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 400;
  color: var(--cream);
  margin-bottom: 0.75rem;
}
.verkoop-usp p {
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 0.95rem;
}

.verkoop-steps {
  padding: 5rem 4rem;
  background: var(--navy);
}
.verkoop-steps-header { text-align: center; max-width: 720px; margin: 0 auto 3.5rem; }
.verkoop-steps-list {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.verkoop-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 2rem;
  align-items: start;
  padding: 1.75rem 2rem;
  background: rgba(10, 30, 53, 0.6);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
}
.verkoop-step-num {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
}
.verkoop-step-body h3 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 400;
  color: var(--cream);
  margin-bottom: 0.5rem;
}
.verkoop-step-body p {
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 0.97rem;
}

.verkoop-form-section {
  padding: 5rem 4rem;
  background: var(--navy-mid);
}
.verkoop-form-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 3rem 3.5rem;
  background: rgba(5, 16, 30, 0.6);
  border: 1px solid rgba(200,165,82,0.25);
  border-radius: 8px;
}
.verkoop-form-wrap h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 300;
  color: var(--cream);
  margin-bottom: 0.5rem;
}
.verkoop-form-wrap > p { color: var(--text-muted); margin-bottom: 2rem; }
.verkoop-form-wrap .form-sub { color: var(--gold); margin: 1.5rem 0 0.75rem; font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; }

@media (max-width: 900px) {
  .verkoop-usps, .verkoop-steps, .verkoop-form-section { padding: 4rem 1.5rem; }
  .verkoop-form-wrap { padding: 2rem 1.5rem; }
  .verkoop-step { grid-template-columns: 60px 1fr; gap: 1.25rem; padding: 1.5rem; }
  .verkoop-step-num { font-size: 2.4rem; }
}

/* ───── TEASER / VOORAANKONDIGING ───── */
.teaser-section {
  max-width: 1400px;
  margin: 6rem auto 5rem;
  padding: 0 2rem;
}
.teaser-header {
  text-align: center;
  margin-bottom: 3rem;
}
.teaser-header .section-label { color: var(--gold); }
.teaser-header .section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--navy);
  margin: 0.5rem 0 1rem;
}
.teaser-intro {
  max-width: 640px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}
.teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.teaser-card {
  background: #fff;
  border: 1px solid rgba(5, 16, 30, 0.08);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(5, 16, 30, 0.06);
  transition: transform 0.4s, box-shadow 0.4s;
}
.teaser-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(5, 16, 30, 0.12);
}
.teaser-image {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--navy);
}
.teaser-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(3px) brightness(0.75);
  transform: scale(1.08);
}
.teaser-image-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: rgba(255,255,255,0.3);
  font-size: 3rem;
}
.teaser-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(5,16,30,0.4), rgba(5,16,30,0.15));
}
.teaser-badge {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 500;
  padding: 0.6rem 1.4rem;
  background: rgba(5, 16, 30, 0.72);
  border: 1px solid var(--gold);
  border-left-width: 3px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.teaser-body {
  padding: 1.75rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1;
}
.teaser-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--navy);
  margin: 0;
  line-height: 1.2;
}
.teaser-name em {
  font-style: italic;
  color: var(--gold);
}
.teaser-specs {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.teaser-specs span + span::before {
  content: '·'; margin-right: 0.75rem; color: var(--gold);
}
.teaser-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
.teaser-cta {
  margin-top: auto;
  align-self: flex-start;
  font-size: 0.75rem !important;
  padding: 0.75rem 1.25rem !important;
}

@media (max-width: 1024px) {
  .teaser-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .teaser-section { margin: 4rem auto 3rem; padding: 0 1.25rem; }
  .teaser-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ═════════════════════════════════════════════════════════════
   FEEDBACK MARCO 2026-04-15 — v3 ext
   ═════════════════════════════════════════════════════════════ */

/* ── Jacht-detail v2: full-width Diamond-stijl ───────────── */
.yacht-section-v2 { padding: 3rem 0 5rem; }
.yacht-section-v2 > * { max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; }
@media (max-width: 640px) {
  .yacht-section-v2 > * { padding-left: 1rem; padding-right: 1rem; }
}

.yacht-actions {
  display: flex; gap: 0.75rem; flex-wrap: wrap;
  margin-bottom: 1.5rem; position: relative;
}
.yacht-action-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(200,165,82,0.35);
  color: var(--gold-light);
  font-family: var(--font-sans); font-size: 0.7rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  cursor: pointer; border-radius: 4px;
  transition: all 0.2s ease;
}
.yacht-action-btn:hover { background: rgba(200,165,82,0.12); color: var(--cream); }
.yacht-action-btn svg { width: 16px; height: 16px; }

.yacht-share-wrap { position: relative; }
.yacht-share-menu {
  position: absolute; top: calc(100% + 0.5rem); left: 0;
  background: var(--navy);
  border: 1px solid rgba(200,165,82,0.3);
  border-radius: 6px; padding: 0.4rem;
  min-width: 200px; z-index: 20;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.yacht-share-menu a,
.yacht-share-menu button {
  display: flex; align-items: center; gap: 0.65rem;
  width: 100%; text-align: left;
  padding: 0.55rem 0.75rem;
  background: transparent; border: none;
  color: var(--cream); font-family: var(--font-sans);
  font-size: 0.75rem; cursor: pointer; border-radius: 4px;
  transition: background 0.15s;
}
.yacht-share-menu a:hover,
.yacht-share-menu button:hover { background: rgba(200,165,82,0.12); color: var(--gold-light); }
.yacht-share-menu svg { width: 14px; height: 14px; color: var(--gold); }

.yacht-keystrip {
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  padding: 1.5rem 2rem !important;
  margin-bottom: 2rem !important;
  border-top: 1px solid rgba(200,165,82,0.2);
  border-bottom: 1px solid rgba(200,165,82,0.2);
}
.yacht-keystat {
  display: flex; flex-direction: column; gap: 0.25rem;
}
.yacht-keystat span {
  font-family: var(--font-sans); font-size: 0.55rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); opacity: 0.85;
}
.yacht-keystat strong {
  font-family: var(--font-display); font-size: 1.4rem;
  font-weight: 400; color: var(--cream);
}

.yacht-gallery-wrap { margin-top: 2rem; margin-bottom: 3rem; }

.yacht-content-wrap {
  max-width: 900px !important;
  margin-top: 3rem; margin-bottom: 2rem;
}
.yacht-block-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 2rem; color: var(--cream);
  margin-bottom: 1.5rem; border-bottom: 1px solid rgba(200,165,82,0.25);
  padding-bottom: 0.5rem;
}
.yacht-longtext {
  font-family: var(--font-display); font-size: 1.05rem;
  line-height: 1.8; color: rgba(245,240,230,0.88);
  max-width: 800px; margin: 0 auto;
  font-weight: 300;
}
.yacht-longtext br { display: block; margin-bottom: 0.5em; }
/* TAAK 19 / P2 — sectieteksten (admin-tabvelden) op de publieke jachtpagina */
.yacht-sections { padding-top: 0.5rem; }
.yacht-section-block { margin-bottom: 2.4rem; }
.yacht-section-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.35rem; color: var(--gold-light);
  max-width: 800px; margin: 0 auto 0.8rem;
  border-bottom: 1px solid rgba(200,165,82,0.25);
  padding-bottom: 0.4rem;
}
.yacht-spec-table-wide { width: 100%; }
.yacht-spec-table-wide td { padding: 0.75rem 1rem; font-size: 0.9rem; }

.yacht-cta-wide {
  margin-top: 2.5rem; display: flex; gap: 0.75rem; flex-wrap: wrap;
}

/* Bekende gebreken */
.yacht-defects {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: rgba(255,107,53,0.07);
  border-left: 3px solid var(--hoy-orange);
  border-radius: 4px;
}
.yacht-defects-head {
  display: flex; align-items: center; gap: 0.65rem;
  margin-bottom: 0.65rem;
}
.yacht-defects-head svg { width: 20px; height: 20px; color: var(--hoy-orange); }
.yacht-defects-head h3 {
  font-family: var(--font-sans); font-size: 0.75rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--hoy-orange); font-weight: 600; margin: 0;
}
.yacht-defects-text {
  font-size: 0.92rem; color: var(--cream);
  line-height: 1.6; margin: 0;
}

/* ── New Listings sectie ─────────────────────────────────── */
.new-listings {
  max-width: 1400px; margin: 4rem auto 1rem;
  padding: 0 4rem;
}
@media (max-width: 640px) { .new-listings { padding: 0 1.25rem; } }
.new-listings-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 2rem;
}
.new-listings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 960px) { .new-listings-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .new-listings-grid { grid-template-columns: 1fr; } }
.new-listing-card {
  position: relative; display: block;
  background: var(--navy-light);
  border: 1px solid rgba(200,165,82,0.15);
  border-radius: 6px; overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s;
}
.new-listing-card:hover { transform: translateY(-3px); border-color: rgba(200,165,82,0.45); }
.new-listing-img {
  aspect-ratio: 4/3;
  background-size: cover; background-position: center;
  background-color: #1a2b4a;
}
.new-listing-body { padding: 1rem 1.1rem; }
.new-listing-title {
  font-family: var(--font-display); font-size: 1.1rem;
  color: var(--cream); font-weight: 400; line-height: 1.2;
}
.new-listing-meta {
  display: flex; gap: 0.75rem; flex-wrap: wrap;
  margin-top: 0.4rem;
  font-size: 0.65rem; letter-spacing: 0.1em;
  color: rgba(245,240,230,0.55); text-transform: uppercase;
}
.new-listing-price {
  margin-top: 0.6rem;
  font-family: var(--font-display); color: var(--gold-light);
  font-size: 1rem;
}
.new-listing-badge {
  position: absolute; top: 0.75rem; left: 0.75rem;
  background: var(--hoy-orange); color: white;
  font-family: var(--font-sans); font-size: 0.55rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.25rem 0.6rem; border-radius: 2px;
  font-weight: 600;
}

/* ── Footer transport sectie ─────────────────────────────── */
.footer-transport {
  position: relative;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  padding: 3.5rem 2rem;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid rgba(200,165,82,0.25);
  border-bottom: 2px solid var(--hoy-orange);
}
.footer-transport::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 20% 50%, rgba(200,165,82,0.08) 0%, transparent 50%);
  pointer-events: none;
}
.footer-transport-inner {
  position: relative; max-width: 900px; margin: 0 auto;
}
.footer-transport-icon {
  width: 56px; height: 56px; margin: 0 auto 1rem;
  color: var(--gold);
}
.footer-transport-title {
  font-family: var(--font-display); font-size: 2rem;
  font-weight: 400; color: var(--cream);
  margin-bottom: 0.75rem;
}
.footer-transport-text {
  font-size: 1rem; color: rgba(245,240,230,0.8);
  line-height: 1.6; max-width: 640px; margin: 0 auto;
}

/* ── Team sectie ─────────────────────────────────────────── */
.team-section {
  max-width: 1200px; margin: 5rem auto; padding: 0 2rem;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem; margin-top: 2.5rem;
}
@media (max-width: 640px) { .team-grid { grid-template-columns: 1fr; } }
.team-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(200,165,82,0.15);
  border-radius: 6px;
  padding: 2rem; text-align: center;
  transition: transform 0.3s, border-color 0.3s;
}
.team-card:hover { transform: translateY(-2px); border-color: rgba(200,165,82,0.35); }
.team-photo {
  width: 120px; height: 120px; margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  border: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 2.2rem;
  color: var(--gold-light);
  overflow: hidden;
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-name {
  font-family: var(--font-display); font-size: 1.4rem;
  color: var(--cream); font-weight: 400; margin-bottom: 0.25rem;
}
.team-role {
  font-family: var(--font-sans); font-size: 0.65rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.75rem;
}
.team-bio {
  font-size: 0.9rem; color: rgba(245,240,230,0.75);
  line-height: 1.6;
}

/* ── Team asymmetrisch (large + compact) ─────────────────── */
.team-grid-primary {
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  margin-top: 3rem;
}
.team-grid-secondary {
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 820px) {
  .team-grid-primary,
  .team-grid-secondary { grid-template-columns: 1fr; }
}
.team-card-large {
  text-align: left;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
}
.team-photo-large {
  width: 100%;
  height: 340px;
  margin: 0;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(200,165,82,0.25);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  position: relative;
}
.team-photo-large img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.team-photo-large::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  opacity: 0.7;
}
.team-card-large .team-body {
  padding: 1.75rem 2rem 2rem;
}
.team-card-large .team-name {
  font-size: 1.6rem;
  margin-bottom: 0.35rem;
  text-align: left;
}
.team-card-large .team-role {
  margin-bottom: 1.25rem;
  text-align: left;
}
.team-card-large .team-bio {
  font-style: normal;
  text-align: left;
}
.team-card-large .team-bio p {
  margin-bottom: 0.9rem;
  font-size: 0.95rem;
  line-height: 1.7;
}
.team-card-large .team-bio p:last-child { margin-bottom: 0; }

.team-card-compact {
  padding: 1.75rem 1.5rem;
}
.team-photo-compact {
  width: 140px; height: 140px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 2px solid var(--gold);
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  display: flex; align-items: center; justify-content: center;
}
.team-photo-compact img {
  width: 100%; height: 100%; object-fit: cover;
}
.team-card-compact .team-name {
  font-size: 1.3rem; margin-bottom: 0.25rem;
}
.team-card-compact .team-role {
  margin-bottom: 0;
}
.team-initials {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--gold-light);
}
.team-divider {
  max-width: 400px;
  height: 1px;
  margin: 3.5rem auto 0;
  background: linear-gradient(90deg, transparent, rgba(200,165,82,0.45) 50%, transparent);
}

/* ── Team rows (uniforme 4-leden lijst, alternerend foto links/rechts) ─ */
.team-rows {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  margin-top: 3rem;
}
.team-row {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 2.5rem;
  align-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(200,165,82,0.15);
  border-radius: 6px;
  padding: 2rem;
  transition: border-color 0.3s, transform 0.3s;
}
.team-row:hover { border-color: rgba(200,165,82,0.35); transform: translateY(-2px); }
.team-row-reverse { grid-template-columns: 1fr minmax(260px, 360px); }
.team-row-reverse .team-row-photo { order: 2; }
.team-row-reverse .team-row-body  { order: 1; }
.team-row-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  border: 1px solid rgba(200,165,82,0.25);
  display: flex; align-items: center; justify-content: center;
}
.team-row-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.team-row-photo::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  opacity: 0.7;
}
.team-row-body {
  text-align: left;
}
.team-row-body .team-name {
  font-size: 1.6rem;
  margin-bottom: 0.3rem;
  text-align: left;
}
.team-row-body .team-role {
  margin-bottom: 1.1rem;
  text-align: left;
}
.team-row-body .team-bio { text-align: left; }
.team-row-body .team-bio p {
  margin-bottom: 0.85rem;
  font-size: 0.95rem;
  line-height: 1.7;
}
.team-row-body .team-bio p:last-child { margin-bottom: 0; }

.team-contact {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(200,165,82,0.12);
}
.team-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--cream);
  font-weight: 300;
  letter-spacing: 0.02em;
  transition: color 0.25s;
}
.team-contact-item:hover { color: var(--gold-light); }
.team-contact-icon {
  width: 14px; height: 14px;
  color: var(--gold);
  flex-shrink: 0;
}
.team-contact-note {
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.72rem;
  margin-left: 0.15rem;
}

@media (max-width: 820px) {
  .team-row,
  .team-row-reverse {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }
  .team-row-reverse .team-row-photo { order: 0; }
  .team-row-reverse .team-row-body  { order: 0; }
  .team-row-photo { max-width: 360px; margin: 0 auto; width: 100%; }
}

/* ── Page-header override op /over-ons (kantoorfoto i.p.v. boot) ─
   Lichtere gradient — Marco vond de hero te donker.
   Originele alpha's: 0.78 → 0.92, opacity 0.55. */
.page-header-overons::before {
  background-image: linear-gradient(180deg, rgba(5,16,30,0.45) 0%, rgba(5,16,30,0.70) 100%),
    url('/public/assets/img/kantoor.jpg');
  background-position: center 60%;
  opacity: 0.75;
}

/* ── Hero scroll cue (peek naar new-listings) ─ */
.hero-scroll-cue {
  position: absolute;
  left: 50%; bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  flex-direction: column; align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245,240,230,0.7);
  text-decoration: none;
  animation: fadeUp 1s ease 1.4s both;
  transition: color 0.3s;
}
.hero-scroll-cue:hover { color: var(--gold-light); }
.hero-scroll-cue svg {
  width: 18px; height: 18px;
  animation: scrollBounce 2.2s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(6px); opacity: 1; }
}
@media (max-width: 640px) {
  .hero-scroll-cue { bottom: 1rem; font-size: 0.55rem; letter-spacing: 0.22em; }
}

/* ── Footer transport v2: centered navy + subtiele foto-duo ─ */
.footer-transport-v2 {
  padding: 4rem 2rem 4.5rem;
  text-align: center;
}
.footer-transport-v2 .footer-transport-inner {
  max-width: 820px;
  margin: 0 auto;
}
.footer-transport-tagline {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 0.85rem;
}
.footer-transport-v2 .footer-transport-title {
  max-width: 640px;
  margin: 0 auto 1rem;
  line-height: 1.25;
  font-size: 1.85rem;
}
.footer-transport-v2 .footer-transport-text {
  max-width: 560px;
  margin: 0 auto;
}
.footer-transport-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  max-width: 540px;
  margin: 2.25rem auto 2.5rem;
}
@media (max-width: 520px) {
  .footer-transport-gallery { grid-template-columns: 1fr; max-width: 280px; }
}
.footer-transport-cta {
  display: inline-block;
  padding: 0.85rem 1.8rem;
  background: transparent;
  color: var(--gold);
  border: 1px solid rgba(200,165,82,0.6);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  border-radius: 1px;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}
.footer-transport-cta:hover {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
  transform: translateY(-1px);
}

/* ── HOY-frame — subtiel gouden kader met corner-brackets ─ */
.hoy-frame {
  position: relative;
  margin: 0;
  padding: 7px;
  background: rgba(26,43,74,0.55);
  border: 1px solid rgba(200,165,82,0.3);
  overflow: visible;
  transition: transform 0.35s ease, border-color 0.35s ease;
}
.hoy-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.95);
  transition: filter 0.35s ease;
}
.hoy-frame:hover {
  transform: translateY(-3px);
  border-color: rgba(200,165,82,0.55);
}
.hoy-frame:hover img {
  filter: saturate(1) brightness(1);
}
/* Gouden corner-brackets (4 hoeken) */
.hoy-frame::before,
.hoy-frame::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  pointer-events: none;
}
.hoy-frame::before {
  top: -3px; left: -3px;
  border-top: 1px solid var(--gold);
  border-left: 1px solid var(--gold);
}
.hoy-frame::after {
  bottom: -3px; right: -3px;
  border-bottom: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
}

/* ── Transport service lite (diensten) — tekst met gold ornament ─ */
.transport-service-lite {
  padding: 5rem 2rem;
  text-align: center;
  background: rgba(255,255,255,0.015);
  border-top: 1px solid rgba(200,165,82,0.12);
  border-bottom: 1px solid rgba(200,165,82,0.12);
}
.transport-service-lite-inner {
  max-width: 760px;
  margin: 0 auto;
}
.transport-service-lite .section-label { color: var(--gold); }
.transport-service-title {
  margin-bottom: 1.25rem;
  font-size: 1.85rem;
}
.transport-service-body {
  max-width: 620px;
  margin: 0 auto;
}
.transport-service-body p {
  font-size: 1rem;
  color: rgba(245,240,230,0.82);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.transport-service-body p:last-child { margin-bottom: 0; }
.transport-service-cta {
  margin-top: 1.75rem;
  display: inline-block;
}
.ornament-rule {
  display: block;
  width: 56px; height: 1px;
  margin: 0 auto 1.25rem;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  position: relative;
}
.ornament-rule::before {
  content: '';
  position: absolute;
  top: -2px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0.85;
}
.transport-service-lite-inner > .ornament-rule:last-child {
  margin: 2rem auto 0;
}

/* ── Verkoop: ligplaats-sectie + full-width video ────────── */
.verkoop-ligplaats {
  max-width: 1100px; margin: 5rem auto; padding: 2.5rem 2rem;
  border: 1px solid rgba(200,165,82,0.25);
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  display: grid; grid-template-columns: 80px 1fr auto;
  gap: 1.5rem; align-items: center;
}
@media (max-width: 740px) {
  .verkoop-ligplaats { grid-template-columns: 1fr; text-align: center; }
}
.verkoop-ligplaats-icon { color: var(--gold); }
.verkoop-ligplaats-icon svg { width: 56px; height: 56px; }
.verkoop-ligplaats h3 {
  font-family: var(--font-display); font-size: 1.5rem;
  color: var(--cream); font-weight: 400; margin-bottom: 0.5rem;
}
.verkoop-ligplaats p {
  font-size: 0.95rem; color: rgba(245,240,230,0.8); line-height: 1.6; margin: 0;
}

.video-frame-fullscreen {
  width: 100%; margin: 0;
  aspect-ratio: 16/9;
  position: relative; overflow: hidden;
  background: #000;
}
.video-frame-fullscreen iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0;
}

/* ── Vacatures pagina ────────────────────────────────────── */
.jobs-section {
  max-width: 900px; margin: 2rem auto 5rem; padding: 0 2rem;
  font-family: var(--font-display); font-size: 1.05rem;
  line-height: 1.8; color: rgba(245,240,230,0.88); font-weight: 300;
}
.jobs-section h2 {
  font-family: var(--font-display); font-size: 1.6rem;
  color: var(--cream); font-weight: 400;
  margin: 2rem 0 1rem;
}

/* ── Vacatures grid (3 cards) ────────────────────────────── */
.jobs-grid-section {
  padding: 4rem 2rem 5rem;
  background: var(--navy);
}
.jobs-grid {
  max-width: 1300px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(200,165,82,0.12);
  border: 1px solid rgba(200,165,82,0.12);
}
.job-card {
  background: var(--navy-mid);
  padding: 2.75rem 2.5rem;
  display: flex; flex-direction: column;
  border-bottom: 2px solid transparent;
  transition: background 0.4s, border-color 0.4s;
}
.job-card:hover {
  background: var(--navy-light);
  border-bottom-color: var(--hoy-orange);
}
.job-card-head {
  display: flex; align-items: flex-start; gap: 1rem;
  margin-bottom: 1.5rem;
}
.job-icon {
  width: 38px; height: 38px;
  color: var(--gold);
  flex-shrink: 0;
}
.job-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--cream);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}
.job-chip {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(200,165,82,0.4);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}
.job-body {
  flex: 1;
  font-size: 0.92rem;
  line-height: 1.75;
  color: rgba(245,240,230,0.82);
  font-weight: 300;
}
.job-body p { margin: 0 0 0.9rem; }
.job-body p:last-child { margin-bottom: 0; }
.job-subtitle {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 1.6rem 0 0.7rem;
}
.job-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
}
.job-list li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(245,240,230,0.82);
}
.job-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.65em;
  width: 6px; height: 1px;
  background: var(--gold);
}
.job-note {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border-left: 2px solid var(--gold);
  background: rgba(200,165,82,0.06);
  font-style: italic;
  color: rgba(245,240,230,0.85);
  font-size: 0.9rem;
  line-height: 1.6;
}
.job-cta {
  margin-top: 2rem;
  align-self: flex-start;
}
@media (max-width: 1024px) {
  .jobs-grid { grid-template-columns: 1fr; }
  .jobs-grid-section { padding: 3rem 1.5rem 4rem; }
  .job-card { padding: 2.25rem 1.75rem; }
}

/* ── Open sollicitatie blok ──────────────────────────────── */
.open-sollicitatie {
  padding: 4.5rem 2rem 6rem;
  text-align: center;
  background: rgba(255,255,255,0.015);
  border-top: 1px solid rgba(200,165,82,0.12);
}
.open-sollicitatie-inner {
  max-width: 720px; margin: 0 auto;
}
.open-sollicitatie-inner > .ornament-rule:last-child {
  margin: 2rem auto 0;
}
.open-sollicitatie-inner .section-title {
  margin-bottom: 1rem;
  font-size: 1.7rem;
}
.open-sollicitatie-text {
  font-size: 1rem;
  color: rgba(245,240,230,0.82);
  line-height: 1.7;
  margin: 0 0 1.75rem;
}

/* ── Transport service full (diensten) — uitgebreid blok ─── */
.transport-service-full {
  padding: 5rem 2rem;
  text-align: center;
  background: rgba(255,255,255,0.015);
  border-top: 1px solid rgba(200,165,82,0.12);
  border-bottom: 1px solid rgba(200,165,82,0.12);
}
.transport-service-full-inner {
  max-width: 820px; margin: 0 auto;
}
.transport-service-full .section-label { color: var(--gold); }
.transport-service-full .transport-service-title {
  margin-bottom: 1.5rem;
  font-size: 1.95rem;
}
.transport-service-full .transport-service-body {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}
.transport-service-full .transport-service-body p {
  font-size: 1rem;
  color: rgba(245,240,230,0.85);
  line-height: 1.75;
  margin-bottom: 1rem;
}
.transport-service-full .transport-service-body p:last-child { margin-bottom: 0; }
.transport-service-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1.25rem;
}
.transport-service-list li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.55rem;
  font-size: 0.97rem;
  line-height: 1.65;
  color: rgba(245,240,230,0.85);
}
.transport-service-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 8px; height: 1px;
  background: var(--gold);
}
.transport-service-full .transport-service-cta {
  margin-top: 2rem;
  display: inline-block;
}
.transport-service-full-inner > .ornament-rule:last-child {
  margin: 2rem auto 0;
}
@media (max-width: 740px) {
  .transport-service-full { padding: 3.5rem 1.5rem; }
  .transport-service-full .transport-service-title { font-size: 1.5rem; }
}

/* ── Print styles ────────────────────────────────────────── */

/* TAAK 22 / E — springknop tussen de fotogalerij en de specificaties. Bewust een
   gewone anchor: werkt zonder JavaScript en blijft toegankelijk via toetsenbord. */
.yacht-skip {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.5rem 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(200,165,82,0.45);
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.yacht-skip:hover { background: var(--gold); color: var(--navy); }
html { scroll-behavior: smooth; }

/* TAAK 22 / F — filterbalk linksboven vastzetten zodat hij niet meescrollt met het
   foto-overzicht. .catalog is een grid met een kolom van 280px; sticky werkt daar zolang
   de aside zich niet uitrekt (align-self: start) en er geen overflow op de ouder staat.
   max-height + eigen scrollbalk zodat lange filterlijsten op kleine schermen bereikbaar
   blijven. Onder 900px staat het grid in één kolom en is vastzetten juist hinderlijk. */
@media (min-width: 901px) {
  .filter-sidebar {
    position: sticky;
    top: 1.5rem;
    align-self: start;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   TAAK 24 — Porsche-typografie, ingetogen variant

   Overgenomen uit de BIJGESTELDE mockup 5 (na de correctie van 6 augustus), niet
   uit de eerste versie: kleinere koppen met bescheiden letterspacing. Groot én
   gesperd tegelijk leest als schreeuwen; klein met rustige tracking leest strak.

   Bewust NIET aangeraakt, want het origineel doet dat al goed en een extra laag
   liet in de mockup de header botsen (tagline achter het menu, CONTACT-knop
   overlapt): .nav en .nav a, .nav-cta, .hero-eyebrow, .btn-primary, .btn-outline
   en .section-label. Die hebben al kapitalen met 0.15-0.3em tracking.

   Dit blok staat bewust ná de basisregels zodat het zonder !important wint.
   ══════════════════════════════════════════════════════════════════════════ */

/* Hero-kop: fors terug in grootte (was clamp(3.8rem, 9vw, 8rem)). Gewicht 500 in
   plaats van 600, want semibold is op het grootste element van de pagina te zwaar. */
.hero-title {
  /* TAAK 25 — ondergrens van 2.9rem (46,4px) naar 2.25rem (36px). Op 390px liep
     "DROOMJACHT" 351px breed in 326px beschikbaar en vielen de eerste en laatste
     letters van het scherm. Bij 36px meet datzelfde woord 273px en past het ook op
     360px (296px beschikbaar). De vw-factor en het maximum blijven ongewijzigd, dus
     vanaf 554px breedte rekent de kop exact zoals voorheen: op 768px 49,9px en op
     1280px 83,2px, identiek aan de oude formule. */
  font-size: clamp(2.25rem, 6.5vw, 5.8rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  line-height: 1.06;
  margin-bottom: 0.5em;
}

/* Sectiekoppen: ook terug in grootte (was clamp(2.4rem, 5vw, 4rem)). */
.section-title {
  /* TAAK 25 — ondergrens van 1.7rem (27,2px) naar 1.4rem (22,4px) voor lucht op
     smalle schermen. Boven 800px verandert er niets: daar wint de vw-term. */
  font-size: clamp(1.4rem, 3.4vw, 2.9rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  line-height: 1.18;
  margin-bottom: 0.7em;
}

/* Overige koppen: kapitalen, klein en rustig. */
h1, h2, h3,
.yacht-block-title, .yacht-section-title, .page-header h1 {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  line-height: 1.22;
}
.yacht-block-title { font-size: 1.5rem; }
h4, h5, h6 {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Lopende tekst: regular en luchtig. Bewust alleen op echte tekstblokken en niet
   op alle <p>: de hero-tagline en -subtitel zijn ook p's en raakten in de mockup
   hun eigen regelafstand kwijt, wat ze in de header liet botsen. */
.yacht-longtext, .desc, .page-header-text, .catalog-card-desc,
article p, .content p, li, td {
  font-weight: 400;
  line-height: 1.75;
}

/* Cijfers strak uitgelijnd — past bij het technische karakter. */
.yacht-spec-table td, .yacht-keystat strong, .price, .catalog-card-price {
  font-variant-numeric: tabular-nums lining-nums;
}


/* ══════════════════════════════════════════════════════════════════════════
   TAAK 25 — koppen op smalle schermen

   De letterspacing die op desktop rust geeft, duwt lange Nederlandse woorden op
   mobiel juist over de rand: "DROOMJACHT", "BEGELEIDING", "JACHTBEMIDDELING".
   Onder 640px daarom ongeveer halveren. Bewust GEEN word-break of hyphens: een
   afgebroken woord in een kop leest slechter dan een iets kleinere kop.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .hero-title { letter-spacing: 0.02em; }
  .section-title,
  h1, h2, h3,
  .yacht-block-title, .yacht-section-title, .page-header h1 { letter-spacing: 0.03em; }
  h4, h5, h6 { letter-spacing: 0.025em; }

  /* De gouden tagline-balk mag over twee regels, maar niet buiten beeld. */
  .hero-eyebrow {
    letter-spacing: 0.18em;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
  }

  /* ── Twee bestaande responsive-lekken, gevonden bij het nameten ──────────
     Beide bestonden al vóór de fontwissel; ze veroorzaken horizontale scroll op
     360 en 390px. Een grid-item heeft standaard min-width: auto en kan daardoor
     niet krimpen onder zijn eigen inhoud, dus 1fr wordt breder dan de kolom.
     Samen met royale padding duwt dat de pagina over de rand. */

  /* Diensten: .deepdive-item werd 405px breed in een kolom van 262px. De sectie
     hield daarbij 4rem padding aan weerszijden aan; op 360px is dat 128px van de
     360, waardoor "AANKOOPBEGELEIDING" 308px nodig had in 184px. Minder padding
     geeft de kop ruimte zonder hem tot 15px te hoeven knijpen. */
  .diensten-deepdive {
    padding: 3rem 1rem;
  }
  .deepdive-item {
    min-width: 0;
    padding: 2rem 1.5rem;
  }

  /* Over ons: de twee statkolommen plus 4rem padding aan weerszijden kwamen
     samen op 474px in een venster van 390px. */
  .stats {
    padding: 3rem 1.5rem;
  }
  .stat-item {
    min-width: 0;
  }

  /* Diensten: "AANKOOPBEGELEIDING" is 18 letters aaneen en had bij 1.6rem nog
     308px nodig in 280px. Iets kleiner past ruim, zonder het woord af te breken. */
  .deepdive-item h3 {
    font-size: 1.35rem;
  }

  /* Verkoop: zelfde patroon als hierboven. 4rem sectiepadding aan weerszijden is
     op 360px een derde van het scherm, en de 1fr-kolom van .verkoop-step kon door
     min-width: auto niet krimpen. */
  .verkoop-steps {
    padding: 3rem 1rem;
  }
  .verkoop-step > * {
    min-width: 0;
  }
}

@media print {
  .no-print,
  .nav, footer, .footer-transport, .sell-cta, .wave-divider,
  #mainNav, .hoy-lightbox, .ticker, #chatbotWidget,
  .yacht-hero, .yacht-actions, .yacht-tabs {
    display: none !important;
  }
  .only-print { display: block !important; }
  body {
    background: white !important; color: black !important;
    font-family: Georgia, serif;
  }
  /* TAAK 19 / P3 — robuuste print: alle tekst hard zwart (dark theme printte
     anders wit-op-wit), álle tab-panels gestapeld zichtbaar met hun kop, en
     een beperkte fotoselectie (eerste 2) i.p.v. de hele galerij. Specifiekere
     kleurregels verderop (o.a. bekende gebreken) winnen van deze catch-all. */
  #yacht-print-root, #yacht-print-root * { color: #000 !important; }
  .yacht-tab-panel { display: block !important; margin-bottom: 1.2rem; }
  .yacht-section-title { color: black !important; border-color: #999; page-break-after: avoid; }
  .yacht-section-block { page-break-inside: avoid; margin-bottom: 1.2rem; }
  .yacht-gallery-wrap { display: block !important; }
  .yacht-gallery { display: block !important; }
  .yacht-gallery img { display: none !important; }
  .yacht-gallery img:nth-child(-n+2) {
    display: inline-block !important;
    width: 47%; height: auto; margin: 0 1% 0.8rem 0;
  }
  .yacht-section-v2 { padding: 0; }
  .yacht-section-v2 > * { max-width: 100%; padding: 0; margin: 0 0 1rem; color: black; }
  .yacht-keystrip { border-color: #999; color: black; }
  .yacht-keystat span, .yacht-keystat strong { color: black !important; }
  .yacht-block-title { color: black; border-color: #999; }
  .yacht-longtext, .yacht-spec-table td, .yacht-defects-text { color: black !important; }
  .yacht-spec-table tr { border-color: #ddd; }
  .yacht-defects { background: #fff7f0; border-left-color: #c95a1a; }
  .yacht-defects-head h3, .yacht-defects-head svg { color: #c95a1a !important; }
  /* TAAK 20 / P1 — leesbaarheid print. TAAK 19 fixte alleen de KLEUR (wit-op-wit
     door dark theme). Wat overbleef: spec-labels en sectieteksten printten te KLEIN
     (0.55–0.62rem) en te DUN (weight 300 in een display-serif) -> op papier vrijwel
     onleesbaar. Hier: groter, normaal/half-vet gewicht en volle dekking. Geen
     universele selector op font-weight (id-specificity zou de kop-overrides winnen). */
  .yacht-spec-table { font-size: 11pt !important; }
  .yacht-spec-table td { padding: 5px 0 !important; }
  .yacht-spec-table td:first-child {
    font-size: 9.5pt !important; letter-spacing: 0.04em !important;
    font-weight: 600 !important; width: 40% !important; color: #000 !important;
  }
  .yacht-spec-table td:last-child { font-weight: 500 !important; }
  .yacht-longtext { font-size: 11pt !important; line-height: 1.55 !important; font-weight: 400 !important; }
  .yacht-longtext br { margin-bottom: 0.35em; }
  .yacht-section-title { font-size: 13pt !important; font-weight: 600 !important; }
  .yacht-block-title { font-size: 15pt !important; font-weight: 600 !important; }
  .yacht-keystat span { font-size: 8.5pt !important; letter-spacing: 0.08em !important; opacity: 1 !important; }
  .yacht-keystat strong { font-size: 13pt !important; font-weight: 500 !important; }
  .yacht-print-footer {
    margin-top: 2rem; padding-top: 1rem;
    border-top: 2px solid #333;
    font-size: 0.85rem; color: #333;
    text-align: center;
  }
  a { color: black !important; text-decoration: none; }
  @page { margin: 1.5cm; }

    /* TAAK 22 / B - donker-op-donker bij printen. Alleen body werd op wit gezet; de
       sectie- en blokcontainers hielden hun navy themakleur (--navy #05101E /
       --navy-mid #0A1E35). Print de gebruiker mét achtergronden (in Chrome de optie
       "Achtergrondafbeeldingen"), dan komt de zwart geforceerde tekst op een donkere
       ondergrond terecht en is de spectabel onleesbaar. Dit is de echte oorzaak van
       Rubens klacht; de cache-buster van TAAK 21 / 1C loste alleen het ophalen op.
       Alles wat tekst draagt hier expliciet op wit, randen naar grijs. */
    .yacht-section, .yacht-block, .yacht-section-v2, .yacht-tab-panel,
    .yacht-section-block, .yacht-keystrip, .yacht-spec-table,
    .yacht-spec-table tr, .yacht-spec-table td, .yacht-longtext,
    .yachts, .ai-section, .about-section, #yacht-print-root {
        background: #fff !important;
        background-image: none !important;
        box-shadow: none !important;
    }
    .yacht-block, .yacht-section-block, .yacht-keystrip {
        border-color: #bbb !important;
    }
    /* Vangnet: alles binnen de printbare jachtpagina leesbaar donker op wit. */
    #yacht-print-root, #yacht-print-root *, .yacht-section, .yacht-section * {
        color: #000 !important;
        text-shadow: none !important;
    }
}
.only-print { display: none; }