/* ==========================================================
   Panderprime — styles
   Brand: navy #032047 and sky #14A8FE (sampled from the logo)
   ========================================================== */

:root {
  /* Brand */
  --navy: #032047;
  --navy-2: #0A2D5E;        /* raised navy surface */
  --sky: #14A8FE;           /* brand accent; use on navy only */
  --blue: #0B63CE;          /* accessible blue on white (5.3:1) */
  --blue-ink: #084FA6;      /* hover */

  /* Neutrals (cool, to sit with the navy) */
  --ink: #0B1A30;
  --muted: #4A5A70;
  --line: #D8DFE8;
  --tint: #EEF3F8;
  --white: #FFFFFF;
  --on-navy: #FFFFFF;
  --on-navy-muted: #B7C6DB;

  --error: #B42318;

  /* Type */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.25rem;
  --fs-lg: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --fs-xl: clamp(2.5rem, 1.4rem + 4.4vw, 4.75rem);

  /* Space (8pt) */
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 4rem; --s7: 6rem;

  --radius: 6px;
  --container: 1200px;
  --header-h: 76px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; line-height: 1.12; font-weight: 750; font-stretch: 112%; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); font-stretch: 106%; font-weight: 700; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--blue-ink); }

:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 2px; }
.section-tint :focus-visible, .section :focus-visible, .contact-form :focus-visible { outline-color: var(--blue); }
.section-navy :focus-visible, .site-header :focus-visible, .hero :focus-visible, .site-footer :focus-visible { outline-color: var(--sky); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--s2); top: -100px; z-index: 100; padding: var(--s1) var(--s2); background: var(--white); color: var(--navy); font-weight: 600; border-radius: var(--radius); }
.skip-link:focus { top: var(--s1); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 768px) { .container { padding-inline: 2rem; } }

.icon { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .625rem 1.25rem;
  font: inherit; font-size: var(--fs-sm); font-weight: 650; text-decoration: none;
  border-radius: 999px; border: 2px solid transparent; cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  touch-action: manipulation;
}
.btn-lg { min-height: 52px; padding: .75rem 1.75rem; font-size: 1rem; }
.btn-sky { background: var(--sky); color: var(--navy); }
.btn-sky:hover { background: #4DBDFF; color: var(--navy); }
.btn-ghost { border-color: rgba(255,255,255,.7); color: var(--white); }
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: var(--white); color: var(--white); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-2); color: var(--white); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--navy); color: var(--on-navy);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; }
.brand:hover { color: inherit; }
.brand img { width: 48px; height: 48px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-size: 1.375rem; font-weight: 800; font-stretch: 120%; letter-spacing: .02em; text-transform: uppercase; }
.brand-tag { font-size: .75rem; color: var(--on-navy-muted); letter-spacing: .01em; }

.site-nav { display: flex; align-items: center; gap: var(--s3); }
.site-nav ul { display: flex; gap: .25rem; }
.site-nav ul a {
  display: block; padding: .625rem .75rem; color: var(--on-navy); text-decoration: none;
  font-size: .9375rem; font-weight: 500; border-radius: 4px; position: relative;
}
.site-nav ul a::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .25rem; height: 2px;
  background: var(--sky); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease);
}
.site-nav ul a:hover::after, .site-nav ul a[aria-current="true"]::after { transform: scaleX(1); }

.nav-toggle { display: none; }

@media (max-width: 1023px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; background: transparent; border: 0; color: var(--white); cursor: pointer; border-radius: 4px;
  }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    display: block; width: 22px; height: 2px; background: currentColor; position: relative; transition: transform .2s var(--ease), opacity .2s;
  }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -7px; }
  .nav-toggle-bars::after { top: 7px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: var(--s2);
    padding: var(--s2) 1.25rem var(--s4);
    background: var(--navy); border-top: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 16px 32px rgba(3,32,71,.35);
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav ul a { padding: .875rem 0; font-size: 1.0625rem; border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 0; }
  .site-nav ul a::after { display: none; }
  .site-nav .btn { align-self: flex-start; }
}
@media (max-width: 420px) { .brand-tag { display: none; } .brand-name { font-size: 1.2rem; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(88vh, 760px);
  display: flex; align-items: center;
  background: var(--navy); color: var(--on-navy);
}
.hero-bg, .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero-bg { object-fit: cover; object-position: 50% 50%; }
.hero-canvas { display: none; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(3,32,71,.92) 0%, rgba(3,32,71,.78) 40%, rgba(3,32,71,.2) 78%),
    linear-gradient(0deg, rgba(3,32,71,.6) 0%, rgba(3,32,71,0) 35%);
}

/* Scroll-played footage: the track adds scroll distance while the hero stays pinned */
.hero-track.is-scrub { height: calc(100svh - var(--header-h) + 150svh); }
.hero-track.is-scrub .hero { position: sticky; top: var(--header-h); min-height: calc(100svh - var(--header-h)); }
.hero-track.is-scrub .hero-canvas { display: block; }
.hero-progress { display: none; }
.hero-track.is-scrub .hero-progress {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.15);
}
@media (max-width: 767px) { .hero-track.is-scrub .hero-inner { padding-block: var(--s4); } }
.hero-progress span { display: block; height: 100%; background: var(--sky); transform-origin: left; transform: scaleX(0); }
.hero-inner { padding-block: var(--s7); }
@media (max-width: 767px) {
  .hero::before { background: linear-gradient(180deg, rgba(3,32,71,.88) 0%, rgba(3,32,71,.8) 60%, rgba(3,32,71,.65) 100%); }
  .hero-inner { padding-block: var(--s6); }
}
.hero-title { font-size: var(--fs-xl); font-weight: 800; font-stretch: 118%; line-height: 1.02; letter-spacing: -0.02em; max-width: 20ch; }
.hero-title span { display: block; }
.hero-lede { margin-top: var(--s4); max-width: 34rem; font-size: 1.1875rem; line-height: 1.55; }
.hero-sub { margin-top: var(--s2); max-width: 34rem; color: var(--on-navy-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

/* single orchestrated load moment */
@media (prefers-reduced-motion: no-preference) {
  .hero-title span, .hero-lede, .hero-sub, .hero-actions { animation: rise .7s var(--ease) both; }
  .hero-title span:nth-child(2) { animation-delay: .08s; }
  .hero-title span:nth-child(3) { animation-delay: .16s; }
  .hero-lede { animation-delay: .28s; }
  .hero-sub { animation-delay: .34s; }
  .hero-actions { animation-delay: .4s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* ---------- Statement ---------- */
.statement { border-bottom: 1px solid var(--line); }
.statement-inner { display: grid; gap: var(--s3); padding-block: var(--s6); }
.statement-big { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); font-weight: 700; font-stretch: 110%; line-height: 1.2; color: var(--navy); max-width: 22ch; }
.statement-small { color: var(--muted); max-width: 60ch; }
@media (min-width: 900px) {
  .statement-inner { grid-template-columns: 1.1fr 1fr; align-items: end; gap: var(--s6); }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--s7); }
.section-tint { background: var(--tint); }
.section-navy { background: var(--navy); color: var(--on-navy); }
.section-head { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.section-head p { color: var(--muted); font-size: 1.125rem; max-width: 34rem; }
.section-head .head-action { justify-self: start; margin-top: var(--s1); }
@media (min-width: 900px) {
  .section-head {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: var(--s6); row-gap: var(--s2);
    grid-template-areas: "eyebrow ." "title text" "title action";
    align-items: start;
  }
  .section-head .eyebrow { grid-area: eyebrow; }
  .section-head h2 { grid-area: title; }
  .section-head p { grid-area: text; }
  .section-head .head-action { grid-area: action; margin-top: var(--s1); }
}
.eyebrow { display: block; font-size: .9375rem; font-weight: 650; color: var(--blue); }
.section-navy .eyebrow, .section-navy .section-head p { color: var(--on-navy-muted); }
.section-navy .eyebrow { color: var(--sky); }
.contact-info .eyebrow { margin-bottom: var(--s2); }
.section-navy .section-head p { color: var(--on-navy-muted); }
@media (max-width: 767px) { .section { padding-block: var(--s6); } }

/* ---------- Services: photo cards ---------- */
.solutions { display: grid; gap: var(--s2); grid-template-columns: 1fr; }
.sol {
  position: relative; overflow: hidden; border-radius: 10px; min-height: 280px;
  display: flex; align-items: flex-end; isolation: isolate; color: var(--white); background: var(--navy);
}
.sol img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--ease); }
.sol::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(3,32,71,.92) 0%, rgba(3,32,71,.55) 45%, rgba(3,32,71,0) 75%); }
.sol-body { padding: var(--s3); max-width: 34rem; }
.sol-body p { margin-top: .375rem; color: #D5E0EE; font-size: .9375rem; line-height: 1.5; }
.sol:hover img { transform: scale(1.04); }
@media (min-width: 640px) { .solutions { grid-template-columns: repeat(2, 1fr); } .sol:last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .solutions { grid-template-columns: repeat(6, 1fr); }
  .sol { grid-column: span 2; min-height: 300px; }
  .sol-wide { grid-column: span 3; min-height: 340px; }
  .sol:last-child { grid-column: span 2; }
}

/* ---------- Transport modes (animated illustrations) ---------- */
.modes { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.mode { background: var(--navy-2); border-radius: 10px; padding: var(--s3); border: 1px solid rgba(255,255,255,.08); }
.mode-art { margin: calc(-1 * var(--s3)) calc(-1 * var(--s3)) var(--s3); border-radius: 10px 10px 0 0; overflow: hidden; background: linear-gradient(180deg, #0D3A75 0%, #0A2D5E 100%); }
.mode-art svg { display: block; width: 100%; height: auto; fill: none; stroke: var(--white); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mode p { margin-top: .5rem; color: var(--on-navy-muted); }

/* sea */
.mode .sun { fill: #F7C873; stroke: none; opacity: .9; }
.mode .box { stroke: var(--navy); stroke-width: 1.5; }
.mode .b1 { fill: var(--sky); } .mode .b2 { fill: var(--white); } .mode .b3 { fill: #F0A35E; }
.mode .bridge { fill: var(--white); stroke: var(--navy); stroke-width: 1.5; }
.mode .hull { fill: var(--navy); stroke: var(--white); }
.mode .wave { stroke: var(--sky); }
.mode .w2 { opacity: .5; }
/* air */
.mode .cloud { fill: rgba(255,255,255,.18); stroke: none; }
.mode .air-route { stroke: rgba(255,255,255,.45); stroke-width: 2; stroke-dasharray: 3 9; }
.mode .plane { fill: var(--white); stroke: none; offset-path: path("M24 132C110 128 196 96 296 30"); offset-rotate: auto; offset-distance: 70%; }
/* land */
.mode .post { stroke: rgba(255,255,255,.25); stroke-width: 3; }
.mode .trailer { fill: var(--sky); stroke: var(--white); }
.mode .ribs { stroke: rgba(3,32,71,.35); stroke-width: 2; }
.mode .cab { fill: var(--white); stroke: var(--white); }
.mode .window { fill: var(--navy); stroke: none; }
.mode .wheel circle { fill: var(--navy); stroke: var(--white); stroke-width: 3; }
.mode .wheel path { stroke: var(--white); stroke-width: 2; }
.mode .road { stroke: rgba(255,255,255,.6); }
.mode .lane { stroke: rgba(255,255,255,.35); stroke-dasharray: 18 14; }

@media (prefers-reduced-motion: no-preference) {
  .modes.is-playing .sea-ship { animation: bob 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
  .modes.is-playing .w1 { animation: drift 2.4s linear infinite; }
  .modes.is-playing .w2 { animation: drift 3.6s linear infinite reverse; }
  .modes.is-playing .plane { animation: fly 6s cubic-bezier(.45,.05,.55,.95) infinite; }
  .modes.is-playing .air-route { animation: dash 1.2s linear infinite; }
  .modes.is-playing .c1 { animation: cloud 14s linear infinite; }
  .modes.is-playing .c2 { animation: cloud 18s linear infinite -6s; }
  .modes.is-playing .c3 { animation: cloud 11s linear infinite -3s; }
  .modes.is-playing .wheel { animation: spin .7s linear infinite; }
  .modes.is-playing .truck { animation: rumble .35s ease-in-out infinite alternate; }
  .modes.is-playing .lane { animation: road .5s linear infinite; }
  .modes.is-playing .posts { animation: posts 1.4s linear infinite; }
  @keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(3px) rotate(1deg); } }
  @keyframes drift { to { transform: translateX(80px); } }
  @keyframes fly { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
  @keyframes dash { to { stroke-dashoffset: -12; } }
  @keyframes cloud { from { transform: translateX(340px); } to { transform: translateX(-120px); } }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes rumble { to { transform: translateY(-1.5px); } }
  @keyframes road { to { stroke-dashoffset: 32; } }
  @keyframes posts { to { transform: translateX(-70px); } }
}

/* ---------- Process (a real sequence, so it is numbered) ---------- */
.process { counter-reset: step; display: grid; gap: var(--s4); position: relative; }
.process li { counter-increment: step; position: relative; padding-left: 4rem; }
.process li::before {
  content: counter(step);
  position: absolute; left: 0; top: -.25rem;
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  background: var(--navy); color: var(--sky); border-radius: 50%;
  font-weight: 800; font-stretch: 120%; font-size: 1.125rem;
}
.process li:not(:last-child)::after {
  content: ""; position: absolute; left: 1.375rem; top: 2.75rem; bottom: calc(-1 * var(--s4)); width: 2px;
  background: repeating-linear-gradient(var(--line) 0 6px, transparent 6px 12px);
}
.process p { margin-top: .5rem; color: var(--muted); font-size: 1rem; }
@media (min-width: 1024px) {
  .process { grid-template-columns: repeat(5, 1fr); gap: var(--s3); }
  .process li { padding-left: 0; padding-top: 4rem; }
  .process li::before { top: 0; }
  .process li:not(:last-child)::after {
    left: 3.25rem; right: calc(-1 * var(--s3) + .5rem); top: 1.375rem; bottom: auto; width: auto; height: 2px;
    background: repeating-linear-gradient(90deg, #B9C6D6 0 6px, transparent 6px 12px);
  }
}

/* ---------- Projects as shipping manifests ---------- */
.manifests { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.manifest {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.manifest > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.manifest-body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); flex: 1; }
.manifest-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); }
.equip {
  flex: none; padding: .25rem .625rem; border-radius: 3px;
  background: var(--navy); color: var(--sky);
  font-weight: 800; font-stretch: 125%; font-size: 1rem; line-height: 1.3; letter-spacing: .04em;
}
.route { display: flex; align-items: center; gap: .75rem; padding: .875rem 0; border-block: 1px solid var(--line); }
.route > div { display: flex; flex-direction: column; min-width: 0; }
.route-label { font-size: .8125rem; color: var(--muted); }
.route-port { font-weight: 650; overflow-wrap: anywhere; }
.route-line { flex: 1; min-width: 1.5rem; height: 2px; background: var(--blue); position: relative; }
.route-line::after {
  content: ""; position: absolute; right: -1px; top: 50%; width: 8px; height: 8px;
  border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); transform: translateY(-50%) rotate(45deg);
}
.manifest-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem var(--s2); }
.manifest-meta dt { font-size: .8125rem; color: var(--muted); }
.manifest-meta dd { font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.manifest-cta {
  justify-content: center; align-items: flex-start; gap: var(--s2); padding: var(--s4);
  background: var(--tint); border-style: dashed; border-color: #AFC0D4; text-decoration: none; color: var(--ink);
  min-height: 260px; transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.manifest-cta:hover { color: var(--ink); border-color: var(--blue); background: #E5EDF6; }
.manifest-cta-title { font-size: var(--fs-md); font-weight: 750; font-stretch: 110%; color: var(--navy); }
.manifest-cta > span:nth-child(2) { color: var(--muted); }

/* ---------- Industries: card slider ---------- */
.slider-nav { display: flex; align-items: center; gap: var(--s2); }
.slider-progress { width: 120px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.slider-progress span { display: block; height: 100%; width: 100%; background: var(--navy); transform-origin: left; transform: scaleX(.25); transition: transform .2s var(--ease); }
.ind-track {
  display: flex; gap: var(--s2); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 4px;
}
.ind-track::-webkit-scrollbar { display: none; }
.ind-card {
  flex: 0 0 80%; scroll-snap-align: start; min-height: 300px;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s4);
  padding: var(--s3); background: var(--white); border-radius: 10px; border: 1px solid var(--line);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
@media (min-width: 640px) { .ind-card { flex-basis: calc((100% - var(--s2)) / 2); } }
@media (min-width: 1024px) { .ind-card { flex-basis: calc((100% - 3 * var(--s2)) / 4); } }
.ind-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--white); transition: background-color .25s var(--ease), color .25s var(--ease); }
.ind-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ind-card h3 { font-size: 1.1875rem; }
.ind-card p { margin-top: .5rem; color: var(--muted); font-size: .9375rem; }
/* The highlighted card: the one being pointed at, or the first one by default */
.ind-card:hover, .ind-track:not(:hover) .ind-card:first-child { background: var(--navy); color: var(--white); border-color: var(--navy); }
.ind-card:hover p, .ind-track:not(:hover) .ind-card:first-child p { color: var(--on-navy-muted); }
.ind-card:hover .ind-icon, .ind-track:not(:hover) .ind-card:first-child .ind-icon { background: var(--white); color: var(--navy); }
.ind-track:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

/* ---------- Gallery ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--s3); }
.chip {
  min-height: 44px; padding: .5rem 1rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .9375rem; font-weight: 550;
  background: var(--white); color: var(--ink); border: 1px solid var(--line);
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.chip:hover { border-color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* Carousel: a scroll-snap strip (swipeable on touch) that script.js advances */
.carousel { position: relative; }
.gallery {
  display: flex; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  margin-inline: -1.25rem; padding-inline: 1.25rem; scroll-padding-inline: 1.25rem;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery li {
  flex: 0 0 82%; height: 380px; scroll-snap-align: start;
  position: relative; overflow: hidden; border-radius: var(--radius); background: var(--tint);
}
@media (min-width: 768px) {
  .gallery { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
  .gallery li { flex-basis: calc((100% - .75rem) / 2); height: 420px; }
}
@media (min-width: 1024px) { .gallery li { flex-basis: calc((100% - 1.5rem) / 3); height: 460px; } }
.gallery li[hidden] { display: none; }
.gallery img, .gallery video { width: 100%; height: 100%; object-fit: cover; }
.g-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1rem .875rem;
  color: var(--white); font-size: .9375rem; font-weight: 550; text-align: left; line-height: 1.35;
  background: linear-gradient(0deg, rgba(3,32,71,.85), rgba(3,32,71,0));
  pointer-events: none;
}

.carousel-controls { display: flex; align-items: center; gap: .5rem; margin-top: var(--s3); }
.car-btn {
  width: 48px; height: 48px; display: grid; place-items: center; flex: none;
  border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--navy); cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.car-btn:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.car-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.car-toggle .i-play { fill: currentColor; stroke-width: 1.5; }
.car-toggle .i-play, .car-toggle.is-paused .i-pause { display: none; }
.car-toggle.is-paused .i-play { display: block; }
.car-count { margin-left: .5rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--muted); }
.car-count .car-now { color: var(--navy); }
.car-timer { flex: 1; height: 3px; margin-left: var(--s2); background: var(--line); border-radius: 2px; overflow: hidden; max-width: 240px; }
.car-timer span { display: block; height: 100%; background: var(--blue); transform-origin: left; transform: scaleX(0); }
.car-timer.is-running span { animation: car-timer var(--car-ms, 4500ms) linear forwards; }
@keyframes car-timer { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .gallery { scroll-behavior: auto; } }
.g-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.g-open img { transition: transform .4s var(--ease); }
.g-open:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .g-open:hover img { transform: none; } }

.lightbox { padding: 0; border: 0; background: transparent; max-width: min(92vw, 1200px); max-height: 90vh; overflow: visible; }
.lightbox::backdrop { background: rgba(3,32,71,.88); }
.lightbox img { max-width: 100%; max-height: 90vh; width: auto; border-radius: var(--radius); }
.lightbox-close {
  position: absolute; top: -56px; right: 0; width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--white); color: var(--navy); border: 0; border-radius: 50%; cursor: pointer;
}
.lightbox-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; }

/* ---------- Why Panderprime: photo + feature grid ---------- */
.why-grid { display: grid; gap: var(--s4); }
.why-photo { position: relative; margin: 0; border-radius: 10px; overflow: hidden; min-height: 360px; isolation: isolate; color: var(--white); }
.why-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.why-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(3,32,71,.9) 0%, rgba(3,32,71,0) 55%); }
.about-quote { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s4) var(--s3); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); font-weight: 750; font-stretch: 112%; line-height: 1.12; }
.why-list { display: grid; gap: 0 var(--s4); }
.why-list li { display: flex; flex-direction: column; padding-block: var(--s3); border-top: 1px solid var(--line); }
.why-list p { margin-top: .5rem; color: var(--muted); }
.arrow-link { display: inline-flex; align-items: center; gap: .625rem; margin-top: var(--s2); min-height: 44px; align-self: flex-start; font-weight: 650; color: var(--ink); text-decoration: none; }
.arrow-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--white); transition: transform .2s var(--ease), background-color .2s var(--ease); }
.arrow-dot svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.arrow-link:hover { color: var(--blue); }
.arrow-link:hover .arrow-dot { background: var(--blue); transform: translateX(3px); }
@media (min-width: 700px) { .why-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .why-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s6); align-items: stretch; }
  .why-photo { min-height: 100%; }
  .why-list li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: var(--s5); }
.contact-info p { margin-top: var(--s2); color: var(--muted); max-width: 32rem; font-size: 1.125rem; }
.contact-email {
  display: inline-flex; align-items: center; gap: .75rem; margin-top: var(--s4);
  font-size: 1.25rem; font-weight: 650; text-decoration: none; min-height: 44px;
}
.contact-email:hover { text-decoration: underline; }
.contact-email .icon { color: var(--blue); }

.contact-form {
  display: grid; gap: var(--s3); grid-template-columns: 1fr;
  background: var(--white); padding: var(--s4); border-radius: var(--radius); border: 1px solid var(--line);
}
@media (min-width: 640px) { .contact-form { grid-template-columns: 1fr 1fr; } .field-full { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 5fr 7fr; gap: var(--s6); align-items: start; } }

.field { display: flex; flex-direction: column; gap: .375rem; }
.field label { font-size: .9375rem; font-weight: 600; }
.field label span { color: var(--error); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: .625rem .875rem;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--white); border: 1px solid #A9B6C6; border-radius: 4px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { resize: vertical; min-height: 128px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11,99,206,.25); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field-help { font-size: .875rem; color: var(--muted); }
.field-error { font-size: .875rem; color: var(--error); font-weight: 550; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.form-note { font-size: .875rem; color: var(--muted); max-width: 22rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form { position: relative; }
.btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
.form-status { padding: var(--s2) var(--s3); border-radius: 4px; border-left: 4px solid; font-weight: 550; }
.form-status.is-success { background: #E7F6EC; border-color: #1E7B3A; color: #14532D; }
.form-status.is-error { background: #FDECEA; border-color: var(--error); color: #7A1810; }
.form-status a { color: inherit; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: var(--on-navy); padding-top: var(--s5); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s4); }
.site-footer .brand img { width: 40px; height: 40px; }
.site-footer nav ul { display: flex; flex-wrap: wrap; gap: .25rem var(--s2); }
.site-footer nav a, .footer-bottom a { color: var(--on-navy); text-decoration: none; }
.site-footer nav a { display: inline-block; padding: .625rem .25rem; font-size: .9375rem; }
.site-footer nav a:hover, .footer-bottom a:hover { color: var(--sky); text-decoration: underline; }
.footer-motto { font-weight: 700; font-stretch: 115%; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3);
  padding-block: var(--s3); border-top: 1px solid rgba(255,255,255,.12);
  font-size: .875rem; color: var(--on-navy-muted);
}
.footer-bottom a { color: var(--on-navy-muted); text-decoration: underline; }

/* ==========================================================
   Effects — all motion is skipped under prefers-reduced-motion
   ========================================================== */

/* Header gains depth once the page scrolls */
.site-header { transition: box-shadow .25s var(--ease), background-color .25s var(--ease); }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(3,32,71,.35); }

/* Pressed feedback on buttons */
.btn:active, .chip:active { transform: scale(.97); }
.btn, .chip { transition-property: background-color, color, border-color, transform; }


/* Shipment cards lift on hover */
.manifest { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.manifest > img { transition: transform .5s var(--ease); }
article.manifest:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(3,32,71,.14); }
article.manifest:hover > img { transform: scale(1.04); }

@media (prefers-reduced-motion: no-preference) {
  /* Scroll reveal (only when JS has marked the page, so no-JS shows everything) */
  .fx .reveal {
    opacity: 0; transform: translateY(22px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .fx .reveal.is-in { opacity: 1; transform: none; }

  /* Process: steps connect one after another */
  .fx .process li::before { transform: scale(.4); opacity: 0; transition: transform .45s cubic-bezier(.3,1.5,.5,1), opacity .3s; transition-delay: calc(var(--i, 0) * 160ms); }
  .fx .process li:not(:last-child)::after { transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 160ms + 200ms); }
  .fx .process li.is-in::before { transform: none; opacity: 1; }
  .fx .process li.is-in::after { transform: none; }
  @media (min-width: 1024px) {
    .fx .process li:not(:last-child)::after { transform: scaleX(0); transform-origin: left; }
  }

  /* Shipment route line draws from loading port to discharge port */
  .fx .route-line { transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) .25s; }
  .fx .route-line::after { opacity: 0; transition: opacity .2s 1s; }
  .fx .is-in .route-line { transform: none; }
  .fx .is-in .route-line::after { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active, .chip:active, article.manifest:hover, article.manifest:hover > img, .sol:hover img, .arrow-link:hover .arrow-dot { transform: none; }
}
.car-btn:disabled { opacity: .35; cursor: default; pointer-events: none; }