/* =============================================================
   AJ MARINE SERVICES — style.css
   Light theme, navy + gold (from company crest), animated & organic.
   ============================================================= */

:root{
  --navy-900:#0A1F4A;
  --navy-800:#0F2A5E;
  --navy-700:#15397D;
  --royal:#1D5FC2;
  --royal-light:#4C8DE8;
  --gold-700:#A87A1E;
  --gold-600:#C9971F;
  --gold-500:#E0AC30;
  --gold-300:#F1CF7C;
  --ice:#F5F8FC;
  --ice-2:#EAF2FB;
  --white:#FFFFFF;
  --ink:#0F1F3D;
  --ink-soft:#48567A;
  --ink-faint:#7C89A8;
  --line:rgba(15,31,74,.10);

  --font-head:'Playfair Display', serif;
  --font-body:'Inter', sans-serif;

  --radius-lg:28px;
  --radius-md:16px;
  --radius-sm:10px;
  --shadow-soft:0 20px 50px -24px rgba(10,31,74,.25);
  --shadow-deep:0 30px 70px -20px rgba(10,31,74,.32);
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;width:100%;}
body{
  font-family:var(--font-body);
  color:var(--ink-soft);
  background:var(--ice);
  overflow-x:hidden;
  position:relative;
  width:100%;
  max-width:100vw;
  line-height:1.68;
  font-size:16px;
}

/* animate.css entrance transforms (fadeInLeft/Right) paint outside the layout
   box on some mobile browsers; clip that at the nearest section boundary so
   it never creates a horizontal scrollbar. */
section, footer{overflow-x:hidden;}
.container-xl, .row{max-width:100%;}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
  color:var(--navy-900);
  font-weight:700;
  margin:0;
}
p{margin:0;color:var(--ink-soft);}
a{text-decoration:none;color:inherit;transition:color .25s var(--ease);}
img{max-width:100%;display:block;}
::selection{background:var(--gold-500);color:var(--navy-900);}
:focus-visible{outline:2px solid var(--gold-600);outline-offset:3px;}

/* @media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
} */

.container-xl{max-width:1280px;}

/* -------- Type & utility -------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.05em;
  color:var(--gold-700);
  margin-bottom:1rem;
}
.eyebrow i{font-size:.85rem;}
.section-title{
  font-size:clamp(1.9rem,3.2vw,2.85rem);
  line-height:1.18;
  color:var(--navy-900);
}
.section-title em{font-style:italic;color:var(--gold-700);font-weight:700;}
.section-lede{color:var(--ink-faint);font-size:1.05rem;max-width:600px;}
.section-pad{padding:6rem 0;}
.bg-ice2{background:var(--ice-2);}

.btn-brand{
  display:inline-flex;align-items:center;gap:.65rem;
  background:linear-gradient(135deg,var(--gold-500),var(--gold-700));
  color:var(--navy-900);
  font-weight:700;font-size:.95rem;
  padding:.95rem 1.9rem;
  border-radius:100px;
  border:none;
  box-shadow:0 12px 30px -12px rgba(201,151,31,.55);
  transition:all .35s var(--ease);
  position:relative;
  overflow:hidden;
}
.btn-brand:hover{transform:translateY(-3px);box-shadow:0 18px 36px -12px rgba(201,151,31,.65);color:var(--navy-900);}
.btn-outline-brand{
  display:inline-flex;align-items:center;gap:.65rem;
  background:transparent;
  color:var(--white);
  font-weight:600;font-size:.95rem;
  padding:.9rem 1.85rem;
  border-radius:100px;
  border:1.5px solid rgba(255,255,255,.55);
  transition:all .3s var(--ease);
}
.btn-outline-brand:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff;transform:translateY(-3px);}
.btn-brand i,.btn-outline-brand i{transition:transform .3s var(--ease);font-size:.8rem;}
.btn-brand:hover i,.btn-outline-brand:hover i{transform:translateX(4px);}

/* =============================================================
   PRELOADER
   ============================================================= */
#preloader{
  position:fixed;inset:0;z-index:9999;
  background:var(--ice);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
#preloader.loaded{opacity:0;visibility:hidden;}
.preloader-badge{width:76px;height:76px;margin-bottom:1.4rem;animation:bob 2.4s ease-in-out infinite;}
.preloader-badge img{width:100%;height:100%;object-fit:contain;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.preloader-brand{font-family:var(--font-head);font-weight:700;color:var(--navy-900);font-size:1.1rem;}
.preloader-tag{color:var(--ink-faint);font-size:.8rem;margin-top:.3rem;}

/* =============================================================
   TOP BAR
   ============================================================= */
.topbar{
  background:var(--navy-900);
  color:rgba(245,248,252,.8);
  font-size:.82rem;
  padding:.55rem 0;
}
.topbar a{color:rgba(245,248,252,.9);}
.topbar a:hover{color:var(--gold-500);}
.topbar .divider{width:1px;height:14px;background:rgba(245,248,252,.2);display:inline-block;}
.topbar-item{display:inline-flex;align-items:center;gap:.5rem;}
.topbar-item i{color:var(--gold-500);font-size:.78rem;}

/* =============================================================
   NAVBAR
   ============================================================= */
.navbar-brand-wrap{display:flex;align-items:center;gap:.7rem;}
.brand-mark{width:52px;height:52px;flex-shrink:0;}
.brand-mark img{width:100%;height:100%;object-fit:contain;}
.brand-text{line-height:1.05;}
.brand-text .name{font-family:var(--font-head);font-weight:700;font-size:1.15rem;color:var(--navy-900);display:block;}
.brand-text .sub{font-size:.68rem;color:var(--gold-700);font-weight:600;letter-spacing:.08em;display:block;margin-top:.1rem;}

.site-header{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  padding:.7rem 0;
  transition:all .35s var(--ease);
  position:sticky;top:0;z-index:1000;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{box-shadow:0 8px 28px -18px rgba(10,31,74,.3);border-bottom-color:var(--line);padding:.45rem 0;}
.main-nav .nav-link{
  font-weight:600;font-size:.93rem;color:var(--ink-soft);
  padding:.6rem 1.05rem !important;position:relative;
}
.main-nav .nav-link.active,.main-nav .nav-link:hover{color:var(--navy-900);}
.main-nav .nav-link.active::after{
  content:"";position:absolute;left:1.05rem;right:1.05rem;bottom:.15rem;height:2px;
  background:var(--gold-600);border-radius:2px;
}
.nav-career-btn{
  background:var(--navy-900);color:var(--white) !important;border-radius:100px;
  padding:.6rem 1.4rem !important;margin-left:.4rem;
}
.nav-career-btn:hover{background:var(--gold-600);color:var(--navy-900) !important;}
.nav-career-btn.active::after{display:none;}

/* =============================================================
   HERO — living, animated
   ============================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  overflow:hidden;
  background:var(--navy-900);
}
.hero-bg{
  position:absolute;inset:-4% -2%;
  background-size:cover;background-position:center;
  will-change:transform;
  transition:transform .1s linear;
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(6,16,38,.92) 12%, rgba(10,31,74,.68) 50%, rgba(10,31,74,.42) 82%),
    linear-gradient(0deg, rgba(4,10,24,.55), rgba(4,10,24,.05) 40%);
}

/* floating bubbles */
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
.bubble{
  position:absolute;bottom:-40px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,.05));
  animation:rise linear infinite;
  opacity:.5;
}
@keyframes rise{
  0%{transform:translateY(0) translateX(0);opacity:0;}
  10%{opacity:.5;}
  100%{transform:translateY(-110vh) translateX(20px);opacity:0;}
}

/* drifting gulls */
.gulls{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.55;}
.gull{position:absolute;animation:drift linear infinite;}
@keyframes drift{
  0%{transform:translateX(-8vw) translateY(0);}
  100%{transform:translateX(108vw) translateY(-18px);}
}

/* nautical chart overlay: lat/long ticks, dashed route + waypoints, compass rose */
.chart-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;}
.chart-overlay svg{width:100%;height:100%;}

/* slow-rotating compass ring behind the crest badge */
.hero-badge-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.hero-ring{
  position:absolute;top:50%;left:50%;width:150%;height:150%;
  transform:translate(-50%,-50%);
  border:1px dashed rgba(224,172,48,.45);
  border-radius:50%;
  animation:spin 40s linear infinite;
}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg);}}
.hero-crest{width:74px;height:74px;animation:bob 3.6s ease-in-out infinite;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));}
.hero-crest img{width:100%;height:100%;object-fit:contain;}

/* floating glass log-card — crest + service tag + metrics, all in one panel */
.hero-log-card{
  background:rgba(10,31,74,.4);
  backdrop-filter:blur(14px);
  border:1px solid rgba(224,172,48,.3);
  border-radius:24px;
  padding:2rem 1.9rem;
  color:#fff;
  position:relative;
  max-width:340px;
  margin:0 auto;
}
.hero-log-card .top-row{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,.14);}
.hero-log-card .tag{font-family:var(--font-head);font-weight:700;font-size:1.05rem;}
.hero-log-card .flow{color:rgba(255,255,255,.6);font-size:.72rem;letter-spacing:.03em;margin-top:.2rem;}
.hero-metric-row{display:flex;justify-content:space-between;gap:.5rem;}
.hero-metric{text-align:left;}
.hero-metric .num{font-family:var(--font-head);font-weight:700;font-size:1.4rem;color:var(--gold-400);}
.hero-metric .lbl{font-size:.65rem;letter-spacing:.02em;color:rgba(255,255,255,.55);margin-top:.1rem;}

.hero-inner{position:relative;z-index:2;padding-top:1rem;}
.hero-kicker{
  display:inline-flex;align-items:center;gap:.6rem;color:var(--gold-300);
  font-weight:600;font-size:.85rem;letter-spacing:.04em;
  padding:.5rem 1.05rem;border-radius:100px;
  background:rgba(255,255,255,.08);border:1px solid rgba(224,172,48,.35);
  margin-bottom:1.7rem;
}
.hero-kicker i{color:var(--gold-500);}
.hero h1{color:#fff;font-size:clamp(2.3rem,5vw,3.7rem);line-height:1.12;max-width:15ch;font-weight:700;}
.hero h1 em{color:var(--gold-400);font-style:italic;}
.hero-desc{color:rgba(255,255,255,.8);font-size:1.12rem;max-width:500px;margin-top:1.4rem;}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.3rem;}

.scroll-cue{
  position:absolute;bottom:1.7rem;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  color:rgba(255,255,255,.6);font-size:.68rem;letter-spacing:.14em;font-weight:600;
}
.scroll-cue .line{width:1px;height:32px;background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,0));position:relative;overflow:hidden;}
.scroll-cue .line::after{content:"";position:absolute;top:-32px;left:0;width:100%;height:32px;background:linear-gradient(rgba(255,255,255,0),var(--gold-400),rgba(255,255,255,0));animation:cue-drop 1.8s var(--ease) infinite;}
@keyframes cue-drop{to{top:32px;}}

/* animated living wave divider — two layered waves drifting sideways */
.wave-divider{position:relative;line-height:0;z-index:2;height:110px;overflow:hidden;margin-top:-2px;}
.wave-divider svg{position:absolute;width:calc(100% + 120px);height:100%;}
.wave-back{animation:wave-move 22s linear infinite;opacity:.55;}
.wave-front{animation:wave-move 14s linear infinite reverse;}
@keyframes wave-move{
  0%{transform:translateX(0);}
  100%{transform:translateX(-120px);}
}

/* =============================================================
   ABOUT — compact, single frame, no wasted space
   ============================================================= */
.section-pad-tight{padding:4rem 0;}
.about-media{position:relative;}
.about-frame{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  box-shadow:var(--shadow-deep);
}
.about-frame img{height:360px;width:100%;object-fit:cover;display:block;}
.about-frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,31,74,0) 55%, rgba(6,16,38,.55) 100%);
}
.about-badge{
  position:absolute;left:1rem;top:1rem;z-index:2;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(6px);
  border-radius:100px;
  padding:.55rem 1.1rem .55rem .7rem;
  display:flex;align-items:center;gap:.55rem;
  box-shadow:var(--shadow-soft);
}
.about-badge .yr{
  font-family:var(--font-head);font-weight:700;font-size:.72rem;color:#fff;
  background:var(--gold-500);width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.about-badge .lb{font-size:.68rem;color:var(--ink-soft);font-weight:600;letter-spacing:.02em;}
.about-caption{
  position:absolute;left:1.1rem;bottom:1rem;right:1.1rem;z-index:2;
  color:#fff;font-size:.8rem;font-weight:500;
}

.about-copy{font-size:.96rem;}
.about-copy p + p{margin-top:.7rem;}
.about-stats{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem;}
.about-stat{
  background:var(--white);
  border-radius:100px;
  padding:.65rem 1.1rem .65rem .65rem;
  display:flex;align-items:center;gap:.6rem;
  box-shadow:0 10px 26px -20px rgba(10,31,74,.35);
  transition:transform .3s var(--ease);
}
.about-stat:hover{transform:translateY(-3px);}
.about-stat .dot{width:30px;height:30px;border-radius:50%;background:var(--ice-2);color:var(--gold-700);display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0;}
.about-stat .h{font-family:var(--font-head);font-weight:700;color:var(--navy-900);font-size:.82rem;line-height:1.2;}
.about-stat .d{font-size:.66rem;color:var(--ink-faint);}

/* =============================================================
   TIMELINE — flowing route, no boxes
   ============================================================= */
.timeline-wrap{position:relative;margin-top:3.5rem;}
.timeline-track{display:flex;justify-content:space-between;position:relative;gap:1rem;}
.timeline-track::before{
  content:"";position:absolute;top:19px;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold-500),var(--royal-light),var(--gold-500));
  border-radius:3px;opacity:.35;
}
.timeline-item{position:relative;flex:1;min-width:0;}
.timeline-dot{
  width:40px;height:40px;border-radius:50%;background:var(--white);
  border:2px solid var(--gold-500);color:var(--gold-700);
  display:flex;align-items:center;justify-content:center;font-size:.85rem;
  position:relative;z-index:2;margin-bottom:1.3rem;
  box-shadow:0 10px 24px -14px rgba(201,151,31,.6);
  transition:all .35s var(--ease);
}
.timeline-item:hover .timeline-dot{background:var(--gold-500);color:#fff;transform:scale(1.1);}
.timeline-item .yr{font-family:var(--font-head);font-weight:700;color:var(--navy-900);font-size:1.2rem;margin-bottom:.35rem;}
.timeline-item h4{font-size:1.02rem;margin-bottom:.4rem;}
.timeline-item p{font-size:.88rem;}

/* =============================================================
   SERVICES — soft flowing rows, not boxed cards
   ============================================================= */
.service-row{
  display:flex;align-items:flex-start;gap:1.6rem;
  padding:2rem 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .4s var(--ease);
}
.service-row:first-child{padding-top:0;}
.service-row:hover{padding-left:.6rem;}
.service-icon{
  width:68px;height:68px;border-radius:50%;
  background:linear-gradient(135deg,var(--ice-2),#fff);
  color:var(--navy-800);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;flex-shrink:0;
  box-shadow:0 14px 30px -18px rgba(10,31,74,.4);
  transition:all .4s var(--ease);
}
.service-row:hover .service-icon{background:linear-gradient(135deg,var(--gold-500),var(--gold-700));color:#fff;transform:rotate(-8deg) scale(1.06);}
.service-num{font-size:.78rem;color:var(--gold-700);font-weight:700;letter-spacing:.04em;margin-bottom:.3rem;display:block;}
.service-row h3{font-size:1.2rem;margin-bottom:.5rem;}
.service-row p{font-size:.92rem;max-width:560px;}
.service-link{
  font-weight:700;font-size:.85rem;color:var(--navy-900);
  display:inline-flex;align-items:center;gap:.5rem;margin-top:.8rem;
}
.service-link i{font-size:.72rem;transition:transform .3s var(--ease);}
.service-row:hover .service-link{color:var(--gold-700);}
.service-row:hover .service-link i{transform:translateX(4px);}

/* =============================================================
   VESSEL SHOWCASE — organic masonry gallery
   ============================================================= */
.vessel-tile{
  position:relative;border-radius:26px;overflow:hidden;isolation:isolate;
  box-shadow:0 20px 44px -24px rgba(10,31,74,.4);
}
.vessel-tile.tall{height:420px;}
.vessel-tile.short{height:198px;}
.vessel-tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.vessel-tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(10,20,45,.85) 0%, rgba(10,20,45,.1) 55%, rgba(10,20,45,0) 75%);
}
.vessel-tile:hover img{transform:scale(1.08);}
.vessel-label{position:absolute;left:1.4rem;bottom:1.2rem;right:1.4rem;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:.8rem;}
.vessel-label h4{color:#fff;font-size:1.05rem;margin-bottom:.1rem;}
.vessel-label span{color:rgba(255,255,255,.7);font-size:.76rem;}
.vessel-arrow{
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.4);color:#fff;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(8px);transition:all .35s var(--ease);flex-shrink:0;
}
.vessel-tile:hover .vessel-arrow{opacity:1;transform:translateY(0);}

/* =============================================================
   WHY CHOOSE — light, image-backed, icon rows (no dark bg)
   ============================================================= */
.why-section{position:relative;overflow:hidden;}
.why-media{position:relative;border-radius:32px;overflow:hidden;box-shadow:var(--shadow-deep);height:100%;min-height:420px;}
.why-media img{width:100%;height:100%;object-fit:cover;}
.why-media::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg, rgba(10,31,74,.15), rgba(10,31,74,.55));}
.why-media .quote{position:absolute;left:1.8rem;right:1.8rem;bottom:1.8rem;color:#fff;z-index:2;}
.why-media .quote .big{font-family:var(--font-head);font-size:1.3rem;font-style:italic;}
.why-list{display:flex;flex-direction:column;}
.why-row{display:flex;gap:1.2rem;padding:1.15rem 0;border-bottom:1px solid var(--line);}
.why-row:first-child{padding-top:0;}
.why-row:last-child{border-bottom:none;}
.why-icon{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  background:var(--ice-2);color:var(--navy-800);
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
}
.why-row h4{font-size:1.02rem;margin-bottom:.3rem;}
.why-row p{font-size:.88rem;}

/* =============================================================
   PROCESS — distinct "flow" design: solid medallions + arrows
   (deliberately different from the Journey dotted-line timeline)
   ============================================================= */
.flow-track{display:flex;align-items:flex-start;margin-top:3.2rem;}
.flow-step{
  flex:1;min-width:0;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 .8rem;
}
.flow-icon{
  position:relative;
  width:76px;height:76px;border-radius:50%;
  background:linear-gradient(145deg,var(--navy-800),var(--navy-900));
  color:var(--gold-400);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;margin-bottom:1.4rem;
  box-shadow:0 16px 32px -16px rgba(10,31,74,.55);
  transition:transform .35s var(--ease);
}
.flow-step:hover .flow-icon{transform:translateY(-5px) scale(1.05);}
.flow-icon .flow-num{
  position:absolute;top:-6px;right:-6px;
  width:26px;height:26px;border-radius:50%;
  background:var(--gold-500);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.66rem;font-weight:700;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.35);
}
.flow-step h5{font-size:.98rem;margin-bottom:.5rem;}
.flow-step p{font-size:.83rem;max-width:210px;}
.flow-arrow{
  flex-shrink:0;
  color:var(--gold-500);
  opacity:.55;
  font-size:1rem;
  margin-top:32px;
}

/* =============================================================
   CAREER CTA — light, image-faded (no solid dark block)
   ============================================================= */
.career-cta{position:relative;padding:5.5rem 0;overflow:hidden;}
.career-cta-panel{
  position:relative;border-radius:36px;overflow:hidden;
  min-height:340px;display:flex;align-items:center;
  box-shadow:var(--shadow-deep);
}
.career-cta-panel .bg-img{position:absolute;inset:0;background-size:cover;background-position:center 35%;}
.career-cta-panel::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(6,16,38,.92) 20%, rgba(10,31,74,.55) 60%, rgba(10,31,74,.25) 100%);
}
.career-cta-panel .inner{position:relative;z-index:2;padding:3rem;}
.career-cta-panel h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.4rem);max-width:16ch;}
.career-cta-panel p{color:rgba(255,255,255,.78);max-width:440px;margin-top:.9rem;}

/* =============================================================
   CONTACT
   ============================================================= */
.contact-item{display:flex;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line);}
.contact-item:last-child{border-bottom:none;}
.contact-item .ic{
  width:46px;height:46px;flex-shrink:0;border-radius:50%;
  background:var(--ice-2);color:var(--navy-800);
  display:flex;align-items:center;justify-content:center;
}
.contact-item .lb{font-size:.78rem;color:var(--ink-faint);}
.contact-item .vl{font-family:var(--font-head);font-weight:700;color:var(--navy-900);font-size:1rem;}

.contact-form-card{background:#fff;border-radius:var(--radius-lg);padding:2.3rem;box-shadow:var(--shadow-soft);}
.form-label{font-weight:600;font-size:.85rem;color:var(--navy-900);margin-bottom:.4rem;}
.form-control,.form-select{
  border:1.5px solid var(--line);border-radius:12px;background:var(--ice);
  padding:.72rem .95rem;font-size:.92rem;color:var(--ink);
}
.form-control:focus,.form-select:focus{border-color:var(--gold-600);box-shadow:0 0 0 4px rgba(201,151,31,.14);background:#fff;}
.invalid-feedback{font-size:.78rem;}

/* =============================================================
   FOOTER — light (no dark bg)
   ============================================================= */
.site-footer{background:var(--ice-2);color:var(--ink-soft);border-top:1px solid var(--line);position:relative;}
.site-footer h6{color:var(--navy-900);font-weight:700;font-size:.95rem;margin-bottom:1.3rem;}
.site-footer .f-links li{margin-bottom:.7rem;}
.site-footer .f-links a{font-size:.9rem;color:var(--ink-soft);}
.site-footer .f-links a:hover{color:var(--gold-700);}
.site-footer p{color:var(--ink-faint);font-size:.9rem;}
.footer-brand-row{display:flex;align-items:center;gap:.65rem;margin-bottom:1.1rem;}
.footer-brand-row .name{color:var(--navy-900);font-family:var(--font-head);font-weight:700;font-size:1.1rem;}
.social-row{display:flex;gap:.6rem;margin-top:1.4rem;}
.social-row a{
  width:38px;height:38px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--navy-800);
  transition:all .3s var(--ease);font-size:.85rem;box-shadow:0 8px 20px -14px rgba(10,31,74,.4);
}
.social-row a:hover{background:var(--gold-600);color:#fff;transform:translateY(-3px);}
.footer-bottom{border-top:1px solid var(--line);padding:1.4rem 0;font-size:.83rem;color:var(--ink-faint);}

/* -------- Back to top -------- */
.back-to-top{
  position:fixed;right:1.6rem;bottom:1.6rem;width:46px;height:46px;border-radius:50%;
  background:var(--navy-900);color:#fff;display:flex;align-items:center;justify-content:center;
  z-index:900;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:all .35s var(--ease);box-shadow:var(--shadow-soft);
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top:hover{background:var(--gold-600);}

/* =============================================================
   CAREER PAGE SPECIFIC
   ============================================================= */
.page-hero{position:relative;min-height:60vh;display:flex;align-items:center;background:var(--navy-900);overflow:hidden;}
.page-hero h1{color:#fff;font-size:clamp(2.1rem,4.4vw,3.2rem);max-width:16ch;}
.page-hero p{color:rgba(255,255,255,.78);max-width:500px;margin-top:1.1rem;font-size:1.05rem;}
.breadcrumb-row{display:flex;align-items:center;gap:.6rem;color:rgba(255,255,255,.6);font-size:.85rem;margin-bottom:1.4rem;}
.breadcrumb-row a{color:rgba(255,255,255,.9);font-weight:600;}
.breadcrumb-row a:hover{color:var(--gold-400);}

.job-row{
  display:flex;align-items:center;gap:1.1rem;
  padding:1.4rem 1.6rem;
  border-radius:20px;
  transition:all .35s var(--ease);
  background:#fff;
  box-shadow:0 14px 32px -24px rgba(10,31,74,.3);
}
.job-row:hover{transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(10,31,74,.35);}
.job-row .ic{
  width:52px;height:52px;flex-shrink:0;border-radius:50%;
  background:var(--ice-2);color:var(--navy-800);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
}
.job-row h5{font-size:1rem;margin-bottom:.2rem;}
.job-row span{font-size:.8rem;color:var(--ink-faint);}

.app-form-card{background:#fff;border-radius:var(--radius-lg);padding:2.6rem;box-shadow:var(--shadow-soft);}
.form-section-title{font-family:var(--font-head);font-weight:700;color:var(--navy-900);font-size:1.05rem;margin-bottom:1.2rem;padding-bottom:.7rem;border-bottom:1px solid var(--line);}
.upload-box{
  border:1.5px dashed var(--line);border-radius:16px;padding:1.5rem;text-align:center;
  transition:all .3s var(--ease);cursor:pointer;background:var(--ice);
}
.upload-box:hover,.upload-box.dragover{border-color:var(--gold-600);background:var(--ice-2);}
.upload-box i{font-size:1.6rem;color:var(--gold-700);margin-bottom:.6rem;}
.upload-box .fname{font-size:.83rem;color:var(--navy-900);font-weight:600;margin-top:.5rem;}

.success-banner{
  display:none;background:#EAF7EE;border:1px solid #BCE7C6;color:#1E6B34;border-radius:var(--radius-md);
  padding:1.4rem 1.6rem;margin-bottom:1.8rem;align-items:flex-start;gap:.9rem;
}
.success-banner.show{display:flex;}
.success-banner i{font-size:1.3rem;margin-top:.1rem;}

.career-intro-figure{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-deep);position:relative;}
.career-intro-figure img{height:420px;object-fit:cover;width:100%;}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:991.98px){
  .section-pad{padding:4.5rem 0;}
  .section-pad-tight{padding:3.2rem 0;}
  .flow-track{flex-direction:column;gap:1.8rem;align-items:stretch;}
  .flow-step{flex-direction:row;text-align:left;padding:0;}
  .flow-icon{margin-bottom:0;margin-right:1.2rem;flex-shrink:0;}
  .flow-step p{max-width:none;}
  .flow-arrow{display:none;}
  .timeline-track{flex-direction:column;gap:2.4rem;}
  .timeline-track::before{top:0;bottom:0;left:19px;right:auto;width:3px;height:auto;}
  .timeline-item{display:flex;gap:1.2rem;align-items:flex-start;}
  .timeline-dot{margin-bottom:0;flex-shrink:0;}
  .about-media{margin-bottom:3rem;max-width:100%;}
  .why-media{min-height:280px;margin-bottom:2rem;}
  .hero-log-card{margin:0;max-width:100%;}
  .chart-overlay{display:none;}
}
@media (max-width:767.98px){
  .hero{min-height:auto;padding:8.5rem 0 5rem;}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .hero-actions .btn-brand,.hero-actions .btn-outline-brand{justify-content:center;}
  .about-frame img{height:260px;}
  .about-stats{gap:.55rem;}
  .about-stat{padding:.55rem .9rem .55rem .55rem;}
  .contact-form-card,.app-form-card{padding:1.6rem;}
  .vessel-tile.tall,.vessel-tile.short{height:230px;}
  .career-cta-panel .inner{padding:2rem;}
}
@media (max-width:420px){
  .hero-log-card{padding:1.5rem;}
  .hero-metric-row{flex-wrap:wrap;gap:1rem;}
}



/* Background Section */
  .count_new {
    background-image: url(../images/Oil-Tankers.png); /* Ensure the path to your image is correct */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    display: flex; /* Use Flexbox for content centering */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    height: 60vh; /* Use dynamic height for all devices */
  }

  @media (max-width: 768px) {
    .counter-wrapper {
      padding: 1rem; /* Reduce padding for smaller devices */
    }

    .counter-icon {
      font-size: 1.5rem; /* Reduce icon size */
    }

    .counter-info h1.counter {
      font-size: 2rem; /* Reduce counter font size */
    }

    .counter-info p {
      font-size: 0.9rem; /* Adjust paragraph font size */
    }

    .count_new {
      height: 27vh; /* Adjust height for smaller screens */
    }
  }

  @media (max-width: 576px) {
    .count_new {
      height: 60vh; /* Further reduce height for extra small devices */
    }

    .counter-wrapper {
      flex-direction: column;
      padding: 0.8rem;
    }

    .counter-info h1.counter {
      font-size: 2rem;
    }

    .counter-info p {
      font-size: 0.8rem;
    }
  }

  .ss-eyebrow{
    font-size: 1.1rem;
    letter-spacing: 2px;
    font-weight: 500;
    margin-bottom: 6px;
    opacity: .95;
    color: var(--ice-2);
  }

  .ss-heading{
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 6vw, 4.2rem);
    line-height: 1.1;
    color: white;
    margin-bottom: 20px;
  }

  .ss-wave-icon{
    font-size: 1.6rem;
    color: var(--ice);
    margin-bottom: 26px;
    letter-spacing: 6px;
  }

  .ss-btn-outline{
    border: 2px solid #fff;
    color: #fff;
    background: transparent;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: .85rem;
    transition: .25s ease;
  }
  .ss-btn-outline:hover{
    background: #fff;
    color: #111;
  }

  .ss-btn-solid{
    border: none;
    background: var(--navy-700);
    color: #fff;
    padding: 12px 34px;
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: .85rem;
    transition: .25s ease;
  }
  .ss-btn-solid:hover{
    background: var(--navy-900);
    color: #fff;
  }



   .ss-whatsapp-btn{
    position: fixed;
    left: 24px;
    bottom: 24px;
    width: 58px;
    height: 58px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.3);
    z-index: 999;
    text-decoration: none;
    animation: ssPulse 2s infinite;
    transition: transform .2s ease, opacity .3s ease;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
  }
  .ss-whatsapp-btn.ss-show{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .ss-whatsapp-btn:hover{
    transform: scale(1.08);
  }
  @keyframes ssPulse{
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.6); }
    70%  { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
  }
  @media (max-width: 576px){
    .ss-whatsapp-btn{ left: 16px; bottom: 16px; width: 52px; height: 52px; }
  }