/* OZ Maritime — Yachting Division · public site */
:root{
  --ink:#0B1D2C;          /* deep sea navy */
  --ink-2:#122A3D;
  --paper:#F6F8F9;        /* regatta white (cool) */
  --sea:#DCE8EC;          /* sea glass */
  --steel:#5F8396;
  --steel-2:#8AA6B4;
  --signal:#C8102E;       /* brand signal red */
  --line:rgba(11,29,44,.14);
  --line-inv:rgba(246,248,249,.16);
  --d-font:"Archivo",sans-serif;
  --b-font:"IBM Plex Sans",sans-serif;
  --m-font:"IBM Plex Mono",monospace;
  --max:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} }
body{font-family:var(--b-font);color:var(--ink);background:var(--paper);line-height:1.6;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px;border-radius:2px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(11,29,44,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-inv)}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;gap:28px}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;margin-right:auto}
.nav-logo img{height:38px;width:auto}
.nav-logo strong{font-family:var(--d-font);font-weight:800;font-size:.95rem;letter-spacing:.14em}
.nav-logo span{display:block;font-family:var(--m-font);font-size:.6rem;letter-spacing:.28em;color:var(--steel-2)}
.nav a.link{color:#D8E4EA;text-decoration:none;font-size:.9rem;letter-spacing:.02em;padding:6px 2px;border-bottom:2px solid transparent}
.nav a.link:hover{color:#fff}
.nav a.link.active{color:#fff;border-bottom-color:var(--signal)}
.btn{display:inline-block;font-family:var(--d-font);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;text-decoration:none;padding:13px 22px;border-radius:4px;border:1px solid transparent;cursor:pointer;transition:transform .15s ease, background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-signal{background:var(--signal);color:#fff}
.btn-signal:hover{background:#A80D26}
.btn-ghost{border-color:var(--line-inv);color:#fff;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--ink-2)}
.nav-burger{display:none}

/* ---------- hero / chart ---------- */
.hero{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.chart{position:absolute;inset:0;opacity:.5;pointer-events:none}
.hero-in{position:relative;max-width:var(--max);margin:0 auto;padding:110px 24px 90px}
.eyebrow{font-family:var(--m-font);font-size:.72rem;letter-spacing:.3em;color:var(--steel-2);text-transform:uppercase;margin-bottom:22px}
.hero h1{font-family:var(--d-font);font-weight:900;font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;max-width:13ch}
.hero h1 em{font-style:normal;color:var(--signal)}
.hero p.lede{margin:26px 0 38px;font-size:1.08rem;color:#C8D6DE;max-width:52ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.coords{margin-top:64px;display:flex;gap:34px;flex-wrap:wrap;font-family:var(--m-font);font-size:.72rem;letter-spacing:.12em;color:var(--steel-2)}
.coords b{color:#fff;font-weight:500}

/* ---------- sections ---------- */
section.block{padding:88px 0}
section.block.tint{background:var(--sea)}
section.block.dark{background:var(--ink);color:#fff}
.block-head{max-width:640px;margin-bottom:52px}
.block-head h2{font-family:var(--d-font);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.4rem);text-transform:uppercase;letter-spacing:.01em;line-height:1.08}
.block-head p{margin-top:14px;color:#41576a}
.dark .block-head p{color:#B9CAD4}

/* ---------- inspection-tag cards (signature) ---------- */
.tags{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:18px}
.tag-card{background:#fff;border:1px solid var(--line);border-radius:6px 22px 6px 6px;padding:22px 20px 20px;position:relative;transition:transform .18s ease, box-shadow .18s ease}
.tag-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(11,29,44,.10)}
.tag-card::before{ /* punch hole */
  content:"";position:absolute;top:12px;right:12px;width:12px;height:12px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line);
}
.tag-code{font-family:var(--m-font);font-size:.66rem;letter-spacing:.22em;color:var(--signal);margin-bottom:10px}
.tag-card h3{font-family:var(--d-font);font-weight:700;font-size:1.02rem;letter-spacing:.02em;text-transform:uppercase;margin-bottom:8px}
.tag-card p{font-size:.9rem;color:#41576a;line-height:1.55}
.dark .tag-card{background:var(--ink-2);border-color:var(--line-inv)}
.dark .tag-card::before{background:var(--ink);border-color:var(--line-inv)}
.dark .tag-card p{color:#B9CAD4}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split .pane h2{font-family:var(--d-font);font-weight:800;font-size:clamp(1.5rem,2.8vw,2rem);text-transform:uppercase;line-height:1.1;margin-bottom:16px}
.split .pane p{color:#41576a;margin-bottom:14px}
.dark .split .pane p{color:#B9CAD4}
.checklist{list-style:none;margin-top:8px}
.checklist li{padding:9px 0 9px 30px;position:relative;font-size:.95rem}
.checklist li::before{content:"";position:absolute;left:0;top:14px;width:16px;height:16px;border-radius:3px;background:var(--signal);
  clip-path:polygon(14% 44%, 0 60%, 40% 100%, 100% 16%, 84% 2%, 40% 70%);}

/* verify chip */
.verify-chip{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px;display:flex;gap:22px;align-items:center}
.verify-chip .qr{width:96px;height:96px;flex:none;background:
  conic-gradient(var(--ink) 25%, transparent 0 50%, var(--ink) 0 75%, transparent 0) 0 0/16px 16px;border:6px solid var(--ink);border-radius:6px}
.verify-chip strong{font-family:var(--d-font);text-transform:uppercase;letter-spacing:.04em}
.verify-chip p{font-size:.88rem;color:#41576a;margin-top:6px}

/* ports strip */
.ports{display:flex;flex-wrap:wrap;gap:14px}
.port{font-family:var(--m-font);font-size:.78rem;letter-spacing:.14em;border:1px solid var(--line-inv);border-radius:999px;padding:10px 18px;color:#D8E4EA}
.port b{color:#fff;font-weight:500}

/* ---------- page hero (inner pages) ---------- */
.page-hero{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.page-hero .hero-in{padding:84px 24px 64px}
.page-hero h1{font-family:var(--d-font);font-weight:900;font-size:clamp(2rem,4.6vw,3.2rem);text-transform:uppercase;line-height:1.04}
.page-hero p{margin-top:16px;color:#C8D6DE;max-width:56ch}

/* service groups */
.svc-group{margin-bottom:64px}
.svc-group h2{font-family:var(--d-font);font-weight:800;font-size:1.35rem;text-transform:uppercase;letter-spacing:.02em;display:flex;align-items:center;gap:14px;margin-bottom:22px}
.svc-group h2 .rule{flex:1;height:1px;background:var(--line)}
.svc-group h2 .code{font-family:var(--m-font);font-size:.68rem;letter-spacing:.24em;color:var(--signal);font-weight:400}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;counter-reset:step}
.step{background:#fff;border:1px solid var(--line);border-radius:8px;padding:24px 22px}
.step .n{font-family:var(--m-font);font-size:.7rem;letter-spacing:.2em;color:var(--signal);display:block;margin-bottom:10px}
.step h3{font-family:var(--d-font);font-size:1rem;text-transform:uppercase;margin-bottom:8px}
.step p{font-size:.88rem;color:#41576a}

/* contact */
.offices{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.office{background:#fff;border:1px solid var(--line);border-radius:10px;padding:28px}
.office h3{font-family:var(--d-font);text-transform:uppercase;font-size:1rem;letter-spacing:.03em;margin-bottom:12px}
.office p{font-size:.92rem;color:#41576a;line-height:1.7}
.office a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--signal)}
.office .lbl{font-family:var(--m-font);font-size:.64rem;letter-spacing:.24em;color:var(--signal);display:block;margin-bottom:6px;text-transform:uppercase}

/* cta band */
.cta-band{background:var(--signal);color:#fff}
.cta-band .in{max-width:var(--max);margin:0 auto;padding:56px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-band h2{font-family:var(--d-font);font-weight:900;text-transform:uppercase;font-size:clamp(1.4rem,3vw,2rem)}
.cta-band .btn{background:#fff;color:var(--signal)}
.cta-band .btn:hover{background:var(--ink);color:#fff}

/* footer */
footer{background:var(--ink);color:#9FB4C0;font-size:.85rem}
.foot-in{max-width:var(--max);margin:0 auto;padding:56px 24px 40px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
footer h4{font-family:var(--d-font);color:#fff;text-transform:uppercase;font-size:.8rem;letter-spacing:.1em;margin-bottom:14px}
footer a{color:#D8E4EA;text-decoration:none;display:block;padding:4px 0}
footer a:hover{color:#fff}
.foot-bottom{border-top:1px solid var(--line-inv)}
.foot-bottom .in{max-width:var(--max);margin:0 auto;padding:18px 24px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--m-font);font-size:.68rem;letter-spacing:.14em;color:var(--steel)}

/* responsive */
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav-in{gap:16px}
  .nav a.link{display:none}
  .nav-burger{display:block;margin-left:auto}
  .nav .btn{padding:10px 14px;font-size:.7rem}
  .hero-in{padding:80px 20px 64px}
  .coords{gap:18px}
  .foot-in{grid-template-columns:1fr}
}

/* ---------- hero grid + interactive liferaft ---------- */
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.raft-stage{cursor:pointer;user-select:none;position:relative;outline-offset:6px}
.raft-hint{font-family:var(--m-font);font-size:.64rem;letter-spacing:.24em;color:var(--steel-2);text-align:center;margin-top:6px;animation:hintPulse 2.4s ease-in-out infinite}
@keyframes hintPulse{0%,100%{opacity:.55}50%{opacity:1}}
.raft-open{opacity:0;transform:scale(.1);transform-origin:170px 226px;transition:none}
.raft-canister{transform-origin:170px 220px;transition:transform .35s ease, opacity .3s ease}
.raft-stage.inflated .raft-canister{opacity:0;transform:scale(.55) translateY(26px)}
.raft-stage.inflated .raft-open{opacity:1;transform:scale(1);transition:transform .9s cubic-bezier(.2,1.6,.35,1), opacity .25s ease .1s}
.raft-stage.inflated .raft-sea{animation:seaBob 1.2s ease}
@keyframes seaBob{0%{transform:translateY(0)}30%{transform:translateY(5px)}60%{transform:translateY(-3px)}100%{transform:translateY(0)}}
.raft-stage:not(.inflated) .raft-canister{animation:canBob 3s ease-in-out infinite}
@keyframes canBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr} .raft-stage{max-width:340px;margin:10px auto 0} }

/* ---------- class logos + stats ---------- */
.class-logos{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between;padding:26px 28px;background:#fff;border:1px solid var(--line);border-radius:12px}
.class-logos img{height:44px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.75;transition:all .2s ease}
.class-logos img:hover{filter:none;opacity:1}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:22px}
.stat{background:var(--ink);color:#fff;border-radius:12px;padding:26px 24px}
.stat b{font-family:var(--d-font);font-weight:900;font-size:2.1rem;display:block;color:#fff}
.stat span{font-family:var(--m-font);font-size:.64rem;letter-spacing:.16em;color:var(--steel-2);line-height:1.7}
@media (max-width:720px){ .class-logos{justify-content:center} .class-logos img{height:34px} }