/* ==========================================================================
   Funteg International Limited — Direction A "Trade Line"
   Dark "transit" scenes alternate with bright "operations" scenes.
   One route line runs through the page (see .routeline in site.js).
   ========================================================================== */

/* Self-hosted fonts (Geist, SIL Open Font License) — no third-party font requests */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/geist-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/geist-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/geist-mono-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/geist-mono-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Colour — built from the official logo (#4D1E95 ship, #00152C wordmark, #808080 disc) */
  --ink: #0B1220;          /* graphite-navy: dark scenes, text on light */
  --ink-2: #111A2B;        /* raised dark surface */
  --ink-3: #1A2436;        /* dark borders, hover */
  --line-d: #243047;       /* rules on dark */
  --silver: #F6F4EF;       /* light scenes: warm white */
  --stone: #ECE8E0;        /* alternate light scenes */
  --white: #FFFFFF;
  --line: #E1DCD2;         /* rules on light (warm) */
  --slate: #556070;        /* secondary text on light (5.9:1 on silver) */
  --mist: #9AA6B8;         /* secondary text on dark (7.6:1 on ink) */
  --brand: #4D1E95;        /* logo purple */
  --action: #5B34C6;       /* primary buttons (7.4:1 with white) */
  --action-hi: #6C46DA;
  --violet: #A68BFF;       /* purple on dark */
  --cobalt: #1F4FE0;       /* links and focus on light (6.5:1) */
  --cyan: #22C3E6;         /* routes and active states on dark (9:1) */
  --route: #1BA8D0;        /* the page route line, legible on both scenes */
  --orange: #E8772E;       /* status only */

  /* Type */
  --sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Space and shape */
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --header-h: 76px;
  --r-1: 2px; --r-2: 8px; --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-1: 250ms; --t-2: 450ms; --t-3: 700ms; --t-4: 900ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--silver); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 650; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: var(--r-1); }
.on-dark :focus-visible { outline-color: var(--cyan); }
::selection { background: var(--action); color: var(--white); }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--white); color: var(--ink); padding: 10px 16px; border-radius: var(--r-2); }
.skip:focus { top: 12px; }

.on-dark { background: var(--ink); color: var(--silver); }
.label { font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.muted { color: var(--slate); }
.on-dark .muted { color: var(--mist); }
.eyebrow { font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; opacity: 0.6; }
.on-dark .eyebrow { color: var(--cyan); }
.h-display { font-size: clamp(2.9rem, 7.4vw, 6.4rem); line-height: 0.95; letter-spacing: -0.045em; font-weight: 700; }
.h-section { font-size: clamp(2rem, 4.6vw, 3.6rem); letter-spacing: -0.04em; font-weight: 680; }
.lede { font-size: clamp(1.08rem, 1.4vw, 1.25rem); line-height: 1.55; max-width: 56ch; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: var(--r-pill); border: 1px solid transparent; font-weight: 550; font-size: 0.98rem; text-decoration: none; white-space: nowrap; transition: background var(--t-1) var(--ease), border-color var(--t-1) var(--ease), color var(--t-1) var(--ease), transform var(--t-1) var(--ease); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--t-1) var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { background: var(--action); color: var(--white); }
.btn--primary:hover { background: var(--action-hi); }
.btn--light { background: var(--silver); color: var(--ink); }
.btn--light:hover { background: var(--white); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); }
.on-dark .btn--ghost, .btn--ghost-d { border-color: #3A4660; color: var(--silver); }
.on-dark .btn--ghost:hover, .btn--ghost-d:hover { border-color: var(--silver); }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: 0.9rem; }
@media (max-width: 479px) { .btn { white-space: normal; text-align: center; } }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 550; text-decoration: none; color: var(--cobalt); }
.on-dark .link-arrow { color: var(--cyan); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   Header
   ========================================================================== */
.hd { position: fixed; inset: var(--rb, 0px) 0 auto 0; z-index: 90; padding-top: env(safe-area-inset-top, 0px); transition: background var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease); }
.hd__in { height: var(--header-h); display: flex; align-items: center; gap: 24px; }
.hd__logo { flex: none; display: block; position: relative; height: 64px; }
.hd__logo img { height: 100%; width: auto; transition: opacity var(--t-1) var(--ease); }
.hd__logo .logo-c { position: absolute; inset: 0 auto auto 0; opacity: 0; }
.hd__nav { display: none; margin-left: auto; }
.hd__nav > ul { display: flex; gap: 2px; align-items: center; }
.hd__nav > ul > li { position: relative; }
.hd__nav > ul > li.has-dd--mega { position: static; }
.hd__nav > ul > li > a, .hd__navbtn { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 13px; border-radius: var(--r-pill); border: 0; background: transparent; text-decoration: none; font-size: 0.96rem; font-weight: 500; white-space: nowrap; color: #C9D1DD; transition: color var(--t-1), background var(--t-1); }
.hd__nav > ul > li > a:hover, .hd__navbtn:hover, .hd__navbtn[aria-expanded="true"] { color: var(--white); background: rgba(255,255,255,0.08); }
.hd__nav > ul > li > a.is-current, .hd__navbtn.is-current, .hd__track.is-current { color: var(--white); }
.hd__nav > ul > li > a.is-current::after, .hd__navbtn.is-current::before, .hd__track.is-current::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--cyan); }
.hd__navbtn.is-current::before { right: 26px; }
.hd__navbtn::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--t-1); }
.hd__navbtn[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.hd__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.hd__track { position: relative; display: none; font-size: 0.96rem; font-weight: 500; color: #C9D1DD; text-decoration: none; padding: 10px 12px; border-radius: var(--r-pill); white-space: nowrap; }
.hd__track:hover { color: var(--white); background: rgba(255,255,255,0.08); }
.hd__menu { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #3A4660; background: transparent; color: var(--silver); display: grid; place-items: center; flex: none; padding: 0; -webkit-tap-highlight-color: transparent; transition: border-color var(--t-1), background var(--t-1); }
.hd__menu-ico, .hd__menu-ico::before, .hd__menu-ico::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--t-1) var(--ease), background var(--t-1); }
.hd__menu-ico { position: relative; }
.hd__menu-ico::before, .hd__menu-ico::after { content: ""; position: absolute; left: 0; }
.hd__menu-ico::before { top: -6px; }
.hd__menu-ico::after { top: 6px; }
.hd.is-menu .hd__menu { background: var(--silver); }
.hd.is-menu .hd__menu-ico { background: transparent; }
.hd.is-menu .hd__menu-ico::before { transform: translateY(6px) rotate(45deg); }
.hd.is-menu .hd__menu-ico::after { transform: translateY(-6px) rotate(-45deg); }
.hd .hd__quote { display: none; }
@media (min-width: 560px) { .hd .hd__quote { display: inline-flex; } }
@media (min-width: 1180px) {
  .hd__nav { display: block; }
  .hd__actions { margin-left: 4px; }
  .hd__track { display: inline-block; }
  .hd__menu { display: none; }
}
/* Solid state once the page scrolls: light bar, full-colour logo */
.hd.is-solid { background: rgba(255,255,255,0.98); box-shadow: 0 1px 0 var(--line); }
.hd--static .logo-c { position: static; opacity: 1; }
.hd.is-solid .logo-w { opacity: 0; }
.hd.is-solid .logo-c { opacity: 1; }
.hd.is-solid .hd__nav > ul > li > a, .hd.is-solid .hd__navbtn, .hd.is-solid .hd__track { color: #3C4656; }
.hd.is-solid .hd__nav > ul > li > a:hover, .hd.is-solid .hd__navbtn:hover, .hd.is-solid .hd__navbtn[aria-expanded="true"], .hd.is-solid .hd__track:hover { color: var(--ink); background: rgba(11,18,32,0.06); }
.hd.is-solid .is-current { color: var(--ink) !important; }
.hd.is-solid a.is-current::after, .hd.is-solid .hd__navbtn.is-current::before { background: var(--action); }
.hd.is-solid .hd__menu { color: var(--ink); border-color: var(--line); }
.hd :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.hd.is-solid :focus-visible { outline-color: var(--cobalt); }

/* Mobile menu: a panel that opens below the header, which stays in place with its close button */
.mnav { position: fixed; z-index: 85; left: 0; right: 0; bottom: 0; top: calc(var(--rb, 0px) + var(--header-h) + env(safe-area-inset-top, 0px)); background: var(--white); color: var(--ink); display: flex; flex-direction: column; gap: 22px; padding: 4px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 24px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--line); opacity: 0; transform: translateY(-8px); transition: opacity var(--t-1) var(--ease), transform var(--t-1) var(--ease); }
.mnav.is-open { opacity: 1; transform: none; }
.mnav__foot { display: grid; gap: 12px; margin-top: auto; }
.mnav__foot .row { display: flex; flex-wrap: wrap; gap: 10px; }
.mnav__foot .btn { flex: 1 1 88px; }
@media (min-width: 1180px) { .mnav { display: none !important; } }
html.is-locked body { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; isolation: isolate; overflow-x: clip; }
.hero__map { position: absolute; z-index: -1; inset: 0; overflow: hidden; }
.hero__map svg { width: 100%; height: 100%; }
.hero__scrim { position: absolute; z-index: -1; inset: 0; background:
  linear-gradient(180deg, rgba(11,18,32,0.8) 0%, rgba(11,18,32,0) 22%),
  linear-gradient(0deg, rgba(11,18,32,1) 0%, rgba(11,18,32,0.88) 34%, rgba(11,18,32,0) 70%); }
@media (min-width: 960px) {
  .hero__map { left: 34%; }
  .hero__scrim { background:
    linear-gradient(90deg, var(--ink) 34%, rgba(11,18,32,0.6) 46%, rgba(11,18,32,0) 62%),
    linear-gradient(0deg, var(--ink) 0%, rgba(11,18,32,0) 24%); }
}
.hero__in { position: relative; display: grid; align-content: end; gap: 28px; padding-top: calc(var(--header-h) + 40px); padding-bottom: clamp(28px, 5vw, 56px); }
@media (min-width: 960px) { .hero__in { align-content: center; padding-bottom: 120px; } }
.hero__copy { max-width: 620px; display: grid; gap: 24px; }
.hero h1 { color: var(--white); }
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero h1 .ln > span { display: block; transform: translateY(105%); animation: lineUp 1.1s var(--ease) forwards; }
.hero h1 .ln:nth-child(2) > span { animation-delay: 0.14s; color: var(--cyan); }
@keyframes lineUp { to { transform: none; } }
.hero__sub { color: #C3CBD8; opacity: 0; animation: fadeIn 0.9s var(--ease) 0.5s forwards; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; opacity: 0; animation: fadeIn 0.9s var(--ease) 0.65s forwards; }
@keyframes fadeIn { to { opacity: 1; } }

.hero__legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 500 0.7rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist); }
.hero__legend span { display: inline-flex; align-items: center; gap: 8px; }
.hero__legend i { width: 18px; height: 0; border-top: 2px solid var(--cyan); }
.hero__legend i.sea { border-top-style: dashed; }
.hero__legend i.road { border-top-color: var(--violet); }
@media (max-width: 899px) { .hero__legend { padding-right: 64px; } } /* clear of the contact button */
.hero__legend i.dot { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--violet); }

/* Map layers */
.mp-route { fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; }
.mp-route--sea { stroke-dasharray: 2 6; }
.mp-route--road { stroke: var(--violet); }
.mp-draw { animation: draw 1.6s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.mp-node { fill: var(--silver); }
.mp-home { fill: var(--action); stroke: var(--white); stroke-width: 2; vector-effect: non-scaling-stroke; }
.mp-pulse { fill: none; stroke: var(--violet); stroke-width: 1.5; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: pulse 2.6s ease-out infinite; }
@keyframes pulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3.4); opacity: 0; } }
.mp-cargo { fill: var(--cyan); }
.mp-label { font: 500 11px/1 var(--mono); letter-spacing: 0.08em; fill: var(--mist); text-transform: uppercase; }
.mp-label--home { fill: var(--white); font-size: 12px; }

/* Status chips over the hero map (illustrative, labelled as such) */
.chip { position: absolute; z-index: 2; display: none; gap: 2px; padding: 8px 10px; border-radius: 6px; background: rgba(17,26,43,0.88); border: 1px solid var(--line-d); font: 500 0.7rem/1.35 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: #DDE3EC; white-space: nowrap; opacity: 0; animation: fadeIn 0.8s var(--ease) forwards; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.chip b { font-weight: 500; color: var(--cyan); }
.chip em { font-style: normal; color: var(--orange); }
.chip small { color: var(--mist); font-size: 0.62rem; }
@media (min-width: 960px) { .chip { display: grid; } }

/* Mode tiles that overlap into the next scene */
.tiles { display: none; }
@media (min-width: 960px) {
  .tiles { display: grid; grid-template-columns: repeat(3, 168px); gap: 10px; position: absolute; right: var(--gutter); bottom: -56px; z-index: 3; }
  .tile { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-2); overflow: hidden; background: var(--ink-2); box-shadow: 0 24px 50px -20px rgba(0,0,0,0.55); clip-path: inset(100% 0 0 0); animation: wipeUp 0.9s var(--ease-io) forwards; }
  .tile:nth-child(2) { animation-delay: 0.12s; } .tile:nth-child(3) { animation-delay: 0.24s; }
  .tile img { width: 100%; height: 100%; object-fit: cover; }
  .tile span { position: absolute; left: 8px; bottom: 8px; font: 500 0.66rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); background: rgba(11,18,32,0.78); padding: 6px 8px; border-radius: 4px; }
}
@keyframes wipeUp { to { clip-path: inset(0 0 0 0); } }

/* ==========================================================================
   Proof strip
   ========================================================================== */
.proof { background: var(--white); border-bottom: 1px solid var(--line); }
.proof__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 8px; }
.proof__item { padding: 22px 16px 22px 0; display: grid; gap: 6px; align-content: start; border-bottom: 1px solid var(--line); }
.proof__item:last-child { border-bottom: 0; grid-column: 1 / -1; }
.proof__num { font-size: clamp(1.35rem, 2.9vw, 2.5rem); font-weight: 680; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.proof__num sup { font-size: 0.5em; vertical-align: 0.7em; margin-left: 2px; color: var(--action); }
.proof__item p { font-size: 0.92rem; color: var(--slate); }
@media (min-width: 760px) and (max-width: 1099px) { .proof__in { grid-template-columns: repeat(6, minmax(0, 1fr)); } .proof__item { grid-column: span 2; } .proof__item:nth-last-child(-n+2) { grid-column: span 3; border-bottom: 0; } }
@media (min-width: 1100px) {
  .proof__in { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-top: 72px; }
  .proof__num { font-size: 1.55rem; }   /* five word labels on one row: each must fit one line */
  .proof__item:last-child { grid-column: auto; }
  .proof__item { border-bottom: 0; border-left: 1px solid var(--line); padding: 4px 18px 26px; }
  .proof__item:first-child { border-left: 0; padding-left: 0; }
}

/* ==========================================================================
   Service-mode selector
   ========================================================================== */
.modes { position: relative; padding-block: clamp(72px, 10vw, 128px); overflow: hidden; isolation: isolate; transition: background var(--t-3) var(--ease); }
.modes::before { content: ""; position: absolute; z-index: -1; inset: -20%; background: radial-gradient(40% 50% at 78% 40%, var(--glow, rgba(34,195,230,0.14)), transparent 70%); transition: background var(--t-3) var(--ease); }
.modes[data-mode="air"] { --glow: rgba(34,195,230,0.16); }
.modes[data-mode="sea"] { --glow: rgba(31,79,224,0.22); }
.modes[data-mode="road"] { --glow: rgba(166,139,255,0.18); }
.modes[data-mode="customs"] { --glow: rgba(232,119,46,0.14); }
.modes[data-mode="warehousing"] { --glow: rgba(154,166,184,0.16); }
.modes__head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 56px); }
@media (min-width: 960px) { .modes__head { grid-template-columns: 1.1fr 1fr; align-items: end; gap: 48px; } }
.modes__grid { display: grid; gap: 28px; }
@media (min-width: 960px) { .modes__grid { grid-template-columns: 300px minmax(0, 1fr); gap: 48px; } }

.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-snap-type: x mandatory; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; scroll-snap-align: start; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; text-align: left; border: 1px solid var(--line-d); background: transparent; color: var(--mist); border-radius: var(--r-pill); padding: 10px 18px 10px 12px; transition: color var(--t-1), border-color var(--t-1), background var(--t-1); }
.tab__ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-3); color: var(--silver); }
.tab__ico svg { width: 16px; height: 16px; }
.tab__name { font-weight: 600; font-size: 1rem; color: var(--silver); }
.tab__meta { display: none; }
.tab:hover { border-color: #3A4660; }
.tab[aria-selected="true"] { border-color: var(--cyan); background: rgba(34,195,230,0.08); }
.tab[aria-selected="true"] .tab__ico { background: var(--cyan); color: var(--ink); }
@media (min-width: 960px) {
  .tabs { flex-direction: column; overflow: visible; margin: 0; padding: 0; gap: 0; border-top: 1px solid var(--line-d); }
  .tab { border: 0; border-bottom: 1px solid var(--line-d); border-radius: 0; padding: 18px 4px; grid-template-columns: 36px 1fr auto; position: relative; }
  .tab__meta { display: block; grid-column: 2; font: 500 0.7rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist); }
  .tab__name { font-size: 1.2rem; }
  .tab__ico { grid-row: span 2; }
  .tab::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--cyan); transition: width var(--t-2) var(--ease); }
  .tab[aria-selected="true"] { background: transparent; }
  .tab[aria-selected="true"]::after { width: 100%; }
}

.stage { display: grid; gap: 0; border-radius: 14px; overflow: hidden; background: var(--ink-2); border: 1px solid var(--line-d); }
@media (min-width: 760px) { .stage { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.stage__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-3); }
@media (min-width: 760px) { .stage__media { aspect-ratio: auto; min-height: 520px; } }
.stage__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 0 0); }
.stage__media img.is-in { animation: wipeIn var(--t-3) var(--ease-io) both; }
@keyframes wipeIn { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.stage__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,18,32,0.85) 0%, rgba(11,18,32,0) 45%); pointer-events: none; }
.stage__route { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; display: grid; gap: 8px; }
.stage__route svg { width: 100%; height: 56px; overflow: visible; }
.stage__route .label { color: var(--silver); display: flex; justify-content: space-between; gap: 12px; }
.stage__route .label b { color: var(--cyan); font-weight: 500; }
.stage__body { padding: clamp(24px, 3.2vw, 40px); display: grid; gap: 22px; align-content: start; }
.stage__body h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--white); }
.stage__body > p { color: #C3CBD8; }
.stage__list { display: grid; gap: 0; border-top: 1px solid var(--line-d); }
.stage__list li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-d); font-size: 0.97rem; }
.stage__list li span:last-child { font: 500 0.7rem/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist); text-align: right; }
.stage__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.stage__panel[hidden] { display: none; }
.also { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.also span.label { color: var(--mist); margin-right: 6px; }
.also a { font-size: 0.9rem; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-d); text-decoration: none; color: #C3CBD8; transition: border-color var(--t-1), color var(--t-1); }
.also a:hover { border-color: var(--cyan); color: var(--white); }

/* Mini route animations, one per mode */
.mr-base { stroke: #2C3850; stroke-width: 2; fill: none; }
.mr-line { stroke: var(--cyan); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.mr-dash { stroke-dasharray: 3 7; animation: march 1.2s linear infinite; }
@keyframes march { to { stroke-dashoffset: -20; } }
.mr-dot { fill: var(--white); }
.mr-scan { fill: var(--cyan); opacity: 0.85; animation: scan 2.2s var(--ease-io) infinite alternate; }
@keyframes scan { from { transform: translateX(0); } to { transform: translateX(var(--scan, 240px)); } }
.mr-doc { fill: none; stroke: #3A4660; stroke-width: 1.5; }
.mr-text { fill: #3A4660; }
.mr-rack { fill: #1F2A3F; stroke: #33415C; }

/* ==========================================================================
   Shipment journey (scroll-driven)
   ========================================================================== */
.journey { background: var(--silver); padding-block: clamp(72px, 10vw, 128px); }
.journey__grid { display: grid; gap: 28px; }
@media (min-width: 960px) { .journey__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); gap: 72px; } }

.jboard { position: sticky; top: 72px; z-index: 3; background: var(--ink); color: var(--silver); border-radius: 14px; padding: 16px 18px; display: grid; gap: 12px; box-shadow: 0 18px 40px -24px rgba(11,18,32,0.6); }
@media (min-width: 960px) { .jboard { top: 104px; align-self: start; padding: 28px; gap: 22px; } }
.jboard__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.jboard__count { font: 500 0.8rem/1 var(--mono); letter-spacing: 0.08em; color: var(--mist); font-variant-numeric: tabular-nums; }
.jboard__count b { color: var(--cyan); font-weight: 500; }
.jboard__stage { font-size: clamp(1.25rem, 2.6vw, 2.2rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; color: var(--white); }
.jboard__rail { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); align-items: center; height: 18px; }
.jboard__rail::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--line-d); transform: translateY(-50%); }
.jboard__fill { position: absolute; left: 0; top: 50%; height: 2px; width: var(--p, 0%); background: var(--cyan); transform: translateY(-50%); transition: width var(--t-2) var(--ease); box-shadow: 0 0 10px rgba(34,195,230,0.6); }
.jboard__rail i { position: relative; justify-self: center; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); border: 2px solid var(--line-d); transition: background var(--t-1), border-color var(--t-1), transform var(--t-1); }
.jboard__rail i:first-of-type { justify-self: start; } .jboard__rail i:last-of-type { justify-self: end; }
.jboard__rail i.is-done { background: var(--cyan); border-color: var(--cyan); }
.jboard__rail i.is-on { transform: scale(1.5); background: var(--white); border-color: var(--cyan); }
.jboard__meta { display: none; }
@media (min-width: 960px) {
  .jboard__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line-d); }
  .jboard__meta div { padding: 14px 14px 0 0; display: grid; gap: 4px; }
  .jboard__meta div + div { border-left: 1px solid var(--line-d); padding-left: 14px; }
  .jboard__meta dt { color: var(--mist); }
  .jboard__meta dd { font-size: 0.95rem; color: var(--silver); min-height: 3em; }
  .jboard__status { display: inline-flex; align-items: center; gap: 8px; }
  .jboard__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(232,119,46,0.18); }
}
.steps { display: grid; }
.step { padding: 28px 0 28px 28px; border-left: 2px solid var(--line); position: relative; display: grid; gap: 10px; transition: border-color var(--t-2) var(--ease); }
@media (min-width: 960px) { .step { min-height: 46vh; align-content: center; padding-left: 40px; } }
.step::before { content: ""; position: absolute; left: -7px; top: 36px; width: 12px; height: 12px; border-radius: 50%; background: var(--silver); border: 2px solid var(--line); transition: background var(--t-1), border-color var(--t-1); }
@media (min-width: 960px) { .step::before { top: 50%; margin-top: -40px; } }
.step.is-on, .step.is-done { border-left-color: var(--route); }
.step.is-on::before, .step.is-done::before { background: var(--route); border-color: var(--route); }
.step__n { color: var(--slate); }
.step h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
.step p { color: var(--slate); max-width: 52ch; }
.step__docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.step__docs span { font: 500 0.7rem/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; padding: 7px 9px; border-radius: 4px; background: var(--white); border: 1px solid var(--line); color: var(--ink); }

/* ==========================================================================
   Why Funteg — specification sheet
   ========================================================================== */
.why { background: var(--white); padding-block: clamp(72px, 10vw, 128px); }
.why__grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .why__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; } }
.why__intro { display: grid; gap: 22px; align-content: start; }
@media (min-width: 960px) { .why__intro { position: sticky; top: 110px; } }
.founder { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.founder img { width: 104px; height: 128px; object-fit: cover; object-position: 50% 15%; border-radius: var(--r-2); filter: grayscale(0.15); }
.founder blockquote { font-size: 1.12rem; line-height: 1.45; font-weight: 500; letter-spacing: -0.01em; }
.founder cite { display: block; margin-top: 8px; font-style: normal; }
.spec { border-top: 1px solid var(--ink); }
.spec__row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .spec__row { grid-template-columns: 48px minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px; } }
.spec__row .label { color: var(--action); padding-top: 4px; }
.spec__row h3 { font-size: 1.2rem; letter-spacing: -0.02em; }
.spec__row p { color: var(--slate); font-size: 0.98rem; grid-column: 2; }
@media (min-width: 760px) { .spec__row p { grid-column: 3; } }

/* ==========================================================================
   Sectors
   ========================================================================== */
.sectors { background: var(--silver); padding-block: clamp(72px, 10vw, 120px); }
.sectors__head { display: grid; gap: 18px; margin-bottom: 40px; }
@media (min-width: 960px) { .sectors__head { grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; } }

/* ==========================================================================
   Global network
   ========================================================================== */
.network { position: relative; padding-block: clamp(72px, 10vw, 128px); overflow: hidden; }
.network__grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .network__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; align-items: start; } .globe { position: sticky; top: 96px; } }
.globe { position: relative; aspect-ratio: 1; max-width: 640px; width: 100%; margin-inline: auto; }
.globe svg { width: 100%; height: 100%; overflow: visible; }
.gl-lane { stroke: var(--cyan); stroke-width: 1.6; opacity: 0.6; transition: opacity var(--t-1), stroke-width var(--t-1); vector-effect: non-scaling-stroke; }
.gl-lane.is-sea { stroke-dasharray: 3 5; }
.gl-lane.is-on { opacity: 1; stroke-width: 2.4; }
.gl-lane.is-off { opacity: 0.12; }
.gl-node { fill: var(--silver); }
.gl-label { font: 500 21px/1 var(--mono); letter-spacing: 0.06em; fill: var(--mist); text-transform: uppercase; }
.gl-ring-label { font: 500 17px/1 var(--mono); fill: #6A7891; letter-spacing: 0.06em; }
.network__side { display: grid; gap: 28px; }
.lanes__filter { display: flex; flex-wrap: wrap; gap: 8px; }
.lanes__filter button { border: 1px solid var(--line-d); background: transparent; color: var(--mist); border-radius: var(--r-pill); padding: 8px 14px; font: 500 0.75rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.lanes__filter button[aria-pressed="true"] { border-color: var(--cyan); color: var(--white); background: rgba(34,195,230,0.1); }
.lanes { border-top: 1px solid var(--line-d); }
.lanes li button { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: baseline; padding: 13px 4px; border: 0; border-bottom: 1px solid var(--line-d); background: transparent; color: var(--silver); text-align: left; transition: background var(--t-1); }
.lanes li button:hover, .lanes li button.is-on { background: rgba(255,255,255,0.04); }
.lanes li button span:nth-child(2) { font: 500 0.7rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist); }
.lanes li button span:nth-child(3) { font: 500 0.88rem/1 var(--mono); color: var(--cyan); font-variant-numeric: tabular-nums; }
.lanes li[hidden] { display: none; }
.legend-note { font: 400 0.75rem/1.5 var(--mono); color: var(--mist); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { background: var(--silver); padding-block: clamp(72px, 10vw, 120px); }
.faq__grid { display: grid; gap: 36px; }
@media (min-width: 960px) { .faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; } }
.faq__intro { display: grid; gap: 20px; align-content: start; }
.search { position: relative; }
.search input { width: 100%; min-height: 52px; padding: 12px 16px 12px 46px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--white); font-size: 1rem; }
.search input:focus { outline: 2px solid var(--cobalt); outline-offset: 1px; border-color: transparent; }
.search svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--slate); }
.qa { border-top: 1px solid var(--ink); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 16px; align-items: center; padding: 20px 0; font-weight: 600; font-size: 1.08rem; letter-spacing: -0.01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); justify-self: center; transition: transform var(--t-2) var(--ease); }
.qa details[open] summary::after { transform: rotate(-135deg); }
.qa__a { padding: 0 0 22px; color: var(--slate); display: grid; gap: 10px; max-width: 64ch; }
.qa__empty { padding: 20px 0; color: var(--slate); }
mark { background: rgba(91,52,198,0.16); color: inherit; border-radius: 2px; }

/* ==========================================================================
   Final CTA and footer
   ========================================================================== */
.cta { position: relative; padding-block: clamp(56px, 10vw, 140px) clamp(48px, 7vw, 88px); overflow: hidden; }
.cta__grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .cta__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 72px; align-items: end; } }
.cta h2 { font-size: clamp(2.4rem, 6vw, 5rem); line-height: 0.98; letter-spacing: -0.045em; color: var(--white); }
.cta h2 span { color: var(--cyan); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.contact-list { display: grid; border-top: 1px solid var(--line-d); }
.contact-list a, .contact-list div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-d); text-decoration: none; color: var(--silver); }
.contact-list a:hover span:last-child { color: var(--cyan); }
.contact-list span:first-child { font: 500 0.72rem/1.9 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist); }
.track { margin-top: clamp(48px, 7vw, 80px); display: grid; gap: 14px; padding: 24px; border: 1px solid var(--line-d); border-radius: 12px; background: var(--ink-2); }
@media (min-width: 760px) { .track { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; } }
.track .label { color: var(--cyan); }
.track p { color: #C3CBD8; font-size: 0.98rem; }

.ft { background: var(--ink); color: #C3CBD8; padding-block: clamp(48px, 6vw, 64px) 28px; font-size: 0.95rem; }
.ft__top { display: grid; gap: 32px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) { .ft__top { grid-template-columns: 1.4fr 1fr 1fr 0.8fr 1.2fr; gap: 40px; } }
.ft__brand { grid-column: 1 / -1; display: grid; gap: 16px; align-content: start; }
@media (min-width: 1000px) { .ft__brand { grid-column: auto; } }
.ft__brand img { width: 150px; height: auto; }
.ft__brand p { color: var(--mist); max-width: 36ch; }
.ft__h { font: 500 0.72rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); margin-bottom: 14px; }
.ft ul { display: grid; gap: 8px; }
.ft address { margin-bottom: 4px; }
.ft a { text-decoration: none; color: #DDE3EC; }
.ft a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.ft address { font-style: normal; color: var(--mist); }
.ft__k { margin-top: 12px; margin-bottom: 6px; color: var(--mist); }
.ft__contact { margin-top: 0; }
.ft__contact a { white-space: nowrap; }
@media (max-width: 379px) { .ft__top > div:last-child { grid-column: 1 / -1; } } /* keeps each phone number on one line */
.ft__email { margin-top: 10px; color: var(--mist); overflow-wrap: anywhere; }
.ft__social { display: flex; gap: 10px; margin-top: 4px; }
.ft__social a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-d); display: grid; place-items: center; }
.ft__social svg { width: 16px; height: 16px; }
.ft__base { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-d); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--mist); font-size: 0.86rem; }
.ft__base ul { display: flex; flex-wrap: wrap; gap: 18px; }

/* Contact button, on every device and page, always bottom-right. It opens a short menu upward. The footer
   keeps an empty strip below the legal row, so at the end of the page the button rests there, never on
   the copyright or legal links. Only transform and opacity animate. */
.ft { position: relative; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 88px); }
.cfab { --cfab-edge: 16px; position: fixed; z-index: 80; right: calc(env(safe-area-inset-right, 0px) + var(--cfab-edge)); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--cfab-edge)); width: 56px; height: 56px; }
@media (min-width: 900px) { .cfab { --cfab-edge: 24px; } .ft { padding-bottom: 96px; } }
.cfab.is-gliding { transition: transform var(--t-1) var(--ease); } /* returning to rest, or a quote step change */
.cfab__btn { position: relative; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--white); -webkit-tap-highlight-color: transparent;
  background: radial-gradient(circle at 32% 26%, #24324D 0%, var(--ink) 68%);
  box-shadow: inset 0 0 0 1.5px rgba(34,195,230,0.55), inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 22px -8px rgba(11,18,32,0.6), 0 2px 5px rgba(11,18,32,0.28);
  transition: opacity var(--t-1) var(--ease), transform var(--t-1) var(--ease), box-shadow var(--t-1), visibility 0s;
  animation: cfab-in 420ms var(--ease) 250ms backwards; }
@keyframes cfab-in { from { opacity: 0; transform: translateY(10px) scale(0.94); } }
.cfab__mark { width: 40px; height: 40px; }
.cfab__btn:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .cfab__btn:hover { background: radial-gradient(circle at 32% 26%, #2C3B5A 0%, var(--ink-2) 68%); }
  .cfab__btn::after { content: "Contact Funteg"; position: absolute; right: calc(100% + 10px); top: 50%; padding: 7px 12px; border-radius: var(--r-pill); background: var(--ink); color: var(--white); font: 500 0.82rem/1 var(--sans); white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(11,18,32,0.6); opacity: 0; transform: translate(4px, -50%); pointer-events: none; transition: opacity var(--t-1) var(--ease), transform var(--t-1) var(--ease); }
  .cfab__btn:hover::after { opacity: 1; transform: translate(0, -50%); }
  .cfab__btn[aria-expanded="true"]::after { opacity: 0; }
}
.cfab__btn[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--cyan), inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 22px -8px rgba(11,18,32,0.6), 0 2px 5px rgba(11,18,32,0.28); }
.cfab__btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; box-shadow: 0 0 0 6px var(--cobalt), inset 0 0 0 1.5px rgba(34,195,230,0.55); }
.cfab.is-away .cfab__btn { opacity: 0; transform: translateY(12px) scale(0.94); visibility: hidden; pointer-events: none;
  transition: opacity var(--t-1) var(--ease), transform var(--t-1) var(--ease), visibility 0s var(--t-1); }
.cfab__card { position: absolute; right: 0; bottom: calc(100% + 12px); width: min(296px, calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-height: calc(100vh - var(--header-h) - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - var(--header-h) - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain; padding: 6px; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 48px -20px rgba(11,18,32,0.45), 0 2px 6px rgba(11,18,32,0.08);
  opacity: 0; transform: translateY(8px) scale(0.97); transform-origin: 100% 100%; transition: opacity 180ms var(--ease), transform 220ms var(--ease); }
.cfab__card.is-open { opacity: 1; transform: none; }
/* Phones in landscape: open beside the button, still growing upward, so the card stays below the header */
@media (max-height: 520px) and (orientation: landscape) {
  .cfab__card { bottom: 0; right: calc(100% + 12px); max-height: calc(100vh - var(--header-h) - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - var(--header-h) - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
}
.cfab__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-left: 10px; }
.cfab__title { font: 500 0.72rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.cfab__close { width: 44px; height: 44px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--slate); }
.cfab__close:hover { background: var(--silver); color: var(--ink); }
.cfab__close svg { width: 18px; height: 18px; }
.cfab__menu { display: grid; gap: 2px; }
.cfab__menu a, .cfab__menu button { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; text-decoration: none; }
/* The card sits inside the footer, so its links must override the footer's white, underlined link hover */
.cfab__menu a:hover, .cfab__menu button:hover, .cfab__menu a:focus-visible, .cfab__menu button:focus-visible { background: var(--silver); color: var(--ink); text-decoration: none; }
.cfab__menu :focus-visible { outline-offset: -2px; border-radius: 10px; }
.cfab__ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; }
.cfab__ico svg { width: 20px; height: 20px; }
.cfab__ico--call { background: rgba(34,195,230,0.14); color: #0B6F8A; }
.cfab__ico--wa { background: rgba(11,18,32,0.07); color: var(--ink); }
.cfab__ico--quote { background: var(--action); color: var(--white); }
.cfab__txt { display: grid; min-width: 0; line-height: 1.3; }
.cfab__txt b { font-size: 0.98rem; font-weight: 600; }
.cfab__txt span { font-size: 0.86rem; color: var(--slate); font-variant-numeric: tabular-nums; }
@media (max-height: 520px) and (orientation: landscape) { .cfab__menu a, .cfab__menu button { min-height: 48px; padding-block: 4px; } }
@media (prefers-reduced-motion: reduce) { .cfab.is-gliding, .cfab__btn, .cfab.is-away .cfab__btn, .cfab__card { transition: none; animation: none; } .cfab__card { transform: none; } .cfab.is-away .cfab__btn { transform: none; } }

/* ==========================================================================
   The route line (signature)
   ========================================================================== */
.routeline { position: absolute; z-index: 5; inset: 0 0 auto 0; width: 100%; pointer-events: none; overflow: visible; }
.routeline path { fill: none; stroke: var(--route); stroke-width: 2; stroke-linecap: round; }
.routeline path.is-dash { stroke-dasharray: 2 7; }
.routeline path.is-dot { stroke-dasharray: 0.1 8; stroke-width: 3; }
.routeline path.is-ghost { stroke: rgba(27,168,208,0.18); stroke-dasharray: none; stroke-width: 2; }
/* The travelling plane: white with a route-blue outline, so it reads on paper and dark sections alike */
.routeline path.rl-head { fill: var(--white); stroke: var(--route); stroke-width: 1.1; stroke-linejoin: round; }
.routeline .rl-end { fill: var(--route); }
.rl-chip { position: absolute; z-index: 6; left: 0; top: 0; pointer-events: none; font: 500 0.66rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 8px; border-radius: 4px; background: var(--ink); color: var(--cyan); border: 1px solid var(--line-d); white-space: nowrap; transition: opacity var(--t-1); display: none; }
.rl-chip.is-vertical { writing-mode: vertical-rl; padding: 8px 5px; }
main { position: relative; }

/* ==========================================================================
   Quote drawer
   ========================================================================== */
.qd { position: fixed; inset: 0; z-index: 150; display: grid; grid-template-rows: minmax(0, 1fr); justify-items: end; visibility: hidden; }
.qd.is-open { visibility: visible; }
.qd__scrim { position: absolute; inset: 0; background: rgba(11,18,32,0.55); opacity: 0; transition: opacity var(--t-2) var(--ease); border: 0; }
.qd.is-open .qd__scrim { opacity: 1; }
.qd__panel { position: relative; width: min(680px, 100%); height: 100vh; height: 100dvh; background: var(--white); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; transform: translateX(100%); transition: transform var(--t-3) var(--ease); box-shadow: -30px 0 60px -30px rgba(11,18,32,0.5); padding-top: env(safe-area-inset-top, 0px); }
.qd.is-open .qd__panel { transform: none; }
.qd__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px clamp(18px, 4vw, 36px); border-bottom: 1px solid var(--line); }
.qd__top h2 { font-size: 1.3rem; letter-spacing: -0.02em; }
.qd__close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; font-size: 1.4rem; line-height: 1; }
.qd__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 14px clamp(18px, 4vw, 36px); border-bottom: 1px solid var(--line); background: var(--silver); }
.qd__steps li { display: grid; gap: 8px; font: 500 0.66rem/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.qd__steps li::before { content: ""; height: 3px; border-radius: 2px; background: var(--line); transition: background var(--t-2) var(--ease); }
.qd__steps li.is-done::before, .qd__steps li.is-on::before { background: var(--action); }
.qd__steps li.is-on { color: var(--ink); }
@media (max-width: 480px) { .qd__steps li span { display: none; } .qd__steps li.is-on span { display: inline; white-space: nowrap; } }
.qd__body { overflow-y: auto; padding: 26px clamp(18px, 4vw, 36px) 32px; overscroll-behavior: contain; }
.qd__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px clamp(18px, 4vw, 36px) calc(env(safe-area-inset-bottom, 0px) + 14px); border-top: 1px solid var(--line); background: var(--white); }
.qd__foot .muted { font-size: 0.85rem; }
.qstep { display: grid; gap: 22px; }
.qstep[hidden] { display: none; }
.qstep > div[data-journey] { display: grid; gap: 22px; }   /* storage question groups keep the form's spacing */
.qstep > header { display: grid; gap: 6px; }
.qstep > header h3 { font-size: 1.6rem; letter-spacing: -0.03em; }
.qstep > header p { color: var(--slate); font-size: 0.97rem; }
.fgrid { display: grid; gap: 18px; }
@media (min-width: 560px) { .fgrid--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 7px; min-width: 0; }
.field > label, .field > legend, .field .lbl { font-weight: 550; font-size: 0.95rem; }
.field .opt { font-weight: 400; color: var(--slate); font-size: 0.85rem; }
.field input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #C5CCD6; border-radius: var(--r-2); background: var(--white); font-size: 1rem; transition: border-color var(--t-1), box-shadow var(--t-1); }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(31,79,224,0.18); }
.field .hint { font-size: 0.85rem; color: var(--slate); }
.field .err { font-size: 0.86rem; color: #B42318; display: none; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #B42318; }
.field.is-invalid .err { display: block; }
fieldset.field { border: 0; padding: 0; margin: 0; }
.choices { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span { display: grid; gap: 2px; min-height: 56px; padding: 12px 14px; border: 1px solid #C5CCD6; border-radius: var(--r-2); font-weight: 550; transition: border-color var(--t-1), background var(--t-1); }
.choice small { font-weight: 400; font-size: 0.8rem; color: var(--slate); }
.choice input:checked + span { border-color: var(--action); background: rgba(91,52,198,0.07); box-shadow: inset 0 0 0 1px var(--action); }
.choice input:focus-visible + span { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.drop { border: 1.5px dashed #B6BFCC; border-radius: var(--r-2); padding: 20px; display: grid; gap: 8px; justify-items: start; background: var(--silver); transition: border-color var(--t-1), background var(--t-1); }
.drop.is-over { border-color: var(--action); background: rgba(91,52,198,0.06); }
.drop input { font-size: 0.9rem; max-width: 100%; }
.files { display: grid; gap: 6px; }
.files li { display: flex; justify-content: space-between; gap: 10px; font-size: 0.88rem; padding: 8px 10px; border-radius: 6px; background: var(--white); border: 1px solid var(--line); }
.files li button { border: 0; background: transparent; color: #B42318; font-size: 0.85rem; }
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 0.93rem; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--action); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dg-note { font-size: 0.88rem; padding: 12px 14px; border-left: 3px solid var(--orange); background: #FFF6EF; border-radius: 0 6px 6px 0; }

/* Shipment file (summary) */
.done { display: grid; gap: 18px; text-align: left; }
.done__mark { width: 64px; height: 64px; border-radius: 50%; background: var(--action); color: var(--white); display: grid; place-items: center; }
.done__mark svg { width: 30px; height: 30px; }
.alert { padding: 12px 14px; border-radius: 6px; background: #FEF3F2; color: #912018; font-size: 0.92rem; }

.is-paused *, .is-paused *::before, .is-paused *::after { animation-play-state: paused !important; }

/* ==========================================================================
   Reduced motion: show every element in its final state
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .mp-pulse, .mr-dash, .mr-scan { animation: none !important; }
  /* Visibility must switch at once, or the quote drawer's first field is still hidden when it is focused */
  .qd, .qd * { transition-property: opacity, transform !important; }
}

/* ==========================================================================
   Document pages (privacy, terms, cookies) — shipment-file language
   ========================================================================== */
.doc-page { padding-top: calc(var(--header-h) + 48px); padding-bottom: clamp(64px, 9vw, 120px); background: var(--silver); }
.doc-head { display: grid; gap: 18px; margin-bottom: 40px; }
.doc-head h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); letter-spacing: -0.045em; line-height: 1; }

.doc-grid { display: grid; gap: 40px; }
.doc-grid > *, .doc-head > * { min-width: 0; }
@media (min-width: 1000px) { .doc-grid { grid-template-columns: 260px minmax(0, 1fr); gap: 72px; } }
.doc-toc { align-self: start; }
@media (min-width: 1000px) { .doc-toc { position: sticky; top: 104px; } }
.doc-toc ol { display: grid; gap: 2px; border-left: 1px solid var(--line); counter-reset: t; }
.doc-toc a { display: grid; grid-template-columns: 30px 1fr; padding: 6px 0 6px 14px; font-size: 0.92rem; color: var(--slate); text-decoration: none; }
.doc-toc a::before { counter-increment: t; content: counter(t, decimal-leading-zero); font: 500 0.72rem/1.9 var(--mono); }
.doc-toc a:hover { color: var(--ink); }
.doc-body { max-width: 72ch; counter-reset: s; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: clamp(22px, 4vw, 48px); }
.doc-body section { padding-block: 26px; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.doc-body section:first-child { padding-top: 0; }
.doc-body section:last-child { border-bottom: 0; padding-bottom: 0; }
.doc-body h2 { font-size: 1.45rem; letter-spacing: -0.025em; margin-bottom: 12px; display: grid; grid-template-columns: 44px 1fr; align-items: baseline; }
.doc-body h2::before { counter-increment: s; content: counter(s, decimal-leading-zero); font: 500 0.8rem/1 var(--mono); color: var(--action); }
.doc-body h3 { font-size: 1.05rem; letter-spacing: -0.01em; margin: 18px 0 6px; }
.doc-body p, .doc-body li { color: #39424F; }
.doc-body p + p { margin-top: 12px; }
.doc-body ul { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.doc-body ul li { position: relative; padding-left: 20px; }
.doc-body ul li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 2px; background: var(--route); }
.doc-body a { color: var(--cobalt); }
.doc-table { overflow-x: auto; margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; }
.doc-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.92rem; }
.doc-table th, .doc-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.doc-table th { font: 500 0.68rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); background: var(--silver); }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table code { font: 500 0.82rem var(--mono); }
.hd--static { background: rgba(255,255,255,0.94); box-shadow: 0 1px 0 var(--line); }

/* Quote form additions */
.ts-box { min-height: 0; }
.check + .check { margin-top: 10px; }

/* ==========================================================================
   Multi-page system
   ========================================================================== */
.small { font-size: 0.88rem; }
.link-row { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.review-bar { position: fixed; z-index: 100; inset: 0 0 auto 0; height: var(--rb); display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 12px; background: var(--orange); color: var(--ink); font: 500 0.72rem/1.2 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.review-bar p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-bar button { flex: none; border: 1px solid rgba(11,18,32,0.4); background: transparent; border-radius: var(--r-pill); padding: 3px 10px; font: inherit; color: inherit; min-height: 24px; }
body.has-rb { --rb: 32px; padding-top: var(--rb); }
.confirm { margin-top: 18px; padding: 14px 16px; border: 1.5px dashed var(--orange); border-radius: 8px; background: #FFF5EC; color: #5A2E0E; display: grid; gap: 6px; }
.confirm .label { color: #A1440F; }

/* Dropdowns (desktop) */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); color: var(--ink); border-top: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(11,18,32,0.35); animation: megaIn var(--t-2) var(--ease); }
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mega__in { max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 24px var(--gutter) 28px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; }
.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.mega__grid a, .mega__all, .dd a { display: grid; gap: 3px; padding: 12px 14px; border-radius: 8px; text-decoration: none; color: var(--ink); transition: background var(--t-1); }
.mega__grid a:hover, .mega__all:hover, .dd a:hover, .mega__grid a:focus-visible, .dd a:focus-visible { background: var(--silver); }
.mega__grid a[aria-current], .dd a[aria-current], .mega__all[aria-current] { background: var(--silver); box-shadow: inset 3px 0 0 var(--action); }
.mega__grid b, .mega__all b, .dd b { font-weight: 600; }
.mega__grid span, .mega__all span, .dd span { font-size: 0.86rem; color: var(--slate); line-height: 1.45; }
.mega__side { border-left: 1px solid var(--line); padding-left: 24px; display: grid; gap: 14px; align-content: start; }
.mega__side .btn { justify-self: start; margin-left: 14px; }
.dd { position: absolute; top: calc(100% + 10px); left: -8px; width: 320px; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 8px; box-shadow: 0 30px 60px -30px rgba(11,18,32,0.4); animation: megaIn var(--t-2) var(--ease); }
.dd ul { display: grid; gap: 2px; }

/* Mobile menu groups */
.mnav__body { display: grid; }
.mnav__group, .mnav__link { border-bottom: 1px solid var(--line); }
.mnav__group summary, .mnav__link { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 8px 0; font-size: clamp(1.4rem, 6vw, 2rem); font-weight: 650; letter-spacing: -0.03em; text-decoration: none; color: var(--ink); }
.mnav__link[aria-current] { color: var(--action); }
.mnav__group summary.is-current { color: var(--action); }
.mnav__group summary:focus-visible, .mnav__link:focus-visible, .mnav__group ul a:focus-visible { outline-offset: -2px; }
.mnav__group summary::-webkit-details-marker { display: none; }
.mnav__group summary::after { content: "+"; font-weight: 400; color: var(--slate); }
.mnav__group[open] summary::after { content: "–"; }
.mnav__group ul { display: grid; gap: 0; padding: 0 0 12px 2px; }
.mnav__group ul a { display: flex; align-items: center; min-height: 44px; padding: 6px 0; font-size: 1.08rem; text-decoration: none; color: var(--ink); }
@media (max-height: 520px) and (orientation: landscape) { .mnav__group summary, .mnav__link { min-height: 48px; font-size: 1.3rem; } }
.mnav__group ul a[aria-current] { color: var(--action); font-weight: 600; }

/* Breadcrumbs */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font: 500 0.72rem/1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: 0.5; }
.crumbs a { color: var(--slate); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }
.crumbs--dark, .crumbs--dark a { color: var(--mist); }
.crumbs--dark [aria-current] { color: var(--silver); }

/* Light page hero */
.phero { background: var(--silver); padding-top: calc(var(--header-h) + 56px); padding-bottom: clamp(48px, 7vw, 88px); border-bottom: 1px solid var(--line); }
.phero__in { display: grid; gap: 20px; }
.phero__h { font-size: clamp(2.5rem, 6.4vw, 5.2rem); line-height: 0.98; letter-spacing: -0.045em; font-weight: 700; max-width: 18ch; }
.phero .lede { max-width: 60ch; }
.phero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.phero--guide .phero__h { font-size: clamp(2.2rem, 5vw, 4rem); max-width: 22ch; }

/* Dark service hero */
.shero { padding-top: calc(var(--header-h) + 40px); padding-bottom: clamp(48px, 7vw, 96px); position: relative; overflow: hidden; }
.shero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 60% at 85% 30%, rgba(34,195,230,0.12), transparent 70%); pointer-events: none; }
.shero__in { position: relative; display: grid; gap: 36px; align-items: center; grid-template-columns: minmax(0, 1fr); }
.shero__in > *, .shero__copy > * { min-width: 0; }
@media (min-width: 960px) { .shero__in { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px; } }
.shero__copy { display: grid; gap: 20px; }
.shero__h { font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 0.98; letter-spacing: -0.045em; font-weight: 700; color: var(--white); }
.shero .lede { color: #C3CBD8; }
.shero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.shero__media { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 640px; background: var(--ink-2); }
.shero__media img { width: 100%; height: 100%; object-fit: cover; }
.shero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,18,32,0.85) 0%, rgba(11,18,32,0) 45%); }
@media (max-width: 959px) { .shero__media { aspect-ratio: 4 / 3; } }

/* Section scaffolding */
.sec { padding-block: clamp(64px, 9vw, 112px); }
.sec--tight { padding-block: clamp(48px, 6vw, 80px); }
.sec--paper { background: var(--silver); }
.sec--stone { background: var(--stone); }
.sec--white { background: var(--white); }
.sec--ink { background: var(--ink); }
.sec .h-section { margin-top: 14px; }
.split2 { display: grid; gap: 32px; }
@media (min-width: 960px) { .split2 { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px; } }
.split2 > div:first-child { display: grid; gap: 14px; align-content: start; }
.grid2, .grid3 { display: grid; gap: 28px; }
@media (min-width: 760px) { .grid2 { grid-template-columns: 1fr 1fr; gap: 48px; } }
@media (min-width: 900px) { .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.grid2 > *, .grid3 > *, .split2 > * { min-width: 0; }
.block { display: grid; gap: 14px; align-content: start; }
.block > .label { color: var(--slate); padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.on-dark .block > .label { color: var(--cyan); border-color: var(--line-d); }
.prose { display: grid; gap: 16px; max-width: 64ch; }
.prose p { color: #39424F; }
.infonote { margin-top: 8px; padding: 18px 20px; border-left: 3px solid var(--route); background: var(--white); border-radius: 0 8px 8px 0; display: grid; gap: 6px; }
.infonote .label { color: var(--route); }
.ticks { display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 22px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 10px; height: 2px; background: var(--route); }
.ticks--warn li::before { background: var(--orange); }
.on-dark .ticks li { color: #DDE3EC; }
.ticks--links a { color: var(--ink); text-decoration: none; }
.ticks--links a:hover { color: var(--action); text-decoration: underline; }
.pairs { display: grid; gap: 0; }
.pairs li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pairs li span { color: var(--slate); font-size: 0.92rem; }

/* Documents list (shipment-file language) */
.docfile { border: 2px solid var(--ink); border-radius: 4px; background: var(--white); display: grid; }
.docfile li { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 4px 18px; padding: 14px 16px; border-bottom: 1px solid #D6D0C4; }
.docfile li:last-child { border-bottom: 0; }
.docfile b { font: 500 0.82rem/1.45 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; }
.docfile span { color: #39424F; font-size: 0.96rem; }
@media (max-width: 560px) { .docfile li { grid-template-columns: 1fr; } }
.docfile--check li { grid-template-columns: 26px minmax(0, 0.9fr) minmax(0, 1.1fr); }
.docfile--check li::before { content: ""; width: 16px; height: 16px; border: 1.5px solid var(--ink); border-radius: 3px; margin-top: 2px; }
@media (max-width: 560px) { .docfile--check li { grid-template-columns: 26px minmax(0, 1fr); } .docfile--check li span { grid-column: 2; } }

/* Five-step process */
.steps5 { margin-top: 36px; display: grid; gap: 0; counter-reset: s; border-top: 1px solid var(--ink); }
@media (min-width: 900px) { .steps5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.steps5 li { padding: 22px 18px 22px 0; display: grid; gap: 8px; align-content: start; border-bottom: 1px solid var(--line); position: relative; }
@media (min-width: 900px) { .steps5 li { border-bottom: 0; border-right: 1px solid var(--line); padding: 26px 20px 8px; } .steps5 li:first-child { padding-left: 0; } .steps5 li:last-child { border-right: 0; } }
.steps5 li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--route); }
@media (min-width: 900px) { .steps5 li:not(:first-child)::before { left: 20px; } }
.steps5 .label { color: var(--action); }
.steps5 h3 { font-size: 1.12rem; letter-spacing: -0.02em; }
.steps5 p { color: var(--slate); font-size: 0.95rem; }

.next { display: grid; gap: 0; border-top: 1px solid var(--ink); counter-reset: n; }
.next li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.next li::before { counter-increment: n; content: counter(n, decimal-leading-zero); font: 500 0.78rem/1.6 var(--mono); color: var(--action); grid-row: span 2; }
.next b { font-weight: 600; }
.next span { color: var(--slate); grid-column: 2; }
.next--compact li { padding: 12px 0; }

/* Related services */
.rel { margin-top: 20px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rel__card { display: grid; gap: 10px; align-content: start; padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); text-decoration: none; color: var(--ink); transition: border-color var(--t-1), transform var(--t-2) var(--ease); }
.rel__card:hover { border-color: var(--ink); transform: translateY(-2px); }
.rel__card b { font-size: 1.12rem; letter-spacing: -0.02em; line-height: 1.25; }
.rel__card .label { color: var(--action); }

/* About */
.timeline { margin-top: 12px; display: grid; gap: 0; border-top: 1px solid var(--ink); }
.timeline li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.timeline__y { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.04em; color: var(--action); }
.timeline h3 { font-size: 1.1rem; margin-bottom: 4px; }
.timeline p { color: var(--slate); }
.portrait { border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5; max-width: 460px; background: var(--stone); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.creds { margin-top: 32px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cred { padding: 24px; border: 2px solid var(--ink); border-radius: 6px; background: var(--white); display: grid; gap: 8px; align-content: start; }
.cred .label { color: var(--action); }
.cred h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
.values { margin-top: 32px; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 1px solid var(--ink); }
.value { padding: 22px 22px 22px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.value .label { color: var(--action); }
.value h3 { font-size: 1.15rem; }
.offices { margin-top: 28px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.office { padding: 22px; border-radius: 10px; background: var(--white); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.office .label { color: var(--action); }
.office h3 { font-size: 1.3rem; letter-spacing: -0.02em; }
.office address { font-style: normal; color: var(--slate); }
.formside .offices { grid-template-columns: 1fr; margin-top: 12px; }
.wide { margin-top: 32px; border-radius: 12px; overflow: hidden; }

.wide figcaption { padding: 10px 0 0; }

/* Industries */
.inds { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.ind { padding: 32px 0; border-bottom: 1px solid var(--line); display: grid; gap: 18px; }
.ind__head { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: baseline; }
.ind__head .label { color: var(--action); }
.ind h2 { font-size: clamp(1.5rem, 3vw, 2.3rem); letter-spacing: -0.035em; }
.ind__grid { display: grid; gap: 18px; padding-left: 44px; }
@media (min-width: 900px) { .ind__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } }
.ind__grid dt { color: var(--slate); margin-bottom: 4px; }
.ind__grid a { color: var(--cobalt); }
.ind .btn { justify-self: start; margin-left: 44px; }

/* Network page */
.nethero { padding-top: calc(var(--header-h) + 32px); }
.nethero .network__grid { margin-top: 24px; }
.legend3 { margin-top: 28px; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.legend3 > div { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 1px solid var(--ink); }
.legend3 h3 { font-size: 1.15rem; }
.sw { width: 28px; height: 14px; display: block; }
.sw--office { width: 14px; border-radius: 50%; background: var(--action); box-shadow: 0 0 0 4px rgba(91,52,198,0.18); }
.sw--partner { border-radius: 50%; width: 14px; border: 2px solid var(--route); }
.sw--lane { height: 0; border-top: 2px dashed var(--route); margin-top: 6px; }

/* Forms on pages */
.formsplit { display: grid; gap: 36px; }
@media (min-width: 1000px) { .formsplit { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 56px; align-items: start; } }
.formsplit > * { min-width: 0; }
.eform { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: clamp(20px, 3.4vw, 36px); position: relative; }
.eform__body { display: grid; gap: 20px; }
.eform__h { font-size: 1.5rem; letter-spacing: -0.03em; }
.eform__submit { justify-self: start; }
.eform__done { display: grid; gap: 16px; }
.eform .err--group { display: none; color: #B42318; font-size: 0.86rem; margin-top: -10px; }
.eform .err--group.is-on { display: block; }
.formside { display: grid; gap: 12px; align-content: start; }
@media (min-width: 1000px) { .formside { position: sticky; top: 100px; } }
.formside > .label { color: var(--slate); }
.formside__urgent { margin-top: 12px; padding: 18px; border-radius: 10px; background: var(--ink); color: var(--silver); display: grid; gap: 6px; }
.formside__urgent .label { color: var(--cyan); }
.formside__urgent a { color: var(--white); text-decoration: none; font-weight: 550; }
.formside__urgent a:hover { text-decoration: underline; }
.channels { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 1px solid var(--ink); }
.channel { padding: 20px 20px 20px 0; display: grid; gap: 6px; align-content: start; border-bottom: 1px solid var(--line); }
.channel .label { color: var(--action); }
.channel a { font-size: 1.1rem; font-weight: 550; color: var(--ink); text-decoration: none; }
.channel a:hover { color: var(--action); text-decoration: underline; }

/* Inline quote (on /quote/) */
.qd--inline { position: static; inset: auto; display: block; visibility: visible; z-index: auto; }
.qd--inline .qd__panel { position: relative; width: 100%; height: auto; transform: none; box-shadow: none; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: grid; grid-template-rows: auto auto auto auto; padding-top: 0; }
.qd--inline .qd__body { overflow: visible; }
.qd--inline .qd__foot { position: sticky; bottom: 0; z-index: 2; }

/* Company profile */
.profhero { align-items: center; }
.profhero > div:first-child { display: grid; gap: 20px; }
@media (min-width: 960px) { .profhero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 56px; } }
.profcover { display: block; justify-self: center; width: min(380px, 80%); transform: rotate(-2deg); box-shadow: 0 40px 80px -36px rgba(11,18,32,0.55); border-radius: 4px; overflow: hidden; transition: transform var(--t-3) var(--ease); }
.profcover:hover { transform: rotate(0); }
.profcover img { width: 100%; height: auto; }
.filemeta { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.filemeta div { padding: 12px 22px 12px 0; margin-right: 22px; border-right: 1px solid var(--line); }
.filemeta div:last-child { border-right: 0; }
.filemeta dt { font: 500 0.66rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.filemeta dd { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.02em; }
.contents { display: grid; gap: 0; }
.contents li { display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: 8px 0; border-bottom: 1px solid #D6D0C4; }
.contents .label { color: var(--action); padding-top: 3px; }
.pband { background: var(--stone); padding-block: clamp(64px, 8vw, 104px); }
.pband__in { display: grid; gap: 32px; align-items: center; }
@media (min-width: 800px) { .pband__in { grid-template-columns: 260px minmax(0, 1fr); gap: 64px; } }
.pband__cover { display: block; width: min(260px, 60%); transform: rotate(-2deg); box-shadow: 0 30px 60px -30px rgba(11,18,32,0.5); border-radius: 3px; overflow: hidden; transition: transform var(--t-3) var(--ease); }
.pband__cover:hover { transform: rotate(0); }
.pband__copy { display: grid; gap: 16px; }
.pband__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* Resources */
.rcards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rcard { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 10px; border: 1px solid var(--line); background: var(--white); text-decoration: none; color: var(--ink); transition: border-color var(--t-1), transform var(--t-2) var(--ease); }
.rcard:hover { border-color: var(--ink); transform: translateY(-2px); }
.rcard .label { color: var(--action); }
.rcard b { font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1.25; }
.rcard .link-arrow { margin-top: 6px; }
.guide__grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .guide__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; } }
.guide__body { display: grid; gap: 36px; }
.gsec h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -0.03em; margin-bottom: 14px; }
.guide__disclaimer { border-top: 1px solid var(--line); padding-top: 16px; }
.tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--white); margin-top: 24px; }
.tbl table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 0.94rem; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.tbl th { font: 500 0.68rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); background: var(--silver); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td:first-child { font-weight: 600; white-space: nowrap; }
.faqgrp + .faqgrp { margin-top: 40px; }
.faqgrp__h { font: 500 0.78rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--action); margin-bottom: 8px; }
.faqgrp[hidden] { display: none; }

/* Document pages: shared crumbs spacing */
.doc-head .crumbs { margin-bottom: 4px; }

/* Print: guides and legal pages print cleanly as branded documents */
@media print {
  .hd, .mnav, .cfab, .ft, .qd, .ctaband, .routeline, .rl-chip, .phero__actions, .formside, .crumbs, .review-bar, .skip { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .phero { padding: 0 0 12pt; background: #fff; border: 0; }
  .phero::before { content: ""; display: block; height: 52pt; background: url(/assets/brand/funteg-logo-168.png) no-repeat left top / auto 52pt; margin-bottom: 16pt; }
  .sec { padding: 8pt 0; background: #fff; }
  .guide__grid { display: block; }
  .docfile li, .tbl tr, .infonote, .guide__disclaimer { break-inside: avoid; }
  .gsec h2, .h-sub { break-after: avoid; }
  .gsec { break-inside: avoid; }
  .tbl { overflow: visible; border: 0; }
  .tbl table { min-width: 0; font-size: 9pt; }
  .tbl th, .tbl td { padding: 6pt 6pt; }
  .tbl td:first-child { white-space: normal; }
  .guide__disclaimer::after { content: "Funteg International Limited · Lagos, Nigeria · info@funteg.com · +234 803 081 0015 · www.funteg.com"; display: block; margin-top: 8pt; }
  a { color: inherit; text-decoration: none; }
}
.journey__h2 { margin-bottom: clamp(32px, 5vw, 56px); }

/* ==========================================================================
   Refinement system (Oct 2026): fewer uppercase labels, page-specific layouts
   ========================================================================== */
/* Sentence-case keys replace most mono uppercase labels */
.block__k, .infonote__k, .cred__k, .office__k, .formside__k, .channel__k, .ind__k, .scen__k, .rcard__kind, .doc-toc__k, .chain__k, .philosophy__k, .confirm__k {
  font: 600 0.84rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--slate); }
.on-dark .block__k, .on-dark .philosophy__k, .on-dark .chain__k { color: var(--cyan); }
.infonote__k { color: var(--route); }
.cred__k, .office__k, .rcard__kind { color: var(--action); }
.h-sub { font-size: clamp(1.3rem, 2.2vw, 1.6rem); letter-spacing: -0.025em; margin-bottom: 18px; }
.block__h { font-size: 1.15rem; letter-spacing: -0.02em; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.on-dark .block__h { color: var(--white); border-color: var(--line-d); }
.block > .label { text-transform: none; letter-spacing: 0; font: 600 0.9rem/1.4 var(--sans); }
.confirm { margin-top: 18px; padding: 12px 14px; border: 1.5px dashed var(--orange); border-radius: 8px; background: #FFF5EC; color: #5A2E0E; display: grid; gap: 4px; font-size: 0.92rem; }
.confirm__k { color: #A1440F; font-size: 0.78rem; }
.on-dark .confirm { background: #2A1B10; color: #FFD9BD; }

/* Page intros */
.phero { padding-top: calc(var(--header-h) + 44px); padding-bottom: clamp(40px, 6vw, 72px); }
.phero__in { gap: 18px; }
.phero__h { font-size: clamp(2.3rem, 5.6vw, 4.6rem); max-width: 20ch; }
.phero--compact { padding-top: calc(var(--header-h) + 32px); padding-bottom: clamp(28px, 4vw, 44px); }
.phero--compact .phero__h { font-size: clamp(2rem, 4.4vw, 3.3rem); }
.phero--compact .lede { font-size: 1.05rem; }
.sec--formtop { padding-top: clamp(28px, 4vw, 48px); }
.nf__code { font: 700 clamp(4rem, 14vw, 9rem)/0.9 var(--sans); letter-spacing: -0.06em; color: var(--route); }

/* Closing action (page-specific, compact) */
.closer { padding-block: clamp(56px, 8vw, 96px); position: relative; }
.closer--ink { background: var(--ink); }
.closer--stone { background: var(--stone); }
.closer__in { display: grid; gap: 24px; }
@media (min-width: 900px) { .closer__in { grid-template-columns: minmax(0, 1.2fr) auto; align-items: end; gap: 56px; } }
.closer__h { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.02; letter-spacing: -0.04em; margin-bottom: 12px; }
.closer--ink .closer__h { color: var(--white); }
.closer p { max-width: 54ch; }
.closer__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Homepage: four stages, featured sectors, network key */
.stages4 { background: var(--silver); padding-block: clamp(72px, 9vw, 112px); }
.stages4__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; margin-bottom: 40px; }
.stages4__list { display: grid; gap: 0; border-top: 1px solid var(--ink); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .stages4__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stages4__list li { position: relative; padding: 24px 16px 24px 0; display: grid; gap: 10px; align-content: start; border-bottom: 1px solid var(--line); }
@media (min-width: 1100px) { .stages4__list li { border-bottom: 0; padding: 32px 28px 8px 0; } .stages4__list li + li { padding-left: 28px; border-left: 1px solid var(--line); } }
.stages4__list li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--route); }
@media (min-width: 1100px) { .stages4__list li + li::before { left: 28px; } }
.stages4__n { font: 500 0.8rem/1 var(--mono); color: var(--action); }
.stages4__list h3 { font-size: 1.5rem; }
.stages4__intro { margin: -20px 0 32px; }
.sectors__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; }
.feat3 { display: grid; gap: 16px; }
@media (min-width: 900px) { .feat3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feat3__card { display: grid; gap: 12px; align-content: start; padding: 26px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color var(--t-1), transform var(--t-2) var(--ease); }
.feat3__card:hover { border-color: var(--ink); transform: translateY(-3px); }
.feat3__n { font: 500 0.8rem/1 var(--mono); color: var(--action); }
.feat3__card h3 { font-size: 1.45rem; letter-spacing: -0.03em; }
.feat3__card p { color: var(--slate); font-size: 0.97rem; }
.network--preview .network__side { align-content: center; gap: 22px; }
.mapkey { display: grid; gap: 10px; color: #C3CBD8; font-size: 0.95rem; }
.mapkey li { display: flex; align-items: center; gap: 12px; }
.sw--ring { width: 18px; height: 18px; border-radius: 50%; border: 1px dashed #6A7891; }
.sw--booked { width: 28px; height: 0; border-top: 2px solid #C5CCD6; margin-top: 6px; }
.on-dark .sw--lane { border-top-color: var(--cyan); }
.why__intro .h-section { margin-bottom: 8px; }
.cta h2 { font-size: clamp(2.2rem, 5.4vw, 4.4rem); }

/* Services overview */
.svcgrid { display: grid; gap: 20px; }
@media (min-width: 700px) { .svcgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .svcgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svccard { display: grid; grid-template-rows: auto 1fr; border-radius: 12px; overflow: hidden; background: var(--white); border: 1px solid var(--line); transition: border-color var(--t-1), transform var(--t-2) var(--ease); }
.svccard:hover { border-color: var(--ink); transform: translateY(-3px); }
.svccard__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--stone); }
.svccard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-4) var(--ease); }
.svccard:hover .svccard__media img { transform: scale(1.04); }
.svccard__mode { position: absolute; left: 12px; bottom: 12px; font: 500 0.7rem/1 var(--mono); color: var(--white); background: rgba(11,18,32,0.8); padding: 6px 9px; border-radius: 4px; }
.svccard__body { padding: 22px; display: grid; gap: 10px; align-content: start; }
.svccard h2 { font-size: 1.45rem; letter-spacing: -0.03em; }
.svccard h2 a { text-decoration: none; }
.svccard h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.svccard__fit { font-size: 0.93rem; color: var(--slate); padding-top: 10px; border-top: 1px solid var(--line); }
.svccard__fit b { color: var(--ink); font-weight: 600; }
.combine__in { display: grid; gap: 36px; }
@media (min-width: 1000px) { .combine__in { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; } }
.chains { display: grid; gap: 14px; }
.chain { padding: 18px; border: 1px solid var(--line-d); border-radius: 12px; background: var(--ink-2); display: grid; gap: 12px; }
.chain__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chain__step { font-size: 0.92rem; font-weight: 550; padding: 8px 12px; border-radius: var(--r-pill); border: 1px solid #3A4660; color: var(--silver); text-decoration: none; white-space: nowrap; }
.chain__step:hover { border-color: var(--cyan); color: var(--white); }
.chain__arrow { width: 18px; height: 2px; background: var(--cyan); position: relative; flex: none; }
.chain__arrow::after { content: ""; position: absolute; right: -1px; top: -3px; border: 4px solid transparent; border-left: 6px solid var(--cyan); border-right: 0; }

/* Service pages */
.feat__head { display: grid; gap: 12px; max-width: 760px; margin-bottom: 28px; }
.calc { background: var(--silver); border: 2px solid var(--ink); border-radius: 8px; padding: clamp(18px, 3vw, 28px); display: grid; gap: 16px; }
.calc__h { font-size: 1.2rem; letter-spacing: -0.02em; }
.calc__grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .calc__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.calc__wide { grid-column: 1 / -1; }
@media (min-width: 560px) { .calc__wide { grid-column: span 2; } }
.calc .field input { min-height: 46px; }
.calc__out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
.calc__out div { padding: 12px; display: grid; gap: 2px; }
.calc__out div + div { border-left: 1px solid var(--line); }
.calc__out dt { font-size: 0.82rem; color: var(--slate); }
.calc__out dd { font: 600 1.25rem/1.2 var(--sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.calc__out .is-key { background: rgba(91,52,198,0.07); }
.calc__out .is-key dd { color: var(--action); }
.calc .btn { justify-self: start; }
.facts6 { display: grid; gap: 0; border-top: 1px solid var(--ink); }
@media (min-width: 760px) { .facts6 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
@media (min-width: 1100px) { .facts6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fact { padding: 20px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; align-content: start; }
.fact h3 { font-size: 1.12rem; letter-spacing: -0.02em; }
.fact p { color: var(--slate); font-size: 0.97rem; }
.duo { display: grid; gap: 16px; }
@media (min-width: 860px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo__col { padding: clamp(20px, 3vw, 30px); border-radius: 12px; border: 2px solid var(--ink); background: var(--white); display: grid; gap: 14px; align-content: start; }
.duo__col--alt { border-color: var(--line); background: var(--silver); }
.duo__col h3 { font-size: 1.2rem; letter-spacing: -0.02em; }
.duo--wide .duo__col p { color: #39424F; }
.trio { display: grid; gap: 28px; }
@media (min-width: 900px) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; } }
.trio > div { display: grid; gap: 12px; align-content: start; padding-top: 18px; border-top: 2px solid var(--ink); }
.trio h3 { font-size: 1.15rem; letter-spacing: -0.02em; }
.trio__out { border-top-color: var(--orange) !important; }
.costs { margin-top: 28px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); counter-reset: c; }
.costs li { padding: 20px; border-radius: 10px; background: var(--white); border: 1px solid var(--line); display: grid; gap: 6px; align-content: start; }
.costs li::before { counter-increment: c; content: counter(c, decimal-leading-zero); font: 500 0.75rem/1 var(--mono); color: var(--action); }
.costs h3 { font-size: 1.05rem; letter-spacing: -0.015em; }
.costs p { color: var(--slate); font-size: 0.94rem; }
.scope { margin-top: 28px; display: grid; gap: 28px; }
@media (min-width: 860px) { .scope { grid-template-columns: 1fr 1fr; gap: 48px; } }
.scope > div { display: grid; gap: 14px; align-content: start; }
.scope h3 { font-size: 1.15rem; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.scope__note { margin-top: 22px; }
.steps5__n { font: 500 0.78rem/1 var(--mono); color: var(--action); }
.steps5 { margin-top: 28px; }
.infonote { margin-top: 24px; }

/* Stacked tables: a real table on wide screens, labelled cards on narrow ones */
.tbl--stack { overflow: visible; }
.tbl--stack table { min-width: 0; }
.tbl--stack td:first-child { white-space: normal; }
@media (max-width: 759px) {
  .tbl--stack { border: 0; background: none; }
  .tbl--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl--stack tr { display: grid; gap: 0; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); overflow: hidden; }
  .tbl--stack td { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .tbl--stack td:last-child { border-bottom: 0; }
  .tbl--stack td::before { content: attr(data-label); font-weight: 600; font-size: 0.82rem; color: var(--slate); }
  .tbl--stack td:first-child { background: var(--silver); font-weight: 650; }
  .tbl--stack td[data-label=""]::before { content: none; }
  .tbl--stack td[data-label=""] { grid-template-columns: 1fr; }
}

/* About */
.philosophy { padding-block: clamp(64px, 9vw, 112px); }
.philosophy__in { display: grid; gap: 18px; }
@media (min-width: 960px) { .philosophy__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; } .philosophy__k, .philosophy__q { grid-column: 1; } .philosophy__body { grid-column: 2; grid-row: 1 / span 2; } }
.philosophy__q { font-size: clamp(3rem, 8vw, 6rem); font-weight: 700; letter-spacing: -0.05em; line-height: 0.95; color: var(--white); }
.philosophy__body { display: grid; gap: 24px; align-content: start; color: #C3CBD8; }
.vm { display: grid; gap: 0; border-top: 1px solid var(--line-d); }
.vm div { padding: 14px 0; border-bottom: 1px solid var(--line-d); display: grid; gap: 4px; }
.vm dt { font-weight: 600; color: var(--cyan); font-size: 0.9rem; }
.values { margin-top: 28px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); border: 0; }
.value { padding: 24px; border-radius: 12px; border: 1px solid var(--line); background: var(--silver); display: grid; gap: 10px; align-content: start; }
.value h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
.value p { color: #39424F; }
.value__proof { padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.94rem; color: var(--slate) !important; display: grid; gap: 4px; }
.value__proof span { font-weight: 600; color: var(--action); font-size: 0.82rem; }
.creds__more { margin-top: 22px; }

/* Industries */
.inds { display: grid; gap: 40px; border: 0; grid-template-columns: minmax(0, 1fr); }
.inds > * { min-width: 0; }
@media (min-width: 1000px) { .inds { grid-template-columns: 240px minmax(0, 1fr); gap: 64px; } .inds__index { position: sticky; top: 110px; align-self: start; } }
.inds__index ol { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 1000px) { .inds__index ol { display: grid; gap: 2px; border-left: 1px solid var(--line); } }
.inds__index a { display: block; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 0.92rem; background: var(--white); }
@media (min-width: 1000px) { .inds__index a { border: 0; border-radius: 0; background: none; padding: 7px 0 7px 16px; color: var(--slate); } .inds__index a:hover { color: var(--ink); } }
.inds__list { display: grid; border-top: 1px solid var(--ink); }
.ind { padding: 36px 0; border-bottom: 1px solid var(--line); display: grid; gap: 18px; scroll-margin-top: 100px; }
.ind__head { display: flex; align-items: baseline; gap: 14px; }
.ind__n { font: 500 0.8rem/1 var(--mono); color: var(--action); }
.ind h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.035em; }
.ind__body { display: grid; gap: 20px; }
.ind__challenge { font-size: 1.15rem; line-height: 1.5; max-width: 62ch; }
.ind__grid { display: grid; gap: 16px; }
@media (min-width: 860px) { .ind__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.ind__grid dt { font-weight: 600; font-size: 0.86rem; color: var(--slate); margin-bottom: 4px; }
.ind__grid dd { font-size: 0.97rem; }
.ind__svcs { display: grid; gap: 4px; }
.ind__svcs a { color: var(--cobalt); }
.ind .btn { justify-self: start; margin: 0; }

/* Network */
.nethero .h-section { margin-top: 4px; }
.legend3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.legend3 .sw { margin-bottom: 4px; }
.legend-note { margin-top: 12px; }
.lanes { margin-top: 14px; }

/* How it works: checklist */
.prep__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 28px; }
.prep__grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.prep__grp { padding: 22px; border-radius: 10px; background: var(--white); border: 1px solid var(--line); }
.prep__grp h3 { font-size: 1.1rem; margin-bottom: 12px; }
.prep__grp ul { display: grid; gap: 10px; }
.prep__grp li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 0.95rem; }
.prep__box { width: 16px; height: 16px; border: 1.5px solid var(--ink); border-radius: 3px; margin-top: 3px; }

/* Forms */
.fgrid--3 { display: grid; gap: 14px; }
@media (min-width: 640px) { .fgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.field--group { gap: 12px; }
.choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choices--3 .choice span { min-height: 48px; align-content: center; }
.more { border: 1px solid var(--line); border-radius: 10px; background: var(--silver); }
.more summary { cursor: pointer; padding: 14px 16px; font-weight: 550; min-height: 48px; }
.more__body { padding: 4px 16px 18px; display: grid; gap: 16px; }
.done__file { display: grid; border: 2px solid var(--ink); border-radius: 4px; }
.done__file div { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.done__file div:last-child { border-bottom: 0; }
.done__file dt { font-size: 0.86rem; color: var(--slate); }
.done__file dd { font: 500 0.95rem/1.4 var(--mono); overflow-wrap: anywhere; }
.route-tip { padding: 12px 14px; border-left: 3px solid var(--route); background: var(--silver); border-radius: 0 6px 6px 0; font-size: 0.93rem; }
.alert { display: grid; gap: 6px; }
.alert a { color: inherit; font-weight: 600; }
.formside__k { margin-top: 10px; }
.formside__k:first-child { margin-top: 0; }
.formside__urgent .formside__k { color: var(--cyan); }
.formside__urgent span { color: #C3CBD8; font-size: 0.93rem; }
.formside__urgent .btn { justify-self: start; margin-top: 6px; }
.formside .rel__card { margin-top: 4px; }

/* Contact */
.channels { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.channel__k { color: var(--action); }
.channel--main > a { font-size: 1.4rem; }
.office--compact { padding: 16px; }

/* Company profile */
.filemeta dt { font: 600 0.8rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; }
.contents { border-top: 1px solid var(--ink); }
.contents li { grid-template-columns: 40px minmax(0, 1fr); padding: 10px 0; }
.contents__n { font: 500 0.78rem/1.6 var(--mono); color: var(--action); }
.reader { background: var(--stone); padding-top: calc(var(--header-h) + 28px); padding-bottom: 72px; }
.reader__bar { position: sticky; top: calc(var(--header-h) + var(--rb, 0px)); z-index: 10; display: grid; gap: 10px; padding: 14px 0; background: var(--stone); border-bottom: 1px solid var(--line); margin-bottom: 24px; }
@media (min-width: 900px) { .reader__bar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .reader__bar .crumbs { grid-column: 1 / -1; } }
.reader__h { font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.03em; }
.reader__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.reader__pages { display: grid; gap: 24px; justify-items: center; }
.reader__page { width: min(820px, 100%); }
.reader__page img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 20px 50px -24px rgba(11,18,32,0.45); background: var(--white); }
.reader__page figcaption { margin-top: 8px; font-size: 0.85rem; color: var(--slate); text-align: center; }

/* Resources */
.rtools { display: grid; gap: 12px; margin-bottom: 14px; }
@media (min-width: 900px) { .rtools { grid-template-columns: minmax(0, 1fr) 300px 220px; align-items: center; } .rtools .h-sub { margin: 0; } }
.search--sm input { min-height: 46px; }
.rtools__s { min-height: 46px; padding: 8px 12px; border-radius: var(--r-2); border: 1px solid #C5CCD6; background: var(--white); }
.rcount { min-height: 1.4em; margin-bottom: 8px; }
.rcard__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rcard__meta span { font-size: 0.78rem; padding: 4px 8px; border-radius: 4px; background: var(--silver); color: var(--slate); }
.rempty { padding: 28px; border: 1px dashed var(--line); border-radius: 10px; display: grid; gap: 10px; }
.rempty .link-arrow { margin-right: 18px; }
.rmore { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rmore__item { display: grid; gap: 6px; padding: 20px 22px; border-radius: 10px; background: var(--white); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color var(--t-1); }
.rmore__item:hover { border-color: var(--ink); }
.rmore__item b { font-size: 1.1rem; letter-spacing: -0.02em; }
.gmeta { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gmeta div { padding: 10px 20px 10px 0; margin-right: 20px; border-right: 1px solid var(--line); }
.gmeta div:last-child { border-right: 0; }
.gmeta dt { font-size: 0.8rem; color: var(--slate); }
.gmeta dd { font-weight: 600; }
.tbl--inco td:first-child { font: 600 0.95rem var(--mono); }

/* FAQ */
.faq__topics ol { display: flex; flex-wrap: wrap; gap: 6px; }
.faq__topics a { display: inline-block; padding: 7px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--white); text-decoration: none; color: var(--ink); font-size: 0.9rem; }
.faq__topics a:hover { border-color: var(--ink); }
.faqgrp { scroll-margin-top: 100px; }
.faqgrp__h { font: 650 1.2rem/1.2 var(--sans); letter-spacing: -0.02em; text-transform: none; color: var(--ink); margin-bottom: 6px; }
.qa__links { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 0.94rem; }
.qa__empty { display: grid; gap: 12px; padding: 24px; border: 1px dashed var(--line); border-radius: 10px; background: var(--white); }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.suggest button { min-height: 40px; padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--silver); }
.suggest button:hover { border-color: var(--ink); }

/* Legal */
.doc-page { padding-top: calc(var(--header-h) + 40px); }
.doc-meta a { color: var(--cobalt); }
.doc-toc__k { margin-bottom: 10px; }

/* Print: guides, checklist and legal pages print cleanly as branded documents */
@media print {
  .closer, .gmeta + .phero__actions, .phero__actions, .prep__head .btn { display: none !important; }
  body.print-checklist main > *:not(#checklist) { display: none !important; }
  body.print-checklist #checklist { padding: 0; background: #fff; }
  body.print-checklist #checklist::before { content: ""; display: block; height: 52pt; background: url(/assets/brand/funteg-logo-168.png) no-repeat left top / auto 52pt; margin-bottom: 12pt; }
  .prep__grp { break-inside: avoid; border-color: #999; }
  .tbl--stack thead { position: static; width: auto; height: auto; clip: auto; }
  .tbl--stack tr { display: table-row; }
  .tbl--stack td { display: table-cell; }
  .tbl--stack td::before { content: none; }
  .confirm, .review-bar { display: none !important; }
}

/* About: head office photo shown upright beside the offices */
.officesplit { display: grid; gap: 32px; }
@media (min-width: 900px) { .officesplit { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 64px; align-items: start; } }
.officesplit__img img { width: 100%; height: auto; aspect-ratio: 646 / 1011; object-fit: cover; border-radius: 12px; max-height: 640px; }
@media (max-width: 899px) { .officesplit__img img { aspect-ratio: 4 / 5; object-position: 50% 30%; max-height: 520px; } }
.officesplit__img figcaption { margin-top: 10px; }
.officesplit .offices { grid-template-columns: 1fr; }
.officesplit .lede { margin-top: 16px; }
.officesplit__more { margin-top: 18px; }

/* Medium desktops: keep the map and its chips clear of the headline */
@media (min-width: 960px) and (max-width: 1279px) { .hero__map { left: 42%; } .hero__copy { max-width: 540px; } }
@media (min-width: 960px) and (max-width: 1279px) { .tiles { display: none; } }
@media (min-width: 1280px) { .proof__num { font-size: 1.85rem; } }
/* Phones: keep the map's routes clear of the logo and menu button */
@media (max-width: 959px) {
  .hero__scrim { background:
    linear-gradient(180deg, var(--ink) 0, rgba(11,18,32,0.92) 110px, rgba(11,18,32,0) 230px),
    linear-gradient(0deg, rgba(11,18,32,1) 0%, rgba(11,18,32,0.88) 34%, rgba(11,18,32,0) 70%); }
}
@media (max-width: 700px) { .rb-long { display: none; } }