/* 01 · BASE — colour tokens, fonts, page defaults. Change brand colours here. */
:root{
  --bg:#1A2654; --bg-2:#1F2C5E; --panel:#243168; --deep:#131C42;
  --cream:#EFECE2; --paper:#F6F4EC; --red:#EA3238; --red-soft:#FF7B7E;
  --text:#EFECE2; --muted:#AEB3CE; --line:rgba(239,236,226,.14); --line-strong:rgba(239,236,226,.32);
  --ink:#1A2654; --ink-muted:#555E82; --ink-line:rgba(26,38,84,.16);
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --gut:clamp(16px,5vw,96px); --max:1680px;   /* full-width layout (2 Oct 2026): content grows with the screen, 5% side margins, capped at 1680px */
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
:focus-visible{outline:2px solid var(--red-soft);outline-offset:3px}

h1{font:800 clamp(42px,6.6vw,92px)/.95 var(--sans);letter-spacing:-.035em;margin:0 0 26px;text-wrap:balance;text-transform:uppercase}
h1 .l1{display:block;color:var(--red)}
.lede{font-size:clamp(17px,1.5vw,19px);line-height:1.75;color:var(--muted);max-width:46ch;margin:0 0 34px;letter-spacing:.01em}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
/* section base */
section.block{padding-block:clamp(72px,9vw,128px)}
.sec-head{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(32px,5vw,56px)}
.kicker{color:var(--red-soft);margin-bottom:14px;display:block}
h2{font:800 clamp(30px,4.2vw,54px)/1.02 var(--sans);letter-spacing:-.03em;margin:0;text-wrap:balance}
.sec-head p{margin:0;color:var(--muted);max-width:52ch;font-size:17px}
@media (max-width:820px){.sec-head{grid-template-columns:1fr}}

/* =====================================================================
   Transkers v3 — multi-page system, built on Gestalt principles
   Proximity  : one 8px spacing scale; items in a group sit 1 step apart,
                groups sit 4–6 steps apart, so grouping is read, not labelled.
   Similarity : every service / industry / step uses the same block glyph,
                card and label style; only red marks the one thing to act on.
   Closure    : frames drawn only at their corners; the T is built from
                separate blocks — the eye completes both.
   Continuity : a single "route" line runs down inner pages and threads
                every section through a stop marker.
   Figure/ground : navy ground, cream figure; cream bands flip it once per page.
   Common region : panels hold related items; nothing floats alone.
   Common fate   : groups reveal together, staggered in reading order.
   Prägnanz      : only rectangles and straight lines.
   ===================================================================== */
:root{--s1:8px;--s2:16px;--s3:24px;--s4:32px;--s6:48px;--s8:64px;--s12:96px}

/* 02 · HEADER — logo, top menu, buttons, dropdown menus, mobile menu */
/* header */
.top{position:fixed;left:0;right:0;top:0;padding-top:env(safe-area-inset-top,0px);z-index:40;background:var(--bg);transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.top.scrolled{background:rgba(26,38,84,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 24px/1 var(--sans);letter-spacing:-.03em;color:#fff}
.brand img{height:34px;width:auto;flex:none}
@media (max-width:640px){.brand{font-size:21px;gap:8px}.brand img{height:28px}}
.nav{display:flex;align-items:center;gap:30px}
.nav a{text-decoration:none;font:600 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;position:relative;padding-block:8px}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--sans);text-decoration:none;padding:15px 22px;border:1.5px solid var(--cream);background:var(--cream);color:var(--ink);cursor:pointer;transition:background .2s,color .2s,transform .2s}
.btn:hover{transform:translateY(-1px);background:#fff}
.btn.ghost{background:transparent;color:var(--cream)}
.btn.ghost:hover{background:var(--cream);color:var(--ink)}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.red:hover{background:#d22a30}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.nav .btn{padding:12px 16px;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:860px){.nav a:not(.btn){display:none}}

/* ---------- header: dropdowns, login, mobile menu ---------- */
.nav{gap:22px}
.nav a,.nav .dd>button{white-space:nowrap}
.nav>a:not(.btn),.nav .dd>button{font-size:12.5px}
.nav .dd{position:relative}
.nav .dd>button{all:unset;cursor:pointer;font:600 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding-block:8px;display:inline-flex;align-items:center;gap:6px;position:relative}
.nav .dd>button::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.nav .dd.open>button::after,.nav .dd:hover>button::after{transform:translateY(1px) rotate(225deg)}
.nav .dd>button:focus-visible{outline:2px solid var(--red-soft);outline-offset:3px}
.menu{position:absolute;left:-18px;top:calc(100% + 14px);min-width:260px;background:var(--deep);border:1px solid var(--line);padding:var(--s1);display:grid;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .25s,visibility 0s .25s;box-shadow:0 24px 48px -16px rgba(0,0,0,.5)}
.menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav .dd:hover .menu,.nav .dd.open .menu,.nav .dd:focus-within .menu{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .25s}
.menu a{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:center;padding:10px 12px;text-transform:none;letter-spacing:0;font:500 14px/1.3 var(--sans)}
.menu a::after{display:none}
.menu a:hover{background:var(--panel)}
.menu a small{display:block;color:var(--muted);font:400 12px/1.3 var(--sans)}
.glyph{width:24px;height:24px;color:var(--cream);flex:none}
.btn.login{background:#fff;color:var(--ink);border-color:#fff;padding:11px 14px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;gap:8px}
.btn.login:hover{border-color:var(--cream);background:var(--cream);color:var(--ink)}
.btn.login i{width:8px;height:8px;background:var(--red)}
.burger{all:unset;cursor:pointer;width:44px;height:44px;place-items:center;display:none}
.burger span{display:block;width:22px;height:2px;background:var(--cream);box-shadow:0 7px 0 var(--cream),0 -7px 0 var(--cream)}
.mnav{position:fixed;inset:0;z-index:70;background:var(--deep);padding:calc(env(safe-area-inset-top,0px) + 88px) var(--gut) 40px;display:grid;align-content:start;gap:var(--s4);overflow:auto;transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.mnav.open{transform:none}
.mnav .grp{display:grid;gap:var(--s1)}
.mnav .grp h5{margin:0 0 4px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mnav a{font:700 20px/1.3 var(--sans);text-decoration:none}
.mnav .grp.small a{font:500 16px/1.4 var(--sans);color:var(--muted)}
.mnav .x{all:unset;position:absolute;right:var(--gut);top:calc(env(safe-area-inset-top,0px) + 16px);cursor:pointer;width:44px;height:44px;display:grid;place-items:center;font:400 30px var(--sans);color:var(--cream)}
.nav-cta{display:flex;gap:10px;align-items:center}
@media (max-width:1240px){.nav>a:not(.btn),.nav>.dd{display:none}.burger{display:grid}}
@media (max-width:640px){.nav .btn.login{display:none}}
@media (max-width:520px){.nav .btn.red{padding:11px 12px}}
.nav a.current:not(.btn)::after,.nav .dd.current>button{box-shadow:inset 0 -2px 0 var(--red)}
@media (max-width:440px){.nav .nav-cta .btn.red{display:none}}

/* menu sits beside the logo, buttons on the far right (flying-cargo.com pattern, mirrored to read left to right) — 2 Oct 2026 */
.top .wrap{justify-content:flex-start;gap:clamp(28px,3.4vw,60px)}
.nav{flex:1;min-width:0}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}

/* Services / Industries: the label is a link to the page that lists everything; the dropdown opens on hover or focus (flying-cargo.com pattern) */
.nav .dd>a.dd-t{display:inline-flex;align-items:center;gap:6px;font-size:12.5px}
.nav .dd>a.dd-t .car{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.nav .dd:hover>a.dd-t .car,.nav .dd:focus-within>a.dd-t .car{transform:translateY(1px) rotate(225deg)}
.nav .dd.current>a.dd-t::after{transform:scaleX(1)}
.menu a.all{display:flex;justify-content:space-between;grid-template-columns:none;font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--red-soft);border-bottom:1px solid var(--line);margin-bottom:4px;padding-block:12px}
.mnav .grp.small a.all{color:var(--cream);font-weight:600}

/* 03 · SHARED COMPONENTS — page titles, route line, bands, cards, icons, chips, CTA band */
/* ---------- inner page hero ---------- */
.ph{position:relative;padding-block:clamp(128px,14vw,184px) clamp(48px,6vw,80px);border-bottom:1px solid var(--line)}
.ph .crumbs{display:flex;gap:10px;color:var(--muted);margin-bottom:var(--s3)}
.ph .crumbs a{text-decoration:none}
.ph .crumbs a:hover{color:var(--text)}
.ph h1{font:800 clamp(40px,6vw,84px)/.96 var(--sans);letter-spacing:-.035em;margin:0 0 var(--s3);text-transform:uppercase;max-width:16ch;text-wrap:balance}
.ph h1 .r{color:var(--red)}
.ph .lede{margin:0;max-width:56ch}
.ph .mark{position:absolute;right:var(--gut);bottom:clamp(40px,6vw,72px);display:grid;grid-template-columns:repeat(4,clamp(14px,1.6vw,22px));gap:4px;opacity:.9}
.ph .mark i{aspect-ratio:1;background:var(--cream)}
.ph .mark i.o{background:transparent}
.ph .mark i.r{background:var(--red)}
@media (max-width:760px){.ph .mark{display:none}}

/* ---------- continuity: route line threading sections ---------- */

/* ---------- closure: corner-bracket frames ---------- */
.frame{position:relative;padding:clamp(20px,3vw,36px)}
.frame::before,.frame::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--cream);pointer-events:none}
.frame::before{left:0;top:0;border-right:0;border-bottom:0}
.frame::after{right:0;bottom:0;border-left:0;border-top:0}
.cream .frame::before,.cream .frame::after{border-color:var(--ink)}

/* ---------- bands and blocks ---------- */
.band{padding-block:clamp(72px,9vw,120px)}
.band + .band{border-top:1px solid var(--line)}
.cream{background:var(--cream);color:var(--ink)}
.cream .muted,.cream p.m{color:var(--ink-muted)}
.cream .kicker{color:#C4232A}
.muted{color:var(--muted)}
.two{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,72px);align-items:start}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.h2{font:800 clamp(28px,3.8vw,48px)/1.04 var(--sans);letter-spacing:-.03em;margin:0;text-wrap:balance}
.h3{font:800 20px/1.25 var(--sans);margin:0}
.prose p{margin:0 0 var(--s2);max-width:62ch;font-size:17px;line-height:1.75}
.prose p:last-child{margin-bottom:0}
.cream .prose p{color:var(--ink)}

/* similarity: one card, one glyph, everywhere */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.cards.two-c{grid-template-columns:repeat(2,1fr)}
.card{background:var(--bg-2);border:1px solid var(--line);padding:var(--s3);display:grid;gap:12px;align-content:start;transition:border-color .25s,transform .25s,background .25s;text-decoration:none;color:inherit;position:relative}
a.card:hover,.card:hover{border-color:var(--line-strong);transform:translateY(-2px);background:var(--panel)}
.card .code{font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.card p{margin:0;color:var(--muted);font-size:15px}
.card .go{margin-top:6px;font:600 13px var(--sans);display:inline-flex;gap:8px;align-items:center}
.card .go::after{content:"→";transition:transform .2s}
a.card:hover .go::after{transform:translateX(3px)}
.cream .card{background:var(--paper);border-color:var(--ink-line)}
.cream .card p{color:var(--ink-muted)}
.cream a.card:hover,.cream .card:hover{background:#fff;border-color:rgba(26,38,84,.35)}
.bg{width:40px;height:40px;color:var(--cream);display:block;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.cream .bg{color:var(--ink)}
a.card:hover .bg,.card:hover .bg,.why article:hover .bg,.svc article:hover .bg{transform:translateY(-3px)}
.menu a:hover .glyph{color:#fff}
@media (max-width:980px){.cards,.cards.four{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards,.cards.four,.cards.two-c{grid-template-columns:1fr}}

/* states chips (similarity + proximity) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:8px 10px;border:1px solid var(--line-strong)}
.chip.r{border-color:var(--red);color:var(--red-soft)}
.cream .chip{border-color:rgba(26,38,84,.3)}

/* CTA band */
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3)}
.cta .h2{max-width:22ch}

/* smooth-scroll + UX layer */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--red);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}
.top{transition:transform .45s cubic-bezier(.2,.7,.2,1),background .3s,border-color .3s}
.top.hide{transform:translateY(-100%)}
.nav a.active:not(.btn)::after{transform:scaleX(1)}
.js .rv{opacity:.001;transform:translateY(12px);transition:opacity .6s ease-out,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}
.js .stagger>*{opacity:.001;transform:translateY(10px);transition:opacity .55s ease-out,transform .65s cubic-bezier(.2,.7,.2,1)}
.js .stagger.in>*{opacity:1;transform:none}
.js .stagger.in>*:nth-child(2){transition-delay:.06s}.js .stagger.in>*:nth-child(3){transition-delay:.12s}.js .stagger.in>*:nth-child(4){transition-delay:.18s}.js .stagger.in>*:nth-child(5){transition-delay:.24s}.js .stagger.in>*:nth-child(6){transition-delay:.3s}.js .stagger.in>*:nth-child(7){transition-delay:.36s}.js .stagger.in>*:nth-child(8){transition-delay:.42s}
[data-par]{will-change:transform}
@media (prefers-reduced-motion:reduce){.js .rv,.js .stagger>*{opacity:1!important;transform:none!important}.progress{display:none}}

/* ---------- ICONS: built from taped packages (content/icons.py) ---------- */
.pkg{overflow:visible}
.pkg .tp{fill:var(--tape,rgba(26,38,84,.42))}
.cream .pkg,.st-tabs .pkg{--tape:rgba(239,236,226,.5)}
.pkg .pk{transform-box:fill-box;transform-origin:50% 100%}
.card .bg{width:48px;height:48px}
/* packages drop in, one after another, when the group scrolls into view */
.js .stagger:not(.in) .pkg .pk,.js .rv:not(.in) .pkg .pk{opacity:0;transform:translateY(-55%)}
.js .stagger.in .pkg .pk,.js .rv.in .pkg .pk{transition:transform .6s cubic-bezier(.3,1.35,.5,1) calc(var(--i) * 70ms + .2s),opacity .25s linear calc(var(--i) * 70ms + .2s)}
/* on hover the stack restacks */
a.card:hover .pkg .pk,.card:hover .pkg .pk,.dir-list a:hover .pkg .pk,.menu a:hover .pkg .pk,.st-tabs [role=tab]:hover .pkg .pk{animation:pkHop .5s cubic-bezier(.3,.7,.3,1) calc(var(--i) * 45ms) both}
@keyframes pkHop{40%{transform:translateY(-18%)}}
.st-panel.in .st-ico .pk{animation:pkDrop .7s cubic-bezier(.3,1.3,.5,1) calc(var(--i) * 80ms + .1s) both}
@keyframes pkDrop{from{opacity:0;transform:translateY(-70%)}}
@media (prefers-reduced-motion:reduce){.pkg .pk{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}}

/* 05 · EFFECTS — the ten motion-lab effects, each used for one kind of element everywhere it appears (gestalt: same kind, same behaviour).
   1 page-header parallax · 2 drawings tell their story (see 06-stories.css) · 3 sticky chapter titles (About) · 4 city ribbon (Lanes) · 5 tile tilt (hubs)
   6 words light up (closing headline on every page) · 7 stepped edges (every cream band) · 8 floating header · 9 expanding cards (Work with us)
   10 stacked steps (Match. Move. Prove. on About). Motion: scripts/05-effects.js. Everything is off for reduced motion. */

/* 1 · page-header parallax */
.ph h1,.ph .lede,.ph .mark{will-change:transform}

/* 2 · drawings tell their story: styles/06-stories.css */

/* 3 · sticky chapter titles */
@media (min-width:861px){.chap>.two>div:first-child{position:sticky;top:110px;align-self:start}}

/* 4 · city ribbon */
.ribbon{overflow:hidden;background:var(--deep);padding-block:clamp(28px,3.5vw,52px);border-block:1px solid var(--line)}
.ribbon-row{display:flex;gap:clamp(18px,2vw,30px);align-items:center;white-space:nowrap;font:800 clamp(30px,4.6vw,76px)/1.12 var(--sans);letter-spacing:-.03em;text-transform:uppercase;will-change:transform;width:max-content}
.ribbon-row i{width:.3em;height:.3em;background:var(--red);flex:none}
.ribbon-row.o{color:transparent;-webkit-text-stroke:1.2px rgba(239,236,226,.42);margin-top:6px}

/* 5 · tile tilt (hubs, pointer only) */
.tiles.hub{perspective:900px}
.tiles.hub .tile{transform-style:preserve-3d}
.tiles.hub .tile .tile-mk{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.tiles.hub .tile.tilting{transition:transform .12s linear,border-color .25s}

/* 6 · words light up */
.lit-words .wd{transition:color .3s,opacity .3s}
.js .lit-words .wd{opacity:.2}
.js .lit-words .wd.on{opacity:1}

/* 7 · stepped edges: every cream band rises out of the navy on the T-mark's steps */
.band.cream{position:relative}
.band.cream::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:clamp(24px,3vw,44px);background:var(--cream);pointer-events:none;
  clip-path:polygon(0 100%,0 66%,12% 66%,12% 33%,22% 33%,22% 66%,46% 66%,46% 0,58% 0,58% 33%,74% 33%,74% 66%,88% 66%,88% 33%,100% 33%,100% 100%)}
.band + .band.cream{border-top:0}

/* 8 · floating header: once the page moves, the bar lifts in from the edges */
.top{transition:background .35s,border-color .35s,transform .35s,padding .45s cubic-bezier(.2,.7,.2,1)}
.top .wrap{transition:height .45s cubic-bezier(.2,.7,.2,1),background .35s,border-color .35s,box-shadow .45s,margin .45s cubic-bezier(.2,.7,.2,1)}
@media (min-width:861px){
  .top.scrolled{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent;padding-top:calc(env(safe-area-inset-top,0px) + 10px)}
  .top.scrolled .wrap{height:60px;background:rgba(19,28,66,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line-strong);box-shadow:0 14px 40px rgba(5,9,30,.45);
    max-width:calc(var(--max) - var(--gut) * 2);margin-inline:max(var(--gut),calc((100% - var(--max)) / 2 + var(--gut)))}
}

/* 9 · expanding cards (Work with us: the two paths) */
@media (min-width:761px){
  .paths{display:flex}
  .paths>a{flex:1;min-width:0;transition:flex-grow .55s cubic-bezier(.2,.7,.2,1),border-color .25s}
  .paths>a:hover,.paths>a:focus-visible{flex-grow:1.6}
}

/* 10 · stacked steps: Match, Move, Prove slide over each other as you scroll */
.model.three.stack{grid-template-columns:1fr;gap:18px}
.model.three.stack>div{position:sticky;top:calc(110px + var(--i) * 18px);background:var(--cream);border:1px solid rgba(26,38,84,.18);border-top:3px solid var(--ink);padding:clamp(22px,3vw,40px)!important;box-shadow:0 -14px 34px rgba(26,38,84,.12);display:grid;grid-template-columns:auto 1fr;gap:6px 28px;align-items:baseline}
.model.three.stack>div+div{border-left:1px solid rgba(26,38,84,.18)}
.model.three.stack .n{grid-row:1/3}
.model.three.stack b{margin:0;font-size:clamp(28px,3vw,44px)}
.model.three.stack p{grid-column:2;font-size:17px}

@media (prefers-reduced-motion:reduce){
  .ph h1,.ph .lede,.ph .mark,.ribbon-row,.tiles.hub .tile{transform:none!important}
  .js .lit-words .wd{opacity:1}
}
.ab-drive{width:clamp(150px,16vw,220px);margin-top:clamp(24px,3vw,40px)}
.ab-drive .ab-mk{margin-top:0}

/* 06 · STORIES — the service, industry and About drawings act out what they mean.
   One grammar everywhere, so one rule explains every drawing:
     · the bed never moves
     · a whole consignment arrives from the left and leaves to the right, towards its destination
     · unit loads are set down from above, bottom row first · round loads roll in · machines are lowered slowly · bulk grows
     · a dashed outline is free space waiting for the load; it fades once the load is in
     · cream signs explain the service: the clock turns, the width mark stretches, the route is drawn leg by leg, the roof lands
   WHEN A DRAWING PLAYS
     .go    the story plays. A drawing made with play=… (content/marks.py) has .go from the start, so it plays as the page opens
            with no script at all; --w is how long it waits first (tiles wait a little longer one after another).
     .hold  the story waits at its first frame (a drawing that is not on screen yet). The script lets it go once it has come into view.
     .bye   the load leaves to the right, just before the story plays again.
   The small copies in menus and tabs have none of these and never move. The finished picture is always the last frame.
   What each part does is named in content/marks.py; when stories replay is in scripts/06-stories.js. Nothing moves for reduced motion. */
.mk{overflow:hidden}
.s-space,.rope{opacity:0}                            /* helpers: seen only while a story plays */
.s-hand,.s-ring,.s-mark,.s-step,.s-lines,.s-rise,.ly.gw,.sp{transform-box:fill-box}
.s-hand{transform-origin:50% 81.82%}                 /* the centre of the clock face */
.s-ring,.s-mark,.s-step,.sp{transform-origin:50% 50%}
.s-lines{transform-origin:100% 50%}
.s-rise,.ly.gw{transform-origin:50% 100%}            /* grows up from the bed */
.mk.hold *{animation-play-state:paused!important}

/* ---------- services and About: the story ---------- */
.mk.go .s-in{animation:sIn var(--d,.9s) var(--e,cubic-bezier(.2,.75,.25,1)) calc(var(--w,0s) + var(--t,0s)) both}
@keyframes sIn{from{transform:translateX(var(--x,-200px));opacity:0}18%{opacity:1}to{transform:none;opacity:1}}
.mk.go .s-drop{animation:sDrop .5s cubic-bezier(.25,.85,.35,1) calc(var(--w,0s) + var(--t,0s) + var(--i,0)*.15s) both}
@keyframes sDrop{from{transform:translateY(var(--y,-70px));opacity:0}30%{opacity:1}to{transform:none;opacity:1}}
.mk.go .s-rise{animation:sRise .45s cubic-bezier(.2,.8,.3,1) calc(var(--w,0s) + var(--i,0)*.12s) both}
@keyframes sRise{from{transform:scaleY(0)}to{transform:none}}
.mk.go .s-space{animation:sSpace var(--sd,1.2s) linear var(--w,0s) both}
@keyframes sSpace{0%,75%{opacity:.6}100%{opacity:0}}
/* JIT: speed lines trail the load; the long hand goes round once and stops with it; the clock ticks */
.mk.go .s-lines{animation:sLines var(--d,.78s) cubic-bezier(.2,.7,.2,1) var(--w,0s) both}
@keyframes sLines{from{transform:scaleX(2.6);opacity:0}30%{opacity:1}to{transform:none;opacity:1}}
.mk.go .s-hand{animation:sHand .78s cubic-bezier(.3,.6,.3,1) var(--w,0s) both}
@keyframes sHand{from{transform:rotate(-330deg)}to{transform:none}}
.mk.go .s-ring{animation:sTick .36s ease-out calc(var(--w,0s) + .76s) both}
@keyframes sTick{0%{transform:none}45%{transform:scale(1.14)}100%{transform:none}}
/* ODC: the width mark starts as wide as the bed and stretches to the load */
.mk.go .s-mark{animation:sMark .5s cubic-bezier(.2,.8,.3,1) calc(var(--w,0s) + 1.25s) both}
@keyframes sMark{from{transform:scaleX(.81)}to{transform:none}}
/* road–rail: once the load is in, its trip is drawn above it from left to right, one step at a time: start, road, rail, road, end */
.mk.go .s-step{animation:sStep .24s cubic-bezier(.3,1.5,.5,1) calc(var(--w,0s) + .8s + var(--i,0)*.085s) both}
@keyframes sStep{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
/* relocation: the roof lands last */
.mk.go .s-roof{--y:-30px;animation:sDrop .5s cubic-bezier(.25,.85,.35,1) calc(var(--w,0s) + .82s) both}
/* per drawing: how long the free space stays dashed */
.mk.go .s-in .s-space{--sd:1.5s}

/* ---------- services and About: the load leaves ---------- */
.mk.bye .s-out{animation:sOut .44s cubic-bezier(.5,0,.85,.4) both}
@keyframes sOut{to{transform:translateX(196px);opacity:0}}
.mk.bye .s-space{animation:sTo6 .44s both}
@keyframes sTo6{to{opacity:.6}}
.mk.bye .s-mark{animation:sMarkBack .4s both}
@keyframes sMarkBack{to{transform:scaleX(.81)}}
.mk.bye .s-hand{animation:sHandBack .44s both}
@keyframes sHandBack{to{transform:rotate(30deg)}}
.mk.bye .s-step{animation:sGone .3s both}                                   /* the trip is done; the next one is drawn afresh */
@keyframes sGone{to{opacity:0}}

/* ---------- industries: three consignments take turns; each is loaded layer by layer ---------- */
.cg{transition:none}
.cg.off{opacity:0;transform:translateX(28px);transition:opacity .26s ease-in,transform .32s ease-in}      /* the load leaves to the right */
.mk.go .cg:not(.off) .ly{animation:lyDrop .44s cubic-bezier(.25,.85,.35,1) calc(var(--w,0s) + .24s + var(--i,0)*var(--st,.07s)) both}
.mk.go .cg:not(.off) .ly.rl,.mk.go .cg:not(.off) .ly.sl{animation-name:lyRoll;animation-duration:.6s;animation-timing-function:cubic-bezier(.2,.7,.3,1)}
.mk.go .cg:not(.off) .ly.lw{animation-name:lyLower;animation-duration:1s;animation-timing-function:cubic-bezier(.3,.6,.3,1)}
.mk.go .cg:not(.off) .ly.pl{animation-name:lyPlace}
.mk.go .cg:not(.off) .ly.fd{animation-name:lyFade;animation-duration:.35s}
.mk.go .cg:not(.off) .ly.gw{animation-name:lyGrow;animation-duration:.7s}
.mk.go .cg:not(.off) .sp{animation:lySpin .6s cubic-bezier(.2,.7,.3,1) calc(var(--w,0s) + .24s + var(--i,0)*var(--st,.07s)) both}
.mk.go .cg:not(.off) .rope{animation:lyRope 1.3s linear calc(var(--w,0s) + .24s) both}
@keyframes lyDrop{from{transform:translateY(-36px);opacity:0}35%{opacity:1}to{transform:none;opacity:1}}
@keyframes lyPlace{from{transform:translateY(-9px);opacity:0}to{transform:none;opacity:1}}
@keyframes lyRoll{from{transform:translateX(var(--x,-170px));opacity:0}15%{opacity:1}to{transform:none;opacity:1}}
@keyframes lyLower{from{transform:translateY(-44px);opacity:0}20%{opacity:1}to{transform:none;opacity:1}}
@keyframes lyFade{from{opacity:0}to{opacity:1}}
@keyframes lyGrow{from{transform:scaleY(0)}to{transform:none}}
@keyframes lySpin{from{transform:rotate(var(--a,-360deg))}to{transform:none}}
@keyframes lyRope{0%,72%{opacity:.55}100%{opacity:0}}

/* ---------- industries hub: the drawing and, beside it, the name of the consignment on show ----------
   The drawing is the same size as on a service tile. The name stands on the bed's line, to the right; on phones it goes under the drawing,
   with room kept for two lines so nothing below it moves when the name changes. */
.tile-art{display:grid;grid-template-columns:minmax(0,min(190px,62%)) minmax(0,1fr);gap:12px;align-items:end;margin:0 0 8px}
.tiles.hub .tile-art .tile-mk{margin:0;max-width:none;width:100%}
.tile-c{font-size:10.5px;line-height:1.45;letter-spacing:.08em;padding-bottom:4px;transition:opacity .2s}      /* colour: the tile's quiet label grey (.tile .mono) */
.d-cap{transition:opacity .2s}                       /* the name under an industry page's drawing fades as it changes, like the tile's */
@media (max-width:1280px){.tile-c{font-size:9.5px;letter-spacing:.05em}}
@media (min-width:1101px) and (max-width:1200px){.tile-c{font-size:9px;letter-spacing:.03em}}
@media (max-width:600px){
  .tile-art{grid-template-columns:minmax(0,1fr);gap:6px;margin:0 0 4px}
  .tile-c{font-size:9px;letter-spacing:.04em;line-height:1.4;min-height:2.8em;padding:0}
}

@media (prefers-reduced-motion:reduce){
  .mk *{animation:none!important}
  .cg.off{transition:none}
}
@media print{.mk *{animation:none!important}}        /* on paper: the finished pictures */

/* 10 · HOME › HERO — one-screen assembly film (held on first visit, see scripts/10-home-hero.js), big changing caption
   Layouts:  laptop/desktop (side by side) · tablet + phone portrait (film on top, text below) · phone landscape (compact side by side)
   --sw = width of the film; the film's own art sits in its right 70%, so it is shifted right/centred accordingly. */
.hx{position:relative;height:100svh;min-height:560px}

.hx-pin{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;isolation:isolate}
.hx-stage{--sw:min(94vw,140svh);position:absolute;right:-8vw;top:50%;width:var(--sw);aspect-ratio:21/12.5;margin-top:calc(var(--sw) / -1.68 * .46);transform-origin:70% 50%;will-change:transform;z-index:0;pointer-events:none}
.hx-stage svg{display:block;width:100%;height:100%}
.hx-stage [class^="tkh-cp"]{display:none}
.hx-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--bg) 0%,rgba(26,38,84,.94) 30%,rgba(26,38,84,.4) 46%,rgba(26,38,84,0) 56%),linear-gradient(0deg,var(--bg) 0%,rgba(26,38,84,0) 22%)}
.hx-ui{position:relative;z-index:2;height:100%;display:grid;grid-template-rows:1fr;padding-block:calc(env(safe-area-inset-top,0px) + 104px) 28px;pointer-events:none}
.hx-ui a,.hx-ui button{pointer-events:auto}
.hx-copy{align-self:center;max-width:min(520px,40vw);will-change:transform,opacity}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hx-k{white-space:nowrap;display:flex;align-items:center;gap:12px;font:500 13px/1 var(--mono);letter-spacing:.14em;color:var(--muted);margin-bottom:18px;min-height:14px}
.hx-k b{color:#FF7B7E;font-weight:500}
.hx-k i{width:10px;height:10px;background:var(--red);flex:none}
.hx-big{font:800 clamp(40px,5.4vw,96px)/.92 var(--sans);letter-spacing:-.04em;text-transform:uppercase;margin:0;min-height:1.84em;text-wrap:balance}
.hx-big .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.hx-big .w>span{display:inline-block;transform:translateY(105%);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.hx-big.show .w>span{transform:none}
.hx-big.show .w:nth-child(2)>span{transition-delay:.05s}.hx-big.show .w:nth-child(3)>span{transition-delay:.1s}.hx-big.show .w:nth-child(4)>span{transition-delay:.15s}.hx-big.show .w:nth-child(5)>span{transition-delay:.2s}
.hx-big.leave .w>span{transform:translateY(-105%);transition:transform .38s cubic-bezier(.7,0,.84,0)}
.hx-big .r{color:var(--red)}
.hx-br{display:none}
.hx-sub{margin:22px 0 0;max-width:36ch;color:var(--muted);font-size:clamp(16px,1.3vw,19px);min-height:3em;transition:opacity .45s,transform .6s cubic-bezier(.16,1,.3,1)}
.hx-sub.leave{opacity:0}                  /* fades only: the description never moves */
.hx-copy .ctas{margin-top:30px}

/* tablet + phone, portrait (flying-cargo.com pattern): the whole film on top, full width and uncropped; the words follow underneath */
@media (max-width:1024px) and (orientation:portrait),(max-width:700px){
  .hx{min-height:0}
  .hx-pin{display:flex;flex-direction:column;justify-content:center;padding-top:calc(env(safe-area-inset-top,0px) + 64px);min-height:0}
  .hx-stage{--sw:100%;position:relative;left:auto;right:auto;top:auto;margin:0;width:100%;flex:none;transform-origin:50% 0}
  .hx-shade{display:none}
  .hx-ui{height:auto;flex:none;grid-template-rows:auto;align-content:start;padding-block:clamp(14px,3svh,32px) 18px}
  .hx-copy{align-self:start;max-width:640px}
  .hx-k{margin-bottom:12px}
  .hx-big{font-size:clamp(24px,7.3vw,60px);white-space:nowrap;text-wrap:initial}   /* every headline is exactly two lines (the break is set in the caption list), so nothing below it ever moves */
  .hx-br{display:inline}
  .hx-sub{margin-top:12px;font-size:clamp(15px,2.2vw,18px);line-height:1.5;min-height:4.5em}
  .hx-copy .ctas{margin-top:18px}
}
@media (max-width:420px){.hx-copy .ctas .btn{padding:13px 16px;font-size:14px}}
/* short phones: drop the sub-line so the film keeps its space */
@media (max-width:700px) and (max-height:700px){.hx-sub{display:none}}

/* phone landscape: compact side by side */
@media (orientation:landscape) and (max-height:520px){
  .hx{min-height:320px}
  .hx-pin{min-height:320px}
  .hx-stage{--sw:min(78vw,190svh);right:-10vw;top:54%;margin-top:calc(var(--sw) / -1.68 * .5)}
  .hx-ui{padding-block:calc(env(safe-area-inset-top,0px) + 64px) 10px}
  .hx-copy{max-width:44vw}
  .hx-k{margin-bottom:10px;font-size:11px}
  .hx-big{font-size:clamp(24px,8svh,40px)}
  .hx-sub{display:none}
  .hx-copy .ctas{margin-top:14px}
  .hx-copy .ctas .btn{padding:10px 14px;font-size:13px}
}

@media (prefers-reduced-motion:reduce){.hx{height:auto}.hx-pin{position:relative;height:auto;min-height:100svh}.hx-segs{display:none}}

/* 11 · HOME › INTRO — flying-cargo.com's intro at the same scale, mirrored to read left to right.
   --H = height of the crate and of the Transkers mark (12% of the screen width, as on flying-cargo.com).
   The mark, the red trail and the paragraph are positioned by scripts/11-home-intro.js (only when html has .js). */
.intro{position:relative;overflow:hidden;overflow:clip;display:grid;align-items:center;padding-block:clamp(88px,10vw,160px)}
.in{--H:clamp(100px,12.5vw,220px);--bw:clamp(5px,.8vw,12px);--ch:calc(var(--H) - var(--bw) * 2);--cw:calc(var(--ch) * .86);   /* near-square cells, symbols fill ~70% (flying-cargo.com proportion) */
  position:relative;width:100%}

/* start: mark | crate | slogan, centred */
.in-a{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:2.2vw;will-change:transform}
.in-slot{flex:none;width:calc(var(--H) * 1.4);height:var(--H)}
.in-h{margin:0;text-transform:uppercase;font-weight:800;text-align:left}
.in-hw{display:block;overflow:hidden}
.in-hi{display:block;will-change:transform}
.in-h .k{display:block;color:var(--red);font-size:clamp(15px,2.1vw,40px);font-weight:700;letter-spacing:.05em;line-height:1.3}
.in-h .b{display:block;color:var(--cream);font-size:clamp(24px,3.6vw,66px);line-height:1.08;letter-spacing:.04em}

/* crate of package-handling symbols (slot reels) */
.crate{flex:none;width:max-content;display:grid;grid-template-columns:repeat(4,var(--cw));border:var(--bw) solid var(--cream);background:var(--bg);will-change:transform}
.reel{position:relative;width:var(--cw);height:var(--ch);overflow:hidden}
.reel + .reel{border-left:var(--bw) solid var(--cream)}
.strip{display:grid;will-change:transform}
.strip svg{width:var(--cw);height:var(--ch);display:block;padding:13%}
.strip svg *{fill:none;stroke:var(--cream);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.strip svg *{transition:stroke .45s ease}
.reel.done svg.pk *{stroke:var(--red)}   /* the package turns red as it lands, like the mark's red square */



/* mark, trail, paragraph — static fallback first (no JS / reduced motion) */
.in-mark0{display:block;width:100%;height:100%}.js .in-mark0{display:none}      /* the mark, standing still, when nothing is animated */
.crate:empty{display:none}                                                       /* no script: no symbols to show, so no empty box */
.in-logo,.in-trail{display:none}
.in-p{max-width:62ch;margin:40px auto 0;padding-inline:16px;font-size:clamp(17px,1.35vw,22px);line-height:1.85;color:var(--cream)}
.js .in-logo{display:block;position:absolute;left:0;top:0;z-index:1;width:calc(var(--H) * 1.4);height:var(--H);opacity:0;will-change:transform}
.js .in-trail{display:block;position:absolute;left:0;top:0;z-index:0;width:0;background:var(--red)}
.js .in-p{position:absolute;left:0;top:0;z-index:1;margin:0;padding:0;max-width:none;opacity:0;will-change:transform,opacity;text-align:justify;hyphens:auto}

/* phones + portrait tablets (flying-cargo.com's phone layout): everything has its place and stays there.
   Row 1: mark + slogan · row 2: the crate, as wide as the text · row 3: the paragraph. Only the symbols move. */
@media (max-width:700px),(max-width:1024px) and (orientation:portrait){
  .intro{min-height:0;padding-block:72px 64px}
  .in{--H:clamp(60px,17vw,96px);--bw:3px;max-width:560px;margin-inline:auto}
  .in-a{flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:18px 14px;padding-inline:20px}
  .in-slot{order:1}
  .in-h{order:2;flex:1 1 0;min-width:0}
  .crate{order:3;flex:0 0 100%;width:100%;--cw:calc((min(100vw,560px) - 40px - var(--bw) * 5) / 4);--ch:calc(var(--cw) * .9);transform-origin:50% 50%}
  .in-h .k{font-size:clamp(12px,3.6vw,17px)}
  .in-h .b{font-size:clamp(24px,7.4vw,38px)}
  .in-p,.js .in-p{position:static;max-width:none;width:auto;margin:22px 20px 0;padding:0;font-size:16px;line-height:1.7;text-align:left;hyphens:manual}
  .js .in-trail{display:none}
}

/* 12 · HOME › INDUSTRIES — "Built for your cargo." tabs; the drawing's cargo changes between three consignments */
.ix{padding-block:clamp(72px,9vw,128px)}
.ix-head{margin-bottom:clamp(28px,4vw,44px)}
.ix-head p{margin:12px 0 0;color:var(--ink-muted);font-size:18px}
.ix-st{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
.ix-tabs{display:grid;border-top:1.5px solid var(--ink)}
.ix-tabs [role=tab]{all:unset;cursor:pointer;display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:center;padding:12px 6px 12px 2px;border-bottom:1px solid var(--ink-line);font:500 16px/1.25 var(--sans);color:var(--ink-muted);position:relative;transition:color .25s,background .25s}
.ix-tabs [role=tab]:hover{color:var(--ink)}
.ix-tabs [role=tab][aria-selected=true]{color:var(--ink);font-weight:700;background:var(--paper)}
.ix-tabs [role=tab]:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.ix-tabs [role=tab]{--mk-bg:var(--cream)}
.ix-tabs [role=tab][aria-selected=true]{--mk-bg:var(--paper)}
.ix-tm{width:42px;height:27px;color:var(--ink);opacity:.55;transition:opacity .25s}
.ix-tabs [aria-selected=true] .ix-tm{opacity:1}
.ix-bar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:0 50%}
.ix-tabs [aria-selected=true] .ix-bar{transform:scaleX(.08)}
.ix-tabs .run .ix-bar{transform:scaleX(1);transition:transform var(--t,6.9s) linear}
.ix-panels{background:var(--paper);border:1px solid var(--ink-line);min-height:400px}
.ix-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:400px}
.ix-panel.in .ix-art,.ix-panel.in .ix-body>*{animation:ixIn .6s cubic-bezier(.16,1,.3,1) both}
.ix-panel.in .ix-body>*:nth-child(2){animation-delay:.05s}.ix-panel.in .ix-body>*:nth-child(3){animation-delay:.1s}.ix-panel.in .ix-body>*:nth-child(4){animation-delay:.15s}
@keyframes ixIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ix-art{background:var(--ink);color:var(--cream);--mk-bg:var(--ink);display:grid;place-items:center;position:relative;padding:48px 28px 64px;text-decoration:none}
.ix-art .mk{width:100%;max-width:340px;height:auto;display:block}
.ix-no{position:absolute;left:18px;top:16px;color:var(--red-soft)}
.ix-cap{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:var(--cream)}
.ix-lbl{display:block;margin-bottom:9px;transition:opacity .25s}
.ix-cap i{display:inline-block;width:7px;height:7px;margin:0 3px;background:rgba(239,236,226,.3)}
.ix-cap i.on{background:var(--red)}
/* how one consignment leaves and the next is loaded: styles/06-stories.css */
.ix-body{padding:clamp(24px,3.2vw,40px);display:flex;flex-direction:column;color:var(--ink)}
.ix-body .kicker{margin-bottom:10px}
.ix-h{font:800 clamp(24px,2.3vw,32px)/1.12 var(--sans);letter-spacing:-.02em;margin:0 0 18px;text-wrap:balance}
.ix-pts{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.ix-pts li{position:relative;padding-left:20px;color:var(--ink-muted);line-height:1.5}
.ix-pts li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--red)}
.ix-pts b{color:var(--ink);font-weight:600}
.ix-lane{margin-top:auto;align-self:flex-start;border:1.5px solid var(--ink);padding:8px 12px;color:var(--ink)}
.ix-lane b{font-weight:500;color:#C4232A;margin-right:6px}
@media (max-width:980px){
  .ix-st{grid-template-columns:1fr;gap:18px}
  .ix-tabs{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;border-top:0;gap:8px;scrollbar-width:none;scroll-snap-type:x mandatory}
  .ix-tabs::-webkit-scrollbar{display:none}
  .ix-tabs [role=tab]{grid-template-columns:1fr;border:1.5px solid var(--ink-line);padding:10px 14px;font-size:14px;scroll-snap-align:start}
  .ix-tabs [role=tab][aria-selected=true]{border-color:var(--ink)}
}
@media (max-width:700px){.ix-panel{grid-template-columns:1fr}.ix-art{padding:40px 24px 60px}.ix-art .mk{max-width:300px}}
@media (prefers-reduced-motion:reduce){.ix-panel.in .ix-art,.ix-panel.in .ix-body>*{animation:none}}

/* 12b · HOME › CLOSING LINE */
.closing{padding-block:clamp(72px,9vw,120px);text-align:center}
.cl-h{font:800 clamp(30px,4.4vw,58px)/1.05 var(--sans);letter-spacing:-.03em;margin:0 auto 28px}
.cl-h .r{color:var(--red);display:block}
.closing .ctas{justify-content:center}

/* drawings (marks) elsewhere: menus, cards, service rows */
.mk{display:block}
body{--mk-bg:var(--bg)}
.glyph.mk{width:36px;height:24px}
.menu{--mk-bg:var(--deep)}
.bg.mk{width:84px;height:55px}
.card .bg.mk{width:84px;height:55px}
.cream{--mk-bg:var(--cream)}
.ix-art{--mk-bg:var(--ink)}
.card{--mk-bg:var(--bg-2)}
.cream .card{--mk-bg:var(--paper)}
.cl-tag{color:var(--red-soft);margin-bottom:16px}

/* 20 · INNER PAGES — spec sheets, service rows, timeline, operating model, login card, contact tiles, ULIP strip */
/* definition rows (spec sheets) */
.spec{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:4px 0 0;font:400 13px/1.5 var(--mono)}
.spec dt{color:var(--muted)}
.spec dd{margin:0}
.cream .spec dt{color:var(--ink-muted)}

/* service detail rows */
.svc-row{display:grid;grid-template-columns:120px 1fr 1fr;gap:clamp(20px,4vw,56px);padding-block:clamp(40px,6vw,72px);border-top:1px solid var(--line);scroll-margin-top:90px}
.svc-row:first-child{border-top:0}
.svc-row .idx{font:500 12px var(--mono);letter-spacing:.08em;color:var(--muted);display:grid;gap:14px;align-content:start}
.svc-row h2{font:800 clamp(26px,3vw,38px)/1.05 var(--sans);letter-spacing:-.02em;margin:0 0 14px}
.svc-row ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.svc-row li{padding-left:22px;position:relative;font-size:15px;color:var(--muted)}
.svc-row li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--cream)}
.svc-row li b{color:var(--text);font-weight:600}
@media (max-width:900px){.svc-row{grid-template-columns:1fr}.svc-row .idx{grid-auto-flow:column;justify-content:start;align-items:center}}

/* timeline (continuity) */
.tl{display:grid;grid-template-columns:repeat(5,1fr);border-top:2px solid var(--cream);margin-top:var(--s4)}
.tl li{list-style:none;position:relative;padding:28px 18px 0 0}
.tl li::before{content:"";position:absolute;left:0;top:-8px;width:14px;height:14px;background:var(--bg);border:2px solid var(--cream)}
.tl li.r::before{background:var(--red);border-color:var(--red)}
.tl b{display:block;font:800 26px/1.1 var(--sans);font-variant-numeric:tabular-nums}
.tl span{display:block;color:var(--muted);font-size:14px;margin-top:6px}
.tl{padding:0}
@media (max-width:860px){.tl{grid-template-columns:1fr 1fr;row-gap:28px}}

/* operating model — Match → Move → Prove → Own */
.model{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:m}
.model>div{padding:var(--s3) var(--s3) var(--s3) 0;border-top:2px solid var(--ink)}
.model>div + div{padding-left:var(--s3);border-left:1px solid var(--ink-line)}
.model b{display:block;font:800 30px/1 var(--sans);letter-spacing:-.02em;margin:10px 0 10px}
.model p{margin:0;color:var(--ink-muted);font-size:15px}
.model .n{font:500 11.5px var(--mono);letter-spacing:.08em;color:#C4232A}
@media (max-width:860px){.model{grid-template-columns:1fr 1fr}.model>div:nth-child(3){padding-left:0;border-left:0}}

/* login */
.login-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:start}
.login-card{background:var(--cream);color:var(--ink);padding:clamp(24px,3vw,40px);display:grid;gap:16px}
.login-card h2{font:800 26px/1.1 var(--sans);margin:0}
.login-card .note{background:var(--paper);border-left:3px solid var(--red);padding:12px 14px;font-size:14px;color:var(--ink-muted)}
.login-card input[disabled]{opacity:.55;cursor:not-allowed}
.login-card .btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.track{display:grid;grid-template-columns:1fr auto;gap:10px}
@media (max-width:860px){.login-wrap{grid-template-columns:1fr}}
@media (max-width:480px){.track{grid-template-columns:1fr}}

/* contact tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.tile{border:1px solid var(--line);padding:var(--s3);display:grid;gap:6px;background:var(--bg-2)}
.tile .mono{color:var(--muted)}
.tile b{font:600 18px/1.35 var(--sans);user-select:all;word-break:break-word}
@media (max-width:860px){.tiles{grid-template-columns:1fr}}

/* ULIP lifecycle strip (continuity + proximity) */
.ulip-flow{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3);padding-top:var(--s3);border-top:2px solid var(--cream)}
.cream .ulip-flow{border-top-color:var(--ink)}
.cream .chip.r{color:#C4232A}

/* About › Transkore — four steps on one line (the booking moves left to right) */
.tk-flow{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.tk-flow::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,rgba(234,50,56,0),var(--red) 30%)}
.tk-flow>div{padding:var(--s3) var(--s3) var(--s3) 0;border-top:1px solid var(--line)}
.tk-flow>div + div{padding-left:var(--s3);border-left:1px solid var(--line)}
.tk-flow .n{color:var(--red-soft)}
.tk-flow b{display:block;font:800 30px/1 var(--sans);letter-spacing:-.02em;margin:10px 0}
.tk-flow p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:860px){.tk-flow{grid-template-columns:1fr 1fr}.tk-flow>div:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:520px){.tk-flow{grid-template-columns:1fr}.tk-flow>div + div{padding-left:0;border-left:0}}

/* Work with us › two paths */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.paths a{display:grid;gap:10px;padding:var(--s3);border:1px solid var(--line);background:var(--bg-2);text-decoration:none;transition:border-color .25s,transform .25s}
.paths a:hover{border-color:var(--red);transform:translateY(-2px)}
.paths b{font:800 26px/1.1 var(--sans);letter-spacing:-.02em}
.paths p{margin:0;color:var(--muted)}
.paths .go{font:600 14px var(--sans);color:var(--red-soft)}
.roles{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
.roles div{border-top:2px solid var(--red);padding-top:14px}
.roles b{display:block;font:700 19px/1.25 var(--sans);margin-bottom:6px}
.roles p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:760px){.paths,.roles{grid-template-columns:1fr}}

/* Services / Industries hubs — big tiles, one per page (flying-cargo.com pattern) */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.tile{position:relative;display:grid;gap:8px;align-content:start;padding:var(--s3);background:var(--bg-2);border:1px solid var(--line);text-decoration:none;--mk-bg:var(--bg-2);transition:border-color .25s,transform .25s,background .25s}
.tile:hover{border-color:var(--red);transform:translateY(-3px)}
.tile-mk{width:100%;max-width:240px;height:auto;margin:6px 0 14px;color:var(--cream)}
.tile-t{font:800 24px/1.12 var(--sans);letter-spacing:-.02em}
.tile-s{color:var(--muted);font-size:15px;padding-right:28px}
.tile-go{position:absolute;right:var(--s3);bottom:var(--s3);color:var(--red-soft);font-size:20px;transition:transform .25s}
.tile:hover .tile-go{transform:translateX(4px)}
@media (max-width:980px){.tiles{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.tiles{grid-template-columns:1fr}}

/* single service / industry page */
.detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.d-art{background:var(--deep);border:1px solid var(--line);padding:clamp(24px,4vw,48px);display:grid;gap:18px;--mk-bg:var(--deep)}
.d-art .mk{width:100%;height:auto;color:var(--cream)}
.d-art .mono{color:var(--red-soft)}
.d-body{display:grid;gap:18px;align-content:start}
.d-body .kicker{margin:0}
.d-pts{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.d-pts li{position:relative;padding-left:22px;color:var(--muted)}
.d-pts li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--red)}
.d-pts b{color:var(--text);font-weight:600}
.d-body .ctas{margin-top:6px}
.d-used{display:grid;gap:10px;margin-top:10px}
a.chip{text-decoration:none;transition:border-color .2s,color .2s}
a.chip:hover{border-color:var(--red);color:var(--red-soft)}
.goods{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:14px}
.good{margin:0;background:var(--deep);border:1px solid var(--line);padding:var(--s3);display:grid;gap:14px;--mk-bg:var(--deep)}
.good .mk{width:100%;height:auto;color:var(--cream)}
.good figcaption{color:var(--cream)}
.others{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.others a{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);text-decoration:none;font-weight:500;color:var(--muted);--mk-bg:var(--bg)}
.others a:hover{border-color:var(--red);color:var(--text)}
.others a[aria-current]{border-color:var(--cream);color:var(--text)}
.others .glyph.mk{width:36px;height:24px;color:var(--cream)}
@media (max-width:900px){.detail{grid-template-columns:1fr}.goods{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.goods{grid-template-columns:1fr}}
.model.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.model.three{grid-template-columns:1fr}.model.three>div + div{padding-left:0;border-left:0}}

/* about page — chapter drawings, before / with Transkore, promise list */
.ab-mk{display:block;width:clamp(150px,16vw,220px);height:auto;margin-top:clamp(24px,3vw,40px);color:var(--cream)}
.ab-links{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:24px}
.ab-link{font:600 15px var(--sans);text-decoration:none;color:var(--cream);border-bottom:1px solid var(--red);padding-bottom:4px}
.ab-link .arr{color:var(--red);transition:margin .2s}
.ab-link:hover .arr{margin-left:4px}
.bn-head{display:grid;grid-template-columns:1fr 40px 1fr;gap:20px;margin-top:clamp(40px,5vw,64px);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bn{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--line)}
.bn li{display:grid;grid-template-columns:1fr 40px 1fr;align-items:center;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.bn em{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bn s{position:relative;text-decoration:none;color:var(--muted);font-size:clamp(16px,1.35vw,20px)}
.bn s::after{content:"";position:absolute;left:0;top:52%;height:2px;width:100%;background:var(--red);transform:scaleX(var(--k,1));transform-origin:left;transition:transform .6s cubic-bezier(.6,0,.2,1)}
.bn .to{width:40px;height:2px;background:var(--line-strong);position:relative}
.bn .to::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--line-strong);border-right:0}
.bn .now{font-size:clamp(17px,1.45vw,22px);font-weight:600;color:var(--cream);transition:opacity .5s .45s,transform .5s .45s}
.bn .now i{display:inline-block;width:10px;height:10px;background:var(--red);margin-right:12px;vertical-align:middle}
.js .bn li:not(.on) s{--k:0}
.js .bn li:not(.on) .now{opacity:0;transform:translateX(-12px)}
.next{margin:28px 0 0;font-size:14px;color:var(--cream)}
.next b{color:var(--red-soft);font-weight:500}
.ab-ref{margin:24px 0 0;color:var(--muted);font-size:17px;max-width:36ch}
.promise{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.promise li{display:grid;grid-template-columns:minmax(150px,.8fr) 1.2fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.promise b{font:800 clamp(18px,1.6vw,22px)/1.2 var(--sans);letter-spacing:-.01em}
.promise b::before{content:"";display:inline-block;width:10px;height:10px;background:var(--red);margin-right:12px;vertical-align:.12em}
.promise span{color:var(--muted);font-size:16px}
@media (max-width:760px){
  .bn-head,.bn .to{display:none}
  .bn li{grid-template-columns:1fr;gap:8px;padding:18px 0}
  .bn em{position:static;width:auto;height:auto;clip:auto;display:block;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;font-style:normal}
  .bn .now em{color:var(--red-soft)}
  .promise li{grid-template-columns:1fr;gap:6px}
}

/* review 2 Oct 2026 — red accent in section headings, industries hub on 4 columns + "something else?" tile, compact hubs on phones */
.h2 .r{color:var(--red)}
.cream .h2 .r{color:#C4232A}
.tiles.four{grid-template-columns:repeat(4,1fr)}
.tiles.four .tile-t{font-size:21px}
@media (max-width:1100px){.tiles.four{grid-template-columns:1fr 1fr}}
.tile.ask{border-style:dashed;border-color:var(--line-strong);background:transparent;align-content:center}
.tile.ask .tile-q{color:var(--red-soft);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.tile.ask .tile-t{color:var(--cream)}
@media (max-width:600px){
  .tiles.hub,.tiles.hub.four{grid-template-columns:1fr 1fr;gap:10px}
  .tiles.hub .tile{padding:14px 12px 16px;gap:4px}
  .tiles.hub .tile-mk{margin:0 0 8px}
  .tiles.hub .tile-t,.tiles.hub.four .tile-t{font-size:16px;line-height:1.2}
  .tiles.hub .tile-s{font-size:12.5px;padding-right:0;line-height:1.45}
  .tiles.hub .tile-go{display:none}
  .goods{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:76%;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scrollbar-width:none}
  .goods::-webkit-scrollbar{display:none}
  .good{scroll-snap-align:start}
}

/* one-screen pages (3 Oct 2026, flying-cargo.com pattern): a service or an industry shows everything in the first screen —
   drawing on the left; name, summary, points, facts and buttons on the right. Hubs are tightened so every tile is visible at once. */
.one{padding-block:calc(env(safe-area-inset-top,0px) + clamp(96px,8.5vw,128px)) clamp(32px,4vw,56px)}
.one .detail{align-items:center;gap:clamp(24px,4.5vw,80px)}
.one .crumbs{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted)}
.one .crumbs a{text-decoration:none}.one .crumbs a:hover{color:var(--text)}
.d-h{font:800 clamp(34px,4.2vw,64px)/.98 var(--sans);letter-spacing:-.035em;text-transform:uppercase;margin:0;text-wrap:balance}
.d-h .r{color:var(--red)}
.one .lede{margin:0;max-width:52ch}
.one .d-body{gap:14px}
.one .d-pts{gap:8px}
.one .d-pts li{font-size:15.5px;line-height:1.5}
.one .d-art{align-self:center}
.d-dots{display:flex;gap:6px}
.d-dots i{width:8px;height:8px;background:var(--line-strong);transition:background .3s}
.d-dots i.on{background:var(--red)}
.band.slim{padding-block:clamp(28px,3.4vw,48px)}
.ph.tight{padding-block:clamp(104px,9vw,136px) clamp(20px,2.4vw,32px)}
.ph.tight h1{font-size:clamp(36px,4.6vw,68px);margin-bottom:14px}
.ph.tight .mark{bottom:clamp(20px,2.4vw,32px)}
@media (min-width:981px){
  .tiles.hub .tile{padding:20px 22px 22px;gap:4px}
  .tiles.hub .tile-mk{max-width:min(190px,62%);margin:0 0 8px}
  .tiles.hub .tile-t,.tiles.hub.four .tile-t{font-size:20px}
  .tiles.hub .tile-s{font-size:14px}
}
@media (max-width:900px){.one .d-art{max-width:520px}}
.ph.tight h1{max-width:none}
@media (max-width:900px){   /* phones: name and summary first, then the drawing, then the details */
  .one .detail{display:flex;flex-direction:column;align-items:stretch;gap:14px}
  .one .d-body{display:contents}
  .one .crumbs,.one .d-h,.one .lede{order:1}
  .one .d-art{order:2;margin-block:6px}
  .one .d-body>*{order:3}
  .one .d-body>.crumbs,.one .d-body>.d-h,.one .d-body>.lede{order:1}
}

/* 21 · LANES PAGE — lanes table + animated India network */
/* lanes */
.lanes{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.lanes th{text-align:left;font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 12px 10px 0;border-bottom:1.5px solid var(--cream)}
.lanes td{padding:14px 12px 14px 0;border-bottom:1px solid var(--line);font-size:15px}
.lanes td:first-child{font-weight:600}
.lanes td.m{font-family:var(--mono);font-size:13px;color:var(--muted)}
.lanes tbody tr{transition:background .2s}
.lanes tbody tr:hover{background:var(--bg-2)}
.table-x{overflow-x:auto}


/* ---- Lanes: India network map (inline SVG built in pages/lanes.py) ---- */
.net-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(8px,2vw,24px)}
.net-map{margin:0;max-width:640px;width:100%;justify-self:center}
.net-map svg{display:block;width:100%;height:auto;overflow:visible}
.net-map .land{fill:#1F2E66;stroke:rgba(239,236,226,.32);stroke-width:1.2;stroke-linejoin:round}
.net-map .cover path{fill:none;stroke:rgba(239,236,226,.28);stroke-width:1;stroke-dasharray:1 0;transition:stroke .3s,opacity .3s}
.net-map .reg path{fill:none;stroke:var(--red);stroke-width:2.6;stroke-linecap:round;transition:stroke-width .25s,opacity .25s}
.net-map .dots circle{fill:var(--cream)}
.net-map .hub{fill:var(--red)}
.net-map .hub-p{fill:none;stroke:var(--red);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:hubp 2.4s ease-out infinite}
@keyframes hubp{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.net-map text{font:500 11.5px var(--mono);fill:rgba(239,236,226,.72);letter-spacing:.02em}
.net-map .t-hub{font-weight:600;fill:var(--cream);font-size:12.5px;letter-spacing:.12em}
/* draw-in when the map scrolls into view (only when JS reveals are on) */
.js .net-map .cover path,.js .net-map .reg path{stroke-dasharray:1;stroke-dashoffset:1}
.js .net-map.in .cover path{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1) calc(var(--i)*45ms),stroke .3s,opacity .3s}
.js .net-map.in .reg path{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1) 1.1s,stroke-width .25s,opacity .25s}
/* a lane row is pointed at: light its arc, dim the rest */
.net-map.focus .reg g:not(.on) path{opacity:.18}
.net-map.focus .reg g.on path{stroke-width:4.5}
.net-map.focus-all .cover path{stroke:rgba(239,236,226,.75)}
.lanes tbody tr{cursor:default;outline:none}
.lanes tbody tr:focus-visible{box-shadow:inset 3px 0 0 var(--red)}
.lanes tbody tr.on{background:var(--bg-2)}
.lanes tbody tr.on td:first-child{color:var(--cream)}
.net-key{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.net-key span{display:flex;align-items:center;gap:8px}
.net-key i{display:inline-block}
.net-key .k-r{width:22px;height:3px;background:var(--red)}
.net-key .k-c{width:22px;height:1px;background:rgba(239,236,226,.5)}
.net-key .k-h{width:10px;height:10px;background:var(--red)}
@media (max-width:900px){.net-grid{grid-template-columns:1fr}.net-map{max-width:520px}}
@media (prefers-reduced-motion:reduce){.net-map .hub-p{animation:none;opacity:0}}
@media (max-width:600px){.net-map text{font-size:17px}.net-map .t-hub{font-size:18px}.net-map text.minor{display:none}.net-map .dots circle{r:4.5}}

/* 30 · FORMS — quote (emailed to the desk by the site), carrier and tracking (open WhatsApp) */
/* quote */
.quote{background:var(--bg-2);border-top:1px solid var(--line)}
.q-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:start}
.q-contact{display:grid;gap:18px;margin-top:28px}
.q-contact div{display:grid;gap:2px}
.q-contact .mono{color:var(--muted)}
.q-contact b{font:600 18px/1.3 var(--sans);user-select:all}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:var(--cream);color:var(--ink);padding:clamp(20px,3vw,32px)}
form .full{grid-column:1/-1}
label{display:grid;gap:6px;font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
input,select,textarea{font:400 16px/1.4 var(--sans);color:var(--ink);background:var(--paper);border:1px solid rgba(26,38,84,.3);padding:12px 14px;border-radius:0;width:100%;transition:border-color .2s,box-shadow .2s;color-scheme:light}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(26,38,84,.14)}
textarea{min-height:84px;resize:vertical}
.f-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.f-note{font-size:13px;color:var(--ink-muted);margin:0;max-width:40ch}
form .btn{background:var(--ink);border-color:var(--ink);color:var(--cream)}
form .btn:hover{background:#243168}
.sent{grid-column:1/-1;display:flex;gap:12px;align-items:center;font-size:14px}
.sent img{width:120px}
/* quote form: the two groups (the load, where to reply), the unseen robot trap, and the three outcomes */
.f-sub{margin:4px 0 -6px;padding-top:16px;border-top:1px solid rgba(26,38,84,.18);color:var(--ink-muted)}
.f-note a{color:inherit;text-underline-offset:2px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.sent .msg b{font-weight:700}.sent .msg a{color:inherit;font-weight:600}
.sent.ok{font-size:15px}
.sent.err{border-left:3px solid var(--red);padding:2px 0 2px 12px}
.sent.err img{display:none}
form .btn[disabled]{opacity:.55;cursor:default}
/* after sending: the fields make way for the confirmation */
form.done>:not(.sent){display:none}
form.done .sent{display:grid;gap:18px;justify-items:start;align-content:center;min-height:260px;font-size:17px;line-height:1.5;border:0;padding:0}
form.done .sent .msg{display:grid;gap:8px;justify-items:start}
form.done .sent .msg b{font:800 clamp(26px,3vw,34px)/1.1 var(--sans);letter-spacing:-.02em;color:var(--ink)}
form.done .sent.err .msg b{font-size:22px;line-height:1.25}
.again{all:unset;cursor:pointer;margin-top:10px;font:600 14px var(--sans);color:var(--ink);border-bottom:1.5px solid var(--ink);padding-bottom:2px}
.again:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media (max-width:860px){.q-grid{grid-template-columns:1fr}}
@media (max-width:520px){form{grid-template-columns:1fr}}

/* 40 · FOOTER + WhatsApp button + reduced-motion rules */
/* footer */
footer{background:var(--deep);color:var(--muted);padding-block:56px 36px;font-size:14px}
.f-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
footer h4{font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin:0 0 12px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
footer li{min-height:28px;display:flex;align-items:center}
footer li a{padding-block:4px;text-decoration:none}
footer a:hover{color:var(--text)}
.f-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px;font:800 30px/1 var(--sans);letter-spacing:-.03em;color:var(--cream)}
.f-mark{width:56px;height:40px;flex:none}
.f-base{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font:400 12px var(--mono)}
@media (max-width:860px){.f-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* phones: the name block and the contact block take a full row each; Services and Company share the row between them.
   (Before 3.16 the contact column pushed the page wider than the screen on 360 px phones.) A long word may break rather than widen the page. */
footer li{overflow-wrap:anywhere}
@media (max-width:480px){.f-grid{gap:28px 16px}.f-grid>div:first-child,.f-grid>div:last-child{grid-column:1/-1}}

.wa{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;gap:10px;background:var(--cream);color:var(--ink);text-decoration:none;padding:12px 16px 12px 12px;font:600 14px var(--sans);box-shadow:0 8px 28px rgba(8,12,34,.45);transition:transform .2s}
.wa:hover{transform:translateY(-2px)}
.wa i{width:10px;height:10px;background:var(--red);display:block;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
@media (max-width:560px){.wa{font-size:0;gap:0;width:46px;height:46px;padding:0;justify-content:center;right:12px}.wa i{width:20px;height:15px;border-radius:2px;position:relative;animation:none}.wa i::after{content:"";position:absolute;left:4px;bottom:-5px;border:5px solid transparent;border-top-color:var(--red);border-bottom:0;border-left:0}footer{padding-bottom:88px}}

.js .rv{transform:translateY(12px);transition:opacity .6s ease-out,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}
[id]{scroll-margin-top:88px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{transform:none;transition:none}
  .ticker .track,.wa i,.scroll-cue i{animation:none}
  *{transition-duration:0s!important}
}
.f-tag{margin:14px 0 0;font:800 18px/1.2 var(--sans);letter-spacing:-.01em;color:var(--cream)}
@media (max-width:640px){.f-brand{font-size:24px;gap:10px}.f-mark{width:44px;height:32px}}