/* ============================================================
   Global Horizon Shipping — R3 Website (5 pages)
   Corporate palette: Purple #84153a · Blue #1875ba · Light Blue #d1e3f4
   Fonts: Minion → EB Garamond | Avenir → Nunito Sans | Body: Arial
   Mobile-first: base styles are the phone layout; layers scale up
   at min-width 640 / 900 / 1200.
   ============================================================ */

:root{
  --purple:      #84153a;
  --purple-dark: #6b0f2e;
  --blue:        #1875ba;
  --blue-dark:   #12619c;
  --light-blue:  #d1e3f4;
  --tint-1:      #f2f2f2;
  --tint-2:      #f7f9fc;
  --ink:         #1c1c1c;
  --grey:        #4c4c4c;
  --line:        #d9e2ec;
  --card-line:   #c5d9ec;
  --footer:      #100f0d;
  --footer-bar:  #090808;
  --white:       #fff;

  --serif: 'EB Garamond', 'Minion Pro', Georgia, serif;
  --sans:  'Nunito Sans', 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
  --body:  Arial, Helvetica, sans-serif;

  --container: 1560px;
  --header-h: 76px;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.25,.46,.45,.94);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body{
  font-family:var(--body);
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.container{ width:calc(100% - 2.5rem); margin-inline:auto; }
@media (min-width:640px){ .container{ width:calc(100% - 5rem); } }
@media (min-width:1200px){ .container{ width:min(var(--container), calc(100% - 5rem)); } }

/* ---------- reveal system ---------- */
.reveal,.reveal-left,.reveal-right,.reveal-scale{
  opacity:0;
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:var(--d,0s);
  will-change:opacity,transform;
}
.reveal{ transform:translateY(40px); }
.reveal-left{ transform:translateX(-48px); }
.reveal-right{ transform:translateX(48px); }
.reveal-scale{ transform:scale(.92); }
.reveal.is-visible,.reveal-left.is-visible,.reveal-right.is-visible,.reveal-scale.is-visible{
  opacity:1; transform:none;
}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-left,.reveal-right,.reveal-scale{ opacity:1!important; transform:none!important; transition:none!important; }
  .hero-bg{ animation:none!important; }
}

/* ============================================================
   Header — mobile first (hamburger)
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background .45s var(--ease-soft), box-shadow .45s var(--ease-soft), height .45s var(--ease-soft);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; position:relative; }
.brand{ display:inline-flex; flex-shrink:0; position:relative; }
.brand img{ height:56px; width:auto; transition:height .45s var(--ease-soft), opacity .35s; }
.brand .logo-color{ position:absolute; inset:0; height:100%; opacity:0; }
.site-header.scrolled .brand .logo-white{ opacity:0; }
.site-header.scrolled .brand .logo-color{ opacity:1; }

.main-nav{
  position:fixed; left:0; right:0; top:0; height:100vh; height:100dvh;
  background:#fff;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2.4rem;
  transform:translateY(-102%); visibility:hidden;
  transition:transform .5s var(--ease-out), visibility 0s .5s;
  z-index:120;
}
.site-header.nav-open .main-nav{
  transform:none; visibility:visible;
  transition:transform .5s var(--ease-out);
}
.main-nav a{
  font-family:var(--sans); font-weight:800; font-size:1.15rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  position:relative; padding:.5rem 0; transition:color .3s;
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--purple); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.main-nav a:hover::after,.main-nav a.active::after{ transform:scaleX(1); }

.search{ display:none; }

.nav-toggle{
  display:block; background:none; border:0; cursor:pointer;
  width:44px; height:44px; position:relative; z-index:130;
}
.nav-toggle span{
  display:block; width:26px; height:2.5px; margin:5px auto;
  background:#fff; transition:.35s var(--ease-out);
}
.site-header.scrolled .nav-toggle span,
.site-header.nav-open .nav-toggle span{ background:var(--ink); }
.site-header.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
.site-header.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

.site-header.scrolled{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  box-shadow:0 4px 24px rgba(10,25,50,.12);
}

@media (min-width:900px){
  :root{ --header-h:108px; }
  .brand img{ height:82px; }
  .nav-toggle{ display:none; }
  .main-nav{
    position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
    height:auto; background:none;
    flex-direction:row; gap:clamp(1.5rem,3.2vw,4.2rem);
    visibility:visible; transition:none;
  }
  .site-header.nav-open .main-nav{ transform:translate(-50%,-50%); }
  .main-nav a{ color:#fff; font-size:.98rem; }
  .site-header.scrolled{ height:82px; }
  .site-header.scrolled .brand img{ height:62px; }
  .site-header.scrolled .main-nav a{ color:var(--ink); }
  .search{ display:flex; align-items:center; }
  .search-toggle{
    background:none; border:0; cursor:pointer; color:#fff;
    display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
    transition:background .3s,color .3s,transform .3s;
  }
  .search-toggle:hover{ background:rgba(255,255,255,.14); transform:scale(1.08); }
  .search-field{
    width:0; opacity:0; border:0; border-bottom:2px solid #fff; background:transparent;
    color:#fff; font-family:var(--sans); font-size:.95rem; letter-spacing:.06em;
    padding:.35rem .2rem; outline:none;
    transition:width .45s var(--ease-out), opacity .3s;
  }
  .search.open .search-field{ width:190px; opacity:1; }
  .search-field::placeholder{ color:rgba(255,255,255,.65); }
  .site-header.scrolled .search-toggle{ color:var(--ink); }
  .site-header.scrolled .search-toggle:hover{ background:rgba(28,28,28,.08); }
  .site-header.scrolled .search-field{ border-color:var(--ink); color:var(--ink); }
  .site-header.scrolled .search-field::placeholder{ color:rgba(0,0,0,.45); }
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  min-height:clamp(480px, 100vw, 620px);
  display:flex; align-items:center;
  overflow:hidden; isolation:isolate;
}
@media (min-width:900px){
  .hero{ min-height:clamp(600px, 48.7vw, 940px); }
  .hero--page{ min-height:clamp(560px, 56vw, 1075px); }
}
.hero-bg{
  position:absolute; inset:0; z-index:-1;
  background-size:cover; background-position:center;
  animation:heroZoom 16s var(--ease-soft) forwards;
}
@keyframes heroZoom{ from{ transform:scale(1.08);} to{ transform:scale(1);} }
.hero--home .hero-bg{ background-image:url('../images/hero-home.png'); }
.hero--about .hero-bg{ background-image:url('../images/hero-about.jpg'); }
.hero--fleet .hero-bg{ background-image:url('../images/hero-fleet.png'); }
.hero--cargo .hero-bg{ background-image:url('../images/hero-cargo.png'); }
.hero--contact .hero-bg{ background-image:url('../images/hero-contact.png'); }

.hero-inner{ padding-top:2.5rem; }
.hero-title{
  font-family:var(--serif); font-weight:600; color:#fff;
  font-size:clamp(2rem, 6.4vw, 5.3rem);
  line-height:1.22; max-width:15em;
  text-shadow:0 3px 24px rgba(3,14,32,.5);
}
@media (min-width:900px){ .hero-title{ font-size:clamp(2.1rem, 4.4vw, 5.3rem); } }
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .line>span{
  display:block; transform:translateY(112%);
  animation:lineUp 1s var(--ease-out) forwards;
  animation-delay:calc(.25s + var(--i)*.16s);
}
@keyframes lineUp{ to{ transform:none; } }
.hero-sub{
  font-family:var(--sans); font-weight:600; color:#eef4fa;
  font-size:clamp(1rem, 1.45vw, 1.75rem); letter-spacing:.02em;
  margin:1.8rem 0 2.6rem;
  opacity:0; animation:fadeUp 1s var(--ease-out) .9s forwards;
}
.hero-cta{
  display:flex; gap:1.4rem; flex-wrap:wrap;
  opacity:0; animation:fadeUp 1s var(--ease-out) 1.15s forwards;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:none;} }

.page-title{
  font-family:var(--serif); font-weight:600; color:#fff;
  font-size:clamp(2.4rem, 8vw, 6.2rem); line-height:1.05;
  text-shadow:0 4px 26px rgba(3,14,32,.45); overflow:hidden;
}
@media (min-width:900px){ .page-title{ font-size:clamp(2.6rem, 5.2vw, 6.2rem); } }
.page-title span{ display:block; transform:translateY(110%);
  animation:lineUp .9s var(--ease-out) .3s forwards; }

/* buttons */
.btn{
  font-family:var(--sans); font-weight:800; font-size:.95rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:1rem 2.3rem; border-radius:999px;
  display:inline-flex; align-items:center; gap:.65rem;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .3s, color .3s, border-color .3s;
}
.btn .arr{ transition:transform .3s var(--ease-out); }
.btn:hover .arr{ transform:translateX(5px); }
.btn-purple{
  background:var(--purple); color:#fff;
  box-shadow:0 8px 26px rgba(132,21,58,.4);
}
.btn-purple:hover{ background:var(--purple-dark); transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(132,21,58,.5); }
.btn-outline{
  background:#fff; color:var(--ink);
  border:1.5px solid var(--ink);
}
.btn-outline:hover{ background:var(--ink); color:#fff; transform:translateY(-3px); }
.btn-outline:hover .arr{ transform:translate(4px,-3px); }

/* labels + headings */
.label{
  font-family:var(--sans); font-weight:900; color:var(--blue);
  letter-spacing:.1em; text-transform:uppercase;
  font-size:clamp(1rem, 1.25vw, 1.5rem); margin-bottom:1.5rem;
}
.h-serif{
  font-family:var(--serif); font-weight:600; color:var(--purple);
  font-size:clamp(1.8rem, 5.4vw, 3.75rem); line-height:1.22;
}
@media (min-width:900px){ .h-serif{ font-size:clamp(1.9rem, 3.1vw, 3.75rem); } }
.center{ text-align:center; }

/* ============================================================
   Who we are (home)
   ============================================================ */
.who{
  position:relative;
  background:var(--tint-1);
  padding:clamp(3.5rem, 6.2vw, 7.5rem) 0;
  overflow:hidden;
}
.who::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:url('../images/bg-ship-faded.jpg') left top/cover no-repeat;
  opacity:.35;
}
@media (min-width:900px){
  .who{ background:var(--tint-1) url('../images/bg-ship-faded.jpg') left center/auto 100% no-repeat; }
  .who::before{ content:none; }
}
.who .container{ position:relative; z-index:1; }
.who-grid{ display:grid; gap:2.5rem; align-items:center; }
@media (min-width:900px){
  .who-grid{ grid-template-columns:10fr 9fr; gap:clamp(2.5rem, 5vw, 7rem); }
}
.who-copy p{
  font-size:clamp(1rem, 1.15vw, 1.38rem); line-height:1.55;
  color:#222; margin-bottom:1.4rem; max-width:44em;
}
.who .h-serif{ margin-bottom:2.2rem; }
.who-media{ overflow:hidden; box-shadow:0 20px 50px rgba(12,30,60,.18); }
.who-media img{ width:100%; transition:transform 1.2s var(--ease-soft); }
.who-media:hover img{ transform:scale(1.05); }

/* ============================================================
   Why choose — cards
   ============================================================ */
.why{
  background:var(--tint-2);
  padding:clamp(3.5rem, 6.2vw, 7.5rem) 0;
  text-align:center;
}
.why .h-serif{ margin-bottom:clamp(2.4rem, 4.6vw, 5rem); }
.why-grid{
  display:grid; grid-template-columns:1fr;
  gap:1.6rem; text-align:left;
  max-width:420px; margin-inline:auto;
}
@media (min-width:640px){ .why-grid{ grid-template-columns:1fr 1fr; max-width:none; margin-inline:0; gap:1.6rem; } }
@media (min-width:1000px){ .why-grid{ grid-template-columns:repeat(4,1fr); gap:clamp(1.4rem, 2.2vw, 2.8rem); } }
.wcard{
  background:#fff; border:1px solid var(--card-line); border-radius:16px;
  position:relative;
  box-shadow:0 6px 22px rgba(15,40,80,.06);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.wcard:hover{ transform:translateY(-10px); box-shadow:0 24px 48px rgba(15,40,80,.14); }
.wcard-photo{
  border-radius:15px 15px 0 0; overflow:hidden;
  height:clamp(150px, 22vw, 186px);
}
@media (min-width:1000px){ .wcard-photo{ height:clamp(130px, 9.2vw, 178px); } }
.wcard-photo img{ width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease-soft); }
.wcard:hover .wcard-photo img{ transform:scale(1.08); }
.wcard-icon{
  position:absolute; left:1.5rem;
  top:clamp(150px, 22vw, 186px);
  transform:translateY(-50%);
  width:clamp(58px, 9vw, 75px); height:clamp(58px, 9vw, 75px);
  border-radius:50%; border:3px solid #fff;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(15,40,80,.25);
  transition:transform .4s var(--ease-out);
}
@media (min-width:1000px){
  .wcard-icon{ top:clamp(130px, 9.2vw, 178px); width:clamp(58px, 3.9vw, 75px); height:clamp(58px, 3.9vw, 75px); }
}
.wcard:hover .wcard-icon{ transform:translateY(-50%) scale(1.1) rotate(-4deg); }
.wcard-icon img{ width:100%; height:100%; object-fit:cover; }
.wcard-body{ padding:3rem 1.5rem 1.9rem; }
.wcard-body h3{
  font-family:var(--serif); font-weight:700; color:var(--purple);
  font-size:clamp(1.3rem, 1.6vw, 1.9rem); line-height:1.2; margin-bottom:.85rem;
}
.wcard-body p{
  font-size:clamp(.92rem, 1vw, 1.2rem); line-height:1.5; color:var(--grey);
}

/* ============================================================
   Core cargoes — split (home)
   ============================================================ */
.cargo{ display:grid; grid-template-columns:1fr; }
@media (min-width:860px){ .cargo{ grid-template-columns:1fr 1.02fr; } }
.cargo-media{ overflow:hidden; max-height:420px; }
@media (min-width:860px){ .cargo-media{ max-height:none; } }
.cargo-media img{ width:100%; height:100%; object-fit:cover;
  transform:scale(1.001); transition:transform 1.4s var(--ease-soft); }
.cargo-media:hover img{ transform:scale(1.06); }
.cargo-panel{
  background:var(--blue); color:#fff;
  padding:clamp(2.8rem, 5vw, 6rem) clamp(1.4rem, 5vw, 7rem);
}
.cargo-panel .label{ color:var(--light-blue); }
.cargo-panel h2{
  font-family:var(--serif); font-weight:600; color:#fff;
  font-size:clamp(1.8rem, 2.9vw, 3.5rem); margin-bottom:clamp(1.8rem, 3.4vw, 3.6rem);
}
.cargo-row{
  display:flex; align-items:center; gap:1.4rem;
  padding:.9rem 0;
  transition:transform .35s var(--ease-out);
}
.cargo-row:hover{ transform:translateX(10px); }
.cargo-row img{
  width:clamp(60px, 4.6vw, 88px); height:clamp(60px, 4.6vw, 88px);
  border-radius:50%; flex-shrink:0;
  transition:transform .4s var(--ease-out);
}
.cargo-row:hover img{ transform:scale(1.1) rotate(-4deg); }
.cargo-row .txt{
  font-family:var(--body); font-weight:700; color:#fff;
  font-size:clamp(1rem, 1.2vw, 1.45rem); line-height:1.3;
}
.cargo-row .txt small{ display:block; font-weight:400; font-size:.86em; opacity:.95; }

/* ============================================================
   About page
   ============================================================ */
.about-block{ padding:clamp(3.5rem, 6.2vw, 7.5rem) 0; }
.about-block .h-serif{ margin-bottom:clamp(2rem, 4vw, 4.4rem); }
.about-grid{ display:grid; gap:2.4rem; align-items:center; }
@media (min-width:900px){
  .about-grid{ grid-template-columns:10fr 11fr; gap:clamp(2.5rem, 4.5vw, 6rem); }
}
.about-photo{ border-radius:20px; overflow:hidden; box-shadow:0 20px 50px rgba(12,30,60,.2); }
.about-photo img{ width:100%; transition:transform 1.2s var(--ease-soft); }
.about-photo:hover img{ transform:scale(1.05); }
.about-copy p{
  font-size:clamp(1rem, 1.13vw, 1.36rem); line-height:1.58;
  color:#222; margin-bottom:1.4rem; text-align:justify;
}

/* strategic foundation */
.foundation{ padding:clamp(3rem, 5.5vw, 6.5rem) 0 clamp(3.5rem, 6vw, 7rem); }
.foundation-grid{ display:grid; gap:2.4rem; align-items:center; }
@media (min-width:900px){
  .foundation-grid{ grid-template-columns:11fr 9fr; gap:clamp(2.5rem, 4.5vw, 6rem); }
}
.foundation-copy p{
  font-size:clamp(1rem, 1.13vw, 1.36rem); line-height:1.58;
  color:#222; margin-bottom:1.4rem; text-align:justify; max-width:46em;
}
.quote-card{
  position:relative; border-radius:22px; overflow:hidden;
  background:var(--purple) url('../images/card-partnership.png') center/cover no-repeat;
  padding:clamp(2.2rem, 3.6vw, 4rem) clamp(1.8rem, 3.2vw, 3.6rem);
  box-shadow:0 24px 54px rgba(132,21,58,.35);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.quote-card:hover{ transform:translateY(-8px); box-shadow:0 32px 64px rgba(132,21,58,.45); }
.quote-card p{
  font-family:var(--serif); font-weight:600; color:#fff;
  font-size:clamp(1.4rem, 2.15vw, 2.6rem); line-height:1.35;
}
.quote-card p + p{ margin-top:1.1rem; }

/* sea strip divider */
.sea-strip{ overflow:hidden; }
.sea-strip img{ width:100%; }

/* vision / mission */
.vm{ display:grid; grid-template-columns:1fr; }
@media (min-width:860px){ .vm{ grid-template-columns:1fr 1.02fr; } }
.vm-panel{
  position:relative;
  background-size:cover; background-position:center;
  padding:3rem 1.6rem 3.2rem;
}
@media (min-width:860px){
  .vm-panel{
    min-height:clamp(480px, 45vw, 900px);
    padding:clamp(2.8rem, 8vw, 9.5rem) clamp(1.8rem, 8.4vw, 10rem) clamp(2.8rem, 5vw, 6rem);
  }
}
.vm-vision{ background-color:var(--blue); background-image:url('../images/panel-vision.jpg'); color:#fff; }
.vm-mission{ background-color:var(--light-blue); background-image:url('../images/panel-mission.jpg'); color:var(--ink); }
.vm-icon{
  height:clamp(70px, 7vw, 132px); width:auto;
  margin-bottom:clamp(1.6rem, 6.5vw, 120px);
  transition:transform .5s var(--ease-out);
}
.vm-panel:hover .vm-icon{ transform:translateY(-6px) scale(1.05); }
.vm-content h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.7rem, 2.5vw, 3.1rem);
  letter-spacing:.04em; margin-bottom:clamp(1rem, 1.8vw, 2.2rem);
}
.vm-content p{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.15rem, 1.75vw, 2.1rem); line-height:1.42; max-width:17em;
}

/* values */
.values{ padding:clamp(3.5rem, 6.2vw, 7.5rem) 0; text-align:center; }
.values .label{ margin-bottom:clamp(2.2rem, 4.2vw, 4.6rem); }
.values-grid{
  display:grid; grid-template-columns:1fr;
  gap:1.4rem; max-width:340px; margin-inline:auto;
}
@media (min-width:640px){ .values-grid{ grid-template-columns:repeat(3,1fr); max-width:none; margin-inline:0; } }
@media (min-width:1000px){ .values-grid{ grid-template-columns:repeat(5,1fr); gap:clamp(1.2rem, 1.8vw, 2.2rem); } }
.vcard{
  background:#fff; border:1.5px solid var(--card-line); border-radius:12px;
  padding:2.1rem 1.2rem 1.8rem;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s;
}
.vcard:hover{ transform:translateY(-9px); border-color:var(--blue);
  box-shadow:0 20px 42px rgba(15,40,80,.12); }
.vcard img{ height:60px; width:auto; margin:0 auto 1.1rem;
  transition:transform .45s var(--ease-out); }
.vcard:hover img{ transform:translateY(-5px) scale(1.08); }
.vcard .tick{ width:48px; height:2px; background:var(--purple); margin:0 auto 1rem; }
.vcard h3{
  font-family:var(--serif); font-weight:700; color:var(--purple);
  font-size:clamp(1.25rem, 1.5vw, 1.8rem); margin-bottom:.85rem;
}
.vcard p{ font-size:clamp(.9rem, .97vw, 1.16rem); line-height:1.5; color:var(--grey); }

/* ============================================================
   Fleet page
   ============================================================ */
.fleet-intro{ padding:clamp(3.5rem, 6.2vw, 7.5rem) 0 clamp(3rem, 5vw, 6rem); text-align:center; }
.fleet-intro .h-serif{ margin-bottom:clamp(2.4rem, 4.4vw, 4.8rem); }
.fleet-intro-grid{
  display:grid; gap:2.2rem; align-items:center; text-align:left;
}
@media (min-width:900px){
  .fleet-intro-grid{ grid-template-columns:1fr 2fr; gap:clamp(2.5rem, 4.5vw, 6rem); }
}
.fleet-intro-photo{ overflow:hidden; box-shadow:0 16px 40px rgba(12,30,60,.16); }
.fleet-intro-photo img{ width:100%; transition:transform 1.2s var(--ease-soft); }
.fleet-intro-photo:hover img{ transform:scale(1.05); }
.fleet-intro-copy p{
  font-size:clamp(1rem, 1.15vw, 1.38rem); line-height:1.55;
  color:#222; margin-bottom:1.8rem;
}
.pill-row{ display:flex; gap:1.1rem; flex-wrap:wrap; }
.pill{
  font-family:var(--sans); font-weight:800; color:#fff;
  background:var(--blue); border-radius:999px;
  font-size:clamp(.92rem, 1.05vw, 1.3rem);
  padding:.65rem 1.9rem;
  box-shadow:0 6px 18px rgba(24,117,186,.3);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .3s;
}
.pill:hover{ transform:translateY(-4px); background:var(--blue-dark);
  box-shadow:0 12px 26px rgba(24,117,186,.4); }

.vessels{ background:var(--tint-2); padding:clamp(3.5rem, 6.2vw, 7.5rem) 0; text-align:center; }
.vessels .h-serif{ margin-bottom:clamp(2.4rem, 4.4vw, 4.8rem); }
.vessel-grid{ display:grid; grid-template-columns:1fr; gap:2rem; text-align:left; }
@media (min-width:640px){
  .vessel-grid{ grid-template-columns:1fr 1fr; gap:1.8rem; }
}
@media (min-width:1000px){
  .vessel-grid{ grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem, 2.2vw, 2.8rem); }
}
.vessel-card{
  background:#fff; border-radius:22px; overflow:hidden;
  box-shadow:0 14px 40px rgba(15,40,80,.1);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.vessel-card:hover{ transform:translateY(-10px); box-shadow:0 30px 60px rgba(15,40,80,.16); }
.vessel-photo{ position:relative; overflow:hidden; }
.vessel-photo img{ width:100%; aspect-ratio:700/398; object-fit:cover;
  transition:transform 1.1s var(--ease-soft); }
.vessel-card:hover .vessel-photo img{ transform:scale(1.06); }
.vessel-photo h3{
  position:absolute; left:clamp(1.2rem, 2.6vw, 2.6rem); bottom:clamp(.9rem, 2vw, 1.9rem);
  font-family:var(--serif); font-weight:600; color:#fff;
  font-size:clamp(1.6rem, 2.4vw, 2.9rem); letter-spacing:.03em;
  text-shadow:0 3px 18px rgba(3,14,32,.65);
}
.vessel-specs{
  display:grid; grid-template-columns:1fr 1fr;
  gap:1.1rem 1.5rem;
  padding:clamp(1.6rem, 2.6vw, 2.8rem) clamp(1.4rem, 2.6vw, 2.8rem) 1rem;
}
.spec .k{
  font-family:var(--sans); font-weight:700; color:#9a9a9a;
  font-size:clamp(.75rem, .8vw, .95rem); letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:.25rem;
}
.spec .v{
  font-family:var(--body); font-weight:700; color:var(--ink);
  font-size:clamp(1.05rem, 1.2vw, 1.45rem);
}
.vessel-link{
  display:inline-flex; align-items:center; gap:.6rem;
  margin:1.1rem clamp(1.4rem, 2.6vw, 2.8rem) clamp(1.5rem, 2.4vw, 2.4rem);
  padding-top:1.2rem;
  font-family:var(--sans); font-weight:800; color:var(--purple);
  letter-spacing:.1em; text-transform:uppercase; font-size:clamp(.9rem, 1vw, 1.15rem);
  transition:color .3s;
}
.vessel-card .vessel-divider{
  height:1px; background:#3b3b3b;
  margin:0 clamp(1.4rem, 2.6vw, 2.8rem);
}
.vessel-link .arr{ transition:transform .3s var(--ease-out); }
.vessel-link:hover{ color:var(--purple-dark); }
.vessel-link:hover .arr{ transform:translateX(6px); }
/* 3-up desktop cards are narrower — scale card type accordingly */
@media (min-width:1000px){
  .vessel-photo h3{ font-size:clamp(1.35rem, 1.55vw, 1.9rem); }
  .vessel-specs{ gap:1rem 1.2rem; padding:clamp(1.4rem, 1.8vw, 2rem) clamp(1.3rem, 1.7vw, 2rem) .9rem; }
  .spec .v{ font-size:clamp(1rem, 1vw, 1.2rem); }
  .vessel-card .vessel-divider{ margin:0 clamp(1.3rem, 1.7vw, 2rem); }
  .vessel-link{ margin:1rem clamp(1.3rem, 1.7vw, 2rem) clamp(1.3rem, 1.8vw, 2rem); }
}

/* ============================================================
   Cargo & Solutions page
   ============================================================ */
.cargoes{ padding:clamp(3.5rem, 6.2vw, 7.5rem) 0; text-align:center; }
.cargoes .h-serif{ margin-bottom:clamp(2.4rem, 4.6vw, 5rem); }
.cargo-grid2{ display:grid; grid-template-columns:1fr; gap:1.8rem; text-align:left; }
@media (min-width:860px){
  .cargo-grid2{ grid-template-columns:1fr 1fr; gap:clamp(1.8rem, 2.4vw, 3rem); }
}
.ccard{
  position:relative; overflow:hidden;
  box-shadow:0 12px 34px rgba(15,40,80,.12);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.ccard:hover{ transform:translateY(-8px); box-shadow:0 26px 54px rgba(15,40,80,.18); }
.ccard img{ width:100%; aspect-ratio:785/480; object-fit:cover;
  transition:transform 1.1s var(--ease-soft); }
.ccard:hover img{ transform:scale(1.06); }
.ccard .num{
  position:absolute; top:clamp(1rem, 2vw, 1.9rem); left:clamp(1.2rem, 2.4vw, 2.4rem);
  font-family:var(--sans); font-weight:700; color:#fff; font-size:clamp(1rem, 1.2vw, 1.4rem);
  text-shadow:0 2px 8px rgba(3,14,32,.5);
}
.ccard-body{
  position:absolute; left:clamp(1.2rem, 2.4vw, 2.4rem); right:clamp(1.2rem, 2.4vw, 2.4rem);
  bottom:clamp(1rem, 2.2vw, 2rem);
  color:#fff;
}
.ccard-body h3{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.5rem, 2.3vw, 2.75rem); margin-bottom:.5rem;
  text-shadow:0 2px 14px rgba(3,14,32,.45);
}
.ccard-body p{
  font-size:clamp(.95rem, 1.05vw, 1.3rem); line-height:1.45;
  text-shadow:0 1px 8px rgba(3,14,32,.4);
}

.approach{ background:var(--tint-2); padding:clamp(3.5rem, 6.2vw, 7.5rem) 0; }
.approach-grid{ display:grid; gap:2.4rem; align-items:center; }
@media (min-width:900px){
  .approach-grid{ grid-template-columns:1fr 1.05fr; gap:clamp(2.5rem, 4.5vw, 6.5rem); }
}
.approach-copy .h-serif{ margin-bottom:clamp(1.6rem, 3vw, 3.2rem); }
.approach-copy > p{
  font-size:clamp(1rem, 1.15vw, 1.38rem); line-height:1.55;
  color:#222; margin-bottom:2.2rem; max-width:34em;
}
.approach-photo{ overflow:hidden; box-shadow:0 18px 46px rgba(12,30,60,.16); }
.approach-photo img{ width:100%; transition:transform 1.2s var(--ease-soft); }
.approach-photo:hover img{ transform:scale(1.05); }

/* ============================================================
   Contact page
   ============================================================ */
.contact-block{ padding:clamp(1.5rem, 1.2vw, 1.5rem) 0; }
.contact-grid{ display:grid; gap:2.4rem; align-items:center; }
@media (min-width:900px){
  .contact-grid{ grid-template-columns:11fr 9fr; gap:clamp(2.5rem, 5vw, 7rem); }
}
.contact-copy .h-serif{ margin-bottom:1.6rem; }
.contact-copy p{
  font-size:clamp(1rem, 1.15vw, 1.38rem); line-height:1.55;
  color:#222; max-width:34em;
}
.email-card{
  position:relative;
  background:#fff;
  border:1px solid var(--blue);
  border-left:0;
  padding:clamp(2rem, 3.4vw, 3.6rem) clamp(1.6rem, 3vw, 3.4rem);
  display:block;
  transition:box-shadow .4s var(--ease-out), transform .4s var(--ease-out);
}
.email-card::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:7px;
  background:var(--purple);
}
.email-card:hover{ transform:translateY(-5px); box-shadow:0 20px 46px rgba(15,40,80,.14); }
.email-card .k{
  font-family:var(--sans); font-weight:700; color:#9a9a9a;
  letter-spacing:.1em; text-transform:uppercase;
  font-size:clamp(.8rem, .9vw, 1rem); margin-bottom:1rem;
}
.email-card .v{
  font-family:var(--serif); font-weight:600; color:var(--ink);
  font-size:clamp(1.15rem, 2vw, 2.4rem);
  word-break:break-all;
  transition:color .3s;
}
.email-card:hover .v{ color:var(--blue); }

.offices{ background:var(--tint-2); padding:clamp(1.5rem, 1.2vw, 1.5rem) 0; }
.offices .h-serif{ margin-bottom:clamp(2rem, 3.8vw, 4rem); }
.office-grid{ display:grid; grid-template-columns:1fr; gap:1.8rem; }
@media (min-width:860px){
  .office-grid{ grid-template-columns:1fr 1fr; gap:clamp(1.8rem, 3.4vw, 4.2rem); }
}
.ocard{
  position:relative; overflow:hidden;
  box-shadow:0 14px 38px rgba(15,40,80,.14);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.ocard:hover{ transform:translateY(-8px); box-shadow:0 28px 56px rgba(15,40,80,.2); }
.ocard img{ width:100%; aspect-ratio:757/850; object-fit:cover;
  transition:transform 1.2s var(--ease-soft); }
.ocard:hover img{ transform:scale(1.05); }
.ocard::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(5,10,20,.66) 0%, rgba(5,10,20,.12) 45%, transparent 65%);
}
.ocard-body{
  position:absolute; left:clamp(1.3rem, 2.6vw, 2.8rem); right:1.3rem; bottom:clamp(1.3rem, 2.6vw, 2.8rem);
  color:#fff; z-index:1;
}
.ocard-body .country{
  font-family:var(--sans); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; font-size:clamp(.85rem, 1vw, 1.15rem);
  margin-bottom:.6rem; opacity:.95;
}
.ocard-body h3{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.7rem, 2.5vw, 3rem); margin-bottom:.8rem;
}
.ocard-body p{ font-size:clamp(.95rem, 1.05vw, 1.3rem); line-height:1.5; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ background:var(--footer); color:#fff; }
.footer-grid{
  display:grid; grid-template-columns:1fr;
  padding:clamp(2.8rem, 5vw, 5.5rem) 0;
  gap:2rem;
}
@media (min-width:900px){
  .footer-grid{ grid-template-columns:5fr 5fr 6fr; gap:clamp(2rem, 3.5vw, 4.5rem); }
}
.footer-brand-col{ text-align:center; justify-self:center; }
@media (min-width:900px){ .footer-brand-col{ justify-self:start; } }
.footer-brand img{ height:clamp(110px, 10vw, 150px); width:auto; margin-inline:auto;
  transition:transform .5s var(--ease-out); }
.footer-brand img:hover{ transform:scale(1.04); }
.footer-tag{
  font-family:var(--serif); color:#9a9a98;
  font-size:clamp(1rem, 1.1vw, 1.32rem); line-height:1.6; margin-top:1.3rem;
}
.fcol{ border-top:1px solid rgba(255,255,255,.2); padding-top:1.7rem; }
@media (min-width:900px){
  .fcol{ border-top:0; padding-top:0; border-left:1px solid rgba(255,255,255,.22); padding-left:clamp(1.8rem, 3.2vw, 4rem); }
}
.fcol h4{
  font-family:var(--serif); font-weight:700; color:var(--blue);
  letter-spacing:.06em; font-size:clamp(1.25rem, 1.5vw, 1.8rem); margin-bottom:1.4rem;
}
.fcol ul li{ margin-bottom:1.05rem; }
.fcol ul a{
  font-weight:700; font-size:clamp(1rem, 1.1vw, 1.3rem);
  display:inline-flex; align-items:center; gap:.85rem;
  transition:color .3s, transform .3s var(--ease-out);
}
.fcol ul a::before{
  content:''; width:8px; height:8px; border-radius:50%;
  border:1.5px solid #fff; flex-shrink:0; transition:background .3s, border-color .3s;
}
.fcol ul a:hover{ color:var(--blue); transform:translateX(6px); }
.fcol ul a:hover::before{ background:var(--blue); border-color:var(--blue); }
.office-line{
  display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem;
  font-weight:700; font-size:clamp(1rem, 1.15vw, 1.4rem);
}
.office-line img{ width:36px; height:36px; border-radius:50%; object-fit:cover; }
.femail{
  display:inline-flex; align-items:center; gap:.8rem; margin-top:1.3rem;
  color:#fff; font-size:clamp(.95rem, 1.1vw, 1.3rem);
  text-decoration:underline; text-underline-offset:4px; transition:color .3s;
  word-break:break-all;
}
.femail:hover{ color:var(--blue); }
.copyright{ background:var(--footer-bar); padding:1.15rem 0 4.4rem; border-top:1px solid #232220; }
@media (min-width:640px){ .copyright{ padding:1.15rem 0; } }
.copyright .container{
  display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap;
  text-align:center;
}
@media (min-width:900px){ .copyright .container{ justify-content:space-between; text-align:left; } }
.copyright p{ font-weight:700; font-size:clamp(.85rem, .92vw, 1.1rem); }
.legal{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; justify-content:center; }
.legal a{ font-size:clamp(.85rem, .92vw, 1.1rem); transition:color .3s; }
.legal a:hover{ color:var(--blue); }
.legal .sep{ color:#666; padding:0 .5rem; }

/* back to top */
.to-top{
  position:fixed; right:1.1rem; bottom:1.1rem; width:42px; height:42px;
  border-radius:50%; border:0; background:var(--purple); color:#fff;
  font-size:.95rem; cursor:pointer;
  box-shadow:0 8px 24px rgba(132,21,58,.4);
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .4s, transform .4s, background .3s; z-index:90;
}
@media (min-width:640px){
  .to-top{ width:48px; height:48px; right:1.6rem; bottom:1.6rem; font-size:1.1rem; }
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--purple-dark); }

.explore-links a {display: block;}
.explore-links a:hover {color:var(--blue);}