/* =========================================================================
   Ocean Mate Maritime Academy — the small amount of CSS Tailwind can't do
   cleanly. Everything else lives in utility classes in the markup.
   ========================================================================= */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Anchor links and snap stops both clear the sticky header. */
  scroll-padding-top: 4.25rem;
}

/* ---- One screen per section -------------------------------------------
   Scrolling lands on a section boundary instead of stopping mid-content.
   "proximity" (not "mandatory") so sections that are genuinely taller than
   the viewport can still be scrolled through normally. Desktop pointers
   only — snap fights momentum scrolling on touch. */
@media (min-width: 1024px) and (min-height: 600px) and (pointer: fine) {
  html { scroll-snap-type: y proximity; }
  .snap { scroll-snap-align: start; }
}

/* The hero fills the screen below the header, content vertically centred. */
@media (min-width: 1024px) {
  .hero-fit {
    min-height: calc(100svh - 4.25rem);
    display: flex;
    align-items: center;
  }
}

/* Short laptop windows: tighten the hero so it still lands on one screen
   rather than spilling the waves and the form button below the fold. */
@media (min-width: 1024px) and (max-height: 735px) {
  .hero-inner { padding-top: 1.5rem; padding-bottom: 1.75rem; }
  .hero-fit h1 { font-size: 2.7rem; }
  .hero-scene { height: 240px; }
  .hero-waves, .wave-anim { height: 132px; }
  /* the form column is the taller of the two, so it has to give as well */
  .hero-form { padding: 1.25rem; }
  .hero-form form { gap: .7rem; }
  .hero-form input, .hero-form select { padding-top: .5rem; padding-bottom: .5rem; }
  .hero-form .form-note { display: none; }
}
@media (min-width: 1024px) and (max-height: 665px) {
  .hero-inner { padding-top: .75rem; padding-bottom: 1rem; }
  .hero-fit h1 { font-size: 2.35rem; }
  .hero-scene { height: 200px; }
  .hero-waves, .wave-anim { height: 108px; }
  .hero-ship-wrap { bottom: 22px; width: min(200px, 18vw); }
  .scroll-cue { display: none !important; }
  .hero-form { padding: 1rem; }
  .hero-form form { gap: .55rem; }
  .hero-form .form-intro { display: none; }
  .hero-form label { margin-bottom: .25rem; }
}
body { text-rendering: optimizeLegibility; }

/* ---- Typography ---------------------------------------------------------
   The only change to the original: h1 and h2 move to a serif display face
   and drop to a normal weight. Card titles (h3/h4) stay on the sans stack,
   so the contrast between the two is what carries the hierarchy.
   font-family needs no !important (nothing sets it on the heading itself);
   font-weight does, because the markup applies Tailwind's font-black. */
h1, h2 {
  font-family: 'Iowan Old Style', Georgia, 'Times New Roman', Times, serif;
  font-weight: 400 !important;
  letter-spacing: -.02em;
  line-height: 1.08;
}
/* the gradient-clipped headline span inherits the serif with it */
h1 .bg-clip-text, h2 .bg-clip-text { font-weight: 400; }

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Keyboard focus that is visible on both navy and white backgrounds. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #e3b243;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link for screen-reader / keyboard users. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #e3b243; color: #0a1626; padding: .75rem 1.25rem; font-weight: 700;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* Hero backdrop: layered gradient + subtle "sea" texture, no image request.
   The warm glow sits at 20% x so it lands behind the headline, not behind the
   white form card on the right where it would be invisible. */
.hero-sea {
  background-image:
    radial-gradient(820px 460px at 20% 14%, rgba(217,169,60,.22), transparent 62%),
    radial-gradient(760px 520px at 78% 96%, rgba(74,139,204,.24), transparent 64%),
    radial-gradient(1100px 620px at 50% 130%, rgba(2,6,14,.85), transparent 72%),
    linear-gradient(158deg, #050d1b 0%, #0a1626 40%, #12294a 100%);
}
.hero-sea::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(62% 58% at 26% 34%, #000 18%, transparent 76%);
  -webkit-mask-image: radial-gradient(62% 58% at 26% 34%, #000 18%, transparent 76%);
}

/* ---- Ship photograph behind an inner-page hero -----------------------------
   The photo is a low-opacity layer UNDER the wave scene and the text, so
   headline contrast never depends on it. If the file is slow, blocked or the
   browser is offline, the hero still renders exactly as it did before.
   Each page sets --ship (and --ship-sm for phones) inline. */
.hero-photo::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: var(--ship, none);
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  opacity: .34;
  pointer-events: none;
}
/* Phones get a much smaller file — mobile data is not free. */
@media (max-width: 640px) {
  .hero-photo::before { background-image: var(--ship-sm, var(--ship, none)); opacity: .28; }
}

/* ---- Ship plate behind a dark mid-page band --------------------------------
   Lighter than the hero treatment: these bands carry more running text, so the
   photo is only a texture. `.deep-sea > *` is already z-index 1, and a
   pseudo-element is not matched by `> *`, so this stays underneath. */
.ship-bg > * { position: relative; z-index: 1; }
.ship-bg::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: var(--ship, none);
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
  opacity: .20;
  pointer-events: none;
}
@media (max-width: 640px) {
  .ship-bg::before { background-image: var(--ship-sm, var(--ship, none)); opacity: .16; }
}

/* The brand lockup is now the supplied logo (assets/img/logo-lockup-light.svg),
   so the hand-built crest and serif wordmark styles are gone. */


/* ---- Touch targets for standalone links ------------------------------------
   Links that sit on their own (a CTA, a handle, a row of jump links) need a
   finger-sized box. Links inside a sentence are exempt under WCAG 2.5.8 and are
   deliberately left alone so body copy keeps its normal line height. */
@media (max-width: 640px) {
  .btn-row a,
  .quicklinks a,
  a[data-instagram]:not([class*="grid"]) {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}

/* ---- Ship scene: sits at the foot of the hero, purely decorative ----------
   Two inline SVG layers, no image requests. The ship is drawn behind the
   waves so it reads as sitting IN the water rather than on top of it. */
.hero-scene {
  position: absolute; inset: auto 0 0 0; height: 300px; z-index: 0;
  pointer-events: none; overflow: hidden;
}
/* A distant ship riding the horizon. Kept small and low so it sits in the
   clear water band under the copy — never behind the headline or the form.
   The wrapper owns position, the SVG owns the bob, so the two transforms
   never overwrite each other. */
.hero-ship-wrap { position: absolute; bottom: 30px; left: 5%; width: min(250px, 22vw); }
.hero-ship {
  display: block; width: 100%; height: auto;
  color: #e8eff8; opacity: .32;
  transform-origin: 50% 100%;
  animation: shipBob 7.5s ease-in-out infinite;
}
@keyframes shipBob {
  0%, 100% { transform: translateY(0)     rotate(-0.5deg); }
  50%      { transform: translateY(-7px)  rotate( 0.6deg); }
}

.hero-waves { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 168px; }

/* Two drifting swell layers behind the static boundary wave. Each path is
   periodic every 720 units and the SVG is 2× container width, so a -50%
   translate loops seamlessly. */
.wave-anim { position: absolute; left: 0; bottom: -1px; width: 200%; height: 168px; will-change: transform; }
.wave-anim--back { opacity: .55; animation: waveDrift 34s linear infinite; }
.wave-anim--mid  { opacity: .8;  animation: waveDrift 21s linear infinite reverse; }
@keyframes waveDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Bobbing scroll cue at the foot of the hero. */
.scroll-cue { animation: cueBob 2.4s ease-in-out infinite; }
@keyframes cueBob {
  0%, 100% { transform: translateY(0);   opacity: .55; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ---- Phones and small tablets ------------------------------------------ */
@media (max-width: 1023px) {
  .hero-scene { height: 220px; }
  .hero-waves, .wave-anim { height: 128px; }
  .hero-ship-wrap { left: 50%; margin-left: calc(min(190px, 44vw) / -2); width: min(190px, 44vw); bottom: 24px; }
  .hero-ship { opacity: .3; }

  /* The headline column owns the first screen; the form begins on the next.
     100svh, not 100vh, so the mobile URL bar doesn't cause a jump. */
  .hero-inner > div:first-child {
    min-height: calc(100svh - 4.25rem - 5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Comfortable thumb targets. */
  .hero-form input, .hero-form select { padding-top: .7rem; padding-bottom: .7rem; }
  .tap { display: inline-flex; padding-block: .75rem; margin-block: -.75rem; }

  /* Footer links were 19px tall — too small to hit reliably with a thumb.
     Padding takes them past 40px; the list keeps its own spacing. */
  footer li > a,
  footer li > a[data-tel],
  footer li > a[data-email] { display: inline-block; padding-block: .7rem; }
  footer ul { gap: 0; }

  /* The in-page jump pills sat at 38px — just under the thumb minimum. */
  nav[aria-label="Jump to a programme"] a { padding-block: .7rem; }

  /* Standalone action in each notice row. (The imu.edu.in / dgshipping.gov.in
     links are inline in a sentence, which WCAG 2.5.8 exempts — padding those
     would break the paragraph's line rhythm for no accessibility gain.) */
  #noticeBoard a { display: inline-block; padding-block: .7rem; }

  /* A sticky sidebar has nowhere to travel once the grid stacks, and it can
     trap the card mid-scroll on iOS. Let it flow with the page. */
  aside .sticky { position: static; }

  /* Fewer moving parts on a phone — battery and scroll smoothness. */
  .crossing__ship--far { display: none; }
  .bubble:nth-child(n+4) { display: none; }
  .crossing__ship { opacity: .12; }
}

/* Very small phones: the swell would eat the copy. */
@media (max-width: 380px) {
  .hero-scene { height: 180px; }
  .hero-waves, .wave-anim { height: 104px; }
}

/* ---- Ambient sea: the page reads as a sequence of water crossings --------
   Every divider is the same periodic-path trick as the hero swell, so it
   drifts seamlessly. --wave-fill is the colour of the section BELOW. */
.sea-divider { position: relative; line-height: 0; overflow: hidden; }
.sea-divider svg {
  display: block; width: 200%; height: 54px;
  animation: waveDrift 28s linear infinite;
}
.sea-divider--rev svg { animation-duration: 40s; animation-direction: reverse; }
.sea-divider--tall svg { height: 72px; }

/* A ship that slowly crosses a dark band while you read it. */
.crossing {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
  overflow: hidden; pointer-events: none; z-index: 0;
}
.crossing__ship {
  position: absolute; bottom: 6%; left: -18%;
  width: clamp(90px, 12vw, 170px); height: auto;
  color: #cddcee; opacity: .16;
  animation: sail 78s linear infinite;
}
.crossing__ship--far {
  bottom: 34%; width: clamp(60px, 7vw, 100px); opacity: .1;
  animation-duration: 125s; animation-delay: -40s;
}
@keyframes sail {
  from { transform: translateX(0)     translateY(0); }
  25%  { transform: translateX(35vw)  translateY(-4px); }
  50%  { transform: translateX(70vw)  translateY(2px); }
  75%  { transform: translateX(105vw) translateY(-3px); }
  to   { transform: translateX(140vw) translateY(0); }
}

/* Slow rising bubbles, dark sections only. */
.bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bubble {
  position: absolute; bottom: -40px; border-radius: 9999px;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.5), rgba(255,255,255,.07) 62%, transparent 70%);
  animation: rise linear infinite;
}
@keyframes rise {
  from { transform: translateY(0)      translateX(0)    scale(.85); opacity: 0; }
  12%  { opacity: .75; }
  70%  { opacity: .45; }
  to   { transform: translateY(-115%)  translateX(26px) scale(1.15); opacity: 0; }
}

/* Anything inside these bands must sit above the ambient art. */
.deep-sea > *, .cta-gold > * { position: relative; z-index: 1; }
.deep-sea > .crossing, .deep-sea > .bubbles { z-index: 0; }

/* Shallower crossings on phones. Declared after the base rule so it wins. */
@media (max-width: 1023px) { .sea-divider svg { height: 38px; } }

/* Compact swell for the shorter inner-page heroes. */
.hero-scene--slim { height: 170px; }
.hero-scene--slim .hero-waves,
.hero-scene--slim .wave-anim { height: 112px; }
@media (max-width: 1023px) {
  .hero-scene--slim { height: 130px; }
  .hero-scene--slim .hero-waves,
  .hero-scene--slim .wave-anim { height: 84px; }
}

/* Staggered reveal so a row of cards arrives in sequence, not as one block. */
.reveal:nth-child(2) { transition-delay: .07s; }
.reveal:nth-child(3) { transition-delay: .14s; }
.reveal:nth-child(4) { transition-delay: .21s; }
.reveal:nth-child(5) { transition-delay: .28s; }
.reveal:nth-child(6) { transition-delay: .35s; }

/* Slow highlight sweep across the primary gold CTA. */
.btn-shine { position: relative; overflow: hidden; isolation: isolate; }
.btn-shine::after {
  content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-18deg); pointer-events: none;
  animation: shine 5s ease-in-out infinite;
}
@keyframes shine {
  0%, 55% { left: -70%; }
  100%    { left: 130%; }
}

/* Faint wave field for light sections — repeating inline SVG, ~2KB. */
.pattern-waves {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 20c10-8 20-8 30 0s20 8 30 0 20-8 30 0 20 8 30 0' fill='none' stroke='%230a1626' stroke-opacity='.05' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Rank ladder — each rung steps up, with a gold rail behind it. */
.rung { position: relative; }
/* Only in the five-across row — in the 2-column layout a connector would
   point off the edge of the grid. */
@media (min-width: 1024px) {
  .rung:not(:last-child)::after {
    content: ''; position: absolute; right: -0.75rem; top: 2.4rem; width: .75rem; height: 2px;
    background: linear-gradient(90deg, rgba(217,169,60,.7), rgba(217,169,60,.2));
  }
}

/* Waterline: the gold rule that closes a dark section. */
.waterline {
  height: 3px;
  background: linear-gradient(90deg, transparent, #b3861f 12%, #eec25e 50%, #b3861f 88%, transparent);
}

/* Soft tint for light sections, so white-on-white stretches gain depth. */
.tint-deep {
  background-color: #f5f7fb;
  background-image:
    radial-gradient(760px 420px at 92% -5%, rgba(74,139,204,.10), transparent 62%),
    radial-gradient(680px 420px at 2% 104%, rgba(217,169,60,.11), transparent 62%);
}
.tint-soft {
  background-color: #fff;
  background-image:
    radial-gradient(700px 380px at 100% 0%, rgba(10,22,38,.05), transparent 60%),
    radial-gradient(620px 380px at 0% 100%, rgba(217,169,60,.07), transparent 60%);
}

/* Dark mid-page band. Calmer than the hero so the hero stays the loudest thing
   on the page, but not a flat fill either. */
.deep-sea {
  background-color: #0a1626;
  background-image:
    radial-gradient(700px 380px at 88% 8%, rgba(217,169,60,.13), transparent 62%),
    radial-gradient(680px 420px at 6% 96%, rgba(74,139,204,.16), transparent 62%),
    linear-gradient(140deg, #060f1f 0%, #0a1626 46%, #14284a 100%);
}

/* Closing CTA band — gold with depth rather than a flat fill. */
.cta-gold {
  background-color: #d9a93c;
  background-image:
    radial-gradient(620px 300px at 15% 0%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(700px 340px at 88% 110%, rgba(120,88,20,.45), transparent 62%),
    linear-gradient(135deg, #eec25e 0%, #d9a93c 55%, #c2921f 100%);
}

/* Gold cap on the trust-metric figures. */
.stat::before {
  content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 38px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #eec25e, #b3861f);
}

/* Roadmap: connecting rule between the four phases on wide screens. */
@media (min-width: 1024px) {
  .step { position: relative; }
  .step:not(:last-child)::after {
    content: ''; position: absolute; top: 50%; right: -1.25rem; width: 1.25rem; height: 2px;
    background: linear-gradient(90deg, rgba(217,169,60,.65), rgba(217,169,60,.15));
  }
}

/* Section heading rule. */
.eyebrow::before {
  content: ''; display: inline-block; width: 26px; height: 2px;
  background: #d9a93c; margin-right: .55rem; vertical-align: middle;
}

/* Reveal-on-scroll (JS adds .is-in). */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* Accordion chevron */
details[open] > summary .chev { transform: rotate(180deg); }
.chev { transition: transform .25s ease; }

/* Marquee of recruiter names — pauses on hover/focus. */
.marquee { overflow: hidden; }
.marquee__track { display: flex; gap: 3rem; width: max-content; animation: slide 34s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Sticky mobile call bar clearance */
@supports (padding: max(0px)) {
  .safe-bottom { padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }
}

/* Form validation states driven by JS */
.field-error { border-color: #ef4444 !important; background-color: #fef2f2; }
.err-msg { display: none; }
.err-msg.show { display: block; }

/* Print: hide chrome, keep the useful bits */
@media print {
  header, footer, .no-print { display: none !important; }
  body { color: #000; }
}