/* ---------- Tokens ---------- */
  :root{
    /* color */
    /* Bone & Brass. Bottle green carries weight, brass is the only accent.
       Ratios measured, not eyeballed: text 15.6:1 on bone, white 14.1:1 on the
       deep green, brass-deep 4.6:1 under white, brass-text 5.1:1 on bone,
       brass-light 6.1:1 on the deep green. */
    --ink:#16302A; --ink-2:#1E4038; --ink-3:#2B5A4E; --ink-deep:#0E211C; --text:#191712;
    --mist:#F2EFE7; --mist-2:#FBFAF6; --white:#FFFFFF;
    --orange:#E0B65F;        /* brass light — accents on DARK surfaces. Tuned to
                                clear 4.5:1 on the WORST dark ground on the site:
                                a 7% white card sitting on the light end of the
                                transparency gradient (#2E4D46). */
    --orange-deep:#9C6B15;   /* brass deep — buttons, white text on it */ --orange-text:#8A5C12; /* accent words on bone */
    --line:rgba(255,255,255,.14); --line-dark:rgba(22,48,42,.20);
    --card-dark:rgba(255,255,255,.07); --card-dark-hover:rgba(255,255,255,.11);
    /* type */
    /* Archivo / Instrument Sans carry no Cyrillic; Onest (loaded on /ru/ only)
       picks up Russian text character-by-character. */
    --font-head:'Archivo','Onest',sans-serif; --font-body:'Instrument Sans','Onest',sans-serif;
    --fs-body:1rem; --fs-small:.9375rem; --fs-label:.8125rem;
    /* space (8px grid) */
    --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:96px;
    --card-pad:var(--s-3);
    /* motion */
    --dur-fast:150ms; --dur-base:250ms; --dur-slow:400ms;
    --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
    --max:1240px; --pad:clamp(20px,5vw,64px);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--font-body);font-size:var(--fs-body);color:var(--text);background:var(--mist);line-height:1.55;-webkit-font-smoothing:antialiased}
  [dir=rtl] body{font-family:'IBM Plex Sans Arabic',var(--font-body);font-size:1.05rem}
  [dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] .label,[dir=rtl] .btn{font-family:'Cairo',sans-serif;font-weight:700}
  a{color:inherit;text-decoration:none}
  img,svg{max-width:100%;display:block}
  .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
  :focus-visible{outline:2px solid var(--orange);outline-offset:3px}
  .dark :focus-visible{outline-color:#fff}

  /* ---------- Type ---------- */
  h1,h2,h3{font-family:var(--font-head);font-stretch:125%;font-weight:400;text-transform:uppercase;line-height:1.05;text-wrap:pretty}
  h1{font-size:clamp(44px,8vw,104px);font-weight:300;letter-spacing:-.015em}
  h2{font-size:clamp(30px,4.2vw,54px);letter-spacing:-.006em}
  h3{font-size:clamp(19px,1.7vw,22px);font-stretch:112.5%;letter-spacing:0;line-height:1.15}
  p{text-wrap:pretty}
  .accent{color:var(--orange)}
  .light .accent{color:var(--orange-text)}
  .label{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-stretch:112.5%;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--s-3);color:var(--orange)}
  .light .label{color:var(--ink)}
  .label::before{content:"[";color:var(--orange)}.label::after{content:"]";color:var(--orange)}
  .light .label::before,.light .label::after{color:var(--orange-text)}
  .lede{font-size:clamp(16px,1.3vw,19px);max-width:56ch;opacity:.9}

  /* ---------- Buttons ---------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 var(--s-3);font-family:var(--font-head);font-stretch:112.5%;font-size:14px;letter-spacing:.04em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
  .btn:active{transform:scale(.97)}
  .btn-primary{background:var(--orange-deep);color:#fff}
  .btn-primary:hover{background:#7A500F}
  
  .btn-ghost{border-color:currentColor;color:inherit;background:transparent}
  .dark .btn-ghost:hover{background:rgba(255,255,255,.1)}
  .light .btn-ghost:hover{background:rgba(22,48,42,.06)}
  .btn svg{width:16px;height:16px;flex:none}
  [dir=rtl] .btn svg{transform:scaleX(-1)}

  /* ---------- Header (translucent material) ---------- */
  header{position:sticky;top:0;z-index:50;color:#fff;background:rgba(22,48,42,.72);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
  .nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);height:80px;transition:height var(--dur-base) var(--ease-out)}
  .logo{font-family:var(--font-head);font-stretch:125%;font-weight:500;font-size:18px;letter-spacing:.16em;display:inline-flex;align-items:center;gap:10px}.logo::before{content:"";width:.95em;height:.95em;flex:none;background:var(--orange);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512 512%22%3E%3Cpath d=%22M0 0 H512 V176 C 384 176 320 280 192 280 C 96 280 48 232 0 232 Z%22 fill=%22%23000%22/%3E%3Cpath d=%22M0 512 H512 V316 C 384 316 320 420 192 420 C 96 420 48 372 0 372 Z%22 fill=%22%23000%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512 512%22%3E%3Cpath d=%22M0 0 H512 V176 C 384 176 320 280 192 280 C 96 280 48 232 0 232 Z%22 fill=%22%23000%22/%3E%3Cpath d=%22M0 512 H512 V316 C 384 316 320 420 192 420 C 96 420 48 372 0 372 Z%22 fill=%22%23000%22/%3E%3C/svg%3E") center/contain no-repeat}
  .logo b{font-weight:500}
  .menu{display:flex;gap:var(--s-4);font-size:var(--fs-small);font-weight:500}
  .menu a{opacity:.85;padding:10px 0;transition:opacity var(--dur-fast) var(--ease-out)}.menu a:hover{opacity:1}
  .lang{display:flex;border:1px solid var(--line)}
  .lang a{display:grid;place-items:center;min-width:44px;min-height:40px;font-size:12px;font-weight:600;letter-spacing:.06em;transition:background var(--dur-fast) var(--ease-out)}
  .lang a.on{background:#fff;color:var(--ink)}
  .lang a:not(.on):hover{background:rgba(255,255,255,.1)}
  .navcta{display:flex;align-items:center;gap:var(--s-2)}
  .burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:transparent;color:#fff;cursor:pointer;align-items:center;justify-content:center}
  .burger svg{width:22px;height:22px}
  @media(max-width:1024px){
    .menu,.navcta .btn{display:none}
    .burger{display:inline-flex}
  }
  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)){
    .ready header{animation:fade .6s cubic-bezier(.2,.8,.2,1) .2s both,hdr linear both;animation-timeline:auto,scroll(block root);animation-range:normal,0 160px}
    @keyframes hdr{to{background:rgba(22,48,42,.84)}}
    .nav{animation:navh linear both;animation-timeline:scroll(block root);animation-range:0 160px}
    @keyframes navh{to{height:64px}}
  }
  /* mobile drawer */
  .drawer{position:fixed;inset:0;z-index:60;background:var(--ink);color:#fff;padding:var(--s-4) var(--pad);display:flex;flex-direction:column;gap:var(--s-4);opacity:0;visibility:hidden;translate:0 -8px;transition:opacity var(--dur-base) var(--ease-out),translate var(--dur-base) var(--ease-out),visibility 0s linear var(--dur-base)}
  .drawer.open{opacity:1;visibility:visible;translate:0 0;transition:opacity var(--dur-base) var(--ease-out),translate var(--dur-base) var(--ease-out),visibility 0s}
  .drawer .top{display:flex;justify-content:space-between;align-items:center}
  .drawer nav{display:flex;flex-direction:column;gap:var(--s-1)}
  .drawer nav a{font-family:var(--font-head);font-size:clamp(28px,7vw,40px);text-transform:uppercase;padding:var(--s-1) 0;border-bottom:1px solid var(--line)}
  .drawer .bottom{margin-top:auto;display:flex;flex-direction:column;gap:var(--s-2)}

  /* ---------- Photo layers ---------- */
  .photo{position:absolute;inset:0;overflow:hidden}
  .photo img{width:100%;height:100%;object-fit:cover;display:block}
  .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,48,42,.55) 0%,rgba(22,48,42,.35) 40%,rgba(22,48,42,.92) 100%)}
  .photo.tint::after{background:linear-gradient(180deg,rgba(22,48,42,.72),rgba(22,48,42,.86))}
  /* The home hero photograph is brighter than the stock one it replaced, and
     white display type was dropping to 2.7:1 against the lit containers —
     fine on average, illegible on the bright pixels. Measured, not guessed:
     this gradient puts the worst pixel under the headline at 5.3:1. Scoped to
     .hero-photo so the tinted cards and page heroes keep their own treatment. */
  .hero-photo::after{background:linear-gradient(180deg,rgba(22,48,42,.66) 0%,rgba(22,48,42,.64) 45%,rgba(22,48,42,.94) 100%)}
  .kb img{animation:kb 28s ease-in-out infinite alternate;transform-origin:60% 40%}
  @keyframes kb{from{scale:1}to{scale:1.08}}

  /* ---------- Hero ---------- */
  .hero{position:relative;margin-top:-80px;min-height:100svh;display:grid;align-items:end;color:#fff;overflow:hidden;background:var(--ink)}
  .sea{position:absolute;inset:0;background:radial-gradient(120% 80% at 80% 20%,#2B5A4E 0%,#1E4038 35%,#16302A 70%)}
  .waves{position:absolute;inset:0;opacity:.35;pointer-events:none;mix-blend-mode:screen}
  .waves svg{position:absolute;top:0;left:0;height:100%;width:200%;animation:drift 40s linear infinite}
  @keyframes drift{to{translate:-50% 0}}
  .sea::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to top,var(--ink),transparent)}
  .photo-note{position:absolute;top:104px;inset-inline-end:var(--pad);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);border:1px dashed rgba(255,255,255,.35);padding:6px 10px}
  .hero .wrap{position:relative;padding-block:128px var(--s-7)}
  .hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s-5);align-items:end}
  @media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
  .hero .lede{color:rgba(255,255,255,.88)}
  .hero .btns{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-3)}

  /* ---------- Sections ---------- */
  section{padding-block:clamp(72px,9vw,128px)}
  section:not(.hero){content-visibility:auto;contain-intrinsic-size:auto 720px}
  .dark{background:var(--ink);color:#fff}
  .light{background:var(--mist);color:var(--text)}
  .split{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(28px,5vw,80px);align-items:start}
  @media(max-width:900px){.split{grid-template-columns:1fr}}

  /* ---------- Card (single system) ---------- */
  .card{position:relative;padding:var(--card-pad);border:1px solid var(--line);background:var(--card-dark);display:flex;flex-direction:column;gap:var(--s-2);transition:background var(--dur-base) var(--ease-out),translate var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
  .card:hover{background:var(--card-dark-hover)}
  .light .card{border-color:var(--line-dark);background:var(--mist-2)}
  .light .card:hover{background:var(--card-dark-hover)}
  .card .k{font-family:var(--font-head);font-size:12px;letter-spacing:.1em;color:var(--orange)}
  .light .card .k{color:var(--orange-text)}
  .card p{font-size:var(--fs-small);opacity:.85}
  .card .i{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:1.3;opacity:.9}
  .light .card .i{stroke:var(--ink-3)}
  /* minmax(0,1fr) — not 1fr — so a long word or a wide icon can never push a
     track past its share and overflow the container. */
  .grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2);margin-top:var(--s-5)}
  .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2);margin-top:var(--s-5)}
  .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);margin-top:var(--s-5)}
  @media(max-width:1000px){.grid-4,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:560px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}

  /* ---------- Tracks ---------- */
  .tracks{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);margin-top:var(--s-5)}
  @media(max-width:800px){.tracks{grid-template-columns:1fr}}
  .track{position:relative;min-height:440px;border:1px solid rgba(255,255,255,.12);padding:var(--s-4);display:flex;flex-direction:column;justify-content:flex-end;color:#fff;overflow:hidden;isolation:isolate;transition:translate var(--dur-base) var(--ease-out)}
  .track:hover{translate:0 -4px}
  .track:active{translate:0 -1px}
  .track .bg{position:absolute;inset:0;z-index:-1;transition:scale var(--dur-slow) var(--ease-out)}
  .track:hover .bg{scale:1.03}
  .track.a .bg{background:radial-gradient(90% 70% at 30% 30%,#2B5A4E,#16302A 75%)}
  .track.b .bg{background:radial-gradient(90% 70% at 70% 20%,#1E4038,#16302A 75%)}
  .track .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(22,48,42,.95) 20%,rgba(22,48,42,.1))}
  .track .num{position:absolute;top:var(--s-4);inset-inline-start:var(--s-4);font-family:var(--font-head);font-size:13px;letter-spacing:.1em;color:var(--orange)}
  .track h3{font-size:clamp(24px,2.6vw,34px);margin-bottom:var(--s-2)}
  .track p{max-width:44ch;opacity:.88;margin-bottom:var(--s-3)}
  .track .btn{align-self:flex-start}

  /* ---------- Stats band ---------- */
  .band{background:var(--ink-2);color:#fff;padding-block:var(--s-5)}
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2)}
  @media(max-width:700px){.stats{grid-template-columns:1fr}}
  .stat{border-inline-start:1px solid var(--line);padding-inline-start:var(--s-3)}
  .stat b{display:block;font-family:var(--font-head);font-weight:300;font-size:clamp(32px,3.4vw,44px);line-height:1;font-variant-numeric:tabular-nums}
  .stat span{font-size:var(--fs-small);opacity:.75}

  /* ---------- Transparency ---------- */
  .trans{position:relative;overflow:hidden}
  .trans .wrap{position:relative}

  /* ---------- Where we work ---------- */
  .where{background:var(--ink-2);color:#fff}
  .routes{position:relative;margin-top:var(--s-5);border:1px solid var(--line);padding:var(--s-2);background:rgba(0,0,0,.15);overflow:hidden}
  .routes .hub{font-family:var(--font-head);font-size:12px;letter-spacing:.08em;text-transform:uppercase;fill:#fff}
  .routes .city{font-size:11px;fill:rgba(255,255,255,.8);font-family:var(--font-body)}
  .routes{background:linear-gradient(160deg,rgba(14,33,28,.6),rgba(22,48,42,.3));box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
  .routes .land{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.45);stroke-width:.8;stroke-linejoin:round;vector-effect:non-scaling-stroke}
  .routes path.r{fill:none;stroke:rgba(224,182,95,.7);stroke-width:1.1;stroke-dasharray:1200;stroke-dashoffset:1200}
  .routes .pk{fill:var(--orange);opacity:0}
  .routes.in .pk{opacity:1;transition:opacity .6s 1.6s}
  .routes .c{fill:#fff}
  .routes .halo{fill:none;stroke:rgba(255,255,255,.25);stroke-width:1}
  .routes .city{font-size:11px;fill:rgba(255,255,255,.9);font-family:var(--font-body)}
  .routes .hub{font-size:12px}
  .countries .grp{border:0;padding-inline:0;font-family:var(--font-head);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);opacity:1;flex-basis:100%;margin-top:8px}
  .countries span.first{border-color:var(--orange);color:#fff;opacity:1}
  .countries span:not(.grp):hover{border-color:var(--orange);opacity:1}
  .routes.in path.r{animation:draw 1.8s var(--ease-out) forwards}
  .routes.in path.r:nth-child(2){animation-delay:.1s}.routes.in path.r:nth-child(3){animation-delay:.2s}.routes.in path.r:nth-child(4){animation-delay:.3s}.routes.in path.r:nth-child(5){animation-delay:.4s}.routes.in path.r:nth-child(6){animation-delay:.5s}.routes.in path.r:nth-child(7){animation-delay:.6s}
  @keyframes draw{to{stroke-dashoffset:0}}
  
  .countries{display:flex;flex-wrap:wrap;gap:var(--s-1);margin-top:var(--s-3)}
  .countries span{font-size:12.5px;padding:6px 12px;border:1px solid var(--line);opacity:.85}

  /* ---------- Founder ---------- */
  .founder{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
  @media(max-width:900px){.founder{grid-template-columns:1fr}}
  .portrait{aspect-ratio:4/5;background:linear-gradient(160deg,#2B5A4E,#16302A);border:1px solid var(--line-dark);display:grid;place-items:center;color:rgba(255,255,255,.55);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
  .quote{font-family:var(--font-head);font-size:clamp(20px,2vw,26px);line-height:1.3;margin-block:var(--s-2) var(--s-3)}

  /* ---------- Contact bento ---------- */
  .bento{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2);margin-top:var(--s-5)}
  @media(max-width:800px){.bento{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.bento{grid-template-columns:1fr}}
  .cell{min-height:200px;justify-content:flex-end}
  .cell h3{font-size:18px}
  .cell.cta{background:var(--orange-deep);border-color:var(--orange-deep);grid-row:span 2;justify-content:center;align-items:center;text-align:center;gap:var(--s-3)}
  .cell.cta:hover{background:var(--orange-deep)}
  .cell.cta h3{font-size:clamp(24px,2.6vw,32px)}
  .cell.cta .btn-primary{background:#fff;color:var(--orange-deep)}
  .cell.cta .btn-primary:hover{background:#FBF7EC}
  .cell.cta .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
  .cell.cta .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}

  /* ---------- Footer ---------- */
  footer{background:var(--ink-deep);color:rgba(255,255,255,.8);padding-block:var(--s-6) var(--s-4);font-size:var(--fs-small);border-top:2px solid var(--orange)}
  .fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:var(--s-4)}
  @media(max-width:800px){.fgrid{grid-template-columns:1fr 1fr}}
  footer h4{font-family:var(--font-head);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:var(--s-2)}
  footer li{list-style:none;margin-bottom:var(--s-1)}
  .fbottom{margin-top:var(--s-5);padding-top:var(--s-3);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:var(--s-2);flex-wrap:wrap;font-size:12.5px;opacity:.7}

  /* ---------- Hero entrance (quiet) ---------- */
  /* photo settles 0–1.2s · headline lines 0.3s+ · lede 0.7s · buttons 0.85s · cue 1.4s. No curtain, no word rotation. */
  .curtain{display:none}
  .hero-photo img{scale:1.06;opacity:0;transform-origin:55% 45%}
  .ready .hero-photo img{animation:photo-in 1.4s var(--ease-out) both}
  @keyframes photo-in{to{scale:1;opacity:1}}
  header{opacity:0}
  .ready header{animation:fade .6s var(--ease-out) .2s both}
  @keyframes fade{to{opacity:1}}
  .hsplit .ln{display:block}
  .hsplit .ln{opacity:0;translate:0 14px}
  .ready .hsplit .ln{animation:rise .8s var(--ease-out) both}
  .ready .hsplit .ln:nth-child(1){animation-delay:.3s}
  .ready .hsplit .ln:nth-child(2){animation-delay:.4s}
  .ready .hsplit .ln:nth-child(3){animation-delay:.5s}
  @keyframes rise{to{opacity:1;translate:0 0}}
  .hsplit .w{display:inline}
  .h-in{opacity:0;translate:0 12px}
  .ready .h-in{animation:rise .7s var(--ease-out) var(--d,.7s) both}
  .scroll-cue{position:absolute;bottom:var(--s-4);inset-inline-start:var(--pad);display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
  .scroll-cue span{width:1px;height:40px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
  .scroll-cue span::after{content:"";position:absolute;inset:0;background:#fff;translate:0 -100%;animation:cue 2.2s var(--ease-in-out) infinite}
  @keyframes cue{to{translate:0 100%}}
  .hero .wrap{padding-bottom:calc(var(--s-7) + 24px)}
  /* scroll-linked: gentle parallax as the hero leaves */
  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)){
    .hero-photo{animation:para linear both;animation-timeline:scroll(block root);animation-range:0 100vh}
    @keyframes para{to{translate:0 14%}}
    .hero .hero-grid{animation:hero-fade linear both;animation-timeline:scroll(block root);animation-range:0 70vh}
    @keyframes hero-fade{to{opacity:0;translate:0 -24px}}
  }

  /* ---------- Transparency section texture (no photo) ---------- */
  .trans{background:linear-gradient(180deg,var(--ink-2),var(--ink))}
  .trans .report{box-shadow:0 40px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06)}

  /* ---------- Ticker ---------- */
  .ticker{background:var(--ink-2);color:#fff;overflow:hidden;border-block:1px solid rgba(0,0,0,.15)}
  .ticker-track{display:flex;align-items:center;gap:var(--s-4);width:max-content;padding-block:14px;animation:tick 60s linear infinite;font-family:var(--font-head);font-size:14px;letter-spacing:.14em;text-transform:uppercase}
  .ticker-track i{width:6px;height:6px;background:#fff;border-radius:50%;opacity:.7}
  @keyframes tick{to{translate:-50% 0}}
  .ticker:hover .ticker-track{animation-play-state:paused}

  /* ---------- Track-your-shipment tool ---------- */
  .track-tool{background:rgba(14,33,28,.85);border:1px solid rgba(255,255,255,.18);box-shadow:0 40px 80px rgba(0,0,0,.45);max-width:520px;justify-self:end}
  .tt-body{padding:var(--s-3)}
  .tt-tabs{display:inline-flex;border:1px solid var(--line);margin-bottom:var(--s-3)}
  .tt-tabs button{background:transparent;border:0;color:#fff;opacity:.7;min-height:44px;padding:10px 18px;font-family:var(--font-head);font-stretch:112.5%;font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
  .tt-tabs button.on{background:#fff;color:var(--ink);opacity:1}
  .tt-label{display:block;font-size:13px;opacity:.8;margin-bottom:8px}
  .tt-row{display:flex;gap:8px}
  .tt-row input{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.25);color:#fff;padding:0 14px;min-height:48px;font-family:var(--font-body);font-size:15px}
  .tt-row input:focus{outline:2px solid var(--orange);outline-offset:2px;border-color:transparent}
  .tt-row input::placeholder{color:rgba(255,255,255,.4)}
  .tt-hint{font-size:12.5px;opacity:.65;margin-top:10px}
  @media(max-width:900px){.track-tool{justify-self:stretch;max-width:none}}
  @media(max-width:480px){.tt-row{flex-direction:column}}
  /* ---------- VesselFinder embed (removed) ---------- */
  .rhead .time{color:var(--orange)}
  @media(max-width:900px){.vf{justify-self:stretch;max-width:none}}
  /* ---------- Live panel (removed) ---------- */
  .live{background:linear-gradient(160deg,rgba(14,33,28,.92),rgba(22,48,42,.86));border:1px solid rgba(255,255,255,.18);box-shadow:0 40px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12);max-width:520px;justify-self:end;overflow:hidden}
  .lgrid{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
  .lcell{padding:var(--s-3);display:flex;flex-direction:column;gap:4px}
  .lcell+.lcell{border-inline-start:1px solid var(--line)}
  .lk{font-family:var(--font-head);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
  .lcell b{font-family:var(--font-head);font-weight:300;font-size:clamp(30px,3vw,40px);line-height:1;font-variant-numeric:tabular-nums}
  .ls{font-size:13px;opacity:.75}
  .rates{padding:var(--s-3);display:flex;flex-direction:column;gap:8px}
  .lfoot{display:block;padding:14px var(--s-3);border-top:1px solid var(--line);font-size:13px;color:var(--orange);background:rgba(224,182,95,.06)}
  .lfoot:hover{background:rgba(224,182,95,.14)}
  @media(max-width:900px){.live{justify-self:stretch;max-width:none}}
  /* ---------- Field report card (legacy) ---------- */
  .report{background:rgba(14,33,28,.82);border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 60px rgba(0,0,0,.35);max-width:520px;justify-self:end;overflow:hidden}
  .rhead{display:flex;align-items:center;gap:10px;padding:14px var(--s-3);border-bottom:1px solid var(--line);font-family:var(--font-head);font-size:12px;letter-spacing:.1em}
  .rhead .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(224,182,95,.6);animation:pulse 2s ease-out infinite}
  @keyframes pulse{to{box-shadow:0 0 0 10px rgba(224,182,95,0)}}
  .rhead .time{margin-inline-start:auto;opacity:.6}
  .rphoto{aspect-ratio:16/8;overflow:hidden}
  .rphoto img{width:100%;height:100%;object-fit:cover}
  .rbody{padding:var(--s-3);display:flex;flex-direction:column;gap:10px}
  .rrow{display:flex;justify-content:space-between;gap:var(--s-2);font-size:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
  .rrow span{opacity:.7}.rrow b{font-weight:600;text-align:end}
  .rrow .ok{color:#8FE0B8}
  .rbody p{font-size:14px;opacity:.85;font-style:italic;margin-top:4px}
  @media(max-width:900px){.report{justify-self:stretch;max-width:none}}

  /* ---------- Gallery strip ---------- */
  .gal{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-1);padding-inline:var(--s-1)}
  @media(max-width:700px){.gal{grid-template-columns:1fr}}
  .gal figure{position:relative;aspect-ratio:4/3;overflow:hidden;margin:0}
  .gal img{width:100%;height:100%;object-fit:cover;transition:scale var(--dur-slow) var(--ease-out)}
  .gal figure:hover img{scale:1.04}
  .gal figcaption{position:absolute;inset-inline:0;bottom:0;padding:var(--s-2) var(--s-3);color:#fff;font-family:var(--font-head);font-size:14px;letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(to top,rgba(22,48,42,.85),transparent)}

  /* ---------- Reveal ---------- */
  .rv{opacity:0;translate:0 16px}
  .rv.in{opacity:1;translate:0 0;transition:opacity .6s var(--ease-out),translate .6s var(--ease-out)}
  @supports ((animation-timeline: view()) and (animation-range: entry)){
    .rv{opacity:1;translate:0 0;animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 25%}
    @keyframes reveal{from{opacity:0;translate:0 16px}}
  }
  @media(prefers-reduced-motion:reduce){
    .rv,.rv.in{animation:none;opacity:1;translate:0 0;transition:none}
    .waves svg,.routes path.r,.kb img,.ticker-track,.rhead .dot,.hero-photo,.hero-photo img,.scroll-cue span::after,.hero .hero-grid{animation:none}
    .routes .pk{display:none}
    .curtain,.ready .curtain{display:none}
    .split .w,.ready .hsplit .w{translate:0 0;rotate:0deg;animation:none}
    .h-in,.ready .h-in,header,.ready header{animation:none;opacity:1;translate:0 0}
    .hero .label::before,.hero .label::after,.ready .hero .label::before,.ready .hero .label::after{animation:none;translate:0 0}
    .hero-photo img,.ready .hero-photo img{scale:1;animation:none}
    .routes path.r{stroke-dashoffset:0}
    .track,.track .bg,.btn{transition:none}
  }
  @media(prefers-reduced-transparency:reduce){
    header{background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
    .card{background:rgba(255,255,255,.14)}
  }
  @media(prefers-contrast:more){
    .card{border-color:rgba(255,255,255,.5)}
    .light .card{border-color:var(--ink)}
  }

  /* ---------- Page hero (inner pages) ---------- */
  .phero{background:var(--ink);color:#fff;padding-block:calc(80px + var(--s-6)) var(--s-6);position:relative;overflow:hidden}
  .phero .photo{opacity:.5}
  .phero .wrap{position:relative}
  .phero h1{font-size:clamp(36px,5.6vw,72px)}
  .phero .lede{color:rgba(255,255,255,.88);margin-top:var(--s-3)}
  /* ---------- Services page ---------- */
  .svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-2);margin-top:var(--s-5)}
  @media(max-width:800px){.svc-grid{grid-template-columns:1fr}}
  .svc{padding:var(--s-4)}
  .svc .price{margin-top:auto;padding-top:var(--s-2);border-top:1px solid var(--line);font-size:14px;opacity:.8}
  .light .svc .price{border-color:var(--line-dark)}
  .track-head{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-7)}
  .track-head .num{font-family:var(--font-head);font-stretch:125%;font-weight:300;font-size:clamp(40px,6vw,72px);color:var(--orange);line-height:1}
  .light .track-head .num{color:var(--orange-text)}
  .track-head p{opacity:.85;max-width:56ch}
  .pricing{border:1px solid var(--line-dark);padding:var(--s-4);display:grid;grid-template-columns:1fr auto;gap:var(--s-3);align-items:center;margin-top:var(--s-5);background:var(--mist-2)}
  @media(max-width:700px){.pricing{grid-template-columns:1fr}}
  /* ---------- FAQ ---------- */
  .faq{margin-top:var(--s-5);border-top:1px solid var(--line-dark)}
  .faq details{border-bottom:1px solid var(--line-dark)}
  .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--s-3);align-items:center;padding:var(--s-3) 0;font-family:var(--font-head);font-stretch:112.5%;font-size:clamp(17px,1.6vw,21px);text-transform:none}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";font-size:26px;line-height:1;color:var(--orange-text);flex:none;transition:rotate var(--dur-base) var(--ease-out)}
  .faq details[open] summary::after{rotate:45deg}
  .faq .a{padding:0 0 var(--s-3);max-width:70ch;opacity:.9}
  /* ---------- About ---------- */
  .story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start}
  @media(max-width:900px){.story{grid-template-columns:1fr}}
  .story p+p{margin-top:var(--s-2)}
  .team{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-2);margin-top:var(--s-5)}
  @media(max-width:700px){.team{grid-template-columns:1fr}}
  .member .portrait{aspect-ratio:4/5;margin-bottom:var(--s-2)}
  .member .role{font-size:13px;color:var(--orange-text);font-family:var(--font-head);font-stretch:112.5%;letter-spacing:.06em;text-transform:uppercase}
  /* ---------- Contact ---------- */
  .contact{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,80px);align-items:start;margin-top:var(--s-5)}
  @media(max-width:900px){.contact{grid-template-columns:1fr}}
  .form{display:grid;gap:var(--s-2)}
  .form .row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
  @media(max-width:560px){.form .row2{grid-template-columns:1fr}}
  .form label{display:grid;gap:6px;font-size:13px;opacity:.85}
  .form input,.form select,.form textarea{width:100%;background:#fff;border:1px solid var(--line-dark);padding:12px 14px;min-height:48px;font-family:var(--font-body);font-size:15px;color:var(--text)}
  .form textarea{min-height:140px;resize:vertical}
  .form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--orange-deep);outline-offset:2px;border-color:transparent}
  .form .ok{display:none;padding:var(--s-3);border:1px solid var(--ink-3);background:#fff}
  .form.sent .ok{display:block}.form.sent > :not(.ok){display:none}
  .cinfo .card{margin-bottom:var(--s-2)}
  .cinfo a{color:var(--orange-text)}
  /* ---------- Skip link ---------- */
  .skip{position:absolute;inset-inline-start:-999px;top:8px;background:#fff;color:var(--ink);padding:10px 14px;z-index:100}
  .skip:focus{inset-inline-start:8px}


  /* ============================================================
     LAYOUT V2
     One continuous bone ground; sections stop painting themselves.
     Dark is spent only on the hero, the map panel and the footer —
     everything else floats as a white panel or sits on the open ground.
     Placed BEFORE the mobile block so the phone fixes still win.
     ============================================================ */

  /* --- the single ground --- */
  section:not(.hero):not(.phero){background:transparent}
  .light{background:transparent;color:var(--text)}
  .dark.panel{background:transparent}

  /* --- floating panels --- */
  .panel{padding-inline:var(--pad);padding-block:clamp(26px,4vw,52px)}
  .panel > .wrap{border-radius:28px;padding:clamp(26px,4vw,56px);max-width:var(--max)}
  .panel.light > .wrap{background:var(--mist-2);
       box-shadow:0 1px 0 rgba(22,48,42,.05),0 30px 70px -46px rgba(22,48,42,.45)}
  .panel.dark > .wrap{background:var(--ink);color:#fff}
  .trans{background:transparent}
  .where{background:transparent;color:var(--text)}

  /* the shipment tool used to sit on a dark band; it is a light panel now */
  .trans .track-tool{background:var(--white);border:1px solid var(--line-dark);
       box-shadow:0 18px 40px -32px rgba(22,48,42,.5);color:var(--text)}
  .trans .rhead,.trans .tt-tabs{border-color:var(--line-dark)}
  .trans .tt-tabs button{color:var(--text)}
  .trans .tt-tabs button.on{background:var(--ink);color:#fff}
  .trans .tt-row input{background:var(--mist);border:1px solid var(--line-dark);color:var(--text)}
  .trans .tt-row input::placeholder{color:rgba(25,23,18,.42)}
  .trans .report{box-shadow:none}

  /* --- type: a bigger jump between display and body --- */
  /* 112px pushed the lede and buttons out of the viewport: the headline is
     three content lines, and at that size the third wrapped to a fourth. */
  h1{font-size:clamp(42px,6.4vw,84px);letter-spacing:-.038em;font-weight:300}
  /* 60px in the narrow .split column broke headings into 8 short lines */
  h2{font-size:clamp(29px,3.9vw,52px);letter-spacing:-.028em}
  @media(min-width:901px){.split{grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,72px)}}
  h3{font-size:clamp(18px,1.6vw,21px);letter-spacing:-.008em}
  .lede{font-size:clamp(15px,1.1vw,17px);opacity:.78}
  .phero h1{font-size:clamp(38px,6.4vw,84px);letter-spacing:-.038em}

  /* --- hero centres --- */
  .hero{align-items:center;min-height:88svh}
  .hero .hero-centred{grid-template-columns:1fr;justify-items:center;text-align:center;gap:var(--s-3)}
  .hero .hero-centred .label{justify-content:center}
  .hero .hero-centred .lede{max-width:58ch;margin-inline:auto}
  .hero .hero-centred .btns{justify-content:center}
  .hero .wrap{padding-block:clamp(84px,9vw,112px) clamp(44px,5.5vw,72px)}

  /* --- ticker: slash separators, on the ground --- */
  .ticker{background:transparent;color:var(--text);border-block:1px solid var(--line-dark)}
  .ticker-track{font-size:13px;letter-spacing:.16em}
  .ticker-track i{width:auto;height:auto;background:none;border-radius:0;opacity:1;
       color:var(--orange-text);font-style:normal}
  .ticker-track i::before{content:"/"}

  /* --- stats: type on hairlines, not a filled band --- */
  .band{background:transparent;color:var(--text);padding-block:clamp(24px,4vw,44px)}
  .stat{border-inline-start:1px solid var(--line-dark)}
  .stat b{font-size:clamp(34px,4vw,54px);letter-spacing:-.03em}
  .stat span{opacity:.62}

  /* --- shape: rounded panels, pill controls --- */
  .btn{border-radius:999px}
  .card,.svc,.cell{border-radius:18px}
  .light .card{background:var(--mist-2);border-color:rgba(22,48,42,.10)}
  .light .card:hover{background:#fff;border-color:rgba(22,48,42,.18)}
  .track{border-radius:22px}
  .gal figure,.portrait{border-radius:18px}
  .track-tool,.pricing,.review,.wiz-ok,.opt,.boxrow,.stage,.inco-term,
  .form input,.form select,.form textarea,.tt-row input{border-radius:12px}
  .wiz-step b{border-radius:9px}
  .lang{border-radius:999px;overflow:hidden}
  .burger,.wa{border-radius:999px}
  .countries span,.fcl-chips a{border-radius:999px}
  .cell.cta{background:var(--orange-deep);border-color:var(--orange-deep)}

  /* --- FCL call to action: type on the open ground --- */
  .fclband{background:transparent;color:var(--text);border-top:0;
       padding-block:clamp(48px,7vw,88px)}
  .fclband .lede{color:inherit}
  .fcl-chips a{border:1px solid var(--line-dark)}
  .fcl-chips a:hover{border-color:var(--orange-text);background:rgba(156,107,21,.08)}
  .fclband .label{color:var(--orange-text)}
  .fclband .label::before,.fclband .label::after{color:var(--orange-text)}

  /* the closing call to action is on the ground too */
  .cta-close .label{color:var(--ink)}
  .cta-close .label::before,.cta-close .label::after{color:var(--orange-text)}

  /* --- gallery breathes on the ground --- */
  .gal{gap:var(--s-2);padding-inline:var(--pad);max-width:var(--max);margin-inline:auto}

  /* ============================================================
     MOBILE  — phone layout. Nothing above this block is changed.
     ============================================================ */

  /* Nothing may push the page sideways. `clip` (not `hidden`) so the
     sticky header keeps working. */
  html{overflow-x:clip;scroll-padding-top:92px}
  body{overflow-x:clip}

  @media(max-width:760px){
    :root{--pad:18px;--card-pad:20px}
    html{scroll-padding-top:76px}

    /* --- Type: display sizes were tuned for desktop and overflowed
           on a phone (Russian "СТРАТЕГИЧЕСКИЙ" alone was ~420px wide
           on a 335px screen). Drop the width-stretch and rescale. --- */
    h1{font-size:clamp(30px,8.4vw,44px);font-stretch:100%;letter-spacing:-.005em;line-height:1.06}
    h2{font-size:clamp(25px,6.4vw,34px);font-stretch:112.5%}
    h3{font-size:18px}
    .phero h1{font-size:clamp(28px,7.6vw,40px)}
    .quote{font-size:20px}
    h1,h2,h3,.quote{overflow-wrap:break-word}
    .lede{font-size:16px;max-width:none}

    /* --- Header: logo + 3 language chips + burger did not fit
           across a 375px viewport. --- */
    .nav{height:64px;gap:12px}
    .logo{font-size:15px;letter-spacing:.1em;gap:8px}
    .navcta{gap:10px}
    .lang a{min-width:34px;min-height:40px;font-size:11px;letter-spacing:.02em}
    .burger{width:40px;height:40px}
    @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)){
      .nav{animation:none;height:64px}
    }

    /* Hero sits under the header, so its offset must match the new height */
    .hero{margin-top:-64px;min-height:92svh}
    .hero .wrap{padding-block:104px var(--s-6);padding-bottom:var(--s-6)}
    .scroll-cue{display:none}
    .hero .btns{gap:10px}
    .hero .btns .btn{flex:1 1 auto;min-width:0}
    .phero{padding-block:calc(64px + var(--s-5)) var(--s-5)}

    /* --- Section rhythm --- */
    section{padding-block:64px}
    .grid-4,.grid-3,.grid-2,.tracks,.svc-grid,.bento,.team{margin-top:var(--s-4)}
    .track{min-height:0;padding:var(--s-3) var(--s-3) var(--s-4);gap:0}
    .track .num{top:var(--s-3);inset-inline-start:var(--s-3)}
    .track h3{font-size:24px;margin-top:40px}
    .track p{max-width:none}
    .svc{padding:var(--s-3)}
    .track-head{margin-top:var(--s-6);gap:var(--s-2)}
    /* Stats stacked one per row left ~350px of dead space to the right of a
       two-character number. Number and label now share a baseline row. */
    .stat{border-inline-start:0;border-block-start:1px solid var(--line-dark);padding-inline-start:0;padding-block-start:var(--s-2);
          display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:14px}
    .stat b{font-size:34px}
    /* The track CTA label wraps to two lines on a phone, which left the arrow
       floating in the middle. Make it a deliberate full-width row instead. */
    .track .btn{align-self:stretch;width:100%;justify-content:space-between;text-align:start}
    /* 34px tall — under the 44px touch minimum. */
    .tt-tabs button{min-height:44px}

    /* --- Cards: the 32px icon sat on its own line above the title, which
           made every icon card ~25% taller than it needed to be and turned a
           six-card section into a very long scroll. The icon moves into the
           title row as a margin marker; the body keeps the full card width so
           line length does not suffer in Arabic or Russian. --- */
    .card:has(> .i){display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:12px;row-gap:10px}
    .card:has(> .i) > .i{grid-column:1;grid-row:1;width:24px;height:24px;margin-top:-1px}
    .card:has(> .i) > h3{grid-column:2;grid-row:1}
    .card:has(> .i) > p{grid-column:2;grid-row:2}

    /* --- Map: a 2.13:1 map squeezed into 300px makes the city labels
           ~3px tall. Let it scroll sideways at a legible size. --- */
    .routes{overflow-x:auto;overflow-y:clip;-webkit-overflow-scrolling:touch;padding:var(--s-1);overscroll-behavior-x:contain}
    .routes svg{min-width:1000px}
    .routes .city{font-size:15px}
    .routes .hub{font-size:16px}
    .routes::-webkit-scrollbar{height:4px}
    .routes::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3)}

    /* --- Contact bento: the CTA tile spanned two rows in a one-column
           stack, which left a very tall orange block. --- */
    .cell{min-height:0}
    .cell.cta{grid-row:auto;padding-block:var(--s-5)}

    /* --- Inputs: anything under 16px makes iOS Safari zoom the whole
           page on focus, which is what makes the site feel "broken". --- */
    .form input,.form select,.form textarea,.tt-row input{font-size:16px}
    .tt-row{flex-direction:column}
    .tt-row .btn{width:100%}

    /* --- Footer --- */
    .fgrid{grid-template-columns:1fr;gap:var(--s-3)}
    footer{padding-block:var(--s-5) calc(var(--s-3) + env(safe-area-inset-bottom))}
    footer a,.cinfo a{overflow-wrap:anywhere}
    .fbottom{margin-top:var(--s-4)}

    /* --- Drawer: was a fixed flex column with no scroll; on shorter
           phones the bottom CTAs were unreachable. --- */
    .drawer{overflow-y:auto;padding:var(--s-3) var(--pad) calc(var(--s-4) + env(safe-area-inset-bottom));gap:var(--s-3)}
    .drawer nav a{font-size:28px;padding:12px 0}

    .ticker-track{font-size:12px;gap:var(--s-3)}
    .gal{padding-inline:0;gap:2px}
  }

  @media(max-width:380px){
    :root{--pad:16px}
    h1{font-size:clamp(27px,8vw,34px)}
    .logo{font-size:14px;letter-spacing:.08em}
    .lang a{min-width:31px}
    .hero .btns .btn{width:100%;flex:1 1 100%}
  }

  /* ============================================================
     QUOTE WIZARD — freight request. Ocean & Sand tokens only, no
     new hues, square corners like the rest of the site.
     ============================================================ */
  .wiz{max-width:840px;margin-inline:auto}
  /* Panels are all visible until site.js adds .on, so the form still
     works end-to-end with JavaScript off. */
  .wiz-panel{display:grid;gap:var(--s-2)}
  .wiz.on .wiz-panel{display:none}
  .wiz.on .wiz-panel.current{display:grid}
  .wiz-panel h2{font-size:clamp(21px,2.3vw,28px);margin-bottom:var(--s-1)}
  .wiz-panel+.wiz-panel{margin-top:var(--s-5)}
  .wiz.on .wiz-panel+.wiz-panel{margin-top:0}

  .wiz-steps{display:flex;gap:var(--s-3);list-style:none;margin-bottom:var(--s-4);flex-wrap:wrap}
  .wiz-step{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-stretch:112.5%;font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.4;transition:opacity var(--dur-base) var(--ease-out)}
  .wiz-step b{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line-dark);font-weight:500;font-size:13px;background:#fff}
  .wiz-step.on{opacity:1}
  .wiz-step.on b{background:var(--ink);color:#fff;border-color:var(--ink)}
  .wiz-step.done{opacity:.8}
  .wiz-step.done b{background:var(--orange-deep);border-color:var(--orange-deep);color:#fff}

  .fs{border:0;padding:0;display:grid;gap:8px}
  .fs legend{font-size:13px;opacity:.85;padding:0;margin-bottom:2px}
  .opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s-1)}
  .opt-list{display:grid;gap:var(--s-1)}
  .opt{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 34px 14px 14px;background:#fff;border:1px solid var(--line-dark);cursor:pointer;
       transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
  [dir=rtl] .opt{padding:14px 14px 14px 34px}
  .opt input{position:absolute;opacity:0;width:0;height:0}
  .opt-t{font-family:var(--font-head);font-stretch:112.5%;font-size:14px;letter-spacing:.01em;line-height:1.25}
  .opt-s{font-size:12.5px;opacity:.65}
  .opt:hover{border-color:var(--ink-3)}
  /* selection is marked by a filled box as well as colour, not colour alone */
  .opt::after{content:"";position:absolute;top:13px;inset-inline-end:13px;width:15px;height:15px;border:1px solid var(--line-dark);background:#fff;transition:background var(--dur-fast) var(--ease-out)}
  .opt:has(input:checked){border-color:var(--orange-deep);box-shadow:inset 0 0 0 1px var(--orange-deep)}
  .opt:has(input:checked)::after{background:var(--orange-deep);border-color:var(--orange-deep);
       background-image:linear-gradient(45deg,transparent 44%,#fff 44%,#fff 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,#fff 44%,#fff 56%,transparent 56%)}
  .opt:has(input:focus-visible){outline:2px solid var(--orange-deep);outline-offset:2px}
  .opt-row{flex-direction:row;align-items:center;gap:10px;padding:13px 34px 13px 14px}
  [dir=rtl] .opt-row{padding:13px 14px 13px 34px}

  .wiz-nav{display:flex;gap:var(--s-2);align-items:center;margin-top:var(--s-3)}
  #wizNext,#wizSend{margin-inline-start:auto}
  .review{border:1px solid var(--line-dark);background:var(--mist-2);padding:var(--s-3);margin-top:var(--s-2)}
  .review h3{font-size:14px;letter-spacing:.06em}
  .review dl{display:grid;grid-template-columns:auto 1fr;gap:8px var(--s-3);font-size:14px;margin-top:var(--s-2)}
  .review dt{opacity:.6}
  .review dd{font-weight:500;text-wrap:pretty}
  .wiz-ok{max-width:840px;margin:var(--s-4) auto 0;padding:var(--s-4)}
  .wiz-ok h2{font-size:clamp(21px,2.3vw,28px);margin-bottom:var(--s-2)}
  .wiz-trust{list-style:none;max-width:840px;margin:var(--s-5) auto 0;display:grid;gap:10px;font-size:13px;opacity:.75}
  .wiz-trust li{padding-inline-start:18px;position:relative;text-wrap:pretty}
  .wiz-trust li::before{content:"";position:absolute;inset-inline-start:0;top:.5em;width:7px;height:7px;background:var(--orange-text)}

  @media(max-width:760px){
    .opt-grid{grid-template-columns:1fr 1fr}
    .wiz-steps{gap:var(--s-2);margin-bottom:var(--s-3)}
    .wiz-step b{width:26px;height:26px;font-size:12px}
    .review dl{grid-template-columns:1fr;gap:2px}
    .review dt{margin-top:8px}
    .wiz-nav .btn{flex:1 1 auto}
    #wizNext,#wizSend{margin-inline-start:0}
  }
  /* Three step labels do not fit across a phone — show only the current one. */
  @media(max-width:560px){
    .wiz-step:not(.on) span{display:none}
  }

  /* .btn, .card and .form all set display, which beats the browser's default
     [hidden] rule — without this the wizard's Back button and success panel
     would never actually hide. */
  [hidden]{display:none!important}
  /* the general 140px textarea is right for the cargo description, too tall
     for the optional note at the end */
  .wiz textarea[name=message]{min-height:96px}

  /* ---------- FCL: container mix rows ---------- */
  .fs-hint{font-size:12.5px;opacity:.6;margin-top:-4px}
  .fs-err{font-size:13px;color:var(--orange-text);font-weight:500;margin-top:4px}
  .boxes{display:grid;gap:8px}
  .boxrow{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t q" "s q";
          align-items:center;column-gap:var(--s-2);background:#fff;border:1px solid var(--line-dark);padding:12px 14px;
          transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
  .box-t{grid-area:t;font-family:var(--font-head);font-stretch:112.5%;font-size:14px;line-height:1.25}
  .box-s{grid-area:s;font-size:12.5px;opacity:.6}
  .boxrow input{grid-area:q;width:76px;min-height:44px;text-align:center;font-variant-numeric:tabular-nums;
                font-size:16px;background:var(--mist-2);border:1px solid var(--line-dark);color:var(--text);padding:0 4px}
  .boxrow input:focus{outline:2px solid var(--orange-deep);outline-offset:2px;border-color:transparent}
  /* JS marks rows with a quantity, so the mix is readable at a glance */
  .boxrow.has{border-color:var(--orange-deep);box-shadow:inset 0 0 0 1px var(--orange-deep)}
  .wiz-nofcl{max-width:840px;margin:var(--s-3) auto 0;font-size:13px;opacity:.8}
  .wiz-nofcl a{color:var(--orange-text);text-decoration:underline;text-underline-offset:3px}

  /* ---------- FCL band on the home page ---------- */
  .fclband{background:var(--ink-2);color:#fff;padding-block:clamp(56px,7vw,88px);border-top:2px solid var(--orange)}
  .fcl-in{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
  .fcl-copy h2{max-width:18ch}
  .fcl-copy .lede{margin-top:var(--s-2);color:rgba(255,255,255,.88)}
  .fcl-act{display:grid;gap:var(--s-3);justify-items:start}
  .fcl-pick span{display:block;font-size:13px;opacity:.7;margin-bottom:10px}
  .fcl-chips{display:flex;gap:8px;flex-wrap:wrap}
  .fcl-chips a{font-family:var(--font-head);font-stretch:112.5%;font-size:13px;letter-spacing:.06em;
               padding:0 14px;min-height:44px;display:inline-flex;align-items:center;border:1px solid var(--line);
               transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
  .fcl-chips a:hover{border-color:var(--orange);background:rgba(224,182,95,.14)}
  @media(max-width:860px){.fcl-in{grid-template-columns:1fr;gap:var(--s-4)}}

  /* ---------- inline routes into the form ---------- */
  .svc-link,.faq-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:var(--s-1);
                      font-family:var(--font-head);font-stretch:112.5%;font-size:13px;letter-spacing:.05em;
                      text-transform:uppercase;color:var(--orange-text)}
  .svc-link svg,.faq-link svg{width:15px;height:15px}
  .svc-link:hover,.faq-link:hover{text-decoration:underline;text-underline-offset:3px}
  [dir=rtl] .svc-link svg,[dir=rtl] .faq-link svg{transform:scaleX(-1)}

  @media(max-width:760px){
    .fcl-act{justify-items:stretch}
    .fcl-act>.btn{width:100%;justify-content:space-between}
    .fcl-chips a{flex:1 1 auto;justify-content:center}
    .boxrow{padding:10px 12px}
    .boxrow input{width:68px}
  }

  /* ---------- WhatsApp quick contact ---------- */
  .wa{position:fixed;z-index:55;inset-block-end:max(18px,env(safe-area-inset-bottom));inset-inline-end:18px;
      display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 18px;
      background:var(--orange-deep);color:#fff;box-shadow:0 12px 32px rgba(14,33,28,.3);
      font-family:var(--font-head);font-stretch:112.5%;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
      opacity:0;animation:wa-in .4s var(--ease-out) 1.1s forwards;
      transition:background var(--dur-base) var(--ease-out),translate var(--dur-base) var(--ease-out)}
  @keyframes wa-in{to{opacity:1}}
  .wa:hover{background:#7A500F;translate:0 -2px}
  .wa-i{display:grid;place-items:center;flex:none}
  .wa-i svg{width:22px;height:22px}
  /* the button floats over the end of the footer, so give the footer room */
  footer{padding-bottom:calc(var(--s-4) + 72px + env(safe-area-inset-bottom))}
  @media(max-width:760px){
    .wa{width:52px;padding:0;justify-content:center;inset-inline-end:14px;
        inset-block-end:calc(14px + env(safe-area-inset-bottom))}
    .wa-t{display:none}
  }
  @media(prefers-reduced-motion:reduce){.wa{opacity:1;animation:none}}

  /* ---------- Incoterms explainer ---------- */
  .inco{max-width:900px;margin-inline:auto}
  .inco-terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin-top:var(--s-1)}
  .inco-term{background:#fff;border:1px solid var(--line-dark);padding:12px;cursor:pointer;text-align:start;
             display:grid;gap:3px;min-height:64px;font-family:inherit;color:inherit;
             transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
  .inco-term b{font-family:var(--font-head);font-stretch:112.5%;font-size:15px;letter-spacing:.05em}
  .inco-term span{font-size:12px;opacity:.6;line-height:1.2}
  .inco-term:hover{border-color:var(--ink-3)}
  .inco-term.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .inco-term.on span{opacity:.75}
  .inco-sum{margin-top:var(--s-3);font-size:clamp(15px,1.3vw,17px);max-width:72ch;text-wrap:pretty}
  .inco-legend{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-3);font-size:12.5px;opacity:.85}
  .inco-legend span{display:inline-flex;align-items:center;gap:8px}
  .lg{width:12px;height:12px;flex:none}
  .lg.s{background:var(--orange-deep)}
  .lg.b{background:#fff;border:1px solid var(--line-dark)}
  .inco-stages{list-style:none;margin-top:var(--s-2);display:grid;gap:3px}
  .stage{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-2);
         background:#fff;border:1px solid var(--line-dark);padding:12px 14px;
         transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
  .stage-n{font-family:var(--font-head);font-size:12px;opacity:.4;font-variant-numeric:tabular-nums}
  .stage-t{font-size:14.5px;text-wrap:pretty}
  .stage-who{font-family:var(--font-head);font-stretch:112.5%;font-size:11.5px;letter-spacing:.06em;
             text-transform:uppercase;padding:5px 10px;border:1px solid var(--line-dark);white-space:nowrap}
  .stage.seller{background:rgba(156,107,21,.07);border-color:rgba(156,107,21,.32)}
  .stage.seller .stage-who{background:var(--orange-deep);color:#fff;border-color:var(--orange-deep)}
  /* the point most buyers get wrong: cost and risk do not move together */
  .risk-flag{grid-column:1/-1;margin-top:9px;padding-top:9px;border-top:1px dashed var(--ink-3);
             font-family:var(--font-head);font-stretch:112.5%;font-size:11.5px;letter-spacing:.08em;
             text-transform:uppercase;color:var(--ink-2)}
  .inco-note{margin-top:var(--s-3);font-size:12.5px;opacity:.65;max-width:80ch;text-wrap:pretty}
  .inco-cta{margin-top:var(--s-4)}
  .inco-help{font-size:13px;opacity:.85;margin-top:-2px}
  .inco-help a{color:var(--orange-text);text-decoration:underline;text-underline-offset:3px}
  @media(max-width:560px){
    .inco-terms{grid-template-columns:repeat(2,minmax(0,1fr))}
    .stage{grid-template-columns:auto minmax(0,1fr);row-gap:8px}
    .stage-who{grid-column:2;justify-self:start}
  }

  /* ============================================================
     LAYOUT V2 — late overrides.
     These components were appended after the mobile block in earlier
     rounds, so they sit later in the cascade than the V2 block and
     have to be corrected here. All three assumed a dark ground.
     ============================================================ */
  .fclband{background:transparent;color:var(--text);border-top:0;padding-block:clamp(48px,7vw,88px)}
  .fcl-copy .lede{color:inherit;opacity:.78}
  .fclband .label,.fclband .label::before,.fclband .label::after{color:var(--orange-text)}
  .fcl-chips a{border:1px solid var(--line-dark);border-radius:999px;color:var(--text)}
  .fcl-chips a:hover{border-color:var(--orange-text);background:rgba(156,107,21,.08)}
  /* 4-across only when the cards are actually wide enough: at 1024 the tracks
     were 218px and "intermediaries" needs 173px inside 168px of content box. */
  @media(min-width:561px) and (max-width:1120px){.grid-4,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
  h1,h2,h3{overflow-wrap:break-word}

  /* The bento call-to-action is a filled brass panel, not a card on the ground.
     Two things were wrong once its section became .light:
       - .light .card:hover repainted it white, so the white ghost button
         disappeared on hover;
       - it stopped inheriting white text, leaving dark ink on brass.
     Specificity here has to beat .light .card:hover (0,3,0), hence .card.cta. */
  .light .card.cta,
  .light .card.cta:hover{background:var(--orange-deep);border-color:var(--orange-deep);color:#fff}
  .light .card.cta h3{color:#fff}
  /* brass-deep on the cream hover tint is only 4.33:1 — use the darker
     brass for the label so both states clear AA */
  .light .card.cta .btn-primary{background:#fff;color:var(--orange-text)}
  .light .card.cta .btn-primary:hover{background:#FBF7EC;color:var(--orange-text)}
  .light .card.cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.75)}
  /* lightening brass on hover LOWERS contrast with the white label
     (4.64 -> 3.48). Darken instead: white on it goes to ~5.7. */
  .light .card.cta .btn-ghost:hover{background:rgba(0,0,0,.16);border-color:#fff}

  /* ---------- Visit / delegation page ---------- */
  .plist{list-style:none;display:grid;gap:0;margin:0}
  .plist li{padding:var(--s-3) 0;border-top:1px solid var(--line-dark);font-size:15.5px;
            line-height:1.6;text-wrap:pretty}
  .plist li:last-child{border-bottom:1px solid var(--line-dark)}
  .panel .plist li{border-color:rgba(22,48,42,.14)}
  .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
         margin:var(--s-4) 0 0;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:14px;overflow:hidden}
  .fact{background:var(--mist-2);padding:var(--s-3)}
  .fact dt{font-family:var(--mono,var(--font-head));font-size:11px;letter-spacing:.12em;
           text-transform:uppercase;color:var(--orange-text);margin-bottom:6px}
  .fact dd{margin:0;font-family:var(--font-head);font-stretch:112.5%;font-size:16px;letter-spacing:-.005em}

  /* ---------- Case studies (frame) ---------- */
  .draft-note{border:1px dashed var(--orange-text);border-radius:16px;padding:var(--s-4);
              background:rgba(156,107,21,.06);max-width:76ch}
  .draft-note h2{font-size:clamp(19px,2vw,24px);margin-bottom:8px}
  .draft-note p{font-size:14.5px;opacity:.85;margin:0;text-wrap:pretty}
  .cases{display:grid;gap:var(--s-2);margin-top:var(--s-5)}
  .case{background:var(--mist-2);border:1px solid var(--line-dark);border-radius:18px;padding:var(--s-4)}
  .case-top{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-2)}
  .case-tag{font-family:var(--font-head);font-stretch:112.5%;font-size:11.5px;letter-spacing:.1em;
            text-transform:uppercase;color:var(--orange-text)}
  /* unmistakable, so a placeholder can never be mistaken for real work */
  .case-badge{font-family:var(--font-head);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
              padding:5px 11px;border-radius:999px;background:var(--ink);color:#fff}
  .case h3{font-size:clamp(19px,2vw,24px);text-transform:none;letter-spacing:-.015em;margin-bottom:var(--s-2)}
  .case-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s-2);
             margin:0 0 var(--s-3);padding-block:var(--s-2);border-block:1px solid var(--line-dark)}
  .case-meta dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;margin-bottom:3px}
  .case-meta dd{margin:0;font-size:14px;font-weight:500}
  .case p{font-size:14.5px;opacity:.8;margin:0;max-width:74ch;text-wrap:pretty}
  @media(max-width:560px){
    .facts{grid-template-columns:1fr}
    .case-meta{grid-template-columns:1fr 1fr}
  }

  /* ---------- "What you get" — picture-led rows ---------- */
  .gets{display:grid;gap:var(--s-3);margin-top:var(--s-4)}
  .get{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(20px,3vw,40px);
       align-items:center;background:var(--mist-2);border:1px solid var(--line-dark);
       border-radius:20px;padding:var(--s-3);overflow:hidden}
  .get:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,320px)}
  .get:nth-child(even) .shot{order:2}
  .get-t h3{font-size:clamp(18px,2vw,23px);text-transform:none;letter-spacing:-.015em;margin-bottom:8px}
  .get-t p{font-size:15px;opacity:.8;margin:0;max-width:52ch;text-wrap:pretty}
  .shot{margin:0;aspect-ratio:var(--ar,4/3);border-radius:14px;overflow:hidden;background:var(--mist)}
  .shot img{width:100%;height:100%;object-fit:cover;display:block}
  /* no stock photo stands in for a real one — a quiet panel holds the space */
  .shot-ph{width:100%;height:100%;
    background:linear-gradient(150deg,var(--ink-3),var(--ink) 70%);opacity:.14}
  @media(max-width:760px){
    .get,.get:nth-child(even){grid-template-columns:1fr;gap:var(--s-2)}
    .get:nth-child(even) .shot{order:0}
    .shot{--ar:16/9}
  }

  /* ---------- Container size comparison ---------- */
  .sizes{margin-top:var(--s-4);border:1px solid var(--line-dark);border-radius:16px;
         background:var(--mist-2);overflow-x:auto}
  .sizes table{border-collapse:collapse;width:100%;min-width:620px;font-size:14.5px}
  .sizes th,.sizes td{text-align:start;padding:14px 16px;border-bottom:1px solid var(--line-dark)}
  .sizes thead th{font-family:var(--font-head);font-stretch:112.5%;font-size:11px;letter-spacing:.1em;
                  text-transform:uppercase;opacity:.6;font-weight:400}
  .sizes tbody tr:last-child th,.sizes tbody tr:last-child td{border-bottom:0}
  .sizes tbody th{font-weight:400}
  .sizes tbody th b{display:block;font-family:var(--font-head);font-stretch:112.5%;font-size:15px;letter-spacing:-.005em}
  .sizes tbody th span{font-size:12px;opacity:.55;font-variant-numeric:tabular-nums}
  .sizes .dim{opacity:.6;font-variant-numeric:tabular-nums}
  /* the realistic figure is the one to plan with, so it reads louder */
  .sizes .real{font-weight:600;color:var(--orange-text);font-variant-numeric:tabular-nums}
  .szn{font-size:13.5px;opacity:.72;margin-top:var(--s-2);max-width:78ch;text-wrap:pretty}
  /* On a phone the size table becomes one card per container — a 620px table
     that scrolls sideways is contained, but it is not clearer. */
  @media(max-width:760px){
    .sizes{overflow:visible;border:0;background:transparent;border-radius:0}
    .sizes table,.sizes thead,.sizes tbody,.sizes tr,.sizes th,.sizes td{display:block;min-width:0;width:auto}
    .sizes thead{display:none}
    .sizes tbody tr{background:var(--mist-2);border:1px solid var(--line-dark);
                    border-radius:14px;padding:var(--s-3);margin-bottom:10px}
    .sizes tbody th{border:0;padding:0 0 10px;margin-bottom:6px;border-bottom:1px solid var(--line-dark)}
    .sizes td{border:0;padding:7px 0;display:flex;justify-content:space-between;align-items:baseline;
              gap:16px;font-size:14.5px}
    .sizes td::before{content:attr(data-l);opacity:.55;font-size:11px;text-transform:uppercase;
                      letter-spacing:.09em;font-family:var(--font-head);flex:none}
    .sizes .dim,.sizes .real{text-align:end}
  }
  /* Russian labels plus a dimension string do not fit on one line at 320px */
  @media(max-width:400px){
    .sizes td{flex-wrap:wrap;gap:2px}
    .sizes td::before{flex:1 0 100%}
    .sizes .dim,.sizes .real{text-align:start}
  }

  /* Menu labels and button text must never break mid-phrase: the Russian
     "Расчёт FCL" was splitting across two lines in the header. */
  /* Nav only. An unscoped .btn{nowrap} pushed the long Russian jump buttons
     on /services/ past the viewport at 390px — page buttons must still wrap. */
  .nav .menu a,.nav .btn,.nav .lang a{white-space:nowrap}
  .legal{font-size:12px;opacity:.55;margin-top:var(--s-2);line-height:1.5}
  .cinfo .legal{display:block;margin-top:6px;font-size:12px}


  /* --- NAV FIT: long-label languages (RU/ZH) in the 1025-1160px band --- */
  @media(min-width:1025px) and (max-width:1160px){
    .nav{gap:16px}
    .menu{gap:22px}
    .navcta{gap:12px}
    .lang a{min-width:40px}
  }


  /* --- CHINESE (Simplified) ------------------------------------------------
     Han glyphs are full-height square boxes with no ascenders, descenders or
     case. Three things in the Latin type system therefore have to be undone
     on /zh/: the 1.05 display line-height (cramped and visually collides),
     the wide tracking on labels and buttons (CJK is already evenly spaced),
     and the font stack itself, which carries no Han. Latin runs inside
     Chinese text — YAMFAZA, FCL, WhatsApp — still resolve to Archivo and
     Instrument Sans, because font fallback is per character.
     ------------------------------------------------------------------------ */
  html[lang^="zh"]{
    --font-head:'Archivo','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
    --font-body:'Instrument Sans','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  }
  html[lang^="zh"] body{line-height:1.75}
  html[lang^="zh"] h1,html[lang^="zh"] h2{line-height:1.28;letter-spacing:0}
  html[lang^="zh"] h3{line-height:1.45}
  html[lang^="zh"] .quote{line-height:1.6}
  html[lang^="zh"] .drawer nav a{line-height:1.3}
  html[lang^="zh"] .hero h1{line-height:1.22}
  /* tracking: keep a hint of it on short all-caps-style labels, drop the rest */
  html[lang^="zh"] .label,html[lang^="zh"] .btn,html[lang^="zh"] .card .k,
  html[lang^="zh"] .lk,html[lang^="zh"] .rhead,html[lang^="zh"] .track .num,
  html[lang^="zh"] .countries .grp,html[lang^="zh"] .routes .hub,
  html[lang^="zh"] footer h4,html[lang^="zh"] .member .role,
  html[lang^="zh"] .wiz-step,html[lang^="zh"] .opt-t,html[lang^="zh"] .box-t,
  html[lang^="zh"] .fcl-chips a,html[lang^="zh"] .gal figcaption,
  html[lang^="zh"] .tt-tabs button,html[lang^="zh"] .portrait,
  html[lang^="zh"] .photo-note{letter-spacing:.02em}
  html[lang^="zh"] .scroll-cue,html[lang^="zh"] .ticker-track{letter-spacing:.06em}
  /* no case in Han, but a Latin run inside a Chinese label should not shout */
  html[lang^="zh"] .faq summary,html[lang^="zh"] .opt-t,html[lang^="zh"] .box-t{text-transform:none}


  /* --- REAL PHOTOGRAPHS ---------------------------------------------------
     A portrait slot is a labelled placeholder until assets/img/portrait-<x>
     exists; once it does, the photo fills the same frame so the layout does
     not shift. object-fit:cover crops rather than distorts, and the 4/5 frame
     is set on .portrait already. --------------------------------------- */
  .portrait.has-photo{padding:0;overflow:hidden;background:var(--ink)}
  .portrait.has-photo img{width:100%;height:100%;object-fit:cover;display:block}