/*
Theme Name: Xpressgologistics
Theme URI: https://xpressgologistics.com/
Author: Xpressgologistics
Author URI: https://xpressgologistics.com/
Description: A premium, animation-led theme for freight forwarding and logistics companies. The home page carries a lightweight scroll-driven SVG journey — warehouse to truck, port, vessel, ocean, destination port and last-mile delivery — with About, Services, Work and Contact pages included. No page builder, no jQuery, no image assets.
Version: 2026.09.18.1738
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: xpressgo
Tags: business, portfolio, one-column, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   XpressGo Logistics — design system
   Light slate + amber. No frameworks, no build step.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root{
  --ink:#0e1726;
  --ink-2:#33425a;
  --muted:#64748b;
  --muted-2:#8496ab;
  --line:#e2e8f0;
  --line-2:#eef2f7;
  --bg:#f6f8fb;
  --bg-2:#eef3f9;
  --surface:#ffffff;

  --amber:#f0a726;
  --amber-d:#c9821a;
  --amber-l:#fde3b0;
  --amber-glow:rgba(240,167,38,.24);

  /* A second accent. One accent on a light grey page reads as a template with
     the colour turned off; two carry hierarchy — amber for what you press,
     teal for what you read. */
  --teal:#0e9aa2;
  --teal-d:#0a6f76;
  --teal-l:#d6f0f1;
  --teal-glow:rgba(14,154,162,.22);

  --plum:#7159c8;
  --plum-l:#e8e3fb;

  --navy:#122238;
  --navy-2:#1b3050;

  /* Washes, so a section can carry colour without shouting. */
  --wash-warm:linear-gradient(165deg,#fffaf1 0%,#fdf1dd 100%);
  --wash-cool:linear-gradient(165deg,#f4fbfb 0%,#e6f4f5 100%);
  --wash-sky:linear-gradient(165deg,#f7faff 0%,#eaf1fb 100%);

  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:34px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(15,29,50,.05), 0 2px 6px rgba(15,29,50,.05);
  --sh-2:0 4px 10px rgba(15,29,50,.05), 0 14px 34px rgba(15,29,50,.07);
  --sh-3:0 10px 24px rgba(15,29,50,.07), 0 30px 70px rgba(15,29,50,.10);
  --sh-amber:0 12px 30px rgba(240,167,38,.28);

  --ff-head:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ff-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --wrap:1220px;
  --gut:clamp(20px,4vw,48px);
  --nav-h:76px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Put away rather than thrown away. Anything the owner hides in the editor
   keeps this attribute: gone for a visitor, still in the page, and still there
   to be brought back later. The editor's own stylesheet overrides this so it
   can be seen and clicked while editing. */
[data-xg-off]{display:none!important}
/* No overflow of any kind on <html>. It is tempting as a catch-all for anything
   that hangs over the side of the page, and `clip` reads as the safe version of
   it — but overflow on the root propagates to the viewport, and a viewport that
   is not `visible` stops position:sticky from sticking. That is the whole
   scroll-driven scene on the home page: the warehouse, the truck and the port
   stop holding still and scroll away off the top, leaving a blank band where
   the journey should be. Anything that overflows gets clipped at the element
   that overflows — see .section--blob — and nowhere else. */
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--ff-body);font-size:17px;line-height:1.68;
  font-weight:400;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5{font-family:var(--ff-head);font-weight:700;line-height:1.1;
  letter-spacing:-.028em;margin:0 0 .5em;color:var(--ink)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--amber-l);color:var(--ink)}
.screen-reader-text{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-link:focus{position:fixed;left:16px;top:16px;z-index:999;width:auto;height:auto;
  clip:auto;padding:12px 20px;background:#fff;border-radius:12px;box-shadow:var(--sh-2)}

h1{font-size:clamp(2.15rem,4.4vw,3.55rem);letter-spacing:-.034em}
h2{font-size:clamp(1.95rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.25rem,1.9vw,1.55rem);letter-spacing:-.02em}
h4{font-size:1.06rem;letter-spacing:-.012em}

/* --------------------------------------------------------------- layout -- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding:clamp(72px,9vw,124px) 0;position:relative}
.section--tight{padding:clamp(52px,6vw,84px) 0}
.section--alt{background:var(--surface)}
.section--ink{background:var(--navy);color:#e7eefb}
.section--ink h2,.section--ink h3{color:#fff}
.grid{display:grid;gap:clamp(18px,2.4vw,30px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.center{text-align:center}
.stack-sm>*+*{margin-top:10px}

/* ------------------------------------------------------------ eyebrow ---- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ff-body);font-size:.735rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber-d);
  margin:0 0 16px;
}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--amber)}
.eyebrow--center{justify-content:center}
.section--ink .eyebrow{color:var(--amber)}

.lead{font-size:clamp(1.02rem,1.35vw,1.18rem);color:var(--muted);max-width:62ch}
.section--ink .lead{color:#a9bcd6}
.sec-head{max-width:760px;margin-bottom:clamp(34px,4.5vw,58px)}
.sec-head.center{margin-inline:auto}
/* A head that introduces a tool rather than a whole section sits closer to it. */
.sec-head--tight{margin-bottom:26px}
.sec-head--tight h2{font-size:clamp(1.6rem,2.6vw,2.1rem)}
/* Inside a two-column split the head is the column, so it carries no gap. */
.sec-head--bare{margin-bottom:0;max-width:none}

/* -------------------------------------------------------------- buttons -- */
.btn{
  --_bg:var(--amber);--_fg:#1b1305;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:var(--r-pill);border:1px solid transparent;
  background:var(--_bg);color:var(--_fg);
  font-family:var(--ff-body);font-weight:650;font-size:.95rem;letter-spacing:-.01em;
  cursor:pointer;white-space:nowrap;
  box-shadow:var(--sh-amber);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),background .2s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(240,167,38,.36)}
.btn:active{transform:translateY(0)}
.btn svg{width:16px;height:16px;flex:none}
.btn--ghost{--_bg:transparent;--_fg:var(--ink);border-color:var(--line);box-shadow:none;
  backdrop-filter:blur(6px);background:rgba(255,255,255,.6)}
.btn--ghost:hover{box-shadow:var(--sh-1);border-color:#cbd5e1;background:#fff}
.btn--light{--_bg:#fff;--_fg:var(--ink);box-shadow:var(--sh-2)}
.btn--light:hover{box-shadow:var(--sh-3)}
.btn--sm{padding:10px 20px;font-size:.88rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.arrow-link{display:inline-flex;align-items:center;gap:8px;font-weight:620;
  color:var(--amber-d);font-size:.94rem}
.arrow-link span{transition:transform .3s var(--ease)}
.arrow-link:hover span{transform:translateX(5px)}

/* --------------------------------------------------------------- header -- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:120;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),
             border-color .35s var(--ease),backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:var(--line);
  box-shadow:0 1px 20px rgba(15,29,50,.05);
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}
/* ------------------------------------------------------------------ logo --- */
/* The artwork is inlined, so it can be recoloured from here. Two inks: the
   amber, and the dark one that turns white on a dark surface — which is the
   whole reason one file can serve the header and the footer. Nothing inside the
   drawing is painted white, so the cab window, the wheel hubs and the counters
   in the letters show whatever is behind them. */
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);white-space:nowrap}
.brand__logo{display:block;height:38px;flex:none}
.brand__logo svg{display:block;height:100%;width:auto}
:root{--lg-accent:var(--amber);--lg-ink:var(--ink)}
.ftr,.on-dark{--lg-ink:#fff}
.brand__fallback{font-family:var(--ff-head);font-weight:800;
  font-size:clamp(.95rem,1.5vw,1.12rem);letter-spacing:-.035em}
.ftr .brand__logo{height:46px}

/* The old amber tile is gone, but a custom logo uploaded in WordPress still
   lands in the same slot. */
.brand--custom img{display:block;height:38px;width:auto}

.nav{display:flex;align-items:center;gap:4px}
.nav a{
  position:relative;padding:9px 15px;border-radius:var(--r-pill);
  font-size:.94rem;font-weight:530;color:var(--ink-2);
  transition:color .2s,background .2s;
}
.nav a:hover{color:var(--ink);background:rgba(15,29,50,.045)}
.nav a.is-active{color:var(--ink);font-weight:640}
.nav a.is-active::after{
  content:"";position:absolute;left:50%;bottom:2px;translate:-50% 0;
  width:16px;height:2.5px;border-radius:3px;background:var(--amber);
}
.hdr__cta{display:flex;align-items:center;gap:12px}

.burger{display:none;width:44px;height:44px;border:1px solid var(--line);
  background:rgba(255,255,255,.7);border-radius:13px;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger i{display:block;width:17px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── the menu behind the burger ──────────────────────────────────────────
   A full sheet, not a flap. It used to stop two thirds of the way down and
   let the page show through underneath a translucent panel, so the page and
   the menu were legible at the same time and neither of them read properly.
   It now covers the screen from under the header to the bottom edge, is
   opaque, and scrolls on its own if the list ever outgrows a small phone. */
.mnav{
  position:fixed;inset:var(--nav-h) 0 0;z-index:119;
  background:var(--bg);
  padding:10px var(--gut) calc(26px + env(safe-area-inset-bottom,0px));
  display:none;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.mnav.is-open{display:flex}

/* The pages: one per line, generously tappable, separated by a hairline so it
   reads as a list rather than as loose words on a sheet. WordPress hands this
   over as a <ul>; the theme's own fallback does the same, so both are stripped
   of their bullets here and neither needs a special case. */
.mnav__list{list-style:none;margin:0;padding:0;display:block}
.mnav__list li{margin:0}
.mnav__list>a{display:block}
.mnav a:not(.btn){
  display:block;padding:16px 2px;line-height:1.25;
  font-family:var(--ff-head);font-size:1.12rem;font-weight:640;
  color:var(--ink);border-bottom:1px solid var(--line-2);
}
.mnav__list li:last-child a,.mnav__list>a:last-child{border-bottom:0}
.mnav a.is-active,.mnav .current-menu-item>a,.mnav a[aria-current="page"]{color:var(--amber-d)}

/* The actions, held together at the bottom of the sheet rather than floating
   in the middle of it, and at the size of a button rather than a banner. */
.mnav .btn{width:100%;margin:0;justify-content:center;padding:14px 20px;font-size:1rem}
/* Under the list, not pinned to the floor: bottom-anchored they sit alone at
   the far end of a tall phone with a screen of nothing above them. */
.mnav__acts{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.mnav__acts .btn--ghost{background:#fff}

/* While it is open the bar above it is solid, so the logo is not sitting on a
   see-through strip with the menu showing through behind it. */
/* The bar is a glass pill floating over the page. Left translucent with the
   menu open, the list scrolls past behind the logo. */
body.nav-open .hdr__in{background:#fff;border-color:var(--line)}

/* ----------------------------------------------------- ambient particles -- */
.ambient{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ambient i{
  position:absolute;display:block;opacity:.5;
  animation:drift linear infinite;
  will-change:transform;
}
.ambient i svg{width:100%;height:100%}
@keyframes drift{
  0%  {transform:translate3d(0,0,0) rotate(0deg)}
  50% {transform:translate3d(14px,-26px,0) rotate(7deg)}
  100%{transform:translate3d(0,0,0) rotate(0deg)}
}

/* ======================================================== SCROLL JOURNEY == */
.journey{position:relative;z-index:1}
.journey__stage{
  position:sticky;top:0;height:100svh;height:100vh;overflow:hidden;
  background:linear-gradient(180deg,#eaf2fb 0%,#f7fafc 62%,#f6f8fb 100%);
}
.journey__stage svg{width:100%;height:100%;display:block;pointer-events:none}
#xg-far,#xg-mid,#xg-world,#xg-veh{will-change:transform}
.xg-vehicle,#xg-transfer,#xg-parcel{opacity:0;transition:opacity .45s linear}
.xg-wheel{transform-box:fill-box;transform-origin:center;
  animation:spin 1.1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.xg-turbine{transform-box:fill-box;transform-origin:center;
  animation:spin 7s linear infinite}
.xg-bob{animation:bob 4.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-9px) rotate(-.75deg)}}
.xg-bob{transform-box:fill-box;transform-origin:50% 90%}
.xg-pin{transform-box:fill-box;transform-origin:50% 100%;
  animation:pinbob 2.6s ease-in-out infinite}
@keyframes pinbob{0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-12px) scale(1.04)}}

/* scrim so text always reads over the scene */
.journey__stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(115% 78% at 22% 46%,rgba(246,248,251,.94) 0%,rgba(246,248,251,.72) 34%,rgba(246,248,251,0) 62%),
    linear-gradient(180deg,rgba(246,248,251,.86) 0%,rgba(246,248,251,0) 22%);
}
.journey__stage[data-side="right"]::after{
  background:
    radial-gradient(115% 78% at 78% 46%,rgba(246,248,251,.94) 0%,rgba(246,248,251,.72) 34%,rgba(246,248,251,0) 62%),
    linear-gradient(180deg,rgba(246,248,251,.86) 0%,rgba(246,248,251,0) 22%);
}

.journey__steps{position:relative;margin-top:-100vh;z-index:2}
.step{
  min-height:100vh;display:flex;align-items:center;
  padding:calc(var(--nav-h) + 24px) 0 40px;
}
.step__inner{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  display:flex}
.step[data-side="right"] .step__inner{justify-content:flex-end}

.panel{
  width:min(560px,100%);
  background:rgba(255,255,255,.76);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--sh-3);
  border-radius:var(--r-xl);
  padding:clamp(26px,3.4vw,42px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
}
.js .panel{opacity:0;transform:translateY(34px) scale(.985)}
.panel.is-in{opacity:1;transform:none}
.panel--hero{width:min(660px,100%);background:rgba(255,255,255,.62)}

.step-no{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;
  font-size:.72rem;font-weight:750;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted-2);
}
.step-no b{
  display:grid;place-items:center;width:30px;height:30px;border-radius:10px;
  background:var(--amber);color:#1b1305;font-family:var(--ff-head);
  font-size:.86rem;font-weight:800;letter-spacing:0;
  box-shadow:0 5px 14px var(--amber-glow);
}
.panel h2{font-size:clamp(1.55rem,2.6vw,2.2rem);margin-bottom:.42em}
.panel p{color:var(--ink-2);font-size:1.02rem}

.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);
  font-size:.82rem;font-weight:580;color:var(--ink-2);box-shadow:var(--sh-1);
}
.chip svg{width:14px;height:14px;color:var(--amber-d);flex:none}

.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px;
  padding-top:24px;border-top:1px solid var(--line)}
.metrics div span{display:block;font-family:var(--ff-head);font-weight:800;
  font-size:clamp(1.35rem,2.4vw,1.85rem);letter-spacing:-.03em;color:var(--ink);line-height:1.1}
.metrics div small{display:block;margin-top:3px;font-size:.75rem;font-weight:560;
  color:var(--muted);letter-spacing:.01em}

/* hero USP row */
.usp{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.usp li{display:flex;gap:10px;align-items:flex-start;font-size:.87rem;
  font-weight:560;color:var(--ink-2);line-height:1.4}
.usp svg{width:19px;height:19px;flex:none;color:var(--amber-d);margin-top:1px}

.scroll-cue{
  position:absolute;left:50%;bottom:26px;translate:-50% 0;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:.68rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--muted);transition:opacity .4s linear;
}
.scroll-cue i{display:block;width:24px;height:38px;border:2px solid var(--muted-2);
  border-radius:14px;position:relative;opacity:.7}
.scroll-cue i::after{content:"";position:absolute;left:50%;top:7px;translate:-50% 0;
  width:4px;height:8px;border-radius:3px;background:var(--amber);
  animation:cue 1.9s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}
  30%{opacity:1}70%{transform:translateY(13px);opacity:0}100%{opacity:0}}

/* progress rail */
.rail{
  position:fixed;right:calc(var(--gut) * .55);top:50%;translate:0 -50%;z-index:60;
  display:flex;flex-direction:column;gap:12px;align-items:center;
  opacity:0;pointer-events:none;transition:opacity .4s
}
.rail.is-on{opacity:1;pointer-events:auto}
.rail a{width:9px;height:9px;border-radius:50%;background:#c3cedd;
  transition:all .35s var(--ease);position:relative}
.rail a::before{content:attr(data-label);position:absolute;right:20px;top:50%;
  translate:0 -50%;white-space:nowrap;font-size:.7rem;font-weight:650;color:var(--ink);
  background:#fff;border:1px solid var(--line);padding:5px 10px;border-radius:var(--r-pill);
  box-shadow:var(--sh-1);opacity:0;transition:opacity .25s;pointer-events:none}
.rail a:hover::before{opacity:1}
.rail a.is-on{background:var(--amber);height:26px;border-radius:6px;
  box-shadow:0 4px 12px var(--amber-glow)}

/* ---------------------------------------------------------- inner heroes -- */
.phero{
  position:relative;
  padding:calc(var(--nav-h) + clamp(52px,7vw,92px)) 0 clamp(150px,17vw,220px);
  background:linear-gradient(180deg,#eaf2fb 0%,#f6f8fb 100%);
  overflow:hidden;
}
.phero__deco{position:absolute;inset:auto 0 -2px;height:clamp(118px,15vw,200px);opacity:.85;
  pointer-events:none}
.phero__deco svg{width:100%;height:100%}
.phero .wrap{position:relative;z-index:2}
.phero h1{max-width:20ch}
.phero .lead{max-width:56ch}
.phero .lead{margin-top:6px}
.crumb{display:flex;gap:8px;align-items:center;font-size:.8rem;color:var(--muted);
  margin-bottom:18px;font-weight:520}
.crumb a:hover{color:var(--amber-d)}

/* ---------------------------------------------------------------- cards -- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.5vw,32px);box-shadow:var(--sh-1);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
  position:relative;overflow:hidden;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:#d7e0ea}
.card__ico{
  width:50px;height:50px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(140deg,#fff5e2,#fde8c2);color:var(--amber-d);
  margin-bottom:18px;border:1px solid #fbe4bb;
}
.card__ico svg{width:23px;height:23px}
.card h3{margin-bottom:.45em}
.card p{color:var(--muted);font-size:.955rem}
.card__list{margin-top:16px;display:grid;gap:8px}
.card__list li{display:flex;gap:9px;font-size:.88rem;color:var(--ink-2);align-items:flex-start}
.card__list svg{width:16px;height:16px;color:var(--amber);flex:none;margin-top:3px}
.card--flat{box-shadow:none;background:var(--bg-2);border-color:transparent}
/* The step number leads the card rather than floating over its corner, so a
   heading of any length has nowhere to collide with it. */
.card__num{display:block;font-family:var(--ff-head);font-size:2.5rem;font-weight:800;
  line-height:1;letter-spacing:-.045em;color:var(--amber);margin-bottom:12px}
.card--num h3{margin-top:0}

/* -------------------------------------------------------------- stat bar -- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.stat{padding:6px 0}
.stat b{display:block;font-family:var(--ff-head);font-weight:800;
  font-size:clamp(2rem,3.7vw,3rem);letter-spacing:-.04em;line-height:1;color:var(--amber)}
/* The counter and whatever follows it are one figure: same face, same size,
   same colour. Only the label below is small and quiet — hence the child
   combinator, which the counter inside <b> is not caught by. */
.stat b i{font-style:normal;color:inherit;font-size:inherit}
.stat>span{display:block;margin-top:9px;font-size:.855rem;color:var(--muted);font-weight:520}
.section--ink .stat>span{color:#9db2cf}

/* --------------------------------------------------------------- split --- */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4.5vw,68px);
  align-items:center}
/* grid and flex children default to min-width:auto, so one wide child (a code
   block, a table) can stop the whole column shrinking. Let them shrink and let
   the child handle its own overflow. */
.split>*,.grid>*,.net>*,.tl-h__panel>*,.case>*{min-width:0}
.codecard{max-width:100%}
.split__media{position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(155deg,#eef4fb,#e2ecf7);border:1px solid var(--line);
  box-shadow:var(--sh-2);aspect-ratio:4/3.1}
.split__media svg{width:100%;height:100%;display:block}

/* ------------------------------------------------------------- timeline -- */
.tl{position:relative;padding-left:34px}
.tl::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--amber),var(--line) 82%)}
.tl li{position:relative;padding:0 0 34px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-30px;top:7px;width:12px;height:12px;
  border-radius:50%;background:#fff;border:3px solid var(--amber);box-shadow:0 0 0 4px #fff}
.tl h4{margin-bottom:.25em}
.tl time{font-size:.76rem;font-weight:730;letter-spacing:.13em;text-transform:uppercase;
  color:var(--amber-d);display:block;margin-bottom:6px}
.tl p{color:var(--muted);font-size:.94rem}

/* ------------------------------------------------------------ logo strip -- */
.logos{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,64px);align-items:center;
  justify-content:center;opacity:.62}
.logos span{font-family:var(--ff-head);font-weight:700;font-size:1.02rem;
  letter-spacing:-.02em;color:var(--muted);display:flex;align-items:center;gap:9px}
.logos svg{width:22px;height:22px;color:var(--muted-2)}

/* ------------------------------------------------------------ testimonial -- */
.quote{max-width:860px;margin-inline:auto;text-align:center}
.quote p{font-family:var(--ff-head);font-weight:600;font-size:clamp(1.2rem,2.3vw,1.72rem);
  line-height:1.42;letter-spacing:-.025em;color:var(--ink)}
.section--ink .quote p{color:#fff}
.quote figcaption{margin-top:22px;font-size:.9rem;color:var(--muted)}
.quote figcaption b{color:var(--ink);display:block;font-weight:650}
.section--ink .quote figcaption b{color:#fff}
.quote__mark{width:42px;height:42px;margin:0 auto 22px;color:var(--amber);opacity:.9}

/* ----------------------------------------------------------------- cta --- */
.cta{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:linear-gradient(135deg,#122238 0%,#1b3050 58%,#24405f 100%);
  color:#fff;padding:clamp(38px,5.5vw,76px);
  box-shadow:var(--sh-3);
}
.cta::before{content:"";position:absolute;width:520px;height:520px;right:-140px;top:-190px;
  border-radius:50%;background:radial-gradient(circle,rgba(240,167,38,.32),transparent 66%)}
.cta::after{content:"";position:absolute;width:360px;height:360px;left:-120px;bottom:-190px;
  border-radius:50%;background:radial-gradient(circle,rgba(240,167,38,.16),transparent 68%)}
.cta>*{position:relative;z-index:2}
.cta h2{color:#fff;max-width:18ch}
.cta p{color:#b8c9e2;max-width:56ch}

/* ---------------------------------------------------------------- forms -- */
.form{display:grid;gap:16px}
.field{display:grid;gap:7px}
.field label{font-size:.8rem;font-weight:650;letter-spacing:.02em;color:var(--ink-2)}
.field label i{color:var(--amber-d);font-style:normal}
.field input,.field select,.field textarea{
  width:100%;padding:13px 16px;border-radius:14px;border:1px solid var(--line);
  background:#fff;font-size:.95rem;transition:border-color .2s,box-shadow .2s;
  font-family:inherit;
}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--amber);box-shadow:0 0 0 4px var(--amber-glow)}
.field input::placeholder,.field textarea::placeholder{color:#9fb0c3}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form__note{font-size:.8rem;color:var(--muted)}
.notice{padding:14px 18px;border-radius:14px;font-size:.9rem;font-weight:560}
.notice--ok{background:#eaf7ef;color:#1d6b3d;border:1px solid #c6e8d4}
.notice--err{background:#fdeeec;color:#a03127;border:1px solid #f6cfc9}

.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,30px);box-shadow:var(--sh-1)}
.contact-card h4{margin-bottom:.3em}
.contact-card p,.contact-card a{color:var(--muted);font-size:.94rem}
.contact-card a:hover{color:var(--amber-d)}

.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{cursor:pointer;font-family:var(--ff-head);font-weight:650;font-size:1.04rem;
  letter-spacing:-.015em;list-style:none;display:flex;justify-content:space-between;gap:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--amber-d);font-size:1.4rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:12px;color:var(--muted);font-size:.95rem}

/* --------------------------------------------------------------- footer -- */
.ftr{background:var(--navy);color:#9db2cf;padding:clamp(56px,6vw,84px) 0 30px;
  position:relative;z-index:1}
.ftr__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3vw,44px);
  padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
.ftr .brand{color:#fff;margin-bottom:16px}
.ftr p{font-size:.92rem;max-width:34ch;color:#8fa5c4}
.ftr h5{color:#fff;font-family:var(--ff-head);font-size:.79rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;margin:0 0 16px}
.ftr li{margin-bottom:10px}
.ftr a{font-size:.92rem;color:#9db2cf;transition:color .2s}
.ftr a:hover{color:var(--amber)}
.ftr__btm{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-top:24px;font-size:.83rem;color:#7b91b1}
.social{display:flex;gap:10px;margin-top:20px}
.social a{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);transition:background .25s,transform .25s}
.social a:hover{background:var(--amber);transform:translateY(-2px)}
.social a:hover svg{color:#1b1305}
.social svg{width:17px;height:17px;color:#cfdcee}

/* -------------------------------------------------------------- reveal --- */
[data-rv]{transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
.js [data-rv]{opacity:0;transform:translateY(26px)}
[data-rv].is-in{opacity:1;transform:none}

/* ---------------------------------------------------------- responsive --- */
@media (max-width:1080px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .ftr__top{grid-template-columns:1.4fr 1fr 1fr}
}
@media (max-width:900px){
  :root{--nav-h:68px}
  .nav,.hdr__cta .btn{display:none}
  .burger{display:flex;flex:none}
  /* The wordmark is a long one. At 38px tall it is 255px wide, which on a
     360px phone leaves 60px for the gap and the menu button — so it has to be
     allowed to give way rather than push the button off the end. */
  .hdr__in{gap:12px}
  .brand{min-width:0;gap:8px}
  .brand__logo{height:34px;max-width:100%}
  .brand__logo svg{max-width:100%}
  .hdr{background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-bottom-color:var(--line)}
  .g-2,.g-3,.split,.form__row,.form__grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .rail{display:none}

  /* the scene becomes a band anchored to the bottom, the card floats above it */
  .journey__stage{height:100svh}
  .journey__stage svg{height:100%;object-position:bottom}
  .journey__stage::after{
    background:linear-gradient(180deg,rgba(246,248,251,.97) 0%,rgba(246,248,251,.9) 38%,
      rgba(246,248,251,.34) 56%,rgba(246,248,251,0) 74%)!important;
  }
  .step{align-items:flex-start;padding-top:calc(var(--nav-h) + 18px)}
  .step__inner,.step[data-side="right"] .step__inner{justify-content:flex-start}
  .panel{width:100%;padding:24px 22px;border-radius:var(--r-lg)}
  .usp{grid-template-columns:1fr;gap:9px}
  .metrics{grid-template-columns:repeat(3,1fr);gap:10px}
  .scroll-cue{display:none}
}
@media (max-width:620px){
  body{font-size:16px}
  .g-4,.stats,.ftr__top{grid-template-columns:1fr 1fr}
  .metrics div span{font-size:1.2rem}
  .ftr__top{gap:26px}
  .btn{padding:13px 22px}
  .btn-row .btn{flex:1 1 100%}
  /* Smaller again on a small phone, so the wordmark stays readable instead of
     being squeezed, and the menu button keeps its full 44px target. */
  .brand__logo{height:30px}
}

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .panel,[data-rv]{opacity:1!important;transform:none!important}
  .xg-vehicle,#xg-transfer{transition:none}
}

/* ------------------------------------------------------------ printing --- */
@media print{.hdr,.rail,.ambient,.journey__stage,.scroll-cue{display:none!important}
  .journey__steps{margin-top:0}.step{min-height:auto;page-break-inside:avoid}}

/* ==========================================================================
   INTERACTIVE MODULES
   Tools, timelines, network diagram, data displays, media slots.
   ========================================================================== */

/* ------------------------------------------------------------- tab bars -- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;padding:6px;border-radius:var(--r-pill);
  background:var(--bg-2);border:1px solid var(--line);width:fit-content;max-width:100%}
.tabs button{
  appearance:none;border:0;background:transparent;cursor:pointer;
  padding:10px 18px;border-radius:var(--r-pill);
  font-size:.9rem;font-weight:600;color:var(--muted);white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;
  transition:background .25s var(--ease),color .2s,box-shadow .25s;
}
.tabs button svg{width:16px;height:16px}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.tabs--ink{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.tabs--ink button{color:#9db2cf}
.tabs--ink button:hover{color:#fff}
.tabs--ink button[aria-selected="true"]{background:var(--amber);color:#1b1305}
.tabpanel[hidden]{display:none}
/* On a narrow screen four tabs wrap into a ragged two-and-two, with each one a
   different width and the pill around them a lumpy shape. A grid instead: two
   even columns, everything the same size, and a target big enough for a thumb.
   Below 420px there is not room for two, so they go one to a line. */
@media(max-width:620px){
  .tabs{display:grid;grid-template-columns:1fr 1fr;width:100%;
    border-radius:var(--r-md);gap:5px}
  .tabs button{justify-content:center;padding:12px 10px;font-size:.85rem;
    border-radius:calc(var(--r-md) - 6px);white-space:normal;line-height:1.25;
    min-height:46px;text-align:center}
  .tabs button svg{display:none}
}
/* Two columns hold down to about a 360px screen — "Support & complaints"
   wraps to a second line inside its own button rather than pushing the grid
   apart. Below that there is genuinely not room, and they go one to a line. */
@media(max-width:359px){
  .tabs{grid-template-columns:1fr}
}

/* --------------------------------------------------------- the tool card -- */
.tool{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-3);padding:clamp(20px,2.6vw,32px);position:relative;overflow:hidden;
}
.tool::before{content:"";position:absolute;inset:0 0 auto;height:4px;
  background:linear-gradient(90deg,var(--amber),#fbc667 40%,transparent)}
.tool__head{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;margin-bottom:20px}
.tool__hint{font-size:.8rem;color:var(--muted)}
.tool__hint b{color:var(--ink-2);font-weight:620}
.tool__hint code{background:var(--bg-2);padding:3px 8px;border-radius:7px;
  font-size:.92em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--amber-d);cursor:pointer;border:1px solid var(--line);transition:background .2s}
.tool__hint code:hover{background:#fff6e6}
.tool__form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.tool__form .field{flex:1 1 190px;min-width:0}
.tool__form .btn{flex:0 0 auto;height:49px}
.tool__out{margin-top:24px}
.tool__out:empty{display:none}

/* ------------------------------------------------------------- tracker --- */
.trk{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.trk__top{display:flex;flex-wrap:wrap;gap:18px 30px;padding:20px 24px;
  background:var(--bg-2);border-bottom:1px solid var(--line);align-items:center}
.trk__id{font-family:var(--ff-head);font-weight:800;font-size:1.12rem;letter-spacing:-.02em;
  display:flex;align-items:center;gap:12px}
.trk__meta{display:flex;gap:26px;flex-wrap:wrap;margin-left:auto;font-variant-numeric:tabular-nums}
.trk__meta div{font-size:.8rem;color:var(--muted)}
.trk__meta b{display:block;font-size:.94rem;color:var(--ink);font-weight:620;margin-top:2px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);
  font-size:.73rem;font-weight:730;letter-spacing:.06em;text-transform:uppercase}
.pill svg{width:13px;height:13px}
.pill--ok{background:#e7f5ec;color:#1c6b3f;border:1px solid #c3e6d1}
.pill--live{background:#fff4e0;color:#9a6410;border:1px solid #f8dfae}
.pill--warn{background:#fdeeec;color:#9d2f26;border:1px solid #f5cdc7}
.pill--idle{background:var(--bg-2);color:var(--muted);border:1px solid var(--line)}
.pill--hq{background:var(--ink);color:#fff;border:1px solid var(--ink);margin-left:6px}


.steps{list-style:none;margin:0;padding:26px 24px 28px}
.steps li{position:relative;padding-left:42px;padding-bottom:26px}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:"";position:absolute;left:11px;top:22px;bottom:-4px;width:2px;
  background:var(--line)}
.steps li:last-child::before{display:none}
.steps li::after{content:"";position:absolute;left:4px;top:5px;width:16px;height:16px;
  border-radius:50%;background:#fff;border:2.5px solid var(--line);box-sizing:border-box}
.steps li[data-s="done"]::after{background:#2f9e63;border-color:#2f9e63}
.steps li[data-s="done"]::before{background:#a9d9bf}
.steps li[data-s="active"]::after{background:var(--amber);border-color:var(--amber);
  box-shadow:0 0 0 5px rgba(240,167,38,.22)}
.steps li[data-s="fail"]::after{background:#d9584a;border-color:#d9584a}
.steps li[data-s="pending"]::after{background:#fff;border-color:#cfd8e3;border-style:dashed}
.steps li[data-s="pending"] .steps__h,.steps li[data-s="pending"] .steps__p{opacity:.6}
.steps__h{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.steps__h b{font-family:var(--ff-head);font-weight:670;font-size:1rem;letter-spacing:-.015em}
.steps__h span{font-size:.83rem;color:var(--muted-2)}
.steps__h time{font-size:.8rem;color:var(--muted);margin-left:auto;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.steps__p{margin:5px 0 0;font-size:.9rem;color:var(--ink-2)}
.steps li[data-s="fail"] .steps__p{color:#9d2f26}
.trk__foot{display:flex;gap:12px;flex-wrap:wrap;padding:0 24px 24px}

/* ------------------------------------------------ serviceability result -- */
.pinres{display:grid;grid-template-columns:1.1fr 1fr;gap:0;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;background:#fff}
.pinres__l{padding:24px 26px;border-right:1px solid var(--line)}
.pinres__r{padding:24px 26px;background:var(--bg-2)}
.pinres h4{margin-bottom:4px;font-size:1.28rem}
.pinres .muted{color:var(--muted);font-size:.9rem}
.pinres__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.pinres__grid div{font-size:.78rem;color:var(--muted)}
.pinres__grid b{display:block;font-family:var(--ff-head);font-size:1.06rem;font-weight:700;
  color:var(--ink);margin-top:3px;letter-spacing:-.02em}
.svc-list{display:grid;gap:9px;margin-top:16px}
.svc-list li{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--ink-2)}
.svc-list svg{width:17px;height:17px;flex:none}
.svc-list .yes{color:#2f9e63}
.svc-list .no{color:#b7c2cf}
.svc-list li.off{color:var(--muted-2)}

/* --------------------------------------------------------- rate results -- */
.rates{width:100%;border-collapse:separate;border-spacing:0;font-size:.93rem;
  font-variant-numeric:tabular-nums}
.rates th{text-align:left;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:0 16px 12px}
.rates td{padding:15px 16px;border-top:1px solid var(--line);vertical-align:middle}
.rates tr:hover td{background:var(--bg-2)}
.rates .svc b{font-family:var(--ff-head);font-weight:670;letter-spacing:-.015em;display:block}
.rates .svc span{font-size:.8rem;color:var(--muted)}
.rates .amt{font-family:var(--ff-head);font-weight:800;font-size:1.16rem;letter-spacing:-.03em;
  color:var(--ink);white-space:nowrap}
.rates .amt small{display:block;font-size:.72rem;font-weight:500;color:var(--muted);
  letter-spacing:0;font-family:var(--ff-body)}
.rates .best{position:relative}
.rates .best td{background:#fffaf0}
.rates .best td:first-child{box-shadow:inset 3px 0 0 var(--amber)}
.rates__wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);
  background:#fff;padding:20px 6px 6px}
.rates__note{font-size:.8rem;color:var(--muted);margin-top:14px}

/* ------------------------------------------------- horizontal timeline --- */
.tl-h{position:relative}
.tl-h__rail{position:relative;display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  padding-bottom:4px;margin-bottom:30px}
.tl-h__rail::-webkit-scrollbar{display:none}
.tl-h__rail::before{content:"";position:absolute;left:0;right:0;top:23px;height:2px;
  background:var(--line)}
.tl-h__rail button{
  appearance:none;background:none;border:0;cursor:pointer;position:relative;
  flex:1 0 108px;padding:0 4px 0;display:flex;flex-direction:column;align-items:center;gap:12px;
  font-family:var(--ff-head);font-weight:700;font-size:.95rem;color:var(--muted-2);
  letter-spacing:-.01em;transition:color .25s;
}
.tl-h__rail button::after{content:"";width:14px;height:14px;border-radius:50%;
  background:#fff;border:2.5px solid #cbd5e1;box-sizing:border-box;order:-1;
  margin-top:16px;transition:all .3s var(--ease)}
.tl-h__rail button:hover{color:var(--ink-2)}
.tl-h__rail button:hover::after{border-color:var(--amber)}
.tl-h__rail button[aria-selected="true"]{color:var(--amber-d)}
.tl-h__rail button[aria-selected="true"]::after{background:var(--amber);border-color:var(--amber);
  transform:scale(1.25);box-shadow:0 0 0 5px rgba(240,167,38,.2)}
.tl-h__panel{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,52px);
  align-items:center;min-height:250px}
.tl-h__body h3{font-size:clamp(1.4rem,2.4vw,1.95rem);margin-bottom:.4em}
.tl-h__body p{color:var(--ink-2)}
.tl-h__year{font-family:var(--ff-head);font-weight:800;font-size:clamp(4rem,11vw,7.5rem);
  line-height:.86;letter-spacing:-.05em;color:var(--line);
  font-variant-numeric:tabular-nums;user-select:none;text-align:right}
.tl-h__kpi{display:flex;gap:28px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.tl-h__kpi b{display:block;font-family:var(--ff-head);font-size:1.5rem;font-weight:800;
  letter-spacing:-.03em;color:var(--amber-d)}
.tl-h__kpi span{font-size:.78rem;color:var(--muted)}
.fade-swap{animation:fadeSwap .5s var(--ease-out)}
@keyframes fadeSwap{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------ network diagram -- */
.net{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(20px,3vw,40px);align-items:center}
.net__stage{position:relative;background:linear-gradient(160deg,#f2f7fc,#e8eff7);
  border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-1)}
.net__stage svg{width:100%;height:auto;display:block}
.net-lane{stroke:#c2d3e3;stroke-width:2;fill:none}
.net-lane.on{stroke:var(--amber);stroke-width:3}
.net-pulse{fill:var(--amber);opacity:.85}
.net-hub{cursor:pointer;outline:none}
.net-hub:focus-visible circle.dot{stroke:var(--amber-d);stroke-width:4}
.net-hub:focus-visible circle.halo{opacity:.22}
.tabs button:focus-visible,.chip-btn:focus-visible,.tl-h__rail button:focus-visible,
.svc__more:focus-visible,.media__play:focus-visible{outline:2px solid var(--amber-d);
  outline-offset:2px;border-radius:var(--r-pill)}
.net-hub circle.dot{fill:#fff;stroke:#8fa6bd;stroke-width:3;transition:all .3s var(--ease)}
.net-hub.t1 circle.dot{stroke:var(--amber-d);stroke-width:4}
/* The head office wears the same ring as the other gateways, filled in, so it
   reads as the one hub the map opens on. */
.net-hub.is-hq circle.dot{fill:var(--amber);stroke:var(--amber-d);stroke-width:4}
.net-hub.is-hq text{font-weight:700;fill:var(--ink)}
.net-hub text{font-family:var(--ff-body);font-size:15px;font-weight:600;fill:#5c6f85;
  pointer-events:none;transition:fill .25s}
.net-hub:hover circle.dot,.net-hub.on circle.dot{fill:var(--amber);stroke:var(--amber-d);r:11}
.net-hub:hover text,.net-hub.on text{fill:var(--ink);font-weight:700}
.net-hub circle.halo{fill:var(--amber);opacity:0;transition:opacity .3s}
.net-hub.on circle.halo{opacity:.16}
.net__card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 28px;box-shadow:var(--sh-1)}
.net__card h4{font-size:1.32rem;margin-bottom:2px}
.net__card .muted{color:var(--muted);font-size:.88rem}
.net__card dl{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 0;
  padding-top:20px;border-top:1px solid var(--line)}
.net__card dt{font-size:.76rem;color:var(--muted);margin:0}
.net__card dd{margin:3px 0 0;font-family:var(--ff-head);font-size:1.22rem;font-weight:800;
  letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.net__legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;font-size:.78rem;color:var(--muted)}
.net__legend span{display:inline-flex;align-items:center;gap:7px}
.net__legend i{width:11px;height:11px;border-radius:50%;background:#fff;
  border:3px solid #8fa6bd;display:block}
.net__legend i.t1{border-color:var(--amber-d);border-width:4px}

/* -------------------------------------------------------------- people --- */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.person{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.person:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.person__av{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;
  font-family:var(--ff-head);font-weight:800;font-size:1.22rem;letter-spacing:-.02em;
  background:linear-gradient(145deg,#fff2da,#fbe0b4);color:var(--amber-d);
  border:1px solid #f7dfb5;margin-bottom:18px}
.person h4{margin-bottom:2px;font-size:1.08rem}
.person__role{font-size:.82rem;color:var(--amber-d);font-weight:620;margin-bottom:12px}
.person p{font-size:.9rem;color:var(--muted);margin:0}
.person__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--amber);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.person:hover .person__bar{transform:scaleX(1)}

/* ---------------------------------------------------------- data blocks -- */
.meter{margin-bottom:26px}
.meter:last-child{margin-bottom:0}
.meter__h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-bottom:9px}
.meter__h b{font-size:.95rem;font-weight:620;color:var(--ink)}
.meter__h span{font-family:var(--ff-head);font-weight:800;font-size:1.06rem;
  letter-spacing:-.02em;color:var(--amber-d);font-variant-numeric:tabular-nums}
.meter__track{height:10px;border-radius:6px;background:var(--bg-2);overflow:hidden;display:flex;gap:2px}
.meter__fill{height:100%;border-radius:6px 3px 3px 6px;background:var(--amber);
  width:0;transition:width 1.1s var(--ease-out)}
.meter__fill.alt{background:#8fb4d6;border-radius:3px}
.meter p{margin:9px 0 0;font-size:.85rem;color:var(--muted)}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,20px)}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 24px}
.tile b{display:block;font-family:var(--ff-head);font-weight:800;
  font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.04em;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.tile b i{font-style:normal;font-size:.5em;color:var(--muted-2);letter-spacing:0}
.tile em{display:block;font-style:normal;font-size:.88rem;font-weight:600;color:var(--ink-2);
  margin-top:9px}
.tile span{display:block;font-size:.79rem;color:var(--muted);margin-top:5px}

.spark{width:100%;height:auto;display:block;overflow:visible}
.spark .grid{stroke:var(--line-2);stroke-width:1}
.spark .area{fill:rgba(240,167,38,.14)}
.spark .line{fill:none;stroke:var(--amber);stroke-width:2.5;stroke-linecap:round;
  stroke-linejoin:round}
.spark .dot{fill:#fff;stroke:var(--amber);stroke-width:2.5}
.spark .end{fill:var(--amber);stroke:#fff;stroke-width:2.5}
.spark text{font-family:var(--ff-body);font-size:11px;fill:var(--muted);
  font-variant-numeric:tabular-nums}
.spark text.val{font-weight:700;fill:var(--ink)}

.mix{display:flex;height:44px;border-radius:12px;overflow:hidden;gap:2px;background:var(--bg-2)}
.mix span{display:block;transition:flex .6s var(--ease)}
.mix span:first-child{border-radius:12px 3px 3px 12px}
.mix span:last-child{border-radius:3px 12px 12px 3px}
.mix-key{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:18px}
.mix-key div{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--ink-2)}
.mix-key i{width:11px;height:11px;border-radius:3px;display:block;flex:none}
.mix-key b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}

.delta{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-pill);
  font-size:.76rem;font-weight:700;background:#e7f5ec;color:#1c6b3f;margin-left:6px}

/* ----------------------------------------------------- service explorer -- */
.chips-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,36px)}
.chip-btn{appearance:none;cursor:pointer;padding:10px 18px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:#fff;font-size:.88rem;font-weight:590;
  color:var(--ink-2);transition:all .25s var(--ease)}
.chip-btn:hover{border-color:#cbd5e1;box-shadow:var(--sh-1)}
.chip-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.svc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,30px);position:relative;overflow:hidden;display:flex;
  flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s var(--ease),
  border-color .3s,opacity .35s}
.svc:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:#d7e0ea}
.svc[hidden]{display:none}
.svc__tag{position:absolute;top:20px;right:20px;padding:5px 11px;border-radius:var(--r-pill);
  background:#fff6e6;border:1px solid #fae5c0;color:var(--amber-d);
  font-size:.68rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.svc h3{margin-bottom:.4em;padding-right:70px}
.svc>p{color:var(--muted);font-size:.94rem;flex:1}
.svc__specs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0 0;
  padding-top:18px;border-top:1px solid var(--line)}
.svc__specs div{font-size:.72rem;color:var(--muted)}
.svc__specs b{display:block;font-family:var(--ff-head);font-size:.98rem;font-weight:700;
  color:var(--ink);margin-top:3px;letter-spacing:-.02em}
.svc__more{appearance:none;border:0;background:none;cursor:pointer;padding:16px 0 0;
  display:inline-flex;align-items:center;gap:8px;font-weight:620;font-size:.9rem;
  color:var(--amber-d);font-family:inherit}
.svc__more svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.svc__more[aria-expanded="true"] svg{transform:rotate(180deg)}
.svc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.svc__panel[data-open="1"]{grid-template-rows:1fr}
.svc__panel>div{overflow:hidden}
.svc__panel ul{display:grid;gap:10px;padding-top:16px}
.svc__panel li{display:flex;gap:10px;font-size:.89rem;color:var(--ink-2);align-items:flex-start}
.svc__panel svg{width:16px;height:16px;color:var(--amber);flex:none;margin-top:3px}

/* ------------------------------------------------------ product matrix --- */
.matrix__wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);
  background:#fff;box-shadow:var(--sh-1)}
.matrix{width:100%;border-collapse:separate;border-spacing:0;min-width:760px;font-size:.92rem}
.matrix th{position:sticky;top:0;background:var(--bg-2);text-align:left;
  font-size:.71rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:14px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
.matrix td{padding:16px 18px;border-bottom:1px solid var(--line-2);vertical-align:top}
.matrix tr:last-child td{border-bottom:0}
.matrix tbody tr:hover td{background:#fcfdfe}
.matrix .nm{font-family:var(--ff-head);font-weight:700;letter-spacing:-.02em;color:var(--ink);
  white-space:nowrap}
.matrix .nm small{display:block;font-family:var(--ff-body);font-weight:400;font-size:.8rem;
  color:var(--muted);margin-top:4px;white-space:normal;max-width:26ch}
.matrix .price{font-family:var(--ff-head);font-weight:700;color:var(--amber-d);letter-spacing:1px}
.mbg{display:inline-flex;align-items:center;gap:5px;font-size:.73rem;font-weight:700;
  color:#1c6b3f;background:#e7f5ec;border:1px solid #c3e6d1;padding:4px 9px;
  border-radius:var(--r-pill);white-space:nowrap}
.mbg svg{width:12px;height:12px}

/* ------------------------------------------------------- media / video --- */
.media{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(155deg,#eef4fb,#dfeaf6);box-shadow:var(--sh-2)}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media__ph{width:100%;display:block}
.media__play{position:absolute;inset:0;display:grid;place-items:center;border:0;
  background:linear-gradient(180deg,rgba(12,25,44,0) 30%,rgba(12,25,44,.42));
  cursor:pointer;padding:0}
.media__play i{width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.94);
  display:grid;place-items:center;box-shadow:0 12px 34px rgba(12,25,44,.28);
  transition:transform .35s var(--ease)}
.media__play:hover i{transform:scale(1.08)}
.media__play i::after{content:"";width:0;height:0;margin-left:6px;
  border-left:22px solid var(--amber-d);border-top:14px solid transparent;
  border-bottom:14px solid transparent}
.media__cap{position:absolute;left:0;right:0;bottom:0;padding:22px 26px;color:#fff;
  font-size:.92rem;font-weight:560;text-shadow:0 1px 12px rgba(12,25,44,.5);pointer-events:none}
.media__cap b{display:block;font-family:var(--ff-head);font-size:1.16rem;font-weight:700;
  letter-spacing:-.02em;margin-bottom:3px}

.lightbox{position:fixed;inset:0;z-index:200;display:none;place-items:center;
  padding:clamp(16px,4vw,48px);background:rgba(8,17,31,.86);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lightbox.on{display:grid}
.lightbox__in{width:min(1080px,100%);aspect-ratio:16/9;border-radius:var(--r-lg);
  overflow:hidden;background:#000;box-shadow:0 40px 100px rgba(0,0,0,.5)}
.lightbox iframe,.lightbox video{width:100%;height:100%;border:0;display:block}
.lightbox__x{position:absolute;top:calc(clamp(16px,4vw,48px) - 4px);right:clamp(16px,4vw,48px);
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.1);color:#fff;cursor:pointer;font-size:1.3rem;line-height:1;
  display:grid;place-items:center;transition:background .25s}
.lightbox__x:hover{background:rgba(255,255,255,.2)}
.lightbox__note{position:absolute;left:0;right:0;bottom:clamp(16px,4vw,40px);text-align:center;
  color:#9db2cf;font-size:.86rem;padding-inline:20px}

/* ------------------------------------------------------ gallery / strip -- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery figure{margin:0;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(150deg,#eef4fb,#e2ecf7);position:relative;aspect-ratio:4/3}
.gallery figure:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.gallery svg,.gallery img{width:100%;height:100%;object-fit:cover;display:block}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  font-size:.8rem;font-weight:600;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(12,25,44,.62))}

/* ------------------------------------------------------------- notices --- */
.alert{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;border-radius:var(--r-md);
  background:#fff7e8;border:1px solid #f6e0b4;font-size:.9rem;color:#7a5410}
.alert svg{width:20px;height:20px;flex:none;color:var(--amber-d);margin-top:1px}
.alert b{color:#5c3f0c}

/* ------------------------------------------------------------- locator --- */
.branches{display:grid;gap:12px}
.branch{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-md);transition:box-shadow .3s,border-color .3s}
.branch:hover{box-shadow:var(--sh-1);border-color:#d7e0ea}
.branch__d{width:44px;height:44px;border-radius:14px;background:#fff6e6;border:1px solid #fae5c0;
  display:grid;place-items:center;flex:none;color:var(--amber-d)}
.branch__d svg{width:19px;height:19px}
.branch h4{margin-bottom:2px;font-size:1rem}
.branch p{margin:0;font-size:.86rem;color:var(--muted)}
.branch__km{margin-left:auto;text-align:right;flex:none}
.branch__km b{display:block;font-family:var(--ff-head);font-weight:800;font-size:1.06rem;
  color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.branch__km span{font-size:.74rem;color:var(--muted)}

/* --------------------------------------------------------- misc blocks --- */
.kv{display:grid;gap:2px}
.kv dt{font-size:.76rem;color:var(--muted)}
.kv dd{margin:0 0 14px;font-size:.94rem;color:var(--ink);font-weight:560}
.kv dd:last-child{margin-bottom:0}
.kv dd a{color:var(--amber-d)}

.cert{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-md)}
.cert__b{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--bg-2);color:var(--amber-d);border:1px solid var(--line)}
.cert__b svg{width:19px;height:19px}
.cert b{display:block;font-family:var(--ff-head);font-weight:700;font-size:.98rem;
  letter-spacing:-.015em}
.cert em{display:block;font-style:normal;font-size:.83rem;color:var(--ink-2);margin-top:2px}
.cert span{display:block;font-size:.78rem;color:var(--muted);margin-top:5px}

.award{display:flex;gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.award:last-child{border-bottom:0}
.award time{font-family:var(--ff-head);font-weight:800;font-size:1rem;color:var(--amber-d);
  flex:none;width:56px;font-variant-numeric:tabular-nums}
.award b{font-weight:620;font-size:.98rem;color:var(--ink)}
.award span{display:block;font-size:.83rem;color:var(--muted);margin-top:2px}

.quote-strip{display:flex;gap:14px;align-items:flex-start;padding:22px 26px;
  background:var(--bg-2);border-radius:var(--r-md);border-left:3px solid var(--amber)}
.quote-strip p{font-family:var(--ff-head);font-weight:600;font-size:1.04rem;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 8px}
.quote-strip span{font-size:.84rem;color:var(--muted)}

.jobrow{display:flex;align-items:center;gap:18px;padding:20px 22px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-md);flex-wrap:wrap;
  transition:box-shadow .3s,transform .3s var(--ease)}
.jobrow:hover{box-shadow:var(--sh-1);transform:translateX(3px)}
.jobrow b{font-family:var(--ff-head);font-weight:670;font-size:1.02rem;letter-spacing:-.02em}
.jobrow span{font-size:.84rem;color:var(--muted)}
.jobrow .tagset{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}

/* --------------------------------------------------------- responsive --- */
@media (max-width:1080px){
  .people,.svc-grid{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .net,.tl-h__panel,.pinres{grid-template-columns:1fr}
  .tl-h__year{text-align:left;font-size:3.4rem;margin-bottom:8px}
  .pinres__l{border-right:0;border-bottom:1px solid var(--line)}
  .people,.svc-grid,.gallery{grid-template-columns:1fr}
  .gallery figure:first-child{grid-column:auto;grid-row:auto;aspect-ratio:4/3}
  .trk__meta{margin-left:0;gap:18px}
  .tool__form .btn{width:100%}
  .net__stage svg{min-height:280px}
}
@media (max-width:620px){
  .tiles{grid-template-columns:1fr 1fr}
  .tabs{width:100%}
  .tabs button{flex:1 1 auto;justify-content:center;padding:10px 12px;font-size:.84rem}
  .tabs button svg{display:none}
  .steps__h time{margin-left:0;width:100%}
  .net__card dl{grid-template-columns:1fr 1fr}
}

/* ---------------------------------------------------------- code card --- */
.codecard{
  --code-bg:#0b1725; --code-bar:#12233a; --code-line:rgba(255,255,255,.09);
  background:var(--code-bg);border:1px solid var(--code-line);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 18px 44px rgba(4,12,24,.34);
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  position:relative;
}
.codecard::before{content:"";position:absolute;inset:0 0 auto;height:2px;z-index:2;
  background:linear-gradient(90deg,var(--amber),rgba(240,167,38,.35) 46%,transparent)}
.codecard__bar{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px 11px 16px;background:var(--code-bar);
  border-bottom:1px solid var(--code-line);
}
.codecard__dots{display:flex;gap:6px;flex:none}
.codecard__dots i{width:10px;height:10px;border-radius:50%;background:#33465e;display:block}
.codecard__dots i:first-child{background:var(--amber);opacity:.85}
.codecard__file{font-size:.76rem;color:#8ba3bf;letter-spacing:.01em}
.codecard__copy{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid var(--code-line);
  color:#b9cde3;font-family:var(--ff-body);font-size:.76rem;font-weight:600;
  transition:background .2s,color .2s,border-color .2s;
}
.codecard__copy svg{width:14px;height:14px}
.codecard__copy:hover{background:rgba(255,255,255,.11);color:#fff}
.codecard__copy.done{background:rgba(122,208,155,.16);border-color:rgba(122,208,155,.4);color:#8fd9a8}

.codecard__body{padding:18px 20px 20px}
.codecard__res{padding:16px 20px 20px;border-top:1px solid var(--code-line);
  background:rgba(255,255,255,.022)}
.codecard__row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.codecard__row .verb{
  padding:4px 10px;border-radius:6px;background:rgba(240,167,38,.16);
  border:1px solid rgba(240,167,38,.34);color:#fbc667;
  font-size:.72rem;font-weight:700;letter-spacing:.07em}
.codecard__row .path{color:#dbe8f7;font-size:.86rem}
.codecard__row .status{
  padding:4px 10px;border-radius:6px;background:rgba(122,208,155,.15);
  border:1px solid rgba(122,208,155,.36);color:#8fd9a8;
  font-size:.72rem;font-weight:700;letter-spacing:.05em}
.codecard__row .ms{color:#6c86a3;font-size:.74rem;margin-left:auto}

.codecard__pre{
  margin:0;background:transparent;padding:0;overflow-x:auto;
  font-size:.795rem;line-height:1.66;color:#cddcee;
  scrollbar-width:thin;scrollbar-color:#2b3f57 transparent;
}
.codecard__pre + .codecard__pre{margin-top:14px;padding-top:14px;
  border-top:1px dashed var(--code-line)}
.codecard__pre::-webkit-scrollbar{height:7px}
.codecard__pre::-webkit-scrollbar-thumb{background:#2b3f57;border-radius:4px}
.codecard__pre code{font-family:inherit;background:none;padding:0;color:inherit;
  white-space:pre;display:block}
.codecard .ck{color:#93c8ff}         /* keys       */
.codecard .cs{color:#f5c78a}         /* strings    */
.codecard .cn{color:#8fd9a8}         /* numbers    */
.codecard .cp{color:#708ba8}         /* punctuation*/
.codecard .cw{color:#cddcee}         /* bare words */
.codecard .chk{color:#9fb6cf}        /* header key */
.codecard .chv{color:#dbe8f7}        /* header val */

@media (max-width:620px){
  .codecard__pre{font-size:.735rem}
  .codecard__file{display:none}
  .codecard__body,.codecard__res{padding-inline:15px}
}


/* ==========================================================================
   Colour and motion
   --------------------------------------------------------------------------
   The page was one accent on white: correct, and flat. Everything below adds
   the second accent, a little depth and something that answers the cursor.
   Nothing here changes layout — it is all surface, so it cannot break a page.
   ========================================================================== */

/* ------------------------------------------------------------- eyebrow --- */
/* Was a line of small caps with a dash. Now a chip, so a section announces
   itself instead of whispering. */
.eyebrow{
  padding:6px 14px 6px 12px;border-radius:var(--r-pill);
  background:linear-gradient(135deg,#fff4e0,#ffe9c6);
  border:1px solid #f7dfb4;color:var(--amber-d);
  letter-spacing:.13em;margin-bottom:18px;
}
.eyebrow::before{width:7px;height:7px;border-radius:50%;background:var(--amber)}
.section--ink .eyebrow{background:rgba(240,167,38,.14);border-color:rgba(240,167,38,.3)}
.section--alt .eyebrow--cool,.eyebrow--cool{
  background:linear-gradient(135deg,var(--teal-l),#c9eaec);
  border-color:#a9dcdf;color:var(--teal-d)}
.eyebrow--cool::before{background:var(--teal)}

/* -------------------------------------------------------------- buttons -- */
.btn{background:linear-gradient(135deg,var(--amber) 0%,#e79313 100%);
  position:relative;overflow:hidden;isolation:isolate}
/* A light sweeps across on hover — the cheapest way to make a button feel
   like a button rather than a coloured rectangle. */
.btn::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--ease-out)}
.btn:hover::after{transform:translateX(120%)}
.btn--ghost{background:rgba(255,255,255,.7)}
.btn--ghost:hover{background:#fff;border-color:var(--teal);color:var(--teal-d)}
.btn--light{background:#fff}
.btn:focus-visible,.chip-btn:focus-visible,.nav__list a:focus-visible{
  outline:3px solid var(--teal);outline-offset:3px}

.arrow-link{color:var(--teal-d)}
.arrow-link:hover{color:var(--teal)}

/* --------------------------------------------------------------- header -- */
.nav__list a{position:relative}
.nav__list a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,var(--amber),var(--teal));
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease)}
.nav__list a:hover::after{transform:scaleX(1)}

/* ---------------------------------------------------------------- cards -- */
.card{transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.card::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--amber),var(--teal));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.card:hover::before{transform:scaleX(1)}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:#cfdae7}

/* The icon tiles cycle through the three accents, so a row of four cards is
   not four identical amber squares. */
.card__ico{transition:transform .4s var(--ease)}
.card:hover .card__ico{transform:rotate(-6deg) scale(1.06)}
.grid>*:nth-child(4n+2) .card__ico,.g-4>*:nth-child(4n+2) .card__ico{
  background:linear-gradient(140deg,var(--teal-l),#c2e8ea);color:var(--teal-d);
  border-color:#a9dcdf}
.grid>*:nth-child(4n+3) .card__ico{
  background:linear-gradient(140deg,var(--plum-l),#dbd2fa);color:#5741ad;
  border-color:#cfc4f4}
.grid>*:nth-child(4n) .card__ico{
  background:linear-gradient(140deg,#e3edfb,#d2e2f7);color:#2f5c96;border-color:#c2d7f0}

/* ------------------------------------------------------------- stat bar -- */
.stat b{background:linear-gradient(135deg,var(--amber) 0%,#e08a12 60%,var(--teal) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.section--ink .stat b{background:linear-gradient(135deg,#ffd98a 0%,var(--amber) 40%,#6fd7dc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat{position:relative;padding-top:18px}
.stat::before{content:"";position:absolute;top:0;left:0;width:34px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--amber),var(--teal))}

/* ---------------------------------------------------------------- chips -- */
.chip-btn{transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.chip-btn:hover{transform:translateY(-2px);border-color:var(--teal);color:var(--teal-d);
  background:var(--teal-l)}
.chip-btn[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--amber),#e08a12);border-color:transparent;
  color:#1b1305;box-shadow:0 8px 20px var(--amber-glow)}

/* -------------------------------------------------------------- washes --- */
/* Alternating bands so the eye has somewhere to rest between sections. */
.section--alt{background:var(--wash-sky)}
.section--warm{background:var(--wash-warm)}
.section--cool{background:var(--wash-cool)}
.section--ink{background:
  radial-gradient(1100px 460px at 12% -10%,rgba(14,154,162,.26),transparent 60%),
  radial-gradient(900px 420px at 92% 8%,rgba(240,167,38,.22),transparent 62%),
  var(--navy)}

/* Quiet colour behind a plain section, so white does not run for three screens. */
/* Clipped at the section, because these two circles hang past its left and
   right edges. `body{overflow-x:hidden}` hides the resulting scrollbar on a
   desktop and does nothing at all on a phone: the document is still 510px wide
   on a 390px screen, the browser widens the layout viewport to match, and
   everything position:fixed — the header, and so the menu button at the end of
   it — is laid out to that wider box and ends up off the side of the screen.
   Which is exactly how the menu button went missing. So clip it here, at the
   element that overflows, rather than papering over it further up. */
.section--blob{overflow:hidden}
@supports (overflow:clip){.section--blob{overflow:clip}}
.section--blob::before,.section--blob::after{content:"";position:absolute;z-index:0;
  border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none}
.section--blob::before{width:420px;height:420px;left:-140px;top:-80px;
  background:radial-gradient(circle,var(--teal-glow),transparent 70%)}
.section--blob::after{width:380px;height:380px;right:-120px;bottom:-120px;
  background:radial-gradient(circle,var(--amber-glow),transparent 70%)}
.section--blob>.wrap{position:relative;z-index:1}

/* ------------------------------------------------------------ timeline --- */
.tl li::before,.tl__dot{background:var(--teal)}
.tl time{color:var(--teal-d)}

/* --------------------------------------------------------------- misc ---- */
.quote-strip{border-left-color:var(--teal)}
.media__play i{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.media__play:hover i{transform:scale(1.09);box-shadow:0 18px 44px rgba(12,25,44,.36)}
.case__tag{background:linear-gradient(135deg,#fff4e0,#ffe9c6)}
.gallery figure{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.gallery figure:hover{transform:translateY(-5px) scale(1.01);box-shadow:var(--sh-2)}

@media(prefers-reduced-motion:reduce){
  .btn::after,.card::before,.nav__list a::after{transition:none}
  .card:hover,.chip-btn:hover,.gallery figure:hover{transform:none}
}

/* ------------------------------------------------- inner-page header ----- */
.phero--media{padding-bottom:clamp(120px,14vw,180px)}
.phero__in{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4.5vw,64px);
  align-items:center}
.phero__copy{min-width:0}
.phero--media h1{max-width:none}
.phero__shot{margin:0;position:relative;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-3);border:1px solid rgba(255,255,255,.7);
  aspect-ratio:4/3;background:var(--bg-2)}
.phero__shot img,.phero__shot svg{width:100%;height:100%;object-fit:cover;display:block}
/* A little colour bleeding out from behind the picture, so it sits in the page
   rather than on top of it. */
.phero__shot::after{content:"";position:absolute;inset:auto -18% -22% -18%;height:60%;
  background:radial-gradient(60% 100% at 50% 0,var(--amber-glow),transparent 70%);
  z-index:-1;pointer-events:none}
@media(max-width:900px){
  .phero__in{grid-template-columns:1fr;gap:26px}
  .phero__shot{aspect-ratio:16/10}
}

/* ------------------------------------------------- service card photos --- */
/* The card keeps its padding for the words; the picture is pulled out to the
   card's own edges so it reads as a header, not an inset thumbnail. */
.svc{padding-top:0}
.svc__shot{margin:0 calc(-1 * clamp(22px,2.4vw,30px)) 20px;
  aspect-ratio:16/9;overflow:hidden;background:var(--bg-2);position:relative}
.svc__shot img,.svc__shot svg{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.svc:hover .svc__shot img,.svc:hover .svc__shot svg{transform:scale(1.05)}
.svc__shot::after{content:"";position:absolute;inset:auto 0 0;height:46%;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.9))}
.svc__tag{top:14px;z-index:2}
/* The icon rides the seam between picture and words. */
.svc .card__ico{margin-top:-46px;position:relative;z-index:2;box-shadow:var(--sh-1);
  background:linear-gradient(140deg,#fff,#fff6e8)}
.svc h3{padding-right:0;margin-top:14px}

/* ---------------------------------------------------------- trusted by --- */
.trusted{background:var(--surface);border-block:1px solid var(--line)}
.trusted__h{text-align:center;font-size:.78rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 26px}
.trusted__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(26px,5vw,62px)}
.trusted__one img{max-height:38px;width:auto;filter:grayscale(1);opacity:.62;
  transition:filter .3s,opacity .3s}
.trusted__one:hover img{filter:none;opacity:1}
.trusted__one span{font-family:var(--ff-head);font-weight:700;font-size:1.15rem;
  letter-spacing:-.02em;color:var(--muted-2)}


/* ==========================================================================
   Photographic sections
   --------------------------------------------------------------------------
   A picture only earns its place if it shows the work. These sections put the
   photograph where it carries meaning — behind the headline, on the service
   card, along the process — and let type sit on it rather than beside it.
   ========================================================================== */

/* ---------------------------------------------------- page header, on a shot */
.shot-hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;
  min-height:clamp(430px,62vh,640px);
  padding:calc(var(--nav-h) + clamp(48px,7vw,86px)) 0 clamp(44px,6vw,74px);
  overflow:hidden;background:var(--navy)}
.shot-hero__bg{position:absolute;inset:0;z-index:-2}
.shot-hero__img{width:100%;height:100%;object-fit:cover;display:block}
/* Two scrims: one from the left so the words hold, one from the bottom so the
   section joins the page instead of stopping dead. */
.shot-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(9,18,32,.92) 0%,rgba(9,18,32,.78) 42%,rgba(9,18,32,.28) 78%,rgba(9,18,32,.12) 100%)}
.shot-hero::after{content:"";position:absolute;inset:auto 0 0;height:38%;z-index:-1;
  background:linear-gradient(180deg,transparent,rgba(9,18,32,.55))}
.shot-hero__in{position:relative;max-width:760px}
.shot-hero h1{color:#fff;text-wrap:balance;margin-bottom:.35em}
.crumb--on{color:#a9c0dc}
.crumb--on a:hover{color:var(--amber)}
.lead--on{color:#cfdcec;max-width:52ch}
.eyebrow--on{background:rgba(240,167,38,.16);border-color:rgba(240,167,38,.42);color:#ffcf7a}
.shot-hero .btn-row{margin-top:30px}
.btn--glass{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.34);
  box-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn--glass:hover{background:rgba(255,255,255,.2);border-color:#fff;color:#fff}

/* --------------------------------------------------------- service cards -- */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,26px)}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-1);display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.pcard__shot{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.pcard__img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.pcard:hover .pcard__img{transform:scale(1.06)}
.pcard__shot::after{content:"";position:absolute;inset:auto 0 0;height:72%;
  background:linear-gradient(180deg,transparent,rgba(9,18,32,.86))}
.pcard__name{position:absolute;left:20px;right:20px;bottom:16px;z-index:1;
  font-family:var(--ff-head);font-weight:750;font-size:1.16rem;letter-spacing:-.02em;
  color:#fff;text-shadow:0 2px 12px rgba(9,18,32,.5)}
.pcard__body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:14px;flex:1}
.pcard__body p{color:var(--muted);font-size:.94rem;flex:1;margin:0}

/* ----------------------------------------------------------------- flow --- */
.flow{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,30px);counter-reset:flow}
.flow__step{position:relative;display:flex;flex-direction:column;gap:14px}
/* The connector runs behind the pictures, from one to the next only. */
.flow__step:not(:last-child)::after{content:"";position:absolute;top:22%;
  left:calc(100% + 2px);width:clamp(14px,2.4vw,28px);height:2px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 11px)}
.flow__shot{position:relative;margin:0;aspect-ratio:4/3;border-radius:var(--r-md);
  overflow:hidden;background:var(--bg-2);box-shadow:var(--sh-1)}
.flow__img{width:100%;height:100%;object-fit:cover;display:block}
.flow__no{position:absolute;left:12px;top:12px;min-width:38px;height:38px;
  display:grid;place-items:center;border-radius:11px;
  background:linear-gradient(135deg,var(--amber),#e08a12);color:#1b1305;
  font-family:var(--ff-head);font-size:.95rem;font-weight:800;
  box-shadow:0 6px 16px rgba(240,167,38,.4)}
.flow__step h3{font-size:1.06rem;margin:0}
.flow__step p{color:var(--muted);font-size:.9rem;margin:0}

/* ------------------------------------------- picture beside a checklist --- */
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4.6vw,70px);align-items:center}
.feat--flip .feat__shot{order:2}
.feat__shot{margin:0;position:relative;border-radius:var(--r-xl);overflow:hidden;
  aspect-ratio:5/4;box-shadow:var(--sh-3);background:var(--bg-2)}
.feat__img{width:100%;height:100%;object-fit:cover;display:block}
.feat__body h2{margin-bottom:.3em;text-wrap:balance}
.ticks{display:grid;gap:13px;margin:24px 0 0}
.ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2);font-size:.97rem}
.ticks svg{width:20px;height:20px;flex:none;margin-top:3px;padding:3px;border-radius:6px;
  background:var(--teal-l);color:var(--teal-d)}
.feat .btn-row{margin-top:28px}

/* -------------------------------------------------------------- marquee --- */
.marquee{padding:clamp(30px,4vw,46px) 0;background:var(--navy);overflow:hidden;
  border-block:1px solid rgba(255,255,255,.08)}
.marquee__h{text-align:center;margin:0 0 22px;color:#8fa9c8;font-size:.76rem;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.marquee__track{display:flex;width:max-content;animation:marq 42s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__row{display:flex;align-items:center;gap:clamp(30px,4vw,58px);
  padding-right:clamp(30px,4vw,58px);margin:0}
.marquee__one{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.marquee__one b{font-family:var(--ff-head);font-size:clamp(1.25rem,2vw,1.7rem);
  font-weight:800;letter-spacing:-.03em;color:var(--amber);font-variant-numeric:tabular-nums}
.marquee__one span{color:#9fb6d4;font-size:.92rem}
.marquee__one img{max-height:34px;width:auto;filter:brightness(0) invert(1);opacity:.7}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .marquee__track{animation:none;width:100%;overflow-x:auto}
  .marquee__row:nth-child(2){display:none}
}

/* ------------------------------------------------------------- segments --- */
.segs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px)}
.seg{display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden;
  border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);
  box-shadow:var(--sh-1);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.seg:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
/* Each card takes a different tint, so four cards do not read as one slab. */
.seg--1{background:linear-gradient(150deg,#fffaf0,#fff)}
.seg--2{background:linear-gradient(150deg,#f2fbfb,#fff)}
.seg--3{background:linear-gradient(150deg,#f5f3ff,#fff)}
.seg--4{background:linear-gradient(150deg,#f2f7fd,#fff)}
.seg__body{padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:10px}
.seg__body h3{font-size:1.1rem;margin:0}
.seg__body p{color:var(--muted);font-size:.92rem;margin:0;flex:1}
.seg__stats{display:flex;gap:18px;flex-wrap:wrap;margin-top:6px}
.seg__stats b{display:block;font-family:var(--ff-head);font-size:1.06rem;font-weight:800;
  letter-spacing:-.02em;color:var(--amber-d)}
.seg__stats span{font-size:.76rem;color:var(--muted)}
.seg__shot{margin:0;overflow:hidden;min-height:180px}
.seg__img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.seg:hover .seg__img{transform:scale(1.05)}

/* ------------------------------------------------------ alternating rows -- */
.zrows{display:grid;gap:clamp(34px,5vw,76px)}
.zrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,4.4vw,64px);align-items:center}
.zrow--flip .zrow__shot{order:2}
.zrow__shot{margin:0;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3;
  box-shadow:var(--sh-2);background:var(--bg-2)}
.zrow__img{width:100%;height:100%;object-fit:cover;display:block}
.zrow__no{font-family:var(--ff-head);font-size:2.6rem;font-weight:800;line-height:1;
  letter-spacing:-.05em;margin:0 0 10px;
  background:linear-gradient(135deg,var(--amber),var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.zrow__body h3{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:.4em;text-wrap:balance}
.zrow__body p{color:var(--muted);max-width:52ch}

/* --------------------------------------------------------- tracking band -- */
.tband{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);
  padding:clamp(54px,7vw,96px) 0}
.tband__bg{position:absolute;inset:0;z-index:-2}
.tband__img{width:100%;height:100%;object-fit:cover;display:block}
.tband::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(9,18,32,.94) 0%,rgba(9,18,32,.8) 46%,rgba(9,18,32,.42) 100%)}
.tband__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,60px);
  align-items:center}
.tband__copy h2{color:#fff;margin-bottom:.3em;text-wrap:balance}
.tband__form{background:rgba(255,255,255,.97);border-radius:var(--r-lg);
  padding:clamp(16px,2vw,22px);box-shadow:0 24px 60px rgba(4,12,24,.42);
  display:grid;grid-template-columns:1fr auto;gap:12px}
.tband__form input{grid-column:1;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:14px 20px;font-size:.98rem;background:var(--bg)}
.tband__form input:focus{outline:2px solid var(--teal);outline-offset:1px;background:#fff}
.tband__form .btn{grid-column:2}
.tband__hint{grid-column:1/-1;margin:2px 0 0;font-size:.8rem;color:var(--muted)}
.tband__out{position:relative;z-index:1}
.tband__out:not(:empty){background:var(--surface);margin-top:26px;border-radius:var(--r-lg);
  padding:clamp(18px,2.4vw,28px);box-shadow:var(--sh-2);
  max-width:var(--wrap);margin-inline:auto}

@media(max-width:1000px){
  .pcards{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(2,1fr)}
  .flow__step:not(:last-child)::after{display:none}
}
@media(max-width:900px){
  .feat,.zrow,.tband__in,.segs,.seg{grid-template-columns:1fr}
  .feat--flip .feat__shot,.zrow--flip .zrow__shot{order:0}
  .seg__shot{min-height:200px;order:-1}
  .shot-hero{min-height:auto;align-items:center}
  .shot-hero::before{background:linear-gradient(180deg,rgba(9,18,32,.8),rgba(9,18,32,.9))}
}
@media(max-width:620px){
  .pcards{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .tband__form{grid-template-columns:1fr}
  .tband__form .btn{grid-column:1}
}

/* Photographs inside the old media frames and the gallery. */
.media__ph{width:100%;height:100%;object-fit:cover;display:block}
.gallery figure{overflow:hidden;position:relative}
.gallery__img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}

.svc__shot img{width:100%;height:100%;object-fit:cover;display:block}


/* ==========================================================================
   Fixes: a header you can always see, a better case card, a timeline that
   does not run off the side of the page.
   ========================================================================== */

/* ------------------------------------------------- the floating header --- */
/* Over a photograph the old header vanished: it only grew a background once
   you scrolled, and dark type on a dark picture is nothing at all. It is now
   a glass bar that is always there, on every page, from the first pixel. */
.hdr{top:clamp(8px,1.4vw,16px);inset-inline:0;height:auto;border-bottom:0;
  background:none!important;box-shadow:none!important;pointer-events:none}
.hdr__in{pointer-events:auto;
  background:rgba(255,255,255,.74);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.62);
  border-radius:var(--r-pill);
  padding:9px 12px 9px 22px;
  box-shadow:0 10px 30px rgba(12,25,44,.14),inset 0 1px 0 rgba(255,255,255,.7);
  transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.hdr.is-stuck .hdr__in{background:rgba(255,255,255,.93);
  box-shadow:0 14px 36px rgba(12,25,44,.18),inset 0 1px 0 rgba(255,255,255,.8)}
/* The bar sits over the picture, so the first section needs the room back. */
.shot-hero{padding-top:calc(var(--nav-h) + clamp(56px,7vw,96px))}
@media(max-width:760px){.hdr__in{padding:8px 10px 8px 16px}}

/* ------------------------------------------------- case study, redrawn --- */
/* The dark half-panel shouted one number and left the rest cramped. This
   leads with the work, keeps the story short, and puts the three numbers in a
   band where they can be compared at a glance. */
.ccard{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--sh-1);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.ccard:hover{transform:translateY(-5px);box-shadow:var(--sh-3)}
.ccard__shot{position:relative;margin:0;min-height:260px;overflow:hidden;background:var(--bg-2)}
.ccard__shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.ccard:hover .ccard__shot img{transform:scale(1.05)}
.ccard__shot::after{content:"";position:absolute;inset:auto 0 0;height:60%;
  background:linear-gradient(180deg,transparent,rgba(9,18,32,.78))}
.ccard__tag{position:absolute;top:16px;left:16px;z-index:2;padding:6px 13px;
  border-radius:var(--r-pill);background:rgba(255,255,255,.92);color:var(--amber-d);
  font-size:.7rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase}
/* The headline result rides the bottom of the picture. */
.ccard__hero{position:absolute;left:20px;right:20px;bottom:16px;z-index:2;color:#fff}
.ccard__hero b{display:block;font-family:var(--ff-head);font-size:clamp(1.9rem,3.4vw,2.7rem);
  font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--amber)}
.ccard__hero span{display:block;margin-top:4px;font-size:.8rem;color:#d5e2f2}
.ccard__body{padding:clamp(24px,2.8vw,34px);display:flex;flex-direction:column;gap:12px}
.ccard__body h3{font-size:clamp(1.2rem,2vw,1.5rem);margin:0;text-wrap:balance}
.ccard__who{font-size:.83rem;color:var(--muted);margin:0}
.ccard__was{color:var(--ink-2);margin:0;max-width:54ch}
.ccard__did{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ccard__did li{display:flex;align-items:center;gap:7px;padding:7px 13px;
  border-radius:var(--r-pill);background:var(--teal-l);color:var(--teal-d);
  font-size:.83rem;font-weight:560}
.ccard__did svg{width:14px;height:14px;flex:none}
.ccard__results{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);background:#fafbfd}
.res{padding:clamp(16px,2vw,22px) clamp(16px,2.2vw,26px);border-right:1px solid var(--line);
  display:grid;gap:9px}
.res:last-child{border-right:0}
.res__label{font-size:.76rem;color:var(--muted)}
/* Two bars, same scale: what it was, and what it became. */
.res__bars{display:grid;gap:5px}
.res__bar{height:8px;border-radius:5px;background:var(--line-2);overflow:hidden}
.res__bar i{display:block;height:100%;border-radius:5px;background:#cbd7e4}
.res__bar--now i{background:linear-gradient(90deg,var(--amber),#e08a12)}
.res__now{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  font-family:var(--ff-head);font-size:clamp(1.2rem,2vw,1.55rem);font-weight:800;
  letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.res__was{font-size:.78rem;color:var(--muted-2);text-decoration:line-through}
.res__delta{font-family:var(--ff-body);font-size:.72rem;font-weight:700;
  color:var(--teal-d);background:var(--teal-l);border-radius:var(--r-pill);padding:2px 8px}

/* ---------------------------------------------- the timeline, vertical --- */
/* It used to run sideways behind a scrollbar nobody found. It now runs down
   the page, alternating either side of one line, and folds to a single column
   on a phone. Nothing to scroll but the page itself. */
.pins{position:relative;display:grid;grid-auto-flow:row;gap:clamp(10px,1.6vw,20px);
  grid-template-columns:1fr;padding:10px 0;overflow:visible}
.pins::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  transform:translateX(-50%);border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--line) 6%,var(--line) 94%,transparent)}
.pin{position:relative;display:grid;grid-template-columns:1fr 72px 1fr;align-items:center}
.pin--up .pin__card{grid-column:1}
.pin--down .pin__card{grid-column:3}
.pin__dot{grid-column:2;justify-self:center;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--ff-head);font-weight:800;font-size:.86rem;color:#fff;
  background:linear-gradient(140deg,var(--teal),var(--teal-d));
  box-shadow:0 0 0 6px var(--bg),0 8px 20px var(--teal-glow);
  position:relative;z-index:1;font-variant-numeric:tabular-nums}
.pin__card{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(18px,2vw,26px);box-shadow:var(--sh-1);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.pin__card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:#cfdae7}
/* A short arm from the card to the line, so the two read as connected. */
.pin__card::after{content:"";position:absolute;top:50%;width:clamp(12px,2vw,26px);height:2px;
  background:var(--line)}
.pin--up .pin__card::after{left:100%}
.pin--down .pin__card::after{right:100%}
.pin:nth-child(3n+2) .pin__card{background:linear-gradient(150deg,#fffaf0,#fff)}
.pin:nth-child(3n) .pin__card{background:linear-gradient(150deg,#f2fbfb,#fff)}
.pin__card time{display:block;font-family:var(--ff-head);font-weight:800;font-size:1.05rem;
  color:var(--teal-d);margin-bottom:6px}
.pin__card h3{font-size:1.08rem;margin:0 0 .4em}
.pin__card p{font-size:.9rem;color:var(--muted);margin:0}
.pin__mets{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.pin__mets span{font-size:.79rem;color:var(--muted)}
.pin__mets b{color:var(--amber-d);font-family:var(--ff-head)}

@media(max-width:820px){
  .pins::before{left:23px}
  .pin{grid-template-columns:46px 1fr;gap:16px;align-items:start}
  .pin--up .pin__card,.pin--down .pin__card{grid-column:2}
  .pin__dot{grid-column:1;justify-self:start;align-self:start;margin-top:14px}
  .pin__card::after{display:none}
}

@media(max-width:900px){
  .ccard{grid-template-columns:1fr}
  .ccard__shot{min-height:230px}
  .ccard__results{grid-template-columns:1fr}
  .res{border-right:0;border-bottom:1px solid var(--line)}
  .res:last-child{border-bottom:0}
}

/* The old sideways timeline is gone; make sure none of its flow survives. */
.pins{grid-auto-flow:row;grid-auto-columns:auto;scroll-snap-type:none}
.nav__list a{color:var(--ink-2);font-weight:560}
.nav__list a.is-active,.nav__list a[aria-current="page"]{color:var(--ink)}

/* -------------------------------------------------------------- two doors --- */
/* Ship with us, or run a branch. Two cards near the top of the home page, each
   one line and three details wide — enough to decide on, not enough to read.
   The tab down the right-hand edge is the only ornament: it names the door, in
   the brand's amber, and it is what stops the pair reading as two paragraphs
   in boxes. It goes on a phone, where it would eat a fifth of the width. */
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,26px)}
.door{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,1.6vw,20px);align-items:stretch;min-width:0;
  padding:clamp(20px,2.2vw,28px);padding-right:clamp(44px,4vw,58px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);overflow:hidden;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease),
             border-color .3s var(--ease)}
.door:hover{box-shadow:var(--sh-2);transform:translateY(-3px);border-color:#dbe4ef}

.door__tab{position:absolute;top:0;right:0;bottom:0;width:clamp(28px,3vw,36px);
  display:grid;place-items:center;
  background:linear-gradient(180deg,var(--amber),#e08a12);color:#1b1305;
  font-family:var(--ff-head);font-size:.74rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap;
  writing-mode:vertical-rl;text-orientation:mixed}

.door__art{width:clamp(48px,4.4vw,58px);height:clamp(48px,4.4vw,58px);flex:none;
  align-self:flex-start;display:grid;place-items:center;border-radius:var(--r-md);
  background:rgba(240,167,38,.14);border:1px solid rgba(240,167,38,.3)}
.door__art svg{width:26px;height:26px;color:var(--amber-d)}

/* The picture, when the card has one. A square rather than a strip: it sits
   beside the words at every width, so the card stays the height of its text
   and the pair still fits on one screen. */
/* align-self, or the card's stretch beats the aspect ratio and the picture
   grows into a full-height portrait strip down the side of the words. */
.door__shot{position:relative;margin:0;flex:none;align-self:flex-start;
  width:clamp(104px,11vw,150px);aspect-ratio:1/1;
  border-radius:var(--r-md);overflow:hidden;background:var(--bg-2);
  box-shadow:0 6px 18px rgba(12,25,44,.1)}
.door__img{width:100%;height:100%;object-fit:cover;display:block}
/* The icon keeps its job on top of the photograph: two cards with unrelated
   pictures still read as one pair because both carry the same amber mark. */
.door__badge{position:absolute;left:8px;bottom:8px;width:32px;height:32px;
  display:grid;place-items:center;border-radius:10px;
  background:rgba(255,255,255,.94);box-shadow:var(--sh-1)}
.door__badge svg{width:17px;height:17px;color:var(--amber-d)}

/* A column, so the two buttons line up with each other however much the two
   cards have to say. One heading wraps to two lines and the other does not;
   without this the buttons sit at different heights and the pair looks
   accidental. */
.door__body{min-width:0;display:flex;flex-direction:column;align-items:stretch}
/* The eyebrow is a pill, so it has to be its own width rather than the
   column's — stretched, it reads as a banner across the top of the card. */
.door__body>.eyebrow{align-self:flex-start}
.door__body h3{margin:.34em 0 .3em;font-size:clamp(1.12rem,1.7vw,1.4rem);
  line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.door__line{margin:0;font-size:.92rem;line-height:1.6;color:var(--ink-2);
  max-width:42ch}

.door__chips{list-style:none;margin:16px 0 18px;padding:0;
  display:flex;flex-wrap:wrap;gap:7px}
.door__chips li{display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:var(--r-pill);
  background:var(--bg);border:1px solid var(--line);
  font-size:.76rem;font-weight:600;color:var(--ink-2);line-height:1.3}
.door__chips svg{width:13px;height:13px;color:var(--teal);flex:none}

/* auto pushes it to the bottom of the card so the two line up; the margin
   above it is what keeps a gap when the card is short. */
.door__btn{margin-top:auto;align-self:flex-start}

@media(max-width:900px){
  .doors{grid-template-columns:1fr}
}
@media(max-width:620px){
  /* The picture stays beside the words rather than going full width above
     them: a banner photo on each card turns the pair into two screens of
     scrolling for two sentences. */
  .door{grid-template-columns:auto minmax(0,1fr);gap:14px;padding:18px}
  .door__tab{display:none}
  .door__shot{width:96px}
  .door__badge{width:26px;height:26px;border-radius:8px;left:6px;bottom:6px}
  .door__badge svg{width:14px;height:14px}
  .door__btn{width:100%;justify-content:center}
}

/* ---------------------------------------------------------------- franchise --- */
/* The offer to run a branch. Same two-column shape as the feature band, with a
   strip of figures between the lead and the checklist, because the numbers are
   the first thing anyone considering a franchise looks for. */
.fran__in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4.4vw,66px);align-items:center}
.fran__shot{margin:0;position:relative;border-radius:var(--r-xl);overflow:hidden;
  aspect-ratio:4/5;box-shadow:var(--sh-3);background:var(--bg-2)}
.fran__img{width:100%;height:100%;object-fit:cover;display:block}
.fran__body h2{margin-bottom:.3em;text-wrap:balance}
.fran__facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
  margin:26px 0 4px}
.fran__facts>div{padding:14px 12px 13px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);min-width:0}
.fran__facts b{display:block;font-family:var(--ff-head);font-size:clamp(.98rem,1.3vw,1.18rem);
  font-weight:800;line-height:1.2;color:var(--teal-d);letter-spacing:-.01em;
  text-wrap:balance;white-space:nowrap}
.fran__facts span{display:block;margin-top:5px;font-size:.72rem;line-height:1.35;
  color:var(--muted);font-weight:600}
.fran .ticks{margin-top:22px}
.fran .btn-row{margin-top:26px}
.fran__note{margin:16px 0 0;font-size:.78rem;line-height:1.6;color:var(--muted);max-width:52ch}

@media(max-width:900px){
  .fran__in{grid-template-columns:1fr}
  .fran__shot{aspect-ratio:16/10}
  .fran__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Three buttons plus the menu is too much for a middling screen; the Franchise
   one is in the mobile menu, so it is the one that goes. */
@media(max-width:1150px){.hdr__fran{display:none}}

/* ------------------------------------------------- jumping to a section --- */
/* The header is fixed, so a bare anchor lands with the target's first line
   underneath it. Every jump target gets a margin the size of the bar plus a
   little air, which is what makes Track and Franchise feel like they went
   somewhere rather than nowhere. */
:root{--jump-offset:98px}
@media(max-width:900px){:root{--jump-offset:84px}}
[id]{scroll-margin-top:var(--jump-offset)}

/* ----------------------------------------------------- franchise page --- */
.fran__facts--wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  margin:0;max-width:900px;margin-inline:auto}
.fran__facts--wide>div{text-align:center;padding:20px 16px}
.fran__facts--wide b{font-size:clamp(1.1rem,1.9vw,1.5rem)}
.fran__facts--wide span{font-size:.78rem}

.fsteps{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));max-width:1100px;
  margin-inline:auto}
.fstep{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:22px 20px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line)}
.fstep__no{display:grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:11px;background:var(--teal-l);color:var(--teal-d);
  font:800 .86rem/1 var(--ff-head)}
.fstep h3{margin:0 0 5px;font-size:1.02rem}
.fstep p{margin:0;font-size:.9rem;line-height:1.6;color:var(--muted)}


/* ==========================================================================
   WordPress integration
   ========================================================================== */
.screen-reader-text{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-link:focus{position:fixed;left:16px;top:16px;z-index:999;width:auto;height:auto;
  clip:auto;padding:12px 20px;background:#fff;border-radius:12px;box-shadow:var(--sh-2)}

/* nav menus come out of wp_nav_menu as ul/li */
.nav ul,.nav__list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav li{position:relative}
.nav .sub-menu{position:absolute;top:100%;left:0;display:none;min-width:210px;
  flex-direction:column;gap:2px;padding:8px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-2)}
.nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu{display:flex}
.nav .sub-menu a{width:100%;border-radius:10px;font-size:.9rem}
.nav .current-menu-item>a,.nav .current_page_item>a,
.nav .current-menu-ancestor>a{color:var(--ink);font-weight:640}
.nav .current-menu-item>a::after,.nav .current_page_item>a::after{
  content:"";position:absolute;left:50%;bottom:2px;translate:-50% 0;
  width:16px;height:2.5px;border-radius:3px;background:var(--amber)}
.mnav ul,.mnav__list{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;width:100%}
.mnav .sub-menu{padding-left:14px}
.ftr ul{list-style:none;margin:0;padding:0}
.brand--custom img{max-height:44px;width:auto}

/* editor / classic content inside .entry */
.entry{font-size:1.04rem;color:var(--ink-2)}
.entry>*+*{margin-top:1.15em}
.entry h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:1.6em 0 .5em}
.entry h3{margin:1.4em 0 .4em}
.entry a{color:var(--amber-d);text-decoration:underline;text-underline-offset:3px}
.entry ul,.entry ol{padding-left:1.3em;margin-left:0}
.entry ul{list-style:disc}
.entry ol{list-style:decimal}
.entry li{margin-bottom:.5em}
.entry img,.entry iframe,.entry video{border-radius:var(--r-md);max-width:100%;height:auto}
.entry blockquote{border-left:3px solid var(--amber);padding:4px 0 4px 22px;margin-left:0;
  font-family:var(--ff-head);font-size:1.16rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.entry code,.entry kbd{background:var(--bg-2);padding:2px 7px;border-radius:7px;font-size:.9em}
.entry pre{background:var(--navy);color:#dbe6f5;padding:20px 24px;border-radius:var(--r-md);
  overflow-x:auto;font-size:.9rem}
.entry table{width:100%;border-collapse:collapse;font-size:.94rem}
.entry th,.entry td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left}
.entry th{font-weight:650;color:var(--ink)}
.entry figcaption,.wp-caption-text{font-size:.84rem;color:var(--muted);margin-top:8px}
.alignwide{width:min(1100px,100%);margin-inline:auto}
.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
.alignleft{float:left;margin:0 24px 18px 0}
.alignright{float:right;margin:0 0 18px 24px}
.aligncenter{margin-inline:auto;display:block}
.sticky .card{border-color:var(--amber)}

/* pagination + search */
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pagination .page-numbers{display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;
  border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);font-weight:600;
  font-size:.92rem;color:var(--ink-2)}
.pagination .page-numbers.current{background:var(--amber);border-color:transparent;color:#1b1305}
.search-form{display:flex;gap:10px}
.search-form label{flex:1}
.search-form .search-field{width:100%;padding:13px 16px;border-radius:14px;
  border:1px solid var(--line);background:#fff}
.search-form .search-submit{padding:13px 24px;border-radius:var(--r-pill);border:0;
  background:var(--amber);color:#1b1305;font-weight:650;cursor:pointer}

/* comments */
.comment-list{list-style:none;margin:34px 0 0;padding:0}
.comment-list li{margin-bottom:22px}
.comment-body{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:20px 24px}
.comment-form{display:grid;gap:14px;margin-top:26px}
.comment-form input:not([type=submit]),.comment-form textarea{width:100%;padding:13px 16px;
  border-radius:14px;border:1px solid var(--line);background:#fff}
.comment-form .submit{justify-self:start;padding:14px 26px;border-radius:var(--r-pill);border:0;
  background:var(--amber);color:#1b1305;font-weight:650;cursor:pointer}

/* admin bar keeps the fixed header clear */
body.admin-bar .hdr{top:32px}
body.admin-bar .journey__stage{top:32px;height:calc(100vh - 32px)}
@media screen and (max-width:782px){
  body.admin-bar .hdr{top:46px}
  body.admin-bar .journey__stage{top:46px;height:calc(100vh - 46px)}
}