:root{
    --paper:#F1EEE6;
    --panel:#E7E2D4;
    --deep:#1f448c;
    --deep2:#0d2b66;
    --ink:#12222D;
    --steel:#4C6473;
    --steel-light:#8A9CA7;
    --line:#C9C2B2;
    --accent:#ED7D1E;
    --accent-dim:#C7650D;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:'Archivo',sans-serif;font-size:16px;line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  .display{font-family:'Big Shoulders Display',sans-serif;font-weight:800;letter-spacing:.01em;}
  h1,h2{font-family:'Big Shoulders Display',sans-serif;font-weight:800;margin:0;text-transform:uppercase;}
  a{color:inherit;}
  img,svg{display:block;max-width:100%;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
  button{font-family:inherit;}

  @keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
  @keyframes driftSlow{0%{transform:translateX(0);}50%{transform:translateX(8px);}100%{transform:translateX(0);}}
  @keyframes bobSlow{0%{transform:translateY(0);}50%{transform:translateY(-5px);}100%{transform:translateY(0);}}
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.16,.84,.44,1),transform .6s cubic-bezier(.16,.84,.44,1);}
  .reveal.in-view{opacity:1;transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1 !important;transform:none !important;transition:none !important;}
    .drift,.bob{animation:none !important;}
  }

  /* ---------------- header ---------------- */
  header{position:sticky;top:0;z-index:60;background:rgba(241,238,230,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);}
  .topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;max-width:1180px;margin:0 auto;}
  .brandmark{display:flex;align-items:center;gap:12px;}
  .brandmark .badge{
    width:36px;height:36px;background:var(--deep);color:var(--accent);
    display:flex;align-items:center;justify-content:center;font-family:'Big Shoulders Display';
    font-weight:800;font-size:13px;flex-shrink:0;
  }
  .brandmark .name{font-size:13px;line-height:1.25;font-family:'Archivo';}
  .brandmark .name b{display:block;font-weight:700;}
  .brandmark .name span{color:var(--steel);font-size:11.5px;}
  .nav-links{display:flex;align-items:center;gap:32px;}
  nav{display:flex;gap:6px;font-size:13px;font-weight:600;}
  nav a{
    text-decoration:none;color:var(--steel);padding:7px 12px;position:relative;
    transition:color .2s ease;
  }
  nav a.active{color:var(--ink);}
  nav a.active::after{content:"";position:absolute;left:12px;right:12px;bottom:1px;height:2px;background:var(--accent);}
  nav a:hover{color:var(--ink);}
  .cta-small{
    border:1.5px solid var(--deep);padding:9px 18px;font-size:13px;font-weight:700;text-decoration:none;
    color:var(--deep);white-space:nowrap;transition:background .2s ease,color .2s ease,transform .2s ease;
  }
  .cta-small:hover{background:var(--deep);color:#fff;transform:translateY(-2px);}

  /* ---------------- hero ---------------- */
  .hero{position:relative;background: #fff;overflow:hidden;}
  .hero-inner{display:grid;grid-template-columns:1fr 1.05fr;gap:0;align-items:stretch;min-height:640px;}
  .hero-copy{padding:72px 0 60px;display:flex;flex-direction:column;justify-content:center;}
  .hero-copy .eyebrow{font-size:13px;color:var(--accent-dim);font-weight:700;margin-bottom:18px;}
  .hero-copy h1{font-size:clamp(40px,5.6vw,70px);line-height:.92;}
  .hero-copy h1 .line2{color:var(--deep);}
  .hero-copy p{margin-top:26px;font-size:18px;color:var(--steel);max-width:42ch;line-height:1.6;}
  .hero-ctas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}
  .btn-primary{
    background:var(--accent);color:#fff;border:1.5px solid var(--accent);padding:14px 26px;
    font-weight:700;font-size:14.5px;text-decoration:none;display:inline-block;
    transition:background .22s ease,transform .22s ease,box-shadow .22s ease;
  }
  .btn-primary:hover{background:var(--accent-dim);border-color:var(--accent-dim);transform:translateY(-2px);box-shadow:0 10px 20px rgba(199,101,13,.3);}
  .btn-ghost{
    border:1.5px solid var(--deep);color:var(--deep);padding:14px 26px;font-weight:700;font-size:14.5px;
    text-decoration:none;display:inline-block;transition:background .22s ease,color .22s ease,transform .22s ease;
  }
  .btn-ghost:hover{background:var(--deep);color:#fff;transform:translateY(-2px);}

  /* angled navy panel with ship art + draft-mark scale */
  .hero-panel{
    position:relative;
  }
  .hero-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:40px 20px 40px 90px;}
  .hero-art svg{width:100%;height:100%;}
  .hero-art .drift{animation:driftSlow 7s ease-in-out infinite;}
  .hero-art .bob{animation:bobSlow 6s ease-in-out infinite;}
  .hero-panel:hover .drift{animation-duration:3.2s;}
  .hero-panel:hover .bob{animation-duration:2.8s;}

  .draft-scale{
    position:absolute;left:0;top:0;bottom:0;width:78px;
    display:flex;flex-direction:column;justify-content:space-between;
    padding:56px 0;
  }
  .draft-scale .rule{position:absolute;left:39px;top:56px;bottom:56px;width:1px;background:rgba(241,238,230,.28);}
  .draft-mark{position:relative;display:flex;align-items:center;gap:10px;padding-left:24px;}
  .draft-mark::before{content:"";width:16px;height:1.5px;background:var(--accent);}
  .draft-mark .val{
    font-family:'Big Shoulders Display';font-weight:800;color:#fff;font-size:19px;line-height:1;
    writing-mode:vertical-rl;transform:rotate(180deg);
  }

  /* ---------------- market / manifest ---------------- */
  section{padding:96px 0;}
  .market-head{display:flex;align-items:baseline;gap:20px;margin-bottom:12px;flex-wrap:wrap;}
  .market-head h2{font-size:clamp(30px,3.6vw,46px);color:var(--deep);}
  .market-lede{color:var(--steel);font-size:14px;max-width:36ch;}

  .manifest{display:grid;grid-template-columns:.62fr 1fr;gap:64px;margin-top:56px;align-items:start;}
  .manifest-figure{position:sticky;top:110px;}
  .manifest-figure .big-num{font-size:clamp(52px,6vw,84px);color:var(--deep);line-height:.9;}
  .manifest-figure .big-num .u{color:var(--accent);}
  .manifest-figure p{color:var(--steel);font-size:15px;margin-top:18px;line-height:1.6;max-width:32ch;}

  .manifest-rows{border-top:1px solid var(--line);}
  .manifest-row{
    display:grid;grid-template-columns:64px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);
    transition:background .25s ease,padding-left .25s cubic-bezier(.16,.84,.44,1);
  }
  .manifest-row:hover{background:rgba(237,125,30,.06);padding-left:10px;}
  .manifest-row .tag{font-family:'Big Shoulders Display';font-weight:800;font-size:13px;color:var(--steel-light);padding-top:3px;transition:color .25s ease;}
  .manifest-row:hover .tag{color:var(--accent);}
  .manifest-row h3{font-family:'Archivo';font-weight:700;font-size:16px;margin:0 0 6px;text-transform:none;}
  .manifest-row p{margin:0;color:var(--steel);font-size:14.5px;line-height:1.55;}

  /* ---------------- why attend: instrument panel ---------------- */
  .panel-section{background:var(--deep);color:var(--paper);}
  .panel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:8px;flex-wrap:wrap;}
  .panel-head h2{color:#fff;font-size:clamp(28px,3.4vw,42px);}
  .panel-head p{color:#9FB4C2;font-size:14px;max-width:34ch;}
  .gauges{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(241,238,230,.18);margin-top:48px;}
  .gauge{
    padding:32px 24px;border-right:1px solid rgba(241,238,230,.1);
    transition:background .28s ease;position:relative;
  }
  .gauge:last-child{border-right:none;}
  .gauge:hover{background:rgba(13,43,102,0.9);}
  .gauge .icon{width:30px;height:30px;margin-bottom:22px;}
  .gauge .icon svg{width:100%;height:100%;}
  .gauge .icon path,.gauge .icon circle,.gauge .icon line{
    stroke:var(--accent);transition:stroke .28s ease;
  }
  .gauge h4{font-family:'Archivo';font-weight:700;font-size:15.5px;margin:0 0 8px;color:#fff;}
  .gauge p{margin:0;font-size:13px;color:#9FB4C2;line-height:1.55;}

  /* ---------------- roles: tabbed manifest ---------------- */
  .roles-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:36px;}
  .roles-head h2{font-size:clamp(28px,3.4vw,42px);color:var(--deep);}
  .roles-head p{color:var(--steel);font-size:14px;max-width:34ch;}

  .tab-switch{display:inline-flex;border:1.5px solid var(--deep);margin-bottom:0;}
  .tab-switch button{
    background:none;border:none;padding:12px 26px;font-size:14px;font-weight:700;color:var(--deep);
    cursor:pointer;transition:background .22s ease,color .22s ease;
  }
  .tab-switch button + button{border-left:1.5px solid var(--deep);}
  .tab-switch button.active{background:var(--deep);color:#fff;}
  .tab-switch button:not(.active):hover{background:rgba(10,44,64,.08);}

  .tab-panels{margin-top:0;border-top:1px solid var(--line);}
  .tab-panel{display:none;}
  .tab-panel.active{display:block;}
  .tab-row{
    display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:18px;
    padding:22px 0;border-bottom:1px solid var(--line);
    transition:background .25s ease,padding-left .25s cubic-bezier(.16,.84,.44,1);
  }
  .tab-row:hover{background:rgba(237,125,30,0.4); color: #12222D; padding-left:8px;}
  .tab-row .letter{
    width:36px;height:36px;border:1.5px solid var(--deep);color:var(--deep);
    display:flex;align-items:center;justify-content:center;font-family:'Big Shoulders Display';
    font-weight:800;font-size:15px;transition:background .25s ease,color .25s ease;
  }
  .tab-row:hover .letter{background:var(--accent);border-color:var(--accent);color:#fff;}
  .tab-row .txt b{display:block;font-size:15.5px;font-weight:700;}
  .tab-row .txt span{display:block;font-size:12.5px;color:var(--steel-light);margin-top:3px;}
  .tab-row .txt span:hover{ color: #fff;}
  .tab-row .chip{
    font-size:11px;color:var(--steel-light);border:1px solid var(--line);padding:5px 10px;
    white-space:nowrap;
  }

  /* ---------------- CTA ---------------- */
  .cta-band{position:relative;background:var(--deep2);color:var(--paper);overflow:hidden;}
  .cta-band .compass{position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:420px;height:420px;opacity:.14;}
  .cta-inner{position:relative;z-index:2;padding:88px 0;max-width:560px;}
  .cta-inner h2{color:#fff;font-size:clamp(28px,3.8vw,46px);line-height:.98;}
  .cta-inner p{color:#9FB4C2;margin-top:18px;font-size:16px;line-height:1.6;}
  .cta-actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
  .btn-outline{
    border:1.5px solid rgba(241,238,230,.4);color:#fff;padding:14px 26px;
    font-weight:700;font-size:14.5px;text-decoration:none;display:inline-block;
    transition:border-color .22s ease,background .22s ease,transform .22s ease;
  }
  .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px);}

  footer{padding:32px 0;font-size:12.5px;color:var(--steel);}
  .footer-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}

  /* ---------------- responsive ---------------- */
  @media(max-width:960px){
    nav{display:none;}
    .hero-inner{grid-template-columns:1fr;min-height:auto;}
    .hero-panel{clip-path:none;min-height:360px;}
    .draft-scale{position:static;flex-direction:row;padding:20px 24px;overflow-x:auto;}
    .draft-scale .rule{display:none;}
    .draft-mark{padding-left:0;flex-direction:column;align-items:flex-start;gap:6px;}
    .draft-mark::before{width:1.5px;height:14px;}
    .draft-mark .val{writing-mode:horizontal-tb;transform:none;font-size:16px;}
    .hero-art{position:static;padding:24px;}
    .manifest{grid-template-columns:1fr;gap:32px;}
    .manifest-figure{position:static;}
    .gauges{grid-template-columns:1fr 1fr;}
    .gauge{border-bottom:1px solid rgba(241,238,230,.18);}
    .cta-band .compass{display:none;}
  }
  @media(max-width:560px){
    .wrap{padding:0 20px;}
    .gauges{grid-template-columns:1fr;}
    .tab-row{grid-template-columns:36px 1fr;}
    .tab-row .chip{display:none;}
  }

  .prowner {
    background: url(../images/warship-bg.jpg); width: 100%; padding: 2rem 0;
}