/* ═══════════════════════════════════════════════════════════════════
   DRS CARGO CARRIERS — light corporate restyle
   Visual language matched to the supplied reference (cargomatelogistics.in):
   white ground, corporate blue, gold pill CTAs, Inter, rounded cards with
   soft navy shadows, photo heroes under a navy overlay.
   Content is unchanged. This file governs appearance only.

   LAYERS  01 tokens  02 base  03 nav  04 hero  05 sections
           06 cards   07 clients  08 forms  09 footer  10 motion  11 responsive
   ═══════════════════════════════════════════════════════════════════ */

/* ── 01 TOKENS ─────────────────────────────────────────────────── */
:root{
  --blue:        #0057A8;   /* primary                      */
  --blue-dk:     #00468A;
  --blue-soft:   #E8F0F9;
  --gold:        #F4A51C;   /* CTA fill                     */
  --gold-dk:     #DE9209;
  --gold-ink:    #111827;   /* label on gold                */
  --navy:        #071F3D;   /* overlays, deep shadow        */
  --slate:       #243044;   /* headings                     */

  --bg:          #FFFFFF;
  --bg-2:        #F5F8FC;   /* alternating band             */
  --surface:     #FFFFFF;
  --border:      #DCE7F3;
  --border-2:    #C4D6EA;

  --text:        #333333;
  --text-head:   #243044;
  --text-muted:  #5A6B80;   /* 4.9:1 on white, 4.6:1 on --bg-2 */
  --on-dark:     #FFFFFF;
  --on-dark-mut: #D3DFEC;

  --sans: 'Inter', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem;
  --s5:3rem;  --s6:4rem; --s7:5rem;

  --maxw:1200px;
  --gut:clamp(1.25rem, 4vw, 2.5rem);
  --sec-y:clamp(3.5rem, 6vw, 4.5rem);          /* reference: 66-72px */

  --r:10px;  --r-lg:16px;  --pill:999px;

  --sh:    0 22px 52px rgba(7,31,61,.16);
  --sh-sm: 0 10px 26px rgba(7,31,61,.10);
  --sh-lg: 0 24px 60px rgba(7,31,61,.16);

  --ease:cubic-bezier(.2,.7,.3,1);
  --t:220ms;
}

/* ── 02 BASE ───────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5.5rem; background:var(--bg); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ margin:0; color:var(--text-head); font-family:var(--sans);
  font-weight:800; letter-spacing:-.02em; line-height:1.18; }
h1{ font-size:clamp(2.25rem, 4.4vw, 3.5rem); line-height:1.1; letter-spacing:-.025em; }
h2{ font-size:clamp(1.65rem, 3vw, 2.35rem); }
h3{ font-size:1.125rem; font-weight:700; }
h4{ font-size:1rem; font-weight:700; }

p,ul,ol,dl,dd,dt,figure{ margin:0; padding:0; }
li{ list-style:none; }
a{ color:inherit; }
img,svg,iframe{ max-width:100%; display:block; }
.num{ font-variant-numeric:tabular-nums; }

:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; border-radius:4px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--blue); color:#fff; padding:.8rem 1.25rem;
  text-decoration:none; font-weight:700; font-size:.9rem; border-radius:0 0 var(--r) 0;
}
.skip:focus{ left:0; top:0; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.sprite symbol{ fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }

/* Icon instances: <use> needs these declared on the instance, not the symbol. */
.btn svg, .card__ic svg, .panel__h svg, .spec__ic svg, .proof__title svg,
.person__tel svg, .visit__meta dt svg, .foot__col h3 svg, .qdone__ic svg,
.roster__ext{
  fill:none; stroke:currentColor;
  stroke-linecap:round; stroke-linejoin:round;
}
.btn svg, .panel__h svg, .card__ic svg{ stroke-width:1.7; }
.spec__ic svg, .qdone__ic svg{ stroke-width:2.4; }
.proof__title svg, .person__tel svg, .visit__meta dt svg,
.foot__col h3 svg, .roster__ext{ stroke-width:2; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ── 03 NAV ────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--t) var(--ease);
}
.nav.is-stuck{ box-shadow:var(--sh-sm); }
.nav__in{
  max-width:var(--maxw); margin:0 auto; padding:.9rem var(--gut);
  display:flex; align-items:center; gap:var(--s3);
  transition:padding var(--t) var(--ease);
}
.nav.is-stuck .nav__in{ padding-block:.65rem; }

.logo{ display:flex; align-items:center; gap:.7rem; text-decoration:none;
  color:var(--text-head); margin-right:auto; min-height:44px; }
.logo__mark{ width:42px; height:42px; flex:none; }
.logo__txt{ display:flex; flex-direction:column; line-height:1.25; }
.logo__txt strong{ font-size:1.02rem; font-weight:800; letter-spacing:-.02em; }
.logo__txt em{ font-style:normal; font-size:.72rem; font-weight:500; color:var(--text-muted);
  white-space:nowrap;                /* tagline must never wrap under the name */
  transition:opacity var(--t) var(--ease), max-height var(--t) var(--ease); }
@media (max-width: 480px){ .logo__txt em{ font-size:.64rem; letter-spacing:-.005em; } }
/* Below 360px one line no longer fits beside the menu button; wrapping is
   better than pushing the button off-screen. */
@media (max-width: 359px){
  .logo, .logo__txt{ min-width:0; }
  .logo__txt em{ white-space:normal; }
}
.nav.is-stuck .logo__txt em{ opacity:0; max-height:0; overflow:hidden; }

.nav__links{ display:flex; gap:.15rem; }
.nav__links a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 .9rem;
  font-size:.94rem; font-weight:600; color:var(--text-head);
  text-decoration:none; border-radius:var(--pill);
  transition:color var(--t) var(--ease), background var(--t) var(--ease);
}
.nav__links a:hover{ color:var(--blue); background:var(--blue-soft); }
.nav__links a[aria-current="true"]{ color:var(--blue); }

.nav__toggle{
  display:none; width:44px; height:44px; flex:none;
  background:#fff; border:1px solid var(--border); border-radius:var(--r);
  cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.nav__toggle span{ display:block; width:18px; height:2px; border-radius:2px; background:var(--slate);
  transition:transform var(--t) var(--ease), opacity var(--t) var(--ease); }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.drawer{ display:flex; flex-direction:column; padding:0 var(--gut) var(--s2);
  background:#fff; border-top:1px solid var(--border); }
.drawer[hidden]{ display:none; }
.drawer a{ display:flex; align-items:center; min-height:52px; font-weight:600;
  color:var(--text-head); text-decoration:none; border-bottom:1px solid var(--border); }
.drawer a:last-child{ border-bottom:0; color:var(--blue); }

/* ── 04 HERO ───────────────────────────────────────────────────── */
.hero{
  position:relative; isolation:isolate; color:var(--on-dark);
  background-color:var(--navy);
  background-image:linear-gradient(100deg, rgba(7,31,61,.93) 0%, rgba(7,31,61,.80) 52%, rgba(7,31,61,.62) 100%),
                   url(assets/photos/hero-port.jpg);
  background-image:linear-gradient(100deg, rgba(7,31,61,.93) 0%, rgba(7,31,61,.80) 52%, rgba(7,31,61,.62) 100%),
                   image-set(url(assets/photos/hero-port.webp) type("image/webp"),
                             url(assets/photos/hero-port.jpg)  type("image/jpeg"));
  background-size:cover; background-position:center; background-repeat:no-repeat;
  padding-block:clamp(3.5rem,7vw,5rem);
}
.hero__in{
  max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,4vw,3.5rem); align-items:center;
}
.hero h1{ color:#fff; margin-bottom:var(--s3); max-width:16ch; }
.hero__lede{ font-size:1.02rem; color:var(--on-dark-mut); max-width:52ch; margin-bottom:var(--s4); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:var(--s3); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.82rem; font-weight:700; color:#fff;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
  padding:.5rem 1rem; border-radius:var(--pill); margin-bottom:var(--s3);
}
.eyebrow__dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none; }

.hero__hours{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  font-size:.9rem; color:var(--on-dark-mut); }
.hero__hours strong{ color:var(--gold); font-weight:700; }
.pulse{ width:8px; height:8px; border-radius:50%; background:var(--gold); flex:none; }

/* credentials — the reference's floating white card */
.proof{
  background:#fff; color:var(--text);
  border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--s4) var(--s3); box-shadow:var(--sh-lg);
}
.proof__title{ display:flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--blue); margin-bottom:var(--s3); }
.proof__title svg{ width:16px; height:16px; }
.proof__list > div{ display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s2); padding:.7rem 0; border-bottom:1px solid var(--border); }
.proof__list > div:last-child{ border-bottom:0; }
.proof__list dt{ font-size:.88rem; color:var(--text-muted); }
.proof__list dd{ font-size:.92rem; font-weight:700; color:var(--text-head); text-align:right; }
.proof__foot{ margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--border);
  font-size:.82rem; color:var(--text-muted); }

/* ── 05 SECTIONS ───────────────────────────────────────────────── */
.sec{ padding-block:var(--sec-y); }
.sec--muted{ background:var(--bg-2); }
.sec__head{ max-width:60ch; margin-bottom:var(--s5); }
.sec__head h2{ margin-bottom:.75rem; }
.sec__head p{ color:var(--text-muted); font-size:1.02rem; }

.stats{ background:var(--bg-2); border-bottom:1px solid var(--border); }
.stats__in{ max-width:var(--maxw); margin:0 auto; padding:var(--s4) var(--gut);
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); }
.stats__in li{ background:#fff; border:1px solid var(--border); border-radius:var(--r);
  padding:var(--s3); box-shadow:var(--sh-sm); display:flex; flex-direction:column; gap:.2rem; }
.stats__n{ font-size:clamp(1.6rem,2.6vw,2.1rem); font-weight:800;
  letter-spacing:-.025em; color:var(--blue); line-height:1.1; font-variant-numeric:tabular-nums; }
.stats__l{ font-size:.86rem; color:var(--text-muted); }

/* ── 06 BUTTONS, CARDS, PANELS ─────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:46px; padding:.75rem 1.5rem;
  font-size:.9rem; font-weight:800; letter-spacing:.01em;
  border:1px solid transparent; border-radius:var(--pill);
  text-decoration:none; cursor:pointer; background:transparent;
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease),
             color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.btn svg{ width:16px; height:16px; flex:none; }
.btn--amber{ background:var(--gold); color:var(--gold-ink); box-shadow:var(--sh-sm); }
.btn--amber:hover{ background:var(--gold-dk); }
.btn--outline{ border-color:rgba(255,255,255,.45); color:#fff; }
.btn--outline:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn--ghost-d{ border-color:var(--border-2); color:var(--blue); background:#fff; }
.btn--ghost-d:hover{ background:var(--blue-soft); }
.btn--lg{ min-height:50px; padding:.85rem 1.75rem; }
.btn--block{ width:100%; min-height:50px; }

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--r);
  padding:var(--s4) var(--s3); box-shadow:var(--sh-sm);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--sh); }
@media (prefers-reduced-motion: reduce){ .card:hover{ transform:none; } }
.card__ic{ display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:var(--r); background:var(--blue-soft);
  color:var(--blue); margin-bottom:var(--s3); }
.card__ic svg{ width:22px; height:22px; }
.card h3{ margin-bottom:.5rem; }
.card p{ color:var(--text-muted); font-size:.95rem; }

.duo{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3); }
.duo--gap{ margin-top:var(--s4); }
.panel{ background:#fff; border:1px solid var(--border); border-radius:var(--r);
  padding:var(--s4) var(--s3); box-shadow:var(--sh-sm); }
.panel__h{ display:flex; align-items:center; gap:.6rem; font-size:1.05rem; font-weight:800;
  color:var(--text-head); padding-bottom:var(--s2); margin-bottom:var(--s2);
  border-bottom:1px solid var(--border); }
.panel__h svg{ width:20px; height:20px; flex:none; color:var(--blue); }
.panel__p{ color:var(--text-muted); font-size:.95rem; margin-bottom:var(--s3); }

.ticks li{ position:relative; padding:.6rem 0 .6rem 1.75rem; font-size:.95rem;
  border-bottom:1px solid var(--border); }
.ticks li:last-child{ border-bottom:0; }
.ticks li::before{ content:''; position:absolute; left:0; top:1.05rem;
  width:8px; height:8px; border-radius:50%; background:var(--gold); }

.specs{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); }
.spec{ display:flex; gap:.75rem; align-items:flex-start; background:#fff;
  border:1px solid var(--border); border-radius:var(--r); padding:var(--s3) var(--s2); }
.spec__ic{ display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; flex:none; border-radius:50%;
  background:var(--blue-soft); color:var(--blue); }
.spec__ic svg{ width:14px; height:14px; stroke-width:2.4; }
.spec h3{ font-size:.94rem; font-weight:700; margin-bottom:.15rem; }
.spec p{ font-size:.86rem; color:var(--text-muted); line-height:1.55; }

.chips{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chips li{ background:#fff; border:1px solid var(--border); border-radius:var(--pill);
  padding:.55rem 1.05rem; font-size:.88rem; font-weight:600; color:var(--text-head);
  overflow-wrap:anywhere; transition:border-color var(--t) var(--ease), color var(--t) var(--ease); }
.chips li:hover{ border-color:var(--blue); color:var(--blue); }

/* process */
.sec--navy{
  color:var(--on-dark); background-color:var(--navy);
  background-image:linear-gradient(100deg, rgba(7,31,61,.95) 0%, rgba(7,31,61,.86) 100%),
                   url(assets/photos/process-vessel.jpg);
  background-image:linear-gradient(100deg, rgba(7,31,61,.95) 0%, rgba(7,31,61,.86) 100%),
                   image-set(url(assets/photos/process-vessel.webp) type("image/webp"),
                             url(assets/photos/process-vessel.jpg)  type("image/jpeg"));
  background-size:cover; background-position:center; padding-block:var(--sec-y);
}
.sec__head--light h2{ color:#fff; }
.sec__head--light p{ color:var(--on-dark-mut); }
.route__step{ display:grid; grid-template-columns:auto 1fr; gap:0 var(--s3);
  padding-bottom:var(--s5); position:relative; }
.route__step:last-child{ padding-bottom:0; }
.route__n{ grid-row:1 / span 2; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:none; align-self:start; border-radius:50%;
  background:var(--gold); color:var(--gold-ink); font-weight:800; font-size:1rem;
  position:relative; z-index:1; }
.route__step::before{ content:''; position:absolute; left:21.5px; top:44px; bottom:0;
  width:2px; background:rgba(255,255,255,.18); }
.route__step:last-child::before{ display:none; }
.route__step h3{ color:#fff; font-size:1.1rem; margin-bottom:.35rem; padding-top:.6rem; }
.route__step p{ color:var(--on-dark-mut); max-width:62ch; font-size:.96rem; }

/* showcase */
.showcase{
  position:relative; min-height:clamp(280px,32vw,380px); display:grid; align-items:center;
  color:var(--on-dark); background-color:var(--navy);
  background-image:linear-gradient(95deg, rgba(7,31,61,.94) 0%, rgba(7,31,61,.72) 60%, rgba(7,31,61,.45) 100%),
                   url(assets/photos/yard.jpg);
  background-image:linear-gradient(95deg, rgba(7,31,61,.94) 0%, rgba(7,31,61,.72) 60%, rgba(7,31,61,.45) 100%),
                   image-set(url(assets/photos/yard.webp) type("image/webp"),
                             url(assets/photos/yard.jpg)  type("image/jpeg"));
  background-size:cover; background-position:center; padding-block:var(--s6);
}
.showcase__in{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.showcase h2{ color:#fff; max-width:18ch; margin-bottom:.75rem; }
.showcase p{ color:var(--on-dark-mut); max-width:48ch; }
.showcase__rule{ width:54px; height:4px; border-radius:2px; background:var(--gold); margin-bottom:var(--s3); }

/* ── 07 CLIENTS ────────────────────────────────────────────────── */
.roster{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s2); }
.roster li{ display:flex; }
.roster__card{
  flex:1; display:flex; align-items:center; justify-content:center; gap:.45rem;
  text-align:center; min-height:96px; padding:var(--s3) var(--s2);
  background:#fff; border:1px solid var(--border); border-radius:var(--r);
  color:var(--text-head); font-size:.9rem; font-weight:600; line-height:1.45;
  text-decoration:none; overflow-wrap:anywhere; box-shadow:var(--sh-sm);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
             border-color var(--t) var(--ease), color var(--t) var(--ease);
}
a.roster__card:hover{ transform:translateY(-3px); box-shadow:var(--sh);
  border-color:var(--blue); color:var(--blue); }
@media (prefers-reduced-motion: reduce){ a.roster__card:hover{ transform:none; } }
a.roster__card:hover .roster__ext{ opacity:1; }
.roster__ext{ width:12px; height:12px; flex:none; opacity:0; transition:opacity var(--t) var(--ease); }
.roster__card--flat{ color:var(--text-muted); box-shadow:none; background:var(--bg-2); }
.roster__more{ margin-top:var(--s3); color:var(--text-muted); font-size:.9rem; }

/* ── 08 QUOTE + FORMS ──────────────────────────────────────────── */
.quote{ background:var(--bg-2); padding-block:var(--sec-y); }
.quote__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,26rem);
  gap:clamp(2rem,4vw,3.5rem); align-items:start; }
.quote h2{ margin-bottom:.75rem; }
.quote__copy > p{ color:var(--text-muted); max-width:50ch; margin-bottom:var(--s4); }

.people{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s2); }
.person{ background:#fff; border:1px solid var(--border); border-radius:var(--r);
  padding:var(--s3); box-shadow:var(--sh-sm); }
.person__role{ font-size:.76rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-muted); margin-bottom:.3rem; }
.person__name{ font-size:1.05rem; font-weight:800; color:var(--text-head); margin-bottom:.5rem; }
.person__tel{ display:inline-flex; align-items:center; gap:.45rem; min-height:44px;
  font-size:1.1rem; font-weight:800; color:var(--blue); text-decoration:none; }
.person__tel svg{ width:16px; height:16px; }
.person__tel:hover{ color:var(--blue-dk); text-decoration:underline; text-underline-offset:4px; }

.expect{ margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--border); }
.expect h3{ font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--blue); margin-bottom:var(--s3); }
.expect ol{ counter-reset:step; display:grid; gap:var(--s2); }
.expect li{ counter-increment:step; position:relative; padding-left:2.4rem;
  color:var(--text-muted); font-size:.95rem; max-width:48ch; }
.expect li::before{ content:counter(step); position:absolute; left:0; top:.1rem;
  width:26px; height:26px; border-radius:50%; background:var(--blue-soft); color:var(--blue);
  display:grid; place-items:center; font-size:.78rem; font-weight:800; }

.qcard{ background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--s4) var(--s3); box-shadow:var(--sh-lg); }
.qcard h3{ font-size:1.3rem; font-weight:800; margin-bottom:.3rem; }
.qcard__note{ font-size:.88rem; color:var(--text-muted); margin-bottom:var(--s3); }
.qcard__alt{ font-size:.84rem; color:var(--text-muted); margin-top:var(--s2); text-align:center; }
.qcard__alt a{ color:var(--blue); font-weight:700; overflow-wrap:anywhere; }

.field{ margin-bottom:var(--s3); }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); }
.field label{ display:block; font-size:.86rem; font-weight:700; color:var(--text-head); margin-bottom:.4rem; }
.field input, .field select, .field textarea{
  width:100%; min-height:46px; padding:.7rem .9rem;
  font-family:var(--sans); font-size:.95rem; color:var(--text);
  background:#fff; border:1px solid var(--border-2); border-radius:var(--r);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.field textarea{ min-height:96px; resize:vertical; line-height:1.6; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--blue); }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,87,168,.16); outline:none; }
.field input[aria-invalid="true"]{ border-color:#C0392B; }
.field input::placeholder, .field textarea::placeholder{ color:#8A9AAC; }
.opt{ font-weight:500; color:var(--text-muted); }
.hint{ font-size:.79rem; color:var(--text-muted); margin-top:.3rem; line-height:1.5; }
.err{ font-size:.79rem; font-weight:700; color:#C0392B; margin-top:.3rem; }
.qform__err{ background:#FDECEA; border:1px solid #F0B9B2; color:#8E2A1F;
  border-radius:var(--r); padding:.7rem .9rem; font-size:.86rem; font-weight:600; margin-bottom:var(--s3); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

#q-submit[aria-busy="true"]{ opacity:.75; cursor:progress; }
.qdone{ text-align:center; padding:var(--s4) var(--s2); }
.qdone__ic{ display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%; background:#E6F4EC; color:#1B7F4F; margin-bottom:var(--s3); }
.qdone__ic svg{ width:24px; height:24px; stroke-width:2.4; }
.qdone h4{ font-size:1.2rem; font-weight:800; margin-bottom:.5rem; }
.qdone p{ color:var(--text-muted); font-size:.95rem; margin-bottom:var(--s3); }
.qdone p a{ color:var(--blue); font-weight:700; }

/* ── 09 VISIT + FOOTER ─────────────────────────────────────────── */
.visit{ background:#fff; padding-block:var(--sec-y); }
.visit__in{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,4vw,3.5rem); align-items:center; }
.visit h2{ margin-bottom:.75rem; }
.visit__p{ color:var(--text-muted); max-width:44ch; margin-bottom:var(--s3); }
.visit__meta{ display:grid; gap:var(--s3); margin-bottom:var(--s3); }
.visit__meta dt{ display:flex; align-items:center; gap:.45rem; font-size:.78rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); margin-bottom:.4rem; }
.visit__meta dt svg{ width:14px; height:14px; color:var(--blue); }
.visit__meta dd{ line-height:1.7; }
.visit__live{ color:var(--blue); font-weight:700; }
.visit__map{ position:relative; aspect-ratio:4/3; border-radius:var(--r-lg);
  overflow:hidden; border:1px solid var(--border); box-shadow:var(--sh); background:var(--bg-2); }
.visit__map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.foot{ background:var(--navy); color:var(--on-dark-mut); padding-block:var(--s5); font-size:.9rem; }
.foot__in{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); }
.foot__logo{ height:34px; width:auto; margin-bottom:var(--s2); }
.foot__name{ color:#fff; font-weight:800; font-size:1rem; letter-spacing:-.02em; }
.foot__sub{ margin-top:.25rem; font-size:.84rem; }
.foot__col h3{ display:flex; align-items:center; gap:.45rem; font-size:.78rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.07em; color:#fff; margin-bottom:.7rem; }
.foot__col h3 svg{ width:14px; height:14px; color:var(--gold); }
.foot__col p{ line-height:1.75; }
.foot__col a{ color:var(--on-dark-mut); overflow-wrap:anywhere; display:inline-block;
  padding-block:.2rem; transition:color var(--t) var(--ease); }
.foot__col a:hover{ color:var(--gold); }
.foot__live{ color:var(--gold); font-weight:700; }

/* ── 10 MOTION ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  .js-anim .hero__copy > *{ opacity:0; animation:fadeUp .6s var(--ease) forwards; }
  .js-anim .hero__copy > *:nth-child(1){ animation-delay:.06s }
  .js-anim .hero__copy > *:nth-child(2){ animation-delay:.14s }
  .js-anim .hero__copy > *:nth-child(3){ animation-delay:.22s }
  .js-anim .hero__copy > *:nth-child(4){ animation-delay:.30s }
  .js-anim .hero__copy > *:nth-child(5){ animation-delay:.38s }
  .js-anim .proof{ opacity:0; animation:fadeUp .7s var(--ease) .3s forwards; }
  .js-anim.seq-done .hero__copy > *, .js-anim.seq-done .proof{
    opacity:1; transform:none; animation:none; }
  @keyframes fadeUp{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

  [data-stagger] > *{ opacity:0; }
  [data-stagger].in > *{ opacity:1; transition:opacity .45s var(--ease);
    transition-delay:calc(var(--d,0) * 60ms); }

  .js-anim .route__step::before{ transform:scaleY(0); transform-origin:top; }
  .js-anim .route.in .route__step::before{ transform:scaleY(1);
    transition:transform .6s var(--ease); transition-delay:calc(var(--i,0) * 150ms + 180ms); }
  .js-anim .route__n, .js-anim .route__step > h3, .js-anim .route__step > p{ opacity:0; }
  .js-anim .route.in .route__n,
  .js-anim .route.in .route__step > h3,
  .js-anim .route.in .route__step > p{ opacity:1; transition:opacity .42s var(--ease);
    transition-delay:calc(var(--i,0) * 150ms); }
}
@media (prefers-reduced-motion: reduce){ [data-stagger] > *{ opacity:1; } }

/* ── 11 RESPONSIVE ─────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1279px){
  .hero{ background-image:linear-gradient(100deg, rgba(7,31,61,.94) 0%, rgba(7,31,61,.82) 100%),
         image-set(url(assets/photos/hero-port-md.webp) type("image/webp"), url(assets/photos/hero-port.jpg) type("image/jpeg")); }
  .sec--navy{ background-image:linear-gradient(100deg, rgba(7,31,61,.95) 0%, rgba(7,31,61,.88) 100%),
         image-set(url(assets/photos/process-vessel-md.webp) type("image/webp"), url(assets/photos/process-vessel.jpg) type("image/jpeg")); }
  .showcase{ background-image:linear-gradient(95deg, rgba(7,31,61,.94) 0%, rgba(7,31,61,.62) 100%),
         image-set(url(assets/photos/yard-md.webp) type("image/webp"), url(assets/photos/yard.jpg) type("image/jpeg")); }
}
@media (max-width: 767px){
  .hero{ background-image:linear-gradient(100deg, rgba(7,31,61,.95) 0%, rgba(7,31,61,.88) 100%),
         image-set(url(assets/photos/hero-port-sm.webp) type("image/webp"), url(assets/photos/hero-port.jpg) type("image/jpeg")); }
  .sec--navy{ background-image:linear-gradient(100deg, rgba(7,31,61,.96) 0%, rgba(7,31,61,.90) 100%),
         image-set(url(assets/photos/process-vessel-sm.webp) type("image/webp"), url(assets/photos/process-vessel.jpg) type("image/jpeg")); }
  .showcase{ background-image:linear-gradient(95deg, rgba(7,31,61,.95) 0%, rgba(7,31,61,.72) 100%),
         image-set(url(assets/photos/yard-sm.webp) type("image/webp"), url(assets/photos/yard.jpg) type("image/jpeg")); }
}
@media (max-width: 1080px){
  .hero__in{ grid-template-columns:1fr; }
  .proof{ max-width:34rem; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .specs{ grid-template-columns:repeat(2,1fr); }
  .roster{ grid-template-columns:repeat(4,1fr); }
  .visit__in{ grid-template-columns:1fr; }
}
@media (max-width: 899px){
  .nav__links, .nav__cta{ display:none; }
  .nav__toggle{ display:flex; }
  .quote__in{ grid-template-columns:1fr; }
}
@media (max-width: 860px){
  .roster{ grid-template-columns:repeat(2,1fr); }
  .roster__card{ min-height:78px; }
  .stats__in{ grid-template-columns:repeat(2,1fr); }
  .foot__in{ grid-template-columns:repeat(2,1fr); }
  .duo{ grid-template-columns:1fr; }
}
@media (max-width: 620px){
  .cards{ grid-template-columns:1fr; }
  .specs{ grid-template-columns:1fr; }
  .people{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .route__step{ grid-template-columns:1fr; gap:.7rem; }
  .route__n{ grid-row:auto; }
  .route__step::before{ display:none; }
  .route__step h3{ padding-top:0; }
  .field--row{ grid-template-columns:1fr; }
}
@media (max-width: 420px){
  .roster{ grid-template-columns:1fr; }
  .stats__in{ grid-template-columns:1fr; }
  .foot__in{ grid-template-columns:1fr; }
}