:root{
  --navy:#003767; --navy-d:#002744; --blue:#007BC0; --sky:#D1EDFE; --sky-2:#BFE2F7;
  --page:#FFFFFF; --surface:#FFFFFF; --band:#F0EADF;
  --ink:#333333; --ink-2:#55616B; --ink-3:#6B7681;   /* 4.63:1 on white; was 3.77:1 */
  /* The brand blue is fine as a fill and in large type, but as small text on the cream
     band it came to 3.82:1. This is the same blue darkened for that job. */
  --blue-t:#0069A6;
  --line:#DFE5EA; --line-2:#C9D3DB;
  --shadow:0 1px 2px rgba(0,40,72,.06),0 10px 30px rgba(0,40,72,.09);
  --serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  --sans:Rubik,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --wrap:1200px; --gut:clamp(1.1rem,4vw,2.5rem); --lh:1.62;
}
/* Persian sets its own faces, its own leading, and drops the uppercase tracking that
   only makes sense for Latin letters. */
[dir="rtl"]{
  --serif:Vazirmatn,"Noto Naskh Arabic",Tahoma,sans-serif;
  --sans:Vazirmatn,"Noto Naskh Arabic",Tahoma,sans-serif;
  --lh:1.9;
}
[dir="rtl"] .kicker,[dir="rtl"] .nav a,[dir="rtl"] .btn,[dir="rtl"] .stat-l,
[dir="rtl"] .mark-t,[dir="rtl"] .mark-s,[dir="rtl"] .fact,[dir="rtl"] .ed-l,
[dir="rtl"] .card-w,[dir="rtl"] .ex-where,[dir="rtl"] .feat a,[dir="rtl"] .coin-hint,
[dir="rtl"] .photo-card figcaption{text-transform:none;letter-spacing:0}
[dir="rtl"] .h2,[dir="rtl"] .hero-txt h1{letter-spacing:0}

*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--serif);
  font-size:17px;line-height:var(--lh);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--blue)}
h1,h2,h3,h4{font-family:var(--serif);margin:0;line-height:1.2;text-wrap:balance;color:var(--navy)}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{line-height:1.45}
p{margin:0}
.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
section{padding:clamp(2.6rem,6vw,4.6rem) 0}
.kicker{font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue-t);margin:0 0 .9rem}
.h2{font-size:clamp(1.7rem,3.8vw,2.5rem);font-weight:600}
/* A heading asked to hold one line. The ordinary clamp bottoms out at 1.7rem, which
   on a phone is wider than the screen, so this one keeps scaling instead of wrapping.
   Both languages need the same width here, so one rule serves them. */
.h2.fit{font-size:clamp(1rem,5.6vw,2.5rem)}
.lede{font-family:var(--sans);font-weight:600;color:var(--blue);
  font-size:clamp(1rem,2vw,1.1rem);margin-top:.85rem;max-width:46ch}
/* Body text runs the width of whatever holds it. The 62ch reading measure that used
   to sit here stopped every paragraph short of its own container and left a gap down
   one side, in a card, in a column and in a full width band alike. */
.body-copy{color:var(--ink-2);margin-top:1.05rem}
.body-copy+.body-copy{margin-top:.85rem}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
/* On the navy header the blue ring is nearly invisible, so it goes white there. */
.hdr :focus-visible,footer :focus-visible{outline-color:#fff}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}

.hdr{position:sticky;top:0;z-index:30;background:var(--navy);color:#fff}
.hdr-in{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto;display:flex;
  align-items:center;justify-content:center;gap:1.5rem;padding:.7rem 0;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff}
.mark .mk{flex:none;color:#fff}
.mark-t{font-family:var(--sans);font-weight:500;font-size:17px;letter-spacing:.01em;
  line-height:1;white-space:nowrap}
[dir="rtl"] .mark-t{font-size:18px;letter-spacing:0}
/* Persian sets smaller than Latin at the same size, so its menu takes a size of its own.
   The English menu is left where it was: at .82rem its eight items plus the button no
   longer fit beside the wordmark at 1200px and the header wrapped to two rows.
   The Persian menu also sits next to the logo on the right, with a rule between. */
[dir="rtl"] .nav a{font-size:.95rem}
[dir="rtl"] .nav{border-inline-start:1px solid rgba(255,255,255,.28);padding-inline-start:1.4rem}
/* the rule between logo and menu would only be clutter once they stack */
@media (max-width:820px){[dir="rtl"] .nav{border-inline-start:0;padding-inline-start:0}}
@media (max-width:520px){.mark-t{font-size:15px}.mark{gap:10px}}
.nav{display:flex;align-items:center;gap:clamp(.6rem,1.6vw,1.35rem);flex-wrap:wrap}
.nav a{font-family:var(--sans);font-weight:500;font-size:.73rem;letter-spacing:.11em;
  text-transform:uppercase;color:#fff;text-decoration:none;padding:.32rem 0;
  border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--sky-2)}
.nav a[aria-current="page"]{border-bottom-color:#fff;font-weight:600}
.nav a.cta{background:var(--blue);border-bottom:0;padding:.5rem .95rem;border-radius:3px}
.nav a.cta:hover{background:#0b8ad4}
.nav a.lang{border:1px solid rgba(255,255,255,.45);border-radius:3px;padding:.36rem .7rem;
  letter-spacing:.06em}
.nav a.lang:hover{background:rgba(255,255,255,.14);border-color:#fff}
/* the switcher is a flag, so it wears no button: no border, no box, just the flag.
   A class rather than :has(), so older browsers get it too. */
.nav a.lang-flag{border:0;border-radius:0;padding:0;line-height:0}
.nav a.lang-flag:hover{background:none}
.nav a.lang-flag .lang-f{transition:transform .18s ease}
.nav a.lang-flag:hover .lang-f{transform:scale(1.09)}
.nav a.lang-flag:focus-visible{outline:2px solid #fff;outline-offset:3px}
.nav a.lang .lang-f{width:26px;height:19px;display:block;border-radius:2px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.28)}
/* every link is shown at every width; the menu simply wraps and stays centred */
@media (max-width:700px){.nav{justify-content:center;row-gap:.55rem}}

.hero{position:relative;background:var(--navy-d)}
.hero-img{width:100%;height:clamp(300px,48vh,500px);object-fit:cover;object-position:center center;opacity:.85}
.hero.sm .hero-img{height:clamp(190px,26vh,280px)}
.hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(0,39,68,.55),rgba(0,39,68,.34) 45%,rgba(0,39,68,.84))}
.hero-txt{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;
  text-align:center;padding:0 var(--gut)}
.hero-txt h1{color:#fff;font-weight:500;font-size:clamp(1.6rem,4.2vw,3.05rem);
  max-width:22ch;text-shadow:0 2px 18px rgba(0,25,45,.45)}
/* The home page sentence runs to three lines at 22ch. Nothing is cut; it is given the
   room to fall in two instead. On a small phone the type has already hit the floor of
   its clamp and the room runs out, so there it takes a size down rather than a line
   more. */
.hero-txt h1.wide{max-width:28ch}
/* The home page sentence is long enough that width alone does not save it on a phone,
   where the type has already reached the floor of its clamp. It takes a size down there
   rather than a line more. Only that one heading asks for this. */
@media (max-width:412px){.hero-txt h1.wide.steps{font-size:1.3rem}}
@media (max-width:340px){.hero-txt h1.wide.steps{font-size:1.12rem}}
/* A small hero on the narrowest phones: the Persian photographs line is a few pixels
   over even at the widened measure, so it takes one size down there too. */
@media (max-width:340px){.hero.sm .hero-txt h1.wide{font-size:1.32rem}}
.hero.sm .hero-txt h1{font-size:clamp(1.5rem,3.6vw,2.5rem)}
.hero-sub{color:var(--sky-2);font-family:var(--sans);font-size:.95rem;margin-top:.9rem;max-width:52ch}
.hero-sub.one{max-width:68ch}
.hero-cap{position:absolute;inset-inline-end:.7rem;bottom:.45rem;font-family:var(--sans);
  font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
[dir="rtl"] .hero-cap{text-transform:none;letter-spacing:0}
.btns{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:1.7rem}
.btns.left{justify-content:flex-start}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:600;
  font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:.78rem 1.45rem;border-radius:3px;border:2px solid transparent;cursor:pointer;transition:.16s}
.btn-p{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-p:hover{background:#0b8ad4;border-color:#0b8ad4}
.btn-g{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.btn-g:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-o{background:transparent;color:var(--blue-t);border-color:var(--blue-t)}
.btn-o:hover{background:var(--blue);color:#fff}
.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.btn[aria-disabled="true"]:hover{background:transparent;color:var(--blue)}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,5vw,4rem);align-items:center}
/* A lede carries its own 46ch measure, which is right in a full width section. Every one
   on this site is in a split, where the column is already the measure, so the cap only
   stopped the text short of its own column and left a gap down the side. */
.split .lede{max-width:none}
@media (max-width:820px){.split{grid-template-columns:1fr}}
/* A split whose heading belongs to the whole band rather than to its first column: the
   kicker and the heading take both tracks, the text and the picture share the row below.
   The two below then align to their tops, since the heading no longer balances them. */
.split.lead{align-items:start;row-gap:0}
.split.lead > .kicker,.split.lead > .h2{grid-column:1/-1}
.split.lead > .h2{margin-bottom:clamp(1.2rem,2.5vw,1.8rem)}
.photo-card{border-radius:8px;overflow:hidden;box-shadow:var(--shadow);background:var(--surface);margin:0}
.photo-card img{width:100%}
.lb-more{display:none}
.pr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  gap:1.5rem 1.9rem;margin-top:2.1rem}
.pr-card{border-top:2px solid var(--line);padding-top:.85rem}
.pr-o{font-family:var(--sans);font-weight:600;font-size:1.02rem}
.pr-lg{display:block;width:auto;object-fit:contain}
.pr-lg.big{height:26px;max-width:150px;margin-bottom:.55rem}
.pr-lg.sm{height:24px;max-width:150px;margin-bottom:.42rem}
.pr-lg.inv{filter:invert(1)}
.pr-w{color:var(--ink-2);font-size:.92rem;margin-top:.35rem;line-height:1.5}
.pr-d{font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-top:.55rem}
.pr-a{display:inline-block;margin-top:.7rem;font-family:var(--sans);font-weight:600;
  font-size:.84rem;color:var(--blue);text-decoration:none}
.pr-a:hover{text-decoration:underline}
.pr-a.arch{color:var(--ink-3);font-weight:500}
.pr-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1.9rem 2.2rem;margin-top:2.1rem;align-items:start}
.pr-c h3{font-family:var(--sans);font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--blue);margin:0 0 .8rem}
.pr-c ul{margin:0;padding:0;list-style:none;display:grid;gap:.75rem}
.pr-c li{font-size:.93rem;line-height:1.4;color:var(--ink)}
.pr-c b{font-weight:600}
.pr-c span{display:block;font-family:var(--sans);font-size:.73rem;letter-spacing:.06em;
  color:var(--ink-3);margin-top:.15rem}
/* One country carries most of the record. Left in a single track it ran three times the
   height of the section, so it takes two tracks and sets its list in two columns. An
   entry is kept whole rather than split across the break. */
.pr-c.wide{grid-column:span 2}
/* display:block matters: the list is a grid everywhere else, and multi-column is ignored
   on a grid container, so the columns silently did nothing until this was added. The gap
   goes with it, hence the margin. Column flow rather than grid rows, so the entries still
   read straight down the first column before starting the second. */
.pr-c.wide ul{display:block;columns:2;column-gap:2.2rem}
.pr-c.wide li{break-inside:avoid;margin-bottom:.75rem}
@media (max-width:760px){.pr-c.wide{grid-column:auto}
  .pr-c.wide ul{display:grid;columns:auto}.pr-c.wide li{margin-bottom:0}}
.pr-stills{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:1rem;margin-top:1.9rem}
.pr-stills a{display:block;border-radius:6px;overflow:hidden;box-shadow:var(--shadow);
  background:var(--surface)}
.pr-stills img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
[dir="rtl"] .pr-d,[dir="rtl"] .pr-c h3,[dir="rtl"] .pr-c span{text-transform:none;letter-spacing:0}
.diploma{margin-top:1.6rem;max-width:320px}
.photo-card figcaption{font-family:var(--sans);font-size:.7rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);padding:.72rem .9rem}

.band{background:var(--band)}
.stats{background:var(--navy);color:#fff}
.stats .kicker{color:var(--sky-2)} .stats h2{color:#fff}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:1.4rem;margin-top:2rem}
.stat{text-align:center;padding:.9rem .4rem;border-inline-start:1px solid rgba(255,255,255,.16)}
.stat-i{width:36px;height:36px;color:var(--sky-2);opacity:.85;margin-bottom:.7rem}
.stat:first-child{border-inline-start:0}
@media (max-width:700px){.stat{border-inline-start:0;border-top:1px solid rgba(255,255,255,.16)}
  .stat:first-child{border-top:0}}
.stat-n{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,4.6vw,2.9rem);color:#fff;
  line-height:1.1;font-variant-numeric:tabular-nums}
.stat-l{font-family:var(--sans);font-size:.71rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sky-2);margin-top:.55rem}

.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(1.4rem,3vw,2.3rem);margin-top:2.3rem}
.feat h3{font-size:1.2rem;font-weight:600}
.feat p{color:var(--ink-2);margin-top:.65rem;font-size:.96rem}
.feat a{display:inline-block;margin-top:.85rem;font-family:var(--sans);font-weight:600;
  font-size:.73rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--blue)}
.feat a:hover{text-decoration:underline}
.feat-i{width:42px;height:42px;color:var(--blue);margin-bottom:.85rem}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(1.2rem,2.5vw,1.8rem);margin-top:2.2rem}
.card{background:var(--surface);border-radius:8px;overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;text-decoration:none;color:inherit}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.card-b{padding:1.05rem 1.15rem 1.3rem}
.card-w{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue)}
.card h3{font-size:1.06rem;font-weight:500;margin-top:.5rem;line-height:1.45}
.card p{color:var(--ink-2);font-size:.93rem;margin-top:.55rem}

.legs{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));
  border-top:1px solid var(--line);margin-top:2rem}
.leg{display:flex;gap:.7rem;padding:.75rem .3rem;border-bottom:1px solid var(--line);align-items:baseline}
.leg-n{font-family:var(--sans);font-size:.67rem;color:var(--ink-3);min-width:2.2ch;
  font-variant-numeric:tabular-nums}
.leg-c{font-size:.94rem;color:var(--ink-2)}
.leg.home .leg-c{color:var(--blue);font-weight:600}

.coin-card{background:var(--surface);border-radius:8px;box-shadow:var(--shadow);display:grid;
  grid-template-columns:240px minmax(0,1fr);gap:clamp(1.4rem,4vw,2.8rem);
  padding:clamp(1.4rem,3.5vw,2.4rem);margin-top:2rem;align-items:start}
@media (max-width:780px){.coin-card{grid-template-columns:1fr;justify-items:center;text-align:center}}
.coin-side{display:flex;flex-direction:column;align-items:center;gap:1rem}
.coin{width:150px;height:150px;perspective:800px;background:none;border:0;padding:0;cursor:pointer}
.coin-inner{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.3,.9,.3,1)}
.coin-face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;display:grid;
  place-items:center;font-family:var(--serif);font-size:2rem;color:var(--sky);
  background:radial-gradient(circle at 33% 28%,#0a5b96,#003767 72%);
  border:3px solid var(--blue);box-shadow:inset 0 0 0 6px rgba(255,255,255,.07)}
.coin-face.back{transform:rotateY(180deg)}
.coin:hover .coin-face{border-color:var(--sky-2)}
/* a photographed coin brings its own edge, so the drawn one gets out of its way */
.coin-face.pic{background:none;border:0;box-shadow:none;overflow:hidden}
.coin-face.pic img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 4px 10px rgba(0,40,72,.28))}
.coin:hover .coin-face.pic{border-color:transparent}
.coin-hint{font-family:var(--sans);font-size:.69rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.ex-where{font-family:var(--sans);font-weight:600;font-size:.73rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--blue);margin-bottom:.85rem;text-align:start}
.ex-body{font-size:clamp(1rem,1.9vw,1.13rem);color:var(--ink);max-width:62ch;text-align:start}
.ex-body p+p{margin-top:.85rem}
.ex-from{margin-top:1.1rem;font-family:var(--sans);font-size:.71rem;color:var(--ink-3);text-align:start}
.swap{animation:fu .5s ease}
@keyframes fu{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.book{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(1.4rem,4vw,2.8rem);
  background:var(--surface);border-radius:8px;box-shadow:var(--shadow);
  padding:clamp(1.3rem,3.2vw,2.2rem);align-items:start}
.book+.book{margin-top:clamp(1.4rem,3.5vw,2.2rem)}
@media (max-width:780px){.book{grid-template-columns:1fr}}
.book-cover{border-radius:5px;box-shadow:0 4px 18px rgba(0,40,72,.2);width:100%;max-width:240px}
.book .book-t{font-size:clamp(1.35rem,2.9vw,1.9rem);font-weight:600}
.book .orig{font-family:var(--sans);font-size:.71rem;color:var(--ink-3);margin-top:.45rem}
.facts{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem}
.fact{font-family:var(--sans);font-size:.67rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--sky);color:var(--navy);padding:.3rem .62rem;border-radius:3px}
.eds{margin-top:1.4rem;border-top:1px solid var(--line)}
.ed{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
.ed-l{font-family:var(--sans);font-weight:600;font-size:.73rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink)}
.ed-s{font-family:var(--sans);font-size:.83rem;color:var(--ink-3);flex:1;min-width:8ch}
.ed-p{font-family:var(--sans);font-weight:600;font-size:.94rem;color:var(--ink);font-variant-numeric:tabular-nums}
.ed .btn{padding:.48rem 1rem;font-size:.67rem}

.gal-h{font-size:1.1rem;font-weight:600;margin:2.4rem 0 0;padding-bottom:.5rem;
  border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:.6rem}
.gal-h span{font-family:var(--sans);font-size:.7rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.gal{columns:3 235px;column-gap:16px;margin-top:1.1rem}
.shot{break-inside:avoid;margin:0 0 16px;border:0;padding:0;background:var(--surface);display:block;
  width:100%;cursor:zoom-in;border-radius:6px;overflow:hidden;box-shadow:var(--shadow)}
.shot img{width:100%;transition:transform .35s ease}
.shot:hover img{transform:scale(1.03)}
.shot figcaption{font-family:var(--sans);font-size:.67rem;color:var(--ink-3);padding:.55rem .72rem;text-align:start}
.lb{position:fixed;inset:0;background:rgba(0,25,45,.95);display:none;place-items:center;z-index:60;padding:4vmin}
.lb[open]{display:grid}
.lb figure{margin:0;max-width:min(1100px,92vw);text-align:center}
.lb img{max-height:80vh;width:auto;margin-inline:auto;border-radius:4px}
.lb figcaption{color:var(--sky-2);font-family:var(--sans);font-size:.76rem;margin-top:1rem}
.lb-x{position:absolute;top:2vmin;inset-inline-end:2vmin;background:none;
  border:2px solid rgba(255,255,255,.4);color:#fff;width:44px;height:44px;border-radius:50%;
  cursor:pointer;font-size:1.1rem}
.lb-n{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;
  font-size:2.4rem;cursor:pointer;padding:1rem;opacity:.65}
.lb-n:hover{opacity:1}
.lb-p{inset-inline-start:1vmin}.lb-nx{inset-inline-end:1vmin}
.lb-strip{display:flex;gap:6px;margin-top:.9rem;padding:3px 3px 7px;overflow-x:auto;
  max-width:100%;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
.lb-strip::-webkit-scrollbar{height:6px}
.lb-strip::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:3px}
.lb-t{flex:none;width:56px;height:40px;padding:0;border:0;border-radius:3px;overflow:hidden;
  background:none;cursor:pointer;opacity:.45;transition:opacity .18s ease,box-shadow .18s ease}
.lb-t img{width:100%;height:100%;object-fit:cover;display:block}
.lb-t:hover{opacity:.8}
.lb-t[aria-current="true"]{opacity:1;box-shadow:0 0 0 2px var(--sky-2)}
[hidden]{display:none!important}

/* ---- the countdown that fronts the site until launch ---- */
.soon{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:2rem 1.2rem;
  background:radial-gradient(ellipse at 50% 30%,#0a4d86 0%,var(--navy) 48%,var(--navy-d) 100%);
  color:#fff;font-family:var(--sans);text-align:center;position:relative;overflow:hidden}
.soon-in{display:grid;justify-items:center;gap:1.1rem;max-width:720px;width:100%;position:relative;z-index:1}
.soon .seal{width:min(190px,44vw);height:auto;color:var(--sky-2);filter:drop-shadow(0 8px 28px rgba(0,0,0,.35));
  animation:soon-breathe 6s ease-in-out infinite}
@keyframes soon-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.soon-mark{display:flex;align-items:center;gap:.8rem;color:#fff}
.soon-mark svg{width:56px;height:37px;display:block;color:var(--sky-2)}
.soon-mark span{font-weight:700;font-size:clamp(1.5rem,4.6vw,2.3rem);letter-spacing:0}
.soon-k{color:var(--sky-2);font-size:.9rem;font-weight:600;opacity:.9}
.soon-line{color:var(--sky);font-size:clamp(1.05rem,2.6vw,1.3rem);margin:0}
.soon-when{color:var(--sky-2);font-size:.95rem;opacity:.85;margin:0}
/* days, hours, minutes, seconds read left to right even on a right to left page, and
   the road runs the same way, so the bicycle sets off at the left and arrives at the right */
.soon-count{direction:ltr;display:grid;grid-template-columns:repeat(4,minmax(64px,1fr));gap:.6rem;width:100%;max-width:520px;margin-top:.6rem}
.soon-count>div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:.85rem .3rem .7rem}
.soon-n{display:block;font-weight:700;font-size:clamp(1.9rem,6.5vw,3rem);line-height:1;color:#fff;
  font-variant-numeric:tabular-nums}
.soon-l{display:block;margin-top:.45rem;font-size:.72rem;color:var(--sky-2);opacity:.9}
.soon-road{direction:ltr;position:relative;width:100%;max-width:520px;height:44px;margin-top:1.2rem}
/* the dashes run right to left under a bicycle travelling left to right, so the road
   moves and the rider looks as though it is being ridden. A gradient rather than a dashed
   border, because a border cannot be animated. */
.soon-road::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.32) 0 14px,transparent 14px 28px);
  background-size:28px 2px;background-repeat:repeat-x;
  animation:soon-dash 1.1s linear infinite}
@keyframes soon-dash{from{background-position:0 0}to{background-position:-28px 0}}
.soon-rider{position:absolute;top:50%;inset-inline-start:0;width:48px;height:32px;margin-top:-16px;
  margin-inline-start:-24px;color:#fff;filter:drop-shadow(0 3px 8px rgba(0,0,0,.4));
  transition:inset-inline-start 1s linear;animation:soon-bob 1.5s ease-in-out infinite}
@keyframes soon-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
.soon-rider svg{width:48px;height:32px;display:block}
.soon-flag{position:absolute;top:50%;inset-inline-end:0;width:14px;height:14px;margin-top:-7px;border-radius:50%;
  background:var(--sky-2);box-shadow:0 0 0 5px rgba(191,226,247,.22)}
.soon-done{font-size:clamp(1.6rem,5vw,2.6rem);font-weight:700;color:#fff}
@media (prefers-reduced-motion:reduce){
  .soon .seal,.soon-rider,.soon-road::before{animation:none}.soon-rider{transition:none}}

.film-wrap{margin-top:2rem;max-width:820px}
.film{display:block;position:relative;width:100%;border:0;padding:0;background:var(--navy-d);
  border-radius:8px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;line-height:0}
.film img{width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.86;transition:.25s}
.film:hover img{opacity:1;transform:scale(1.015)}
.film .play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;
  transition:.2s;pointer-events:none}
.film:hover .play{transform:scale(1.08)}
.film-cta{position:absolute;left:0;right:0;bottom:0;padding:.7rem 1rem;color:#fff;
  font-family:var(--sans);font-weight:600;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.2;text-align:start;
  background:linear-gradient(transparent,rgba(0,25,45,.85))}
[dir="rtl"] .film-cta{letter-spacing:0;text-transform:none}
.film-frame{width:100%;aspect-ratio:16/9;border:0;border-radius:8px;display:block;box-shadow:var(--shadow)}
.film-note{margin-top:.9rem;font-family:var(--sans);font-size:.82rem;color:var(--ink-3)}
.film-note a{color:var(--blue)}
.film-sm{max-width:none}
.ivs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.7rem;margin-top:1.8rem}
.iv-t{font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue);margin-bottom:.7rem}
[dir="rtl"] .iv-t{text-transform:none;letter-spacing:0;font-size:.85rem}
.why .film-sm{box-shadow:0 10px 34px rgba(0,0,0,.3)}
.credits{margin:1.2rem 0 0;padding:0;list-style:none;display:grid;gap:.55rem}
.credits li{font-family:var(--sans);font-size:.95rem;color:var(--ink-2);
  padding-inline-start:1rem;position:relative}
.credits li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--blue)}
.band .credits li{color:var(--ink-2)}
.vid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.6rem;margin-top:2.2rem}
.vid video{width:100%;border-radius:8px;box-shadow:var(--shadow);background:#000}
.vid h3{font-size:1.05rem;font-weight:600;margin-top:.8rem}
.vid p{font-family:var(--sans);font-size:.8rem;color:var(--ink-3);margin-top:.3rem}


/* ---- the route as a passport: stamps along a dashed road ---- */
.road{position:relative;margin-top:2.6rem;padding:1rem 0 2.5rem}
.road::before{content:"";position:absolute;top:0;bottom:0;left:50%;margin-left:-1px;
  border-left:2px dashed var(--line-2)}
.rt-hint{font-family:var(--sans);font-size:.72rem;color:var(--ink-3);text-align:center;margin-bottom:1.2rem}
.stage{position:relative;text-align:center;margin:2.4rem 0 1.2rem;z-index:1}
.stage:first-of-type{margin-top:.4rem}
.stage span{display:inline-block;background:var(--navy);color:#fff;padding:.42rem 1.05rem;
  border-radius:999px;font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;box-shadow:0 0 0 6px var(--page)}
.band .stage span{box-shadow:0 0 0 6px var(--band)}
.srow{display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;margin:.55rem 0}
.srow .dot{width:12px;height:12px;border-radius:50%;background:var(--page);border:2px solid var(--blue);
  margin:0 auto;box-shadow:0 0 0 4px var(--page)}
.band .srow .dot{background:var(--band);box-shadow:0 0 0 4px var(--band)}
.scell{display:flex;flex-direction:column;gap:.5rem;min-width:0;max-width:100%}
.srow.l>.scell{grid-column:1;justify-self:end;align-items:flex-end}
.srow.r>.scell{grid-column:3;justify-self:start;align-items:flex-start}
.srow>.dot{grid-column:2}
.stamp{display:inline-flex;align-items:center;gap:.75rem;background:var(--surface);
  border:2px solid var(--ink-s);outline:1px solid var(--ink-s);outline-offset:3px;border-radius:7px;
  padding:.5rem .85rem .5rem .6rem;box-shadow:var(--shadow);transform:rotate(var(--r,0deg));
  transition:transform .22s ease,box-shadow .22s ease;text-decoration:none;color:inherit;
  --ink-s:var(--navy);max-width:100%}
.stamp.alt{--ink-s:var(--blue)}
.stamp.pin{--ink-s:#B8432C}
.stamp:hover,.stamp:focus-visible{transform:rotate(0deg) scale(1.04);box-shadow:0 14px 34px rgba(0,40,72,.16)}
.stamp img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid var(--ink-s)}
.stamp .no-img{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:2px dashed var(--ink-s);color:var(--ink-s);font-family:var(--sans);font-size:.7rem;
  font-variant-numeric:tabular-nums}
.stamp-t{display:flex;flex-direction:column;min-width:0}
.stamp-n{font-family:var(--sans);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-s);opacity:.85;font-variant-numeric:tabular-nums}
.stamp-c{font-family:var(--sans);font-weight:700;font-size:.92rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-s);line-height:1.25}
.stamp-d{font-family:var(--sans);font-size:.68rem;color:var(--ink-3);margin-top:.15rem;
  display:flex;align-items:center;gap:.32rem}
.road-home{position:absolute;left:50%;margin-left:-15px;width:30px;height:30px;border-radius:50%;
  background:var(--page);border:2px solid var(--blue);color:var(--blue);display:grid;place-items:center;
  z-index:3;box-shadow:0 0 0 5px var(--page)}
.road-home svg{width:15px;height:15px;display:block}
.rh-a{top:-6px} .rh-b{bottom:2px}
.band .road-home{background:var(--band);box-shadow:0 0 0 5px var(--band)}
.stamp-c{display:flex;align-items:center;gap:.4rem}
/* .stamp img sizes the round photograph; the flag beside the name must outrank it */
.stamp img.stamp-f{width:22px;height:16px;flex:none;border:0;border-radius:2px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(0,40,72,.18)}
[dir="rtl"] .stamp-n,[dir="rtl"] .stamp-c,[dir="rtl"] .stage span{text-transform:none;letter-spacing:0}
[dir="rtl"] .stamp{padding:.5rem .6rem .5rem .85rem}
.rider{position:absolute;left:50%;top:0;width:30px;height:46px;margin-left:-15px;z-index:2;
  pointer-events:none;transition:top .12s linear}
.rider svg{width:30px;height:46px;display:block;filter:drop-shadow(0 2px 5px rgba(0,40,72,.3))}
@media (max-width:700px){
  .road::before{left:22px}
  .rider{left:22px}
  .road-home{left:22px}
  .srow{grid-template-columns:44px 1fr}
  .srow>.dot{grid-column:1;margin:0 auto}
  .srow.l>.scell,.srow.r>.scell{grid-column:2;justify-self:start;align-items:flex-start}
  .stage{text-align:left;padding-left:52px}
  [dir="rtl"] .stage{text-align:right;padding-left:0;padding-right:52px}
  .stamp{transform:none}
}
[dir="rtl"] .road::before{left:auto;right:50%;margin-left:0;margin-right:-1px;border-left:0;
  border-right:2px dashed var(--line-2)}
[dir="rtl"] .rider{left:auto;right:50%;margin-left:0;margin-right:-15px}
[dir="rtl"] .road-home{left:auto;right:50%;margin-left:0;margin-right:-15px}
@media (max-width:700px){
  [dir="rtl"] .road::before{right:22px}
  [dir="rtl"] .rider{right:22px}
  [dir="rtl"] .road-home{right:22px}
}

.more{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.1rem;font-family:var(--sans);
  font-weight:600;font-size:.78rem;color:var(--blue);text-decoration:none;border-bottom:1px solid transparent}
.more:hover{border-bottom-color:var(--blue)}
.more::after{content:"92"}
[dir="rtl"] .more::after{content:"90"}
.gl-more{margin-top:2rem;font-family:var(--sans);font-size:.95rem;color:var(--ink-2)}
.why{background:var(--navy);color:#fff}
.why .kicker,.why .lede{color:var(--sky-2)} .why h2{color:#fff}
.why .feat h3{color:#fff;font-size:1.25rem}
.why .feat p{color:var(--sky-2)}
.why .feat>div{border-top:1px solid rgba(255,255,255,.18);padding-top:1.1rem}
.why .btn-g{margin-top:2.2rem}
.contact{margin-top:1.6rem;border-top:1px solid var(--line)}
.crow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.85rem .2rem;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:.15s}
a.crow:hover{background:var(--band);border-radius:5px;padding-inline:.6rem}
.crow .cico{width:26px;height:26px;flex:none;color:var(--ink-3);display:grid;place-items:center}
.crow .cico svg{width:22px;height:22px;display:block}
a.crow:hover .cico{color:var(--blue)}
.crow.wa .cico{color:#25D366}
.crow.tg .cico{color:#26A5E4}
.crow .cl{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);min-width:8ch}
.crow .cv{font-family:var(--sans);font-size:1.02rem;color:var(--blue);word-break:break-word;
  direction:ltr;unicode-bidi:isolate}
a.crow:hover .cv{text-decoration:underline}
.crow .cnote{font-family:var(--sans);font-size:.78rem;color:var(--ink-3);margin-inline-start:auto}
.crow .soon{font-family:var(--sans);font-size:.9rem;color:var(--ink-3)}
[dir="rtl"] .crow .cl{text-transform:none;letter-spacing:0}
.cta{background:var(--navy);color:#fff} .cta h2{color:#fff}
.cta .kicker,.cta .lede{color:var(--sky-2)}
.cta ul{margin:1.3rem 0 0;padding:0;list-style:none;display:grid;gap:.55rem}
.cta li{display:flex;gap:.6rem;align-items:flex-start;color:var(--sky-2);font-size:1rem}
.cta li svg{flex:none;margin-top:.35rem}
footer{background:var(--navy-d);color:var(--sky-2);padding:2.3rem 0}
.foot{display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:space-between;align-items:center;
  font-family:var(--sans);font-size:.81rem}
.seal{width:104px;height:104px;flex:none;color:var(--sky-2);opacity:.92}
@media (max-width:520px){.seal{width:84px;height:84px}}
.foot a{color:#fff;text-decoration:none;margin-inline-end:1rem}
.foot a:hover{text-decoration:underline}