/* ============================================================
   SHIPVEST — Brand refresh layer
   Typography: Bebas Neue (headings) + Poppins (UI/body)
   Palette:  #03045E  #0077B6  #00B4D8  #90E0EF  #CAF0F8
   Loaded last. Layout and content untouched.
   ============================================================ */

:root{
  --brand-900:#03045E;
  --brand-700:#0077B6;
  --brand-500:#00B4D8;
  --brand-300:#90E0EF;
  --brand-100:#CAF0F8;
  --brand-ink:#2B4A8F;
}

/* ---------- Typography ---------- */
body,
button, input, select, textarea,
.nav-link, .filter-pill, .breadcrumb-list, .enquire-fab{
  font-family:'Poppins', system-ui, sans-serif;
}
body{ letter-spacing:0; }

h1, h2, h3, h4, h5, h6,
.font-display,
.hero-headline,
.together-headline,
.mega-item-title,
.info-drawer-heading,
.map-place-name,
.presence-card-name{
  font-family:'Bebas Neue', Impact, system-ui, sans-serif;
  font-weight:400;
  letter-spacing:.025em;
}

/* Bebas is condensed with tall caps — negative tracking and loose
   leading from the old Sora scale need neutralising. */
h1.tracking-tight, h2.tracking-tight, h3.tracking-tight,
.font-display.tracking-tight,
.hero-headline, .together-headline{ letter-spacing:.02em; }

h1, h2, .hero-headline, .together-headline{ line-height:1.02; }
h3, h4, h5, h6{ line-height:1.12; }
.hero-headline{ font-size:clamp(2.5rem, 5.4vw + 1rem, 5.6rem); }
.together-headline{ font-size:clamp(2.15rem, 3.4vw + 1rem, 3.8rem); }
.mega-item-title{ font-size:1.0625rem; letter-spacing:.03em; }
.info-drawer-heading{ font-size:.85rem; letter-spacing:.16em; color:var(--brand-500); }
.presence-card-name{ font-size:1.1rem; letter-spacing:.03em; }
.map-place-name{ font-size:.82rem; letter-spacing:.03em; }
/* Legacy inline 15px card titles read small in condensed Bebas */
.font-display[style*="font-size: 15px"]{ font-size:1.0625rem !important; }
.footer-col-heading{ font-family:'Bebas Neue', Impact, sans-serif; font-weight:400; font-size:.9rem; line-height:1.4; }

/* Small caps-style labels stay in Poppins for legibility */
.hero-scroll-label,
.text-\[9px\], .text-\[10px\]{ font-family:'Poppins', system-ui, sans-serif; }
.brand-sub{ font-family:'Poppins', system-ui, sans-serif; font-weight:500; }
.brand-name{ font-family:'Bebas Neue', Impact, sans-serif; font-weight:400; letter-spacing:.06em; font-size:1.4rem; }

/* Buttons / nav in Poppins */
.enquire-fab{ font-weight:600; letter-spacing:.05em; }
.nav-link{ font-weight:500; }
.site-header .nav-link{ font-size:.8375rem; }

/* ---------- Colour accents ---------- */
/* Primary CTA: vibrant blue gradient instead of flat fill */
.bg-teal-500{
  background-image:linear-gradient(120deg, #0077B6 0%, #00B4D8 100%);
  box-shadow:0 10px 30px -12px rgba(0,119,182,.55);
}
.hover\:bg-teal-600:hover{
  background-image:linear-gradient(120deg, #005F92 0%, #0096C7 100%);
  box-shadow:0 16px 36px -14px rgba(0,119,182,.6);
}
.group:hover .group-hover\:bg-teal-500{
  background-image:linear-gradient(120deg, #0077B6 0%, #00B4D8 100%);
}
.enquire-fab{ background:linear-gradient(135deg,#00B4D8 0%, #0077B6 55%, #03045E 130%); }

/* Secondary / outline buttons */
.border-navy-200{ border-color:#A3D5EE; }
.hover\:border-teal-400:hover{ border-color:#00B4D8; }

/* Links & interactive text */
a{ color:inherit; }
a:hover{ color:#0077B6; }
.text-teal-600, .text-teal-500{ color:#0077B6; }
.hover\:text-teal-600:hover, .hover\:text-teal-500:hover{ color:#00B4D8; }
header.site-header.is-scrolled .nav-link:hover{ color:#0077B6; }
header.site-header .nav-link:hover{ color:#90E0EF; }

/* Section eyebrow rules and dividers */
.bg-teal-400{ background-color:#00B4D8; }
.border-navy-100{ border-color:#CBE8F7; }
.divide-navy-100>:not([hidden])~:not([hidden]){ border-color:#CBE8F7; }

/* Cards: crisper elevation, blue-tinted shadow */
.shadow-soft{ box-shadow:0 10px 34px -14px rgba(3,4,94,.16); }
.shadow-soft-lg, .hover\:shadow-soft-lg:hover{ box-shadow:0 26px 60px -22px rgba(0,119,182,.32); }
.feature-card-glow{ background:linear-gradient(135deg, rgba(0,119,182,.55), rgba(0,180,216,.55)); }

/* Icon chips */
.bg-navy-50{ background-color:#F1FAFD; }
.bg-teal-50{ background-color:#EAF9FD; }
.mega-item-icon{ background:#EAF9FD; color:#0077B6; }
.mega-item:hover .mega-item-icon{ background:linear-gradient(120deg,#0077B6,#00B4D8); color:#fff; }

/* Hero */
.hero-accent{
  color:#00B4D8;
  background:linear-gradient(100deg,#48CAE4 0%,#90E0EF 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-dot.is-active{ background:#00B4D8; }

/* Filter pills */
.filter-pill:hover{ border-color:#00B4D8; color:#0077B6; }
.filter-pill.is-active{
  background:linear-gradient(120deg,#03045E 0%,#0077B6 100%);
  border-color:#03045E;
  box-shadow:0 10px 28px -12px rgba(3,4,94,.45);
}

/* Focus states */
.focus\:border-teal-400:focus{ border-color:#0077B6; }
.focus\:ring-teal-100:focus{ --tw-ring-color:rgba(0,180,216,.35); }
.focus-visible\:ring-sky-300\/50:focus-visible{ --tw-ring-color:rgba(0,180,216,.45); }

::selection{ background-color:rgba(0,180,216,.28); color:#03045E; }

/* Dual Fuel collage — offset editorial pair with an accent frame */
.dual-fuel-collage{ position:relative; padding:0 0 5.5rem 0; }
.dual-fuel-frame{
  position:absolute; right:-.75rem; top:-.75rem; width:62%; height:58%;
  border:1.5px solid rgba(0,180,216,.45); border-radius:1.25rem; pointer-events:none;
}
.dual-fuel-figure{ margin:0; position:relative; }
.dual-fuel-figure img{ display:block; width:100%; height:auto; border-radius:1rem; }
.dual-fuel-tall{
  width:72%; margin-left:auto;
  border-radius:1rem; overflow:hidden;
  box-shadow:0 34px 70px -28px rgba(1,2,31,.85);
  outline:1px solid rgba(255,255,255,.12); outline-offset:-1px;
}
.dual-fuel-wide{
  position:absolute; left:0; bottom:0; width:62%;
  border-radius:1rem; overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(1,2,31,.9);
  outline:3px solid #03045E; outline-offset:-1px;
}
@media (max-width:639px){
  .dual-fuel-collage{ padding-bottom:0; display:flex; flex-direction:column; gap:1rem; }
  .dual-fuel-frame{ display:none; }
  .dual-fuel-tall, .dual-fuel-wide{ position:static; width:100%; }
}

/* Services mega-menu — was translucent glass, page content bled through */
.mega-menu-panel.glass{
  background:#FFFFFF;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid #CBE8F7;
  box-shadow:0 30px 80px -24px rgba(3,4,94,.32), 0 2px 8px rgba(3,4,94,.06);
}
.mega-item:hover{ background-color:#F1FAFD; }

/* Header info toggle — larger, ringed, with a vibrant hover fill */
.site-header .info-toggle{
  height:2.75rem; width:2.75rem;
  border:1.5px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(6px);
  transition:background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.site-header .info-toggle svg{ height:1.375rem; width:1.375rem; stroke-width:2.1; }
.site-header .info-toggle .info-toggle-glyph{
  font-family:Georgia, 'Times New Roman', serif;
  font-style:italic;
  font-weight:700;
  font-size:1.35rem;
  line-height:1;
  letter-spacing:0;
  padding-right:.06em;
  transform:translateY(-.02em);
}
.site-header .info-toggle:hover{
  background:linear-gradient(135deg,#00B4D8 0%, #0077B6 100%);
  border-color:transparent;
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 10px 24px -10px rgba(0,119,182,.65);
}
header.site-header.is-scrolled .info-toggle{
  border-color:#A3D5EE;
  background:#F1FAFD;
  color:#0077B6;
}
header.site-header.is-scrolled .info-toggle:hover{
  background:linear-gradient(135deg,#00B4D8 0%, #0077B6 100%);
  border-color:transparent;
  color:#fff;
}
.site-header .info-toggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(0,180,216,.4);
}
::-webkit-scrollbar-thumb{ background:#0077B6; }
::-webkit-scrollbar-thumb:hover{ background:#03045E; }

/* anchor offset for the sticky header when jumping to #industries */
#industries{ scroll-margin-top:88px; }

#services{ scroll-margin-top:88px; }
@media (min-width:1024px){ .service-media{ position:sticky; top:7rem; } }

.service-portfolio-grid{ display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:1024px){
  .service-portfolio-grid{ grid-template-columns:minmax(0,340px) minmax(0,1fr); align-items:start; }
  .service-portfolio-media{ position:sticky; top:7rem; }
}
/* Marine Spare Parts page */
.spp-lead-text{ margin-top:1.5rem; font-size:1rem; line-height:1.7; color:#03045E; font-weight:500; }
.spp-text{ font-size:1rem; line-height:1.7; color:#4a6e9e; }
.spp-text-invert{ font-size:1rem; line-height:1.7; color:rgba(202,240,248,.85); }
@media (min-width:640px){
  .spp-lead-text, .spp-text, .spp-text-invert{ font-size:1.125rem; line-height:1.7; }
}

.spp-figure{ margin:0; overflow:hidden; border-radius:1.5rem; box-shadow:0 28px 60px -28px rgba(3,4,94,.45); }
.spp-figure img{ display:block; width:100%; height:auto; }
.spp-figure-lg{ box-shadow:0 34px 70px -30px rgba(3,4,94,.5); }
.spp-figure-sm{ max-width:26rem; }

.spp-collage{ position:relative; padding-bottom:4.5rem; }
.spp-collage-main{ width:78%; margin-left:auto; border-radius:1.5rem; box-shadow:0 34px 70px -28px rgba(1,2,31,.85); outline:1px solid rgba(255,255,255,.12); outline-offset:-1px; }
.spp-collage-inset{ position:absolute; left:0; bottom:0; width:46%; border-radius:1.25rem; box-shadow:0 26px 55px -24px rgba(1,2,31,.9); outline:3px solid #03045E; outline-offset:-1px; }
@media (max-width:640px){
  .spp-collage{ display:flex; flex-direction:column; gap:1rem; padding-bottom:0; }
  .spp-collage-main, .spp-collage-inset{ position:static; width:100%; }
}

.spp-grid{ list-style:none; margin:3.5rem 0 0; padding:0; display:grid; gap:.85rem; grid-template-columns:1fr; }
@media (min-width:640px){ .spp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .spp-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.spp-item{ display:flex; align-items:flex-start; gap:.8rem; padding:1rem 1.15rem;
  border:1px solid #E3EFF8; border-radius:1rem; background:#fff;
  box-shadow:0 10px 34px -20px rgba(3,4,94,.18);
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.spp-item:hover{ border-color:#90E0EF; box-shadow:0 20px 44px -22px rgba(0,119,182,.5); transform:translateY(-3px); }
.spp-item-icon{ display:grid; place-items:center; height:1.5rem; width:1.5rem; flex:0 0 auto; margin-top:.05rem;
  border-radius:999px; background:#EAF9FD; color:#0077B6; transition:background-color .25s ease, color .25s ease; }
.spp-item:hover .spp-item-icon{ background:linear-gradient(120deg,#0077B6,#00B4D8); color:#fff; }
.spp-item-label{ font-size:.95rem; font-weight:500; line-height:1.5; color:#03045E; }


/* Light, uniform image corners */
img:not(.rounded-full):not([class*="rounded-full"]):not(.brand-logo){ border-radius:12px !important; }
figure:has(> img), picture:has(> img),
[class*="rounded"]:has(> img):not(.rounded-full),
[class*="rounded"]:has(> picture):not(.rounded-full){ border-radius:12px !important; }
.spp-figure, .spp-collage-main, .spp-collage-inset,
.dual-fuel-figure img, .dual-fuel-tall, .dual-fuel-wide, .dual-fuel-frame{ border-radius:12px !important; }


/* premium image + card interactions */
.spp-figure, .service-media > div, .page-media-frame{ position:relative; overflow:hidden; }
.spp-figure img, .service-media > div > img, .service-media figure img, .page-media-frame img{
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease; will-change: transform; backface-visibility:hidden;
}
.spp-figure:hover img, .service-media > div:hover > img, .service-media figure:hover img, .page-media-frame:hover img{
  transform: scale(1.055); filter: saturate(1.06) contrast(1.02);
}
.spp-figure::after, .page-media-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, rgba(0,180,216,.16), rgba(3,4,94,.28));
  opacity:0; transition:opacity .45s ease;
}
.spp-figure:hover::after, .page-media-frame:hover::after{ opacity:1; }
.spp-figure, .page-media-frame{ transition: box-shadow .45s ease, transform .45s ease; }
.spp-figure:hover, .page-media-frame:hover{ transform:translateY(-4px); box-shadow:0 38px 78px -30px rgba(3,4,94,.55); }

/* solid premium information panel (replaces glassmorphism) */
.glass-panel, .svc-panel-dark{
  position:relative;
  background:linear-gradient(150deg,#041049 0%,#03045E 55%,#012A4A 100%);
  border:1px solid rgba(144,224,239,.18);
  box-shadow:0 34px 80px -40px rgba(0,0,0,.85);
  padding:2rem; transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.glass-panel::before, .svc-panel-dark::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:5.5rem;
  background:linear-gradient(90deg,#0077B6,#00B4D8);
}
.glass-panel:hover, .svc-panel-dark:hover{
  border-color:rgba(0,180,216,.45); transform:translateY(-3px);
  box-shadow:0 44px 92px -42px rgba(0,0,0,.95);
}
@media (min-width:640px){ .glass-panel, .svc-panel-dark{ padding:2.5rem; } }

.svc-panel-light{
  position:relative; background:#fff; border:1px solid #E3EFF8; padding:2rem;
  box-shadow:0 22px 60px -34px rgba(3,4,94,.35);
  transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.svc-panel-light::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:5.5rem;
  background:linear-gradient(90deg,#0077B6,#00B4D8);
}
.svc-panel-light:hover{ border-color:#90E0EF; transform:translateY(-3px); box-shadow:0 30px 70px -34px rgba(0,119,182,.45); }
@media (min-width:640px){ .svc-panel-light{ padding:2.5rem; } }

/* layered accent frame behind a media block */
.svc-frame{ position:relative; }
.svc-frame::before{
  content:""; position:absolute; right:-.85rem; bottom:-.85rem; width:58%; height:62%;
  border:1.5px solid rgba(0,180,216,.5); pointer-events:none; z-index:0;
}
.svc-frame > *{ position:relative; z-index:1; }
.svc-frame-left::before{ right:auto; left:-.85rem; }

/* card + icon micro-interactions */
.spp-item{ transition:border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,.7,.2,1), background-color .3s ease; }
.spp-item:hover{ transform:translateY(-4px); }
.spp-item .spp-item-icon{ transition:background .3s ease, color .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.spp-item:hover .spp-item-icon{ transform:scale(1.12) rotate(-6deg); }

/* Industries — glass tiles over photo backdrop */
#industries .industry-tile{
  background:rgba(255,255,255,.62) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
  border-color:rgba(255,255,255,.75) !important;
  box-shadow:0 18px 40px -26px rgba(3,4,94,.45), inset 0 1px 0 rgba(255,255,255,.85);
  transition:background-color .35s ease, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}
#industries .industry-tile:hover{
  background:rgba(255,255,255,.86) !important;
  border-color:rgba(0,180,216,.5) !important;
  transform:translateY(-5px);
  box-shadow:0 30px 60px -28px rgba(3,4,94,.5);
}
#industries .industry-tile > span.rounded-xl{ background:rgba(234,246,253,.9) !important; }
#industries .text-navy-500{ color:#2C4C77; }

/* on hover the chip fills teal, so the white icon reads */
#industries .industry-tile:hover > span.rounded-xl{ background:#0096C7 !important; color:#fff !important; }


/* ---------- Global image treatment: light radius + hover zoom ---------- */
img:not(.brand-logo):not([class*="rounded-full"]):not([alt*="logo" i]){
  border-radius:12px;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
img:not(.brand-logo):not([class*="rounded-full"]):not([alt*="logo" i]):hover{
  transform:scale(1.05);
}
/* Containers that already clip their media keep the zoom inside the frame */
figure, .spp-figure, .dual-fuel-tall, .dual-fuel-wide,
.overflow-hidden{ overflow:hidden; }
@media (prefers-reduced-motion: reduce){
  img:hover{ transform:none; }
}


/* ---------- Brand logo lockup ---------- */
.brand-logo{
  display:block; width:auto; max-width:100%;
  border-radius:0 !important;
  transform:none !important;
}
.brand-logo-plate{ background:none; padding:0; box-shadow:none; }
@media (max-width:480px){
  .brand-logo{ height:36px !important; }
}

.brand-logo{ height:48px; }
.brand-logo-plate{ height:48px; }

/* Header logo swaps with the scrolled (white) header state */
.brand-logo-dark{ display:none; }
header.site-header.is-scrolled .brand-logo-light{ display:none; }
header.site-header.is-scrolled .brand-logo-dark{ display:block; }

/* Lift the header lockup off bright hero imagery */
header.site-header:not(.is-scrolled) .brand-logo-light{
  filter: drop-shadow(0 2px 10px rgba(3,4,94,.55));
}