/* ═══════════════════════════════════════════════════
   BRAND TOKENS — exactly as specified by the client
   ═══════════════════════════════════════════════════ */
:root{
  --navy:#112A46;          /* base backgrounds & headers      */
  --gold:#D4AF37;          /* key actions & main buttons      */
  --teal:#0A6B74;          /* active accents & hover states   */
  --white:#FFFFFF;         /* content backgrounds & spacing   */

  --navy-2:#0C1F35;        /* deeper navy for strips          */
  --navy-3:#1B3A5C;        /* navy hairlines on dark          */
  --charcoal:#1E2A33;      /* body text on white              */
  --charcoal-2:#4A5A66;    /* secondary text on white         */
  --mist:#F4F7F9;          /* section tint on white           */
  --line:#DCE4EA;          /* hairlines on white              */

  --head:"Cinzel",Georgia,serif;
  --body:"Montserrat",system-ui,sans-serif;

  --h1:clamp(32px,2.2rem + 2.2vw,55px);
  --h2:clamp(24px,1.4rem + 1.1vw,33px);
  --h3:19px;
  --p:16px;

  --gut:clamp(20px,5vw,64px);
  --max:1240px;
  /* height of the sticky header at rest. The mobile hero subtracts it so a
     100svh frame does not push itself a header's worth below the fold. */
  --hdr-h:113px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--charcoal);font-family:var(--body);font-size:var(--p);font-weight:400;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

h1,h2,h3{font-family:var(--head);margin:0;color:var(--navy)}
h1{font-size:var(--h1);font-weight:700;text-transform:uppercase;line-height:1.12;letter-spacing:.02em}
h2{font-size:var(--h2);font-weight:600;line-height:1.25;letter-spacing:.01em}
h3{font-size:var(--h3);font-weight:500;line-height:1.4}
p{margin:0}
.on-navy,.on-navy h1,.on-navy h2,.on-navy h3{color:var(--white)}
.on-navy p{color:#C9D6E2}

.kicker{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--teal);margin:0 0 14px}
.on-navy .kicker{color:var(--gold)}
.lead{font-size:var(--p);color:var(--charcoal-2);max-width:62ch}
.on-navy .lead{color:#C2D1DE}

/* section rhythm — symmetrical, generous, never cluttered */
.sec{padding-block:clamp(56px,8vw,104px)}
.sec-head{text-align:center;max-width:760px;margin:0 auto clamp(36px,5vw,60px)}
.sec-head p.lead{margin-inline:auto}
.rule{width:64px;height:2px;background:var(--gold);margin:18px auto 0;transform:scaleX(0);transform-origin:center;transition:transform .9s var(--ease)}
.rule.in{transform:scaleX(1)}
.tint{background:var(--mist)}
.navy{background:var(--navy)}

/* meridian divider — motif taken from the globe in the mark */
.meridian{display:flex;align-items:center;gap:16px;justify-content:center;padding-block:8px}
.meridian i{height:1px;background:linear-gradient(90deg,transparent,var(--gold));width:min(180px,26vw)}
.meridian i+i{background:linear-gradient(270deg,transparent,var(--gold))}
.meridian b{width:9px;height:9px;background:var(--gold);transform:rotate(45deg);flex:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:16px 30px;border:2px solid transparent;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--teal);color:var(--white)}
.btn-out{border-color:var(--white);color:var(--white)}
.btn-out:hover{background:var(--white);color:var(--navy)}
.btn-navy{background:var(--navy);color:var(--white)}
.btn-navy:hover{background:var(--teal)}

/* ═══ SCROLL PROGRESS ═══ */
#prog{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--teal),var(--gold));z-index:120;transition:width .12s linear}

/* ═══ BACK TO TOP ═══ */
#top-btn{position:fixed;z-index:110;
  right:calc(22px + env(safe-area-inset-right));
  bottom:calc(22px + env(safe-area-inset-bottom));
  width:50px;height:50px;border:0;background:var(--gold);color:var(--navy);cursor:pointer;display:grid;place-items:center;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .4s,transform .4s var(--ease),background .3s}
#top-btn.on{opacity:1;transform:none;pointer-events:auto}
#top-btn:hover{background:var(--teal);color:#fff}

/* ═══ WHATSAPP ═══ */
/* mirrors #top-btn on the opposite edge; square to match the sharp-cornered
   button language. Offsets respect the iOS home-indicator safe area. */
.wa{position:fixed;z-index:110;
  left:calc(22px + env(safe-area-inset-left));
  bottom:calc(22px + env(safe-area-inset-bottom));
  display:inline-grid;place-items:center;width:50px;height:50px;
  background:#25D366;color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.26);
  transition:background .3s,transform .35s var(--ease),box-shadow .3s}
.wa svg{width:26px;height:26px}
.wa:hover{background:#1DA851;transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.34)}

/* anchors clear the sticky header */
section[id],div[id]{scroll-margin-top:calc(var(--hdr-h) + 3px)}

/* ═══ HEADER ═══ */
.hdr{background:var(--navy);position:sticky;top:0;z-index:90;border-bottom:1px solid var(--navy-3)}
/* Three tracks, not a flex row. With auto margins the leftover width pooled
   into two gaps that grew as the nav shrank — losing the Capabilities tab left
   the five remaining links marooned between a hole on each side. 1fr auto 1fr
   centres the nav against the bar itself, so the gaps stay even whatever the
   nav is carrying, and the brand and the CTA sit hard to their own edges.
   Explicit column numbers matter: with the nav and the CTA hidden under 900px,
   the burger would otherwise fall into the middle track. */
.hdr .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:20px;padding-block:12px}
.brand{grid-column:1;justify-self:start}
.mainnav{grid-column:2;justify-self:center}
.hdr .btn,#burger{grid-column:3;justify-self:end}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:88px;height:88px;flex:none}
.brand-tx{font-family:var(--head);font-weight:600;font-size:17px;letter-spacing:.06em;color:var(--white);line-height:1.25;text-transform:uppercase;white-space:nowrap}
.brand-tx small{display:block;font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.24em;color:var(--gold);margin-top:3px;white-space:nowrap}
.mainnav{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(12px,1.6vw,26px)}
.mainnav a{font-size:clamp(12px,.5vw + .46rem,15px);font-weight:600;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;color:#D3DEE8;padding-block:6px;border-bottom:2px solid transparent;transition:color .25s,border-color .25s}
.mainnav a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.hdr .btn{padding:14px 20px;font-size:13px;letter-spacing:.12em;white-space:nowrap}
#burger{display:none;background:none;border:1px solid var(--navy-3);color:var(--white);padding:10px 14px;font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
#drawer{display:none;background:var(--navy-2);border-top:1px solid var(--navy-3)}
#drawer.open{display:block}
/* the burger is hidden above 900px, so a menu left open before a resize
   or rotate would otherwise stay stuck under the header */
@media(min-width:901px){#drawer,#drawer.open{display:none}}
#drawer a{display:block;padding:15px var(--gut);color:#D3DEE8;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--navy-3)}

/* ═══ HERO ═══ */
/* One screen, measured from under the header rather than from the top of the
   document - the bar is in flow above this, so a plain 100svh always ran a
   header taller than the space it had and pushed its own last line past the
   fold. svh rather than vh so mobile browser chrome cannot do the same thing
   again as it retracts; the vh line is the fallback for engines without svh. */
.hero{position:relative;background:var(--navy);overflow:hidden;display:flex;flex-direction:column;
  min-height:clamp(620px,calc(94vh - var(--hdr-h)),940px);
  min-height:clamp(620px,calc(100svh - var(--hdr-h)),940px)}
/* The photograph is a pale, cool composite — bright sky, a white flare through
   the middle — so white type needs help. It is graded down into the navy range
   rather than dimmed flat, which would have thrown away the gantries and the
   hull the way the old network wash did. */
.hero-ph{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-ph img{width:100%;height:100%;object-fit:cover;object-position:58% center;
  filter:saturate(.8) contrast(1.08) brightness(.72);
  animation:kb 26s ease-in-out infinite alternate}
/* Scale, not translate: a slow push-in never uncovers its own edge, so there is
   no strip of bare navy to appear at the crown the way the parallax bands had. */
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.11)}}

/* Directional: heavy under the type on the left, clearing across the middle so
   the vessel and the freighters read, then navy again at the foot so the facts
   strip and the section beneath it join without a seam. The teal and gold casts
   from the old veil survive at low strength to keep the palette. */
.hero-veil{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(7,20,36,.86) 0%,rgba(8,22,39,.62) 30%,rgba(10,26,45,.22) 62%,rgba(12,31,53,.1) 100%),
    linear-gradient(180deg,rgba(9,24,41,.6) 0%,transparent 24%,transparent 66%,rgba(9,24,41,.8) 100%),
    radial-gradient(70% 60% at 12% 30%,rgba(10,107,116,.3),transparent 62%),
    radial-gradient(50% 50% at 92% 88%,rgba(212,175,55,.1),transparent 65%)}
.hero-grid{position:absolute;inset:0;z-index:2;opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px);
  background-size:64px 64px}
/* Wider than the site's 1240 container on purpose. Inside 1240 the copy sat
   340px in from the edge of a 1920 screen with scrim either side, which is what
   made a left-aligned block read as floating in the middle of the picture.
   Centred in the frame, not anchored to its foot. margin-top:auto used to push
   the copy down against the facts strip, which balanced it; with the strip gone
   the same rule left the whole surplus standing above the type as one empty
   band. margin-block:auto splits that surplus evenly instead, and the padding
   is symmetric so the type itself centres, not just its box. */
.hero .wrap{position:relative;z-index:4;max-width:1440px;margin-block:auto;
  padding-block:clamp(40px,6vw,72px)}
/* A flat ceiling, no percentage. Twice now a percentage cap has resolved below
   what the tagline needs at some width and folded it — 64% of the container is
   about 400px on a mid-size window, and that line is 555px. The wrap already
   limits the measure; this only stops the block running the full 1440. */
.hero-tx{max-width:900px}

.eyebrow{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin:0 0 20px}
.hero .eyebrow,.hero-kin{text-shadow:0 1px 18px rgba(5,14,26,.8)}
.eyebrow i{display:block;width:40px;height:1px;background:var(--gold);flex:none}
/* On a phone this line is wider than the column and breaks, and left to itself
   it broke after the second separator - a full line, then "Est. 2017" alone
   under a dangling middot. Balancing splits it evenly between the two, and
   browsers without text-wrap fall back to exactly the behaviour above. */
.hero .eyebrow span{text-wrap:balance}
/* Two lines, always — the lockup reads "Jay Jagannath / Marine Eximss" the way
   it does beside the logo in the header. The spans were already block-level,
   but max-width:12ch capped the box below the 13 characters each line actually
   needs (a Cinzel `ch` is the width of a zero, well under its average capital),
   so both lines wrapped again and the name arrived in four. nowrap settles the
   structure; the font-size below keeps it inside the column instead of
   overflowing once nothing can break. */
/* Set as a lockup, not as a sentence: line-height 1.04 instead of the 1.12 h1
   carries elsewhere, so the two lines bind into one mark the way they do beside
   the logo. Tracking eases to .015em because Cinzel needs less of it the larger
   it gets, and the cap rises to 56px into the room the standards strip left. */
.hero h1{color:var(--white);max-width:none;margin:0;font-size:clamp(27px,6vw,88px);
  line-height:1.03;letter-spacing:.015em;text-shadow:0 2px 34px rgba(5,14,26,.72)}
.hero h1 span{display:block;white-space:nowrap}
/* The second line is the header lockup's, enlarged: same family, same weight,
   same two-thirds size step and same .24em, so MARINE EXIMSS reads under the
   name here exactly as it does beside the mark up there. Deliberately shorter
   than the line above rather than tracked out to meet it - a subtitle that
   fills the full measure stops reading as subordinate, which is what a plain
   size drop cannot fix on its own. */
.hero h1 .gold{color:var(--gold);font-family:var(--body);font-weight:500;
  font-size:.6667em;letter-spacing:.24em}
.hero-kin{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:30px 0 0;font-family:var(--body);font-size:15.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#9FB2C4}
.kin{position:relative;display:inline-block;height:1.5em;overflow:hidden;vertical-align:bottom;min-width:14ch}
.kin b{display:block;height:1.5em;line-height:1.5em;color:var(--gold);font-weight:700;transition:transform .7s var(--ease)}

/* entrance */
.up{opacity:0;transform:translateY(28px);animation:up 1s var(--ease) forwards}
@keyframes up{to{opacity:1;transform:none}}


/* ═══ ABOUT ═══ */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:stretch}
/* Two numbered plates rather than one photograph: the ash has a source and a
   recovery stage, and naming them says more about the operation than a single
   establishing shot does. Set as documentary plates — index, title, one line of
   caption on navy — which is the same vocabulary as the .std standard cards. */
.about-ph{position:relative;overflow:visible;display:grid;gap:clamp(14px,1.6vw,20px)}
.about-ph::after{content:"";position:absolute;left:-14px;bottom:-14px;width:120px;height:120px;border-left:3px solid var(--gold);border-bottom:3px solid var(--gold)}

.plate{margin:0;background:var(--white);border:1px solid var(--line);box-shadow:0 2px 18px rgba(17,42,70,.07);overflow:hidden}
.plate-img{overflow:hidden}
.plate-img img{display:block;width:100%;height:clamp(148px,16vw,196px);object-fit:cover;transition:transform 1.1s var(--ease)}
.plate:hover .plate-img img{transform:scale(1.055)}

/* The index sits in its own column and spans both text rows, so title and
   caption stack cleanly beside it however long the caption runs. */
.plate figcaption{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px clamp(12px,1.2vw,16px);
  padding:clamp(13px,1.4vw,17px) clamp(15px,1.6vw,20px);background:var(--navy);color:var(--white)}
/* Aligned to the title, not centred on the block — once the caption wraps to
   two lines a centred index drifts down beside the wrong line. */
.plate-n{grid-row:1 / 3;align-self:start;font-family:var(--head);font-size:clamp(19px,2vw,23px);font-weight:600;line-height:1;color:var(--gold);letter-spacing:.02em}
.plate-t{font-family:var(--head);font-size:clamp(15px,1.3vw,17px);font-weight:600;letter-spacing:.05em;line-height:1.2}
.plate-s{font-size:12.5px;line-height:1.5;color:#A8BACB}

/* One photograph instead of two stacked plates. The figure is a flex column so
   the picture takes whatever height the copy beside it needs and the caption
   stays pinned to the foot — which is what makes the image read as filling the
   column rather than floating at a fixed height in the middle of it. The
   min-height is the floor for the stacked layout below 900px, where there is
   no second column to match. */
.about-plate{display:flex;flex-direction:column;height:100%}
.about-plate .plate-img{flex:1 1 auto;min-height:clamp(300px,34vw,520px)}
.about-plate .plate-img img{height:100%}
/* no index on a single plate, so the caption is one column, not two */
.about-plate figcaption{grid-template-columns:minmax(0,1fr)}
.about-plate .plate-t{font-size:clamp(16px,1.4vw,19px)}
.mv{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px}
.mv-card{background:var(--white);border-top:3px solid var(--gold);padding:26px 24px;box-shadow:0 2px 18px rgba(17,42,70,.07)}
.mv-card h3{margin-bottom:10px}
.mv-card p{font-size:15px;color:var(--charcoal-2)}

/* ═══ PRODUCT CATALOG ═══ */
.cat{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;position:relative;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:2}
.card:hover::before{transform:scaleX(1)}
.card-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(17,42,70,.5));opacity:0;transition:opacity .5s}
.card:hover .card-ph::after{opacity:1}
.card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(17,42,70,.13);border-color:var(--teal)}
.card-ph{height:190px;overflow:hidden;background:var(--navy);position:relative}
.card-ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .card-ph img{transform:scale(1.06)}
.card-bd{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.tagline{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.card p{font-size:15px;color:var(--charcoal-2)}
.card dl{margin:auto 0 0;border-top:1px solid var(--line);padding-top:14px;display:grid;gap:7px}
.card dl div{display:flex;justify-content:space-between;gap:14px;font-size:13px}
.card dt{color:var(--charcoal-2);font-weight:500}
.card dd{margin:0;font-weight:600;color:var(--navy);text-align:right}

/* ═══ PRODUCT DRAWER ═══ */
#scrim{position:fixed;inset:0;background:rgba(8,20,34,.66);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s;z-index:130}
#scrim.on{opacity:1;visibility:visible}
/* right-hand panel, vertically centred and inset so it never touches the
   viewport edges. The panel itself never scrolls - the photo is pinned and
   only .dw-bd scrolls, so the close button stays reachable however long the
   copy is. */
#draw{position:fixed;z-index:140;top:50%;
  right:clamp(12px,2.2vw,28px);
  width:min(520px,calc(100vw - 40px));
  max-height:calc(100vh - 56px);
  max-height:calc(100dvh - 56px);
  background:var(--white);box-shadow:0 30px 80px rgba(8,20,34,.45);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;visibility:hidden;
  transform:translate(34px,-50%);
  transition:opacity .4s var(--ease),transform .5s var(--ease),visibility .5s}
#draw.on{opacity:1;visibility:visible;transform:translate(0,-50%)}
.dw-ph{height:clamp(160px,24vh,230px);position:relative;flex:none;background:var(--navy)}
.dw-ph img{width:100%;height:100%;object-fit:cover}
.dw-x{position:absolute;top:16px;right:16px;width:42px;height:42px;border:0;background:var(--navy);color:var(--gold);cursor:pointer;display:grid;place-items:center;transition:background .3s}
.dw-x:hover{background:var(--gold);color:var(--navy)}
.dw-bd{padding:30px 28px 34px;display:flex;flex-direction:column;gap:16px;
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.dw-bd .tagline{color:var(--teal)}
.dw-bd h3{font-size:26px}
.dw-bd p{font-size:15px;color:var(--charcoal-2)}
.dw-spec{margin:6px 0 0;border-top:1px solid var(--line)}
.dw-spec div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.dw-spec dt{color:var(--charcoal-2);font-weight:500}
.dw-spec dd{margin:0;font-weight:600;color:var(--navy);text-align:right}
.dw-uses{display:flex;flex-wrap:wrap;gap:8px}
.dw-uses span{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);border:1px solid var(--line);padding:7px 11px}
.card{cursor:pointer}
.card-more{margin-top:14px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);display:flex;align-items:center;gap:8px}
.card-more i{display:block;width:16px;height:1px;background:var(--teal);transition:width .4s var(--ease)}
.card:hover .card-more i{width:30px}

/* ═══ LIGHTBOX ═══ */
/* fades rather than snapping, and matches the drawer's inset so a tall
   certificate never bleeds off the top and bottom of the screen */
#lb{position:fixed;inset:0;background:rgba(8,20,34,.9);display:grid;place-items:center;z-index:150;
  padding:clamp(16px,4vw,28px);overscroll-behavior:contain;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
#lb.on{opacity:1;visibility:visible}
#lb img{max-width:min(560px,calc(100vw - 40px));max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);
  width:auto;height:auto;object-fit:contain;background:#fff;padding:clamp(14px,3vw,26px)}
#lb button{position:absolute;top:22px;right:22px;width:46px;height:46px;border:0;background:var(--gold);color:var(--navy);cursor:pointer;font-size:20px}
.cert{cursor:zoom-in}

/* ═══ CLASS TABLE ═══ */
.tbl{width:100%;border-collapse:collapse;font-size:15px;background:var(--white);border:1px solid var(--line)}
.tbl-hint{display:none;margin:12px 0 0;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
/* On navy the teal hint has too little contrast, so it takes the gold the rest
   of the section's small type uses. */
.on-navy .tbl-hint,.navy .tbl-hint{color:var(--gold)}
/* "45 μm" is set in labels that are uppercased, and uppercasing a Greek small
   mu gives a capital Mu - which reads as "45 MM". A thousandfold difference in
   a spec figure, so the unit opts out of the transform. */
.unit{text-transform:none}
.tbl th,.tbl td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{background:var(--navy);color:var(--white);font-family:var(--head);font-size:var(--h3);font-weight:500;letter-spacing:.02em}
.tbl thead th:first-child{width:170px}
.tbl tbody th{font-weight:600;color:var(--navy);width:170px;background:var(--mist)}
.tbl tbody tr:last-child td,.tbl tbody tr:last-child th{border-bottom:0}
.tbl td{color:var(--charcoal-2)}

/* ═══ CLASSIFICATION BENCH ═══ */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:32px;background:transparent;outline:none;margin:-4px 0 2px}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--navy-3)}
input[type=range]::-moz-range-track{height:3px;background:var(--navy-3)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9.5px;border-radius:50%;background:var(--gold);border:3px solid var(--navy);cursor:pointer;transition:transform .2s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--gold);border:3px solid var(--navy);cursor:pointer}
.ticks{display:flex;justify-content:space-between;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#9FB2C4}
.ticks b{color:var(--gold);font-weight:700}

/* ═══ LOGISTICS STEPS ═══ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.step{background:var(--white);border:1px solid var(--line);padding:28px 24px;position:relative;overflow:hidden;transition:border-color .35s,box-shadow .35s,transform .35s var(--ease)}
.step::after{content:var(--n,"");position:absolute;right:-14px;bottom:-22px;font-family:var(--head);font-size:74px;font-weight:700;color:var(--mist);line-height:1;z-index:0}
.step:hover{transform:translateY(-5px)}
.step>*{position:relative;z-index:1}
.step:hover{border-color:var(--gold);box-shadow:0 12px 32px rgba(17,42,70,.1)}
.step b{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--navy);color:var(--gold);font-family:var(--head);font-size:17px;font-weight:600;margin-bottom:16px;transition:background .35s}
.step:hover b{background:var(--teal);color:var(--white)}
.step h3{margin-bottom:8px}
.step p{font-size:15px;color:var(--charcoal-2)}










/* ═══ PACKING ═══ */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pack{border:1px solid var(--navy-3);padding:30px 26px;text-align:center;transition:background .35s,border-color .35s}
.pack:hover{background:rgba(10,107,116,.24);border-color:var(--gold)}
.pack svg{margin:0 auto 16px;display:block}
.pack h3{color:var(--white);margin-bottom:8px}
.pack p{font-size:14px;color:#B9C8D6}

/* ═══ CALCULATOR ═══ */
.calc{display:grid;grid-template-columns:1.15fr .85fr;border:1px solid var(--line)}
.calc-in{padding:clamp(28px,4vw,44px);background:var(--white)}
.calc-out{padding:clamp(28px,4vw,44px);background:var(--navy);color:var(--white)}
.calc-lbl{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin:0 0 16px}
.calc-lbl b{color:var(--navy);font-weight:700}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.opt{background:var(--white);border:1px solid var(--line);padding:16px 14px;font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--charcoal);cursor:pointer;transition:all .3s var(--ease)}
.opt:hover{border-color:var(--teal);color:var(--teal)}
.opt.on{background:var(--navy);border-color:var(--navy);color:var(--white)}
.calc-in input[type=range]{margin-top:6px}
.calc-in input[type=range]::-webkit-slider-runnable-track{background:var(--line)}
.calc-in input[type=range]::-moz-range-track{background:var(--line)}
.calc-in input[type=range]::-webkit-slider-thumb{border-color:var(--white);box-shadow:0 2px 8px rgba(17,42,70,.3)}
.calc-in .ticks{color:var(--charcoal-2)}
.calc-rows{display:grid;gap:0}
.calc-rows div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 0;border-bottom:1px solid var(--navy-3)}
.calc-rows dt{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#9FB2C4}
.calc-rows dd{margin:0;font-family:var(--head);font-size:24px;font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums}
.calc-note{font-size:12px;color:#8FA3B6;margin-top:16px;line-height:1.6}

/* ═══ APPLICATIONS ═══ */
.apps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px)}
.apps ul{list-style:none;margin:0;padding:0}
.apps li{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px;transition:padding-left .4s var(--ease),color .3s,opacity .8s var(--ease),transform .8s var(--ease)}
.apps li:hover{padding-left:10px;color:var(--teal)}
.apps li:first-child{border-top:1px solid var(--line)}
.apps li::before{content:"";width:7px;height:7px;background:var(--gold);transform:rotate(45deg);margin-top:8px;flex:none}
.apps h3{margin-bottom:12px}

/* ═══ NETWORK ═══ */
.net{position:relative;overflow:hidden;background:var(--navy)}
/* Slack above and below rather than all at the foot, so the clamped parallax
   in main.js can never pull the picture off its own top edge. It never showed
   before because the wash was all but opaque; at the opacity below it would. */
.net-ph{position:absolute;inset:-12% 0}
/* The map was at .3 under a near-opaque wash, which left the watermark as the
   most legible thing in it. It is already navy and gold — the brand palette —
   so it can carry far more weight than that. */
.net-ph img{width:100%;height:100%;object-fit:cover;opacity:.66;filter:saturate(1.06) contrast(1.05);will-change:transform}
/* Was a 90deg wash, .96 at the left edge — written for copy that sat on the
   left. This section's copy is centred, so the darkening is centred with it:
   a soft pool under the type, and only a light tint everywhere else. */
.net-ph::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 58% at 50% 38%,rgba(8,21,38,.9) 0%,rgba(8,21,38,.7) 40%,rgba(12,31,53,.3) 70%,rgba(12,31,53,.1) 100%),
    linear-gradient(180deg,rgba(12,31,53,.62) 0%,rgba(12,31,53,.14) 24%,rgba(12,31,53,.2) 74%,rgba(12,31,53,.6) 100%)}
.net .wrap{position:relative;z-index:2}
.net h2{text-shadow:0 2px 28px rgba(6,17,30,.7)}
.net .kicker{text-shadow:0 1px 14px rgba(6,17,30,.85)}
.net .lead{text-shadow:0 1px 16px rgba(6,17,30,.8)}
.net-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--navy-3);border:1px solid var(--navy-3);margin-top:38px}
/* Translucent now, not solid: the map reads behind the strip instead of being
   blanked out by it, and the blur keeps the gold figures crisp regardless. */
.net-cell{background:rgba(11,28,48,.84);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:26px 20px;text-align:center}
.net-cell b{display:block;font-family:var(--head);font-size:28px;font-weight:600;color:var(--gold)}
.net-cell span{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#9FB2C4;margin-top:8px}

/* ═══ CERTIFICATIONS ═══ */
.certs{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
/* flex rather than grid for the same reason as .qcert-ph — see that rule */
.cert{background:var(--white);border:1px solid var(--line);height:112px;display:flex;align-items:center;justify-content:center;padding:18px;transition:border-color .35s,box-shadow .35s,transform .35s}
.cert:hover{border-color:var(--gold);box-shadow:0 10px 26px rgba(17,42,70,.1);transform:translateY(-4px)}
.cert img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .35s,opacity .35s}
.cert:hover img{filter:none;opacity:1}
.std-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:34px}
.std{background:var(--navy);color:var(--white);padding:22px 24px;text-align:center}
.std b{display:block;font-family:var(--head);font-size:var(--h3);font-weight:600;color:var(--gold);letter-spacing:.03em}
.std span{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#A8BACB;margin-top:7px}

/* ═══════════════════════════════════════════════════
   PRODUCT PAGE
   ═══════════════════════════════════════════════════ */

/* compact page banner - deliberately not full height, so the first
   product block is already in view when the page settles */
.phero{position:relative;background:var(--navy);overflow:hidden;
  padding-block:clamp(56px,9vw,104px) clamp(44px,6vw,76px)}
.phero-ph{position:absolute;inset:0}
.phero-ph img{width:100%;height:112%;object-fit:cover;opacity:.2;will-change:transform}
.phero-ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(92deg,rgba(17,42,70,.96) 34%,rgba(17,42,70,.66))}
.phero .wrap{position:relative;z-index:2}
.phero h1{font-size:clamp(30px,1.9rem + 1.9vw,48px);text-transform:uppercase;letter-spacing:.02em}
.pchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pchips span{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(212,175,55,.42);padding:9px 14px}

/* what fly ash is - text beside a photo */
.pintro{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center}
.pintro-ph{position:relative}
.pintro-ph img{width:100%;height:clamp(250px,32vw,380px);object-fit:cover}
.pintro-ph::after{content:"";position:absolute;right:-14px;top:-14px;width:110px;height:110px;
  border-top:3px solid var(--gold);border-right:3px solid var(--gold);pointer-events:none}
.pfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.pfacts div{border-top:2px solid var(--line);padding-top:14px}
.pfacts b{display:block;font-family:var(--head);font-size:20px;color:var(--navy)}
.pfacts span{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--charcoal-2);margin-top:5px}


/* bottom / pond / zinc */
.gcards{display:grid;grid-template-columns:repeat(6,1fr);gap:26px}
.gcards>*{grid-column:span 2}
/* Six half-columns rather than three whole ones, so a last row of two can be
   nudged inward by one. Every one of these grids holds five cards, and left
   aligned the trailing pair hangs off the row with a card-wide hole beside it.
   Starting the fourth card at column two centres the pair under the three
   above. The selector is the general case, not a count of five: the card that
   is fourth-from-a-row-start and second-from-last is always the orphan pair. */
.gcards>:nth-child(3n+1):nth-last-child(2){grid-column:2 / span 2}
/* and a last row of one sits dead centre, two half-columns in on either side.
   Both selectors key off a card that starts a row (3n+1) and is near the end,
   so they hold for four cards or seven as well as the five these grids run. */
.gcards>:nth-child(3n+1):last-child{grid-column:3 / span 2}
.gcard{background:var(--white);border:1px solid var(--line);overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s,border-color .45s}
.gcard:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 16px 38px rgba(17,42,70,.12)}
.gcard-ph{height:168px;overflow:hidden;background:var(--navy)}
.gcard-ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gcard:hover .gcard-ph img{transform:scale(1.06)}
.gcard-bd{padding:24px 22px 26px}
.gcard h3{margin:8px 0 10px}
.gcard p{font-size:14.5px;color:var(--charcoal-2);margin:0}
.gcard ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.gcard li{font-size:13.5px;color:var(--charcoal-2);padding-left:18px;position:relative}
.gcard li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1px;background:var(--gold)}

/* applications beside packing, on navy */
.puse{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px)}
.puse h3{color:var(--white);font-size:var(--h3);margin-bottom:20px}
.puse ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.puse li{display:flex;align-items:baseline;gap:14px;padding:15px 0;border-bottom:1px solid var(--navy-3);
  font-size:15px;color:#C9D6E2}
.puse li b{font-family:var(--head);font-size:13px;color:var(--gold);flex:none;min-width:22px}
.puse li span{font-size:12px;color:#8FA3B6;margin-left:auto;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

/* closing call to action */
.pcta{background:var(--navy-2);text-align:center;padding-block:clamp(48px,7vw,80px)}
.pcta h2{color:var(--white)}
.pcta .lead{margin:16px auto 0}
.pcta-acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}

@media(max-width:900px){
  .pintro,.puse{grid-template-columns:1fr}
  /* Back to whole columns below the three-across breakpoint: two per row, and
     the centring rule undone at matching specificity so it cannot outrank this. */
  .gcards{grid-template-columns:repeat(2,1fr)}
  .gcards>*,.gcards>:nth-child(3n+1):nth-last-child(2),
  .gcards>:nth-child(3n+1):last-child{grid-column:auto}
  .pintro-ph{order:-1}
}
@media(max-width:640px){
  .gcards,.pfacts{grid-template-columns:1fr}
  .puse li{flex-wrap:wrap}
  .puse li span{margin-left:0;width:100%}
}

/* ═══════════════════════════════════════════════════
   CLASSIFICATION PAGE
   ═══════════════════════════════════════════════════ */

/* threshold figures - the page's signature block */
.thr{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--navy-3);background:var(--navy-2)}
.thr-cell{padding:34px 28px;text-align:center;border-right:1px solid var(--navy-3);
  transition:background .45s var(--ease)}
.thr-cell:last-child{border-right:0}
.thr-cell:hover{background:rgba(10,107,116,.22)}
.thr-cell em{display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#8FA3B6;margin-bottom:14px}
.thr-cell b{display:block;font-family:var(--head);font-size:clamp(38px,4.4vw,58px);font-weight:700;
  color:var(--gold);line-height:1}
.thr-cell b i{font-style:normal;font-size:.45em;margin-left:2px}
.thr-cell span{display:block;font-size:13px;color:#C9D6E2;margin-top:12px}

/* why classify - a quiet two column read */
.why{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,60px);align-items:start}
.why-note{border-left:3px solid var(--gold);padding:4px 0 4px 22px}
.why-note p{font-size:16.5px;color:var(--charcoal);font-style:italic;margin:0}
.why-note cite{display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teal);margin-top:14px}

/* process rail - a vertical timeline that draws itself in */
.rail{position:relative;max-width:760px;margin-inline:auto;padding-left:clamp(44px,6vw,66px)}
.rail::before{content:"";position:absolute;left:14px;top:6px;bottom:6px;width:1px;background:var(--line)}
.rail::after{content:"";position:absolute;left:14px;top:6px;width:1px;height:var(--fill,0%);
  background:linear-gradient(180deg,var(--gold),var(--teal));transition:height .25s linear}
.rail-step{position:relative;padding-bottom:34px}
.rail-step:last-child{padding-bottom:0}
.rail-step::before{content:"";position:absolute;left:calc(-1 * clamp(44px,6vw,66px) + 9px);top:5px;
  width:11px;height:11px;background:var(--white);border:2px solid var(--line);border-radius:50%;
  transition:border-color .4s,background .4s,transform .4s var(--ease)}
.rail-step.in::before{border-color:var(--gold);background:var(--gold);transform:scale(1.15)}
.rail-step em{display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--teal);margin-bottom:7px}
.rail-step h3{margin-bottom:8px}
.rail-step p{font-size:15px;color:var(--charcoal-2);margin:0}

/* standards comparison */
.spec-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.spec{width:100%;min-width:660px;border-collapse:collapse;font-size:15px;background:var(--white);border:1px solid var(--line)}
.spec thead th{background:var(--navy);color:var(--white);font-family:var(--head);font-size:16px;
  font-weight:500;padding:18px 20px;text-align:left;letter-spacing:.02em;border-bottom:0}
.spec thead th:first-child{width:220px;background:var(--navy-2)}
.spec thead th small{display:block;font-family:var(--body);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:5px}
.spec th,.spec td{padding:15px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.spec tbody th{font-weight:600;color:var(--navy);background:var(--mist);text-align:left;font-size:14px}
.spec td{color:var(--charcoal-2)}
.spec tbody tr:last-child th,.spec tbody tr:last-child td{border-bottom:0}
.spec tbody tr{transition:background .3s}
.spec tbody tr:hover td{background:rgba(212,175,55,.07)}
.spec-note{font-size:12.5px;color:var(--charcoal-2);margin:16px 0 0}

@media(max-width:900px){
  .why{grid-template-columns:1fr}
  .thr{grid-template-columns:1fr}
  .thr-cell{border-right:0;border-bottom:1px solid var(--navy-3);padding:26px 24px}
  .thr-cell:last-child{border-bottom:0}
}

/* ═══════════════════════════════════════════════════
   LOGISTICS PAGE
   ═══════════════════════════════════════════════════ */

/* packing formats */














/* route to the vessel - a horizontal track that draws as you scroll */










/* incoterm selector */










/* export document set */









/* ═══════════════════════════════════════════════════
   CALCULATOR PAGE
   ═══════════════════════════════════════════════════ */

.calc-step{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--teal);margin:0 0 16px}
.calc-step i{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  background:var(--navy);color:var(--gold);font-family:var(--head);font-size:11px;font-style:normal;flex:none}
.calc-step b{color:var(--navy);font-weight:700;margin-left:auto;font-size:14px;letter-spacing:0}
.calc-in .opts+.calc-step,.calc-in input+.calc-step{margin-top:28px}
.seg{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}

/* the payload verdict - the thing this page exists to show */
.cap{border:1px solid var(--navy-3);background:rgba(10,107,116,.16);padding:16px 18px;margin-top:20px}
.cap-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cap-h span{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#9FB2C4}
.cap-tag{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 10px;border:1px solid currentColor}
.cap-tag.weight{color:var(--gold)}
.cap-tag.volume{color:#5FD0DC}
.cap p{font-size:13px;color:#B9C8D6;margin:10px 0 0;line-height:1.6}
.cap-bar{height:6px;background:var(--navy-3);margin-top:14px;overflow:hidden}
.cap-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--gold));
  transition:width .5s var(--ease)}
.cap-lb{display:flex;justify-content:space-between;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#8FA3B6;margin-top:8px}

/* value flashes gold when it changes, so the numbers feel live */
@keyframes bump{0%{transform:translateY(-3px);opacity:.5}100%{transform:none;opacity:1}}
.calc-rows dd.bump{animation:bump .32s var(--ease)}

/* assumptions strip */
.assum{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px}
.assum div{border-top:2px solid var(--line);padding-top:14px}
.assum b{display:block;font-family:var(--head);font-size:19px;color:var(--navy)}
.assum span{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--charcoal-2);margin-top:5px}

@media(max-width:900px){
  .assum{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .seg{grid-template-columns:1fr}
  .assum{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════
   NETWORK PAGE
   ═══════════════════════════════════════════════════ */





/* graticule */


/* trade lanes */





/* destination markers */








/* the origin */




/* legend beside the map */









/* share of Indian fly ash exports */







/* what we trade */









/* ═══════════════════════════════════════════════════
   QUALITY PAGE
   ═══════════════════════════════════════════════════ */


.qcert{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;
  cursor:zoom-in;overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s,border-color .45s}
.qcert:hover,.qcert:focus-visible{transform:translateY(-6px);border-color:var(--gold);
  box-shadow:0 18px 42px rgba(17,42,70,.12)}
/* flex, not grid: a percentage max-height on a *grid* item does not resolve
   against the track here, so tall logos rendered at natural size and spilled
   over the text below. In a fixed-height flex line it resolves correctly. */
.qcert-ph{height:130px;display:flex;align-items:center;justify-content:center;padding:22px;
  background:var(--mist);border-bottom:1px solid var(--line)}
.qcert-ph img{max-width:100%;max-height:100%;object-fit:contain;
  filter:grayscale(1);opacity:.7;transition:filter .4s,opacity .4s,transform .5s var(--ease)}
.qcert:hover .qcert-ph img,.qcert:focus-visible .qcert-ph img{filter:none;opacity:1;transform:scale(1.05)}
.qcert-bd{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.qcert-bd b{font-family:var(--head);font-size:17px;font-weight:600;color:var(--navy)}
.qcert-bd span{font-size:13.5px;color:var(--charcoal-2)}
.qcert-bd i{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal);margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:8px}
.qcert-bd i::after{content:"";height:1px;width:16px;background:var(--teal);transition:width .4s var(--ease)}
.qcert:hover .qcert-bd i::after{width:30px}

/* the analysis table reuses .spec from the classification page */






/* ═══ ENQUIRY ═══ */
.enq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fld{display:flex;flex-direction:column;gap:8px}
.fld.w3{grid-column:1/-1}
.fld label{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.fld input,.fld select,.fld textarea{background:var(--navy-2);border:1px solid var(--navy-3);color:var(--white);font-family:var(--body);font-size:15px;padding:14px 16px;border-radius:0;width:100%;transition:border-color .3s,background .3s}
.fld textarea{min-height:110px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--gold);background:#0A1C2F}
.fld select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px;background-repeat:no-repeat}
/* Product and Packing open on "Select" rather than on their first real option,
   so a submitted value is one the visitor chose. While that placeholder is the
   one showing, the control should read as empty — the same grey the text
   fields would use — not as a confident answer nobody gave.

   :has() is how a select is styled by what is currently chosen; where it is
   unsupported the placeholder simply shows in white, which is the old
   appearance and not a broken one. The dropdown list itself stays white,
   because an option greyed out inside an open menu reads as unavailable. */
.fld select:has(option[value=""]:checked){color:#7C8FA3}
.fld select option{color:var(--white);background:var(--navy-2)}
/* honeypot — taken off screen rather than display:none, which the cruder
   form bots know to skip. A person never sees or tabs into it; anything that
   fills it is discarded by the intake route. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.enq-foot{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;margin-top:28px}
.btn:disabled{opacity:.62;cursor:progress}
.btn-gold:disabled:hover{background:var(--gold);color:var(--navy)}
.enq-note{font-size:13px;color:#A8BACB}
.rcpt{display:none;margin-top:26px;border:1px solid var(--gold);background:rgba(212,175,55,.09);padding:22px 24px}
.rcpt.on{display:block;animation:pop .5s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rcpt-h{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.rcpt-r{display:block;font-family:var(--head);font-size:26px;font-weight:600;color:var(--white);margin:10px 0 6px}
.rcpt p{font-size:13px;color:#B9C8D6}

/* ═══ FOOTER ═══ */
.ft{background:var(--navy-2);color:#B9C8D6;padding-block:clamp(48px,7vw,76px) 0}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px}
.ft-brand{display:flex;flex-direction:column;gap:16px}
.ft-brand img{width:150px;height:150px}
.ft-lockup{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ft-lockup .brand-tx{font-size:17px}
.ft-lockup .brand-tx small{font-size:11px;margin-top:5px}
/* h3, not h4 - the footer sits under the page h2, so h4 skipped a level.
   line-height is pinned because the global h3 rule sets 1.4, where the old
   h4 inherited 1.7 from body; without this the labels would shift. */
.ft h3{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 16px;line-height:1.7}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:14px}
/* a 14px line is an 18px tap target, which is under half what a thumb needs.
   Padding rather than gap, so the target grows without the column stretching
   as much. */
.ft ul a{display:inline-block;padding-block:5px}
.ft a:hover{color:var(--gold)}
.ft-bar{margin-top:clamp(36px,5vw,56px);border-top:1px solid var(--navy-3);padding-block:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px;color:#8FA3B6}

/* ═══ REVEAL ═══ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}

/* ═══ CREDENTIALS STRIP ═══ */
/* Sits directly under the navy hero, so it is deliberately light and shallow —
   a band of proof rather than a full section. The label anchors the left; the
   marks track past it on a loop. */
.creds{background:var(--mist);border-block:1px solid var(--line);padding-block:clamp(30px,4vw,46px)}
.creds-in{display:grid;grid-template-columns:minmax(210px,250px) minmax(0,1fr);gap:clamp(26px,4vw,56px);align-items:center}

.creds-head h2{font-size:clamp(21px,1rem+1vw,27px);line-height:1.25;letter-spacing:.01em}
.creds-head .kicker{margin-bottom:10px}
/* The shared .rule is centred; here it belongs on the left with the text. */
.creds-head .rule{margin:14px 0 0}
.creds-note{margin:14px 0 0;font-size:13.5px;line-height:1.65;color:var(--charcoal-2);max-width:34ch}

/* ── marquee ──
   The track holds the five marks repeated enough times to overflow the rail
   twice over, and slides left by exactly one set before restarting — so the
   seam never lands on screen. --shift is measured in main.js rather than
   guessed, because the set's width depends on the card size at that viewport.
   Marks carry margin-right instead of a flex gap so one set's width includes
   its own trailing space; with gap, the seam would jump by one gap each lap. */
.creds-marquee{position:relative;overflow:hidden}
/* Fades the marks in and out at the rails instead of clipping them dead. */
.creds-marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.creds .certs{display:flex;flex-wrap:nowrap;width:max-content;animation:creds-run var(--dur,34s) linear infinite}
@keyframes creds-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--shift,50%)),0,0)}}
/* Let a reader stop the row to look at a mark, by pointer or by keyboard. */
.creds-marquee:hover .certs,.creds-marquee:focus-within .certs{animation-play-state:paused}

.creds .cert{flex:0 0 auto;width:clamp(150px,15vw,196px);margin-right:clamp(10px,1.2vw,16px);
  height:clamp(92px,8.6vw,116px);padding:clamp(10px,1.1vw,16px);border-radius:3px;background:var(--white)}
/* Filling the box and letting object-fit letterbox is what actually makes the
   marks large. Left to max-width/max-height the img keeps its intrinsic size
   and floats small in the middle of the card. */
.creds .cert img{width:100%;height:100%;object-fit:contain}
/* Five marks with five unrelated palettes clash at full saturation, but at
   this size heavy greying makes them unreadable. A light touch settles the row
   without hiding anything; hover restores true colour. */
.creds .cert img{filter:grayscale(.3);opacity:.92}
.creds .cert:hover img,.creds .cert:focus-visible img{filter:none;opacity:1}

@media(max-width:960px){
  .creds-in{grid-template-columns:minmax(0,1fr);gap:24px}
  .creds-head{text-align:center}
  .creds-head .rule{margin-inline:auto}
  .creds-note{margin-inline:auto}
  /* The br only earns its keep in the two-column layout. Hidden here, the
     space left before it in the markup keeps the two words apart. */
  .creds-head h2 br{display:none}
}

/* A moving row is exactly what this asks us to stop. Falls back to the static
   wrapped set, which is why the cards keep a sane fixed width above. */
@media(prefers-reduced-motion:reduce){
  .creds-marquee{-webkit-mask-image:none;mask-image:none}
  .creds .certs{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .creds .cert{margin:0 clamp(5px,.6vw,8px) clamp(10px,1.2vw,16px)}
}

/* ═══ RESPONSIVE ═══ */
/* The burger only takes over at 900px, so every width from there up has to
   hold the brand, the five-tab nav and the CTA on one line. With the wide
   Capabilities tab shelved the bar has room to spare — modelled centred with
   at least 56px of slack at the tightest point, 901px — so these two steps
   only ease the tracking and the CTA, and the wordmark stays at every width.
 */
@media(max-width:1240px){
  /* .brand-tx is nowrap by design, so it has to give first */
  .brand-tx{font-size:13.5px;letter-spacing:.04em}
  .brand-tx small{font-size:9px;letter-spacing:.16em}
  .hdr .wrap{gap:16px}
  .mainnav a{letter-spacing:.06em}
  .hdr .btn{padding:12px 16px;font-size:11.5px;letter-spacing:.1em}
}
@media(max-width:1080px){
  /* the mark scales at every step, and --hdr-h follows the bar it measures */
  :root{--hdr-h:89px}
  .brand img{width:64px;height:64px}
  .hdr .wrap{gap:12px}
  .mainnav a{letter-spacing:.02em}
  .hdr .btn{padding:11px 13px;font-size:10.5px;letter-spacing:.06em}
}

@media(max-width:1080px){
  .cat,.steps,.packs{grid-template-columns:repeat(2,1fr)}
  .certs{grid-template-columns:repeat(3,1fr)}
  .enq-grid{grid-template-columns:repeat(2,1fr)}
  .ft-grid{grid-template-columns:1fr 1fr}
  .net-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .calc{grid-template-columns:1fr}
  .mainnav,.hdr .btn{display:none}
  #burger{display:block}
  .about-grid,.apps{grid-template-columns:1fr}
  .about-ph{order:-1}

  /* MOBILE HERO
     Two things made the phone hero open on a band of empty photograph. The
     frame counted the sticky header as free height — 100svh below an 81px
     header is a screen and a bit — and the copy was pinned to the foot with
     margin-top:auto, so every pixel of the surplus pooled above the eyebrow.
     The frame now stops at the header; the centring itself is the base rule's
     margin-block:auto. The floor keeps a portrait proportion on the short
     frames a landscape phone reports. */
  .hero{min-height:max(460px,calc(100vh - var(--hdr-h)));
        min-height:max(460px,calc(100svh - var(--hdr-h)))}
  .hero .wrap{padding-block:clamp(28px,6vw,52px)}
  /* the desktop clamp bottoms out at 27px and then stops responding, so the
     name sat at one fixed size from 640px all the way down to 320px while the
     column kept narrowing. Scaling with the viewport keeps the two nowrap
     lines off the gutters on the narrowest phones still in use. */
  .hero h1{font-size:clamp(24px,7.4vw,40px)}
  .hero-kin{margin-top:22px}
}
@media(max-width:640px){
  /* give the panel a little more of the screen on phones, but keep a margin.
     At this width right:12px leaves it visually centred anyway. */
  #draw{width:calc(100vw - 24px);right:12px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
  .dw-bd{padding:24px 20px 28px}
  #lb button{top:14px;right:14px;width:42px;height:42px}
  /* tuck both floating buttons closer to the corners on phones */
  .wa{width:46px;height:46px;left:calc(14px + env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom))}
  .wa svg{width:24px;height:24px}
  #top-btn{width:46px;height:46px;right:calc(14px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom))}
  /* footer lockup is nowrap too - shrink it so it clears narrow phones */
  .ft-brand img{width:120px;height:120px}
  .ft-lockup{gap:12px}
  .ft-lockup .brand-tx{font-size:15px}
  .cat,.steps,.packs,.mv,.std-row,.enq-grid,.ft-grid{grid-template-columns:1fr}
  .certs{grid-template-columns:repeat(2,1fr)}
  .tbl thead th:first-child,.tbl tbody th{width:120px}
  .tbl th,.tbl td{padding:13px 14px;font-size:14px}
  /* the wrapper already scrolls — without a floor the three columns just
     crush to a word per line instead of ever reaching it. But a table that
     scrolls sideways inside the page gives no sign it has more to show, and
     at this width the third column, Class C, is entirely off-screen with
     nothing to say so. The hint below it says so. */
  .tbl{min-width:560px}
  .tbl-hint{display:block}
}

/* ═══ SMALL PHONES ═══
   Below 480px the header lockup, the headline and every letter-spaced
   micro-label stop fitting across a 320–380px screen. Tighten the gutter,
   drop a step of type scale, and let rows that relied on width become
   stacks. Nothing here changes the layout above 480px. */
@media(max-width:480px){
  :root{--h1:clamp(26px,7.4vw,32px);--h2:22px;--gut:18px}

  /* .brand-tx is nowrap by design, so the mark has to shrink with it */
  .hdr .wrap{gap:12px}
  .brand{gap:10px}
  .brand img{width:56px;height:56px}
  .hdr .wrap{padding-block:10px}
  /* the mark steps down here, so the bar the hero subtracts does too */
  :root{--hdr-h:77px}
  .brand-tx{font-size:12.5px;letter-spacing:.03em}
  .brand-tx small{font-size:8.5px;letter-spacing:.14em}
  #burger{padding:9px 11px;font-size:10px;letter-spacing:.12em}
  #drawer a{padding:14px var(--gut);font-size:12px}

  /* one full-width button beats two cramped ones at this width */
  .btn{padding:14px 20px;font-size:12px;letter-spacing:.12em}
  .pcta-acts .btn,.enq-foot .btn{width:100%}

  .eyebrow{font-size:10px;letter-spacing:.18em;gap:8px;margin-bottom:16px}
  .eyebrow i{width:24px}
  .hero-kin{font-size:12.5px;letter-spacing:.14em;gap:8px;margin-top:18px}
  /* no room to clear to the right at this width, so the veil goes vertical:
     dark top and bottom, and the picture reads through the middle */
  .hero-veil{background:
    linear-gradient(180deg,rgba(7,20,36,.9) 0%,rgba(8,22,39,.66) 38%,rgba(9,24,41,.72) 70%,rgba(9,24,41,.92) 100%)}
  .lead{max-width:none}

  .net-cell{padding:20px 10px}
  .net-cell b{font-size:21px}
  .net-cell span{font-size:9.5px;letter-spacing:.12em}

  /* long uppercase term on the left, big number on the right — the pair
     needs the term to give way first */
  .calc-rows dt{font-size:10.5px;letter-spacing:.1em}
  .calc-rows dd{font-size:20px}
  .ticks{flex-wrap:wrap;gap:4px 10px;font-size:9.5px;letter-spacing:.06em}

  .certs{grid-template-columns:1fr 1fr;gap:14px}
  .cert{height:96px;padding:14px}
  .mv-card{padding:22px 20px}
  .card-bd{padding:20px 18px}
  .step{padding:24px 20px}
  
  .pack{padding:26px 20px}

  .enq-foot{margin-top:22px;gap:16px}
  .rcpt{padding:18px 18px}
  .rcpt-r{font-size:20px;overflow-wrap:anywhere}
  .enq-note{font-size:12px;overflow-wrap:anywhere}

  /* ── inner page banner, shared by all six sub-pages ── */
  .phero{padding-block:44px 38px}
  .phero h1{font-size:clamp(26px,7.6vw,34px)}
  .phero .lead{margin-top:14px}
  .pchips{gap:8px;margin-top:20px}
  .pchips span{font-size:10px;letter-spacing:.1em;padding:8px 11px}
  .pintro-ph::after{right:-10px;top:-10px;width:64px;height:64px}

  /* ── product ── */
  .gcard-bd{padding:20px 18px 22px}
  .pfacts b,.assum b{font-size:17px}
  .pfacts span,.assum span{font-size:10.5px;letter-spacing:.1em}

  /* ── classification ── */
  .thr-cell{padding:22px 18px}
  .thr-cell em{font-size:10px;letter-spacing:.14em;margin-bottom:10px}
  .thr-cell b{font-size:clamp(34px,11vw,44px)}
  .thr-cell span{font-size:12px}
  .why-note{padding-left:16px}
  .why-note p{font-size:15px}

  /* ── logistics ── */
  
  
  
  
  
  

  /* ── calculator ── */
  .calc-step{font-size:10px;letter-spacing:.14em;gap:8px}
  .calc-step b{font-size:13px}
  .opt{padding:14px 10px;font-size:12px;letter-spacing:.02em}
  .cap{padding:14px 15px}
  .cap-h span{font-size:10px;letter-spacing:.12em}
  .cap-lb{font-size:10px;letter-spacing:.06em}

  /* ── network ── */
  
  
  
  

  /* ── quality ── */
  .qcert-ph{height:112px;padding:18px}
  
}

/* The map is a fixed 1000×560 viewBox scaled to the column, so its labels
   shrink with it — under about 640px they land near 5px, and bumping them
   enough to read makes the clustered South Asian nodes collide. The legend
   directly below names every market and carries the same shares, so the map
   drops to lanes and nodes and the list does the labelling. Tapping a legend
   row still lights its lane. */
@media(max-width:640px){
  
  /* the origin sits alone in the middle, so it can take the size it needs
     to stay legible once the destination labels are gone */
  
  
  
}

/* the narrowest phones still in use — 320px and 360px */
@media(max-width:360px){
  :root{--gut:15px;--hdr-h:71px}
  .brand img{width:50px;height:50px}
  .brand-tx{font-size:11.5px}
  .brand-tx small{letter-spacing:.1em}
  .btn{padding:13px 16px;font-size:11px;letter-spacing:.1em}
  .certs{gap:12px}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .rule{transform:scaleX(1)}
}

/* ═══════════════════════════════════════════════════
   LOGISTICS INTRO — coordination plate + facts panel
   The six steps used to start cold under the heading. The plate carries the
   desk side of the work, the panel beside it answers the three questions a
   buyer asks before reading any of the steps: which port, how far, what term.
   ═══════════════════════════════════════════════════ */
.log-intro{display:grid;grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);gap:clamp(28px,4vw,58px);align-items:center;margin-bottom:clamp(38px,5vw,62px)}
.log-ph{margin:0;position:relative;border:1px solid var(--line);box-shadow:0 2px 18px rgba(17,42,70,.07)}
/* the mirror of the bracket under the About plates — top-right, not bottom-left */
.log-ph::after{content:"";position:absolute;right:-14px;top:-14px;width:112px;height:112px;border-right:3px solid var(--gold);border-top:3px solid var(--gold);pointer-events:none}
.log-ph-img{overflow:hidden}
.log-ph-img img{display:block;width:100%;height:clamp(208px,24vw,296px);object-fit:cover;transition:transform 1.1s var(--ease)}
.log-ph:hover .log-ph-img img{transform:scale(1.055)}
.log-ph figcaption{display:grid;gap:4px;padding:clamp(13px,1.4vw,17px) clamp(15px,1.6vw,20px);background:var(--navy);color:var(--white)}
.log-ph-t{font-family:var(--head);font-size:clamp(15px,1.3vw,17px);font-weight:600;letter-spacing:.05em;line-height:1.2;color:var(--gold)}
.log-ph-s{font-size:12.5px;line-height:1.5;color:#A8BACB}

.log-say h3{font-size:clamp(19px,1.15rem+.6vw,25px)}
/* The loading ports, set as their own marks rather than as the value half of
   a label-and-value row. Five names never fitted the value column, so the list
   wrapped and left a separator stranded at the end of the line; as marks they
   wrap wherever they need to and carry no separators to strand. Same idea as
   the .band-ports strip further down the page, in the light key this card is
   drawn in, so the two read as one device rather than two. */
.log-ports{margin:26px 0 2px;padding-top:20px;border-top:1px solid var(--line)}
.log-ports-lab{display:block;font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--charcoal-2);margin-bottom:14px}
.log-ports-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.log-ports-list li{font-family:var(--head);font-size:clamp(14px,.95vw,15.5px);font-weight:600;
  color:var(--navy);background:var(--mist);border:1px solid var(--line);padding:9px 15px;
  white-space:nowrap}


/* ═══════════════════════════════════════════════════
   MULTIMODAL BAND — the berth the six steps walk towards
   The first pass veiled the whole photograph to protect the type, and lost the
   quay along with it. The veil is local now: the picture is graded down to a
   navy duotone and left legible, and only the pool directly beneath the type
   is darkened. The foot still resolves to flat --navy, so this band and the
   PACKING section below it read as one dark stretch, not two stacked blocks.
   ═══════════════════════════════════════════════════ */
.band{position:relative;overflow:hidden;background:var(--navy);padding-block:clamp(84px,11vw,150px);text-align:center}
/* Slack above AND below, not just below: the parallax translates the picture
   in both directions, and with the overflow all at the foot a downward shift
   uncovered a strip of bare --navy at the crown — which the dark head of the
   tint gradient then rendered as a hard black line against the white section
   above. Twelve per cent either side is more than the clamped travel in JS. */
.band-ph{position:absolute;inset:-12% 0;z-index:0}
/* Graded, not hidden: brightness pulls the pale sunrise sky down into the navy
   range, while contrast keeps the cranes and the hull reading as structure. */
.band-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;opacity:1;
  filter:saturate(.62) contrast(1.06) brightness(.72);will-change:transform}
/* Tint only — dark at the crown and the foot, near-clear across the middle
   where the vessel and the crane line actually are. */
.band::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,24,42,.72) 0%,rgba(12,31,53,.30) 30%,rgba(12,31,53,.26) 58%,rgba(17,42,70,.74) 86%,var(--navy) 100%)}
.band-in{position:relative;z-index:2;max-width:880px}
/* The local scrim — a soft pool behind the copy alone, faded out well before
   the edges of the band, so the photograph survives on either side of it. */
.band-in::before{content:"";position:absolute;z-index:-1;inset:-56px -72px;pointer-events:none;
  background:radial-gradient(ellipse 68% 62% at 50% 50%,rgba(7,20,36,.86) 0%,rgba(7,20,36,.66) 46%,rgba(7,20,36,.22) 70%,transparent 82%)}
.band h2{font-size:clamp(26px,1.35rem + 1.6vw,43px);line-height:1.18;text-shadow:0 2px 30px rgba(6,17,30,.7)}
.band .kicker{text-shadow:0 1px 14px rgba(6,17,30,.8)}
.band .lead{margin:20px auto 0;font-size:clamp(15px,.9rem + .2vw,17.5px);color:#D6E2ED;text-shadow:0 1px 16px rgba(6,17,30,.75)}
.band-ports{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.band-ports span{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#EEF4F9;
  border:1px solid rgba(212,175,55,.62);background:rgba(9,24,42,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  padding:11px 22px;transition:background .35s,border-color .35s,color .35s}
.band-ports span:hover{background:rgba(212,175,55,.18);border-color:var(--gold);color:var(--white)}

/* ═══════════════════════════════════════════════════
   FIND US — address card beside the Google embed
   The address stays as real text in the card so it is crawlable, copyable and
   still there if the embed is blocked; the iframe is lazy, so nothing loads
   until the visitor has scrolled this far down the page.
   ═══════════════════════════════════════════════════ */
.visit{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,2.4vw,32px);align-items:stretch}
.visit-card{background:var(--navy);border-top:3px solid var(--gold);padding:clamp(28px,3vw,40px);display:flex;flex-direction:column}
.visit-card h3{font-size:clamp(18px,1.1vw+.6rem,22px);letter-spacing:.03em}
.visit-card address{font-style:normal;margin-top:12px;font-size:15px;line-height:1.75;color:#C9D6E2}
.visit-meta{margin:26px 0 0;display:grid;border-top:1px solid var(--navy-3)}
.visit-meta>div{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:14px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--navy-3)}
.visit-meta dt{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8FA6BC}
.visit-meta dd{margin:0;font-size:14.5px;color:var(--white);overflow-wrap:anywhere}
/* the phone and the email are the two things a visitor on a phone actually
   taps, and as bare inline links they were 19px tall. inline-block plus a
   little vertical padding gives them a thumb-sized target without moving the
   baseline the dt beside them is aligned to. */
.visit-meta a{display:inline-block;padding-block:5px;border-bottom:1px solid rgba(212,175,55,.45);transition:color .3s,border-color .3s}
.visit-meta a:hover{color:var(--gold);border-color:var(--gold)}
.visit-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:28px}
.visit-acts .btn{flex:1 1 auto;padding-inline:22px}

.visit-map{margin:0;display:flex;flex-direction:column;overflow:hidden;background:var(--mist);border:1px solid var(--line);box-shadow:0 2px 18px rgba(17,42,70,.07)}
.visit-map iframe{display:block;width:100%;flex:1 1 auto;border:0;min-height:clamp(330px,36vw,470px)}
.visit-map figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;
  padding:13px clamp(15px,1.6vw,20px);background:var(--navy);color:#A8BACB;font-size:12.5px}
.visit-map figcaption a{display:inline-flex;align-items:center;gap:7px;padding-block:6px;color:var(--gold);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:color .3s}
.visit-map figcaption a:hover{color:var(--white)}

@media(max-width:960px){
  .log-intro{grid-template-columns:1fr;gap:30px}
  .visit{grid-template-columns:1fr}
  .visit-map iframe{min-height:340px}
}
@media(max-width:640px){
  .visit-meta>div{grid-template-columns:1fr;gap:4px}
  /* the pair sat side by side as two cramped taps; .log-cta shared this rule
     and went with the logistics page, taking the live half of it along. */
  .visit-acts .btn{width:100%;flex:1 1 100%}
  .band-ports span{padding:9px 14px;font-size:10.5px;letter-spacing:.14em}
  .visit-map figcaption{justify-content:center;text-align:center}
}

/* ═══════════════════════════════════════════════════
   CREDENTIALS WALL — about page
   The quality page shows the same five marks as light cards on a light
   ground. Here they are framed documents on a dark wall instead: navy card,
   white plate, gold serial. Same .qcert hooks so the lightbox in quality.js
   drives both without a second implementation.
   ═══════════════════════════════════════════════════ */
.cw-seal{display:block;width:44px;margin:0 auto 14px;opacity:0;transform:translateY(10px) scale(.9);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.cw-seal.in{opacity:1;transform:none}

/* Six tracks, each card spanning two. Five cards would leave an orphan in a
   three-column grid; spanning across six lets the last two sit centred under
   the first three instead of hanging off to the left. */
.cwall{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,1.8vw,24px)}
.cwall .qcert{grid-column:span 2;position:relative;background:var(--navy-2);border:1px solid var(--navy-3)}
.cwall .qcert:nth-child(4){grid-column:2 / span 2}
.cwall .qcert:nth-child(5){grid-column:4 / span 2}
.cwall .qcert:hover,.cwall .qcert:focus-visible{border-color:var(--gold);box-shadow:0 22px 46px rgba(4,12,22,.55)}
/* gold rule draws across the head of the card, as on the home product cards */
.cwall .qcert::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:3}
.cwall .qcert:hover::before,.cwall .qcert:focus-visible::before{transform:scaleX(1)}

/* The mark keeps its white ground — a certificate is a white document, and on
   navy that plate is what makes it read as one hanging on a wall. */
.cwall .qcert-ph{height:clamp(112px,11vw,144px);background:var(--white);border-bottom:1px solid var(--navy-3)}
/* Five unrelated palettes clash at full strength; a light grey settles the row
   without hiding anything, and hover restores true colour. */
.cwall .qcert-ph img{filter:grayscale(.28);opacity:.94}
.cwall .qcert:hover .qcert-ph img,.cwall .qcert:focus-visible .qcert-ph img{filter:none;opacity:1;transform:scale(1.06)}
.cwall .qcert-bd b{color:var(--white)}
.cwall .qcert-bd span{color:#A8BACB}
.cwall .qcert-bd i{color:var(--gold)}
.cwall .qcert-bd i::after{background:var(--gold)}

/* the serial, tabbed into the corner of the plate like a filing mark */
.cw-n{position:absolute;top:0;right:0;z-index:3;font-family:var(--head);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;color:var(--navy);background:var(--gold);padding:6px 11px}
.cw-foot{margin-top:clamp(28px,3vw,40px);text-align:center;font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:#8FA6BC}

@media(max-width:980px){
  .cwall{grid-template-columns:repeat(2,1fr)}
  .cwall .qcert,.cwall .qcert:nth-child(4),.cwall .qcert:nth-child(5){grid-column:auto}
}
@media(max-width:560px){
  .cwall{grid-template-columns:1fr}
  .cw-foot{letter-spacing:.14em;font-size:10px}
}

/* ═══════════════════════════════════════════════════
   CONTACT CHANNELS — contact page
   Three routes to the same desk, given equal weight. Reuses the .mv-card
   plate from the mission and vision pair; only the grid and the value link
   are new, so the cards stay in step with that pattern automatically.
   ═══════════════════════════════════════════════════ */
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ccards svg{display:block;margin-bottom:16px}
.ccards h3{margin-bottom:4px}
/* email, phone and WhatsApp are the whole point of this page, and at 27px they
   were the last targets on the site under a thumb's worth of height. */
.ccard-v{display:inline-block;padding-block:4px;margin:2px 0 10px;font-family:var(--head);
  font-size:clamp(15px,.85rem + .35vw,18px);font-weight:600;color:var(--navy);
  border-bottom:1px solid rgba(212,175,55,.55);overflow-wrap:anywhere;
  transition:color .3s,border-color .3s}
.ccard-v:hover{color:var(--teal);border-color:var(--teal)}
/* the telephone card carries two lines. Stacked rather than inline so each
   number keeps its own gold rule at its own width, instead of the two
   underlines meeting as one bar across a wrapped row. */
.ccard-nums{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:2px 0 10px}
.ccard-nums .ccard-v{margin:0}

@media(max-width:900px){ .ccards{grid-template-columns:1fr} }

/* ═══════════════════════════════════════════════════
   PRODUCT CATALOG — one scrolling page
   Tabs were the wrong instrument: six of seven categories sat behind a click,
   so a visitor who never pressed anything saw a seventh of the catalogue.
   Everything is stacked and reachable by scrolling now. The index below is a
   shortcut, not a gate — every section is on the page whether it is used
   or not.
   ═══════════════════════════════════════════════════ */
.pindex{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin-top:clamp(26px,3vw,36px)}
.pindex a{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);border:1px solid var(--line);background:var(--white);padding:10px 16px;
  transition:background .3s,border-color .3s,color .3s}
.pindex a:hover{background:var(--navy);border-color:var(--navy);color:var(--white)}

/* the standards line, set as a strip so the three codes read as credentials */
.pstd{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--navy-3);
  border:1px solid var(--navy-3);margin-top:clamp(30px,4vw,46px)}
.pstd div{background:var(--navy);color:var(--white);padding:24px 20px;text-align:center}
.pstd b{display:block;font-family:var(--head);font-size:clamp(16px,1.4vw,19px);font-weight:600;color:var(--gold)}
.pstd span{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#9FB2C4;margin-top:7px}
.pstd-note{margin-top:16px;font-size:13px;color:var(--charcoal-2);text-align:center}

/* Three categories that share a grid and differ only in what sits in it, so
   they share a section and a control instead of taking three headings down
   the page. One ink bar slides between the labels rather than a border per
   tab blinking on and off; JS sets its width and x from the selected button,
   so it tracks whatever the labels measure at the current size. The strip
   never wraps — a wrapped row would put the ink on the wrong line — which is
   why the labels shrink rather than fold on a narrow screen. */
.ptabs{position:relative;display:flex;flex-wrap:nowrap;justify-content:center;
  width:max-content;margin:0 auto clamp(30px,4vw,44px);border-bottom:1px solid var(--line)}
.ptab{flex:none;appearance:none;background:none;border:0;cursor:pointer;
  font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--charcoal-2);padding:14px 26px 16px;transition:color .35s}
.ptab:hover{color:var(--navy)}
.ptab[aria-selected="true"]{color:var(--navy)}
.ptab-ink{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--gold);
  transition:transform .55s var(--ease),width .55s var(--ease);pointer-events:none}
.ppanel{outline:none}
/* the outgoing set lifts and fades; the incoming one staggers in behind it */
.ppanel.is-out{opacity:0;transform:translateY(10px);
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
/* only ever seen with script off, where the panels are stacked and need naming */
.ppanel-label{display:none;text-align:center;margin-bottom:22px}

@media(max-width:640px){
  .ptab{font-size:10.5px;letter-spacing:.1em;padding:12px 13px 14px}
  .pstd{grid-template-columns:1fr}
  .pindex a{font-size:10.5px;letter-spacing:.1em;padding:9px 12px}
}

/* ── FAQ (product and contact) ── native <details>, so it works without JS and
   the answers stay in the page source for search engines and AI assistants. */
.faq{max-width:860px;margin-inline:auto;display:grid;gap:12px}
.faq-i{background:var(--white);border:1px solid var(--line);transition:border-color .25s}
.faq-i[open]{border-color:var(--gold)}
.faq-i summary{cursor:pointer;list-style:none;position:relative;padding:18px 56px 18px 22px;font-weight:600;line-height:1.5;color:var(--navy)}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:400;line-height:1;color:var(--teal);transition:transform .3s var(--ease)}
.faq-i[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-a{padding:0 22px 22px;color:var(--charcoal-2)}
.faq-a p{max-width:none}