/* =====================================================
   0. DESIGN TOKENS
   Palette: "Light Corporate" — an off-white chrome (header,
   footer, hero and every other band that used to be dark
   navy) with deep navy as the primary UI accent (buttons,
   links, active/current state, icons), corporate blue as a
   secondary interactive colour, teal reserved for illustrative
   icon accents, and professional gold as a status/highlight
   colour rather than a page-section fill — a B2B freight desk
   reads as more professional in this light, navy-on-white
   register than a bright, saturated one.
===================================================== */
:root{
  --cn-navy:        #0B1F3A;   /* primary — the one UI accent: buttons, links, active state */
  --cn-chalk:       #F8FAFC;   /* page background — off white */
  --cn-chalk-2:     #EEF1F5;   /* alt content section — one visible step down from chalk */
  --cn-chrome:      #EAEEF3;   /* header / hero / CTA bands — a further step down, so chrome reads as its own band against page content */
  --cn-chrome-2:    #DCE3EA;   /* footer — deeper again, so it doesn't read as the same band as the header */
  --cn-blue:        #0E7490;   /* accent teal — illustrative icons on photo overlays */
  --cn-blue-dark:   #155EEF;   /* secondary — corporate blue, links and in-progress status */
  --cn-amber:       #D4A72C;   /* CTA / highlight — professional gold, status-pill wash only */
  --cn-amber-hover: #AE8924;   /* hover/focus state for the few UI spots gold still fills */
  --cn-amber-soft:  #FBF1D6;   /* gold wash for chips and icon tiles */
  --cn-white:       #FFFFFF;
  --cn-text:        #1E293B;   /* charcoal — heading + high-emphasis text */
  --cn-muted:       #6D7480;   /* body copy, on chalk/white surfaces */
  --cn-muted-deep:  #4B5563;   /* body copy on the deeper --cn-chrome-2 surfaces (the footer) —
                                   --cn-muted itself only clears ~3.6:1 there, under the 4.5:1 AA floor */
  --cn-muted-light: rgba(248,250,252,.72);
  --cn-border:      #E2E8F0;
  --cn-border-deep: rgba(11,31,58,.16);  /* dividers on --cn-chrome-2 — --cn-border is barely
                                             darker than that surface and reads as invisible */
  --cn-border-dark: rgba(248,250,252,.14);

  /* Gold is a signal colour, not a text colour: #D4A72C on white is under
     3:1. Anywhere the accent has to be *read* on a light surface — eyebrows,
     card links, meta lines — this darker gold is used instead (~6:1). */
  --cn-accent-text: #7B611A;

  /* A richer, more visible gold for the wordmark's accent only ("C&F" /
     the second half of the brand name) — every place it appears is large,
     extra-bold text, which only needs ~3:1, not the 4.5:1 the small-text
     eyebrows/meta lines above need. --cn-accent-text was tuned for those
     smaller uses and reads as dull/brownish at logo size; this clears 3:1+
     against the header, the footer and the white mobile drawer alike. */
  --cn-logo-gold: #9E7300;

  --cn-ok:          #15803D;   /* cleared / delivered */
  --cn-warn:        #B45309;   /* awaiting assessment */
  --cn-alert:       #B3261E;   /* demurrage risk */

  --cn-radius-sm: 10px;
  --cn-radius:    20px;
  --cn-radius-lg: 40px;
  --cn-radius-pill: 100px;

  --cn-font:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cn-font-heading: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cn-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --cn-container: 1280px;
  --cn-header-h: 104px;

  /* Width at which the desktop nav gives way to the off-canvas drawer.
     Not a taste call: .container caps at --cn-container, so the header row has
     a FIXED budget of 1232px no matter how wide the viewport gets. Branding,
     the nav and the CTA button have to fit inside it, and below this width
     they cannot. Kept here as a token so it is obvious the media queries in
     section 23 and this budget are the same decision. */
  --cn-nav-collapse: 1200px;

  --cn-shadow:    0 4px 18px rgba(15,23,42,.06);
  --cn-shadow-lg: 0 22px 50px rgba(15,23,42,.14);
}

/* =====================================================
   1. RESET / BASE
===================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

/* The [hidden] attribute must win. Any component that sets its own `display`
   (.btn is inline-flex, the drawer backdrop is block) otherwise out-ranks the
   browser's [hidden]{display:none} and stays on screen while JS believes it
   is hidden. */
[hidden]{ display:none !important; }
body{
  margin:0;
  font-family: var(--cn-font);
  font-size: 18px;
  line-height: 1.55;
  color: var(--cn-muted);
  background: var(--cn-chalk);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration:none; transition: color .2s ease; }
/* Both list types, not just ul. An <ol> that keeps its native marker while a
   component also draws its own counter renders the number twice — which is
   exactly what .process-list did ("1. 01", "2. 02"). Prose lists opt back in
   explicitly under .entry-content in section 22. */
ul,ol{ margin:0; padding:0; list-style:none; }
button, input, textarea, select{ font-family: inherit; font-size: inherit; }
h1,h2,h3,h4,h5,h6{
  margin: 0 0 .5em; font-family: var(--cn-font-heading); font-weight: 700; line-height: 1.12;
  letter-spacing: -0.022em; color: var(--cn-text);
}
h1{ font-size: clamp(2.3rem, 4.8vw, 3.6rem); }
h2{ font-size: clamp(1.85rem, 3.4vw, 2.85rem); }
h3{ font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
h4{ font-size: 1.2rem; }
p{ margin: 0 0 1em; }
p:last-child{ margin-bottom:0; }

.screen-reader-text{
  position:absolute !important; clip:rect(1px,1px,1px,1px);
  width:1px; height:1px; overflow:hidden; word-wrap:normal !important;
}
.container{ max-width: var(--cn-container); margin:0 auto; padding: 0 24px; }

/* Backstop against a sideways-scrolling document. `clip`, not `hidden`:
   `hidden` would turn #page into a scroll container and break the sticky
   header. A safety net for a future long menu label or wide embed — not a
   licence to let a component overflow, which should still be fixed at source. */
#page{ overflow-x: clip; }
.section{ padding: 100px 0; position:relative; }
.section--tight{ padding: 60px 0; }
.section--chalk{ background: var(--cn-chalk-2); }
.section--white{ background: var(--cn-white); }
/* Formerly the theme's dark-navy band. Now just its own light tint, kept as
   a separate class (rather than folded into .section--chalk) so templates
   that reach for "the alternate/emphasis section" keep working unchanged —
   its former text-colour overrides below are gone because the base
   component styles are already correct on a light surface. */
.section--dark{ background: var(--cn-chrome); }

.section-tag{
  display:inline-block; text-transform:uppercase; letter-spacing:.18em;
  font-size:.8125rem; font-weight:700; color: var(--cn-accent-text); margin-bottom:14px;
}
.section-head{ max-width: 680px; margin-bottom: 56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p{ color: var(--cn-muted); }

/* Monospaced runs — HS codes, container numbers, consignment references.
   These are transcribed by hand off a Bill of Lading, so the digits have to
   be unambiguous and the tracking spacing generous. */
.code{
  font-family: var(--cn-mono); font-size:.95em; letter-spacing:.04em;
  background: var(--cn-chalk-2); border:1px solid var(--cn-border);
  border-radius:6px; padding:2px 8px; color: var(--cn-text); white-space:nowrap;
}

/* Status pills — one vocabulary reused by the tracking timeline, the
   consignment admin columns and the quote summary. */
.status{
  display:inline-flex; align-items:center; gap:8px; padding:5px 14px;
  border-radius: var(--cn-radius-pill); font-size:.8rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; white-space:nowrap;
}
.status::before{ content:""; width:8px; height:8px; border-radius:50%; background: currentColor; flex-shrink:0; }
/* An inset ring, not a border: the pill keeps its exact box size, and the
   neutral variant still reads as a pill on --cn-chalk-2, which is its own
   background colour (that is the surface the clearance-process page uses).
   Only this variant needs it — the others carry a tint of their own. */
.status--pending{
  background: var(--cn-chalk-2); color: var(--cn-muted);
  box-shadow: inset 0 0 0 1px var(--cn-border);
}
.status--progress{ background: rgba(59,130,246,.14); color: var(--cn-blue-dark); }
.status--assessment{ background: var(--cn-amber-soft); color: var(--cn-warn); }
.status--cleared{ background: rgba(21,128,61,.12); color: var(--cn-ok); }
.status--alert{ background: rgba(179,38,30,.10); color: var(--cn-alert); }

/* Decorative shapes used on the chrome bands (hero, CTA, stats, etc). Tuned
   as a faint navy tint now that those bands are light rather than dark. */
.deco-arch{
  position:absolute; right:6%; top:0; width:270px; height:100%;
  background: rgba(15,23,42,.035); border-radius: 200px 200px 0 0; pointer-events:none;
}
.deco-blob{
  position:absolute; left:4%; bottom:-10%; width:250px; height:230px;
  border:1px solid rgba(15,23,42,.08); border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
  pointer-events:none;
}
/* Faint great-circle route lines, the one motif that says "freight" without
   another photograph. */
.deco-route{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(37,99,235,.14) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 66%, rgba(180,83,9,.16) 0 2px, transparent 3px);
}

/* =====================================================
   2. BUTTONS
===================================================== */
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding: 17px 34px; border-radius: var(--cn-radius-pill);
  font-weight:700; font-size:1rem; line-height:1;
  border:2px solid transparent; cursor:pointer; transition: all .25s ease; white-space:nowrap;
}
.btn svg{ flex-shrink:0; }
/* Hover rule for every button: the fill colour moves to the border and the
   background empties out (solid -> ghost). Every surface in the theme is now
   light (see section 0), so there is exactly one ghost colour to fall back
   to — navy — and no per-surface override table to maintain any more. */
:root{
  --cn-ghost-blue: var(--cn-blue-dark);
  --cn-ghost-navy: var(--cn-navy);
}

/* The primary CTA. `.btn-amber` keeps its historical class name — templates
   across the theme already use it — but amber itself is no longer a UI
   colour (see section 0), so it now renders identically to `.btn-navy`:
   the one solid-fill accent button. */
.btn-amber,
.btn-navy{ background: var(--cn-navy); border-color: var(--cn-navy); color: var(--cn-white); }
.btn-amber:hover,
.btn-amber:focus-visible,
.btn-navy:hover,
.btn-navy:focus-visible{ background: transparent; border-color: var(--cn-ghost-navy); color: var(--cn-ghost-navy); }

.btn-blue{ background: var(--cn-blue-dark); border-color: var(--cn-blue-dark); color: var(--cn-white); }
.btn-blue:hover,
.btn-blue:focus-visible{ background: transparent; border-color: var(--cn-ghost-blue); color: var(--cn-ghost-blue); }

/* Light-surface outline — the secondary action beside a solid `.btn-navy`. */
.btn-outline{ border-color: var(--cn-amber); color: var(--cn-accent-text); }
.btn-outline:hover,
.btn-outline:focus-visible{ background: var(--cn-amber-hover); border-color: var(--cn-amber-hover); color: var(--cn-navy); }

.btn-outline-dark{ border-color: var(--cn-navy); color: var(--cn-navy); }
.btn-outline-dark:hover,
.btn-outline-dark:focus-visible{ background: var(--cn-navy); border-color: var(--cn-navy); color: var(--cn-white); }

.btn-sm{ padding: 11px 22px; font-size:.9rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

/* =====================================================
   3. TOP BAR
===================================================== */
.topbar{
  background: var(--cn-navy); color: var(--cn-white);
  font-size:.95rem; font-weight:600; padding: 11px 0;
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:12px 26px; flex-wrap:wrap; }
/* Gold, not teal, for anything read as text here — teal only clears ~3:1
   against this navy, fine for a decorative icon but not for small text;
   gold clears ~7:1. */
.topbar svg{ color: var(--cn-amber); flex-shrink:0; }
.topbar .topbar__item{ display:inline-flex; align-items:center; gap:9px; }
.topbar a:hover{ color: var(--cn-amber); }
/* The licence-number chip: base `.code` is styled for a light surface
   (chalk background, dark text), which would sit dark-on-dark here. */
.topbar .code{ background: rgba(248,250,252,.12); border-color: var(--cn-border-dark); color: var(--cn-white); }
/* `.btn-amber` resolves to a solid navy fill everywhere else in the theme
   (see section 2) — on this navy bar that would be an invisible
   navy-on-navy button, so it gets its own gold fill here instead. */
.topbar .btn{ background: var(--cn-amber); border-color: var(--cn-amber); color: var(--cn-navy); }
.topbar .btn:hover,
.topbar .btn:focus-visible{ background: transparent; border-color: var(--cn-white); color: var(--cn-white); }

/* The clearing-desk number. It sits here rather than in the header row
   because the header's 1232px budget cannot hold it alongside the nav — see
   --cn-nav-collapse. Label above number so it reads as a labelled fact
   rather than a stray string of digits. */
.topbar__phone{ gap:11px; }
.topbar__phone > span{ display:flex; flex-direction:column; line-height:1.2; text-align:left; }
.topbar__phone-label{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.12em;
  color: var(--cn-amber); font-weight:700;
}
.topbar__phone strong{ font-size:1rem; font-weight:700; letter-spacing:.01em; white-space:nowrap; color: var(--cn-white); }
.topbar__phone:hover strong{ color: var(--cn-amber); }

/* =====================================================
   4. HEADER — light chrome band
===================================================== */
.site-header{
  background: var(--cn-chrome);
  border-bottom:1px solid var(--cn-border);
  position:sticky; top:0; z-index:999;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; min-height: var(--cn-header-h);
}
.site-branding{ display:flex; align-items:center; gap:14px; flex-shrink:0; max-width:300px; }
.site-branding img.custom-logo{ max-height:74px; width:auto; }
.site-title{ font-size: clamp(1.15rem, 1.5vw, 1.7rem); margin:0; font-weight:800; letter-spacing:-.025em; line-height:1.15; }
.site-title a{ display:flex; align-items:center; gap:12px; color: var(--cn-text); }
.site-title .accent{ color: var(--cn-logo-gold); }
.site-title svg{ color: var(--cn-navy); }
.site-description{ display:none; }

/* min-width:0 lets the nav be the item that gives way under pressure. A flex
   item defaults to min-width:auto, which is what allowed the old header to
   push past the container and scroll the entire document sideways. */
.main-navigation{ min-width:0; }
.main-navigation ul{ display:flex; align-items:center; gap:clamp(14px, 1.4vw, 22px); }
.main-navigation li{ position:relative; }
/* :not(.btn) matters. The drawer's footer CTAs are anchors inside
   .main-navigation, and this rule's specificity (0,2,1) beat .btn-amber's
   (0,1,0) — so the amber "Request a Quote" button rendered a white label on
   amber at 2.15:1, well under AA. Buttons own their own colour. */
.main-navigation a:not(.btn){
  font-weight:500; font-size:clamp(.98rem, 1.05vw, 1.075rem); color: var(--cn-text); white-space:nowrap;
  padding: 12px 0; display:flex; align-items:center; gap:7px;
}
.main-navigation li:hover > a:not(.btn){ color: var(--cn-blue-dark); }
.main-navigation .current-menu-item > a:not(.btn),
.main-navigation .current-menu-ancestor > a:not(.btn){ color: var(--cn-blue-dark); font-weight:700; }
.main-navigation .menu-item-has-children > a::after{
  content:""; width:8px; height:8px; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform: rotate(45deg) translateY(-2px);
}
.main-navigation .sub-menu{
  position:absolute; top:100%; left:-18px; background: var(--cn-white); min-width:262px;
  box-shadow: var(--cn-shadow-lg); border-radius: var(--cn-radius-sm); padding:12px;
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: all .22s ease; z-index:60; display:block;
}
.main-navigation li:hover > .sub-menu{ opacity:1; visibility:visible; transform: translateY(0); }
.main-navigation .sub-menu li{ width:100%; }
.main-navigation .sub-menu a{
  padding:10px 14px; border-radius:8px; color: var(--cn-navy); font-size:1rem; font-weight:500;
}
.main-navigation .sub-menu a:hover{ background: var(--cn-chalk-2); color: var(--cn-blue-dark); }
.main-navigation .sub-menu .sub-menu{ top:0; left:100%; }

.header-cta{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.header-cta .btn{ padding:17px 26px; }
.nav-drawer__head,
.nav-drawer__foot,
.nav-drawer__backdrop,
.nav-sub-toggle{ display:none; }

.menu-toggle{
  display:none; background:transparent; border:2px solid var(--cn-navy); border-radius:12px;
  width:50px; height:50px; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.menu-toggle .bar{ display:block; width:22px; height:2px; background: var(--cn-navy); position:relative; }
.menu-toggle .bar::before,.menu-toggle .bar::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background: var(--cn-navy);
}
.menu-toggle .bar::before{ top:-7px; } .menu-toggle .bar::after{ top:7px; }

/* Honeypot field - hidden from people, visible to bots */
.cn-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* =====================================================
   5. PAGE HEADER BAND (inner pages)
===================================================== */
.page-header-band{
  background: var(--cn-chrome); color: var(--cn-text);
  padding: 62px 0; text-align:center; position:relative; overflow:hidden;
  border-bottom:1px solid var(--cn-border);
}
.page-header-band h1{ color: var(--cn-navy); margin-bottom: 18px; position:relative; z-index:2; }
.page-header-band .breadcrumb{
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-size:1.075rem; position:relative; z-index:2; flex-wrap:wrap;
}
/* --cn-muted only clears ~4:1 against this band's own --cn-chrome
   background — under the 4.5:1 AA floor for real link text — and
   --cn-border, the sep's old colour, was ~1:1 against it: effectively
   invisible. --cn-muted-deep clears ~6.5:1 for both. */
.page-header-band .breadcrumb a{ color: var(--cn-muted-deep); }
.page-header-band .breadcrumb a:hover{ color: var(--cn-blue-dark); }
.page-header-band .breadcrumb .sep{ color: var(--cn-muted-deep); font-size:1.1rem; line-height:1; }
.page-header-band .breadcrumb .current{ color: var(--cn-text); font-weight:600; }

/* =====================================================
   6. HERO (homepage)
===================================================== */
.hero{ background: var(--cn-chrome); color: var(--cn-text); position:relative; overflow:hidden; padding: 76px 0; }
.hero .container{ position:relative; z-index:2; }
.hero-copy{ max-width:660px; }
.hero-eyebrow{ text-transform:uppercase; letter-spacing:.2em; font-size:.85rem; font-weight:700; color: var(--cn-text); margin-bottom:20px; display:inline-flex; align-items:center; gap:10px; }
.hero h1{ color: var(--cn-text); margin-bottom:24px; }
/* Solid gold, not an underline — the wordmark's own accent colour
   (--cn-logo-gold), which clears ~3.7:1 against this band and is the one
   amber-family colour rich enough to read as "gold" rather than "brown" at
   this size, while every smaller/lighter amber falls under 3:1 here. */
.hero h1 em{ font-style:normal; color: var(--cn-logo-gold); }
.hero p.lead{ color: var(--cn-muted); max-width:500px; margin-bottom:34px; }
.hero-actions{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
/* The hero's own primary CTA is gold, not the sitewide solid-navy
   `.btn-amber` — scoped to this one component so every other button in the
   theme keeps the navy accent established in Customize -> Brand Colors. */
.hero-actions .btn-amber{ background: var(--cn-amber); border-color: var(--cn-amber); color: var(--cn-navy); }
.hero-actions .btn-amber:hover,
.hero-actions .btn-amber:focus-visible{ background: transparent; border-color: var(--cn-amber); color: var(--cn-accent-text); }
.hero-actions .play-link{ display:flex; align-items:center; gap:14px; font-weight:700; color: var(--cn-text); }
.hero-actions .play-link .icon{
  width:52px; height:52px; border-radius:50%; background: var(--cn-white); border:1px solid var(--cn-border);
  display:flex; align-items:center; justify-content:center; transition: all .25s ease;
}
.hero-actions .play-link:hover .icon{ background: var(--cn-navy); border-color: var(--cn-navy); color: var(--cn-white); }

/* The two gateways this agency actually files at. Concrete beats generic —
   the mode name is the bold line, the real port(s) filed at is the quieter
   line underneath it. */
.hero-gateways{ display:flex; gap:16px; flex-wrap:wrap; margin-top:38px; }
/* A real link now (see hero.php), not an inert div — a solid card (not just
   bare icon+text floating on the band) so it reads as a distinct, clickable
   surface rather than low-opacity/washed-out, plus a visible focus ring so
   it is a genuine, discoverable tab stop. */
.hero-gateways__item{
  display:flex; align-items:center; gap:10px; border-radius: var(--cn-radius-sm);
  padding:12px 16px; background: var(--cn-white); border:1px solid var(--cn-border);
  box-shadow: var(--cn-shadow); transition: border-color .2s ease, box-shadow .2s ease;
}
.hero-gateways__item:focus-visible{
  outline:2px solid var(--cn-navy); outline-offset:3px;
}
.hero-gateways__item svg{ color: var(--cn-navy); flex-shrink:0; }
.hero-gateways__label{ display:block; font-weight:700; color: var(--cn-text); font-size:.95rem; }
.hero-gateways__name{ display:block; color: var(--cn-muted); font-size:.82rem; }

/* The photo is the section's actual background image now (not an <img>
   sitting in a right-hand column) — it covers the whole band, edge to
   edge. A gradient sits over it rather than under the copy: opaque
   --cn-chrome behind the text on the left, fading to clear by the time it
   reaches the photo's own right-hand two-thirds, so the copy still reads
   against a flat, light surface and the picture still reads as a picture.
   Below 1024px the copy stacks on top of the whole image (see the 1024px
   query), which is what the darker, fuller scrim there is for. */
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg__img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.hero-bg::before{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(90deg, rgba(234,238,243,1) 0%, rgba(234,238,243,1) 44%, rgba(234,238,243,0) 68%);
}
.hero-bg .float-card{
  position:absolute; z-index:2; bottom:28px; left:28px; background: var(--cn-white); color: var(--cn-navy);
  border-radius: var(--cn-radius); padding:18px 24px; box-shadow: var(--cn-shadow-lg);
  display:flex; align-items:center; gap:12px; font-weight:700; font-size:.95rem; max-width:262px;
}
.hero-bg .float-card .dot{ width:12px; height:12px; border-radius:50%; background: var(--cn-ok); flex-shrink:0; }

/* =====================================================
   7. FEATURE STRIP
===================================================== */
/* border-bottom too: the strip's outer cells use --cn-chrome, which is
   close enough to --section--chalk (the very next section, services) that
   the seam between them was disappearing. */
.feature-strip{ border-top:1px solid var(--cn-border); border-bottom:1px solid var(--cn-border); }
.feature-strip .grid{ display:grid; grid-template-columns: repeat(3,1fr); }
.feature-strip .cell{ padding: 56px 48px; }
.feature-strip .cell--cta{
  background: var(--cn-chrome); border-right:1px solid var(--cn-border);
  display:flex; flex-direction:column;
  justify-content:space-between; align-items:flex-start; gap:28px;
}
.feature-strip .cell--cta h2{ color: var(--cn-text); font-size:1.95rem; margin:0; }
.feature-strip .cell--cta h2 strong{ color: var(--cn-navy); font-weight:700; }
.feature-strip .cell--dark{ background: var(--cn-white); color: var(--cn-muted); border-right:1px solid var(--cn-border); }
.feature-strip .cell--dark:nth-of-type(3){ background: var(--cn-chrome); border-right:none; }
.feature-strip .cell--dark .icon{ color: var(--cn-navy); margin-bottom:24px; }
.feature-strip .cell--dark h3{ color: var(--cn-text); margin-bottom:12px; }
.feature-strip .cell--dark p{ margin:0; }

/* =====================================================
   8. ABOUT / CHECKLIST
===================================================== */
.about-section .container{ display:grid; grid-template-columns: .95fr 1.05fr; gap:70px; align-items:center; }
.about-visual{ position:relative; }
.about-visual img{ border-radius: var(--cn-radius); }
.checklist{ margin: 28px 0 36px; }
.checklist li{ display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; font-weight:600; color: var(--cn-text); }
.checklist .check{
  width:26px; height:26px; border-radius:50%; flex-shrink:0; margin-top:1px;
  background: var(--cn-navy); color: var(--cn-white);
  display:flex; align-items:center; justify-content:center;
}
.checklist--2col{ display:grid; grid-template-columns:1fr 1fr; gap:0 30px; }

/* Licence / credential badges — the thing importers actually check first. */
.credentials{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.credential{
  display:flex; align-items:center; gap:12px; padding:14px 20px;
  background: var(--cn-white); border:1px solid var(--cn-border);
  border-radius: var(--cn-radius-sm); box-shadow: var(--cn-shadow);
}
.credential svg{ color: var(--cn-blue-dark); flex-shrink:0; }
.credential__label{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color: var(--cn-muted); }
.credential__value{ display:block; font-weight:700; color: var(--cn-text); font-family: var(--cn-mono); font-size:.95rem; }

/* =====================================================
   8b. ABOUT PAGE SECTIONS
===================================================== */
.who-we-are .container{ display:grid; grid-template-columns: 1fr 1fr; gap:70px; align-items:center; }
.who-we-are__media{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.who-we-are__img{ border-radius: var(--cn-radius); overflow:hidden; aspect-ratio:1/1; }
.who-we-are__img img{ width:100%; height:100%; object-fit:cover; }
.who-we-are__img--tall{ grid-row: span 2; aspect-ratio:auto; height:100%; border-radius: var(--cn-radius-lg) var(--cn-radius-lg) var(--cn-radius) var(--cn-radius); }
.who-we-are__img--wide{ grid-column: span 2; aspect-ratio:16/9; }

/* =====================================================
   8c. OUR BRANCHES PAGE
===================================================== */
.branch-cards{ display:flex; flex-direction:column; gap:44px; }
.branch-card{
  display:grid; grid-template-columns: 1fr 1fr; gap:50px; align-items:center;
  background: var(--cn-white); border:1px solid var(--cn-border);
  border-radius: var(--cn-radius-lg); padding:40px;
}
.branch-card--reverse .branch-card__media{ order:1; }
.branch-card--reverse .branch-card__content{ order:2; }
.branch-card__media{ border-radius: var(--cn-radius); overflow:hidden; aspect-ratio:16/10; background: var(--cn-chalk-2); }
.branch-card__media iframe{ width:100%; height:100%; border:0; display:block; }
.branch-card__media--placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; height:100%; color: var(--cn-muted); text-align:center; padding:20px;
}
.branch-card__media--placeholder svg{ color: var(--cn-blue-dark); }
.branch-card__title{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.branch-card__title .icon{
  width:50px; height:50px; border-radius:14px; flex-shrink:0;
  background: var(--cn-chalk-2); color: var(--cn-blue-dark);
  display:flex; align-items:center; justify-content:center;
}
.branch-card__list{ display:flex; flex-direction:column; gap:14px; }
.branch-card__list li{ display:flex; align-items:flex-start; gap:12px; color: var(--cn-muted); }
.branch-card__list li svg{ flex-shrink:0; margin-top:3px; color: var(--cn-blue-dark); }
.branch-card__list a{ color: var(--cn-text); font-weight:600; }
.branch-card__list a:hover{ color: var(--cn-blue-dark); }

.info-cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
.info-card{
  background: var(--cn-white); border:1px solid var(--cn-border);
  border-radius: var(--cn-radius); padding:38px 32px; transition: all .28s ease;
}
.info-card:hover{ transform: translateY(-4px); box-shadow: var(--cn-shadow-lg); border-color: var(--cn-blue); }
.info-card .icon{
  width:60px; height:60px; border-radius:16px; margin-bottom:22px;
  background: var(--cn-chalk-2); color: var(--cn-blue-dark);
  display:flex; align-items:center; justify-content:center; transition: all .28s ease;
}
.info-card:hover .icon{ background: var(--cn-blue-dark); color: var(--cn-white); }
.info-card h3{ margin-bottom:10px; }
.info-card p{ font-size:1rem; margin:0; }

/* Big-number band — years in trade, consignments cleared, etc. */
.stats-band{ background: var(--cn-chrome-2); padding: 70px 0; position:relative; overflow:hidden; }
.stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:30px; position:relative; z-index:2; }
.stat{ text-align:center; }
.stat__num{
  display:block; font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight:800;
  letter-spacing:-.03em; line-height:1; color: var(--cn-navy);
}
.stat__label{ display:block; margin-top:12px; color: var(--cn-muted); font-weight:600; font-size:1rem; }

/* =====================================================
   9. SERVICES GRID
===================================================== */
.services-grid{
  display:grid; grid-template-columns: repeat(3,1fr);
  border:1px solid var(--cn-border); border-radius: var(--cn-radius);
  overflow:hidden; background: var(--cn-white);
}
.service-card{
  padding: 46px 38px; border-right:1px solid var(--cn-border); border-bottom:1px solid var(--cn-border);
  transition: background .28s ease; position:relative;
  display:flex; flex-direction:column;
}
.service-card:hover{ background: var(--cn-chalk-2); box-shadow: inset 3px 0 0 var(--cn-navy); }
.service-card .icon{
  width:64px; height:64px; border-radius:18px; background: var(--cn-chalk-2); color: var(--cn-navy);
  display:flex; align-items:center; justify-content:center; margin-bottom:24px; transition: all .28s ease;
}
.service-card:hover .icon{ background: var(--cn-navy); color: var(--cn-white); }
.service-card h3{ margin-bottom:12px; }
.service-card p{ font-size:1rem; margin-bottom:16px; }
.service-card__mode{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:14px;
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color: var(--cn-accent-text);
}
.service-card .more{
  font-weight:700; font-size:.95rem; color: var(--cn-blue-dark);
  display:inline-flex; align-items:center; gap:8px;
  margin-top:auto; align-self:flex-start;
}

/* Mode tabs — Sea Freight / Air Freight, the two gateways this agency files
   at. Same `?mode=` main-query filter as the archive.

   scroll-margin-top is what makes the tabs a usable scroll target: switching a
   filter reloads the page to #cnfb-filter, and without this the sticky header
   would sit on top of the row the reader was sent to. */
.mode-tabs{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:44px;
  scroll-margin-top: calc(var(--cn-header-h) + 28px);
}
.mode-tabs a{
  display:inline-flex; align-items:center; gap:9px; padding:13px 26px;
  border-radius: var(--cn-radius-pill); border:1px solid var(--cn-border);
  background: var(--cn-white); color: var(--cn-navy); font-weight:700; font-size:.95rem;
  transition: all .22s ease;
}
.mode-tabs a:hover{ border-color: var(--cn-blue); color: var(--cn-blue-dark); }
.mode-tabs a.is-active{ background: var(--cn-navy); border-color: var(--cn-navy); color: var(--cn-white); }
.mode-tabs a.is-active svg{ color: var(--cn-white); }

/* =====================================================
   10. CLEARANCE WORKFLOW (numbered process)
===================================================== */
.process-grid{ display:grid; grid-template-columns: repeat(4,1fr); }
.process-cell{
  padding: 50px 38px; border-right:1px solid var(--cn-border);
  position:relative; background: var(--cn-white);
}
.process-cell:last-child{ border-right:none; }
.process-cell__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:50%; margin-bottom:22px;
  background: var(--cn-chalk-2); color: var(--cn-navy);
  font-weight:800; font-size:1.15rem; font-family: var(--cn-mono);
  transition: all .28s ease;
}
.process-cell:hover .process-cell__num{ background: var(--cn-navy); color: var(--cn-white); }
.process-cell h3{ margin-bottom:10px; font-size:1.25rem; }
.process-cell p{ font-size:1rem; margin:0; }
/* Connector between the steps — the paperwork trail, essentially. */
.process-cell:not(:last-child)::after{
  content:""; position:absolute; top:76px; right:-9px; width:18px; height:2px;
  background: var(--cn-border);
}

/* Vertical variant, used inside the service single sidebar column. */
.process-list{ counter-reset: cn-step; }
.process-list li{
  position:relative; padding-left:62px; padding-bottom:30px; counter-increment: cn-step;
}
.process-list li:not(:last-child)::before{
  content:""; position:absolute; left:20px; top:44px; bottom:0; width:2px; background: var(--cn-border);
}
.process-list li::after{
  content: counter(cn-step, decimal-leading-zero);
  position:absolute; left:0; top:0; width:42px; height:42px; border-radius:50%;
  background: var(--cn-navy); color: var(--cn-white);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--cn-mono); font-weight:700; font-size:.9rem;
}
.process-list strong{ display:block; color: var(--cn-text); font-size:1.1rem; margin-bottom:5px; }
.process-list p{ font-size:1rem; margin:0; }

/* =====================================================
   11. INDUSTRIES WE SERVE
===================================================== */
.industries-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
.industry-card{
  position:relative; overflow:hidden; border-radius: var(--cn-radius);
  /* Navy into the accent teal, not a flat fill — this is the base tone
     under the photo (and its own gradient overlay just below), and a flat
     navy read as dull next to it. */
  background: linear-gradient(135deg, var(--cn-navy) 0%, var(--cn-blue) 160%);
  color: var(--cn-muted-light);
  min-height:290px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:34px; isolation:isolate;
  transition: transform .3s ease, box-shadow .3s ease;
}
.industry-card:hover{ transform: translateY(-6px); box-shadow: var(--cn-shadow-lg); }
.industry-card__bg{ position:absolute; inset:0; z-index:-2; }
.industry-card__bg img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
/* Lighter than a near-opaque black wash — enough of the photo shows through
   at rest to read as a photo, not a dark tile, and it deepens slightly on
   hover (below) to keep the name and copy crisp once the photo zooms. */
.industry-card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(11,31,58,.1) 0%, rgba(11,31,58,.8) 70%);
  transition: background .3s ease;
}
.industry-card:hover::before{
  background: linear-gradient(180deg, rgba(11,31,58,.18) 0%, rgba(11,31,58,.88) 65%);
}
.industry-card:hover .industry-card__bg img{ transform: scale(1.06); }
.industry-card .icon{ color: var(--cn-blue); margin-bottom:16px; }
.industry-card h3{ color: var(--cn-white); font-size:1.35rem; margin-bottom:8px; }
.industry-card p{ font-size:.98rem; margin:0 0 14px; }
.industry-card__hs{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:auto;
}
/* The photo behind this card can be any tone, so the default light `.code`
   chip (chalk background, dark text) is overridden here rather than relied
   on — it would otherwise sit dark-on-dark against the card's own gradient. */
.industry-card__hs .code{ font-size:.78rem; background: rgba(248,250,252,.1); border-color: var(--cn-border-dark); color: var(--cn-white); }
/* Gold, not the illustrative teal used for the icon above — teal only
   clears ~3.3:1 against this card's dark gradient, fine for a decorative
   icon but not for readable link text; gold clears ~8:1. */
.industry-card .more{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font-weight:700; font-size:.92rem; color: var(--cn-amber);
}
.industry-card .more svg{ transition: transform .25s ease; }
.industry-card:hover .more svg{ transform: translateX(4px); }

/* =====================================================
   12. TESTIMONIALS
===================================================== */
.testimonial-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:30px; }

/* Marquee — runs edge to edge and scrolls continuously. The track is
   duplicated by JS, so translating it exactly one copy's width loops
   seamlessly with no visible jump. */
.testimonial-marquee{
  position:relative; overflow:hidden;
  /* Fade the ends so cards enter and leave rather than being cut off. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
}
.testimonial-marquee__track{
  display:flex; gap:30px; width:max-content;
  will-change: transform;
  animation: cn-marquee var(--cn-marquee-duration, 60s) linear infinite;
}
.testimonial-marquee:hover .testimonial-marquee__track,
.testimonial-marquee:focus-within .testimonial-marquee__track{ animation-play-state: paused; }
/* Only animate once JS has cloned the cards, or a single set would slide away. */
.testimonial-marquee:not(.is-ready) .testimonial-marquee__track{ animation:none; }
@keyframes cn-marquee{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-50%,0,0); }
}
.testimonial-marquee .testimonial-card{ flex: 0 0 clamp(300px, 30vw, 420px); margin:0; }

.testimonial-card{ background: var(--cn-white); border:1px solid var(--cn-border); border-radius: var(--cn-radius); padding:38px; box-shadow: var(--cn-shadow); }
.testimonial-card .stars{ color: var(--cn-accent-text); letter-spacing:3px; margin-bottom:18px; }
.testimonial-card p{ color: var(--cn-muted); }
.testimonial-card .person{ display:flex; align-items:center; gap:14px; margin-top:24px; padding-top:24px; border-top:1px solid var(--cn-border); }
.testimonial-card .person img{ width:52px; height:52px; border-radius:50%; object-fit:cover; }
.testimonial-card .person strong{ display:block; color: var(--cn-text); font-weight:700; }
.testimonial-card .person span{ font-size:.9rem; color: var(--cn-muted); }

/* =====================================================
   13. CTA BAND
===================================================== */
.cta-band{ background: var(--cn-chrome); padding: 80px 0; border-top:1px solid var(--cn-border); border-bottom:1px solid var(--cn-border); }
.cta-band .container{ display:grid; grid-template-columns: 1.15fr .85fr; gap:50px; align-items:center; }
.cta-band h2{ color: var(--cn-text); margin-bottom:18px; }
.cta-band p{ color: var(--cn-muted); margin-bottom:30px; }

/* Boxed CTA used inside page templates */
.quote-cta{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:44px; align-items:center;
  background: var(--cn-chrome); color: var(--cn-muted);
  border:1px solid var(--cn-border);
  border-radius: var(--cn-radius-lg); padding:58px 56px;
  position:relative; overflow:hidden;
}
.quote-cta h2{ color: var(--cn-text); margin-bottom:14px; }
.quote-cta__actions{ display:flex; flex-direction:column; gap:14px; position:relative; z-index:2; }

/* =====================================================
   14. BLOG CARDS
===================================================== */
.blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:30px; }
/* Blog listings (index, archives, search) run beside the sidebar, so two
   cards per row rather than the three used in full-width sections. */
.posts-column .blog-grid{ grid-template-columns: repeat(2,1fr); }
.post-card{ background: var(--cn-white); border-radius: var(--cn-radius); overflow:hidden; box-shadow: var(--cn-shadow); display:flex; flex-direction:column; }
.post-card .thumb{ aspect-ratio:16/10; overflow:hidden; display:block; background: var(--cn-chalk-2); }
.post-card .thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.post-card:hover .thumb img{ transform: scale(1.06); }
.post-card .body{ padding: 28px; display:flex; flex-direction:column; flex:1; }
.post-card .meta{
  font-size:.8rem; color: var(--cn-accent-text); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px;
}
.post-card h3{ font-size:1.28rem; margin-bottom:12px; }
.post-card h3 a:hover{ color: var(--cn-blue-dark); }
.post-card p{ font-size:1rem; }
.post-card .more{ font-weight:700; font-size:.95rem; color: var(--cn-blue-dark); display:inline-flex; gap:8px; align-items:center; }
.post-card .meta .sep{ margin:0 8px; opacity:.55; }
.post-card__more{ margin-top:auto; align-self:flex-start; padding-top:6px; }

/* =====================================================
   15. FORMS
===================================================== */
.contact-section{ background: var(--cn-chalk-2); }
.contact-section .container{ display:grid; grid-template-columns: 1fr 1.1fr; gap:60px; align-items:start; }
.contact-info h2{ margin-bottom:16px; }
.contact-cards{ display:grid; gap:16px; margin-top:34px; }
.contact-cards li{
  display:flex; align-items:flex-start; gap:18px; background: var(--cn-white);
  border:1px solid var(--cn-border); border-radius: var(--cn-radius-sm); padding:20px 22px;
  transition: border-color .2s ease, transform .2s ease;
}
.contact-cards li:hover{ border-color: var(--cn-blue); transform: translateY(-2px); }
.contact-cards .ico{
  width:46px; height:46px; border-radius:12px; flex-shrink:0;
  background: var(--cn-chalk-2); color: var(--cn-blue-dark);
  display:flex; align-items:center; justify-content:center;
}
.contact-cards strong{
  display:block; color: var(--cn-text); font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:5px;
}
.contact-cards a, .contact-cards span{ color: var(--cn-muted); font-size:1.05rem; }
.contact-cards a:hover{ color: var(--cn-blue-dark); }

.contact-form{
  display:flex; flex-direction:column;
  background: var(--cn-white); border:1px solid var(--cn-border);
  border-radius: var(--cn-radius); padding:40px;
}
.contact-form .form-row:last-of-type{ margin-bottom:24px; }
/* The thank-you panel swaps in for [data-contact-fields] in place — see
   showThankYou() in main.js, which locks the form's own height first. Both
   are flex items of .contact-form so the visible one can stretch to fill
   that locked height and centre its content inside it, rather than sitting
   pinned to the top with empty space below. */
.contact-form__done{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px 0;
}
.contact-form__done .tick-circle{
  width:64px; height:64px; border-radius:50%; background: var(--cn-ok); color: var(--cn-white);
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px;
}
.contact-form__done h3{ margin-bottom:10px; }
.contact-form__done p{ color: var(--cn-muted); }
.form-feedback{ margin:18px 0 0; font-size:.95rem; min-height:1.4em; }
.form-feedback.is-error{ color: var(--cn-alert); }
.form-feedback.is-success{ color: var(--cn-ok); font-weight:700; }
@media (max-width:1024px){ .contact-form{ padding:30px 24px; } }
input[type=text],input[type=email],input[type=url],input[type=tel],input[type=search],
input[type=number],input[type=date],input[type=password],textarea,select{
  width:100%; padding:16px 20px; border-radius: var(--cn-radius-sm);
  border:1px solid var(--cn-border); background: var(--cn-white); color: var(--cn-text);
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus,textarea:focus,select:focus{ outline:none; border-color: var(--cn-blue); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
textarea{ min-height:150px; resize:vertical; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.form-row--3{ grid-template-columns:repeat(3,1fr); }
.form-row .full{ grid-column: 1 / -1; }
.contact-form .btn{ margin-top:6px; }
label.field-label{ display:block; font-weight:700; color: var(--cn-text); margin-bottom:8px; font-size:.92rem; }
.field-label .req{ color: var(--cn-alert); margin-left:2px; }
/* Inline, per-field validation. Sits directly under the offending control
   rather than in one aggregate banner at the end of the form, so the reader
   does not have to hunt back up through the form to find which field it
   was about. */
.field-error{ display:block; margin-top:7px; font-size:.85rem; color: var(--cn-alert); font-weight:600; }
input.is-invalid, textarea.is-invalid, select.is-invalid{
  border-color: var(--cn-alert) !important;
  box-shadow: 0 0 0 3px rgba(179,38,30,.12) !important;
}
/* Pill controls (newsletter, tracking) have no border of their own on the
   input — see PILL_SELECTOR in main.js — so the invalid state colours
   the pill's own edge instead. */
.newsletter-form.is-invalid,
.tracking-form.is-invalid,
.tracking-inline.is-invalid{
  border-color: var(--cn-alert);
  box-shadow: 0 0 0 3px rgba(179,38,30,.18);
}
/* Chip rows and radio-card grids (the quote wizard's direction, freight
   mode, gateway and load-type pickers): each option already carries its own
   border, so on an invalid group every option turns red directly, the same
   colour a bad text input's border does — clearer than a single outline
   drawn around the whole group, which read as detached from the actual
   controls and clipped oddly against neighbouring text. */
.chip-row.is-invalid .chip{
  border-color: var(--cn-alert);
  box-shadow: 0 0 0 1px var(--cn-alert);
}
.opt-cards.is-invalid .opt-card__body{
  border-color: var(--cn-alert);
  box-shadow: 0 0 0 1px var(--cn-alert);
}
.field-hint{ display:block; margin-top:7px; font-size:.85rem; color: var(--cn-muted); }
/* Reference-style inputs get the mono face so a mistyped digit is visible. */
input.is-code{ font-family: var(--cn-mono); letter-spacing:.06em; text-transform:uppercase; }

/* =====================================================
   16. ACCORDION (FAQ)
===================================================== */
.accordion{ border-top:1px solid var(--cn-border); }
.accordion__item{ border-bottom:1px solid var(--cn-border); }
.accordion__trigger{
  width:100%; background:none; border:none; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:20px; padding: 26px 0;
  font-size:1.2rem; font-weight:700; color: var(--cn-text); letter-spacing:-.012em;
}
.accordion__trigger:hover{ color: var(--cn-blue-dark); }
.accordion__icon{ width:22px; height:22px; flex-shrink:0; position:relative; color: var(--cn-accent-text); }
.accordion__icon::before,.accordion__icon::after{
  content:""; position:absolute; background: currentColor; border-radius:2px;
  transition: transform .25s ease, opacity .25s ease;
}
.accordion__icon::before{ top:10px; left:0; width:22px; height:2px; }
.accordion__icon::after{ left:10px; top:0; width:2px; height:22px; }
.accordion__item.is-open .accordion__icon::after{ transform: rotate(90deg); opacity:0; }
/* Animated open/close. `display:none` -> `display:block` cannot transition, so
   the panel used to snap.

   The panel is a one-row grid and the row goes 0fr -> 1fr, which interpolates
   to the answer's OWN height — no JS measurement, no max-height guess that
   eases wrongly for a short answer and clips a long one. The inner <p> does
   the clipping, so its padding is inside the animated box and does not show
   as a gap while closed. */
.accordion__panel{
  display:grid;
  /* minmax(0, …), not a bare 0fr. A bare `0fr` row is floored by its item's
     min-content height, and the answer's 26px bottom padding is not
     compressible — so a "closed" panel still occupied 26px and every FAQ had
     a phantom gap under it. minmax(0, 0fr) lets the row actually reach zero. */
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows .34s cubic-bezier(.4,0,.2,1);
}
.accordion__panel > p{
  overflow:hidden;
  margin:0;
  padding: 0 0 26px 42px;
  opacity:0;
  transition: opacity .22s ease;
}
.accordion__item.is-open .accordion__panel{ grid-template-rows: minmax(0, 1fr); }
/* Fade in slightly behind the height, so text does not arrive before it has
   room; fade out ahead of it on close. */
.accordion__item.is-open .accordion__panel > p{ opacity:1; transition-delay: .1s; }

/* =====================================================
   17. SERVICE SINGLE
===================================================== */
.service-single .container{ display:grid; grid-template-columns: 1fr 370px; gap:50px; align-items:start; }
.service-single .featured{ border-radius: var(--cn-radius); overflow:hidden; margin-bottom:40px; }
/* A portrait has no business spanning the full content column the way a
   service's landscape hero does. */
.service-single .featured--portrait{ max-width:320px; }
.service-single .featured--portrait img{ width:100%; height:auto; }
.service-single h2{ margin-bottom:22px; }
.service-single .benefits-title{ margin-top:46px; }

.service-sidebar{ position:sticky; top: calc(var(--cn-header-h) + 24px); }
.service-nav-card{ background: var(--cn-chrome); border:1px solid var(--cn-border); border-radius: var(--cn-radius); padding:36px 28px; }
.service-nav-card h3{ color: var(--cn-text); text-align:center; margin-bottom:26px; }
.service-nav-card ul{ display:grid; gap:12px; margin-bottom:28px; }
.service-nav-card ul a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-radius: var(--cn-radius-sm);
  background: var(--cn-white); border:1px solid var(--cn-border);
  color: var(--cn-text); font-weight:600; font-size:1rem; transition: all .22s ease;
}
.service-nav-card ul a:hover,
.service-nav-card ul .is-current a{ background: var(--cn-navy); border-color: var(--cn-navy); color: var(--cn-white); }
.service-nav-card ul a svg{ flex-shrink:0; }

/* Documents-required checklist — the single most-asked question a C&F desk
   gets, so it gets its own card rather than living in prose. */
.docs-card{
  background: var(--cn-white); border:1px solid var(--cn-border);
  border-radius: var(--cn-radius); padding:32px 28px; margin-top:24px;
}
.docs-card h3{ font-size:1.2rem; margin-bottom:18px; }
.docs-card li{
  display:flex; align-items:flex-start; gap:12px; padding:11px 0;
  border-bottom:1px dashed var(--cn-border); font-size:1rem; color: var(--cn-muted);
}
.docs-card li:last-child{ border-bottom:none; }
.docs-card li svg{ color: var(--cn-ok); flex-shrink:0; margin-top:3px; }

/* Turnaround / fee facts strip on the service single */
.service-facts{
  display:grid; grid-template-columns: repeat(3,1fr); gap:0;
  border:1px solid var(--cn-border); border-radius: var(--cn-radius);
  overflow:hidden; background: var(--cn-white); margin-bottom:40px;
}
.service-facts > div{ padding:26px 28px; border-right:1px solid var(--cn-border); }
.service-facts > div:last-child{ border-right:none; }
.service-facts dt{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.11em;
  font-weight:700; color: var(--cn-accent-text); margin-bottom:8px;
}
.service-facts dd{ margin:0; font-weight:700; color: var(--cn-text); font-size:1.1rem; }

/* =====================================================
   18. TEAM
===================================================== */
.team-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:26px; }
.team-grid--3{ grid-template-columns: repeat(3,1fr); }
.team-card{
  background: var(--cn-white); border:1px solid var(--cn-border);
  border-radius: var(--cn-radius); overflow:hidden; transition: all .28s ease;
}
.team-card:hover{ transform: translateY(-5px); box-shadow: var(--cn-shadow-lg); }
.team-card__photo{ position:relative; aspect-ratio:1/1; overflow:hidden; background: var(--cn-chalk-2); }
.team-card__photo img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .4s ease;
}
/* A slight zoom on hover — the same cue used on the blog cards — is what
   signals "this photo is now doing something" before the eye even reaches
   the overlay text. */
.team-card:hover .team-card__photo img{ transform: scale(1.05); }

/* A light layer over the bottom of the photo, not a block over most of it.
   The gradient used to start at 35% of the frame and covered nearly the
   whole face once the name/role/meta/icons stack filled it — this starts
   past halfway, and the overlay itself carries only name, role and the way
   to reach them (years/licence already sit in .team-card__body below, so
   repeating them here was clutter, not information). Nothing in it is
   reachable on a touch device, which has no hover to trigger it — the
   caption below stays the only copy that matters there. */
.team-card__overlay{
  position:absolute; inset:0; padding:20px 18px;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  text-align:center; gap:3px;
  /* A single transparent->92% ramp put only ~28% opacity behind the name —
     the text sits at ~70% down the frame, and a linear gradient reaching
     92% only at 100% is barely tinted that high up. White text on a
     lightly-tinted placeholder avatar background measured well under 3:1.
     This ramps to ~90% opacity by 70%, so whatever sits behind the text is
     reliably near-solid navy regardless of the photo underneath; only the
     band above the text (over the face) stays genuinely clear. */
  background: linear-gradient(
    180deg,
    transparent 40%,
    rgba(15,23,42,.55) 58%,
    rgba(15,23,42,.9) 70%,
    rgba(15,23,42,.94) 100%
  );
  opacity:0; transition: opacity .3s ease;
}
.team-card:hover .team-card__overlay,
.team-card:focus-within .team-card__overlay{ opacity:1; }
.team-card__overlay-name{ color: var(--cn-white); font-size:1.05rem; line-height:1.2; }
/* Gold, not teal — see the identical note on .industry-card .more above. */
.team-card__overlay-role{ color: var(--cn-amber); font-weight:700; font-size:.8rem; }
.team-card__overlay-links{ display:flex; gap:8px; margin-top:12px; }
.team-card__overlay-links a{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(248,250,252,.14); border:1px solid var(--cn-border-dark);
  color: var(--cn-white); transition: all .22s ease; flex-shrink:0;
}
.team-card__overlay-links a:hover,
.team-card__overlay-links a:focus-visible{ background: var(--cn-blue); border-color: var(--cn-blue); color: var(--cn-white); }
.team-card__body{ padding:24px; text-align:center; }
.team-card__body h3{ font-size:1.2rem; margin-bottom:6px; }
.team-card__role{ display:block; color: var(--cn-blue-dark); font-weight:700; font-size:.9rem; margin-bottom:12px; }
.team-card__meta{ font-size:.88rem; color: var(--cn-muted); }
.team-card__meta .code{ font-size:.8rem; }

/* =====================================================
   19. QUOTE WIZARD
===================================================== */
.quote-wrap .container{ display:grid; grid-template-columns: 290px 1fr; gap:44px; align-items:start; }

.quote-steps{
  background: var(--cn-white); border:1px solid var(--cn-border);
  border-radius: var(--cn-radius); padding:26px; position:sticky; top: calc(var(--cn-header-h) + 24px);
}
.quote-steps li{ display:flex; align-items:center; gap:16px; padding:11px 0; font-weight:600; color: var(--cn-text); }
.quote-steps li .num{
  width:44px; height:44px; border-radius:12px; background: var(--cn-navy); color: var(--cn-white);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: all .25s ease;
  font-family: var(--cn-mono); font-weight:700; font-size:.9rem;
}
.quote-steps li.is-active{ color: var(--cn-blue-dark); }
.quote-steps li.is-active .num{ background: var(--cn-blue-dark); color: var(--cn-white); }
.quote-steps li.is-done .num{ background: var(--cn-ok); color: var(--cn-white); }

.quote-panel{
  position:relative;
  background: var(--cn-white); border:1px solid var(--cn-border);
  border-radius: var(--cn-radius); overflow:hidden;
}
/* Covers the whole panel while the quote request is on the wire, so the
   visitor sees one clear "in progress" state instead of a small bottom
   banner while the rest of the form sits there looking submittable. */
.quote-panel__loading{
  position:absolute; inset:0; z-index:5;
  flex-direction:column; align-items:center; justify-content:center; gap:18px;
  background: rgba(255,255,255,.94);
}
.quote-panel__loading:not([hidden]){ display:flex; }
.quote-panel__loading .spinner{
  width:46px; height:46px; border-radius:50%;
  border:4px solid var(--cn-border); border-top-color: var(--cn-blue-dark);
  animation: cnfb-spin .8s linear infinite;
}
.quote-panel__loading p{ font-weight:700; color: var(--cn-text); }
@keyframes cnfb-spin{ to{ transform: rotate(360deg); } }
.quote-panel__body{ padding: 40px; }
.quote-panel h3{ font-size:1.45rem; margin-bottom:8px; }
.quote-panel h3:not(:first-child){ margin-top:38px; }
.quote-panel .step-intro{ color: var(--cn-muted); margin-bottom:24px; font-size:1rem; }

.chip-row{ display:flex; flex-wrap:wrap; gap:14px; }
.chip{
  display:inline-flex; align-items:center; gap:10px; padding:13px 24px;
  border:1px solid var(--cn-border); border-radius: var(--cn-radius-sm);
  background: var(--cn-white); color: var(--cn-text); font-weight:600; cursor:pointer;
  transition: all .2s ease;
}
.chip:hover{ border-color: var(--cn-blue); }
.chip.is-active{ border-color: var(--cn-blue-dark); background: var(--cn-chalk-2); box-shadow: 0 0 0 1px var(--cn-blue-dark); }
.chip .tick{ display:none; color: var(--cn-ok); }
.chip.is-active .tick{ display:inline-flex; }
.chip svg:first-child{ color: var(--cn-blue-dark); }

/* Radio cards — gateway, container type, Incoterm. A label wrapping a real
   radio, so keyboard and screen readers get the native control while the
   card carries the visual state. */
.opt-cards{ display:grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.opt-card{ position:relative; display:block; cursor:pointer; }
.opt-card input{ position:absolute; opacity:0; width:1px; height:1px; }
.opt-card__body{
  display:flex; flex-direction:column; gap:6px; height:100%;
  padding:18px 20px; border:1px solid var(--cn-border); border-radius: var(--cn-radius-sm);
  background: var(--cn-white); transition: all .2s ease;
}
.opt-card:hover .opt-card__body{ border-color: var(--cn-blue); }
.opt-card input:checked + .opt-card__body{
  border-color: var(--cn-blue-dark); background: var(--cn-chalk-2);
  box-shadow: 0 0 0 1px var(--cn-blue-dark);
}
.opt-card input:focus-visible + .opt-card__body{ outline:2px solid var(--cn-blue-dark); outline-offset:2px; }
.opt-card__label{ font-weight:700; color: var(--cn-text); display:flex; align-items:center; gap:9px; }
.opt-card__label svg{ color: var(--cn-blue-dark); flex-shrink:0; }
.opt-card__note{ font-size:.88rem; color: var(--cn-muted); }
.opt-card__fee{ font-weight:700; color: var(--cn-accent-text); font-family: var(--cn-mono); font-size:1.05rem; margin-top:auto; }
.field-optional{ color: var(--cn-muted); font-weight:400; font-size:.9em; }

/* Estimate summary */
.summary-list{ border:1px solid var(--cn-border); border-radius: var(--cn-radius-sm); overflow:hidden; }
.summary-list .row{ display:flex; justify-content:space-between; gap:20px; padding:16px 24px; border-bottom:1px solid var(--cn-border); }
.summary-list .row:last-child{ border-bottom:none; }
.summary-list .row span{ color: var(--cn-muted); }
.summary-list .row strong{ color: var(--cn-text); text-align:right; }
.summary-list .row.is-group{ background: var(--cn-chalk); font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color: var(--cn-muted); padding:11px 24px; }
.summary-list .row.total{ background: var(--cn-amber-soft); }
.summary-list .row.total strong{ color: var(--cn-accent-text); font-size:1.25rem; font-family: var(--cn-mono); }
.summary-list--done{ text-align:left; margin-top:8px; }

/* An estimate is not an invoice. This disclaimer is a legal necessity for a
   C&F desk — assessed duty is the customs officer's call, not ours. */
.estimate-note{
  display:flex; align-items:flex-start; gap:14px; margin-top:22px;
  padding:18px 22px; border-radius: var(--cn-radius-sm);
  background: var(--cn-amber-soft); border:1px solid #FDE68A;
  font-size:.95rem; color: #78350F;
}
.estimate-note svg{ flex-shrink:0; margin-top:2px; }
.estimate-note strong{ color: #78350F; }

.quote-panel__footer{
  display:flex; justify-content:space-between; gap:16px;
  padding:26px 40px; border-top:1px solid var(--cn-border); background: var(--cn-white);
}
.quote-panel__footer .btn{ min-width:190px; }
.quote-panel__footer .spacer{ flex:1; }
/* Centred within the panel, not just centred text — the confirmation step
   is much shorter than the steps before it, so without this it sits pinned
   to the top with dead space below rather than in the middle of the card. */
.quote-panel__body[data-step="done"]{
  display:flex; flex-direction:column; justify-content:center; min-height:460px;
}
.quote-success{ text-align:center; padding: 30px 0; }
.quote-success .tick-circle{
  width:86px; height:86px; border-radius:50%; background: var(--cn-ok); color: var(--cn-white);
  display:flex; align-items:center; justify-content:center; margin:0 auto 24px;
}
.quote-ref{
  display:inline-flex; align-items:center; gap:12px; margin:0 auto 24px;
  padding:12px 22px; border-radius: var(--cn-radius-pill);
  background: var(--cn-chalk-2); color: var(--cn-text);
}
.quote-ref span{ color: var(--cn-muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; }
.quote-ref strong{ font-size:1.2rem; color: var(--cn-blue-dark); font-family: var(--cn-mono); letter-spacing:.06em; }
.quote-note{ font-size:.95rem; margin:0 auto 28px; max-width:420px; }
.quote-success .btn{ margin:0 auto; }

/* =====================================================
   20. CONSIGNMENT TRACKING
===================================================== */
.tracking-form-card{
  background: var(--cn-white); border:1px solid var(--cn-border);
  border-radius: var(--cn-radius); padding:38px 40px; max-width:720px; margin:0 auto;
}
.tracking-form{ display:flex; gap:14px; align-items:stretch; }
.tracking-form input{ flex:1; min-width:0; }
.tracking-form .btn{ flex-shrink:0; }
.tracking-form-card .form-feedback{ text-align:center; }

/* A slim tracking box that lives in the hero. */
.tracking-inline{
  display:flex; gap:12px; margin-top:34px; padding:12px;
  background: var(--cn-white); border:1px solid var(--cn-border);
  border-radius: var(--cn-radius-pill); max-width:520px;
}
.tracking-inline input{
  flex:1; min-width:0; border:none; background:transparent; color: var(--cn-text);
  padding:12px 20px; border-radius: var(--cn-radius-pill);
}
.tracking-inline input::placeholder{ color: var(--cn-muted); }
.tracking-inline input:focus{ outline:none; box-shadow:none; }

.tracking-result{
  max-width:860px; margin:44px auto 0; background: var(--cn-white);
  border:1px solid var(--cn-border); border-radius: var(--cn-radius); overflow:hidden;
}
.tracking-result__head{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:28px 32px; background: var(--cn-chrome); color: var(--cn-muted); border-bottom:1px solid var(--cn-border);
}
.tracking-result__ref{ display:block; font-family: var(--cn-mono); font-size:1.3rem; font-weight:700; color: var(--cn-navy); letter-spacing:.05em; }
.tracking-result__label{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color: var(--cn-accent-text); font-weight:700; margin-bottom:5px; }
.tracking-result__facts{
  display:grid; grid-template-columns: repeat(4,1fr);
  border-bottom:1px solid var(--cn-border);
}
.tracking-result__facts > div{ padding:22px 26px; border-right:1px solid var(--cn-border); }
.tracking-result__facts > div:last-child{ border-right:none; }
.tracking-result__facts dt{ font-size:.7rem; text-transform:uppercase; letter-spacing:.11em; font-weight:700; color: var(--cn-accent-text); margin-bottom:7px; }
.tracking-result__facts dd{ margin:0; font-weight:700; color: var(--cn-text); font-size:1rem; }
.tracking-result__body{ padding:32px; }

/* Milestone timeline — from Bill of Entry to gate-out.

   The dot and the rail are positioned in two different containing blocks: the
   rail is absolute inside .timeline, each dot is absolute inside its own
   .timeline__item, which starts one padding-left in. Hardcoding both left
   offsets is how they drifted 7px apart. Both are now derived from these two
   values, so the dot sits on the rail's axis by construction. */
.timeline{
  --cn-tl-dot: 24px;   /* dot diameter, border included (border-box) */
  --cn-tl-gap: 20px;   /* clear space between dot and text */
  --cn-tl-rail: 2px;
  position:relative;
  padding-left: calc(var(--cn-tl-dot) + var(--cn-tl-gap));
}
.timeline::before{
  content:""; position:absolute; top:8px; bottom:8px;
  left: calc(var(--cn-tl-dot) / 2 - var(--cn-tl-rail) / 2);
  width: var(--cn-tl-rail);
  background: var(--cn-border);
}
.timeline__item{ position:relative; padding-bottom:28px; }
.timeline__item:last-child{ padding-bottom:0; }
.timeline__item::before{
  content:""; position:absolute; top:6px; z-index:1;
  /* Back out the parent's padding to land on the timeline's own left edge. */
  left: calc(-1 * (var(--cn-tl-dot) + var(--cn-tl-gap)));
  width: var(--cn-tl-dot); height: var(--cn-tl-dot); border-radius:50%;
  background: var(--cn-white); border:2px solid var(--cn-border);
}
.timeline__item.is-done::before{ background: var(--cn-ok); border-color: var(--cn-ok); }
.timeline__item.is-current::before{
  background: var(--cn-amber); border-color: var(--cn-amber);
  box-shadow: 0 0 0 5px rgba(245,158,11,.22);
}
.timeline__when{
  display:block; font-family: var(--cn-mono); font-size:.82rem;
  color: var(--cn-muted); margin-bottom:4px;
}
.timeline__title{ display:block; font-weight:700; color: var(--cn-text); font-size:1.08rem; margin-bottom:4px; }
.timeline__item.is-pending .timeline__title{ color: var(--cn-muted); font-weight:600; }
.timeline__note{ font-size:.95rem; margin:0; }

/* Demurrage free-time meter — the number that costs importers real money. */
.freetime{ margin-top:30px; padding:24px 26px; border:1px solid var(--cn-border); border-radius: var(--cn-radius-sm); background: var(--cn-chalk); }
.freetime__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:14px; }
.freetime__head strong{ color: var(--cn-text); }
.freetime__days{ font-family: var(--cn-mono); font-weight:700; color: var(--cn-text); }
.freetime__bar{ height:10px; border-radius: var(--cn-radius-pill); background: var(--cn-border); overflow:hidden; }
.freetime__fill{ height:100%; border-radius: var(--cn-radius-pill); background: var(--cn-ok); transition: width .6s ease; }
.freetime__fill.is-warn{ background: var(--cn-amber); }
.freetime__fill.is-alert{ background: var(--cn-alert); }
.freetime__note{ margin:12px 0 0; font-size:.9rem; }

/* =====================================================
   21. FOOTER
===================================================== */
/* --cn-chrome-2, not --cn-chrome — the footer needs to read as its own,
   deeper band, not a repeat of the header directly above the page. Its text
   and dividers use the *-deep variants of the muted/border tokens: --cn-muted
   and --cn-border are tuned for the near-white chalk/chrome surfaces and
   read as faded — under 4.5:1 and barely darker than the background at all,
   respectively — on this deeper one. */
.site-footer{ background: var(--cn-chrome-2); color: var(--cn-muted-deep); padding-top: 90px; border-top:1px solid var(--cn-border-deep); }
.footer-top{
  display:grid; grid-template-columns: 1.5fr 1fr 1.15fr 1.3fr; gap:44px;
  padding-bottom:70px;
}
.footer-widget .widget-title, .footer-widget h3{ color: var(--cn-navy); margin-bottom:26px; font-size:1.4rem; }
.footer-widget ul li{ margin-bottom:14px; }
.footer-widget a:hover{ color: var(--cn-blue-dark); }
/* The page currently open, inside Footer Quick Links — wp_nav_menu() adds
   this class itself; every other nav in the theme marks its current item,
   this one didn't. */
.footer-widget .current-menu-item > a,
.footer-widget .current-menu-ancestor > a{ color: var(--cn-navy); font-weight:700; }
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:14px; font-size:1.7rem; font-weight:800; color: var(--cn-text); letter-spacing:-.025em; }
.footer-brand svg{ color: var(--cn-navy); }
.footer-brand .accent{ color: var(--cn-logo-gold); }
.footer-full-name{ margin:0 0 14px; font-size:17px; font-weight:700; line-height:1.5; color: var(--cn-text); }
.footer-brand .custom-logo-link{ display:inline-block; line-height:0; }
.footer-brand .custom-logo{ max-height:96px; width:auto; }
.footer-contact li{ display:flex; align-items:flex-start; gap:14px; }
.footer-contact li svg{ color: var(--cn-navy); flex-shrink:0; margin-top:5px; }
.footer-licence{
  margin-top:22px; padding-top:20px; border-top:1px solid var(--cn-border-deep);
  font-size:.9rem;
}
.footer-licence strong{ display:block; color: var(--cn-text); font-family: var(--cn-mono); letter-spacing:.04em; }
.footer-socials{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.footer-socials a{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--cn-white); border:1px solid var(--cn-border-deep);
  color: var(--cn-navy); transition: all .22s ease;
}
.footer-socials a:hover,
.footer-socials a:focus-visible{
  background: var(--cn-navy); border-color: var(--cn-navy);
  color: var(--cn-white); transform: translateY(-3px);
}
.newsletter-form{
  display:flex; align-items:center; border:1px solid var(--cn-border-deep);
  border-radius: var(--cn-radius-sm); overflow:hidden; margin-top:18px; background: var(--cn-white);
}
.newsletter-form input{
  flex:1; border:none; background:transparent; color: var(--cn-text);
  padding:17px 20px; border-radius:0;
}
.newsletter-form input::placeholder{ color: var(--cn-muted); }
.newsletter-form input:focus{ outline:none; box-shadow:none; }
.newsletter-form button{
  background:transparent; border:none; border-left:1px solid var(--cn-border-deep);
  color: var(--cn-navy); font-weight:700; padding:17px 24px; cursor:pointer; transition: all .2s ease;
}
.newsletter-form button:hover{ background: var(--cn-navy); color: var(--cn-white); }
.footer-bottom{
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:30px 0; border-top:1px solid var(--cn-border-deep); font-size:.98rem; flex-wrap:wrap;
  text-align:center;
}
.footer-bottom .brand{ color: var(--cn-navy); font-weight:700; }
.footer-powered-by{ margin:0; color: var(--cn-muted-deep); font-size:.9rem; }
.footer-legal__list{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap;
}
/* Thin rule between the links. Sits on the item rather than between them via
   ::before on all-but-first, so a wrapped row never starts with a stray bar. */
.footer-legal__list li + li{ border-left:1px solid var(--cn-border-deep); padding-left:18px; }
.footer-legal__list a{ color: var(--cn-muted-deep); }
.footer-legal__list a:hover,
.footer-legal__list a:focus-visible{ color: var(--cn-blue-dark); }
/* A quiet divider between the copyright and the legal links, dropped when
   they wrap onto separate lines. */
@media (min-width:783px){
  .footer-bottom{ justify-content:space-between; }
  .footer-bottom > p{ margin-right:auto; }
}

/* =====================================================
   22. BLOG / ARCHIVE / SINGLE / WIDGETS
===================================================== */
.content-area{ padding: 90px 0; }
.content-area .container{ display:grid; grid-template-columns: 1fr; gap:50px; }
.content-area.has-sidebar .container{ grid-template-columns: minmax(0,1fr) 340px; }
/* Sticky sidebar. `align-self:start` is what makes it work: as a grid item it
   otherwise stretches to the article's full height, leaving sticky nothing to
   travel within.

   `top` is set by initStickySidebar(): a short sidebar pins below the header,
   while one taller than the viewport gets a negative top so it scrolls along
   with the page and pins only once its end is in view — no inner scrollbar
   hiding half the widgets. The value here is the no-JS fallback. */
.sidebar-column{
  align-self:start;
  position:sticky;
  top: calc(var(--cn-header-h) + 20px);
}
.sidebar-column .widget:last-child{ margin-bottom:0; }
article.entry{ margin-bottom:50px; }
article.entry .entry-thumb{ border-radius: var(--cn-radius); overflow:hidden; margin-bottom:30px; }
article.entry .entry-meta{ font-size:.82rem; color: var(--cn-accent-text); font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
article.entry .entry-meta .sep{ margin:0 8px; opacity:.55; }
.entry-meta__read{ display:inline-flex; align-items:center; gap:6px; }
.entry-meta__read svg{ flex-shrink:0; }
.entry-content > *{ margin-bottom:1.2em; }
/* Heading margins are relative to the heading's own size, so at the h2 display
   size 1.5em was ~72px above and ~58px below — far too airy for a long prose
   page. Tie the heading to the text it introduces instead. */
.entry-content h2,
.entry-content h3,
.entry-content h4{ margin-top:.7em; margin-bottom:.4em; }
.entry-content > *:first-child{ margin-top:0; }
.entry-content ul, .entry-content ol{ padding-left:1.4em; list-style: disc; }
.entry-content ol{ list-style: decimal; }
.entry-content li{ margin-bottom:.5em; }
.entry-content blockquote{
  border-left:4px solid var(--cn-amber); padding:20px 28px; margin-left:0;
  font-style:italic; color: var(--cn-text); background: var(--cn-chalk-2);
  border-radius: 0 var(--cn-radius-sm) var(--cn-radius-sm) 0;
}
.entry-content img{ border-radius: var(--cn-radius); }
.entry-content a{ color: var(--cn-blue-dark); text-decoration: underline; }
/* Duty and tariff tables are a staple of C&F writing and they overflow on a
   phone. Scroll the table, never the page. */
.entry-content table{ width:100%; border-collapse:collapse; font-size:.98rem; }
.entry-content table th,
.entry-content table td{ padding:12px 16px; border:1px solid var(--cn-border); text-align:left; }
.entry-content table th{ background: var(--cn-chalk-2); color: var(--cn-text); font-weight:700; }
.entry-content .wp-block-table{ overflow-x:auto; }

.pagination{ display:flex; gap:10px; margin-top:40px; flex-wrap:wrap; }
.pagination a,.pagination span{
  padding:12px 18px; border-radius:10px; background: var(--cn-white);
  border:1px solid var(--cn-border); color: var(--cn-text); font-weight:700;
}
.pagination .current{ background: var(--cn-navy); color: var(--cn-white); border-color: var(--cn-navy); }
.pagination a:hover{ border-color: var(--cn-blue); color: var(--cn-blue-dark); }

.widget{ background: var(--cn-white); border-radius: var(--cn-radius); padding:32px; margin-bottom:28px; border:1px solid var(--cn-border); }
.widget-title{ font-size:1.22rem; margin-bottom:20px; }

/* Categories with counts */
.cat-list{ display:grid; gap:2px; }
.cat-list a{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--cn-border);
  font-weight:600; color: var(--cn-text); transition: color .2s ease;
}
.cat-list li:last-child a{ border-bottom:none; }
.cat-list a:hover,
.cat-list a.is-current{ color: var(--cn-blue-dark); }
.cat-list__count{
  flex-shrink:0; min-width:28px; padding:2px 9px; border-radius: var(--cn-radius-pill);
  background: var(--cn-chalk-2); color: var(--cn-muted);
  font-size:.76rem; font-weight:700; text-align:center;
}
.cat-list a:hover .cat-list__count,
.cat-list a.is-current .cat-list__count{ background: var(--cn-navy); color: var(--cn-white); }

/* Trending posts */
.trending-list{ display:grid; gap:18px; }
.trending-list a{ display:flex; align-items:flex-start; gap:14px; }
.trending-list__thumb{
  flex-shrink:0; width:70px; height:70px; border-radius: var(--cn-radius-sm);
  overflow:hidden; background: var(--cn-chalk-2);
}
.trending-list__thumb img{ width:100%; height:100%; object-fit:cover; }
.trending-list__body{ display:block; }
.trending-list__title{
  display:block; font-weight:600; font-size:.97rem; line-height:1.35;
  color: var(--cn-text); transition: color .2s ease;
}
.trending-list a:hover .trending-list__title{ color: var(--cn-blue-dark); }
.trending-list__meta{ display:block; margin-top:6px; font-size:.82rem; color: var(--cn-muted); }
.trending-list__meta .sep{ margin:0 6px; opacity:.55; }

.widget--search .search-form{ display:flex; gap:8px; }
.widget--search .search-form input[type="search"]{ flex:1; min-width:0; }
.widget ul li{ margin-bottom:14px; padding-bottom:14px; border-bottom:1px dashed var(--cn-border); }
.widget ul li:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.widget a:hover{ color: var(--cn-blue-dark); }
/* The tracking widget is the one a returning importer wants in the sidebar. */
.widget--tracking{ background: var(--cn-chrome); border-color: var(--cn-border); }
.widget--tracking .widget-title{ color: var(--cn-navy); }
.widget--tracking p{ color: var(--cn-muted); font-size:.95rem; }

.comments-area{ margin-top:60px; }
.comments-title{ margin-bottom:26px; }
.comment-list{ list-style:none; margin:0; padding:0; }
.comment-list .children{ list-style:none; padding-left:40px; }
.comment-body{ background: var(--cn-white); border-radius: var(--cn-radius-sm); padding:26px; margin-bottom:20px; border:1px solid var(--cn-border); }
.comment-respond input,.comment-respond textarea{ margin-bottom:16px; }
.comment-reply-link{ font-weight:700; color: var(--cn-blue-dark); font-size:.9rem; }

.error-404{ text-align:center; padding:130px 0; }
.error-404 .code-404{ font-size:9rem; font-weight:800; color: var(--cn-amber); line-height:1; letter-spacing:-.04em; margin:0 0 10px; font-family: var(--cn-mono); }
.search-form{ display:flex; gap:12px; }
.search-form input{ flex:1; border-radius: var(--cn-radius-pill); }

/* WP core alignment classes */
.alignwide{ max-width:1100px; margin-left:auto; margin-right:auto; }
.alignfull{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); }
.aligncenter{ margin-left:auto; margin-right:auto; }
.alignleft{ float:left; margin: 0 24px 20px 0; }
.alignright{ float:right; margin: 0 0 20px 24px; }
.wp-caption-text, figcaption{ font-size:.9rem; color: var(--cn-muted); text-align:center; margin-top:10px; }
.sticky .entry-title::after{ content:" ★"; color: var(--cn-amber); }

/* Reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  /* Open and close instantly rather than easing. */
  .accordion__panel,
  .accordion__panel > p,
  .main-navigation .sub-menu{ transition:none; }
  .accordion__panel > p{ opacity:1; }
  html{ scroll-behavior:auto; }
  /* No auto-scroll — let people swipe through instead. */
  .testimonial-marquee__track{ animation:none !important; }
  .testimonial-marquee{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .freetime__fill{ transition:none; }
}

/* Contact map (opt-in via Customizer) */
.contact-map{ border-radius: var(--cn-radius); overflow:hidden; line-height:0; }
.contact-map iframe{ width:100%; height:400px; border:0; display:block; }
/* Full-bleed map band — sits outside any .container, edge to edge. */
.contact-map--full{ border-radius:0; display:block; }
.contact-map--full iframe{ height:460px; }

/* =====================================================
   23. RESPONSIVE
===================================================== */
@media (max-width:1200px){
  .team-grid{ grid-template-columns: repeat(3,1fr); }
  .tracking-result__facts{ grid-template-columns: repeat(2,1fr); }
  .tracking-result__facts > div:nth-child(2n){ border-right:none; }

  /* ---- The desktop nav gives way to the off-canvas drawer here ----
     Not a taste call: .container caps at --cn-container, so the header row
     has a fixed budget (1232px at any width above ~1330px) that branding,
     the nav and the CTA button all have to share. Below this width there is
     not enough room, and the old build overflowed it and scrolled the whole
     document sideways. See --cn-nav-collapse in section 0. */
  :root{ --cn-header-h: 84px; }
  .menu-toggle{ display:flex; }

  /* ---- Off-canvas navigation drawer ----
     Three rows: fixed head (logo + close), scrolling menu, fixed foot
     (the two CTAs). Only the middle row scrolls. */
  .nav-drawer__backdrop{
    display:block;
    position:fixed; inset:0; z-index:998;
    background: rgba(15,23,42,.6); backdrop-filter: blur(2px);
    opacity:0; transition: opacity .3s ease;
  }
  .nav-drawer__backdrop:not([hidden]){ opacity:1; }

  .main-navigation{
    display:flex; flex-direction:column;
    position:fixed; top:0; right:0; z-index:999;
    width: min(360px, 88vw);
    /* Dynamic viewport unit keeps the foot above mobile browser chrome. */
    height:100dvh; max-height:100dvh;
    background: var(--cn-white);
    box-shadow: -18px 0 44px rgba(15,23,42,.16);
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    overscroll-behavior: contain;
  }
  .site-header.is-open .main-navigation{ transform:none; }

  .nav-drawer__head{
    flex:0 0 auto;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:18px 20px; border-bottom:1px solid var(--cn-border);
  }
  .nav-drawer__brand a{ display:flex; align-items:center; gap:10px; color: var(--cn-text); font-weight:800; font-size:1.2rem; }
  .nav-drawer__brand svg{ color: var(--cn-navy); }
  .nav-drawer__brand .accent{ color: var(--cn-logo-gold); }
  .nav-drawer__brand img{ max-height:42px; width:auto; }
  .nav-drawer__close{
    flex-shrink:0; width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background: var(--cn-chalk-2); border:1px solid var(--cn-border);
    color: var(--cn-text); cursor:pointer; transition: all .22s ease;
  }
  .nav-drawer__close:hover,
  .nav-drawer__close:focus-visible{ background: var(--cn-navy); border-color: var(--cn-navy); color: var(--cn-white); }

  /* The only scrolling region. */
  .nav-drawer__body{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 20px 20px; }

  .main-navigation ul{ flex-direction:column; align-items:stretch; gap:2px; }
  /* Desktop nav links are nowrap so the row never breaks mid-label. In the
     drawer that is backwards: the column is ~360px and the longest service
     names ("Air Freight & Air Cargo Complex Handling") were being clipped at
     the edge rather than wrapping onto a second line. */
  .main-navigation a:not(.btn){ white-space:normal; color: var(--cn-text); }
  .main-navigation .menu > li{ border-bottom:1px solid var(--cn-border); }
  .main-navigation .menu > li > a{ padding:14px 0; font-size:1.05rem; }
  .main-navigation .menu-item-has-children{ position:relative; }
  .main-navigation .menu-item-has-children > a{ padding-right:48px; }
  .main-navigation .menu-item-has-children > a::after{ display:none; } /* .nav-sub-toggle replaces it */

  /* Submenu toggle — a real button, so the parent link stays navigable. */
  .nav-sub-toggle{
    position:absolute; top:6px; right:-6px; width:40px; height:40px;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:none; color: var(--cn-muted);
    cursor:pointer; transition: transform .25s ease, color .2s ease;
  }
  .nav-sub-toggle:hover,
  .nav-sub-toggle:focus-visible{ color: var(--cn-blue-dark); }
  .menu-item-has-children.is-open > .nav-sub-toggle{ transform: rotate(180deg); color: var(--cn-blue-dark); }

  /* Same problem as the accordion, same shape of fix. This used to run
     max-height 0 -> 70vh: a submenu shorter than 70vh finished early and the
     rest of the duration did nothing, which reads as opening fast then
     stalling. --cn-sub-h is set to the submenu's real scrollHeight by
     initMenu(), so the easing matches the content. */
  .main-navigation .sub-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    background:transparent; box-shadow:none; min-width:0;
    display:block; padding:0 0 0 14px; margin:0;
    max-height:0; overflow:hidden;
    transition: max-height .32s cubic-bezier(.4,0,.2,1);
  }
  .menu-item-has-children.is-open > .sub-menu{ max-height: var(--cn-sub-h, 70vh); }
  .main-navigation .sub-menu li{ border:none; }
  .main-navigation .sub-menu a{ color: var(--cn-muted); padding:10px 0; font-size:1rem; }
  .main-navigation .sub-menu a:hover{ background:transparent; color: var(--cn-blue-dark); }

  /* Pinned to the bottom, never scrolls away. */
  .nav-drawer__foot{
    flex:0 0 auto;
    display:flex; flex-direction:column; gap:10px;
    padding:16px 20px calc(16px + env(safe-area-inset-bottom));
    border-top:1px solid var(--cn-border);
    background: var(--cn-chalk-2);
  }
  .nav-drawer__foot .btn{ display:flex; width:100%; padding:14px 20px; font-size:.95rem; }

  body.nav-open{ overflow:hidden; }
}
@media (max-width:1024px){
  .section{ padding:72px 0; }
  .about-section .container,.contact-section .container,
  .cta-band .container,.service-single .container,.quote-cta,
  .quote-wrap .container,.content-area.has-sidebar .container,
  .who-we-are .container,.branch-card{ grid-template-columns:1fr; }
  /* The copy now sits on top of the same background photo full-width
     instead of beside it, so the light left-to-right fade (which assumed
     the photo stayed clear under the copy) is replaced with a fuller, dark
     scrim across the whole image — and every text colour that assumed a
     light --cn-chrome surface underneath switches to a light colour for
     legibility against it. */
  .hero{ padding:64px 0; }
  .hero-bg::before{
    background: linear-gradient(180deg, rgba(11,31,58,.82) 0%, rgba(11,31,58,.7) 100%);
  }
  .hero-copy{ max-width:none; }
  .hero-eyebrow,.hero h1{ color: var(--cn-white); }
  .hero p.lead{ color: rgba(248,250,252,.82); }
  /* The gateway items are solid white cards regardless of surface (see
     section 6 above), so their own icon/label/name colours stay dark —
     only the hero's own bare text needs the light-on-dark override here. */
  .hero-actions .play-link{ color: var(--cn-white); }
  /* .btn-outline-dark's navy border/text (correct on the light --cn-chrome
     surface) disappears against this scrim — the dark hero needs its own
     light outline, hovering to a solid white fill per the "buttons hover to
     their own colour" convention. */
  .hero-actions .btn-outline-dark{ border-color: var(--cn-white); color: var(--cn-white); }
  .hero-actions .btn-outline-dark:hover,
  .hero-actions .btn-outline-dark:focus-visible{ background: var(--cn-white); border-color: var(--cn-white); color: var(--cn-navy); }
  .sidebar-column{ position:static; top:auto; }
  .services-grid,.industries-grid,.testimonial-grid,.blog-grid,
  .feature-strip .grid,.team-grid,.team-grid--3,.info-cards{ grid-template-columns:repeat(2,1fr); }
  .process-grid{ grid-template-columns:repeat(2,1fr); }
  .process-cell:nth-child(2n){ border-right:none; }
  .process-cell:not(:last-child)::after{ display:none; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .service-facts{ grid-template-columns:1fr; }
  .service-facts > div{ border-right:none; border-bottom:1px solid var(--cn-border); }
  .service-facts > div:last-child{ border-bottom:none; }
  .footer-top{ grid-template-columns:repeat(2,1fr); }
  .service-sidebar,.quote-steps{ position:static; }
  .quote-cta{ padding:48px 40px; gap:36px; }
  /* already --cn-radius at every width; nothing to override here */
  .contact-map--full iframe{ height:380px; }
}


@media (max-width:782px){
  body{ font-size:17px; }
  /* The announcement strip wraps to three lines on a phone and pushes the
     header down before anything useful is on screen. The number it carries
     is one tap away in the drawer. */
  .topbar{ display:none; }
  /* On a phone the toggle and the brand are enough; the CTA is the first
     thing in the drawer. Kept visible on tablets, where it still fits. */
  .header-cta .btn{ display:none; }
  .services-grid,.industries-grid,.testimonial-grid,.blog-grid,
  .feature-strip .grid,.footer-top,.process-grid,.checklist--2col,.form-row,
  .form-row--3,.team-grid,.team-grid--3,.info-cards,.stats-grid,
  .tracking-result__facts,.who-we-are__media{ grid-template-columns:1fr; }
  .posts-column .blog-grid{ grid-template-columns:1fr; }
  .process-cell{ border-right:none; border-bottom:1px solid var(--cn-border); }
  .tracking-result__facts > div{ border-right:none; border-bottom:1px solid var(--cn-border); }
  .tracking-result__facts > div:last-child{ border-bottom:none; }
  .who-we-are__img--tall{ grid-row:auto; aspect-ratio:1/1; border-radius: var(--cn-radius); }
  .who-we-are__img--wide{ grid-column:auto; }
  .branch-card{ padding:24px; gap:24px; }
  .quote-cta{ padding:38px 26px; border-radius: var(--cn-radius); }
  .quote-cta__actions .btn{ width:100%; }
  .service-card{ border-right:none; }
  .quote-panel__body,.quote-panel__footer{ padding:26px 22px; }
  .quote-panel__footer{ flex-direction:column-reverse; }
  .quote-panel__footer .btn{ width:100%; }
  .deco-arch,.deco-blob{ display:none; }
  .feature-strip .cell,.process-cell{ padding:40px 28px; }
  .hero-bg .float-card{ left:16px; bottom:16px; }
  .tracking-form{ flex-direction:column; }
  .tracking-form-card{ padding:28px 22px; }
  .tracking-inline{ flex-direction:column; border-radius: var(--cn-radius); }
  .tracking-inline .btn{ width:100%; }
  .tracking-result__head,.tracking-result__body{ padding:24px 22px; }
  .contact-map--full iframe{ height:300px; }
  .stats-grid{ gap:38px; }
}

/* =====================================================
   23b. reCAPTCHA
===================================================== */
/* Badge hidden site-wide; the notice in the form footer carries the required
   attribution instead. */
.grecaptcha-badge{
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.recaptcha-notice{ font-size:.8rem; color: var(--cn-muted); margin-top:14px; }
.recaptcha-notice a{ color: var(--cn-blue-dark); text-decoration:underline; }

/* =====================================================
   24. BACK TO TOP
===================================================== */
.back-to-top{
  position:fixed; right:26px; bottom:26px; z-index:90;
  width:50px; height:50px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--cn-navy); color: var(--cn-white);
  border:2px solid var(--cn-white); cursor:pointer;
  box-shadow: var(--cn-shadow-lg);
  opacity:0; transform: translateY(12px);
  transition: opacity .28s ease, transform .28s ease, background .22s ease, color .22s ease;
  /* Not clickable until it has actually faded in. */
  pointer-events:none;
}
.back-to-top.is-visible{ opacity:1; transform:none; pointer-events:auto; }
/* Hover darkens rather than emptying out — a transparent fill would leave the
   chevron unreadable on whichever section happens to be behind it. */
.back-to-top:hover,
.back-to-top:focus-visible{ background: var(--cn-blue-dark); color: var(--cn-white); }
.back-to-top:focus-visible{ outline:2px solid var(--cn-navy); outline-offset:3px; }

/* Sits above the sticky drawer CTAs on phones, and out of the way entirely
   while the navigation drawer is open. */
@media (max-width:782px){
  .back-to-top{ right:18px; bottom:18px; width:44px; height:44px; }
  body.nav-open .back-to-top{ opacity:0; pointer-events:none; }
}

@media (prefers-reduced-motion: reduce){
  .back-to-top{ transition: opacity .01s linear; transform:none; }
}

/* Admin-only "edit this in the Customizer" affordance — see
   cnfb_customizer_edit_link(). Never shown to a visitor. */
.cnfb-admin-edit{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:18px;
  padding:7px 14px; border-radius: var(--cn-radius-pill);
  background: var(--cn-amber-soft); color: var(--cn-accent-text);
  font-size:.8rem; font-weight:700;
}
.cnfb-admin-edit:hover{ background: var(--cn-amber-hover); color: var(--cn-white); }

/* AJAX catalogue filter (Services / Industries archives). A fade rather than
   a snap swap while the request is in flight — see initModeFilter(). */
.cnfb-catalogue{ transition: opacity .2s ease; }

/* =====================================================
   24. ULTRA-WIDE SCREENS
   --cn-container stays a fixed 1280px up to this point on purpose (see the
   note by its declaration) — but on a 1680px+ or 1920px+ monitor that leaves
   the header's logo, nav and CTA stranded in a narrow band with a huge idle
   margin either side, reading as cramped rather than spacious. Widening the
   container only above the nav-collapse breakpoint is safe: it cannot
   reintroduce the overflow that fixed budget was guarding against.
===================================================== */
@media (min-width:1680px){
  :root{ --cn-container: 1440px; }
}
.cnfb-catalogue.is-loading{ opacity:.45; pointer-events:none; }