:root{
  --ink:#0A1D3F; --steel:#3D5266; --mist:#E6EBEF; --paper:#F7F9FA; --line:#CBD4DB;
  --signal:#E3A21A; --text:#1B2733; --muted:#56687A; --white:#fff;
  --wide:"Archivo",system-ui,sans-serif;
  --max:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--wide);font-variation-settings:"wdth" 100;color:var(--text);background:var(--paper);font-size:17px;line-height:1.6}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
@media (max-width:600px){.wrap{padding:0 16px}}

/* header */
.site-header{background:var(--ink);color:var(--white);position:relative;z-index:5}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{text-decoration:none;font-weight:800;font-size:20px;letter-spacing:.01em;font-variation-settings:"wdth" 125;display:flex;align-items:center;gap:12px}
.brand-mark{width:44px;height:44px;border-radius:2px}
.nav{display:flex;gap:28px;list-style:none}
.nav a{text-decoration:none;font-size:15px;font-weight:500;opacity:.85;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{opacity:1}
.nav a[aria-current="page"]{opacity:1;border-bottom-color:var(--signal)}
.nav .nav-cta{background:var(--signal);color:var(--ink);opacity:1;padding:9px 16px;border-radius:2px;font-weight:700;border:0}
.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.35);color:#fff;font:inherit;font-size:15px;padding:7px 14px;border-radius:2px;cursor:pointer}
@media (max-width:900px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:76px;left:0;right:0;background:var(--ink);flex-direction:column;gap:0;padding:8px 16px 20px;border-top:1px solid rgba(255,255,255,.12)}
  .nav.open{display:flex}
  .nav a{display:block;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav .nav-cta{margin-top:14px;text-align:center}
}

/* hero */
.hero{background:var(--ink);color:var(--white);position:relative;overflow:hidden}
.contours{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#5878A8;stroke-width:1;opacity:.35}
.hero .wrap{position:relative;padding-top:112px;padding-bottom:84px}
.hero h1{font-variation-settings:"wdth" 125;font-weight:800;font-size:clamp(40px,7vw,86px);line-height:1;letter-spacing:-.01em;max-width:14ch}
.hero p.lead{margin-top:28px;font-size:clamp(18px,2vw,21px);max-width:44ch;color:#D3DCE4}
.hero .actions{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:16px;padding:14px 22px;border-radius:2px}
.btn-signal{background:var(--signal);color:var(--ink)}
.btn-signal:hover{background:#F0B53A}
.btn-ghost{border:1px solid rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{border-color:#fff}
.btn-dark{background:var(--ink);color:#fff}
.hero-strip{position:relative;border-top:1px solid rgba(255,255,255,.14)}
.hero-strip ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 36px;padding:22px 0;font-size:15px;color:#B9C6D2}
.hero-strip li strong{color:#fff;font-weight:600}

.page-hero{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.page-hero .wrap{position:relative;padding-top:80px;padding-bottom:72px}
.page-hero h1{font-variation-settings:"wdth" 125;font-weight:800;font-size:clamp(36px,5.5vw,62px);line-height:1.02}
.page-hero p{margin-top:20px;max-width:56ch;font-size:19px;color:#D3DCE4}

/* sections */
section{padding:96px 0}
@media (max-width:600px){section{padding:64px 0}.hero .wrap{padding-top:72px;padding-bottom:72px}}
.alt{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2{font-variation-settings:"wdth" 112;font-weight:750;font-size:clamp(28px,3.4vw,40px);line-height:1.1;color:var(--ink);max-width:22ch}
h3{font-variation-settings:"wdth" 110;font-weight:700;font-size:21px;color:var(--ink);line-height:1.25}
.intro{margin-top:16px;color:var(--muted);max-width:60ch;font-size:18px}
.prose p{max-width:66ch;margin-top:18px}
.prose h2{margin-top:56px}
.prose h2:first-child{margin-top:0}
.prose ul{margin:18px 0 0 0;padding-left:20px;max-width:66ch}
.prose li{margin-top:8px}
.prose li::marker{color:var(--signal)}

.services{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink)}
.service{padding:32px 32px 32px 0;border-right:1px solid var(--line)}
.service+.service{padding-left:32px}
.service:last-child{border-right:0}
.service p{margin-top:12px;color:var(--muted)}
.service a{display:inline-block;margin-top:18px;font-weight:700;text-decoration:none;border-bottom:2px solid var(--signal)}
@media (max-width:860px){.services{grid-template-columns:1fr}.service,.service+.service{padding:28px 0;border-right:0;border-bottom:1px solid var(--line)}}

/* vessel register */
.register{margin-top:44px;width:100%;border-collapse:collapse;font-size:16px}
.register th{text-align:left;font-size:13px;font-weight:600;color:var(--muted);padding:0 16px 12px 0;border-bottom:2px solid var(--ink)}
.register td{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.register td:first-child{font-weight:700;color:var(--ink);width:34%;font-variation-settings:"wdth" 110}
.register .abbr{display:inline-block;margin-left:8px;font-size:12px;font-weight:600;color:var(--steel);border:1px solid var(--line);padding:1px 6px;border-radius:2px;vertical-align:2px}
@media (max-width:600px){.register td:first-child{width:auto}.register td{display:block;padding:4px 0}.register tr{display:block;padding:14px 0;border-bottom:1px solid var(--line)}.register td{border:0}.register thead{display:none}}

.two-col{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
@media (max-width:860px){.two-col{grid-template-columns:1fr;gap:28px}}

.regions{list-style:none;columns:2;column-gap:40px;margin-top:8px}
.regions li{padding:14px 0;border-bottom:1px solid var(--line);break-inside:avoid;font-weight:600;color:var(--ink)}
.regions li span{display:block;font-weight:400;color:var(--muted);font-size:15px}
@media (max-width:600px){.regions{columns:1}}

.steps{list-style:none;margin-top:48px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:s}
.steps li{counter-increment:s;border-top:2px solid var(--ink);padding-top:18px}
.steps li::before{content:counter(s);display:block;font-variation-settings:"wdth" 125;font-weight:800;font-size:34px;color:var(--signal);line-height:1;margin-bottom:14px}
.steps p{margin-top:8px;color:var(--muted);font-size:16px}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

.owners{background:var(--mist)}
.owners .wrap{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.owners p{margin-top:12px;color:var(--muted);max-width:56ch}

.person{display:flex;gap:28px;align-items:flex-start;margin-top:32px}
.monogram{flex:none;width:112px;height:112px;background:var(--ink);color:#fff;display:grid;place-items:center;font-variation-settings:"wdth" 125;font-weight:800;font-size:36px;border-bottom:4px solid var(--signal)}
.person p{margin-top:8px;color:var(--muted);max-width:52ch}
@media (max-width:520px){.person{flex-direction:column}}

/* contact */
.contact-band{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.contact-band .wrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end}
.contact-band h2{color:#fff}
.contact-band p{margin-top:14px;color:#C8D3DD;max-width:44ch}
.direct{list-style:none;font-size:clamp(20px,2.4vw,28px);font-weight:700;font-variation-settings:"wdth" 112}
.direct li+li{margin-top:10px}
.direct a{text-decoration:none;border-bottom:2px solid var(--signal)}
.direct small{display:block;font-size:13px;font-weight:500;color:#9FB0C0;letter-spacing:.02em}
@media (max-width:860px){.contact-band .wrap{grid-template-columns:1fr}}

form.enquiry{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;margin-top:8px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
label{font-size:14px;font-weight:600;color:var(--ink)}
input,select,textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:2px;background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--signal);outline-offset:0;border-color:var(--ink)}
textarea{min-height:150px;resize:vertical}
form.enquiry button{grid-column:1/-1;justify-self:start;border:0;cursor:pointer;font:inherit;font-weight:700}
.form-note{grid-column:1/-1;font-size:14px;color:var(--muted)}
@media (max-width:600px){form.enquiry{grid-template-columns:1fr}}

.side-card{background:var(--white);border:1px solid var(--line);border-top:4px solid var(--ink);padding:28px}
.side-card h3{margin-bottom:12px}
.side-card p{color:var(--muted);font-size:16px}
.side-card a{font-weight:700}

/* footer */
footer{background:#06142D;color:#9FB0C0;font-size:14px;padding:48px 0 36px}
footer .wrap{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
footer .brand{color:#fff;font-size:17px}
footer ul{list-style:none;display:flex;gap:22px;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:#fff}
footer .legal{margin-top:12px;line-height:1.7}

@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero .lead,.hero .actions{animation:rise .7s ease-out both}
  .hero .lead{animation-delay:.08s}.hero .actions{animation-delay:.16s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* photos */
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 55%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,29,63,.94) 0%,rgba(10,29,63,.82) 38%,rgba(10,29,63,.25) 72%,rgba(10,29,63,.05) 100%)}
.hero-has-photo > .wrap{padding-top:96px;padding-bottom:130px}
.hero-has-photo .hero-strip{background:rgba(6,20,45,.85)}
@media (max-width:860px){.hero-shade{background:linear-gradient(180deg,rgba(10,29,63,.88) 0%,rgba(10,29,63,.78) 60%,rgba(10,29,63,.9) 100%)}.hero-img{object-position:65% 50%}.hero-has-photo > .wrap{padding-top:80px;padding-bottom:80px}}
.photo-band{height:clamp(260px,42vw,520px);overflow:hidden;background:var(--ink)}
.photo-band img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
@media (min-width:861px){.hero-img{left:22%;width:78%;object-position:46% 62%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%);mask-image:linear-gradient(90deg,transparent 0,#000 40%)}.hero-shade{background:linear-gradient(90deg,rgba(10,29,63,.6) 0%,rgba(10,29,63,.35) 45%,rgba(10,29,63,0) 75%)}}
.hero .hero-strip .wrap{padding-top:0;padding-bottom:0}

.prose li strong{color:var(--ink);font-weight:700}

.hero-logo{display:block;width:150px;height:auto;margin-bottom:36px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
@media (max-width:860px){.hero-logo{width:112px;margin-bottom:28px}}
.site-header .wrap{height:84px}
.brand-mark{width:54px;height:54px}
@media (max-width:900px){.nav{top:84px}}
@media (min-width:861px){
  .hero-img{left:36%;width:64%;object-position:40% 62%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
  .hero-shade{background:linear-gradient(90deg,rgba(10,29,63,.85) 0%,rgba(10,29,63,.6) 40%,rgba(10,29,63,.15) 62%,rgba(10,29,63,0) 80%)}
}
@media (min-width:861px){
  .hero-img{left:40%;width:60%;object-position:35% 62%;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 30%,#000 55%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 30%,#000 55%)}
  .hero-shade{background:linear-gradient(90deg,rgba(10,29,63,.9) 0%,rgba(10,29,63,.75) 50%,rgba(10,29,63,.25) 68%,rgba(10,29,63,0) 82%)}
}