/* ==========================================================================
   PLUZ LOGISTICS — pluz.css
   Hand-written. No framework, no build step, no preprocessor.

   Every colour, size, radius and spacing value is a custom property on
   :root. Nothing below section 2 contains a hard-coded hex. Fluid type is
   clamp(), not a stack of breakpoint overrides. All media queries live in
   section 15 at the end of the file.

   Naming: BEM-lite — block, block__element, block--modifier, one level of
   nesting only. State is a separate .is-* class. JS hooks are data-*
   attributes and never classes, so CSS stays purely presentational.

   01  RESET
   02  DESIGN TOKENS
   03  TYPOGRAPHY
   04  LAYOUT & GRID
   05  HEADER
   06  NAVIGATION
   07  BUTTONS & LINKS
   08  GLOBAL SECTION FURNITURE
   09  HOMEPAGE COMPONENTS
   10  INNER-PAGE COMPONENTS
   11  FORMS
   12  FOOTER
   13  UTILITIES
   14  MOTION
   15  RESPONSIVE
   ========================================================================== */


/* ==========================================================================
   01  RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

/* One focus ring for the whole site. Never remove it without a replacement. */
:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 3px; border-radius: var(--r-xs); }


/* ==========================================================================
   02  DESIGN TOKENS
   Ported from _reference/stitch/global_maritime_logistics/DESIGN.md (the YAML
   frontmatter, which is what the screens actually render). Two navy steps are
   sampled from the screenshots; DESIGN.md omits them. Two values are corrected
   for WCAG AA — see the notes inline.
   ========================================================================== */

:root {

  /* --- surfaces (light) --- */
  --c-canvas:         #f8f9ff;   /* page background */
  --c-white:          #ffffff;   /* text/fills on navy */
  --c-surface:        #ffffff;   /* cards */
  --c-surface-low:    #eff4ff;   /* banded sections */
  --c-surface-mid:    #e5eeff;   /* inputs, inactive chips */
  --c-surface-high:   #d3e4fe;   /* nested containers */
  --c-surface-dim:    #cbdbf5;

  /* --- navy scale (dark backdrops) --- */
  --c-navy-900:       #071322;   /* footer, CTA band        [sampled from screen.png] */
  --c-navy-800:       #0e1c2f;   /* hero, dark sections */
  --c-navy-700:       #192639;   /* cards on dark           [sampled from screen.png] */
  --c-navy-600:       #213145;
  --c-on-navy:        #bac7e1;   /* body copy on navy */
  --c-on-navy-dim:    #8b99b3;   /* muted on navy. Derived: DESIGN.md's
                                    #77849c is 4.07:1 on --c-navy-700 and fails AA. */
  --c-on-navy-bright: #eaf1ff;   /* headings on navy */

  /* --- brand blue ---
     #006ef1 is the only blue the Stitch screens render. It carries 4.67:1
     against white, so it is safe as a FILL with white text, and marginal
     (4.44:1) as TEXT on --c-canvas. Blue text therefore uses --c-blue-deep. */
  --c-blue:           #006ef1;   /* fills */
  --c-blue-deep:      #0057c1;   /* text on light (6.38:1), and hover */
  --c-blue-ink:       #004397;   /* small blue text */
  --c-blue-050:       #d9e2ff;   /* tint fills */
  --c-blue-100:       #afc6ff;

  /* --- accent. Renders nowhere in the Stitch screens; reserved for live
         status dots only, never as a general accent. --- */
  --c-teal:           #26dcdd;
  --c-teal-ink:       #009394;   /* accessible teal text */

  /* --- ink & lines --- */
  --c-ink:            #0b1c30;   /* headings */
  --c-body:           #44474c;   /* body copy */
  --c-muted:          #5b5e66;   /* labels, meta. Derived: DESIGN.md's #75777d
                                    is 4.26:1 on canvas and fails AA as text. */
  --c-line:           #c5c6cd;   /* borders */
  --c-line-soft:      #e5eeff;   /* hairlines on cards */
  --c-line-strong:    #75777d;   /* borders only — fails as text */

  /* --- status --- */
  --c-error:          #ba1a1a;
  --c-error-bg:       #ffdad6;
  --c-error-ink:      #93000a;
  --c-ok-bg:          #d7f5e4;
  --c-ok-ink:         #0d5c33;

  /* --- channels, for alpha compositing (scrims, rings, glass) --- */
  --rgb-navy-900:     7 19 34;
  --rgb-navy-800:     14 28 47;
  --rgb-blue:         0 110 241;
  --rgb-white:        255 255 255;

  /* --- type families --- */
  --f-head: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* --- type scale. Each clamp reaches its max at roughly --container, so the
         scale is settled by the time the layout stops growing. --- */
  --t-display:  clamp(36px, 4.40vw, 56px);   /* display-hero  56 → 36 */
  --t-h1:       clamp(28px, 3.15vw, 40px);   /* headline-xl   40 → 28 */
  --t-h2:       clamp(24px, 2.50vw, 32px);   /* headline-lg   32 → 24 */
  --t-h3:       clamp(19px, 1.72vw, 22px);   /* headline-md   22 */
  --t-h4:       18px;                        /* headline-sm   18 */
  --t-lead:     clamp(16px, 1.40vw, 18px);   /* body-lg       18 */
  --t-body:     15px;                        /* body-md       15 */
  --t-small:    13px;                        /* body-sm       13 */
  --t-label:    11px;                        /* label-caps    11 */
  --t-label-md: 14px;
  --t-label-sm: 12px;

  /* --- tracking --- */
  --ls-display: -0.03em;
  --ls-h1:      -0.02em;
  --ls-h2:      -0.015em;
  --ls-h3:      -0.01em;
  --ls-lead:    -0.005em;
  --ls-label:   0.08em;

  /* --- grid: ONE authoritative system. Nothing else sets page width. --- */
  --container:  1280px;
  --gutter:     clamp(16px, 4vw, 64px);
  --section:    clamp(48px, 5vw, 80px);
  --gap:        clamp(16px, 1.8vw, 24px);

  /* --- radii, per DESIGN.md's assignments --- */
  --r-xs:   4px;      /* tags, status dots */
  --r:      8px;      /* inputs, buttons, chips — the house radius */
  --r-md:   12px;     /* inner image frame */
  --r-lg:   16px;     /* cards */
  --r-xl:   24px;     /* dark showcase panels */
  --r-full: 9999px;

  /* --- elevation, re-tinted from DESIGN.md's recipes to the real navy --- */
  --shadow-flat: 0 0 0 1px var(--c-line-soft);
  --shadow-low:  0 2px 8px -2px rgb(var(--rgb-navy-800) / .05), 0 1px 2px rgb(var(--rgb-navy-800) / .03);
  --shadow-mid:  0 12px 24px -6px rgb(var(--rgb-navy-800) / .08), 0 4px 8px -2px rgb(var(--rgb-navy-800) / .03);
  --shadow-high: 0 24px 48px -12px rgb(var(--rgb-navy-800) / .16);

  /* --- motion --- */
  --ease: cubic-bezier(.4, 0, .2, 1);
}


/* ==========================================================================
   03  TYPOGRAPHY
   ========================================================================== */

body {
  background: var(--c-canvas); color: var(--c-body);
  font-family: var(--f-body); font-size: var(--t-body); line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--f-head); color: var(--c-ink); line-height: 1.2; font-weight: 700; }
h1 { font-size: var(--t-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--t-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--t-h3); letter-spacing: var(--ls-h3); font-weight: 600; }
h4 { font-size: var(--t-h4); font-weight: 600; }

strong, b { font-weight: 600; color: var(--c-ink); }
/* ...but only on light surfaces. An element-level colour beats one inherited
   from a dark container, so every dark context must hand strong/b back to
   inheritance or the text renders navy-on-navy and disappears. */
.section--dark strong, .section--dark b,
.hero strong, .hero b,
.page-head strong, .page-head b,
.cta-band strong, .cta-band b,
.quote-panel strong, .quote-panel b,
.mv strong, .mv b,
.office__head strong, .office__head b,
.site-footer strong, .site-footer b { color: inherit; }
::selection { background: var(--c-blue-050); color: var(--c-ink); }

/* Kicker above a heading. Always a <p>, never a heading — it must not
   pollute the document outline. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-family: var(--f-head); font-size: var(--t-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-blue-deep);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: currentColor; }

.lead { font-size: var(--t-lead); letter-spacing: var(--ls-lead); line-height: 1.7; color: var(--c-muted); }

/* Editorial measure. DESIGN.md locks body copy to 58–68 characters. */
.prose { max-width: 68ch; }
.prose p + p { margin-top: 1em; }
.prose a { color: var(--c-blue-deep); text-decoration: underline; text-underline-offset: 2px; }


/* ==========================================================================
   04  LAYOUT & GRID
   ========================================================================== */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 920px; }
.container--mid    { max-width: 1100px; }

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .62); }
.section--flush-top { padding-top: 0; }
.section--alt  { background: var(--c-surface-low); }

/* Dark sections re-point the text roles rather than restating colours
   on every child. */
.section--dark { background: var(--c-navy-800); color: var(--c-on-navy); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--c-on-navy-bright); }
.section--dark .lead { color: var(--c-on-navy); }
.section--dark .eyebrow { color: var(--c-blue-100); }

/* One section-header alignment everywhere: eyebrow + h2 + optional lead on
   the left, optional action on the right, baseline-aligned, wrapping. */
.section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: clamp(24px, 2.6vw, 40px);
}
.section__head-text { max-width: 640px; }
.section__head--center { justify-content: center; text-align: center; }
.section__head--center .section__head-text { max-width: 720px; }
.section__head--center .eyebrow { justify-content: center; }

/* Grids are declared per component, not via a column system. These three
   cover the common cases. */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.split--wide-left  { grid-template-columns: 1.15fr .85fr; }
.split--wide-right { grid-template-columns: .85fr 1.15fr; }
.split--top { align-items: start; }
/* 2:1 — the Stitch page-head grid (col-span-8 / col-span-4). */
.split--2-1 { grid-template-columns: 2fr 1fr; }
.split--end { align-items: end; }
.split__media img { width: 100%; border-radius: var(--r-lg); }


/* ==========================================================================
   05  HEADER
   Static HTML in all 15 pages. Not injected by JS — crawlers and answer
   engines that do not execute JS must still see the full navigation.
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgb(var(--rgb-white) / .96); backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid transparent; transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-low); border-bottom-color: var(--c-line-soft); }

.masthead__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }

/* Brand lockup. The real Pluz logo is still outstanding (QUESTIONS.md #4), so
   this is a mark + wordmark built from type. Swapping in a supplied logo is a
   one-element change in each of the 15 files. */
.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand__mark { height: clamp(34px, 3.4vw, 42px); width: auto; border-radius: var(--r); }
.brand__text { font-family: var(--f-head); font-size: clamp(15px, 1.5vw, 18px); font-weight: 600; letter-spacing: .09em; color: var(--c-ink); white-space: nowrap; }
.brand__text b { font-weight: 800; color: inherit; }
.brand--footer .brand__text { color: var(--c-white); }

.masthead__actions { display: flex; align-items: center; gap: 12px; }


/* ==========================================================================
   06  NAVIGATION
   The structural reference is single-level. Pluz needs a Services dropdown
   listing all six service pages, so that is built here rather than borrowed.
   ========================================================================== */

.nav__list { display: flex; align-items: center; gap: 4px; }

.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: var(--r);
  font-family: var(--f-head); font-size: var(--t-label-md); font-weight: 500; color: var(--c-ink);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav__link:hover { color: var(--c-blue-deep); background: var(--c-surface-low); }
.nav__link[aria-current="page"] { color: var(--c-blue-deep); font-weight: 600; }
.nav__link svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }

.nav__item { position: relative; }

.nav__dropdown {
  position: absolute; left: 50%; top: calc(100% + 10px); width: 300px; padding: 8px;
  background: var(--c-surface); border: 1px solid var(--c-line-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow-high);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s var(--ease);
}
/* Bridges the gap between trigger and panel so the pointer can cross it. */
.nav__dropdown::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }

.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown,
.nav__item.is-open .nav__dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav__item:hover > .nav__link svg,
.nav__item.is-open > .nav__link svg { transform: rotate(180deg); }

.nav__dropdown a {
  display: block; padding: 11px 14px; border-radius: var(--r);
  font-family: var(--f-head); font-size: var(--t-label-md); font-weight: 500; color: var(--c-ink);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav__dropdown a:hover, .nav__dropdown a[aria-current="page"] { background: var(--c-surface-low); color: var(--c-blue-deep); }

/* Burger. The three bars morph to an X purely off aria-expanded, so the
   visual state can never drift from the announced state. */
.nav-toggle { display: none; width: 46px; height: 46px; border: 1px solid var(--c-line); border-radius: var(--r); padding: 0; place-items: center; }
.nav-toggle span { display: block; width: 20px; height: 2px; margin: 4px auto; border-radius: 2px; background: var(--c-ink); transition: transform .25s var(--ease), opacity .2s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--t-small); color: var(--c-on-navy-dim); margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--c-on-navy-bright); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--c-blue-100); }
.breadcrumb svg { width: 13px; height: 13px; opacity: .7; }


/* ==========================================================================
   07  BUTTONS & LINKS
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 12px 24px; border-radius: var(--r); border: 1px solid transparent;
  font-family: var(--f-head); font-size: var(--t-label-md); font-weight: 600; line-height: 1.2;
  white-space: nowrap; text-align: center;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

/* DESIGN.md: solid blue, white text, -1px lift, shadow expands to a blue tint. */
.btn--primary { background: var(--c-blue); color: var(--c-white); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgb(var(--rgb-blue) / .45); }

/* DESIGN.md secondary: translucent ice tone with a hairline blue border. */
.btn--secondary { background: rgb(var(--rgb-blue) / .08); color: var(--c-blue-deep); border-color: rgb(var(--rgb-blue) / .2); }
.btn--secondary:hover { background: rgb(var(--rgb-blue) / .14); }

.btn--outline { border-color: var(--c-line); color: var(--c-ink); }
.btn--outline:hover { border-color: var(--c-blue-deep); color: var(--c-blue-deep); }

/* On navy. Frosted rather than solid so it reads as secondary to --primary. */
.btn--on-dark { background: rgb(var(--rgb-white) / .1); color: var(--c-white); border-color: rgb(var(--rgb-white) / .28); backdrop-filter: blur(6px); }
.btn--on-dark:hover { background: var(--c-white); color: var(--c-navy-800); border-color: var(--c-white); }

.btn--ghost { color: var(--c-ink); }
.btn--ghost:hover { background: var(--c-surface-low); }

.btn--sm { min-height: 40px; padding: 9px 18px; font-size: var(--t-label-sm); }
.btn--block { width: 100%; }

.link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-head); font-weight: 600; font-size: var(--t-label-md); color: var(--c-blue-deep); }
.link svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.link:hover svg { transform: translateX(4px); }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }


/* ==========================================================================
   08  GLOBAL SECTION FURNITURE
   Cross-page blocks: page head, trust strip, CTA band, chips, badges, cards.
   ========================================================================== */

/* --- page head: the hero on every inner page --- */
.page-head { position: relative; isolation: isolate; overflow: hidden; background: var(--c-navy-800); color: var(--c-on-navy); }
.page-head__bg { position: absolute; inset: 0; z-index: -2; }
.page-head__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-head::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgb(var(--rgb-navy-900) / .95), rgb(var(--rgb-navy-800) / .82) 55%, rgb(var(--rgb-navy-800) / .55));
}
.page-head__in { padding-block: clamp(44px, 6vw, 88px); }
.page-head h1 { color: var(--c-white); max-width: 18ch; }
.page-head .lead { color: var(--c-on-navy); max-width: 62ch; margin-top: 16px; }
.page-head__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Hero fact row. Sized for two items — only "20+ years" and "100+ countries"
   are verified — but tolerates more without redesign. */
.page-head__facts { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 56px); margin-top: 36px; padding-top: 28px; border-top: 1px solid rgb(var(--rgb-white) / .14); }
.page-head__facts b { display: block; font-family: var(--f-head); font-size: var(--t-h2); color: var(--c-white); line-height: 1.1; letter-spacing: var(--ls-h2); }
.page-head__facts span { display: block; margin-top: 6px; font-size: var(--t-small); color: var(--c-on-navy-dim); }

/* Glow backdrop. The Stitch page head carries no photograph: it is a navy
   gradient with two large, soft sapphire glows ("ambient glow accents, no
   dot-grids"). Reproduced as pure CSS so it costs no request and cannot 404.
   Used wherever a page head has no photograph behind it. */
.page-head--glow, .cta-band--glow {
  background:
    radial-gradient(520px 520px at 24% -10%, rgb(var(--rgb-blue) / .22), transparent 68%),
    radial-gradient(480px 480px at 102% 52%, rgb(var(--rgb-blue) / .16), transparent 70%),
    linear-gradient(180deg, var(--c-navy-900), var(--c-navy-800));
}
/* The scrim exists to hold text off a photograph. With no photograph it would
   only mute the glow, so it is switched off. The modifier sits on the section
   rather than on __bg so this needs no :has(); the empty __bg element stays in
   the markup so a photograph can be dropped in later without restructuring. */
.page-head--glow::after, .cta-band--glow::after { display: none; }

/* Priority line: the card sitting beside the page-head headline. */
.priority {
  padding: clamp(22px, 2.4vw, 30px);
  background: rgb(var(--rgb-white) / .06);
  border: 1px solid rgb(var(--rgb-white) / .12);
  border-radius: var(--r-lg);
  backdrop-filter: blur(6px);
}
.priority__label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* A small caps label, not a heading: these name a value rather than open a
   section, and four of them in the page head would clutter the outline. */
.priority .label-caps, .contact-strip .label-caps {
  font-family: var(--f-head); font-size: var(--t-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.priority .label-caps { color: var(--c-on-navy-bright); }
.priority p { margin-top: 18px; font-size: var(--t-small); color: var(--c-on-navy-dim); }
.priority__num {
  display: inline-block; margin-top: 4px;
  font-family: var(--f-head); font-size: var(--t-h3); font-weight: 700;
  letter-spacing: var(--ls-h3); color: var(--c-white);
}
.priority__num:hover { color: var(--c-blue-100); }
.priority__note { display: flex; align-items: flex-start; gap: 9px; margin-top: 18px; font-size: var(--t-small); color: var(--c-on-navy); }
.priority__note svg { width: 16px; height: 16px; color: var(--c-blue-100); flex-shrink: 0; margin-top: 3px; }

/* Contact strip: three published facts, on the page-head's navy. */
.contact-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 44px; }
.contact-strip > * {
  display: flex; align-items: flex-start; gap: 15px; padding: 20px;
  background: rgb(var(--rgb-white) / .05);
  border: 1px solid rgb(var(--rgb-white) / .10);
  border-radius: var(--r-lg);
}
.contact-strip .icon-box { background: rgb(var(--rgb-blue) / .20); color: var(--c-blue-100); }
.contact-strip .label-caps { color: var(--c-on-navy-dim); }
.contact-strip b { display: block; margin-top: 7px; font-family: var(--f-head); font-size: var(--t-h4); font-weight: 600; color: var(--c-white); }
.contact-strip a:hover b { color: var(--c-blue-100); }
.contact-strip span { display: block; margin-top: 4px; font-size: var(--t-small); color: var(--c-on-navy-dim); }

/* --- trust strip: two items, divided --- */
.trust { display: grid; grid-template-columns: repeat(2, 1fr); background: var(--c-surface); border: 1px solid var(--c-line-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-low); overflow: hidden; }
.trust__item { padding: clamp(22px, 2.6vw, 34px); }
.trust__item + .trust__item { border-left: 1px solid var(--c-line-soft); }
.trust__num { font-family: var(--f-head); font-size: var(--t-display); font-weight: 800; letter-spacing: var(--ls-display); color: var(--c-ink); line-height: 1; }
.trust__item p { margin-top: 10px; font-size: var(--t-small); color: var(--c-muted); }

/* --- CTA band --- */
.cta-band { position: relative; isolation: isolate; overflow: hidden; background: var(--c-navy-900); color: var(--c-on-navy); border-radius: var(--r-xl); padding: clamp(32px, 5vw, 72px); }
.cta-band__bg { position: absolute; inset: 0; z-index: -2; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgb(var(--rgb-navy-900) / .94), rgb(var(--rgb-navy-800) / .86)); }
.cta-band h2 { color: var(--c-white); max-width: 20ch; }
.cta-band .lead { color: var(--c-on-navy); max-width: 58ch; margin-top: 14px; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* --- chips: industries, filters, tags --- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li, .chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: var(--r-full);
  background: var(--c-surface-mid); border: 1px solid var(--c-line-soft);
  font-size: var(--t-small); font-weight: 500; color: var(--c-ink);
}
.chips svg, .chip svg { width: 15px; height: 15px; color: var(--c-blue-deep); }
.section--dark .chips li, .section--dark .chip { background: rgb(var(--rgb-white) / .07); border-color: rgb(var(--rgb-white) / .14); color: var(--c-on-navy-bright); }
.section--dark .chips svg { color: var(--c-blue-100); }

/* --- badge: small uppercase marker --- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-xs); background: var(--c-blue-050); color: var(--c-blue-ink); font-family: var(--f-head); font-size: var(--t-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; }
.badge--dark { background: rgb(var(--rgb-white) / .1); color: var(--c-on-navy-bright); }
.dot { width: 7px; height: 7px; border-radius: var(--r-full); background: var(--c-teal); flex-shrink: 0; }

/* --- card: the base surface --- */
.card { background: var(--c-surface); border: 1px solid var(--c-line-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-low); }
.card--pad { padding: clamp(22px, 2.4vw, 32px); }
.card--hover { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-mid); }
.section--dark .card { background: var(--c-navy-700); border-color: rgb(var(--rgb-white) / .08); box-shadow: none; }

/* --- icon tile --- */
.icon-box { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-md); background: var(--c-blue-050); color: var(--c-blue-deep); flex-shrink: 0; }
.icon-box svg { width: 23px; height: 23px; }
.icon-box--solid { background: var(--c-blue); color: var(--c-white); }
.icon-box--sm { width: 40px; height: 40px; border-radius: var(--r); }
.icon-box--sm svg { width: 19px; height: 19px; }
.section--dark .icon-box { background: rgb(var(--rgb-blue) / .18); color: var(--c-blue-100); }


/* ==========================================================================
   09  HOMEPAGE COMPONENTS
   ========================================================================== */

/* --- 9.1 Hero: full-bleed photo, navy scrim, copy on top --- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--c-navy-800); color: var(--c-on-navy); }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgb(var(--rgb-navy-900) / .96), rgb(var(--rgb-navy-800) / .88) 48%, rgb(var(--rgb-navy-800) / .5)); }
.hero__in { padding-block: clamp(56px, 8vw, 118px); max-width: 760px; }
.hero h1 { color: var(--c-white); font-size: var(--t-display); letter-spacing: var(--ls-display); font-weight: 800; line-height: 1.08; }
.hero .lead { color: var(--c-on-navy); margin-top: 20px; max-width: 58ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Hero highlight row. On the homepage this carries the client's own three
   published highlights, "Certified & Reliable" among them — that wording is
   permitted here and nowhere else on the site. */
.hero__proof { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 36px; padding-top: 26px; border-top: 1px solid rgb(var(--rgb-white) / .14); }
.hero__proof li { display: inline-flex; align-items: center; gap: 9px; font-size: var(--t-small); color: var(--c-on-navy); }
.hero__proof svg { width: 17px; height: 17px; color: var(--c-blue-100); }

/* --- 9.2 Trust band, lifted over the section boundary --- */
.trust-band { margin-top: calc(var(--section) * -.5); position: relative; z-index: 2; }

/* --- 9.3 Why: the three core values --- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.value { padding: clamp(24px, 2.6vw, 34px); }
.value h3 { margin: 18px 0 10px; }
.value p { color: var(--c-muted); }

/* --- 9.4 Services grid: photo-headed cards --- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.svc-card { display: flex; flex-direction: column; overflow: hidden; }
.svc-card__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-surface-mid); }
.svc-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.svc-card:hover .svc-card__img img { transform: scale(1.05); }
.svc-card__body { display: flex; flex-direction: column; gap: 11px; flex: 1; padding: clamp(20px, 2.2vw, 26px); }
.svc-card__body p { color: var(--c-muted); font-size: var(--t-body); }
.svc-card .link { margin-top: auto; padding-top: 6px; }

/* --- 9.5 Global footprint: region cards on navy --- */
.regions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.region { padding: clamp(22px, 2.4vw, 30px); }
.region h3 { color: var(--c-on-navy-bright); margin-bottom: 8px; }
.region p { color: var(--c-on-navy); font-size: var(--t-small); }
.region__meta { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgb(var(--rgb-white) / .09); font-size: var(--t-label-sm); color: var(--c-on-navy-dim); }

/* --- 9.6 Industries: nine icon-led cards.
       Icon-led rather than photo-led because no industry photography exists
       in images/. The section ships complete and visible; photography is a
       later enhancement, not a blocker. --- */
.industries { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.industry { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--c-surface); border: 1px solid var(--c-line-soft); border-radius: var(--r-lg); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.industry:hover { border-color: var(--c-blue-100); box-shadow: var(--shadow-mid); transform: translateY(-3px); }
.industry h3 { font-size: var(--t-label-md); font-weight: 600; line-height: 1.35; }

/* --- 9.7 How we work: numbered process --- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); counter-reset: step; }
.step { position: relative; padding: clamp(22px, 2.4vw, 30px); }
.step__num { display: block; font-family: var(--f-head); font-size: 40px; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--c-blue); margin-bottom: 16px; }
.step h3 { font-size: var(--t-h4); margin-bottom: 8px; }
.step p { font-size: var(--t-small); color: var(--c-muted); }
.section--dark .step p { color: var(--c-on-navy-dim); }

/* --- 9.8 Itemised quotation --- */
.quote-panel { background: var(--c-navy-800); color: var(--c-on-navy); border-radius: var(--r-xl); padding: clamp(26px, 3vw, 42px); }
.quote-panel h3 { color: var(--c-on-navy-bright); }
.quote-list { display: grid; gap: 2px; margin-top: 22px; }
.quote-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid rgb(var(--rgb-white) / .09); font-size: var(--t-body); }
.quote-list li:last-child { border-bottom: 0; }
.quote-list span:first-child { color: var(--c-on-navy-bright); }
.quote-list span:last-child { flex-shrink: 0; font-size: var(--t-label-sm); color: var(--c-on-navy-dim); text-align: right; }

/* --- 9.9 FAQ accordion.
       max-height rather than a 0fr/1fr grid track: the grid technique is
       cleaner but still ships inconsistently, and the panels here are short
       enough that a generous ceiling never clips. --- */
.faq { display: grid; gap: 12px; }
.faq__item { background: var(--c-surface); border: 1px solid var(--c-line-soft); border-radius: var(--r-lg); overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.faq__item.is-open { border-color: var(--c-blue-100); box-shadow: var(--shadow-low); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; padding: 19px 22px; text-align: left; font-family: var(--f-head); font-size: var(--t-h4); font-weight: 600; color: var(--c-ink); }
.faq__q::after { content: ""; flex-shrink: 0; width: 11px; height: 11px; border-right: 2px solid var(--c-blue-deep); border-bottom: 2px solid var(--c-blue-deep); transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--ease); }
.faq__item.is-open .faq__q::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .34s var(--ease); }
.faq__item.is-open .faq__a { max-height: 640px; }
.faq__a > div { padding: 0 22px 22px; color: var(--c-muted); }
.faq__a p + p { margin-top: .8em; }


/* ==========================================================================
   10  INNER-PAGE COMPONENTS
   ========================================================================== */

/* --- capability grid: "what we offer in X" --- */
.caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.cap { display: flex; gap: 15px; }
.cap h3 { font-size: var(--t-label-md); font-weight: 600; margin-bottom: 6px; }
.cap p { font-size: var(--t-small); color: var(--c-muted); }

/* --- checklist: ticked points in prose columns --- */
.checklist { display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-body); }
.checklist .icon { width: 20px; height: 20px; color: var(--c-blue-deep); flex-shrink: 0; margin-top: 2px; }
.section--dark .checklist .icon { color: var(--c-blue-100); }

/* --- panels: three short blocks under the industries chips --- */
.panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.panel { padding: clamp(22px, 2.4vw, 30px); }
.panel h3 { margin: 16px 0 10px; font-size: var(--t-h4); }
.panel p { font-size: var(--t-small); color: var(--c-muted); }

/* --- numbered stages: "how a shipment is handled" --- */
.stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }

/* --- itemised quote scope: forwarder-controlled vs statutory --- */
.scope { display: grid; gap: 10px; }
.scope__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 15px 18px; background: var(--c-surface); border: 1px solid var(--c-line-soft); border-radius: var(--r); }
.scope__row b { font-size: var(--t-body); font-weight: 600; }
.scope__row p { font-size: var(--t-small); color: var(--c-muted); margin-top: 3px; }
.scope__tag { flex-shrink: 0; font-size: var(--t-label); font-family: var(--f-head); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted); }

/* --- related services mesh --- */
.mesh { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.mesh a { display: flex; align-items: center; gap: 15px; padding: 20px; background: var(--c-surface); border: 1px solid var(--c-line-soft); border-radius: var(--r-lg); transition: border-color .2s var(--ease), transform .2s var(--ease); }
.mesh a:hover { border-color: var(--c-blue-100); transform: translateY(-3px); }
.mesh h3 { font-size: var(--t-label-md); font-weight: 600; }
.mesh p { font-size: var(--t-small); color: var(--c-muted); margin-top: 3px; }

/* --- stats band (about page) --- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.stat { padding: clamp(20px, 2.2vw, 28px); }
.stat b { display: block; font-family: var(--f-head); font-size: var(--t-h2); font-weight: 700; letter-spacing: var(--ls-h2); color: var(--c-ink); line-height: 1.1; }
.stat span { display: block; margin-top: 8px; font-size: var(--t-small); color: var(--c-muted); }

/* --- mission / vision --- */
.mv { position: relative; overflow: hidden; padding: clamp(26px, 3vw, 42px); border-radius: var(--r-xl); background: var(--c-navy-800); color: var(--c-on-navy); }
.mv--alt { background: linear-gradient(145deg, var(--c-blue-deep), var(--c-navy-800)); }
.mv h3 { color: var(--c-white); margin: 18px 0 12px; font-size: var(--t-h3); }
.mv .icon-box { background: rgb(var(--rgb-white) / .12); color: var(--c-white); }

/* --- article cards (global network insights) --- */
.articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.article { display: flex; flex-direction: column; overflow: hidden; }
.article__img { aspect-ratio: 16 / 9; background: var(--c-surface-mid); }
.article__img img { width: 100%; height: 100%; object-fit: cover; }
.article__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px; }
.article h3 { font-size: var(--t-h4); }
.article p { font-size: var(--t-small); color: var(--c-muted); }

/* --- office cards (contact) --- */
.office { overflow: hidden; }
.office__head { display: flex; align-items: center; gap: 13px; padding: 20px 22px; background: var(--c-navy-800); color: var(--c-white); }
.office__head h3 { color: var(--c-white); font-size: var(--t-h4); }
.office__head span { display: block; font-size: var(--t-small); color: var(--c-on-navy-dim); }
.office__body { display: grid; gap: 13px; padding: 22px; }
.office__body > * { display: flex; gap: 11px; align-items: flex-start; font-size: var(--t-body); }
.office__body svg { width: 17px; height: 17px; color: var(--c-blue-deep); flex-shrink: 0; margin-top: 3px; }
.office__body a:hover { color: var(--c-blue-deep); text-decoration: underline; }

/* The RAKEZ address is published in Arabic on the live site and is reused
   verbatim. It needs its own direction context and a touch more leading. */
.addr-ar { font-size: var(--t-body); line-height: 1.9; color: var(--c-muted); }

.map-embed { position: relative; min-height: 340px; border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface-mid); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; }
/* Sits behind the frame and shows through whenever the embed does not paint —
   blocked by a consent gate, an extension, or an offline device. A blank grey
   box helps nobody; the address and a link out still do the job. */
.map-embed__fallback {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 22px; background: var(--c-surface-mid);
}
.map-embed__fallback b { font-family: var(--f-head); font-size: var(--t-h4); font-weight: 600; color: var(--c-ink); }
.map-embed__fallback p { font-size: var(--t-small); color: var(--c-muted); }

/* --- service shortcuts (contact): jump to the form with a service chosen ---
   The Stitch screen puts a named desk, a person and a direct line on each of
   these. Pluz publishes one phone and one email, so a grid of six would imply
   routes that do not exist. They are form shortcuts instead: the anchor alone
   works without JS, and the script adds the pre-selection. */
.shortcuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.shortcut {
  display: flex; flex-direction: column; gap: 11px; padding: clamp(20px, 2.2vw, 26px);
  background: var(--c-surface); border: 1px solid var(--c-line-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow-low);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.shortcut:hover { border-color: var(--c-blue-100); box-shadow: var(--shadow-mid); transform: translateY(-3px); }
.shortcut__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shortcut h3 { font-size: var(--t-h4); }
.shortcut p { font-size: var(--t-small); color: var(--c-muted); flex: 1; }
.shortcut .link { margin-top: auto; }

/* --- office stack (contact): cards and the map share one column --- */
.offices { display: grid; gap: var(--gap); }

/* --- enquiry checklist: what to include, as a two-column list --- */
.include { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px var(--gap); }
.include li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-body); }
.include .icon { width: 20px; height: 20px; color: var(--c-blue-deep); flex-shrink: 0; margin-top: 2px; }
.include b { display: block; }
.include span span { display: block; font-size: var(--t-small); color: var(--c-muted); margin-top: 2px; }

/* --- long-form legal document --- */
.doc { display: grid; grid-template-columns: 240px 1fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
.doc__toc { position: sticky; top: 100px; display: grid; gap: 3px; }
.doc__toc a { padding: 8px 12px; border-radius: var(--r); font-size: var(--t-small); color: var(--c-muted); }
.doc__toc a:hover { background: var(--c-surface-low); color: var(--c-blue-deep); }
.doc__body h2 { font-size: var(--t-h3); margin: 36px 0 12px; }
.doc__body h2:first-child { margin-top: 0; }
.doc__body p + p, .doc__body ul { margin-top: 12px; }
.doc__body ul { list-style: disc; padding-left: 22px; display: grid; gap: 7px; }
.doc__updated { font-size: var(--t-small); color: var(--c-muted); padding: 14px 18px; background: var(--c-surface-low); border-radius: var(--r); margin-bottom: 28px; }


/* ==========================================================================
   11  FORMS
   ========================================================================== */

.enquiry { padding: clamp(24px, 3vw, 38px); }
.form-grid { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field label { display: block; margin-bottom: 7px; font-family: var(--f-head); font-size: var(--t-label-sm); font-weight: 600; color: var(--c-ink); }
.field .req { color: var(--c-error); }

/* DESIGN.md: white surface, hairline neutral border, 14px/16px padding,
   blue border + 3px soft ring on focus. 16px font prevents iOS zoom. */
.input, .select, .textarea {
  width: 100%; min-height: 50px; padding: 14px 16px;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r);
  font-size: 16px; color: var(--c-ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.textarea { min-height: 112px; resize: vertical; }
/* The arrow is a data-URI, so its colour cannot reference a custom property.
   It is --c-muted (#5b5e66) encoded; keep the two in sync if that token moves. */
.select { appearance: none; padding-right: 42px; background-repeat: no-repeat; background-position: right 15px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b5e66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgb(var(--rgb-blue) / .15); }
.input::placeholder, .textarea::placeholder { color: var(--c-line-strong); }

/* Radio chips: the service selector. The Stitch screen uses a chip grid
   rather than a dropdown, which keeps all nine options visible. Built on real
   radio inputs inside a fieldset, so grouping is announced and arrow-key
   navigation comes from the browser rather than from script. */
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset > legend {
  padding: 0; margin-bottom: 7px;
  font-family: var(--f-head); font-size: var(--t-label-sm); font-weight: 600; color: var(--c-ink);
}
.radio-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.radio-chip { position: relative; display: block; }
.radio-chip input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.radio-chip span {
  display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 10px 13px;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r);
  font-size: var(--t-small); color: var(--c-body); line-height: 1.35;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
/* The dot is drawn on the ::before of the label text, so the real input can
   stay fully transparent and still own all the behaviour. */
.radio-chip span::before {
  content: ""; width: 15px; height: 15px; flex-shrink: 0;
  border: 2px solid var(--c-line-strong); border-radius: var(--r-full);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.radio-chip input:hover + span { border-color: var(--c-blue-100); }
.radio-chip input:checked + span { border-color: var(--c-blue); background: var(--c-blue-050); color: var(--c-blue-ink); }
.radio-chip input:checked + span::before { border-color: var(--c-blue); box-shadow: inset 0 0 0 3px var(--c-surface), inset 0 0 0 9px var(--c-blue); }
.radio-chip input:focus-visible + span { outline: 3px solid var(--c-blue); outline-offset: 3px; }

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and this one has to look fillable. Excluded from tab order and
   from the accessibility tree. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: var(--t-small); color: var(--c-muted); display: flex; align-items: flex-start; gap: 8px; }
.form-note svg { width: 15px; height: 15px; color: var(--c-blue-deep); flex-shrink: 0; margin-top: 3px; }
.section--dark .form-note, .quote-panel .form-note, .cta-band .form-note { color: var(--c-on-navy); }
.section--dark .form-note svg, .quote-panel .form-note svg, .cta-band .form-note svg { color: var(--c-blue-100); }

/* Status message, rendered from the ?form= redirect token. role="status"
   makes it a live region so the outcome is announced without a focus move. */
.form-msg { display: none; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r); font-size: var(--t-body); }
.form-msg.is-visible { display: flex; }
.form-msg.is-ok  { background: var(--c-ok-bg); color: var(--c-ok-ink); }
.form-msg.is-err { background: var(--c-error-bg); color: var(--c-error-ink); }


/* ==========================================================================
   12  FOOTER
   Static HTML in all 15 pages, like the header.
   ========================================================================== */

.site-footer { background: var(--c-navy-900); color: var(--c-on-navy-dim); font-size: var(--t-body); }
.footer__grid { display: grid; grid-template-columns: 1.4fr .8fr 1fr 1.2fr; gap: clamp(28px, 3vw, 48px); padding-block: clamp(48px, 5vw, 76px) 44px; }
.footer__brand img { height: 46px; width: auto; }
.footer__brand p { margin-top: 18px; max-width: 360px; line-height: 1.75; }
.site-footer h2 { color: var(--c-white); font-family: var(--f-head); font-size: var(--t-label-md); font-weight: 600; margin-bottom: 17px; }
.footer__links { display: grid; gap: 10px; }
.footer__links a { transition: color .2s var(--ease), transform .2s var(--ease); display: inline-block; }
.footer__links a:hover { color: var(--c-white); transform: translateX(3px); }
.footer__contact { display: grid; gap: 13px; }
.footer__contact > * { display: flex; gap: 11px; align-items: flex-start; }
.footer__contact svg { width: 16px; height: 16px; color: var(--c-blue-100); flex-shrink: 0; margin-top: 4px; }
.footer__contact a:hover { color: var(--c-white); }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 22px; border-top: 1px solid rgb(var(--rgb-white) / .09); font-size: var(--t-small); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer__legal a:hover { color: var(--c-white); }


/* ==========================================================================
   13  UTILITIES
   Four, plus the TODO hook. Everything else is a named component.
   ========================================================================== */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stack > * + * { margin-top: var(--gap); }
.text-center { text-align: center; }

/* Inline SVG symbol sprite: defined once per page, referenced with <use>.
   Must stay in the DOM for the references to resolve. */
.sprite { display: none; }

/* A short, fixed margin scale. Anything outside it belongs in a component
   rule, not in an inline style. */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }

/* Any element awaiting a fact the client has not published. Hidden until the
   fact arrives — never used to hide content that IS published. */
[data-todo] { display: none !important; }

/* Skip link: the only thing before the header in the tab order. */
.skip-link { position: absolute; left: 14px; top: -64px; z-index: 200; padding: 11px 18px; background: var(--c-navy-800); color: var(--c-white); border-radius: var(--r); transition: top .2s var(--ease); }
.skip-link:focus { top: 14px; }


/* ==========================================================================
   14  MOTION — subtle, purposeful
   ========================================================================== */

/* Elements start hidden only when JS is present to reveal them, so a failed
   script can never leave the page blank. */
html:not(.js) [data-reveal] { opacity: 1; transform: none; }
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease) var(--d, 0ms), transform .6s var(--ease) var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}


/* ==========================================================================
   15  RESPONSIVE
   Desktop-first, six breakpoints, descending. Nothing responsive is authored
   anywhere else in this file.
   ========================================================================== */

@media (max-width: 1400px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1240px) {
  .svc-grid, .regions, .industries, .articles, .mesh, .panels { grid-template-columns: repeat(2, 1fr); }
  .shortcuts { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stages { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) {
  /* Tablet collapse: every two-column pairing goes single-column together. */
  .split, .split--wide-left, .split--wide-right, .split--2-1, .doc { grid-template-columns: 1fr; }
  .split--end { align-items: start; }
  .contact-strip { grid-template-columns: repeat(3, 1fr); }
  .doc__toc { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
  .doc__toc a { background: var(--c-surface-low); }
  .values { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .hero__in { max-width: none; }
}

@media (max-width: 900px) {
  /* The nav becomes a drawer. 901 in JS mirrors this 900 so the two agree. */
  .nav-toggle { display: grid; }
  .masthead__actions .btn { display: none; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--c-surface); border-top: 1px solid var(--c-line-soft);
    box-shadow: var(--shadow-high); padding: 12px var(--gutter) 22px;
    display: none;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link { padding: 13px 12px; font-size: var(--t-lead); justify-content: space-between; }

  /* The dropdown flattens into an always-visible indented list — a hover
     panel is meaningless on touch, and every service link stays reachable. */
  .nav__dropdown { position: static; width: auto; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-left: 2px solid var(--c-line-soft); border-radius: 0; margin: 2px 0 6px 12px; padding: 0 0 0 8px; }
  .nav__item:hover > .nav__link svg, .nav__item.is-open > .nav__link svg { transform: none; }
  .nav__link svg { display: none; }

  .caps { grid-template-columns: 1fr; }
  .contact-strip { grid-template-columns: 1fr; }
  .radio-chips { grid-template-columns: repeat(2, 1fr); }
  .quote-list li { flex-direction: column; gap: 4px; }
  .quote-list span:last-child { text-align: left; }
}

@media (max-width: 640px) {
  :root { --t-body: 15px; }
  .svc-grid, .regions, .industries, .articles, .mesh, .panels,
  .stats, .stages, .steps, .grid--2, .grid--3, .grid--4,
  .shortcuts, .include { grid-template-columns: 1fr; }
  .radio-chips { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr; }
  .trust__item + .trust__item { border-left: 0; border-top: 1px solid var(--c-line-soft); }
  .trust-band { margin-top: calc(var(--section) * -.35); }
  .footer__grid { grid-template-columns: 1fr; }
  .masthead__in { height: 64px; }
  .page-head__facts { gap: 20px 32px; }
  .scope__row { flex-direction: column; gap: 6px; }
}

@media (max-width: 400px) {
  .hero__actions .btn, .page-head__actions .btn, .cta-band__actions .btn { width: 100%; }
}


/* ==========================================================================
   16  ADDITIONS (v1.2.0)
   Appended, not edited in place — the 8 pages built earlier depend on the
   rules above. Section 15 (responsive) is deliberately last for the media
   queries that matter; the two short queries at the foot of this block cover
   only the components defined here.
   ========================================================================== */

/* Base icon size. Every context rule above is more specific and still wins;
   this only catches an icon placed somewhere nobody sized it, which would
   otherwise render at 300x150 and break the layout. */
.icon { width: 18px; height: 18px; flex-shrink: 0; }

/* Homepage hero without a photograph: same sapphire-glow treatment as
   .page-head--glow, scrim off. */
.hero--glow {
  background:
    radial-gradient(560px 560px at 18% -8%, rgb(var(--rgb-blue) / .24), transparent 68%),
    radial-gradient(520px 520px at 104% 60%, rgb(var(--rgb-blue) / .16), transparent 70%),
    linear-gradient(180deg, var(--c-navy-900), var(--c-navy-800));
}
.hero--glow::after { display: none; }

/* Service card header with no photograph: a navy tile carrying the service
   icon. Used where no honest photograph exists (QUESTIONS.md #22). */
.svc-card__img--motif {
  display: grid; place-items: center; color: var(--c-blue-100);
  background:
    radial-gradient(320px 220px at 20% 0%, rgb(var(--rgb-blue) / .30), transparent 70%),
    linear-gradient(160deg, var(--c-navy-700), var(--c-navy-900));
}
.svc-card__img--motif svg { width: 64px; height: 64px; opacity: .92; }

/* Centred reading column, for single-paragraph section intros. */
.prose--center { margin-inline: auto; text-align: center; }

/* Table-of-contents rail heading on the FAQ and legal pages. */
.doc__toc-title { padding: 0 12px 8px; font-family: var(--f-head); font-size: var(--t-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-muted); }
.doc__body .faq + h2 { margin-top: 44px; }
.doc__body h2 + .faq { margin-top: 18px; }
.doc__body h3 { margin: 22px 0 8px; font-size: var(--t-h4); }
.doc__body a { color: var(--c-blue-deep); text-decoration: underline; text-underline-offset: 2px; }

/* Legal-review marker. Visible on purpose: these two pages must not go live
   unreviewed (QUESTIONS.md #16). */
.review-flag { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; padding: 14px 18px; border-radius: var(--r); background: var(--c-error-bg); color: var(--c-error-ink); font-size: var(--t-small); }

@media (max-width: 1100px) {
  .doc__toc-title { width: 100%; padding-left: 0; }
}

/* Centred action row, for the centred closing blocks. */
.hero__actions--center { justify-content: center; }
/* Anchored headings clear the sticky header. */
.doc__body h2[id] { scroll-margin-top: 100px; }

/* Lighter scrim for photographs that are dark or low-contrast under the
   default one (aerial vessel, road at sunset). The text side stays dense. */
.hero--photo::after, .page-head--photo::after {
  background: linear-gradient(100deg, rgb(var(--rgb-navy-900) / .93), rgb(var(--rgb-navy-800) / .70) 46%, rgb(var(--rgb-navy-800) / .18));
}

/* Twelve service links: the dropdown becomes a two-column panel on desktop and
   flattens to a single column in the mobile drawer. */
.nav__dropdown { width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
@media (max-width: 900px) {
  .nav__dropdown { width: auto; grid-template-columns: 1fr; display: block; }
}

/* Real Pluz logo (transparent, navy lettering). On the navy footer it sits on a
   white plate so the lettering stays legible. */
.brand__logo { height: clamp(34px, 3.4vw, 44px); width: auto; }
.brand--footer .brand__logo { height: 44px; box-sizing: content-box; padding: 8px 12px; background: var(--c-white); border-radius: var(--r); }