/* =====================================================================
   TOKENS — the Snow palette, type and spacing.
   Colours are the ones in Snow's style.css; the accent is the favicon
   blue (#0366d6). Light only: there is no dark mode for this page.
   Every other stylesheet reads these and nothing else.
   ===================================================================== */
:root {
  color-scheme: light;

  /* surfaces */
  --snow: #f8f9fa;          /* the page */
  --paper: #ffffff;         /* cards, panels, inputs */
  --frost: #fbfcfd;         /* quiet fills: fact cells, rails */
  --mist: #f2f5f8;          /* pressed and inset fills */

  /* ink */
  --basalt: #16202a;        /* headings, primary buttons */
  --ink: #24292e;           /* body text */
  --ink-2: #3b4855;
  --muted: #586069;
  --faint: #8a97a3;
  --ghost: #a3aeb9;

  /* lines */
  --line: #d1d5da;
  --line-soft: #e8ecf1;
  --line-faint: #f0f3f6;

  /* accent: glacier, the Snow mark */
  --glacier: #0366d6;
  --glacier-deep: #0356b6;
  --glacier-line: #bcd9f5;
  --glacier-tint: #eaf3fd;
  --glacier-wash: #e8f0fb;

  /* signals */
  --moss: #1a7f37;          --moss-tint: #e9f8ee;
  --ember: #cf222e;         --ember-tint: #fdecee;   --ember-line: #f3c2c7;
  --amber: #9a6700;         --amber-tint: #fdf7e3;
  --violet: #8957e5;

  /* map surfaces */
  --sea: #e7eff8;
  --land: #ffffff;
  --coast: #c3ccd5;

  /* type — the three families Snow loads */
  --display: "Bricolage Grotesque", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* space */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --gutter: clamp(16px, 4vw, 40px);
  --wrap: 1240px;
  --wrap-wide: 1440px;
  --section: clamp(72px, 11vw, 144px);
  --nav-h: 60px;

  /* shape */
  --r-sm: 6px; --r: 8px; --r-md: 12px; --r-lg: 14px; --pill: 999px;

  /* depth */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-2: 0 4px 12px rgba(3, 102, 214, .13);
  --shadow-3: 0 12px 32px rgba(15, 25, 40, .16);
  --shadow-4: 0 24px 70px rgba(15, 25, 40, .22), 0 2px 6px rgba(15, 25, 40, .12);
  --ring: 0 0 0 3px rgba(3, 102, 214, .15);

  /* time */
  --t-fast: .13s ease;
  --t-med: .22s ease;
  --ease-out: cubic-bezier(.2, .7, .1, 1);
}

/* No scrollbars, anywhere, on any page — scrolling still works
   (wheel, touch, keys). Firefox, old Edge, then WebKit/Blink. */
*, html, body { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar, html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; background: transparent; }

/* No zoom-on-focus, anywhere, on any form. iOS Safari zooms into any
   field whose text is under 16px; at 16px it never does. Touch screens
   only, so desktop sizes are untouched; pinch-zoom still works. */
@media (hover: none) and (pointer: coarse) {
  input, select, textarea, [contenteditable] { font-size: max(16px, 1em) !important; }
}

/* SECTION — NAV ------------------------------------------------------
   The one site bar, shared by the farm (landing/), the map, the articles
   (scripts/blog) and the buyer page (compute/): the word "Snow" on the left
   (it goes to the farm), then only the links that page needs, never the page
   you are on, and at most one solid action. Its edges line up with the
   page's content column (--wrap). The farm makes it see-through. */
#sitenav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  height: var(--nav-h);
  padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  background: rgba(248, 249, 250, .86);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 0; /* no line under the bar */
  transition: background var(--t-med, .2s);
}
#sitenav.scrolled { background: rgba(248, 249, 250, .92); }
#sitenav .mark {
  display: inline-flex; align-items: center;
  font: 800 27px/1 var(--display); letter-spacing: -.03em; color: var(--basalt); text-decoration: none;
} /* the bold wordmark, as the farm page first had it */
.navacts { display: inline-flex; align-items: center; gap: 4px; }
.navlink {
  padding: 8px 12px; border-radius: var(--pill);
  font: 500 13.5px/1 var(--sans); color: var(--muted); text-decoration: none; white-space: nowrap;
  transition: color var(--t-fast, .12s), background var(--t-fast, .12s);
}
.navlink:hover { color: var(--basalt); background: var(--mist); }
.navlink[aria-current="page"] { color: var(--basalt); }
.navlink.solid { margin-left: 6px; padding: 10px 16px; background: var(--basalt); color: #fff; }
.navlink.solid:hover { background: var(--glacier); color: #fff; }
/* phones: the page you are on drops out of the list, and the links tighten up */
@media (max-width: 560px) {
  #sitenav { gap: var(--s2); }
  #sitenav .mark { font-size: 24px; }
  .navacts { gap: 0; }
  .navlink { padding: 8px 7px; font-size: 13px; }
  .navlink[aria-current="page"] { display: none; }
  .navlink.solid { margin-left: 4px; padding: 9px 12px; }
}
@media (max-width: 380px) { .navlink.solid { display: none; } }
/* the site footer: the same short line on every page but the farm.
   Only the company pages, never the page you are on (the bar already links the rest). */
.site-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: clamp(72px, 10vw, 128px);
  padding: 28px max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))) calc(env(safe-area-inset-bottom, 0px) + 36px);
  font: 400 13px/1.4 var(--sans); color: var(--muted);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--basalt); }
@media print { #sitenav, .site-foot { display: none; } }

/* =====================================================================
   COMPANY — the about, careers, role and contact pages. The same look as
   the map and the articles: the snow-white page, light display headings,
   Inter and JetBrains Mono, the shared bar and footer (nav.css).
   scripts/site.mjs inlines both imports on publish.
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--snow); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: var(--glacier); }
a:hover { color: var(--glacier-deep); }
:focus-visible { outline: 2px solid var(--glacier); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
img { display: block; max-width: 100%; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-top: clamp(72px, 10vw, 128px); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: var(--s5) var(--s7); align-items: start; }
@media (max-width: 820px) { .split { grid-template-columns: minmax(0, 1fr); gap: var(--s3); } }

.eyebrow { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #6b7682; }
.title { margin-top: var(--s5); max-width: 15ch; font: 300 clamp(44px, 7.4vw, 104px)/.96 var(--display); letter-spacing: -.035em; font-optical-sizing: auto; color: var(--basalt); }
h2 { font: 400 clamp(28px, 3.4vw, 44px)/1.04 var(--display); letter-spacing: -.025em; color: var(--basalt); }
h3 { font: 600 16px/1.35 var(--sans); color: var(--basalt); }
.lede { font-size: clamp(17px, 1.6vw, 19.5px); line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.lede + .lede { margin-top: var(--s4); }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.row { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* buttons: the map's pills */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border-radius: var(--pill); border: 1px solid transparent; font: 500 15px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.btn.dark { background: var(--basalt); color: #fff; }
.btn.dark:hover { background: var(--glacier); color: #fff; }
.btn.ghost { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--glacier-tint); color: var(--glacier-deep); border-color: var(--glacier-line); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* three short ideas under a hairline */
.ideas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s6); }
.ideas > div { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.ideas h3 { font: 400 26px/1.1 var(--display); letter-spacing: -.02em; }
.ideas p { font-size: 15px; color: var(--muted); }

/* ---- about ---- */
.pod3d { margin-top: clamp(48px, 7vw, 88px); }
.pod3d .m3d { border-radius: var(--r-lg); }
.pod3d figcaption { margin-top: 12px; font-size: 13px; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats > div { padding: 22px 20px; display: flex; flex-direction: column; gap: 6px; }
.stats > div + div { border-left: 1px solid var(--line-soft); }
.stats b { font: 300 48px/1 var(--display); letter-spacing: -.03em; color: var(--basalt); }
.stats span { font-size: 13px; color: var(--muted); }
@media (max-width: 560px) { .stats > div + div { border-left: 0; border-top: 1px solid var(--line-soft); } .stats > div { padding-inline: 0; } }
/* the team: a small round photo beside each name */
.team { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px 24px; }
.team li { display: flex; align-items: center; gap: 14px; }
.team img { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--mist); }
.team b { display: block; font: 600 15px/1.35 var(--sans); color: var(--basalt); }
.team span { font-size: 13.5px; color: var(--muted); }
.story { list-style: none; padding: 0; }
.story li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--s5); padding: 18px 0; border-top: 1px solid var(--line-soft); }
.story time { font: 500 13px/1.6 var(--mono); color: var(--glacier); }
.story p { color: var(--ink-2); }
@media (max-width: 560px) { .story li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s4); }
.logos a { height: 88px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: center; padding: 0 24px; text-decoration: none; }
.logos a:hover { border-color: var(--line); }
.logos img { max-height: 30px; max-width: 100%; width: auto; filter: grayscale(1); opacity: .85; }
.logos .word { font: 600 17px/1 var(--sans); letter-spacing: -.01em; color: var(--ink-2); }
.closer { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s5); }
.closer h2 { max-width: 18ch; font-size: clamp(28px, 4vw, 50px); }

/* ---- careers ---- */
.teams { display: flex; flex-direction: column; gap: var(--s7); }
.team-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); padding-bottom: 12px; }
.team-head h3 { font: 400 24px/1.1 var(--display); letter-spacing: -.02em; }
.team-head span { font-size: 13px; color: var(--muted); }
.job { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 6px 24px; align-items: center; padding: 20px 0; border-top: 1px solid var(--line-soft); text-decoration: none; color: inherit; }
.job b { display: block; font: 600 16px/1.35 var(--sans); color: var(--basalt); }
.job small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.job .meta { font: 400 13px/1.5 var(--mono); color: var(--ink-2); }
.job .pay { font: 400 13px/1.5 var(--mono); color: #6b7682; }
.job .go { font: 500 13.5px/1 var(--sans); color: var(--muted); white-space: nowrap; }
.job:hover b, .job:hover .go { color: var(--glacier); }
@media (max-width: 820px) { .job { grid-template-columns: minmax(0, 1fr) auto; } .job .meta, .job .pay { grid-column: 1; } .job .go { grid-row: 1; grid-column: 2; } }
.terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 var(--s6); }
.terms > div { padding: 16px 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 4px; }
.terms p { font-size: 14px; line-height: 1.55; color: var(--muted); }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s5); border-top: 1.5px solid #c3ccd5; }
.steps li { padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.steps i { font: 500 12px/1 var(--mono); font-style: normal; color: var(--glacier); }
.steps p { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* ---- a role ---- */
.back { display: inline-block; font: 500 13.5px/1 var(--sans); color: var(--muted); text-decoration: none; }
.back:hover { color: var(--basalt); }
.role-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--s7) clamp(32px, 6vw, 88px); align-items: start; }
@media (max-width: 900px) { .role-grid { grid-template-columns: minmax(0, 1fr); } }
.role-body { display: flex; flex-direction: column; gap: var(--s7); }
.role-body section { display: flex; flex-direction: column; gap: var(--s4); }
.role-body h2 { font-size: clamp(24px, 2.6vw, 32px); }
.ticks { list-style: none; padding: 0; display: flex; flex-direction: column; }
.ticks li { position: relative; padding: 12px 0 12px 28px; border-top: 1px solid var(--line-soft); color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 8px; height: 8px; border-radius: 50%; background: var(--glacier); }
.ticks.soft li::before { background: transparent; border: 1.5px solid var(--glacier); }
.facts-card { position: sticky; top: calc(var(--nav-h) + 24px); background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 900px) { .facts-card { position: static; } }
.facts-card dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; }
.facts-card dt { font: 500 11px/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #6b7682; }
.facts-card dd { margin: 0; font-size: 15px; color: var(--basalt); }
.facts-card .salary { font: 300 34px/1.05 var(--display); letter-spacing: -.02em; color: var(--basalt); }
.facts-card .note { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.facts-card .btn { width: 100%; }
.missing { padding: 48px 0; }

/* ---- contact ---- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: var(--s6) clamp(32px, 6vw, 72px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 36px); }
.form { display: flex; flex-direction: column; gap: 22px; }
.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.lbl, .form legend { display: block; margin: 0 0 6px; padding: 0; font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lbl i, .fine i { font-style: normal; color: var(--glacier); }
.in { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font: 400 16px/1.3 var(--sans); color: var(--ink); -webkit-appearance: none; appearance: none; }
.in:focus { outline: none; border-color: var(--glacier); box-shadow: var(--ring); }
.in[aria-invalid="true"] { border-color: var(--ember); }
textarea.in { padding: 12px 13px; min-height: 150px; resize: vertical; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 560px) { .two { grid-template-columns: minmax(0, 1fr); } }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills label { position: relative; display: inline-flex; cursor: pointer; }
.pills input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pills span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--pill); background: #fff; font: 500 14px/1 var(--sans); color: var(--ink); user-select: none; }
.pills label:hover span { border-color: var(--glacier-line); background: var(--glacier-tint); color: var(--glacier-deep); }
.pills input:checked + span { background: var(--basalt); border-color: var(--basalt); color: #fff; }
.pills input:focus-visible + span { outline: 2px solid var(--glacier); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.err { margin-top: 6px; font-size: 13px; color: var(--ember); }
.fine { font-size: 13px; line-height: 1.5; color: var(--muted); }
.status { padding: 10px 14px; border-radius: var(--r); background: var(--ember-tint); color: var(--ember); font-size: 14px; }
.done { display: flex; flex-direction: column; gap: 14px; padding: 12px 0; }
.done .tick { width: 40px; height: 40px; border-radius: 50%; background: var(--basalt); display: flex; align-items: center; justify-content: center; }
.done h2 { font-size: 34px; }
.reach { display: flex; flex-direction: column; gap: 26px; }
.reach > div { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.reach a { font: 400 15px/1.5 var(--mono); color: var(--basalt); text-decoration: none; }
.reach a:hover { color: var(--glacier); }
.reach p { font-size: 14px; color: var(--muted); }

/* ---- applying: the CV drop zone, the consent line, the next steps ---- */
.drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 132px; padding: 20px; border: 1.5px dashed var(--line); border-radius: var(--r-md); background: var(--frost); color: var(--muted); text-align: center; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop b { color: var(--basalt); font-weight: 600; }
.drop small { font-size: 12.5px; color: #6b7682; }
.drop:hover, .drop.over { border-color: var(--glacier); background: var(--glacier-tint); color: var(--glacier-deep); }
.drop.has { border-style: solid; border-color: var(--glacier-line); background: var(--glacier-tint); }
.drop[aria-invalid="true"] { border-color: var(--ember); }
.drop:focus-within { outline: 2px solid var(--glacier); outline-offset: 2px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.consent input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--basalt); }
.next { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.next li::marker { font: 500 12px var(--mono); color: var(--glacier); }

/* ---- stealth: names, faces, figures and partners withheld for now. The words stay in the page
   for screen readers ("Name withheld"); sighted readers see a solid bar. ---- */
.redact { display: inline-block; height: .8em; max-width: 100%; vertical-align: middle; overflow: hidden; white-space: nowrap; color: transparent; background: var(--basalt); border-radius: 3px; user-select: none; }
.stats b.redact { height: 38px; margin-bottom: 4px; }
.story .redact { height: .85em; vertical-align: -.05em; }
.story time .redact { height: 12px; }
.team b.redact { display: block; height: 14px; margin: 2px 0 7px; }
.redact-img { flex: none; width: 56px; height: 56px; border-radius: 50%; background: repeating-linear-gradient(135deg, var(--basalt) 0 7px, #26323e 7px 14px); }
/* Trusted by: a slow, endless row of withheld names, fading out at both ends */
.marquee { display: flex; overflow: hidden; padding: 18px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { flex: none; display: flex; align-items: center; gap: 64px; margin: 0; padding: 0 32px; list-style: none; animation: marquee 32s linear infinite; }
.marquee-track li { display: flex; }
.marquee-track .redact { height: 18px; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } .marquee-track[aria-hidden] { display: none; } .marquee-track { flex-wrap: wrap; row-gap: 24px; } }