/* ==========================================================================
   HAYCON INTERNATIONAL FZCO
   Graphite ground, photography, Incoterms sheet inset in bond paper.
   Prata (display) · IBM Plex Sans (text) · IBM Plex Mono (data)
   ========================================================================== */

:root{
  --ink:#0A0C0D;
  --ink-2:#0F1315;
  --ink-3:#161B1E;
  --ink-4:#1F2528;

  --paper:#EDEFEE;
  --paper-2:#E1E5E3;

  --fg:#F1F3F2;
  --fg-2:#A0A9A6;
  --fg-3:#6E7875;
  --on-paper:#0F1416;
  --on-paper-2:#59635F;

  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.17);
  --line-ink:rgba(10,16,18,.14);

  --green:#1BA66D;
  --green-lt:#35C989;
  --green-dk:#0F7A50;
  --red:#D6212C;

  --track:rgba(255,255,255,.10);
  --track-ink:#D6DAD8;

  --ff-d:'Prata','Times New Roman',Georgia,serif;
  --ff:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --ff-m:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:1320px;
  --gut:clamp(20px,4.4vw,56px);
  --ease:cubic-bezier(.22,.68,.24,1);
  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:100px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--ink); color:var(--fg);
  font-family:var(--ff); font-weight:300; font-size:16.5px; line-height:1.66;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
p{ margin:0; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
::selection{ background:var(--green); color:#fff; }
:focus-visible{ outline:2px solid var(--green-lt); outline-offset:3px; }

.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.mono{ font-family:var(--ff-m); font-weight:400; font-variant-numeric:tabular-nums; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.eyebrow{
  font-family:var(--ff-m); font-size:11px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--green-lt); margin-bottom:18px;
}
.eyebrow::before{ content:""; display:inline-block; width:22px; height:1px; background:var(--red);
  vertical-align:middle; margin-right:13px; transform:translateY(-1px); }

.skip{ position:fixed; left:-999px; top:8px; z-index:220; background:var(--green); color:#fff; padding:10px 16px; }
.skip:focus{ left:8px; }

/* ── header ──────────────────────────────────────────────── */
.head{ position:sticky; top:0; z-index:100; background:rgba(10,12,13,.90);
  backdrop-filter:blur(16px) saturate(1.25); -webkit-backdrop-filter:blur(16px) saturate(1.25); }
.head.is-stuck{ background:rgba(10,12,13,.97); box-shadow:0 1px 0 var(--line); }

.head__bar{ background:var(--ink-2); color:var(--fg-3); font-size:12px; border-bottom:1px solid var(--line); }
.head__bar-in{ display:flex; align-items:center; gap:18px; min-height:36px; flex-wrap:wrap; }
.head__bar a{ color:var(--fg-2); }
.head__bar a:hover{ color:var(--fg); }
.head__sp{ flex:1; }
.head__loc{ color:var(--fg-3); }

.lang{ display:inline-flex; border:1px solid var(--line-2); }
.lang__b{ background:none; border:0; padding:3px 10px; cursor:pointer; font-family:var(--ff-m);
  font-size:11px; letter-spacing:.08em; color:var(--fg-3); }
.lang__b+.lang__b{ border-left:1px solid var(--line-2); }
.lang__b:hover{ color:var(--fg); }
.lang__b.is-on{ background:var(--green); color:#fff; }

.head__in{ display:flex; align-items:center; gap:24px; min-height:76px; border-bottom:1px solid var(--line); transition:min-height .3s var(--ease); }
.head.is-stuck .head__in{ min-height:64px; }
.brand img{ width:clamp(168px,15.5vw,204px); transition:width .3s var(--ease); }
.head.is-stuck .brand img{ width:clamp(152px,13.5vw,182px); }

.nav{ display:flex; align-items:center; gap:clamp(14px,2vw,32px); margin-left:auto; }
.nav a{ font-size:14.5px; color:var(--fg-2); padding-block:8px; border-bottom:1px solid transparent; transition:color .25s var(--ease); }
.nav a:hover{ color:var(--fg); }
.nav a.is-active{ color:var(--fg); border-bottom-color:var(--green); }
.nav__cta{ background:var(--green); color:#fff !important; padding:11px 21px !important; border:0 !important; font-weight:400; }
.nav__cta:hover{ background:var(--green-dk); }

.burger{ display:none; width:42px; height:42px; background:none; border:1px solid var(--line-2); margin-left:auto; position:relative; cursor:pointer; }
.burger span{ position:absolute; left:12px; width:18px; height:1px; background:var(--fg); transition:transform .25s, opacity .25s; }
.burger span:nth-child(1){ top:15px; } .burger span:nth-child(2){ top:21px; } .burger span:nth-child(3){ top:27px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ── photo helper ────────────────────────────────────────── */
.ph{ margin:0; background:var(--ink-3); overflow:hidden; position:relative; }
.ph img{ width:100%; height:100%; object-fit:cover; }
.ph.ph--none{ background:repeating-linear-gradient(112deg,rgba(255,255,255,.05) 0 14px,transparent 14px 38px),var(--ink-3); }
.ph.ph--none img{ display:none; }

/* ── motion ──────────────────────────────────────────────── */
@keyframes heroRise{ from{ opacity:0; transform:translateY(16px); } }
@keyframes heroSettle{ from{ opacity:0; transform:scale(1.045); } }

/* charts draw themselves in: the growing bar IS the datum, not decoration.
   Without JS the .will-draw class is never added and the bars render full. */
.chart.will-draw .row__f,
.chart.will-draw .dist__t i{ width:0; }
.chart.will-draw .row__r{ opacity:0; }
.chart.will-draw.is-drawn .row__f,
.chart.will-draw.is-drawn .dist__t i{ width:var(--w); transition:width .8s var(--ease); }
.chart.will-draw.is-drawn .row__r{ opacity:1; transition:opacity .35s var(--ease); }

/* ── hero ────────────────────────────────────────────────── */
.hero{ position:relative; background:var(--ink); }
.hero__ph{ position:absolute; inset:0; background:var(--ink); }
.hero__ph img{ opacity:.52; animation:heroSettle 1.5s var(--ease) backwards; }
.hero__ph::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(97deg,rgba(10,12,13,.97) 0%,rgba(10,12,13,.86) 38%,rgba(10,12,13,.42) 74%,rgba(10,12,13,.58) 100%),
             linear-gradient(0deg,rgba(10,12,13,.92) 0%,transparent 42%); }
.hero__in{ position:relative; padding-block:clamp(60px,9vw,132px) clamp(34px,4.4vw,58px); }
.hero h1{
  font-family:var(--ff-d); font-size:clamp(31px,4.7vw,63px); line-height:1.1; letter-spacing:-.016em;
  margin-bottom:26px; max-width:17ch; text-wrap:balance;
}
.hero__lead{ color:var(--fg-2); font-size:clamp(15.5px,1.2vw,18px); max-width:56ch; margin-bottom:30px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }

.hero__in > *{ animation:heroRise .75s var(--ease) backwards; }
.hero__in .eyebrow{ animation-delay:.10s; }
.hero__in h1{ animation-delay:.20s; }
.hero__in .hero__lead{ animation-delay:.34s; }
.hero__in .hero__cta{ animation-delay:.44s; }
.facts{ animation:heroRise .75s var(--ease) .56s backwards; }

.btn{ display:inline-flex; align-items:center; justify-content:center; padding:15px 28px; font-size:15px;
  border:1px solid transparent; cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.btn--go{ background:var(--green); color:#fff; }
.btn--go:hover{ background:#fff; color:var(--ink); }
.btn--line{ border-color:var(--line-2); color:#fff; backdrop-filter:blur(4px); }
.btn--line:hover{ background:rgba(255,255,255,.10); border-color:#fff; }
.btn--full{ width:100%; margin-top:6px; }

.facts{ position:relative; display:grid; grid-template-columns:repeat(4,1fr);
  margin:0; border-top:1px solid var(--line); }
.facts > div{ padding:22px 18px 26px; border-left:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; text-align:center; }
.facts > div:first-child{ border-left:0; }
.facts dt{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); margin-bottom:12px; }
.facts dd{ margin:auto 0 0; font-family:var(--ff-d); font-size:clamp(22px,2.4vw,34px); line-height:1.15; }
.facts dd.mono{ font-family:var(--ff-m); font-size:12.5px; letter-spacing:.05em; color:var(--fg-2); line-height:1.7; padding-bottom:.25em; }

/* ── ticker ──────────────────────────────────────────────── */
.ticker{ overflow:hidden; background:var(--ink-2); border-block:1px solid var(--line); padding-block:13px; }
.ticker__t{ display:flex; gap:24px; width:max-content; animation:tick 52s linear infinite; }
.ticker__t span{ font-family:var(--ff-m); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); white-space:nowrap; }
.ticker__t .d{ color:var(--green); }
@keyframes tick{ to{ transform:translateX(-50%); } }
.ticker:hover .ticker__t{ animation-play-state:paused; }

/* ── chips ───────────────────────────────────────────────── */
.chips{ display:flex; gap:8px; overflow-x:auto; padding-block:20px; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chips a{ flex:0 0 auto; font-size:13px; color:var(--fg-2); border:1px solid var(--line); padding:9px 16px; white-space:nowrap; transition:border-color .25s var(--ease), color .25s var(--ease); }
.chips a:hover{ border-color:var(--green); color:var(--green-lt); }

/* ── sections ────────────────────────────────────────────── */
.sec{ padding-block:clamp(56px,6.8vw,104px); }
.sec--alt{ background:var(--ink-2); }
.sec--paper{ background:var(--paper); color:var(--on-paper); }

.sh{ max-width:62ch; margin-bottom:clamp(32px,3.8vw,52px); }
.sh h2,.about__txt h2,.geo__txt h2{
  font-family:var(--ff-d); font-size:clamp(26px,3.4vw,46px); line-height:1.13; letter-spacing:-.014em;
  margin-bottom:16px; text-wrap:balance;
}
.sh p{ color:var(--fg-2); }
.sec--paper .eyebrow{ color:var(--green-dk); }
.sec--paper .sh p{ color:var(--on-paper-2); }

/* ── about ───────────────────────────────────────────────── */
.about{ display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr); gap:clamp(28px,4.2vw,68px); align-items:start; }
.about__txt h2{ max-width:20ch; }
.about__txt p{ color:var(--fg-2); margin-bottom:16px; max-width:62ch; }
.about__sub{ font-family:var(--ff-m); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); margin:32px 0 4px; }
.who{ list-style:none; margin:0; padding:0; columns:2; column-gap:36px; }
.who li{ padding:12px 0; border-bottom:1px solid var(--line); font-size:15px; color:var(--fg-2); break-inside:avoid; }
.about__photo{ aspect-ratio:9/11; }
.about__photo figcaption{ position:absolute; left:0; right:0; bottom:0; padding:38px 18px 16px; font-size:12.5px; line-height:1.55;
  color:var(--fg-2); background:linear-gradient(transparent,rgba(10,12,13,.94)); }

/* ── division cards ──────────────────────────────────────── */
.cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.card{ background:var(--ink); display:flex; flex-direction:column; transition:background .35s var(--ease); }
.card:hover{ background:var(--ink-3); }
.card__ph{ aspect-ratio:4/3; }
.card__ph img{ opacity:.88; transition:transform .7s var(--ease), opacity .4s var(--ease); }
.card:hover .card__ph img{ transform:scale(1.04); opacity:1; }
.card__b{ padding:24px 24px 26px; display:flex; flex-direction:column; gap:12px; flex:1; }
.card__b h3{ font-family:var(--ff-d); font-size:21px; line-height:1.22; letter-spacing:-.008em; }
.card__b p{ color:var(--fg-2); font-size:14.5px; line-height:1.6; }
.tags{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:auto 0 0; padding:14px 0 0; border-top:1px solid var(--line); }
.tags li{ font-family:var(--ff-m); font-size:10.5px; letter-spacing:.04em; color:var(--fg-3); border:1px solid var(--line); padding:5px 9px; }
.tags li.mono{ color:var(--green-lt); border-color:rgba(27,166,109,.35); }

/* ── incoterms sheet (paper) ─────────────────────────────── */
.chart{ margin:0; --c1:58px; --c2:186px; --c4:196px; --cg:12px; }
.chart__axis{ display:grid; grid-template-columns:repeat(6,1fr);
  margin-left:calc(var(--c1) + var(--cg) + var(--c2) + var(--cg));
  margin-right:calc(var(--c4) + var(--cg)); border-bottom:1px solid var(--line-ink); padding-bottom:7px; margin-bottom:12px; }
.chart__axis span{ font-family:var(--ff-m); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--on-paper-2); padding-left:7px; border-left:1px solid var(--line-ink); }
.chart__axis span:first-child{ border-left:0; padding-left:0; }

.chart__rows{ list-style:none; margin:0; padding:0; }
.row{ display:grid; grid-template-columns:var(--c1) var(--c2) minmax(120px,1fr) var(--c4); align-items:center; gap:0 var(--cg); padding-block:10px; border-bottom:1px solid var(--line-ink); }
.row:hover{ background:var(--paper-2); }
.row__k{ font-size:13px; font-weight:500; letter-spacing:.05em; color:var(--on-paper); }
.row__n{ font-size:13.5px; color:var(--on-paper-2); }
.row__t{ position:relative; height:14px; background:var(--track-ink); }
.row__f{ position:absolute; left:0; top:0; bottom:0; width:var(--w); background:var(--green); border-radius:0 3px 3px 0; }
.row__r{ position:absolute; top:-4px; bottom:-4px; left:var(--x); width:3px; background:var(--red); transform:translateX(-1.5px); box-shadow:0 0 0 2px var(--paper); }
.row__v{ font-size:10.5px; letter-spacing:.04em; color:var(--on-paper-2); text-align:right; }

.chart__cap{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; padding-top:16px; }
.key{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--on-paper-2); }
.key__f{ width:22px; height:10px; background:var(--green); }
.key__r{ width:3px; height:14px; background:var(--red); }
.chart__note{ font-size:11.5px; color:var(--on-paper-2); line-height:1.6; flex:1; min-width:250px; }

/* ── distance chart (dark) ───────────────────────────────── */
.chart--dist{ margin:24px 0 16px; }
.dist{ list-style:none; margin:0 0 12px; padding:0; }
.dist li{ display:grid; grid-template-columns:136px minmax(60px,1fr) 84px; align-items:center; gap:14px; padding-block:8px; }
.dist__n{ font-size:14.5px; color:var(--fg-2); }
.dist__t{ height:12px; background:var(--track); position:relative; }
.dist__t i{ position:absolute; inset:0 auto 0 0; width:var(--w); background:var(--green); border-radius:0 3px 3px 0; }
.dist__v{ font-size:11.5px; color:var(--fg); text-align:right; }
.chart--dist .chart__note{ color:var(--fg-3); }

/* ── steps ───────────────────────────────────────────────── */
.steps{ list-style:none; margin:0 0 clamp(42px,5.2vw,74px); padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.steps li{ background:var(--ink); padding:26px 26px 30px; position:relative; transition:background .3s var(--ease); }
.steps li:hover{ background:var(--ink-3); }
.steps__n{ display:inline-block; font-size:11px; letter-spacing:.1em; color:var(--green-lt); border:1px solid rgba(27,166,109,.4); width:27px; height:27px; line-height:25px; text-align:center; margin-bottom:18px; }
.steps h3{ font-family:var(--ff-d); font-size:20px; line-height:1.25; margin-bottom:10px; }
.steps p{ color:var(--fg-2); font-size:14.5px; line-height:1.58; }

/* ── what we take on ─────────────────────────────────────── */
.take{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(26px,4vw,68px);
  padding-bottom:clamp(40px,4.8vw,66px); margin-bottom:clamp(40px,4.8vw,66px); border-bottom:1px solid var(--line); }
.take__h,.cont__h{ font-family:var(--ff-m); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); margin-bottom:18px; }
.take__list{ list-style:none; margin:0; padding:0; columns:2; column-gap:30px; }
.take__list li{ position:relative; padding:9px 0 9px 25px; font-size:14.5px; color:var(--fg-2); break-inside:avoid; }
.take__list li::before{ content:""; position:absolute; left:0; top:16px; width:9px; height:5px;
  border-left:1px solid var(--green); border-bottom:1px solid var(--green); transform:rotate(-45deg); }
.take__note{ margin-top:18px; font-size:12.5px; color:var(--fg-3); line-height:1.7; max-width:56ch; }
.crit{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px; }
.crit li{ font-family:var(--ff-m); font-size:11px; letter-spacing:.04em; color:var(--fg-2); border:1px solid var(--line); padding:7px 12px; }

/* ── containers ──────────────────────────────────────────── */
.cont__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.6vw,38px); }
.cont__i{ border-top:1px solid var(--line); padding-top:20px; }
.cbox{ display:block; height:42px; width:auto; color:var(--fg-2); margin-bottom:16px; overflow:visible; }
.cont__i b{ display:block; font-family:var(--ff-m); font-size:14px; letter-spacing:.07em; color:var(--fg); margin-bottom:12px; }
.cont__i dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:5px 12px; }
.cont__i dt{ font-size:12px; color:var(--fg-3); }
.cont__i dd{ margin:0; font-size:12px; color:var(--fg-2); text-align:right; }
.cont__note{ margin-top:20px; font-size:12px; color:var(--fg-3); max-width:72ch; line-height:1.65; }

/* ── geography ───────────────────────────────────────────── */
.geo{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(28px,4.2vw,64px); align-items:start; }
.geo__txt h2{ max-width:18ch; }
.geo__txt > p{ color:var(--fg-2); max-width:60ch; }
.geo__txt > p.geo__also{ font-size:14.5px; color:var(--fg-2); border-top:1px solid var(--line); padding-top:18px; max-width:64ch; }
.geo__photo{ aspect-ratio:3/4; }

/* ── why ─────────────────────────────────────────────────── */
.why{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,44px) clamp(26px,3.4vw,56px); }
.why article{ border-top:1px solid var(--line-2); padding-top:18px; }
.why h3{ font-family:var(--ff-d); font-size:19px; line-height:1.27; margin-bottom:10px; }
.why p{ color:var(--fg-2); font-size:14.5px; line-height:1.58; }
.why article:last-child{ grid-column:1 / -1; border-top-color:var(--green); }
.why article:last-child p{ max-width:72ch; }

/* ── mission band ────────────────────────────────────────── */
.band{ position:relative; background:var(--ink); }
.band__ph{ position:absolute; inset:0; background:var(--ink); }
.band__ph img{ opacity:.40; }
.band__ph.ph--none{ background:repeating-linear-gradient(112deg,rgba(255,255,255,.05) 0 14px,transparent 14px 38px),var(--ink); }
.band__ph::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(94deg,rgba(10,12,13,.95) 0%,rgba(10,12,13,.74) 50%,rgba(10,12,13,.40) 100%); }
.band__in{ position:relative; padding-block:clamp(60px,8vw,124px); }
.band__q{ font-family:var(--ff-d); font-size:clamp(21px,2.9vw,38px); line-height:1.26; letter-spacing:-.012em; max-width:23ch; text-wrap:balance; }
.band__a{ margin-top:22px; font-family:var(--ff-m); font-size:11px; letter-spacing:.17em; color:var(--green-lt); }
.band__a::before{ content:""; display:inline-block; width:22px; height:1px; background:var(--green); vertical-align:middle; margin-right:13px; transform:translateY(-1px); }

/* ── contact ─────────────────────────────────────────────── */
.ct{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr); gap:clamp(28px,4vw,64px); align-items:start; }

.ct__main{ border-top:1px solid var(--line); }
.ct__row{
  display:grid; grid-template-columns:96px minmax(0,1fr) 22px; align-items:center; gap:clamp(14px,2vw,28px);
  padding:clamp(20px,2.4vw,28px) 0; border-bottom:1px solid var(--line);
  transition:padding-left .4s var(--ease), color .25s var(--ease);
}
.ct__row:hover{ padding-left:12px; }
.ct__k{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); transition:color .25s var(--ease); }
.ct__row:hover .ct__k{ color:var(--green-lt); }
.ct__v{ font-family:var(--ff-d); font-size:clamp(19px,2.3vw,31px); line-height:1.2; letter-spacing:-.012em; word-break:break-word; }
.ct__v--sm{ font-family:var(--ff); font-weight:300; font-size:clamp(15px,1.25vw,17px); line-height:1.5; letter-spacing:0; }
.ct__go{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.3; color:var(--fg-3); justify-self:end;
  transition:color .25s var(--ease), transform .35s var(--ease); }
.ct__row:hover .ct__go{ color:var(--green-lt); transform:translateX(4px); }
.ct__row--static{ cursor:default; }
.ct__row--static:hover{ padding-left:0; }
.ct__row--static:hover .ct__k{ color:var(--fg-3); }
.ct__row--static .ct__v{ color:var(--fg-2); letter-spacing:.04em; }

.ct__ask{ background:var(--ink); border:1px solid var(--line); padding:clamp(24px,2.6vw,32px); }
.ct__ask h3{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-lt); margin-bottom:20px; }
.ct__ask ol{ margin:0 0 26px; padding:0; list-style:none; counter-reset:ask; }
.ct__ask li{ counter-increment:ask; position:relative; padding:10px 0 10px 28px; font-size:14px; color:var(--fg-2);
  border-top:1px solid var(--line); line-height:1.5; }
.ct__ask li:first-child{ border-top:0; }
.ct__ask li::before{ content:counter(ask); position:absolute; left:0; top:11px;
  font-family:var(--ff-m); font-size:10px; color:var(--fg-3); }
.ct__note{ margin-top:14px; font-size:11.5px; color:var(--fg-3); line-height:1.6; }

/* ── footer ──────────────────────────────────────────────── */
.foot{ background:var(--ink-2); color:var(--fg-2); border-top:1px solid var(--line); }
.foot__in{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.8fr); gap:clamp(26px,3.6vw,56px); padding-block:clamp(42px,5vw,70px); }
.foot__c img{ width:206px; margin-bottom:18px; }
.foot__c p{ font-size:13px; line-height:1.7; color:var(--fg-3); max-width:38ch; }
.foot__nav{ display:flex; flex-direction:column; gap:10px; }
.foot__nav a{ font-size:14.5px; width:fit-content; }
.foot__nav a:hover{ color:var(--green-lt); }
.foot__c2 p{ font-size:13px; line-height:1.9; color:var(--fg-3); }
.foot__c2 a:hover{ color:var(--fg); }
.foot__rule{ height:4px; background:linear-gradient(90deg,var(--red) 0 33.33%,var(--green) 33.33% 66.66%,var(--ink-4) 66.66% 100%); }
.foot__bot{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-block:18px calc(18px + env(safe-area-inset-bottom,0px));
  font-family:var(--ff-m); font-size:10.5px; letter-spacing:.09em; color:var(--fg-3); }


/* ── responsive ──────────────────────────────────────────── */
@media (min-width:621px) and (max-width:1080px){
  /* 9 cards in 2 columns leave one empty cell that would paint the grid hairline colour */
  .cards::after{ content:""; background:var(--ink); }
}

@media (max-width:1080px){
  .cards,.why,.steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .about,.geo,.ct{ grid-template-columns:1fr; }
  .about__photo,.geo__photo{ aspect-ratio:16/9; }
  .foot__in{ grid-template-columns:1fr 1fr; }
  .chart{ --c1:54px; --c2:152px; --c4:164px; }
}

@media (max-width:860px){
  .burger{ display:block; }
  .head__in{ position:relative; }
  .nav{ position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink); border-bottom:1px solid var(--line); padding:4px var(--gut) 22px;
    box-shadow:0 18px 36px rgba(0,0,0,.5); display:none; }
  .nav.is-open{ display:flex; }
  .nav a{ padding-block:15px; border-bottom:1px solid var(--line); font-size:16px; }
  .nav__cta{ margin-top:16px; text-align:center; }
  .head__loc{ display:none; }
  .hero__ph::after{ background:linear-gradient(0deg,rgba(10,12,13,.96) 12%,rgba(10,12,13,.70) 62%,rgba(10,12,13,.82) 100%); }
  .hero__in{ padding-block:clamp(70px,16vw,120px) 34px; }
  .facts{ grid-template-columns:1fr 1fr; }
  .facts > div{ padding:18px 14px 20px; }
  .facts > div:nth-child(3){ border-left:0; }
  .who,.take__list{ columns:1; }
  .chart__axis{ display:none; }
  .row{ grid-template-columns:50px 1fr; gap:4px 10px; padding-block:13px; }
  .row__t,.row__v{ grid-column:1 / -1; }
  .row__v{ text-align:left; }
  .dist li{ grid-template-columns:112px 1fr 74px; gap:10px; }
  .cont__grid,.take{ grid-template-columns:1fr; }
}

@media (max-width:620px){
  .cards,.why,.steps{ grid-template-columns:1fr; }
  .foot__in{ grid-template-columns:1fr; }
  .facts{ grid-template-columns:1fr; }
  .head__bar-in{ gap:12px; min-height:34px; font-size:11px; }
}

@media (prefers-reduced-motion:reduce){
  .ticker__t{ animation:none; }
  .hero__in > *,.facts,.hero__ph img{ animation:none; }
  .chart.will-draw .row__f,.chart.will-draw .dist__t i{ width:var(--w); }
  .chart.will-draw .row__r{ opacity:1; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

@media print{
  .head,.chips,.toast,.nav,.ticker{ display:none !important; }
  body,.sec,.sec--alt,.band,.foot{ background:#fff !important; color:#000 !important; }
}