/* =========================================================
   Home page — "Port call" direction
   Display: Barlow Condensed (ship name-plate / signage voice)
   Body: Inter (shared). Palette extends the site tokens:
   deep hull, brass, beacon cyan.
========================================================= */
@font-face{ font-family:'Barlow Condensed'; font-weight:500; font-style:normal; font-display:swap; src:url('../fonts/BarlowCondensed-Medium.woff2') format('woff2'); }
@font-face{ font-family:'Barlow Condensed'; font-weight:600; font-style:normal; font-display:swap; src:url('../fonts/BarlowCondensed-SemiBold.woff2') format('woff2'); }
@font-face{ font-family:'Barlow Condensed'; font-weight:700; font-style:normal; font-display:swap; src:url('../fonts/BarlowCondensed-Bold.woff2') format('woff2'); }

.home{
  --hull:#05171f;
  --hull-2:#0a2530;
  --chalk:#f4f6f3;
  --display:'Barlow Condensed','Arial Narrow','Roboto Condensed',sans-serif;
}
.home h1,.home h2,.home h3{ font-family:var(--display); font-weight:700; letter-spacing:-0.005em; }
.home .wrap{ width:min(100% - 48px, 1280px); margin-inline:auto; }

/* ---------- Hero ---------- */
.h-hero{
  position:relative; isolation:isolate; color:#fff; background:var(--hull);
  padding: clamp(56px,9vh,120px) 0 clamp(64px,10vh,128px);
  min-height: min(92vh, 860px); display:flex; align-items:center;
}
.h-hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:url('../images/n001_0.jpg') center 40%/cover no-repeat;
}
.h-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(5,23,31,.94) 0%, rgba(5,23,31,.78) 42%, rgba(5,23,31,.18) 100%),
    linear-gradient(0deg, rgba(5,23,31,.75) 0%, rgba(5,23,31,0) 35%);
}
.h-hero .wrap{ display:grid; grid-template-columns: minmax(0,1.5fr) minmax(300px,420px); gap:clamp(32px,5vw,80px); align-items:end; }
.h-hero h1{
  font-size: clamp(3rem, 7.2vw, 6.8rem); line-height:.92; text-transform:uppercase; margin:0 0 28px; color:#fff;
}
.h-hero h1 span{ display:block; }
.h-hero h1 .reply{ color:var(--beacon); }
.h-hero .sub{ font-size:clamp(16px,1.5vw,19px); line-height:1.55; max-width:520px; color:rgba(255,255,255,.82); margin:0 0 32px; }
.h-hero .actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* Port call card */
.pc-card{
  background:rgba(255,255,255,.97); color:var(--text-dark);
  border-radius:var(--radius-m); padding:26px 26px 24px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.65);
  border-top:4px solid var(--brass);
}
.pc-card h2{ font-size:30px; margin:0 0 4px; color:var(--ink); line-height:1; }
.pc-card p{ margin:0 0 18px; font-size:14px; color:var(--text-body); }
.pc-card label{ display:block; font-size:12.5px; font-weight:600; margin:0 0 6px; color:var(--text-dark); }
.pc-card select{
  width:100%; appearance:none; -webkit-appearance:none;
  font:inherit; font-size:15px; padding:12px 40px 12px 14px; margin-bottom:14px;
  border:1px solid rgba(8,23,34,.22); border-radius:var(--radius-s); background:#fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2310222c' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
  color:var(--text-dark);
}
.pc-card select:focus{ outline:3px solid rgba(201,162,74,.55); outline-offset:1px; border-color:var(--brass); }
.pc-card .btn{ width:100%; justify-content:center; margin-top:4px; }
.pc-card small{ display:block; margin-top:12px; font-size:12.5px; color:var(--steel-dark); text-align:center; }

/* ---------- Port ticker ---------- */
.h-ticker{ background:var(--brass); color:var(--ink); overflow:hidden; border-block:1px solid rgba(8,23,34,.25); }
.h-ticker-track{ display:flex; width:max-content; animation:tick 90s linear infinite; }
.h-ticker:hover .h-ticker-track{ animation-play-state:paused; }
.h-ticker ul{ display:flex; align-items:center; margin:0; padding:0; list-style:none; }
.h-ticker li{ font-family:var(--display); font-weight:600; font-size:22px; text-transform:uppercase; letter-spacing:.04em; padding:12px 0; white-space:nowrap; }
.h-ticker li::after{ content:"◆"; font-size:10px; margin:0 22px; vertical-align:middle; opacity:.6; }
@keyframes tick{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .h-ticker-track{ animation:none; } .h-ticker{ overflow-x:auto; } }

/* ---------- Ledger (what goes wrong / what we do) ---------- */
.h-ledger{ background:var(--chalk); padding:clamp(72px,10vw,132px) 0; }
.h-ledger .wrap{ display:grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,6vw,96px); align-items:start; }
.h-ledger .lead-col{ position:sticky; top:110px; }
.h-ledger h2{ font-size:clamp(2.6rem,5.4vw,4.8rem); line-height:.95; text-transform:uppercase; color:var(--ink); margin:0 0 22px; }
.h-ledger .lead-col p{ font-size:17px; line-height:1.6; max-width:440px; color:var(--text-body); margin:0; }
.ledger{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.ledger li{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); gap:28px; padding:22px 0; border-bottom:1px solid var(--line-dark); align-items:baseline; transition:background .25s ease; }
.ledger li:hover{ background:rgba(201,162,74,.12); }
.ledger .bad{ font-size:16px; color:var(--steel-dark); text-decoration:line-through; text-decoration-thickness:1.5px; text-decoration-color:rgba(8,23,34,.45); }
.ledger .good{ font-family:var(--display); font-size:clamp(1.35rem,2.1vw,1.85rem); line-height:1.1; font-weight:600; color:var(--ink); }
.h-ledger .vow{ margin-top:34px; font-family:var(--display); font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1.1; color:var(--ink); font-weight:600; }
.h-ledger .vow span{ display:block; color:var(--steel-dark); font-weight:500; }

/* ---------- Departments mosaic ---------- */
.h-depts{ background:var(--hull); color:#fff; padding:clamp(72px,10vw,128px) 0; }
.h-depts .head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:24px; margin-bottom:40px; }
.h-depts h2{ font-size:clamp(2.6rem,5.4vw,4.8rem); line-height:.95; text-transform:uppercase; margin:0; max-width:11ch; }
.h-depts .head p{ max-width:420px; color:rgba(255,255,255,.7); font-size:16px; margin:0 0 6px; }
.mosaic{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:168px; grid-auto-flow:dense; gap:10px; }
.tile{ position:relative; overflow:hidden; border-radius:var(--radius-s); color:#fff; display:flex; flex-direction:column; justify-content:flex-end; padding:20px 22px; background:var(--hull-2); }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(5,23,31,.92) 0%, rgba(5,23,31,.25) 55%, rgba(5,23,31,.05) 100%); }
.tile:hover img{ transform:scale(1.06); }
.tile > *{ position:relative; z-index:2; }
.tile h3{ font-size:clamp(1.5rem,2.2vw,2.2rem); line-height:1; margin:0 0 6px; text-transform:uppercase; }
.tile span{ font-size:13.5px; color:rgba(255,255,255,.78); }
.tile:focus-visible{ outline:3px solid var(--brass); outline-offset:3px; }
.tile.t-a{ grid-column:span 3; grid-row:span 2; }
.tile.t-b{ grid-column:span 3; }
.tile.t-c{ grid-column:span 2; }
.tile.t-d{ grid-column:span 2; grid-row:span 2; }
.tile.t-e{ grid-column:span 2; grid-row:span 2; }
.tile.t-f{ grid-column:span 4; }
.tile.t-big h3{ font-size:clamp(2.2rem,4vw,3.6rem); }

/* ---------- Katradis ---------- */
.h-kat{ background:var(--chalk); padding:clamp(72px,10vw,128px) 0; }
.h-kat .wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; background:var(--hull); border-radius:var(--radius-m); overflow:hidden; }
.h-kat .photo{ position:relative; min-height:420px; background:url('../images/n092_1.jpg') center/cover no-repeat; }
.h-kat .photo .logo{ position:absolute; left:24px; bottom:24px; width:150px; background:#fff; padding:14px; border-radius:var(--radius-s); }
.h-kat .photo .logo img{ width:100%; display:block; }
.h-kat .copy{ padding:clamp(32px,4.5vw,64px); color:#fff; }
.h-kat h2{ font-size:clamp(2.2rem,4.4vw,3.8rem); line-height:.95; text-transform:uppercase; margin:0 0 20px; }
.h-kat p{ color:rgba(255,255,255,.78); font-size:16.5px; line-height:1.6; margin:0 0 26px; max-width:520px; }
.h-kat dl{ display:grid; grid-template-columns:repeat(3,auto); gap:8px 28px; margin:0 0 30px; justify-content:start; }
.h-kat dt{ font-family:var(--display); font-size:clamp(2rem,3vw,2.8rem); font-weight:700; color:var(--brass-2); line-height:1; }
.h-kat dd{ margin:4px 0 0; font-size:13px; color:rgba(255,255,255,.65); }
.h-kat dl div{ display:flex; flex-direction:column; }

/* ---------- Services list ---------- */
.h-svc{ background:#fff; padding:clamp(72px,10vw,128px) 0; }
.h-svc .head{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,5vw,80px); align-items:end; margin-bottom:36px; }
.h-svc h2{ font-size:clamp(2.6rem,5.4vw,4.8rem); line-height:.95; text-transform:uppercase; color:var(--ink); margin:0; }
.h-svc .head p{ font-size:17px; line-height:1.6; color:var(--text-body); margin:0; max-width:560px; }
.svc-list{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.svc-list a{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto; gap:24px; align-items:center; padding:20px 14px; border-bottom:1px solid var(--line-dark); transition:background .25s ease, color .25s ease, padding .25s ease; }
.svc-list .n{ font-family:var(--display); font-size:clamp(1.5rem,2.6vw,2.2rem); font-weight:600; color:var(--ink); line-height:1; }
.svc-list .d{ font-size:15px; color:var(--text-body); }
.svc-list .go{ font-size:13px; font-weight:600; color:var(--brass); white-space:nowrap; display:inline-flex; gap:8px; align-items:center; }
.svc-list .go svg{ width:16px; height:16px; transition:transform .25s ease; }
.svc-list a:hover{ background:var(--ink); padding-left:24px; }
.svc-list a:hover .n{ color:#fff; }
.svc-list a:hover .d{ color:rgba(255,255,255,.75); }
.svc-list a:hover .go svg{ transform:translateX(4px); }
.svc-list a:focus-visible{ outline:3px solid var(--brass); outline-offset:-3px; }

/* ---------- Coverage ---------- */
.h-cover{ background:var(--hull-2); color:#fff; padding:clamp(72px,10vw,128px) 0; }
.h-cover .wrap{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,6vw,96px); }
.h-cover h2{ font-size:clamp(2.6rem,5.4vw,4.8rem); line-height:.95; text-transform:uppercase; margin:0 0 28px; }
.h-cover .count{ display:flex; gap:40px; margin-bottom:28px; }
.h-cover .count div strong{ display:block; font-family:var(--display); font-size:clamp(3.4rem,6vw,5.6rem); line-height:.9; font-weight:700; color:var(--brass-2); }
.h-cover .count div span{ font-size:14px; color:rgba(255,255,255,.7); }
.h-cover p{ color:rgba(255,255,255,.75); font-size:16.5px; line-height:1.6; max-width:460px; margin:0 0 26px; }
.h-cover h3{ font-size:20px; margin:0 0 12px; color:var(--brass-2); }
.h-cover .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; }
.h-cover .tags span{ font-size:13.5px; padding:7px 14px; border:1px solid rgba(255,255,255,.2); border-radius:999px; color:rgba(255,255,255,.88); }
.certs{ display:flex; flex-wrap:wrap; gap:10px 14px; padding-top:26px; border-top:1px solid rgba(255,255,255,.18); }
.certs span{ font-family:var(--display); font-size:22px; font-weight:600; color:#fff; padding-right:14px; border-right:1px solid rgba(255,255,255,.25); line-height:1; }
.certs span:last-child{ border-right:0; }

/* ---------- Final call ---------- */
.h-call{ background:var(--brass); color:var(--ink); padding:clamp(56px,8vw,104px) 0; }
.h-call .wrap{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(28px,5vw,80px); align-items:center; }
.h-call h2{ font-size:clamp(2.6rem,6vw,5.4rem); line-height:.92; text-transform:uppercase; margin:0 0 16px; color:var(--ink); }
.h-call p{ font-size:18px; max-width:520px; margin:0 0 26px; color:rgba(8,23,34,.85); }
.h-call .btn-dark{ background:var(--ink); color:#fff; }
.h-call .btn-dark:hover{ background:#000; transform:translateY(-2px); }
.h-call ul{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.h-call li{ padding:14px 0; border-bottom:1px solid rgba(8,23,34,.3); display:flex; justify-content:space-between; gap:16px; font-size:16px; }
.h-call li b{ font-weight:600; }
.h-call a{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .h-hero .wrap, .h-ledger .wrap, .h-svc .head, .h-cover .wrap, .h-call .wrap{ grid-template-columns:1fr; }
  .h-ledger .lead-col{ position:static; }
  .h-kat .wrap{ grid-template-columns:1fr; }
  .h-kat .photo{ min-height:300px; }
  .mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .tile.t-a,.tile.t-b,.tile.t-c,.tile.t-d,.tile.t-e,.tile.t-f{ grid-column:span 1; grid-row:span 1; }
  .tile.t-a, .tile.t-f{ grid-column:span 2; }
  .tile.t-d,.tile.t-e{ grid-row:span 2; }
  .svc-list a{ grid-template-columns:1fr auto; }
  .svc-list .d{ grid-column:1 / -1; order:3; }
}
@media (max-width: 560px){
  .home .wrap{ width:min(100% - 32px, 1280px); }
  .h-hero{ min-height:auto; padding-top:44px; }
  .ledger li{ grid-template-columns:1fr; gap:6px; }
  .h-kat dl{ grid-template-columns:repeat(2,auto); }
  .h-ticker li{ font-size:18px; }
  .svc-list a{ padding:16px 4px; }
  .svc-list .go{ display:none; }
  .svc-list a{ grid-template-columns:1fr; }
}

.home .btn svg{ width:16px; height:16px; flex:none; }
.home .btn{ gap:10px; }
.home h1,.home h2,.home h3{ color:inherit; text-wrap:balance; }
.home .h-ledger h2,.home .h-svc h2{ color:var(--ink); }
.home .h-ledger .vow{ text-wrap:balance; }
.home .h-call h2{ color:var(--ink); }
.tile::after{ background:linear-gradient(0deg, rgba(5,23,31,.94) 0%, rgba(5,23,31,.7) 38%, rgba(5,23,31,.15) 75%, rgba(5,23,31,0) 100%); }
.tile h3{ color:#fff; text-shadow:0 1px 14px rgba(5,23,31,.6); }
.tile span{ color:rgba(255,255,255,.88); }