/* ============================================================
   Bunker Agent - shared responsive layer
   Load LAST in <head>, after the page's own <style>.
   Nothing in this file applies above 1280px wide / 900px tall,
   so the desktop design is untouched.
   Breakpoints: 1280 / 1024 / 900 (nav) / 768 / 480
   ============================================================ */

/* ---------- safety: never scroll sideways ---------- */
@media (max-width:1280px){
  html,body{overflow-x:clip}
  img,video,svg,canvas{max-width:100%}
  .wrap{padding:0 40px}
}

/* ---------- container + section rhythm ---------- */
@media (max-width:1024px){
  .wrap{padding:0 32px}
  .sec{padding:96px 0}
  .sec-tight{padding:80px 0}
}
@media (max-width:768px){
  .wrap{padding:0 22px}
  .sec{padding:72px 0}
  .sec-tight{padding:60px 0}
  .lede{font-size:17px;line-height:1.6}
  .eyebrow{font-size:12px;margin-bottom:16px}
  .btn{padding:15px 22px;min-height:48px}
  .btns{gap:10px;margin-top:28px}
}
@media (max-width:480px){
  .wrap{padding:0 18px}
  .sec{padding:56px 0}
  .sec-tight{padding:48px 0}
  .btns{flex-direction:column;align-items:stretch}
  .btns .btn{width:100%;justify-content:center}
}

/* ---------- nav: compact bar + hamburger panel ---------- */
.nav-toggle{display:none;align-items:center;justify-content:center;width:48px;height:48px;margin-right:-10px;background:transparent;border:0;padding:0;cursor:pointer;color:#fff}
.nav-toggle svg{width:26px;height:26px;display:block}
.nav-toggle .bar{transition:transform 180ms var(--ease-standard),opacity 140ms var(--ease-standard);transform-origin:center}
nav.top.open .nav-toggle .bar-1{transform:translateY(6px) rotate(45deg)}
nav.top.open .nav-toggle .bar-2{opacity:0}
nav.top.open .nav-toggle .bar-3{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:900px){
  html{--nav-h:70px;scroll-padding-top:86px}
  nav.top{padding:11px 0}
  nav.top.stuck{padding:11px 0}
  nav.top.open{background:var(--color-primary-green)}
  nav.top .wrap>a:first-child img{height:40px}
  .nav-toggle{display:flex}
  nav.top .links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 22px;background:var(--color-primary-green);border-top:1px solid rgba(255,255,255,.16);max-height:calc(100dvh - 70px);overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity 160ms var(--ease-standard),transform 160ms var(--ease-standard),visibility 160ms}
  nav.top.open .links{opacity:1;visibility:visible;transform:none}
  nav.top .links>a{display:flex;align-items:center;min-height:56px;padding:0 32px;font-size:17px;font-weight:var(--fw-light);opacity:1;border-bottom:1px solid rgba(255,255,255,.12)}
  nav.top .links>a.active{text-decoration:none;font-weight:var(--fw-medium)}
  nav.top .nav-login{min-height:56px;padding:0 32px;opacity:1}
  nav.top .nav-cta{margin:20px 32px 0;justify-content:center;text-align:center;padding:17px 20px;font-size:15px;border-color:#fff;border-bottom:1px solid #fff}
}
@media (max-width:900px) and (max-width:480px){
  nav.top .links>a,nav.top .nav-login{padding:0 22px}
  nav.top .nav-cta{margin:20px 22px 0}
}

/* ---------- hero: own the first screen ----------
   Every hero is sized by its padding, so on a laptop the following
   section creeps above the fold. Pin the hero to one viewport and centre
   the copy inside it. svh = smallest viewport height, so mobile browser
   chrome cannot push the next section into view on load. Copy taller than
   the viewport grows the section rather than being clipped. */
.hero{
  min-height:100vh;            /* fallback for pre-2022 engines */
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-top:132px;
  padding-bottom:96px;
}
.hero>.wrap{width:100%}

/* ---------- hero headline: scale with the screen ----------
   The headline was pinned to a 640px column and a 5.6vh cap, so on a
   1470x846 laptop it rendered at 42px while the page asked for 68px.
   Widen the column and size from whichever of width or height is the
   binding constraint, so it grows on a big display but still leaves the
   lede and buttons inside one screen on a short window. */
@media (min-width:901px){
  .hero-copy{max-width:820px}
  .hero .h-display{font-size:clamp(30px,min(4.6vw,7.6vh),80px)}
}

/* ---------- hero eyebrow + lede: a size up on desktop ----------
   Both sat at their floor on a typical laptop (13px eyebrow, 20px lede,
   and less once the short-window clamps below kicked in), which read
   small against a full-height hero. */
@media (min-width:901px){
  .hero .eyebrow{font-size:15px;margin-bottom:20px}
  .hero .lede{font-size:22px;line-height:1.55}
}

/* ---------- headline to lede spacing ----------
   About, Platform and Fleet put .lede directly after the h1, so the
   short-window rule's margin-top:0 collapsed the gap and the two ran
   together. Home is unaffected: its lede sits in .hero-copy-wide, which
   carries its own margin, and this selector cannot match across it. */
.hero .h-display + .lede{margin-top:clamp(20px,3.2vh,34px)}

/* ---------- hero: fit the viewport, however short ---------- */
@media (max-width:1024px){
  .hero{padding-top:132px;padding-bottom:80px}
}
@media (max-width:768px){
  .hero{padding-top:108px;padding-bottom:64px}
  .hero .h-display{font-size:clamp(30px,7.4vw,40px)}
}
/* short windows (13" laptops, half-height Safari) - scale to fit, don't clip */
@media (min-width:901px) and (max-height:900px){
  .hero{padding-top:clamp(112px,15vh,180px);padding-bottom:clamp(48px,9vh,120px)}
  .hero .lede{font-size:clamp(17px,2.6vh,22px)}
  .hero .eyebrow{margin-bottom:clamp(12px,1.8vh,18px);font-size:clamp(12px,1.9vh,15px)}
  .hero-copy-wide{margin-top:clamp(14px,2.6vh,32px)}
  .hero-copy-wide .btns{margin-top:clamp(14px,2.6vh,28px)}
}

/* ---------- mobile: one call to action, not three ----------
   Below the nav breakpoint, drop "Book a demo" from the hero and from
   the hamburger drawer. Every hero that carries it also carries a second
   button, so the row is never left empty, and the demo page stays
   reachable from the footer and the in-page CTAs further down. */
@media (max-width:900px){
  .hero .btns a[href="book-a-demo.html"]{display:none}
  nav.top .links>a.nav-cta{display:none}   /* outranks nav.top .links>a */
}

/* ---------- home hero: keep the ship in frame ----------
   The artwork is 1920x1133 with the vessel on the right-hand third. Now
   that the hero is a tall, narrow box on phones, object-fit:cover crops
   from the centre and drops the ship off-frame entirely. Bias the crop
   toward it and lift the wash slightly so it actually reads. */
@media (max-width:960px){
  .hero .river{object-position:78% center;opacity:.5}
}

/* ---------- common grids ---------- */
@media (max-width:1024px){
  .card-grid-3{grid-template-columns:repeat(2,1fr)}
  .mod-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .card-grid-3{grid-template-columns:1fr}
  .mod-grid{grid-template-columns:1fr;margin-top:40px}
  .mod{min-height:0;padding:24px 22px}
  .mod b{margin-top:24px}
  .card{padding:28px 24px}
}

/* ---------- footer ---------- */
@media (max-width:768px){
  footer .grid{grid-template-columns:1fr 1fr;gap:36px 24px}
  footer .tag{max-width:none}
  footer .row{flex-direction:column;align-items:flex-start;gap:14px}
  footer .legal-links{flex-wrap:wrap;gap:8px 18px}
}
@media (max-width:420px){
  footer .grid{grid-template-columns:1fr;gap:32px}
}
