/* -------- Jeanneau-like UI layer (lightweight, no dependencies) -------- */
:root{
  --brand-navy:#0b1437;
  --brand-navy-2:#0e1a4a;
  --brand-accent:#e8562a;
  --text:#0c0d10;
  --muted:#6b7280;
  --bg:#ffffff;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --radius:16px;
}

html,body{background:var(--bg); color:var(--text);}
a{color:var(--brand-navy);}
a:hover{opacity:.9}

.site-header{position:sticky; top:0; z-index:1000; background:var(--bg); box-shadow:var(--shadow);}
.site-header .container{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:12px 0;}
.site-logo{display:flex; align-items:center; gap:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--brand-navy);}
.site-logo .badge{width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--brand-navy),var(--brand-navy-2)); display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:14px;}

.site-nav{position:relative}
.primary-nav{display:flex; gap:28px; list-style:none; margin:0; padding:0;}
.primary-nav>li>a{display:block; padding:12px 6px; text-transform:uppercase; font-weight:700; letter-spacing:.04em;}
.primary-nav li{position:relative}
.primary-nav li.menu-item-has-children> a::after{content:"▾"; font-size:.75em; margin-left:.4em;}

@media (min-width: 901px){
  .primary-nav li.menu-item-has-children:hover > .sub-menu{display:block; opacity:1; transform:translateY(0); pointer-events:auto;}
  .sub-menu{
    display:none;
    position:absolute; left:0; top:100%;
    min-width:720px; max-width:90vw;
    background:#fff; border:1px solid #e5e7eb; border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px; opacity:0; transform:translateY(6px); transition:.2s;
  }
  .sub-menu>li{display:inline-block; width:calc(33.333% - 12px); vertical-align:top; margin:6px;}
  .sub-menu>li>a{display:block; padding:10px 8px; border-radius:12px; background:#f8fafc; font-weight:600;}
  .sub-menu .menu-item-has-children>.sub-menu{position:static; display:block; opacity:1; transform:none; box-shadow:none; border:none; padding:8px 0 0 12px; min-width:auto;}
  .sub-menu .menu-item-has-children>.sub-menu>li>a{background:transparent; padding:6px 0; font-weight:500; color:var(--muted);}
}

@media (max-width: 900px){
  .primary-nav{display:none; flex-direction:column; gap:8px; padding:12px 0;}
  .primary-nav.is-open{display:flex;}
  .primary-nav .sub-menu{display:none; padding-left:12px;}
  .primary-nav .menu-item-has-children.open>.sub-menu{display:block;}
}

.hero{position:relative; min-height:64vh; display:grid; place-items:center; background:#f2f4f8; border-bottom:1px solid #e5e7eb;}
.hero .inner{text-align:center; padding:8vh 2rem;}
.hero h1{font-size:clamp(32px,4vw,56px); margin:0 0 12px; color:var(--brand-navy);}
.hero p{color:#3b3f4a; font-size:clamp(16px,1.4vw,20px)}

.section{padding:48px 0}
.cards{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
.card{grid-column:span 4; background:#fff; border:1px solid #e5e7eb; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:.2s}
.card:hover{transform:translateY(-2px); box-shadow:0 16px 34px rgba(0,0,0,.1)}
.card img{display:block; width:100%; height:220px; object-fit:cover}
.card .p{padding:14px 16px}
.card h3{margin:0 0 6px}
@media (max-width: 1000px){ .card{grid-column:span 6} }
@media (max-width: 640px){ .card{grid-column:span 12} }

.layout{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:24px;
}
@media (max-width: 1000px){
  .layout{grid-template-columns:1fr}
}

.sidebar{
  border:1px solid #e5e7eb; border-radius:var(--radius); padding:12px; background:#fff; box-shadow:var(--shadow);
}
.sidebar h4{margin:8px 12px; text-transform:uppercase; letter-spacing:.06em; color:var(--brand-navy);}
.side-nav{list-style:none; padding:8px 8px 12px; margin:0;}
.side-nav li a{display:flex; justify-content:space-between; gap:8px; padding:10px 12px; border-radius:12px; color:var(--text); text-decoration:none;}
.side-nav li a:hover{background:#f3f4f6}

.footer{margin-top:32px; background:var(--brand-navy);}
.footer .container{display:grid; gap:12px}
.footer p{opacity:.9}
.footer .video-wrap{margin:12px 0 0; aspect-ratio:16/9; background:#0e1a4a; border-radius:12px; overflow:hidden}
.footer .video-wrap iframe, .footer .video-wrap video{width:100%; height:100%; display:block}