/* Prime Marina — motion & interaction layer */
:root {
  --gold: #D4AF37; --gold-hi: #F3E5AB; --gold-lo: #AA820A;
  --ocean: #00C8FF; --ocean-hi: #38BDF8;
  --navy: #041E3A; --navy-2: #0A3462;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
::selection { background: var(--gold); color: var(--navy); }

/* ── Base panels / gradients (from original design) ── */
.glass-panel { background: rgba(11,52,96, .65); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .08); }
.glass-panel-gold { background: rgba(212, 175, 55, .05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(212, 175, 55, .25); }
.text-gradient-gold { background: linear-gradient(135deg, #FFF6D6 0%, #D4AF37 50%, #AA820A 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.text-gradient-ocean { background: linear-gradient(135deg, #E0F2FE 0%, #00C8FF 50%, #0284C7 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.eyebrow { display: inline-block; color: var(--gold); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; }
/* Split words sit in overflow:hidden boxes, which breaks a parent's background-clip:text,
   so each word carries its own gradient. */
.text-gradient-gold .word-inner { background: linear-gradient(135deg, #FFF6D6 0%, #D4AF37 50%, #AA820A 100%); }
.text-gradient-ocean .word-inner { background: linear-gradient(135deg, #E0F2FE 0%, #00C8FF 50%, #0284C7 100%); }
.text-gradient-gold .word-inner, .text-gradient-ocean .word-inner { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.shimmer .word-inner { background-size: 200% auto; animation: shimmer 6s linear infinite; }
.news-img-empty { background: radial-gradient(circle at 30% 30%, rgba(0,200,255,.25), transparent 60%), linear-gradient(135deg, #0A3462, #0F4378); display: grid; place-items: center; color: rgba(212,175,55,.6); }
@keyframes shimmer { to { background-position: 200% center; } }

/* Words for split reveals */
.word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
.word-inner { display: inline-block; will-change: transform; }

/* ── Preloader ── */
#preloader { position: fixed; inset: 0; z-index: 100; background: var(--navy); display: grid; place-items: center; }
.pl-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.pl-wave { width: 120px; height: 24px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw 1.4s var(--ease) forwards, waveShift 2s ease-in-out infinite 1.4s; }
.pl-name { font-family: Cinzel, serif; letter-spacing: .5em; font-weight: 700; color: #fff; font-size: .9rem; opacity: 0; animation: fadeUp .8s var(--ease) .3s forwards; }
.pl-bar { width: 140px; height: 1px; background: rgba(255,255,255,.1); overflow: hidden; }
.pl-bar span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold), var(--ocean)); transform: translateX(-100%); animation: loadBar 1.2s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes waveShift { 50% { transform: translateX(4px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes loadBar { to { transform: translateX(0); } }
body.is-loading { overflow: hidden; }

/* ── Scroll progress ── */
#scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--gold), var(--ocean)); }

/* ── Custom cursor (fine pointers only) ── */
#cursor-dot, #cursor-ring { display: none; }
@media (hover: hover) and (pointer: fine) {
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
  body.has-cursor input, body.has-cursor textarea, body.has-cursor select { cursor: text; }
  #cursor-dot, #cursor-ring { display: block; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 90; border-radius: 50%; transform: translate(-50%, -50%); }
  #cursor-dot { width: 6px; height: 6px; background: var(--gold); }
  #cursor-ring { width: 36px; height: 36px; border: 1px solid rgba(212,175,55,.5); display: grid; place-items: center; transition: width .35s var(--ease), height .35s var(--ease), background .35s, border-color .35s; }
  #cursor-ring.is-hover { width: 56px; height: 56px; background: rgba(212,175,55,.08); border-color: var(--gold); }
  #cursor-ring.is-label { width: 84px; height: 84px; background: var(--gold); border-color: var(--gold); mix-blend-mode: normal; }
  #cursor-ring.is-label .cursor-label { opacity: 1; transform: scale(1); }
  #cursor-ring.is-down { transform: translate(-50%, -50%) scale(.85); }
  .cursor-label { font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--navy); opacity: 0; transform: scale(.5); transition: .3s var(--ease); }
}

/* ── Header ── */
#site-header { transition: transform .5s var(--ease), padding .4s var(--ease), background .4s; }
#site-header.is-scrolled { padding-top: .65rem; padding-bottom: .65rem; background: rgba(4,30,58, .85); }
#site-header.is-hidden { transform: translateY(-110%); }
.logo-mark { width: 34px; height: 34px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .8s var(--ease-spring); }
.logo:hover .logo-mark { transform: rotate(-12deg) scale(1.08); }
.logo-mark path:nth-child(2) { stroke: var(--ocean); stroke-dasharray: 40; animation: waveDash 3s linear infinite; }
@keyframes waveDash { to { stroke-dashoffset: -80; } }
.nav-link { position: relative; padding: .4rem 0; transition: color .3s; }
.nav-link:hover, .nav-link.is-active { color: var(--gold); }
.nav-indicator { position: absolute; bottom: -4px; left: 0; height: 2px; width: 0; border-radius: 2px; background: var(--gold); transition: transform .5s var(--ease), width .5s var(--ease), opacity .3s; opacity: 0; }

/* Burger + mobile menu */
.burger { width: 40px; height: 40px; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); }
.burger span { width: 18px; height: 1.5px; background: #fff; transition: transform .45s var(--ease), opacity .3s; }
.menu-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-open .burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
#mobile-menu { position: fixed; inset: 0; z-index: 40; background: rgba(4,30,58,.97); display: grid; place-items: center; clip-path: circle(0% at calc(100% - 44px) 36px); transition: clip-path .8s var(--ease); }
.menu-open #mobile-menu { clip-path: circle(150% at calc(100% - 44px) 36px); }
.mm-link { font-size: 1.75rem; color: #fff; text-align: center; opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s; transition-delay: calc(var(--i) * 50ms); }
.menu-open .mm-link { opacity: 1; transform: none; transition-delay: calc(200ms + var(--i) * 60ms); }
.mm-link:hover { color: var(--gold); }
.menu-open { overflow: hidden; }

/* ── Buttons ── */
.btn-gold, .btn-glass { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 999px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; overflow: hidden; isolation: isolate; transition: box-shadow .4s, border-color .4s, color .4s; will-change: transform; }
.btn-gold { background: linear-gradient(90deg, var(--gold), var(--gold-lo)); color: var(--navy); }
.btn-gold::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--gold-hi), var(--gold)); transform: translateY(101%); transition: transform .5s var(--ease); }
.btn-gold:hover::before { transform: none; }
.btn-gold:hover { box-shadow: 0 10px 30px -10px rgba(212,175,55,.6); }
.btn-gold::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: sheen 4.5s ease-in-out infinite; }
@keyframes sheen { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.btn-glass { background: rgba(11,52,96,.65); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.15); color: #fff; }
.btn-glass:hover { border-color: var(--gold); color: var(--gold-hi); }
.btn-gold > span, .btn-glass > span { position: relative; }
@media (max-width: 639px) { #site-header .btn-gold { display: none; } }

/* ── Interactive icons ──
   Trigger on hover of the icon itself or of its nearest interactive parent. */
.lucide { transition: transform .45s var(--ease-spring), color .3s; }
a:hover .ico-nudge, button:hover .ico-nudge, .ico-nudge:hover { transform: translateX(4px); }
a:hover .ico-nudge-left, button:hover .ico-nudge-left { transform: translateX(-4px); }
a:hover .ico-spin, .ico-spin:hover { transform: rotate(180deg); }
a:hover .ico-swing, .ico-swing:hover { animation: swing .9s var(--ease) both; }
a:hover .ico-pop, .ico-pop:hover { animation: pop .5s var(--ease-spring) both; }
a:hover .ico-ring, .ico-ring:hover { animation: ring .8s ease-in-out both; }
a:hover .ico-bounce, .ico-bounce:hover, .hero-badge .ico-bounce { animation: bounce 1.2s var(--ease) infinite; }
.hero-badge .ico-bounce { animation-duration: 2.4s; }
@keyframes swing { 20% { transform: rotate(18deg); } 45% { transform: rotate(-12deg); } 70% { transform: rotate(6deg); } 100% { transform: rotate(0); } }
@keyframes pop { 40% { transform: scale(1.35) rotate(-8deg); } 100% { transform: scale(1); } }
@keyframes ring { 0%, 100% { transform: rotate(0); } 15%, 45% { transform: rotate(-16deg); } 30%, 60% { transform: rotate(16deg); } 75% { transform: rotate(-6deg); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } 60% { transform: translateY(1px); } }

/* Icon badge — circular, with a sweeping ring on hover */
.icon-badge { position: relative; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 999px; display: inline-grid; place-items: center; color: var(--gold); background: rgba(212,175,55,.08); border: 1px solid rgba(212,175,55,.25); transition: transform .5s var(--ease-spring), background .4s, color .4s; }
.icon-badge-lg { width: 3.5rem; height: 3.5rem; }
.icon-badge::after { content: ''; position: absolute; inset: -5px; border-radius: inherit; border: 1px solid transparent; border-top-color: currentColor; opacity: 0; transition: opacity .3s; }
.tone-ocean .icon-badge { color: var(--ocean-hi); background: rgba(0,200,255,.08); border-color: rgba(0,200,255,.25); }
*:hover > .icon-badge, .icon-badge:hover, .tilt-card:hover .icon-badge { transform: scale(1.08) rotate(-6deg); background: currentColor; }
*:hover > .icon-badge .lucide, .tilt-card:hover .icon-badge .lucide { color: var(--navy); transform: scale(1.1); }
*:hover > .icon-badge::after, .tilt-card:hover .icon-badge::after { opacity: 1; animation: orbit 1.2s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }

/* Line-draw icons when their container scrolls in */
.draw-icons .lucide * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.draw-icons.is-in .lucide * { animation: iconDraw 1.4s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes iconDraw { to { stroke-dashoffset: 0; } }

/* ── Hero ── */
.hero-bg { position: absolute; inset: -8% 0; background-size: cover; background-position: center; will-change: transform; transform: scale(1.12); }
.hero-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(4,30,58,.55) 0%, rgba(4,30,58,.2) 70%), linear-gradient(to bottom, rgba(4,30,58,.55) 0%, rgba(4,30,58,.25) 40%, rgba(4,30,58,.85) 88%, #041E3A 100%); }
#hero-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .6; }
.hero-waves { position: absolute; bottom: -1px; left: 0; width: 200%; height: 90px; }
.hero-waves path { fill: var(--navy); }
.hero-waves .w1 { opacity: .5; animation: waveX 14s linear infinite; }
.hero-waves .w2 { animation: waveX 9s linear infinite reverse; }
@keyframes waveX { to { transform: translateX(-50%); } }
.scroll-cue { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); z-index: 10; opacity: .7; transition: opacity .3s; }
.scroll-cue:hover { opacity: 1; }
.mouse { display: block; width: 22px; height: 36px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.6); position: relative; }
.mouse span { position: absolute; top: 7px; left: 50%; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--gold); animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }

/* ── Slider ── */
.slide-img { position: absolute; inset: 0; background-size: cover; background-position: center; clip-path: inset(0 0 0 100%); transform: scale(1.15); transition: clip-path 1.1s var(--ease), transform 6s linear; }
.slide-img.is-active { clip-path: inset(0 0 0 0); transform: scale(1.02); z-index: 1; }
.slide-img.is-leaving { clip-path: inset(0 0 0 0); z-index: 0; }
.slider.dir-back .slide-img:not(.is-active):not(.is-leaving) { clip-path: inset(0 100% 0 0); }
.slide-shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(4,30,58,.95), rgba(4,30,58,.25) 60%, transparent); }
.slide-copy { z-index: 3; }
.slide-btn { padding: .75rem; border-radius: 999px; color: #fff; background: rgba(11,52,96,.65); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.1); transition: color .3s, border-color .3s, transform .3s var(--ease-spring); }
.slide-btn:hover { color: var(--gold); border-color: var(--gold); transform: scale(1.08); }
.slide-btn:active { transform: scale(.94); }
.slide-dots { position: absolute; right: 2rem; bottom: 2rem; display: flex; gap: .5rem; }
.slide-dot { width: 36px; height: 14px; display: grid; align-items: center; }
.slide-dot span { display: block; height: 2px; background: rgba(255,255,255,.25); border-radius: 2px; overflow: hidden; position: relative; }
.slide-dot span::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; }
.slide-dot.is-active span::after { animation: dotFill var(--dur, 6s) linear forwards; }
.slider.is-paused .slide-dot.is-active span::after { animation-play-state: paused; }
.slide-dot.is-done span::after { transform: scaleX(1); }
@keyframes dotFill { to { transform: scaleX(1); } }
.slider:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* ── Location ── */
.feature-chip { display: flex; align-items: center; gap: .75rem; padding: .75rem; border-radius: 1rem; border: 1px solid rgba(255,255,255,.08); background: rgba(11,52,96,.4); font-size: .8rem; color: #cbd5e1; transition: border-color .3s, transform .4s var(--ease), background .3s; }
.feature-chip:hover { border-color: rgba(212,175,55,.4); transform: translateY(-3px); background: rgba(11,52,96,.7); }
.img-reveal { clip-path: inset(10% 10% 10% 10% round 24px); }
.parallax-img { will-change: transform; }

/* ── Marquee ── */
.marquee { overflow: hidden; border-top: 1px solid rgba(255,255,255,.06); padding: 1.4rem 0; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 3rem; width: max-content; animation: marquee 30s linear infinite; font-family: Cinzel, serif; font-size: clamp(1.5rem, 4vw, 3rem); font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
.marquee-track span { color: transparent; -webkit-text-stroke: 1px rgba(212,175,55,.45); transition: color .4s; }
.marquee-track span:hover { color: var(--gold); }
.marquee-track i { color: var(--ocean); font-style: normal; font-size: .5em; align-self: center; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Stats ── */
.stat-line { width: 0; height: 1px; margin: 0 auto; background: linear-gradient(90deg, transparent, var(--gold), transparent); transition: width 1.2s var(--ease); }
.stat.is-in .stat-line { width: 60%; }
.stat-word { display: inline-block; }

/* ── Tilt cards ── */
.tilt-card { position: relative; transform-style: preserve-3d; transition: border-color .4s, box-shadow .4s; will-change: transform; overflow: hidden; }
.tilt-card.tone-gold { border-color: rgba(212,175,55,.2); }
.tilt-card.tone-ocean { border-color: rgba(0,200,255,.2); }
.tilt-card.tone-gold:hover { border-color: var(--gold); box-shadow: 0 30px 60px -30px rgba(212,175,55,.35); }
.tilt-card.tone-ocean:hover { border-color: var(--ocean); box-shadow: 0 30px 60px -30px rgba(0,200,255,.35); }
.glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(600px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.09), transparent 40%); }
.tilt-card:hover .glare { opacity: 1; }
.num-badge { width: 3rem; height: 3rem; border-radius: 999px; display: grid; place-items: center; font-weight: 700; color: var(--gold); border: 1px solid rgba(212,175,55,.25); background: rgba(212,175,55,.05); }
.tone-ocean .num-badge { color: var(--ocean-hi); border-color: rgba(0,200,255,.25); background: rgba(0,200,255,.05); }
.link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; position: relative; }
.link-arrow::after { content: ''; position: absolute; left: 0; bottom: -4px; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.link-arrow:hover::after { transform: scaleX(1); transform-origin: left; }

/* ── News ── */
.news-card { position: relative; transition: transform .5s var(--ease), border-color .4s; }
.news-card img { transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.85); }
.news-card:hover { transform: translateY(-6px); border-color: rgba(212,175,55,.35); }
.news-card:hover img { transform: scale(1.08); filter: saturate(1.1); }
.news-arrow { position: absolute; top: 1.75rem; right: 1.75rem; width: 2.25rem; height: 2.25rem; border-radius: 999px; display: grid; place-items: center; background: var(--gold); color: var(--navy); transform: scale(0) rotate(-45deg); transition: transform .5s var(--ease-spring); }
.news-card:hover .news-arrow { transform: scale(1) rotate(0); }

/* ── Agent card: animated conic border ── */
.agent-card { position: relative; overflow: hidden; }
.agent-card::before { content: ''; position: absolute; inset: -150%; background: conic-gradient(from 0deg, transparent 0 70%, rgba(212,175,55,.6) 85%, transparent 100%); animation: orbit 6s linear infinite; z-index: -2; }
.agent-card::after { content: ''; position: absolute; inset: 1px; border-radius: inherit; background: #062A50; z-index: -1; }
.agent-card { isolation: isolate; }

/* ── Contact ── */
.contact-row { display: flex; align-items: center; gap: .9rem; padding: .35rem 0; width: fit-content; transition: color .3s, transform .4s var(--ease); }
a.contact-row:hover { color: #fff; transform: translateX(4px); }
.field { position: relative; }
.field input, .field textarea, .field select { width: 100%; background: var(--navy); border: 1px solid rgba(255,255,255,.1); border-radius: .75rem; padding: 1.35rem 2.75rem .55rem .9rem; font-size: .875rem; color: #fff; outline: none; transition: border-color .3s, box-shadow .3s; appearance: none; }
.field textarea { padding-right: .9rem; resize: vertical; }
.field label { position: absolute; left: .9rem; top: 1rem; font-size: .875rem; color: #94a3b8; pointer-events: none; transform-origin: 0 0; transition: transform .35s var(--ease), color .3s; }
.field input:focus ~ label, .field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label, .field textarea:not(:placeholder-shown) ~ label, .field label.is-fixed { transform: translateY(-.6rem) scale(.75); color: var(--gold); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(212,175,55,.1); }
.field-ico { position: absolute; right: .9rem; top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -.55rem; color: #64748b; pointer-events: none; transition: color .3s, transform .4s var(--ease-spring); }
.field:focus-within .field-ico { color: var(--gold); transform: scale(1.15) rotate(-8deg); }
.field.is-invalid input { border-color: #f87171; animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.submit-btn { position: relative; width: 100%; height: 3.1rem; border-radius: .75rem; background: var(--gold); color: var(--navy); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .18em; overflow: hidden; display: grid; place-items: center; transition: width .5s var(--ease), border-radius .5s var(--ease), background .3s, margin .5s var(--ease); }
.submit-btn:hover { background: var(--gold-hi); }
.submit-btn > * { grid-area: 1 / 1; }
.sb-spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(4,30,58,.25); border-top-color: var(--navy); opacity: 0; animation: orbit .7s linear infinite; }
.sb-check { width: 22px; height: 22px; fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; }
.submit-btn.is-loading, .submit-btn.is-done { width: 3.1rem; border-radius: 999px; margin-left: calc(50% - 1.55rem); }
.submit-btn.is-loading .sb-label, .submit-btn.is-done .sb-label { opacity: 0; }
.submit-btn.is-loading .sb-spinner { opacity: 1; }
.submit-btn.is-done .sb-check { animation: draw .6s var(--ease) .1s forwards; }
.form-msg { min-height: 1.25rem; font-size: .8rem; text-align: center; color: var(--gold-hi); }
.form-msg.is-error { color: #fca5a5; }

/* ── Footer ── */
.to-top { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); color: #fff; transition: transform .4s var(--ease-spring), border-color .3s, color .3s; }
.to-top:hover { transform: translateY(-4px); border-color: var(--gold); color: var(--gold); }

/* Initial hidden states (only when JS motion is active) */
.motion [data-reveal], .motion [data-stagger] > * { opacity: 0; transform: translateY(28px); }
.motion [data-split] .word-inner, .motion .hero-title .word-inner { transform: translateY(110%); }
.motion .hero-badge, .motion .hero-kicker, .motion .hero-body, .motion .hero-ctas { opacity: 0; transform: translateY(20px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .draw-icons .lucide * { stroke-dasharray: none; stroke-dashoffset: 0; }
  .img-reveal { clip-path: none; }
}

/* Header fit: component display rules must not override Tailwind's responsive hiding */
@media (min-width: 1024px) { .burger { display: none; } }
.nav-link, .logo span { white-space: nowrap; }

/* Real logos */
.brand-logo { height: 40px; width: auto; max-width: 190px; object-fit: contain; display: block; transition: transform .6s var(--ease-spring), opacity .3s; }
#site-header.is-scrolled .brand-logo { height: 34px; }
.logo:hover .brand-logo { transform: scale(1.04); }
.partner-logo { height: 7rem; margin: -.25rem -.25rem .5rem; border-radius: 1rem; display: grid; place-items: center; padding: 1.25rem 1.75rem;
  background: linear-gradient(160deg, #FBF8F0, #EFE7D2); box-shadow: inset 0 0 0 1px rgba(212,175,55,.35); transition: transform .6s var(--ease-spring), box-shadow .4s; }
.partner-logo img { max-height: 100%; max-width: 100%; object-fit: contain; filter: saturate(1.02); }
.tilt-card:hover .partner-logo { transform: translateZ(30px) scale(1.03); box-shadow: inset 0 0 0 1px var(--gold), 0 18px 40px -18px rgba(212,175,55,.5); }

/* ══ Projects ═════════════════════════════════════════ */
.status-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 999px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--gold-hi); background: rgba(4,30,58,.6); border: 1px solid rgba(212,175,55,.35); backdrop-filter: blur(10px); white-space: nowrap; }
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.status-pill.is-live { color: #bdf3ff; border-color: rgba(0,200,255,.45); }
.status-pill.is-live .dot { background: var(--ocean); box-shadow: 0 0 0 0 rgba(0,200,255,.6); animation: livePulse 1.8s ease-out infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(0,200,255,.6); } 100% { box-shadow: 0 0 0 10px rgba(0,200,255,0); } }

.project-card { display: flex; flex-direction: column; }
.project-card-media { position: relative; display: block; height: 320px; overflow: hidden; }
.project-card-media.is-compact { height: 240px; }
.project-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter .6s; filter: saturate(.9); }
.project-card:hover .project-card-media img { transform: scale(1.08); filter: saturate(1.1); }
.project-card-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4,30,58,.85), transparent 55%); }
.project-card-num { position: absolute; left: 1.25rem; bottom: .75rem; z-index: 1; font-size: 3.5rem; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(243,229,171,.75); transition: color .5s, transform .6s var(--ease-spring); }
.project-card:hover .project-card-num { color: var(--gold); transform: translateY(-4px); }
.project-card-status { position: absolute; top: 1rem; right: 1rem; z-index: 1; }

.project-switch { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(4,30,58,.55); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); }
.ps-indicator { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-lo)); transition: transform .5s var(--ease), width .5s var(--ease); }
.ps-item { position: relative; z-index: 1; padding: .45rem 1rem; font-size: .7rem; font-weight: 700; letter-spacing: .16em; color: #cbd5e1; border-radius: 999px; transition: color .3s; }
.ps-item:hover { color: #fff; }
.ps-item.is-current { color: var(--navy); }
.project-switch:hover .ps-item.is-current:not(:hover) { color: #cbd5e1; }
.project-logo-title .word { overflow: visible; }
.project-logo { height: clamp(110px, 18vw, 190px); width: auto; margin: 0 auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.45)); }
.project-hero.is-compact { min-height: 58vh; }
.mm-projects { display: flex; gap: .5rem; margin-top: .5rem; opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(200ms + var(--i) * 60ms); }
.menu-open .mm-projects { opacity: 1; transform: none; }
.mm-projects a { padding: .5rem 1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.15); font-size: .75rem; font-weight: 700; letter-spacing: .15em; }
.mm-projects a.is-current { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.footer-projects { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; }
.footer-projects a { color: #cbd5e1; transition: color .3s; }
.footer-projects a:hover { color: var(--gold); }

/* Gallery */
.gallery-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; }
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; } .gallery-item.is-lead { grid-column: span 2; grid-row: span 2; } }
.gallery-grid.count-1 .gallery-item { grid-column: 1 / -1; grid-row: span 2; }
.gallery-item { position: relative; overflow: hidden; border-radius: 1.25rem; border: 1px solid rgba(255,255,255,.08); background: var(--navy-2); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; }
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4,30,58,.75), transparent 50%); opacity: .7; transition: opacity .4s; }
.gallery-item:hover::after { opacity: 1; }
.gallery-cap { position: absolute; left: 1rem; right: 1rem; bottom: .9rem; z-index: 1; text-align: left; font-size: .8rem; color: #e2e8f0; transform: translateY(6px); opacity: .85; transition: transform .5s var(--ease), opacity .4s; }
.gallery-item:hover .gallery-cap { transform: none; opacity: 1; }
.gallery-item:focus-visible, .plan-drawing:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Floor plans */
.plan-filter { position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(4,30,58,.6); border: 1px solid rgba(255,255,255,.1); max-width: 100%; }
.pf-indicator { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: rgba(212,175,55,.16); border: 1px solid rgba(212,175,55,.5); transition: transform .5s var(--ease), width .5s var(--ease); }
.pf-btn { position: relative; z-index: 1; padding: .5rem 1rem; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .08em; color: #cbd5e1; transition: color .3s; }
.pf-btn sup { font-size: .6rem; color: #64748b; margin-left: 2px; }
.pf-btn.is-active { color: var(--gold-hi); }
@media (max-width: 1023px) { .pf-indicator { display: none; } .pf-btn.is-active { background: rgba(212,175,55,.16); } }
.plan-card { display: flex; flex-direction: column; transition: transform .5s var(--ease), border-color .4s; }
.plan-card:hover { transform: translateY(-5px); border-color: rgba(212,175,55,.35); }
.plan-drawing { position: relative; display: grid; place-items: center; height: 220px; width: 100%; background: #f4f1e8; color: #1e3a5f; overflow: hidden; }
.plan-drawing:not(.has-img) { background: linear-gradient(135deg, #0B3A6B, #0A3462); color: #7dd3fc; cursor: default; }
.plan-drawing img { width: 100%; height: 100%; object-fit: contain; padding: .75rem; transition: transform 1s var(--ease); }
.plan-card:hover .plan-drawing.has-img img { transform: scale(1.05); }
.plan-placeholder { width: 100%; height: 100%; }
.plan-lines path { stroke-dasharray: 600; stroke-dashoffset: 600; }
.plan-card:hover .plan-lines path, .is-in .plan-lines path { animation: draw 2.2s var(--ease) forwards; }
.plan-soon { position: absolute; bottom: .75rem; left: 50%; transform: translateX(-50%); font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #94a3b8; white-space: nowrap; }
.plan-zoom { position: absolute; top: .75rem; right: .75rem; width: 2.25rem; height: 2.25rem; border-radius: 999px; display: grid; place-items: center; background: var(--navy); color: var(--gold); transform: scale(.6); opacity: 0; transition: .4s var(--ease-spring); }
.plan-card:hover .plan-zoom { transform: scale(1); opacity: 1; }
.plan-cat { display: block; font-size: .65rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ocean-hi); margin-bottom: .2rem; }
.plan-num { font-size: 1.75rem; font-weight: 700; color: transparent; -webkit-text-stroke: 1px rgba(212,175,55,.5); line-height: 1; }
.plan-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .78rem; color: #cbd5e1; }
.plan-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.plan-meta .lucide { color: var(--gold); }
.plan-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.15); color: #e2e8f0; transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease-spring); }
.plan-btn:hover { border-color: var(--gold); color: var(--gold-hi); transform: translateY(-2px); }
.plan-btn-gold { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.plan-btn-gold:hover { background: var(--gold-hi); color: var(--navy); }
.plan-btn:hover .lucide { animation: pop .5s var(--ease-spring); }
.plan-card[hidden] { display: none !important; }

/* Amenities */
.amenity-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.amenity { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem; padding: 1.75rem 1.25rem; border-radius: 1.25rem; border: 1px solid rgba(255,255,255,.08); background: rgba(11,52,96,.45); transition: transform .5s var(--ease), border-color .4s; }
.amenity:hover { transform: translateY(-5px); border-color: rgba(212,175,55,.4); }
.amenity small { color: #94a3b8; font-size: .78rem; line-height: 1.5; }

/* Enquiry page */
.enquire-summary img { width: 100%; height: 180px; object-fit: cover; }
.field[hidden] { display: none !important; }
.field.flash select { animation: fieldFlash 1.2s var(--ease); }
@keyframes fieldFlash { 0% { box-shadow: 0 0 0 0 rgba(212,175,55,.7); border-color: var(--gold); } 100% { box-shadow: 0 0 0 12px rgba(212,175,55,0); } }
.field-project select { border-color: rgba(212,175,55,.35); }
#enquiry-form.has-project .field-project select { background: linear-gradient(90deg, rgba(212,175,55,.08), var(--navy)); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 95; background: rgba(4,30,58,.94); backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s; display: grid; padding: calc(env(safe-area-inset-top, 0px) + 4rem) 1rem calc(env(safe-area-inset-bottom, 0px) + 4.5rem); }
.lightbox.is-open { opacity: 1; }
.lb-stage { position: relative; display: grid; place-items: center; overflow: hidden; touch-action: none; cursor: zoom-in; }
.lightbox.is-zoomed .lb-stage { cursor: grab; }
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: .75rem; user-select: none; -webkit-user-drag: none; opacity: 0; transform-origin: center; }
.lb-img.is-in { animation: lbIn .5s var(--ease) forwards; }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lb-tools { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 1rem); right: calc(env(safe-area-inset-right, 0px) + 1rem); display: flex; gap: .4rem; }
.lb-btn, .lb-nav { width: 2.75rem; height: 2.75rem; border-radius: 999px; display: grid; place-items: center; color: #fff; background: rgba(11,52,96,.8); border: 1px solid rgba(255,255,255,.14); transition: color .3s, border-color .3s, transform .3s var(--ease-spring); }
.lb-btn:hover, .lb-nav:hover { color: var(--gold); border-color: var(--gold); transform: scale(1.08); }
.lb-btn .lucide, .lb-nav .lucide { width: 1.1rem; height: 1.1rem; }
.lb-nav { position: absolute; top: 50%; margin-top: -1.375rem; }
.lb-prev { left: calc(env(safe-area-inset-left, 0px) + 1rem); }
.lb-next { right: calc(env(safe-area-inset-right, 0px) + 1rem); }
.lightbox.is-single .lb-nav { display: none; }
.lb-bar { position: absolute; left: 1rem; right: 1rem; bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem); display: flex; justify-content: center; gap: 1rem; font-size: .8rem; color: #cbd5e1; }
.lb-count { color: var(--gold); font-weight: 700; letter-spacing: .15em; }
.lightbox[hidden] { display: none !important; }

/* Brand logo: header, loading screen, footer */
.brand-logo { height: 52px; max-width: 120px; }
#site-header.is-scrolled .brand-logo { height: 42px; }
.pl-logo { position: relative; display: block; width: min(280px, 60vw); overflow: hidden; }
.pl-logo img { width: 100%; height: auto; display: block; clip-path: inset(0 100% 0 0); animation: plReveal .9s var(--ease) forwards; }
.pl-sheen { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,246,214,.75) 50%, transparent 70%); transform: translateX(-120%); mix-blend-mode: overlay; animation: plSheen 1.1s ease-in-out .5s forwards; }
@keyframes plReveal { to { clip-path: inset(0 0 0 0); } }
@keyframes plSheen { to { transform: translateX(120%); } }
.pl-logo + .pl-name { font-size: .7rem; letter-spacing: .45em; color: var(--gold-hi); }
.footer-logo { display: inline-block; margin-bottom: .5rem; transition: transform .6s var(--ease-spring), filter .4s; }
.footer-logo img { height: 84px; width: auto; }
.footer-logo:hover { transform: scale(1.05); filter: drop-shadow(0 10px 25px rgba(212,175,55,.35)); }
@media (prefers-reduced-motion: reduce) { .pl-logo img { clip-path: none; } }

/* Home hero slider */
.hero-media { background: none; }
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.06); transition: opacity 1.6s var(--ease); }
.hero-slide.is-active { opacity: 1; z-index: 1; animation: heroZoom var(--hero-dur, 7s) linear forwards; }
.hero-slide.is-leaving { opacity: 0; z-index: 2; transform: scale(1.1); transition: opacity 1.6s var(--ease), transform 1.6s var(--ease); }
@keyframes heroZoom { from { transform: scale(1.06); } to { transform: scale(1.16); } }
.hero-pager { position: absolute; z-index: 10; left: max(1.5rem, env(safe-area-inset-left, 0px)); bottom: 4.5rem; display: flex; align-items: center; gap: 1rem; color: #e2e8f0; }
.hp-count { font-size: .9rem; letter-spacing: .1em; color: #94a3b8; }
.hp-count b { color: var(--gold-hi); font-weight: 700; }
.hp-bars { display: flex; gap: .4rem; }
.hp-bar { width: 44px; height: 18px; display: grid; align-items: center; }
.hp-bar span { display: block; height: 2px; border-radius: 2px; background: rgba(255,255,255,.3); position: relative; overflow: hidden; }
.hp-bar span::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; }
.hp-bar.is-active span::after { animation: dotFill var(--hero-dur, 7s) linear forwards; }
.hp-bar.is-done span::after { transform: scaleX(1); }
.hp-bar:hover span { background: rgba(255,255,255,.55); }
.hp-cap { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: #cbd5e1; }
.hp-cap.is-in { animation: fadeUp .7s var(--ease) both; }
@media (min-width: 768px) { .hero-pager { left: 3rem; } }
@media (max-width: 640px) { .hero-pager { left: 50%; transform: translateX(-50%); bottom: 7.5rem; } .hp-cap { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-slide.is-active { animation: none; transform: none; } }

/* ══ Marine palette refinements ══ */
:root { --navy: #041E3A; --navy-2: #0A3462; --marine: #0B4A86; --marine-hi: #1A6FB8; }
body { background: radial-gradient(1200px 600px at 85% -10%, rgba(26,111,184,.18), transparent 60%), #041E3A; }
.glass-panel { background: rgba(11,52,96,.5); border-color: rgba(125,190,255,.12); }
#site-header.is-scrolled { background: rgba(4,30,58,.88); }
#stats, #developers, #plans, #collection, #facts { background: linear-gradient(180deg, #06294D, #05264A); }
.eyebrow { color: var(--gold); }
.icon-badge { background: rgba(212,175,55,.1); }

/* ══ Yacht band ══ */
.yacht-band { position: relative; height: clamp(170px, 20vw, 240px); overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #041E3A 0%, #072C55 55%, #0A3A6E 100%); border-top: 1px solid rgba(125,190,255,.08); }
.yb-glow { position: absolute; left: 50%; top: 38%; width: 70%; height: 60%; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(243,229,171,.18), transparent 65%); pointer-events: none; }
.yb-skyline { position: absolute; left: 0; right: 0; bottom: 44%; width: 100%; height: 34%; fill: rgba(125,190,255,.1); }
.yb-water { position: absolute; left: 0; bottom: 0; width: 200%; height: 52%; will-change: transform; }
.yb-water-back { height: 58%; fill: #0B3E73; opacity: .85; animation: ybWave 26s linear infinite; }
.yb-water-mid { height: 48%; fill: #0A4580; animation: ybWave 18s linear infinite reverse; z-index: 2; }
.yb-water-front { height: 34%; fill: #0C5294; animation: ybWave 12s linear infinite; z-index: 4; opacity: .95; }
@keyframes ybWave { to { transform: translateX(-50%); } }

.yb-lane { position: absolute; left: 0; right: 0; pointer-events: none; }
.yb-lane-far { bottom: 40%; z-index: 1; }
.yb-lane-near { bottom: 26%; z-index: 3; }
.yb-sail { width: clamp(38px, 4.5vw, 60px); opacity: .55; animation: ybSail 95s linear infinite; animation-delay: -30s; }
.yb-sail svg { transform: scaleX(-1); }
.yb-yacht { width: clamp(190px, 22vw, 300px); animation: ybCruise 55s linear infinite; animation-delay: -18s; }
@keyframes ybCruise { from { transform: translateX(-110%); } to { transform: translateX(calc(100vw + 10%)); } }
@keyframes ybSail { from { transform: translateX(calc(100vw + 20px)); } to { transform: translateX(-120%); } }
.yb-bob { transform-box: fill-box; transform-origin: 50% 85%; animation: ybBob 4.5s ease-in-out infinite; }
.yb-sail .yb-bob { animation-duration: 6s; }
@keyframes ybBob { 0%, 100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(-2px) rotate(-.9deg); } 65% { transform: translateY(1.5px) rotate(.6deg); } }

.yb-hull { fill: #F3F6FA; }
.yb-deck { fill: #E3EAF2; }
.yb-deck-top { fill: #F6F8FB; }
.yb-glass { fill: #0B2D52; }
.yb-stripe { stroke: #D4AF37; stroke-width: 2.2; fill: none; }
.yb-mast { stroke: #CBD5E1; stroke-width: 1.6; stroke-linecap: round; }
.yb-radar { fill: #F6F8FB; stroke: #CBD5E1; stroke-width: 1; }
.yb-flag { fill: #D4AF37; animation: ybFlag 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 0 50%; }
@keyframes ybFlag { 50% { transform: scaleX(.8) skewY(4deg); } }
.yb-sail-main { fill: rgba(243,246,250,.9); }
.yb-sail-jib { fill: rgba(243,246,250,.65); }
.yb-wake { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 14 10; animation: ybWake 1.6s linear infinite; }
.yb-wake-2 { stroke: rgba(255,255,255,.3); stroke-width: 1.5; animation-duration: 2.3s; }
@keyframes ybWake { to { stroke-dashoffset: 48; } }

.yb-sparkles { position: absolute; inset: 55% 0 0; z-index: 5; pointer-events: none; opacity: .55;
  background-image: radial-gradient(1.5px 1.5px at 12% 30%, #F3E5AB, transparent), radial-gradient(1px 1px at 28% 60%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 47% 40%, #F3E5AB, transparent), radial-gradient(1px 1px at 63% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 81% 35%, #F3E5AB, transparent), radial-gradient(1px 1px at 92% 65%, #fff, transparent);
  animation: ybSparkle 3.5s ease-in-out infinite alternate; }
@keyframes ybSparkle { from { opacity: .2; } to { opacity: .7; } }

@media (prefers-reduced-motion: reduce) {
  .yb-yacht { animation: none; transform: translateX(30vw); }
  .yb-sail { animation: none; transform: translateX(70vw); }
  .yb-water, .yb-bob, .yb-wake, .yb-flag, .yb-sparkles { animation: none; }
}

/* ══ Consortium ══ */
.partner-label { display: flex; align-items: center; gap: 1rem; font-size: .72rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-hi); }
.partner-label::before, .partner-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,175,55,.45), transparent); }

.dev-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: stretch; }
@media (min-width: 768px) { .dev-grid { grid-template-columns: 1fr auto 1fr; } }
.dev-join { display: grid; place-items: center; font-size: 3rem; color: rgba(212,175,55,.6); line-height: 1; }
.dev-card { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding: 2.5rem 2rem 2rem; }
.dev-logo { height: 6.5rem; width: 100%; display: grid; place-items: center; padding: 1.25rem 2rem; border-radius: 1.25rem;
  background: radial-gradient(ellipse at 50% 0%, rgba(212,175,55,.14), transparent 70%), rgba(4,30,58,.6); box-shadow: inset 0 0 0 1px rgba(212,175,55,.3);
  transition: transform .6s var(--ease-spring), box-shadow .4s; }
.dev-logo img { max-height: 100%; max-width: min(100%, 260px); object-fit: contain; }
.dev-card:hover .dev-logo { transform: translateZ(30px) scale(1.04); box-shadow: inset 0 0 0 1px var(--gold), 0 20px 40px -20px rgba(212,175,55,.5); }

.design-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .design-grid { grid-template-columns: 1.7fr 1fr; grid-template-rows: 1fr 1fr; } .design-card.is-lead { grid-row: span 2; } .design-grid.is-solo { grid-template-columns: 1fr; grid-template-rows: auto; } }
.design-card { position: relative; overflow: hidden; border-radius: 1.5rem; min-height: 260px; display: flex; align-items: flex-end; border: 1px solid rgba(125,190,255,.14); isolation: isolate; }
.design-card.is-lead { min-height: 460px; border-color: rgba(212,175,55,.45); }
@media (min-width: 1024px) { .design-card.is-lead { min-height: 560px; } }
.dc-media { position: absolute; inset: 0; z-index: -2; }
.dc-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.6s var(--ease), filter .6s; filter: saturate(.95); }
.design-card:hover .dc-media img { transform: scale(1.09); filter: saturate(1.1); }
.design-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(4,30,58,.96) 0%, rgba(4,30,58,.55) 45%, rgba(4,30,58,.05) 75%); transition: opacity .5s; }
.dc-body { position: relative; padding: 1.75rem; display: grid; gap: .5rem; transform: translateY(6px); transition: transform .6s var(--ease); }
.design-card.is-lead .dc-body { padding: 2.25rem 2.5rem; gap: .9rem; }
.design-card:hover .dc-body { transform: none; }
.dc-role { font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ocean-hi); }
.dc-role i { font-style: normal; color: rgba(255,255,255,.4); }
.dc-credit { display: inline-flex; align-items: center; gap: .45rem; font-size: .75rem; color: var(--gold-hi); letter-spacing: .05em; }
.dc-badge { position: absolute; top: 1.25rem; left: 1.25rem; padding: .45rem .9rem; border-radius: 999px; font-size: .65rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--navy); background: linear-gradient(90deg, var(--gold-hi), var(--gold)); box-shadow: 0 8px 24px -8px rgba(212,175,55,.6); }
.design-card.is-lead::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(243,229,171,.15), inset 0 -120px 120px -100px rgba(212,175,55,.25); }