/* ============================================================
   BASTILLE LABS — bastillelabs.xyz
   Single-page site. Design Kit V2 supplies the brand tokens
   (assets/bastille-labs-tokens.css); this file supplies the
   layout, the editorial rhythm and the motion.

   Map:  1 local tokens · 2 base · 3 navigation
         5 hero · 6 sections · 7 pillars
         8 use cases · 9 method · 10 statement · 11 clients
         12 contact + footer · 13 reveal · 14 responsive
   ============================================================ */


/* ---------- 1. LOCAL TOKENS -------------------------------- */
:root {
  --wrap: 1240px;
  --nav-h: 70px;

  /* The kit's --muted is a decoration grey. Body copy needs more
     contrast than that, so reading text uses --ink-body (about 7:1
     on parchment) and --muted stays for labels and annotations. */
  --ink-body: rgba(28, 27, 22, .76);

  /* The kit's --muted (.55 alpha) sits under 4.5:1 on parchment, and it
     carries real text here (section indices, capability lists, footer),
     so it is nudged up. Decorative weight is preserved. */
  --muted: rgba(28, 27, 22, .66);

  --ease: cubic-bezier(.22, .68, .28, 1);
  --band-pad: clamp(72px, 11vh, 132px);
}


/* ---------- 2. BASE ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--encre);
}

h1, h2, h3, p, ul, figure, figcaption { margin: 0; }
ul { padding: 0; list-style: none; }

img, svg { max-width: 100%; }

::selection { background: var(--encre); color: var(--parchemin); }

:focus-visible {
  outline: 2px solid var(--rouge);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  top: -100px;
  left: var(--u2);
  z-index: 100;
  padding: 10px 16px;
  background: var(--encre);
  color: var(--parchemin);
  border: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.skip:focus { top: var(--u2); }

/* kit-flavoured helpers reused across sections */
.eyebrow,
.section-index {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before,
.section-index::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--rouge);
}


/* ---------- 4. NAVIGATION ---------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--parchemin) 90%, transparent);
  border-bottom-color: var(--trait);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.nav__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--u3);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: var(--u2);              /* kit: symbol to text = 2U */
  margin-right: auto;
  color: var(--encre);
  border: 0;
  text-decoration: none;
}
.mark__symbol { display: block; height: 26px; width: auto; color: var(--encre); }
.mark__standard { fill: var(--rouge); }
.mark__word {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
}

.nav__links { display: flex; gap: clamp(18px, 2.4vw, 34px); }
.nav__links a {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-body);
  border: 0;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.nav__links a:hover { color: var(--encre); border-bottom-color: var(--rouge); opacity: 1; }

.nav__cta { padding: 11px 20px; font-size: 11px; }

.nav__toggle {
  display: none;
  width: 40px; height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--trait-fort);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--encre);
}
.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  display: block;
  width: 16px; height: 1px;
  margin: 0 auto;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav__toggle-bars { position: relative; }
.nav__toggle-bars::before { content: ""; position: absolute; top: -5px; }
.nav__toggle-bars::after  { content: ""; position: absolute; top: 5px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after  { transform: translateY(-5px) rotate(-45deg); }

.nav__menu[hidden] { display: none; }

.nav__menu {
  border-top: 1px solid var(--trait);
  background: var(--parchemin);
  padding: var(--u2) clamp(20px, 5vw, 56px) var(--u3);
  display: grid;
  gap: var(--u2);
}
.nav__menu a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--encre);
  border: 0;
  padding: 6px 0;
  border-bottom: 1px solid var(--trait);
}


/* ---------- 5. HERO ---------------------------------------- */
/* No illustration: the headline carries the screen, a single rule
   gives it structure, and the supporting copy sits beneath it. */
.hero {
  padding: clamp(56px, 11vh, 128px) 0 clamp(52px, 8vh, 100px);
}

.hero__title {
  margin: var(--u3) 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 6.8vw, 96px);
  line-height: 1.02;
  letter-spacing: .01em;
  max-width: 15ch;
  text-wrap: balance;
}

.hero__rule {
  display: flex;
  justify-content: space-between;
  gap: var(--u2);
  margin: clamp(30px, 5vh, 56px) 0 clamp(28px, 4.5vh, 48px);
  padding-top: 12px;
  border-top: 1px solid var(--trait-fort);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
}

.hero__lede {
  font-size: clamp(17px, 1.2vw + 12px, 22px);
  line-height: 1.56;
  color: var(--ink-body);
  max-width: 44ch;
}

.hero__support {
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--encre);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u2);
  margin-top: clamp(32px, 5vh, 56px);
}


/* ---------- 7. SECTIONS ------------------------------------ */
.band { padding: var(--band-pad) 0; }
.band--rule { border-top: 1px solid var(--trait); }

/* ink band: the kit's dark values, scoped to the section */
.band--dark {
  /* literal values here: the custom properties below are redefined on this
     same element, so var(--encre) would already resolve to the light value */
  background: #1C1B16;
  color: #F0EDE3;
  --encre: #F0EDE3;
  --parchemin: #1C1B16;
  --rouge: var(--rouge-vif);
  --trait: rgba(240, 237, 227, .14);
  --trait-fort: rgba(240, 237, 227, .3);
  --muted: rgba(240, 237, 227, .68);
  --ink-body: rgba(240, 237, 227, .82);
  background-image: repeating-linear-gradient(90deg,
    rgba(240, 237, 227, .07) 0 1px, transparent 1px var(--u12));
}

.section-head {
  display: grid;
  gap: var(--u2);
  margin-bottom: clamp(40px, 6vh, 76px);
}
.section-title {
  max-width: 20ch;                 /* ch resolves on this element's own size */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(27px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: .02em;
  text-wrap: balance;
}

/* 01 · context, deliberately editorial and wide */
.intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 90px);
  align-items: start;
}
.intro .section-index { grid-column: 1 / -1; }
.intro__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4.6vw, 62px);
  line-height: 1.04;
  letter-spacing: .01em;
  max-width: 13ch;
  text-wrap: balance;
}
.intro__body { display: grid; gap: var(--u3); max-width: 52ch; }
.intro__body p { font-size: clamp(15px, .7vw + 12px, 17px); line-height: 1.68; color: var(--ink-body); }
.intro__closing {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.6vw + 12px, 28px) !important;
  line-height: 1.28 !important;
  color: var(--encre) !important;
  padding-top: var(--u);
}


/* ---------- 8. PILLARS ------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.pillar {
  padding-top: var(--u3);
  border-top: 1px solid var(--trait-fort);
}
.pillar__index {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: .18em;
  color: var(--muted);
}
.pillar__title {
  margin: var(--u3) 0 var(--u2);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 1.5vw + 14px, 30px);
  line-height: 1.14;
  letter-spacing: .02em;
}
.pillar__claim { font-weight: 600; font-size: 16px; line-height: 1.45; }
.pillar__body {
  margin-top: var(--u2);
  font-size: 15px;
  line-height: 1.68;
  color: var(--ink-body);
}
.pillar__areas { margin-top: var(--u3); }
.pillar__areas li {
  padding: 9px 0;
  border-top: 1px solid var(--trait);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}


/* ---------- 9. USE CASES ----------------------------------- */
/* A hairline grid rather than floating cards: the rules are the
   design, so the cells share 1px gaps over the frame colour. */
.cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--trait-fort);
  border: 1px solid var(--trait-fort);
}
.case {
  background: var(--parchemin);
  padding: clamp(22px, 2.4vw, 34px);
}
.case__index {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: .18em;
  color: var(--rouge);
}
.case__title {
  margin: var(--u2) 0 10px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}
.case__body { font-size: 14.5px; line-height: 1.62; color: var(--ink-body); }


/* ---------- 10. METHOD ------------------------------------- */
.method { display: grid; gap: clamp(40px, 6vh, 72px); }
.method__text {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 4vw, 64px);
  max-width: 92ch;
}
.method__text p { font-size: clamp(15px, .7vw + 12px, 17px); line-height: 1.68; color: var(--ink-body); }

.method__objective {
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.6vw + 12px, 30px);
  line-height: 1.24;
  letter-spacing: .02em;
  padding-top: clamp(20px, 3vh, 34px);
  border-top: 1px solid var(--trait);
}

.flow svg { display: block; width: 100%; height: auto; }
.flow__box {
  fill: none;
  stroke: var(--trait-fort);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.flow__label {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  fill: var(--encre);
  text-anchor: middle;
}
.flow__drop,
.flow__rail {
  fill: none;
  stroke: var(--rouge);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.flow__ai {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  fill: var(--rouge);
}

/* the rail and its drops draw themselves when the figure is reached */
.js .flow__rail { stroke-dasharray: 990; stroke-dashoffset: 990; }
.js .flow__drop { stroke-dasharray: 40; stroke-dashoffset: 40; }
.js .flow.is-visible .flow__rail {
  transition: stroke-dashoffset 1.8s var(--ease) .2s;
  stroke-dashoffset: 0;
}
.js .flow.is-visible .flow__drop {
  transition: stroke-dashoffset .5s var(--ease) calc(.5s + var(--i) * .16s);
  stroke-dashoffset: 0;
}


/* ---------- 11. STATEMENT ---------------------------------- */
.statement-band { border-top: 1px solid var(--trait); }
.statement {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
}
.statement .section-index { grid-column: 1 / -1; }
.statement__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 7.6vw, 108px);
  line-height: .98;
  letter-spacing: .01em;
}
.statement__body { display: grid; gap: var(--u3); max-width: 46ch; }
.statement__body p { font-size: clamp(15px, .7vw + 12px, 17px); line-height: 1.68; color: var(--ink-body); }


/* ---------- 12. CLIENTS ------------------------------------ */
.clients {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--trait-fort);
  border: 1px solid var(--trait-fort);
}
.clients li {
  background: var(--parchemin);
  padding: clamp(18px, 2vw, 26px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}


/* ---------- 13. CONTACT + FOOTER --------------------------- */
.contact__inner { display: grid; gap: var(--u3); justify-items: start; }
.contact__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 60px);
  line-height: 1.06;
  letter-spacing: .01em;
  max-width: 18ch;
  text-wrap: balance;
}
.contact__body {
  font-size: clamp(15px, .7vw + 12px, 17px);
  line-height: 1.68;
  color: var(--ink-body);
  max-width: 52ch;
}
.contact .btn { margin-top: var(--u2); }
/* the kit button already inverts inside the band, since --encre and
   --parchemin are swapped there; only the hover needs restating */
.band--dark .btn:hover { background: var(--rouge); border-color: var(--rouge); color: #F0EDE3; }

.footer { border-top: 1px solid var(--trait); padding: var(--u6) 0; }
.footer__inner {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  gap: var(--u3);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer__name { color: var(--encre); }


/* ---------- 14. REVEAL ------------------------------------- */
/* Only applied when JS is present, so the page is complete without it. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.no-reveal .reveal { opacity: 1 !important; transform: none !important; }
.js .pillar.is-visible,
.js .case.is-visible,
.js .clients li.is-visible { transition-delay: calc(var(--i, 0) * .07s); }


/* ---------- 15. RESPONSIVE --------------------------------- */
@media (max-width: 1080px) {
  .pillars { grid-template-columns: 1fr; gap: 0; }
  .pillar { margin-top: var(--u4); }
  .cases { grid-template-columns: repeat(2, 1fr); }
  .clients { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; }

  .hero__grid { grid-template-columns: 1fr; gap: var(--u4); }

  .intro { grid-template-columns: 1fr; }
  .statement { grid-template-columns: 1fr; align-items: start; }
  .method__text { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; justify-content: start; }
}

@media (max-width: 620px) {
  :root { --nav-h: 62px; }
  .cases, .clients { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; text-align: center; }
  .footer__inner { grid-template-columns: 1fr; gap: var(--u2); }
  .flow svg { min-width: 620px; }
  .flow { overflow-x: auto; }
}


/* ---------- 16. PREFERENCES -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .flow__rail, .js .flow__drop { stroke-dashoffset: 0; }
}


/* ---------- 17. PRINT -------------------------------------- */
@media print {
  .nav, .nav__menu, .skip { display: none !important; }
  .band--dark { background: none !important; color: #1C1B16 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .band { padding: 24pt 0; }
  a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}


/* ============================================================
   18. TEMPORARY — ALL RULES REMOVED
   Every hairline, frame and background grid is switched off here,
   and the two grids that were built out of 1px gaps fall back to
   plain spacing. Delete this whole block to bring the rules back.
   ============================================================ */

/* background grids */
body { background-image: none; }
.band--dark { background-image: none; }

/* section, header and footer rules */
.band--rule,
.statement-band,
.footer,
.nav.is-stuck,
.nav__menu,
.nav__menu a { border: 0; }

.nav__links a { border-bottom: 0; }
.nav__links a:hover { border-bottom-color: transparent; }

/* hero */
.hero__rule { border-top: 0; padding-top: 0; }

/* capabilities */
.pillar { border-top: 0; padding-top: 0; }
.pillar__areas li { border-top: 0; padding: 5px 0; }

/* use cases: the hairline grid becomes spaced blocks */
.cases {
  gap: clamp(30px, 3.4vw, 56px);
  background: none;
  border: 0;
}
.case { background: none; padding: 0; }

/* clients: same treatment */
.clients {
  gap: clamp(12px, 1.6vw, 20px) clamp(24px, 3vw, 48px);
  background: none;
  border: 0;
}
.clients li { background: none; padding: 0; }

/* method */
.method__objective { border-top: 0; padding-top: 0; margin-top: clamp(18px, 3vh, 30px); }