:root{
  --night:#050B1A; --midnight:#0A1428; --horizon:#12233F; --ink:#E9E4D6;
  --muted:#9BA6B8; --gold:#C8A24D; --gold-soft:rgba(200,162,77,.28); --cyan:#7FB2FF;
  --rule:rgba(233,228,214,.10); --card:rgba(255,255,255,.025);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
/* German compounds are long enough to overflow a 390px column; hyphenate them properly. */
html[lang="de"] h1,html[lang="de"] h2,html[lang="de"] h3{hyphens:auto}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:.005em;margin:0}
h1{font-size:clamp(2.4rem,5.2vw,4.1rem);line-height:1.08}
h2{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.15}
h3{font-size:1.22rem;line-height:1.3}
p{margin:0 0 1.05em}
.wrap{width:min(1180px,92vw);margin:0 auto}
.narrow{width:min(820px,92vw);margin:0 auto}
.eyebrow{font-family:var(--sans);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:.8rem;margin-bottom:1.4rem}
.eyebrow::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--gold-soft),transparent)}
.lede{font-size:clamp(1.05rem,1.6vw,1.3rem);color:#CFC9BB;line-height:1.55}
.muted{color:var(--muted)}
.small{font-size:.9rem}
section{padding:clamp(4rem,8vw,7.5rem) 0;position:relative}
.rule{border:0;border-top:1px solid var(--rule);margin:0}
/* header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(5,11,26,.86);backdrop-filter:blur(14px);border-bottom-color:var(--rule)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.95rem 0}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand svg{width:26px;height:26px;flex:none}
.brand .mark-star{transform-origin:center;animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.brand-name{font-family:var(--serif);font-size:1.04rem;letter-spacing:.14em;color:var(--ink);white-space:nowrap}
.brand-name b{color:var(--gold);font-weight:500}
.nav-right{display:flex;align-items:center;gap:1rem}
.nav-lang-row{display:flex;align-items:center}   /* language row: in the header on wide screens, its own line on phones */
.nav-links{display:flex;align-items:center;gap:1.05rem;list-style:none;margin:0;padding:0}
.nav-links a{text-decoration:none;font-size:.78rem;letter-spacing:.05em;color:#C6C0B2;transition:color .2s;white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--gold)}
.btn{display:inline-block;padding:.72rem 1.1rem;border:1px solid var(--gold-soft);color:var(--ink);text-decoration:none;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;transition:.25s;background:transparent;white-space:nowrap}
.btn:hover{background:var(--gold);border-color:var(--gold);color:#0A1428}
.btn-solid{background:var(--gold);border-color:var(--gold);color:#0A1428}
.btn-solid:hover{background:#DCB55C;border-color:#DCB55C}
.nav-toggle{display:none;background:none;border:1px solid var(--rule);color:var(--ink);padding:.5rem .7rem;font-size:.8rem;letter-spacing:.1em}
/* hero */
.hero{min-height:88vh;display:flex;align-items:flex-end;padding:9rem 0 5rem;background-image:linear-gradient(180deg,rgba(5,11,26,.55) 0%,rgba(5,11,26,.35) 45%,rgba(5,11,26,.94) 100%),url("../img/web/hero-north-star-16x9.jpg");background-size:cover;background-position:center 40%}
.hero{position:relative;overflow:hidden;min-height:clamp(560px,54.4vw,88vh)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(5,11,26,.55) 0%,rgba(5,11,26,.35) 45%,rgba(5,11,26,.94) 100%)}
.hero-video{width:100%;height:100%;object-fit:cover;display:block}
/* WebVTT cues inherit the page colour, which on this dark theme rendered the
   subtitles grey. Force white and give them a backing so they hold up against
   the film. The cue box itself is bottom-centred by the browser. */
/* The cue above is painted inside the video element, i.e. below the hero's gradient
   overlay, so on desktop it arrives much dimmer than white. site.js hides the native
   render and paints the active cue here instead — above the overlay (z-index 3). */
/* Click the hero film to watch it on its own; click again (or Esc) to go back.
   The video is never re-parented, so playback is not interrupted. Desktop only,
   gated on a fine pointer in site.js. */
.hero .wrap{position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){.hero-media{display:none}}
.hero-inner{max-width:940px}
.hero h1{margin-bottom:1.5rem}
.hero .lede{max-width:620px;margin-bottom:2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2.2rem}
.hero-foot{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
/* grids & cards */
.grid{display:grid;gap:1.2rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--rule);padding:1.7rem;transition:border-color .3s,transform .3s}
.card:hover{border-color:var(--gold-soft);transform:translateY(-3px)}
.card h3{margin-bottom:.7rem}
.card p:last-child{margin-bottom:0}
.stat{font-family:var(--serif);font-size:2.1rem;color:var(--gold);line-height:1;margin-bottom:.6rem}
.source{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:1rem}
.num{font-family:var(--serif);color:var(--gold);font-size:.95rem;letter-spacing:.1em}
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.figure{margin:0;border:1px solid var(--rule);background:#071026}
.figure img{width:100%}
.figure figcaption{font-size:.78rem;color:var(--muted);padding:.7rem .9rem;border-top:1px solid var(--rule)}
/* cases */
.case{display:grid;grid-template-columns:180px 1fr;gap:2.2rem;padding:2.6rem 0;border-top:1px solid var(--rule)}
.case:first-of-type{border-top:0}
.case h3{margin-bottom:.9rem}
.case .label{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.case ul{margin:.4rem 0 1rem;padding-left:1.1rem;color:#CFC9BB}
.case li{margin-bottom:.35rem}
.case-sub{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:1.5rem 0 .6rem;font-weight:400}
.case ul.case-did{list-style:none;padding-left:0;margin:.2rem 0 1.1rem}
.case ul.case-did li{position:relative;padding-left:1.15rem;margin-bottom:.5rem}
.case ul.case-did li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
.tag{display:inline-block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);border:1px solid rgba(127,178,255,.3);padding:.2rem .55rem;margin-top:.8rem}
/* comparison */
table.cmp{width:100%;border-collapse:collapse;margin-top:1.5rem}
@media (max-width:680px){
table.cmp,table.cmp tbody,table.cmp tr,table.cmp td{display:block;width:100%}
table.cmp thead{display:none}
table.cmp tr{border-top:1px solid var(--rule);padding:1.4rem 0}
table.cmp td{border:0;padding:0}
table.cmp td:first-child{color:var(--gold);font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.75rem}
table.cmp td:nth-child(2){color:var(--muted);margin-bottom:.9rem}
table.cmp td[data-col]::before{content:attr(data-col);display:block;font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem;opacity:.8}
table.cmp td:last-child[data-col]::before{color:var(--gold)}
}
table.cmp th,table.cmp td{border-top:1px solid var(--rule);padding:.95rem .8rem;text-align:left;font-size:.95rem;vertical-align:top}
table.cmp th{font-family:var(--sans);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}
/* Desktop column layout only — the block layout above sets width:100%, and an
   unscoped width:26% here would win the cascade and break the row labels. */
@media (min-width:681px){
table.cmp td:first-child{color:var(--muted);width:26%}
table.cmp td:last-child{color:var(--ink)}
}
/* film */
dialog{border:1px solid var(--gold-soft);background:var(--midnight);color:var(--ink);max-width:520px;padding:2rem}
dialog::backdrop{background:rgba(2,5,12,.82)}
dialog h3{margin-bottom:.8rem}
/* insights */
.essay{padding:2.4rem 0;border-top:1px solid var(--rule)}
.essay:first-of-type{border-top:0}
.essay .meta{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
/* cta */
.cta{border-top:1px solid var(--gold-soft);border-bottom:1px solid var(--gold-soft);text-align:center;padding:clamp(3.5rem,7vw,6rem) 0;background-image:radial-gradient(120% 100% at 50% 0%,rgba(200,162,77,.10),rgba(5,11,26,.86) 62%),url("../img/hero-stars-loop.webp");background-size:auto,cover;background-position:center,center}
.cta h2{max-width:760px;margin:0 auto 1.2rem}
.cta .lede{max-width:600px;margin:0 auto 2rem}
/* footer */
footer{padding:4rem 0 3rem;border-top:1px solid var(--rule);background:#040914}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
footer a{color:#C6C0B2;text-decoration:none}
footer a:hover{color:var(--gold)}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:.5rem;font-size:.9rem}
.disclosure{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--rule);font-size:.78rem;color:#7E8898;max-width:900px}
/* reveal */
.reveal{opacity:1;transform:none}
body.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
body.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){body.js .reveal{opacity:1;transform:none;transition:none}.brand .mark-star{animation:none}}
@media (max-width:960px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .split{gap:2.2rem}
  .case{grid-template-columns:1fr;gap:1rem}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .split{gap:1.4rem}
}
@media (max-width:600px){
  .split{grid-template-columns:1fr;gap:2rem}
  /* phone: text first, image after — regardless of the desktop order */
  .split > div{order:1}
  .split > figure{order:2}
}
/* The one-line header needs ~1165px (brand + seven links + six-label switcher + CTA).
   The Hebrew label "עברית" is five characters where the others are one or two, which added
   ~45px. Below 1180px the CTA leaves the row; below 1024px the links move into the panel. */
@media (max-width:1180px){
  .nav-right .btn{display:none}
}
@media (max-width:1024px){
  .nav-links{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;background:#050B1A;border-bottom:1px solid var(--rule);box-shadow:0 22px 48px rgba(0,0,0,.55);padding:1rem 6vw 1.4rem;display:none;max-height:calc(100vh - 64px);overflow-y:auto}
  .nav-links.open{display:flex}
  .nav-links li{width:100%;padding:.55rem 0;border-bottom:1px solid var(--rule)}
  .nav-links li:last-child{border-bottom:0}
  .nav-toggle{display:block}
}
@media (max-width:680px){
  body{font-size:16px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}


/* module subtitle — brand lines under the 4C headings */
.module-sub{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1.06rem;line-height:1.5;margin:.55rem 0 1.1rem}
:lang(zh) .module-sub,:lang(ja) .module-sub,:lang(ko) .module-sub{font-style:normal;font-size:1rem;letter-spacing:.02em}


/* 5C — the Crossing card spans the row on the home page */
.card-wide{grid-column:1/-1;border-color:rgba(200,162,77,.34)}
.card-wide .tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0 1rem;padding:0;list-style:none}
.card-wide .tags li{font-size:.76rem;letter-spacing:.06em;color:var(--muted);border:1px solid var(--rule);padding:.35rem .65rem}
@media (max-width:680px){
.hero{min-height:auto;display:block;padding:5.4rem 0 3.2rem}
.hero-media{position:relative;inset:auto;width:100%}
.hero-media::after{display:none}
.hero-video{height:auto;aspect-ratio:1280/696;object-fit:cover}
.hero .wrap{padding-top:2rem}
}
/* Phone turned sideways: the viewport is wider than the portrait breakpoint, so a
   landscape phone used to fall through to the desktop rules and the copy covered
   the film. Same stacked layout as portrait. pointer:coarse keeps desktop windows
   (which are also landscape, and often short) on the desktop layout. */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
.hero{min-height:auto;display:block;padding:4.4rem 0 2.4rem}
.hero-media{position:relative;inset:auto;width:100%}
.hero-media::after{display:none}
.hero-video{height:auto;aspect-ratio:1280/696;object-fit:cover;max-height:74vh}
.hero .wrap{padding-top:1.6rem}
.hero-inner{max-width:100%}
}
@media (max-width:700px){.card-wide .tags li{font-size:.72rem}}


/* language switcher — five languages in the header */
.lang-switch{display:flex;align-items:center;gap:.7rem;font-size:.72rem;letter-spacing:.09em;color:var(--muted);white-space:nowrap}
.lang-switch span[aria-current]{color:var(--gold);font-weight:600}
.lang-switch a{color:var(--muted);text-decoration:none;padding-bottom:1px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.lang-switch a:hover{color:var(--ink);border-bottom-color:var(--gold-soft)}
@media (max-width:900px){.lang-switch{gap:.5rem;font-size:.68rem}}


/* ------------------------------------------------------------------
   Phone header (<=680px)
   The header row on a phone only has room for the brand, the language
   switcher and one control. "Start a conversation" moves out of the row
   (the menu still links to Contact) so the menu has room to expand.
   ------------------------------------------------------------------ */
@media (max-width:680px){
  .nav{gap:.7rem}
  /* languages leave the menu: the row drops below the header, right-aligned under the menu button */
  .nav{flex-wrap:wrap;row-gap:.55rem}
  .nav-lang-row{order:9;flex:0 0 100%;justify-content:flex-end}
  .lang-switch{gap:.45rem;font-size:.64rem;flex-wrap:wrap;justify-content:flex-end;row-gap:.3rem}
  .nav-toggle{padding:.45rem .6rem;font-size:.74rem;letter-spacing:.08em}
  .nav-toggle::before{content:'\2630';display:inline-block;margin-right:.4rem;font-size:1.05em;line-height:1;vertical-align:-.06em}
  .nav-toggle[aria-expanded="true"]{border-color:var(--gold);color:var(--gold)}
}

/* RTL (Hebrew): mirror the direction-sensitive rules only. Everything else in this
   file is direction-neutral (flex/grid follow the document direction on their own). */
[dir="rtl"] .case ul{padding-left:0;padding-right:1.1rem}
[dir="rtl"] .case ul.case-did{padding-right:0}
[dir="rtl"] .case ul.case-did li{padding-left:0;padding-right:1.15rem}
[dir="rtl"] .case ul.case-did li::before{left:auto;right:0}
[dir="rtl"] table.cmp th,[dir="rtl"] table.cmp td{text-align:right}
[dir="rtl"] .nav-toggle::before{margin-right:0;margin-left:.4rem}

/* Brand film behind the hero button (2026-09-16). The hero itself is a silent
   starfield loop in the site navy; the film plays in its own layer on demand. */
.btn-film{display:inline-flex;align-items:center;gap:.55rem;position:relative}
.btn-film::after{content:"";position:absolute;inset:-5px;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,var(--gold) 0 5px,transparent 5px 11px),repeating-linear-gradient(180deg,var(--gold) 0 5px,transparent 5px 11px),repeating-linear-gradient(90deg,var(--gold) 0 5px,transparent 5px 11px),repeating-linear-gradient(180deg,var(--gold) 0 5px,transparent 5px 11px);
  background-size:11px 1px,1px 11px,11px 1px,1px 11px;
  background-position:0 0,100% 0,0 100%,0 0;
  background-repeat:repeat-x,repeat-y,repeat-x,repeat-y;
  animation:btn-lap 5s linear infinite}
@keyframes btn-lap{to{background-position:11px 0,100% 11px,-11px 100%,0 -11px}}
@media (prefers-reduced-motion:reduce){.btn-film::after{animation:none}}
.btn-film .play{width:0;height:0;border-left:.62em solid currentColor;border-top:.4em solid transparent;border-bottom:.4em solid transparent;display:inline-block}
.film-layer{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.95rem;background:rgba(3,7,17,.94);padding:2.4rem 1.2rem}
.film-layer[hidden]{display:none}
.film-video{display:block;width:min(94vw,1440px);height:auto;max-height:76vh;background:#000b29;box-shadow:0 30px 100px rgba(0,0,0,.7)}
.film-stage{position:relative;display:inline-block;max-width:min(94vw,1440px);line-height:0}
.film-subs{position:absolute;left:0;right:0;bottom:3.4rem;margin:0 auto;max-width:min(88%,1100px);text-align:center;font-size:1.02rem;line-height:1.45;color:#e9e4d6;text-shadow:0 2px 10px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.9);pointer-events:none}
.film-subs:empty{display:none}
.film-credit{margin:0;max-width:min(94vw,1440px);text-align:center;font-size:.78rem;line-height:1.55}
.film-credit a{color:var(--gold-soft)}
.film-close{position:absolute;top:1.1rem;right:1.1rem;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--rule);background:rgba(5,11,26,.7);color:var(--gold);cursor:pointer}
.film-credit{margin:0;font-size:.82rem;letter-spacing:.01em;color:rgba(240,236,227,.62);text-align:center;max-width:min(94vw,1440px)}
.film-credit a{color:var(--gold-soft);text-decoration:none;border-bottom:1px solid rgba(200,162,77,.4)}
.film-credit a:hover{color:var(--gold)}
.film-close:hover{border-color:var(--gold-soft)}
.film-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* Phone, portrait or landscape (founder, 2026-09-19): the caption leaves the picture and takes
   the bottom row, and the music credit shrinks into the lower-right corner beside it. The
   max-height clause is what catches a phone turned sideways, where the width is ~844px. */
@media (max-width:680px){
  .film-layer{padding:1rem .8rem 3.4rem}
  .film-subs{position:fixed;left:.85rem;right:5.4rem;bottom:.85rem;max-width:none;margin:0;text-align:left;font-size:.88rem;line-height:1.35}
  .film-credit{position:fixed;right:.85rem;bottom:.85rem;width:4.3rem;max-width:none;margin:0;text-align:right;font-size:.5rem;line-height:1.3;letter-spacing:0;color:rgba(240,236,227,.3)}
}
@media (max-height:480px) and (min-width:681px){
  .film-subs{position:fixed;left:.85rem;right:auto;max-width:calc(100% - 15rem);bottom:calc(1.5rem + env(safe-area-inset-bottom,0px));margin:0;text-align:left;font-size:.88rem;line-height:1.35}
  .film-credit{position:fixed;left:auto;right:.85rem;bottom:calc(.75rem + env(safe-area-inset-bottom,0px));width:auto;max-width:none;white-space:nowrap;margin:0;text-align:right;font-size:.5rem;line-height:1.3;letter-spacing:0;color:rgba(240,236,227,.3)}
}