/* =============================================================
   BINOMAR GROUP — shared styles (3D map HUD + company pages)
   ============================================================= */
:root{
  /* ---------------------------------------------------------------
     Every colour below is lifted straight out of the 3D scene, so the
     page and the canvas read as one product rather than a canvas
     dropped into a template. Change it here and in js/city.js
     together — they are the same palette.
     --------------------------------------------------------------- */

  /* the night sky, zenith → horizon (js/sky.js makeSkyGradient) */
  --night-0:#020614;              /* zenith */
  --night-1:#071022;              /* page background */
  --night-2:#0c1a38;              /* raised surface */
  --night-3:#15254c;              /* hover surface */
  --horizon:#26386b;              /* where sky meets ridge — borders */

  /* the warm light in the village: lamp glass, firelight, café bulbs */
  --ember:#e3bd63;                /* street-lamp glass — primary accent */
  --ember-deep:#c2902f;           /* firelight */
  --ember-soft:#f6e3ab;
  --ember-rgb:227,189,99;

  /* the plaza flag and the monument ring — the one cool accent */
  --beacon:#f2c94c;
  --beacon-rgb:242,201,76;
  --aurora:#e6c37a;
  --pin:#ffd166;                  /* the featured-company pin */

  --snow:#eef2fb;                 /* the snow caps, and our body text */
  --haze:#9daccb;                 /* distant ridges, and our muted text */
  --haze-rgb:122,144,199;

  /* ---- semantic aliases: the rest of the sheet speaks in these ---- */
  --bg:var(--night-1); --bg-2:var(--night-2);
  --panel:rgba(10,20,46,.78);
  --line:rgba(var(--haze-rgb),.18);
  --text:var(--snow); --muted:var(--haze);
  --accent:var(--ember); --accent-2:var(--ember-deep);
  --on-accent:#241a04;            /* text that sits on an ember fill */
  --radius:16px;
  --font:'Plus Jakarta Sans',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  /* the display serif: big headlines only, echoing the calligraphic monogram */
  --font-display:'Cormorant Garamond','Cormorant',Garamond,Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
img{max-width:100%}

/* ---------- 3D scene wrapper (inside the landing-page hero) ---------- */
#scene{position:absolute;inset:0;z-index:0}
#scene canvas{display:block}
.vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  /* a warm lift from below, as if the village were glowing up at the lens */
  background:
    radial-gradient(ellipse at 50% 112%,rgba(255,178,96,.16),transparent 58%),
    radial-gradient(ellipse at 50% 44%,transparent 54%,rgba(16,10,6,.5) 100%)}

/* the dive into a company page: the scene rushes in, then this takes over */
.fly-fade{position:fixed;inset:0;z-index:55;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center,rgba(10,16,32,.35),var(--night-0) 78%)}

/* ---------- film grain ----------
   A whisper of moving grain over the 3D view takes the edge off the
   computer-graphics look. The noise is an SVG turbulence tile, rasterised
   once; the layer only jumps about by transform, a few times a second. */
.hero-grain{position:absolute;inset:-60px;z-index:3;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .7s steps(5) infinite}
@keyframes grain{0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-24px,14px,0)}40%{transform:translate3d(18px,-30px,0)}
  60%{transform:translate3d(-12px,-18px,0)}80%{transform:translate3d(28px,22px,0)}100%{transform:translate3d(0,0,0)}}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(ellipse at 50% 42%,rgba(227,189,99,.10),transparent 46%),
    linear-gradient(168deg,var(--night-2),var(--night-0) 58%,#0d1b3c);
  transition:opacity .6s ease,visibility .6s}
.loader.hide{opacity:0;visibility:hidden}
/* the monogram draws itself: a conic mask sweeps round the circle as far as
   the load has got (--p, 0 → 1, eased by the registered property) */
@property --p{syntax:'<number>';inherits:true;initial-value:0}
@property --iris{syntax:'<percentage>';inherits:false;initial-value:0%}
.loader{--p:0;transition:opacity .6s ease,visibility .6s,--p .6s cubic-bezier(.2,.7,.2,1)}
.loader-logo{position:relative;width:150px;height:150px;margin-bottom:8px;
  -webkit-mask:conic-gradient(from 200deg,#000 calc(var(--p) * 372deg - 12deg),transparent calc(var(--p) * 372deg));
          mask:conic-gradient(from 200deg,#000 calc(var(--p) * 372deg - 12deg),transparent calc(var(--p) * 372deg));
  filter:drop-shadow(0 8px 30px rgba(227,189,99,.28));
  transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .7s ease}
.loader-logo img{width:100%;height:100%;display:block}
/* a light passing over the gold, cut to the shape of the mark itself */
.loader-shine{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 38%,rgba(255,240,205,.9) 50%,transparent 62%) 0 0/260% 100% no-repeat;
  -webkit-mask:url(../assets/brand/logo.webp) center/contain no-repeat;
          mask:url(../assets/brand/logo.webp) center/contain no-repeat;
  animation:shine 2.8s cubic-bezier(.45,0,.2,1) .6s infinite}
@keyframes shine{0%{background-position:130% 0}60%,100%{background-position:-30% 0}}
.loader-title{background:linear-gradient(90deg,#f3dca0,#e3bd63 45%,#b98d3a);-webkit-background-clip:text;background-clip:text;color:transparent}
/* the exit: an iris opens from the centre onto the opening shot while the
   mark swells and fades through it */
.loader.opening{--iris:-6%;
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent var(--iris),#000 calc(var(--iris) + 6%));
          mask:radial-gradient(circle at 50% 50%,transparent var(--iris),#000 calc(var(--iris) + 6%))}
.loader.opening.hide{--iris:110%;opacity:1;visibility:hidden;
  transition:--iris 1s cubic-bezier(.65,0,.25,1),visibility 1s}
.loader.hide .loader-logo{transform:scale(1.35);opacity:0}
.loader-mark{font-size:44px;animation:float 2.4s ease-in-out infinite}
.loader-title{font-weight:800;letter-spacing:.35em;font-size:15px;color:var(--text)}
.loader-sub{font-size:12.5px;color:var(--muted)}
.loader-error{color:#fca5a5;font-size:13px;max-width:420px;text-align:center;padding:0 16px}
.loader-bar{width:160px;height:2px;margin-top:4px;border-radius:99px;overflow:hidden;background:rgba(var(--haze-rgb),.20)}
.loader-bar i{display:block;height:100%;width:40%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-2));animation:slide 1.1s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(300%)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- HUD ---------- */
.hud{position:absolute;z-index:10}
.hud-top{top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:16px 18px;pointer-events:none}
.hud-top .brand,.hud-actions{pointer-events:auto}
.brand{display:flex;gap:12px;align-items:center;padding:10px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px)}
.brand-badge{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;color:var(--on-accent);
  background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.brand-name{font-weight:800;font-size:15px;letter-spacing:.14em}
.brand-sub{font-size:11px;color:var(--muted);letter-spacing:.04em}
.hud-actions{display:flex;gap:8px}
.icon-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(10px);
  color:var(--text);font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.icon-btn:hover{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--ember-rgb),.18);transform:translateY(-1px)}

.hud-stats{bottom:22px;left:18px;font-size:12px;color:var(--muted);padding:8px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px)}
.hud-hint{bottom:22px;right:18px;font-size:12px;color:var(--muted);padding:8px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px);transition:opacity 1s}
.hud-hint.fade{opacity:0}

/* ---------- the finder: search + company list ---------- */
.finder{position:absolute;z-index:30;top:74px;right:18px;width:min(92vw,336px);max-height:min(72vh,560px);
  display:flex;flex-direction:column;border-radius:var(--radius);background:var(--panel);
  border:1px solid var(--line);backdrop-filter:blur(14px);box-shadow:0 22px 60px rgba(2,6,16,.55);overflow:hidden}
.finder[hidden]{display:none}
.finder-head{display:flex;gap:8px;padding:12px;border-bottom:1px solid var(--line)}
.finder-input{flex:1;min-width:0;padding:10px 12px;border-radius:10px;font:inherit;font-size:14px;
  color:var(--text);background:rgba(4,8,18,.6);border:1px solid var(--line);outline:none}
.finder-input::placeholder{color:var(--muted)}
.finder-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--ember-rgb),.16)}
.finder-head .icon-btn{width:38px;height:38px;font-size:14px;flex:none}
.finder-count{margin:0;padding:8px 14px 0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.finder-list{list-style:none;margin:0;padding:8px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.finder-item{display:flex;gap:11px;align-items:center;width:100%;padding:10px;border-radius:12px;
  border:1px solid transparent;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:.16s}
.finder-item:hover,.finder-item:focus-visible{background:var(--night-3);border-color:var(--accent);outline:none}
.finder-item .dot{width:30px;height:30px;border-radius:9px;flex:none;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:14px;color:#fff}
.finder-item .fi-body{flex:1;min-width:0}
.finder-item .fi-body{display:flex;flex-direction:column;gap:2px}
.finder-item .fi-name{display:block;font-weight:700;font-size:13.5px;line-height:1.25}
.finder-item .fi-ind{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.finder-item .fi-go{color:var(--accent);font-size:11px;font-weight:700;white-space:nowrap}
.finder-empty{padding:18px 14px;color:var(--muted);font-size:13px}

/* ---------- controls legend ---------- */
.hud-legend{bottom:20px;left:18px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;max-width:min(80vw,440px);
  padding:9px 30px 9px 13px;border-radius:12px;background:var(--panel);border:1px solid var(--line);
  backdrop-filter:blur(10px);font-size:11.5px;color:var(--muted);transition:opacity .4s}
.hud-legend b{color:var(--text);font-weight:700}
.hud-legend.fade{opacity:0;pointer-events:none}
.legend-x{position:absolute;top:4px;right:5px;width:20px;height:20px;border:0;border-radius:6px;cursor:pointer;
  background:none;color:var(--muted);font-size:11px;line-height:1}
.legend-x:hover{color:var(--text);background:rgba(var(--haze-rgb),.18)}

/* ---------- hover tooltip ---------- */
.tooltip{position:fixed;z-index:40;width:280px;padding:14px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);
  backdrop-filter:blur(12px);box-shadow:0 18px 50px rgba(2,6,16,.5);pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .18s,transform .18s}
.tooltip.show{opacity:1;transform:translateY(0)}
.tooltip.pinned{left:50% !important;top:auto !important;bottom:26px;transform:translateX(-50%)}
.tt-head{display:flex;gap:11px;align-items:center}
.tt-avatar{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;color:#fff;flex:none;overflow:hidden}
.tt-avatar img{width:100%;height:100%;object-fit:cover}
.tt-name{font-weight:800;font-size:14.5px;line-height:1.25}
.tt-industry{display:inline-block;margin-top:3px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.tt-tagline{margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.5}
.tt-cta{margin-top:10px;font-size:11.5px;font-weight:700;color:var(--accent)}

/* ---------- company detail page ---------- */
body.page-company{background:radial-gradient(1200px 600px at 80% -10%,var(--night-3),var(--bg) 62%)}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;background:rgba(8,14,30,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar .back{color:var(--muted);font-weight:600;font-size:13.5px;transition:.2s}
.topbar .back:hover{color:var(--text)}
.topbar-title{font-weight:800;letter-spacing:.22em;font-size:13px;color:var(--muted)}
.btn-ghost{padding:9px 16px;border-radius:10px;border:1px solid var(--line);color:var(--text);font-weight:700;font-size:12.5px;transition:.2s;white-space:nowrap}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

.company-app{max-width:1060px;margin:0 auto;padding:28px 20px 60px}
.company-app>*{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.company-app>*:nth-child(2){animation-delay:.08s}
.company-app>*:nth-child(3){animation-delay:.16s}
.company-app>*:nth-child(4){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.hero{position:relative;border-radius:22px;overflow:hidden;padding:46px 42px;color:#fff;isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(4,8,18,.5));z-index:-1}
.hero-top{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.hero-avatar{width:88px;height:88px;border-radius:20px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:36px;flex:none;overflow:hidden}
.hero-avatar img{width:100%;height:100%;object-fit:contain;background:#fff;padding:12%;box-sizing:border-box}
/* the company page's logo: the whole mark, wordmark and all, on its tile */
.hero-avatar.wide{width:auto;min-width:88px;max-width:min(300px,70vw);padding:0 20px;box-sizing:border-box}
.hero-avatar.wide img{width:auto;height:64%;max-width:100%;padding:0;background:none}

/* ---------- company logos in badges (fillBadge in data.js) ----------
   A real logo sits whole on its tile — light by default, since most marks
   are drawn for white; a company with a white logo sets its own (logoBg) —
   in every badge size; without one, the initial on the brand colour. */
.has-logo{background:var(--logo-bg,#f7f8fb)!important;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(10,20,40,.08)}
.has-logo img{width:100%;height:100%;display:block;object-fit:contain;padding:14%;box-sizing:border-box}
/* the group's own gold monogram is drawn for the dark: no tile */
.has-logo.group-mark{background:none!important;box-shadow:none}
.has-logo.group-mark img{padding:0}
.hero-title{font-family:var(--font-display);font-size:clamp(32px,5.4vw,52px);font-weight:600;line-height:1.08;margin:10px 0 6px}
.hero-tagline{font-size:15px;opacity:.92;max-width:640px;line-height:1.55;margin:0}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.25);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

.layout{display:grid;grid-template-columns:1fr 320px;gap:22px;margin-top:22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px;backdrop-filter:blur(8px)}
.card h2{margin:0 0 14px;font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.about p{color:#c9d6e8;font-size:14.5px;line-height:1.8;margin:0 0 14px}
.about p:last-of-type{margin-bottom:0}
.contact-row{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed rgba(var(--haze-rgb),.16);font-size:13.5px}
.contact-row:last-child{border-bottom:0}
.contact-row .ico{width:34px;height:34px;border-radius:9px;background:rgba(var(--ember-rgb),.12);display:flex;align-items:center;justify-content:center;flex:none}
.contact-row .lbl{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.contact-row .val{color:var(--text);word-break:break-word}
.btn{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:12px 20px;border-radius:12px;font-weight:800;font-size:13.5px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--on-accent);transition:.2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(var(--ember-rgb),.28)}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.pills{display:flex;flex-wrap:wrap;gap:9px}
.pill{padding:9px 15px;border-radius:99px;background:var(--panel);border:1px solid var(--line);color:var(--text);font-size:12.5px;font-weight:700;transition:.2s}
.pill:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.pill .dot{display:inline-block;width:8px;height:8px;border-radius:99px;margin-right:7px}
.notfound{text-align:center;padding:90px 20px}
.notfound h1{font-family:var(--font-display);font-weight:600;font-size:42px;margin:0 0 10px}
.notfound p{color:var(--muted)}
footer.site-footer{text-align:center;color:var(--muted);font-size:12px;padding:26px;border-top:1px solid var(--line)}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .hud-stats{display:none}
  .hud-hint{max-width:56vw;font-size:11px;line-height:1.35;bottom:16px;right:12px}
  .hud-legend{left:10px;right:10px;bottom:12px;max-width:none;font-size:11px;gap:4px 10px;padding:8px 26px 8px 11px}
  .legend-key{display:none}
  .finder{top:auto;bottom:0;left:0;right:0;width:100%;max-height:70vh;border-radius:18px 18px 0 0}
  .hud-filters{bottom:auto;top:66px}
  .hud-filters{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;max-width:94vw;padding-bottom:6px;scrollbar-width:none}
  .hud-filters::-webkit-scrollbar{display:none}
  .brand-sub{display:none}
  /* four controls plus the brand will not fit 375px; the browser's own
     chrome already handles fullscreen on a phone, so that one goes */
  #btnFull{display:none}
  /* …and the sound toggle takes the reset button's place: on a phone the
     "District" chip under the map already flies home */
  #btnHome{display:none}
  .hud-top{padding:10px 10px;gap:8px}
  .brand{min-width:0;overflow:hidden}
  .brand{padding:8px 11px;border-radius:12px}
  .brand-badge{width:34px;height:34px;border-radius:10px;font-size:16px}
  .brand-name{font-size:12px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* 44px keeps the controls comfortably tappable */
  .icon-btn{width:44px;height:44px;font-size:18px}
  .hud-actions{gap:10px}
  .tooltip{width:min(78vw,260px);padding:12px}
  .tooltip.pinned{bottom:18px;width:min(88vw,340px)}
  .layout{grid-template-columns:1fr}
  .hero{padding:30px 22px}
  .company-app{padding:18px 14px 50px}
}

/* ---------- navbar: the site chrome above the 3D hero ---------- */
.navbar{position:fixed;top:0;left:0;right:0;z-index:40;height:64px;display:flex;align-items:center;gap:14px;
  padding:0 clamp(12px,3vw,26px);background:rgba(5,10,26,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(var(--ember-rgb),.22);transition:background .5s ease,box-shadow .5s ease,border-color .5s ease}
/* on the landing page (city.js adds .live): light over the district so the
   sky reads through it, frosted glass once the page has slid over the map */
.navbar.live:not(.past){background:linear-gradient(180deg,rgba(4,8,20,.72),rgba(4,8,20,.42));border-bottom-color:rgba(var(--ember-rgb),.14)}
.navbar.live.past{background:rgba(9,16,36,.66);backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 12px 34px rgba(0,0,0,.34)}
.nav-brand{display:flex;gap:11px;align-items:center;color:var(--text);min-width:0}
.nav-badge{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:17px;color:var(--on-accent);background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 4px 16px rgba(var(--ember-rgb),.28);flex:none}
/* the real mark: gold on the navy bar, no tile behind it */
.nav-badge.logo{width:42px;height:42px;border-radius:0;background:none;box-shadow:none}
.nav-badge.logo img{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 10px rgba(var(--ember-rgb),.35));
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.nav-brand:hover .nav-badge.logo img{transform:rotate(-8deg) scale(1.06)}
.nav-title{font-weight:800;font-size:13.5px;letter-spacing:.18em;line-height:1.15;white-space:nowrap}
.nav-title small{display:block;font-weight:600;font-size:9.5px;letter-spacing:.1em;color:var(--muted)}
.nav-links{display:flex;gap:2px;margin-left:6px}
.nav-links a{padding:9px 13px;border-radius:10px;color:var(--muted);font-weight:700;font-size:13px;transition:.2s}
.nav-links a:hover,.nav-links a.on{color:var(--accent);background:rgba(var(--ember-rgb),.09)}
.nav-spacer{flex:1}
.navbar .hud-actions{position:static}
.navbar .icon-btn{width:38px;height:38px;font-size:15px}
.nav-cta{padding:10px 16px;border-radius:11px;font:inherit;font-weight:800;font-size:12.5px;cursor:pointer;
  color:var(--on-accent);background:linear-gradient(135deg,var(--accent),var(--accent-2));border:none;transition:.2s;white-space:nowrap}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(var(--ember-rgb),.3)}
.navbar .btn{padding:9px 14px;font-size:12.5px;margin:0}
/* company pages have no hero, so the fixed navbar needs clearing */
body.page-company{padding-top:64px}
@media (max-width:760px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .nav-title small{display:none}
  .navbar{gap:8px}
  .navbar .hud-actions{gap:6px}
  .navbar .icon-btn{width:40px;height:40px;font-size:16px}
}

/* ---------- landing page: hero overlay + scroll sections ---------- */
html{scroll-behavior:smooth}
/* the sky pass runway: the hero pins (sticky) inside this taller wrapper
   for about one screen of scrolling while city.js flies the camera up into
   the clouds. Its extra height is set in JS; without JS — or under
   prefers-reduced-motion — it collapses to the hero alone. */
.hero-run{position:relative;margin-top:64px}
/* the fixed navbar owns the top 64px; the hero starts under it and stops a
   little short of the fold — the 3D view is the hero of a page, not the
   whole of it */
header.hero{position:sticky;top:64px;height:calc(100vh - 64px - 44px);min-height:560px;overflow:hidden;border-radius:0;padding:0;margin-top:0}
/* svh tracks the visible viewport, so the canvas does not jump as mobile
   browser chrome slides in and out */
@supports (height:100svh){header.hero{height:calc(100svh - 64px - 44px)}}
@media (max-width:760px){header.hero{min-height:520px}}
section[id]{scroll-margin-top:78px}
/* a vertical swipe scrolls the page past the hero; sideways drags orbit
   the map and two fingers pinch-zoom it (see initInteraction in city.js) */
#scene,#scene canvas{touch-action:pan-y}

/* ---------- the sky pass: 3D district → page ----------
   city.js eases a --sp progress (0 → 1) across the runway and writes it on
   the hero, while the camera tilts up off the district into the night sky.
   The page's half is transform and opacity only:
     0.00–0.30  the headline, name tags and controls float away
     0.42–1.00  <main> rises from the bottom (plain scrolling: it lives in
                the same runway, after a spacer sized in city.js) and the 3D
                view folds up ahead of it like an accordion — four panels,
                creasing towards the navbar, the bottom crease riding the
                page's leading edge (js/fold.js, drawn in WebGL, so the CSS
                has nothing to do but dim it with the veil)
   Once the page meets the navbar the district is folded away completely and
   stops drawing until you scroll back up, which unfolds it again. */
.hero-drift{display:flex;flex-direction:column;align-items:center;
  transform:translate3d(0,calc(var(--sp,0) * -30vh),0);opacity:calc(1 - var(--sp,0) * 3.4)}
.map-labels{opacity:calc(1 - clamp(0,(var(--sp,0) - .06) * 4,1));transition:opacity .7s ease,visibility .7s}
/* the name tags wait behind the opening headline and come in as it steps
   aside (index.html adds .labels-on), so the two never overlap */
header.hero:not(.labels-on) .map-labels{opacity:0;visibility:hidden}
header.hero .hud,.company-chips,.scroll-cue:not(.gone){opacity:calc(1 - clamp(0,(var(--sp,0) - .02) * 4,1))}
.hero-veil{position:absolute;inset:0;z-index:13;pointer-events:none;background:#02040c;
  opacity:clamp(0,(var(--sp,0) - .4) * 1.1,.5)}
/* the sheet: the page itself, with a rounded leading edge and a soft shadow
   cast up onto the fold closing above it */
.hero-run > main{position:relative;z-index:2;overflow:hidden;
  background:linear-gradient(180deg,rgba(7,16,34,.9) 0,rgba(7,16,34,.66) 260px,rgba(7,16,34,.72));
  border-radius:28px 28px 0 0;box-shadow:0 -24px 70px rgba(0,0,0,.55),0 -1px 0 rgba(var(--haze-rgb),.22)}
/* a soft blend at the bottom edge, always on: the page starts where the
   valley mist would be */
header.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:90px;z-index:12;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--night-1))}
.hero-overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;padding:70px 20px}
/* the opening: as the loader lifts, the kicker, each word of the headline,
   the line under it and the buttons rise into place one after another
   (city.js marks them .w with a --d delay, then adds .play). Opacity and
   transform only, so it stays smooth on any phone. */
.hero-overlay.intro .w{opacity:0;transform:translate3d(0,.6em,0)}
.hero-overlay.intro .hero-head .w{display:inline-block}
.hero-overlay.intro.play .w{animation:word-in 1s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
@keyframes word-in{from{opacity:0;transform:translate3d(0,.6em,0)}to{opacity:1;transform:none}}
/* the overlay is a host: once you reach for the map it steps aside — this
   one still fades gently, its transition lives on the faded state itself */
.hero-overlay.faded{opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s}
.hero-kicker{font-size:11px;font-weight:800;letter-spacing:.34em;color:#c3d8f2;text-shadow:0 2px 14px rgba(3,10,24,.85)}
.hero-head{font-family:var(--font-display);font-size:clamp(46px,8.4vw,92px);font-weight:600;line-height:.98;letter-spacing:-.005em;margin:18px 0 14px;text-shadow:0 2px 8px rgba(3,10,24,.9),0 10px 40px rgba(3,10,24,.65)}
/* the brand name: bright loader-gold, a sheen sweeping through it and a
   soft breathing glow around the letters (the wrap carries the word-in
   rise, so the entrance and the shine never fight) */
.hero-head .grad{font-style:italic;font-weight:500;padding-right:.08em;
  background:linear-gradient(105deg,#fff6cf 0%,#ffe08a 25%,#f7c247 50%,#ffe9a8 75%,#eec13f 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
  animation:grad-sheen 4.6s ease-in-out infinite,grad-glow 3.2s ease-in-out infinite}
@keyframes grad-sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* the dark layer gives the gold a crisp edge against the sky, the warm one
   is the glow; together the letters stay readable over lamps and mist */
@keyframes grad-glow{0%,100%{filter:drop-shadow(0 2px 4px rgba(3,10,24,.8)) drop-shadow(0 3px 12px rgba(255,215,110,.30))}
  50%{filter:drop-shadow(0 2px 4px rgba(3,10,24,.8)) drop-shadow(0 3px 22px rgba(255,226,132,.55))}}
.hero-cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;justify-content:center}
.hero-cta .btn{margin:0;pointer-events:auto}
.hero-sub{max-width:560px;color:#e2ecfb;font-size:15.5px;line-height:1.65;text-shadow:0 2px 12px rgba(3,10,24,.85)}
.hero-cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;justify-content:center}
.hero-cta .btn{margin:0;pointer-events:auto}
.btn.ghost2{background:rgba(8,14,30,.58);color:var(--text);border:1px solid rgba(var(--haze-rgb),.38);backdrop-filter:blur(8px)}
.btn.ghost2:hover{border-color:var(--accent);transform:translateY(-2px)}
.scroll-cue{position:absolute;right:74px;bottom:20px;z-index:6;display:flex;gap:8px;align-items:center;
  padding:8px 16px;border-radius:99px;background:rgba(8,14,30,.55);border:1px solid rgba(var(--haze-rgb),.28);backdrop-filter:blur(8px);
  color:#e2ecfb;font-size:12.5px;font-weight:700;letter-spacing:.04em;white-space:nowrap;transition:opacity .4s}
.scroll-cue span{display:inline-block;animation:cue-bob 1.8s ease-in-out infinite}
@keyframes cue-bob{0%,100%{transform:translateY(-1px)}50%{transform:translateY(3px)}}
.scroll-cue:hover{border-color:var(--accent);color:#fff}
.scroll-cue.gone{opacity:0;pointer-events:none}
/* zoom: +/- buttons for the mouse, and a hint when someone scrolls over the map */
.zoom-ctrl{right:18px;bottom:20px;display:flex;flex-direction:column;gap:8px}
.zoom-ctrl .icon-btn{font-size:20px;font-weight:700;line-height:1}
.zoom-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:12;padding:12px 20px;border-radius:14px;
  background:rgba(6,11,24,.78);border:1px solid var(--line);backdrop-filter:blur(10px);color:#e2ecfb;font-size:14px;
  pointer-events:none;opacity:0;transition:opacity .25s}
.zoom-hint.show{opacity:1}
.zoom-hint b{color:#fff}
.legend-touch{display:none}
@media (pointer:coarse){.legend-mouse{display:none}.legend-touch{display:inline}}
@media (max-width:760px){.zoom-ctrl{bottom:70px;right:10px}}
@keyframes cue{0%,100%{transform:translate(-50%,0);opacity:.45}50%{transform:translate(-50%,9px);opacity:1}}

main .band{max-width:1120px;margin:0 auto;padding:88px 22px}
.band-inner{max-width:1120px;margin:0 auto}
/* the sections glide up and fade in as they enter the viewport, a little
   before they reach it, so they are settling as you arrive rather than
   popping in behind you — cards, stats and titles each get a --i stagger
   index from city.js. The transition lives at band specificity so a
   card's own shorthand transition (.cl-link) cannot swallow the stagger. */
.reveal{opacity:0;transform:translate3d(0,26px,0)}
main .band .reveal{transition:opacity .7s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 60ms),
             transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 60ms)}
.reveal.in{opacity:1;transform:none}
/* the cards get a touch more theatre than the plain rise: they swing up
   off their own bottom edge in perspective, so a row arrives as a wave.
   The .in override must repeat at id specificity or the base rule wins. */
#companyGrid .reveal{transform:perspective(900px) translate3d(0,34px,0) rotateX(9deg);transform-origin:50% 100%}
#companyGrid .reveal.in{transform:none}
.band.alt{max-width:none;background:linear-gradient(180deg,rgba(22,32,60,.55),rgba(8,14,30,.25));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-title{font-family:var(--font-display);font-size:clamp(32px,4.8vw,48px);font-weight:600;line-height:1.05;letter-spacing:-.005em;margin:0 0 10px}
.sec-sub{color:var(--muted);margin:0 0 8px;font-size:15px}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:36px 0 30px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;text-align:center}
.stat b{display:block;font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--muted);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.sec-text{color:#c9d6e8;max-width:780px;line-height:1.85;font-size:14.5px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:36px}
@media (max-width:700px){.cards{grid-template-columns:1fr;gap:16px}}

/* ---- the company card ----
   A brand-coloured view on top (a big serif initial over the district's
   own mountain ridge) and a dark sheet below it with the name. On a mouse,
   resting on the card slides the sheet up over the view and the story
   comes in underneath: transform and opacity only, nothing that makes the
   browser lay the page out again, so it stays smooth on any machine.
   Touch screens get the open layout straight away (see the media query). */
.cl-link{--h:340px;--rise:138px;display:block;position:relative;isolation:isolate;overflow:hidden;
  height:var(--h);border-radius:22px;color:var(--text);
  background:#0a1430;border:1px solid rgba(var(--haze-rgb),.16);
  box-shadow:0 12px 30px rgba(2,6,18,.35)}
/* the entrance (at id specificity, or main .band .reveal's timing wins) */
#companyGrid .cl-link{transition:opacity .7s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 70ms),
  transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 70ms)}
/* once the entrance is over (city.js adds .settled) the card answers the
   pointer quickly instead of with its slow, staggered rise */
#companyGrid .cl-link.settled{transition:transform .55s cubic-bezier(.22,.9,.24,1),opacity .4s ease,
  border-color .4s ease,box-shadow .55s ease}

/* the view: brand light, a fine diagonal weave, the initial and the ridge */
.cl-media{display:block;position:absolute;inset:0 0 auto 0;height:200px;overflow:hidden;
  background:
    radial-gradient(120% 95% at 88% -10%, rgba(var(--brand-rgb),.62), transparent 58%),
    radial-gradient(90% 90% at -5% 110%, rgba(var(--brand-rgb),.28), transparent 62%),
    linear-gradient(160deg,#13224a,#070f24);
  transform-origin:50% 30%;transition:transform 1s cubic-bezier(.22,.9,.24,1)}
.cl-media::before{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px 11px)}
.cl-glyph{position:absolute;right:22px;top:-26px;font-family:var(--font-display);font-weight:700;
  font-size:200px;line-height:1;color:rgba(255,255,255,.07);-webkit-text-stroke:1px rgba(255,255,255,.2);
  transition:transform 1s cubic-bezier(.22,.9,.24,1)}
/* the company's own logo, whole, on a tile floating in the view */
.cl-logo{position:absolute;right:22px;top:22px;height:64px;min-width:64px;max-width:58%;padding:0 16px;
  display:flex;align-items:center;justify-content:center;border-radius:16px;box-sizing:border-box;
  box-shadow:0 12px 28px rgba(2,6,18,.35),inset 0 0 0 1px rgba(255,255,255,.18)!important;
  transition:transform 1s cubic-bezier(.22,.9,.24,1)}
.cl-logo.has-logo img{width:auto;height:62%;max-width:100%;padding:0}
.cl-ridge{position:absolute;left:0;right:0;bottom:12px;width:100%;height:92px;
  transition:transform 1s cubic-bezier(.22,.9,.24,1)}
.cl-ridge .r1{fill:rgba(var(--brand-rgb),.3)}
.cl-ridge .r2{fill:#0a1430;opacity:.9}
.cl-num{position:absolute;left:22px;top:18px;font-size:11px;font-weight:800;letter-spacing:.22em;
  color:rgba(255,255,255,.72)}
.cl-num::after{content:"";display:inline-block;vertical-align:middle;width:26px;height:1px;margin-left:10px;
  background:rgba(255,255,255,.4)}

/* the sheet: overlaps the view a little, taller than the card so there is
   more of it to slide up into sight */
.cl-sheet{display:block;position:absolute;left:0;right:0;top:184px;height:var(--h);padding:40px 24px 0;
  background:linear-gradient(180deg,#0c1735,#0a1430 120px);border-radius:22px 22px 0 0;
  box-shadow:0 -14px 30px rgba(2,6,18,.35);
  transition:transform .6s cubic-bezier(.22,.9,.24,1)}
.cl-sheet .cl-avatar{position:absolute;left:24px;top:-28px;width:56px;height:56px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;color:#fff;
  box-shadow:0 10px 26px rgba(var(--brand-rgb),.45),0 0 0 4px #0c1735,inset 0 1px 0 rgba(255,255,255,.3)}
.cl-go{position:absolute;right:22px;top:-19px;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;
  background:rgb(var(--brand-rgb));box-shadow:0 8px 20px rgba(var(--brand-rgb),.45),0 0 0 4px #0c1735;
  transform:rotate(-45deg);transition:transform .5s cubic-bezier(.22,.9,.24,1)}
.cl-sheet h3{margin:0;font-family:var(--font-display);font-size:27px;font-weight:600;line-height:1.08;
  letter-spacing:.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-tag{margin:5px 0 0;color:var(--muted);font-size:13px;line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-meta{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:11.5px;color:var(--muted)}
.cl-ind{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 10px;border-radius:99px;white-space:nowrap;
  border:1px solid color-mix(in srgb,currentColor 45%,transparent);
  background:color-mix(in srgb,currentColor 13%,transparent)}
.cl-since b{color:var(--text);font-weight:700}
/* the story waits below the fold of the card */
.cl-more{display:block;margin-top:16px;padding-top:14px;border-top:1px solid rgba(var(--haze-rgb),.14);
  transition:opacity .45s ease .05s,transform .6s cubic-bezier(.22,.9,.24,1)}
.cl-desc{margin:0;color:#b4c3da;font-size:13px;line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cl-cta{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:10.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--brand-rgb))}
.cl-cta i{font-style:normal;transition:transform .4s cubic-bezier(.22,.9,.24,1)}

/* ---- on a mouse: rest on a card and the story slides up ---- */
@media (hover:hover) and (pointer:fine){
  .cl-more{opacity:0;transform:translate3d(0,18px,0)}
  .cl-link:hover,.cl-link:focus-visible{border-color:rgba(var(--brand-rgb),.6);
    box-shadow:0 26px 60px rgba(2,6,18,.55),0 0 50px rgba(var(--brand-rgb),.22)}
  #companyGrid .cl-link.settled:hover,#companyGrid .cl-link.settled:focus-visible{transform:translate3d(0,-6px,0)}
  .cl-link:hover .cl-sheet,.cl-link:focus-visible .cl-sheet{transform:translate3d(0,calc(var(--rise) * -1),0)}
  .cl-link:hover .cl-more,.cl-link:focus-visible .cl-more{opacity:1;transform:none}
  .cl-link:hover .cl-media,.cl-link:focus-visible .cl-media{transform:scale(1.07)}
  .cl-link:hover .cl-glyph,.cl-link:focus-visible .cl-glyph{transform:translate3d(-10px,-8px,0)}
  .cl-link:hover .cl-logo,.cl-link:focus-visible .cl-logo{transform:translate3d(0,-6px,0) scale(.94)}
  .cl-link:hover .cl-ridge,.cl-link:focus-visible .cl-ridge{transform:translate3d(0,-10px,0)}
  .cl-link:hover .cl-go,.cl-link:focus-visible .cl-go{transform:none}
  .cl-link:hover .cl-cta i{transform:translateX(4px)}
  /* the other cards step back (opacity only: cheap to animate) */
  #companyGrid:has(.cl-link.settled:hover) .cl-link.settled:not(:hover){opacity:.55}
}
/* ---- touch screens: the open layout, no hover needed ---- */
@media not ((hover:hover) and (pointer:fine)){
  .cl-link{height:auto}
  .cl-media{position:relative;height:150px}
  .cl-sheet{position:relative;top:auto;height:auto;margin-top:-18px;padding-bottom:22px}
  .cl-desc{-webkit-line-clamp:3;line-clamp:3}
}
@media (max-width:420px){
  .cl-sheet{padding-left:18px;padding-right:18px}
  .cl-sheet .cl-avatar{left:18px}
  .cl-sheet h3{font-size:24px}
}
/* ---------- contact: a postcard from the summit ----------
   Night-sky paper with gold ink inside an airmail border (gold and sky
   stripes). Left: the message, written on ruled lines; right: a perforated
   stamp carrying the group's monogram, a "Summit Post" postmark, and the
   address lines. It lands with a slight tilt the first time it scrolls
   into view (js/contact.js adds .landed), the stamp drops on and the
   postmark thumps down after it. Transform and opacity only. */
.band.contact{padding-bottom:110px}
.postcard{--pc-ink:#e3bd63;--pc-sky:#5fb4ee;position:relative;max-width:980px;margin:38px auto 0;padding:9px;border-radius:20px;
  background:repeating-linear-gradient(135deg,var(--pc-ink) 0 16px,#0a1430 16px 24px,var(--pc-sky) 24px 40px,#0a1430 40px 48px);
  box-shadow:0 30px 70px rgba(2,6,18,.55),0 0 0 1px rgba(255,255,255,.06);
  transform:rotate(-.8deg);transition:transform .7s cubic-bezier(.22,.9,.24,1),box-shadow .7s ease}
.postcard:hover{transform:rotate(0deg) translate3d(0,-4px,0);box-shadow:0 38px 80px rgba(2,6,18,.6),0 0 60px rgba(var(--ember-rgb),.12)}
.pc-paper{position:relative;display:grid;grid-template-columns:1.12fr 1px 1fr;gap:34px;padding:34px 36px 30px;border-radius:13px;overflow:hidden;
  background:
    radial-gradient(420px 260px at 92% 0%,rgba(var(--ember-rgb),.10),transparent 70%),
    radial-gradient(520px 320px at 0% 100%,rgba(95,180,238,.08),transparent 70%),
    linear-gradient(160deg,#101d3f,#0a142e 60%,#0b1633)}
/* paper tooth: a faint weave, like card stock under lamplight */
.pc-paper::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px),
             repeating-linear-gradient(90deg,rgba(255,255,255,.01) 0 1px,transparent 1px 4px)}
.pc-rule{background:linear-gradient(180deg,transparent,rgba(var(--ember-rgb),.4) 12%,rgba(var(--ember-rgb),.4) 88%,transparent)}

/* the message side: handwriting on ruled lines */
.pc-message{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0}
.pc-greet{margin:0 0 4px;font-family:var(--font-display);font-style:italic;font-weight:600;font-size:30px;color:var(--ember-soft);line-height:1.1}
.pc-field{display:flex;flex-direction:column;gap:3px}
.pc-field span{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(var(--ember-rgb),.75)}
.pc-field input,.pc-field textarea{width:100%;box-sizing:border-box;border:0;border-radius:0;padding:6px 2px 7px;background:transparent;
  color:var(--text);font-family:var(--font-display);font-size:21px;font-weight:600;line-height:30px;outline:none;
  border-bottom:1px solid rgba(var(--haze-rgb),.35);transition:border-color .25s}
.pc-field textarea{resize:vertical;min-height:122px;border-bottom:0;
  /* ruled lines that scroll with the writing */
  background:repeating-linear-gradient(180deg,transparent 0 29px,rgba(var(--haze-rgb),.35) 29px 30px);background-attachment:local}
.pc-field input::placeholder,.pc-field textarea::placeholder{color:rgba(var(--haze-rgb),.55);font-style:italic}
.pc-field input:focus{border-bottom-color:var(--accent)}
.pc-field textarea:focus{background-image:repeating-linear-gradient(180deg,transparent 0 29px,rgba(var(--ember-rgb),.55) 29px 30px)}
.pc-send-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.pc-send{margin:0;border:0;cursor:pointer;font-family:inherit}
.pc-send span{font-size:16px;line-height:1}
.pc-note{color:var(--muted);font-size:11.5px;line-height:1.5;max-width:260px}
.pc-note.bad{color:#ffb4a8}

/* the paperclip: attach a photo or document to the postcard. The chip
   wears the chosen filename until it is removed or the card is sent. */
.pc-attach-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.pc-clip{display:inline-flex;align-items:center;gap:7px;cursor:pointer;padding:8px 14px;border-radius:99px;
  font:800 10px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  background:transparent;border:1px dashed rgba(var(--ember-rgb),.45);transition:color .2s,border-color .2s,background .2s}
.pc-clip:hover{color:var(--accent);border-color:var(--accent);background:rgba(var(--ember-rgb),.07)}
.pc-clip .clip-ico{font-size:13px;line-height:1}
.pc-file{display:inline-flex;align-items:center;gap:4px;max-width:100%;min-width:0;padding:4px 5px 4px 12px;border-radius:99px;
  background:rgba(var(--ember-rgb),.1);border:1px solid rgba(var(--ember-rgb),.35)}
.pc-file-name{font-size:11.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.pc-file-x{border:0;cursor:pointer;background:transparent;color:var(--muted);font-size:15px;line-height:1;padding:3px 8px;border-radius:99px;transition:color .2s}
.pc-file-x:hover{color:#ffb4a8}
.pc-send.sending{opacity:.65;pointer-events:none}
/* the honeypot: off-screen so people never see it; bots fill it and
   FormSubmit quietly drops those submissions */
.pc-honey{position:absolute;left:-6000px;top:-6000px;height:1px;width:1px;opacity:0}

/* the address side */
.pc-address{position:relative;display:flex;flex-direction:column;min-width:0}
.pc-corner{position:relative;height:118px;margin-bottom:10px}
.pc-stamp{position:absolute;right:0;top:0;width:92px;height:110px;box-sizing:border-box;padding:10px 10px 8px;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  background:linear-gradient(160deg,#1a2b57,#0e1a3a);border:1px solid rgba(var(--ember-rgb),.55);
  box-shadow:0 8px 20px rgba(2,6,18,.45);transform:rotate(3deg)}
/* the perforations: a row of paper-coloured holes centred on each edge */
.pc-stamp::before{content:"";position:absolute;inset:-1px;pointer-events:none;
  --hole:radial-gradient(circle,#0d1837 2.6px,transparent 3.1px);
  background:var(--hole) 0 -4.5px/9px 9px repeat-x,var(--hole) 0 calc(100% + 4.5px)/9px 9px repeat-x,
             var(--hole) -4.5px 0/9px 9px repeat-y,var(--hole) calc(100% + 4.5px) 0/9px 9px repeat-y}
.pc-stamp img{width:62px;height:62px;display:block;filter:drop-shadow(0 2px 8px rgba(var(--ember-rgb),.35))}
.pc-stamp span{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ember-soft)}
.pc-postmark{position:absolute;right:52px;top:6px;width:200px;height:120px;z-index:2;pointer-events:none;
  fill:none;stroke:rgba(var(--ember-rgb),.62);stroke-width:2;transform:rotate(-12deg);transform-origin:60px 60px}
.pc-postmark text{fill:rgba(var(--ember-rgb),.72);stroke:none;font-family:var(--font);font-weight:800;text-anchor:middle}
.pc-postmark .pm-ring{font-size:10.5px;letter-spacing:2.2px;text-anchor:start}
.pc-postmark .pm-big{font-size:12px;letter-spacing:3px}
.pc-postmark .pm-wave{stroke-width:2.2;stroke-linecap:round}
.pc-to{margin:4px 0 10px;font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--ember-rgb),.75)}
.pc-to b{font-family:var(--font-display);font-size:28px;font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--text);margin-left:6px}
.pc-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pc-lines li{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid rgba(var(--haze-rgb),.3)}
.pc-line{flex:1;min-width:0;display:flex;align-items:center;gap:14px;color:var(--text)}
.pc-line i{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:17px;
  color:var(--accent);border:1px solid rgba(var(--ember-rgb),.4);background:rgba(var(--ember-rgb),.07);
  transition:background .25s,color .25s,transform .35s cubic-bezier(.22,.9,.24,1)}
.pc-line span{min-width:0;display:flex;flex-direction:column;font-family:var(--font-display);font-size:clamp(17px,1.7vw,20px);font-weight:600;
  white-space:nowrap;line-height:1.2}
.pc-line small{font-family:var(--font);font-size:9.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.pc-line-addr span{white-space:normal;line-height:1.25}  /* the address runs to two lines by design */
.pc-line:hover{color:var(--ember-soft)}
.pc-line:hover i{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--on-accent);transform:rotate(-8deg) scale(1.06)}
.pc-copy{flex:none;cursor:pointer;padding:7px 12px;border-radius:99px;font:800 10px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);background:transparent;border:1px solid rgba(var(--haze-rgb),.35);transition:color .2s,border-color .2s,background .2s}
.pc-copy:hover{color:var(--accent);border-color:var(--accent)}
.pc-copy.done{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
.pc-sign{margin:auto 0 0;padding-top:18px;font-family:var(--font-display);font-style:italic;font-size:17px;color:var(--muted)}
.foot-contact a{color:var(--muted)}
.foot-contact a:hover{color:var(--accent)}

/* ---- the landing ---- */
.postcard{opacity:0;transform:translate3d(0,46px,0) rotate(-4deg)}
.postcard.landed{opacity:1;transform:rotate(-.8deg);
  transition:opacity .6s ease,transform 1.1s cubic-bezier(.2,.85,.25,1.08)}
.postcard.landed:hover{transform:rotate(0deg) translate3d(0,-4px,0);transition:transform .7s cubic-bezier(.22,.9,.24,1),box-shadow .7s ease}
.pc-stamp{opacity:0}
.postcard.landed .pc-stamp{animation:pcStamp .6s cubic-bezier(.2,.8,.3,1.25) .55s both}
@keyframes pcStamp{from{opacity:0;transform:translate3d(18px,-26px,0) rotate(14deg) scale(1.25)}to{opacity:1;transform:rotate(3deg)}}
.pc-postmark{opacity:0}
.postcard.landed .pc-postmark,.postcard.sent .pc-postmark{animation:pcMark .5s cubic-bezier(.3,1.5,.5,1) 1.05s both}
.postcard.sent .pc-postmark{animation-delay:0s}
@keyframes pcMark{0%{opacity:0;transform:rotate(-12deg) scale(1.7)}60%{opacity:1;transform:rotate(-12deg) scale(.94)}100%{opacity:1;transform:rotate(-12deg) scale(1)}}

@media (max-width:820px){
  .pc-paper{grid-template-columns:1fr;gap:26px;padding:26px 22px 24px}
  .pc-rule{height:1px;background:linear-gradient(90deg,transparent,rgba(var(--ember-rgb),.4) 12%,rgba(var(--ember-rgb),.4) 88%,transparent)}
  .pc-address{order:-2}                        /* the address (and the stamp) read first on a phone */
  .pc-rule{order:-1}
  .pc-sign{display:none}                       /* a sign-off reads oddly above the message */
  .pc-line span{white-space:normal}            /* the email may break, only before the @ (a <wbr> in the markup) */
}
@media (max-width:420px){
  .postcard{padding:7px}
  .pc-greet{font-size:25px}
  .pc-line span{font-size:17px}
  .pc-line{gap:10px}
  .pc-line i{width:34px;height:34px;font-size:15px}
  .pc-postmark{right:40px;transform:rotate(-12deg) scale(.85)}
}
@media (prefers-reduced-motion: reduce){
  .postcard,.postcard.landed,.postcard.landed:hover{opacity:1;transform:none;transition:none}
  .pc-stamp,.pc-postmark{opacity:1;animation:none!important}
}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:36px}
.feat{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px}
.feat .f-ico{width:46px;height:46px;border-radius:12px;background:rgba(var(--ember-rgb),.12);display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:14px}
.feat h3{margin:0 0 8px;font-size:15px}
.feat p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}
.band.cta{text-align:center}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.cta-row .btn{margin:0}
footer.site-footer{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;color:var(--muted);font-size:12.5px;padding:34px 20px;border-top:1px solid var(--line)}
footer.site-footer nav a{color:var(--muted);margin:0 4px;font-weight:600}
footer.site-footer nav a:hover{color:var(--accent)}
@media (max-width:760px){
  .scroll-cue{display:none}           /* phones swipe down; the chips own the bottom edge */
  main .band{padding:60px 16px}
  .hero{min-height:560px}
  .hero-overlay{padding:60px 16px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .loader-mark,.loader-bar i,.scroll-cue,.loader-shine,.hero-grain,.hero-head .grad{animation:none}
  .company-app>*{animation:none}
  /* the sky pass steps aside entirely: no runway, no veil, no sheet */
  .hero-veil{display:none}
  .hero-run > main{border-radius:0;box-shadow:none;background:var(--night-1)}
  header.hero{position:relative}                 /* nothing pinned without motion */
  .hero-drift{transform:none!important;opacity:1!important}
  header.hero.labels-on .map-labels,header.hero .hud,.company-chips{opacity:1!important}
  .reveal{opacity:1;transform:none}
  main .band .reveal,.reveal{transition:none}
  /* the cards are simply there; the hover reveal stays, minus the motion */
  .cl-link,.cl-sheet,.cl-media,.cl-glyph,.cl-logo,.cl-ridge,.cl-more,.cl-go{transition:none!important}
}

/* ---------- map labels: readable names that follow the rooftops ----------
   A sign on a roof shrinks with distance; these do not. city.js projects
   each rooftop to the screen every frame and places its tag there, lifting
   a tag clear when two would overlap. The stem is a leader line: whatever
   the tag does — lifted, or stepped aside by the tower — it stretches and
   swings from the tag down to the exact rooftop it labels. */
.map-labels{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.map-pin{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;
  border-radius:99px;background:rgba(10,16,32,.86);border:1px solid rgba(255,255,255,.14);color:#fff;
  font-size:13px;line-height:1.1;white-space:nowrap;text-decoration:none;pointer-events:auto;cursor:pointer;
  box-shadow:0 6px 18px rgba(2,6,16,.45);backdrop-filter:blur(6px);will-change:transform;
  transition:opacity .25s,border-color .2s,background .2s}
.map-pin::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:var(--stem,10px);
  transform-origin:50% 0;transform:translateX(-50%) rotate(var(--tilt,0deg));
  background:linear-gradient(var(--brand,#e3bd63),rgba(255,255,255,0))}
.map-pin .pin-badge{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:12px;background:var(--brand,#e3bd63);color:#fff;flex:none}
.map-pin .pin-text{display:flex;flex-direction:column;gap:2px}
.map-pin b{font-weight:800;font-size:13px}
.map-pin small{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#b9c6dc}
.map-pin .pin-go{color:var(--brand,#e3bd63);font-weight:800;font-size:15px;margin-left:2px}
.map-pin:hover,.map-pin.hot{border-color:var(--brand,#e3bd63);background:rgba(16,24,46,.95)}
.map-pin.off{opacity:0;pointer-events:none}
.map-pin.hq{pointer-events:none;border-color:rgba(227,189,99,.55);padding-right:12px}
.map-pin.hq .pin-badge{background:linear-gradient(135deg,#f0c877,#c9a44e);color:#1b1405}
.map-pin.hq .pin-badge.logo{width:30px;height:30px;background:none}
.map-pin .pin-badge.logo img{width:100%;height:100%;display:block}
.map-pin.hq b{color:#ffe7b0;letter-spacing:.06em}

/* ---------- phones: fly-to buttons for each company ---------- */
.company-chips{display:none}
.tooltip.pinned{pointer-events:auto;cursor:pointer}
@media (max-width:760px){
  .map-pin{font-size:12px;padding:3px 8px 3px 3px;gap:6px}
  .map-pin .pin-badge{width:20px;height:20px;font-size:11px}
  .map-pin b{font-size:12px}
  .map-pin small,.map-pin .pin-go{display:none}
  .company-chips{display:flex;position:absolute;left:0;right:0;bottom:12px;z-index:11;gap:8px;padding:0 12px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .company-chips::-webkit-scrollbar{display:none}
  .company-chips button{flex:none;display:flex;align-items:center;gap:7px;padding:7px 12px 7px 7px;border-radius:99px;
    border:1px solid var(--line);background:rgba(10,16,32,.86);color:#fff;font:700 12.5px/1 inherit;backdrop-filter:blur(8px)}
  .company-chips button .pin-badge{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:800;color:#fff}
  .company-chips button.on{border-color:var(--accent);background:rgba(20,30,56,.95)}
  .hud-legend{display:none}
  .tooltip.pinned{bottom:112px}       /* clear of the chips row (the hero stops 44px short) */
  .zoom-ctrl{bottom:64px}
}