/* ============================================================
   ALAMIYAH MARINE — GSL skeleton, maison craft.
   Abyss navy · warm paper · Fraunces + Inter + IBM Plex Mono ·
   surgical brass · hairline rules · cinematic hero.
   ============================================================ */

:root{
  --abyss:#0A1A2F; --abyss-900:#06121F; --abyss-800:#0E2236; --abyss-700:#16314A;
  --steel:#2B4A66; --slate:#5C7488; --mist:#9FB1BF; --fog:#C9D4DC;
  --paper:#F6F4EF; --paper-2:#ECE6DB; --paper-3:#E4DCCD; --white:#fff;
  --brass:#C2A063; --brass-deep:#A4823F; --brass-soft:#E7D8B7;
  --ink:#11202E;
  --serif:"Fraunces", Georgia, serif;
  --sans:"Inter", system-ui, -apple-system, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --maxw:1200px;
  --gut:clamp(1.4rem,4vw,3.5rem);
  --sp:clamp(5rem,9vw,8.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ font-family:var(--sans); font-size:clamp(1rem,.96rem+.2vw,1.06rem); line-height:1.68; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; padding:0; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

.wrap{ width:min(var(--maxw), 100% - var(--gut)*2); margin-inline:auto; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:380; line-height:1.05; letter-spacing:-.018em; font-optical-sizing:auto; }
.balance{ text-wrap:balance; } .pretty{ text-wrap:pretty; }

/* eyebrow + hairline */
.g-eyebrow{ font-family:var(--mono); font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--brass-deep); font-weight:500; display:inline-flex; align-items:center; gap:.8em; }
.g-eyebrow::before{ content:""; width:30px; height:1px; background:var(--brass); }
.g-eyebrow.on-dark{ color:var(--brass-soft); }
.g-eyebrow.center{ justify-content:center; }
.g-eyebrow.center::before{ display:none; }

/* ---------- Buttons ---------- */
.g-btn{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; padding:1.05em 1.7em; border-radius:3px; transition:all .35s var(--ease); }
.g-btn .ar{ transition:transform .35s var(--ease); }
.g-btn:hover .ar{ transform:translateX(4px); }
.g-btn--primary{ background:var(--brass); color:var(--abyss-900); }
.g-btn--primary:hover{ background:var(--brass-soft); }
.g-btn--ghost{ color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.34); }
.g-btn--ghost:hover{ box-shadow:inset 0 0 0 1px var(--brass); color:var(--brass-soft); }
.g-btn--dark{ background:var(--abyss); color:#fff; }
.g-btn--dark:hover{ background:var(--abyss-700); }
.g-btn--line{ color:var(--ink); box-shadow:inset 0 0 0 1px var(--paper-3); }
.g-btn--line:hover{ box-shadow:inset 0 0 0 1px var(--brass); color:var(--brass-deep); }
.g-link{ font-family:var(--mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brass-deep); display:inline-flex; align-items:center; gap:.5em; border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .3s; }
.g-link:hover{ border-color:var(--brass); }
.g-link .ar{ transition:transform .3s var(--ease); } .g-link:hover .ar{ transform:translateX(3px); }

/* ---------- Header ---------- */
.g-header{ position:fixed; inset:0 0 auto 0; z-index:100; padding:1.1rem 0; transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease); }
.g-header.scrolled{ background:rgba(8,18,31,.86); backdrop-filter:blur(14px) saturate(140%); padding:.7rem 0; box-shadow:0 1px 0 rgba(194,160,99,.25); }
.g-nav{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.g-logo{ display:flex; align-items:center; gap:11px; color:#fff; }
.g-logo svg{ width:30px; height:30px; flex-shrink:0; }
.g-logo .wm{ font-family:var(--serif); font-size:1.3rem; letter-spacing:.01em; line-height:1; color:#fff; }
.g-logo .wm span{ display:block; font-family:var(--mono); font-size:.56rem; letter-spacing:.32em; color:var(--brass-soft); margin-top:4px; text-transform:uppercase; }
.g-menu{ display:flex; align-items:center; gap:2rem; }
.g-menu a{ font-size:.9rem; color:rgba(255,255,255,.82); position:relative; padding-block:.3rem; transition:color .3s; }
.g-menu a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--brass); transition:width .3s var(--ease); }
.g-menu a:hover, .g-menu a[aria-current="page"]{ color:#fff; }
.g-menu a:hover::after, .g-menu a[aria-current="page"]::after{ width:100%; }
.g-nav-cta{ display:flex; align-items:center; gap:1.4rem; }
.g-burger{ display:none; width:28px; height:20px; position:relative; z-index:110; }
.g-burger span{ position:absolute; left:0; width:100%; height:2px; background:#fff; transition:.3s var(--ease); }
.g-burger span:nth-child(1){ top:0; } .g-burger span:nth-child(2){ top:9px; } .g-burger span:nth-child(3){ top:18px; }
body.nav-open .g-burger span:nth-child(1){ top:9px; transform:rotate(45deg); }
body.nav-open .g-burger span:nth-child(2){ opacity:0; }
body.nav-open .g-burger span:nth-child(3){ top:9px; transform:rotate(-45deg); }

/* ---------- Hero ---------- */
.g-hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; overflow:hidden; background:var(--abyss-900); }
.g-hero-img{ position:absolute; inset:0; z-index:0; }
.g-hero-img img{ width:100%; height:100%; object-fit:cover; opacity:.85; }
.g-hero-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,18,31,.55) 0%, rgba(6,18,31,.12) 34%, rgba(6,18,31,.72) 78%, var(--abyss-900) 100%), linear-gradient(95deg, rgba(6,18,31,.6), rgba(6,18,31,0) 58%); }
.g-hero-inner{ position:relative; z-index:2; padding-top:clamp(8rem,30vh,16rem); }
.g-hero-inner h1{ color:#fff; font-size:clamp(2.6rem,1.6rem+4.4vw,5.4rem); max-width:17ch; margin-top:1.3rem; }
.g-hero-inner h1 em{ font-style:italic; color:var(--brass-soft); }
.g-hero-lede{ max-width:48ch; margin-top:1.5rem; font-size:clamp(1.05rem,1rem+.5vw,1.3rem); font-weight:300; color:rgba(255,255,255,.85); }
.g-hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; }
.g-hero-stats{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(194,160,99,.42); margin-top:clamp(3rem,7vh,5.5rem); }
.g-hero-stats .st{ padding:1.9rem 1.6rem 2.4rem; border-left:1px solid rgba(255,255,255,.13); }
.g-hero-stats .st:first-child{ border-left:0; padding-left:0; }
.g-hero-stats .st .v{ font-family:var(--serif); font-size:clamp(1.4rem,1.1rem+1vw,1.85rem); line-height:1.12; color:#fff; }
.g-hero-stats .st .v em{ font-style:italic; color:var(--brass-soft); }
.g-hero-stats .st .c{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mist); margin-top:.85rem; }

/* ---------- Section base ---------- */
.g-sec{ padding-block:var(--sp); }
.g-sec--paper{ background:var(--paper); }
.g-sec--paper2{ background:var(--paper-2); }
.g-sec--dark{ background:var(--abyss); color:#fff; }
.g-sec--deep{ background:var(--abyss-900); color:#fff; }
.g-head{ max-width:60ch; }
.g-head h2{ font-size:clamp(2rem,1.5rem+2.4vw,3.2rem); margin-top:1.1rem; }
.g-head.center{ margin-inline:auto; text-align:center; }
.g-sec--dark h2, .g-sec--deep h2{ color:#fff; }
.muted{ color:var(--slate); } .g-sec--dark .muted, .g-sec--deep .muted{ color:var(--mist); }

/* ---------- Recent Updates ---------- */
.g-news{ position:relative; padding-block:clamp(5rem,9vw,8rem); background:var(--abyss-900); color:#fff; overflow:hidden; }
.g-news-bg{ position:absolute; inset:0; z-index:0; }
.g-news-bg img{ width:100%; height:100%; object-fit:cover; opacity:.4; }
.g-news-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(6,18,31,.92) 38%, rgba(6,18,31,.5)); }
.g-news .wrap{ position:relative; z-index:2; }
.g-news-card{ background:var(--paper); color:var(--ink); padding:clamp(2.2rem,4vw,3.4rem); max-width:720px; border-radius:6px; box-shadow:0 30px 70px -36px rgba(0,0,0,.6); }
.g-news-card h2{ font-size:clamp(1.6rem,1.3rem+1.2vw,2.1rem); margin:1rem 0 1.6rem; }
.g-news-item{ border-top:1px solid var(--paper-3); padding:1.1rem 0; display:grid; grid-template-columns:64px 1fr; gap:1.2rem; align-items:baseline; }
.g-news-item .date{ font-family:var(--mono); font-size:.8rem; color:var(--brass-deep); font-weight:500; }
.g-news-item a{ font-family:var(--serif); font-size:1.12rem; line-height:1.35; color:var(--ink); transition:color .3s; }
.g-news-item a:hover{ color:var(--brass-deep); }
.g-news-card .g-link{ margin-top:1.6rem; }

/* ---------- Quad block ---------- */
.g-quad{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.g-quad-img{ border-radius:6px; overflow:hidden; aspect-ratio:4/5; box-shadow:0 30px 60px -34px rgba(6,18,31,.5); }
.g-quad-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.g-quad-img:hover img{ transform:scale(1.05); }
.g-quad-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,3vw,2.8rem); }
.g-quad-grid h3{ font-size:1.32rem; margin-bottom:1rem; }
.g-quad-grid p{ color:var(--slate); font-size:.96rem; }
.g-quad-grid li{ border-top:1px solid var(--paper-3); padding:.62rem 0; font-size:.98rem; }
.g-quad-grid li a{ transition:color .25s; } .g-quad-grid li a:hover{ color:var(--brass-deep); }
.g-quad-grid .g-link, .g-quad-grid .g-btn{ margin-top:1.3rem; }

/* ---------- Our Fleet ---------- */
.g-fleet h2{ font-size:clamp(2rem,1.5rem+2.4vw,3.2rem); }
.g-fleet-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:3rem; }
.g-fleet-cell{ position:relative; border-radius:6px; overflow:hidden; aspect-ratio:4/3; }
.g-fleet-cell img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.g-fleet-cell:hover img{ transform:scale(1.06); }
.g-fleet-cell .cap{ position:absolute; left:1rem; bottom:1rem; z-index:2; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-soft); background:rgba(8,18,31,.7); backdrop-filter:blur(6px); padding:.5em 1em; border-radius:3px; border:1px solid rgba(255,255,255,.12); }
.g-fleet .g-btn{ margin-top:3rem; }

/* ---------- Track Record band ---------- */
.g-cover{ position:relative; background:var(--abyss-900); overflow:hidden; }
.g-cover-bg{ position:absolute; inset:0; z-index:0; }
.g-cover-bg img{ width:100%; height:100%; object-fit:cover; opacity:.28; }
.g-cover-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, var(--abyss-900), transparent 30%, transparent 70%, var(--abyss-900)); }
.g-cover .wrap{ position:relative; z-index:2; padding-block:clamp(4.5rem,8vw,7rem); display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.g-cover-card{ color:#fff; }
.g-cover-card h2{ color:#fff; font-size:clamp(1.8rem,1.4rem+1.6vw,2.6rem); margin:1.1rem 0 .8rem; }
.g-cover-card .big{ font-family:var(--serif); font-size:clamp(3rem,2rem+4vw,5rem); line-height:1; color:var(--brass-soft); }
.g-cover-card .big small{ font-size:.32em; font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--mist); display:block; margin-top:.6rem; }
.g-cover-card .note{ color:var(--fog); font-size:.95rem; margin-top:1.4rem; max-width:46ch; }
.g-cover-card .g-btn{ margin-top:2rem; }
.g-cover-photo{ border-radius:6px; overflow:hidden; aspect-ratio:4/3; box-shadow:0 40px 80px -40px rgba(0,0,0,.7); }
.g-cover-photo img{ width:100%; height:100%; object-fit:cover; }

/* ---------- ESG / HSE ---------- */
.g-esg{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.g-esg-img{ border-radius:6px; overflow:hidden; aspect-ratio:5/4; box-shadow:0 30px 60px -34px rgba(6,18,31,.5); }
.g-esg-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.g-esg-img:hover img{ transform:scale(1.05); }
.g-esg h2{ font-size:clamp(1.8rem,1.4rem+1.8vw,2.7rem); margin-top:1.1rem; margin-bottom:1.3rem; }
.g-esg p{ color:var(--slate); margin-bottom:1.8rem; }

/* ---------- Tools + Footer ---------- */
.g-tools{ background:var(--abyss-900); color:#fff; padding-block:3rem; border-top:1px solid rgba(194,160,99,.22); }
.g-tools-label{ font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--slate); margin-bottom:1.4rem; }
.g-tools-row{ display:flex; gap:clamp(1.6rem,4vw,3.2rem); flex-wrap:wrap; }
.g-tool{ display:flex; align-items:center; gap:.7rem; color:var(--fog); font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; transition:color .3s; }
.g-tool svg{ width:22px; height:22px; color:var(--brass); transition:color .3s; }
.g-tool:hover{ color:#fff; }
.g-footer{ background:var(--abyss-900); padding-block:1.6rem 2.2rem; border-top:1px solid rgba(255,255,255,.08); }
.g-footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.g-footer .cpy{ font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; color:var(--slate); }
.g-footer-links{ display:flex; flex-wrap:wrap; gap:1.4rem; }
.g-footer-links a{ font-size:.85rem; color:var(--fog); transition:color .3s; }
.g-footer-links a:hover{ color:var(--brass-soft); }

/* ---------- Vessel spec page ---------- */
.v-hero{ background:var(--abyss-900); color:#fff; padding-top:clamp(8rem,16vh,12rem); padding-bottom:clamp(2.5rem,6vh,4rem); }
.v-crumb{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); }
.v-crumb a:hover{ color:var(--brass-soft); }
.v-hero h1{ color:#fff; font-size:clamp(2.4rem,1.6rem+3.4vw,4.4rem); margin-top:1rem; }
.v-hero .role{ color:var(--mist); font-size:clamp(1.05rem,1rem+.5vw,1.35rem); font-weight:300; margin-top:1.1rem; max-width:54ch; }
.v-hero .code{ display:inline-block; margin-top:1.4rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-soft); border:1px solid rgba(194,160,99,.4); padding:.5em 1em; border-radius:100px; }

/* Blueprint drafting panel */
.v-blueprint{ position:relative; background:var(--abyss-900); border:1px solid rgba(194,160,99,.28); border-radius:8px; overflow:hidden; padding:clamp(1.4rem,3vw,2.6rem); }
.v-blueprint::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(159,177,191,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(159,177,191,.07) 1px,transparent 1px); background-size:26px 26px; pointer-events:none; }
.v-blueprint::after{ content:""; position:absolute; inset:10px; border:1px solid rgba(194,160,99,.18); pointer-events:none; }
.v-bp-head{ position:relative; z-index:2; display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:.6rem; margin-bottom:1.2rem; }
.v-bp-head .t{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-soft); }
.v-bp-head .n{ font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--slate); }
.v-blueprint svg{ position:relative; z-index:2; display:block; width:100%; height:auto; }
.v-views{ display:grid; gap:1.2rem; }

/* Specs */
.v-specs{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(2rem,5vw,4.5rem); }
.v-specs .row{ display:flex; justify-content:space-between; gap:1.2rem; padding:.9rem 0; border-bottom:1px solid var(--paper-3); }
.v-specs .row dt{ color:var(--slate); font-size:.94rem; }
.v-specs .row dd{ font-family:var(--mono); font-size:.92rem; color:var(--ink); text-align:right; white-space:nowrap; }
.v-note{ margin-top:1.6rem; font-size:.84rem; color:var(--slate); max-width:70ch; }

/* Systems + mission cards */
.v-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.3rem; margin-top:2.6rem; }
.v-card{ background:var(--abyss); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:1.7rem; }
.v-card .ic{ font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brass); }
.v-card h4{ color:#fff; margin:.7rem 0 .5rem; font-size:1.12rem; }
.v-card p{ color:var(--mist); font-size:.92rem; }
.v-card ul li{ color:var(--fog); font-size:.92rem; padding:.3rem 0 .3rem 1.1rem; position:relative; }
.v-card ul li::before{ content:""; position:absolute; left:0; top:.85em; width:6px; height:1px; background:var(--brass); }

/* Other vessels strip */
.v-more{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1px; background:var(--paper-3); border:1px solid var(--paper-3); border-radius:8px; overflow:hidden; margin-top:2.6rem; }
.v-more a{ background:var(--paper); padding:1.2rem 1.3rem; transition:background .25s; }
.v-more a:hover{ background:#fff; }
.v-more .c{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:var(--brass-deep); }
.v-more .n2{ display:block; margin-top:.35rem; font-size:.95rem; color:var(--ink); font-weight:500; }

/* make fleet capability cells clickable */
.fleet-cell-link{ display:block; transition:background .25s, transform .25s; }
.fleet-cell-link:hover{ background:#fff; }
.fleet-cell-link .go{ display:inline-flex; align-items:center; gap:.4em; margin-top:.7rem; font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-deep); }
@media (max-width:620px){ .v-specs{ grid-template-columns:1fr; } }

/* ---------- Reveal ---------- */
.r{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.r.in{ opacity:1; transform:none; }
.r.d1{ transition-delay:.08s; } .r.d2{ transition-delay:.16s; } .r.d3{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){ .r{ opacity:1; transform:none; transition:none; } }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .g-quad, .g-esg, .g-cover .wrap{ grid-template-columns:1fr; }
  .g-hero-stats{ grid-template-columns:1fr 1fr; }
  .g-hero-stats .st:nth-child(3){ border-left:0; padding-left:0; }
  .g-fleet-row{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .g-menu{ position:fixed; inset:0; flex-direction:column; justify-content:center; gap:1.6rem; background:var(--abyss-900); transform:translateX(100%); transition:transform .5s var(--ease); }
  .g-menu a{ font-family:var(--serif); font-size:1.7rem; color:#fff; }
  .g-menu a::after{ display:none; }
  body.nav-open .g-menu{ transform:none; } body.nav-open{ overflow:hidden; }
  .g-burger{ display:block; } .g-nav-cta .g-btn{ display:none; }
  .g-quad-grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .g-hero-stats{ grid-template-columns:1fr; }
  .g-hero-stats .st{ border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,.12); padding-block:1.3rem; }
  .g-hero-stats .st:first-child{ border-top:0; }
  .g-news-item{ grid-template-columns:1fr; gap:.3rem; }
}