/* ============================================================
   Bon Flow - landing page layout
   Built ON the locked design system (brand/tokens.css).
   This file is page layout + motion only; all colors, type,
   buttons, markers, and rules come from the tokens.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; }
img, svg { max-width: 100%; }

/* ---------- Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--bf-container);
  margin-inline: auto;
  padding-inline: var(--bf-space-7);
}
@media (max-width: 720px) { .wrap { padding-inline: var(--bf-space-5); } }

.section { padding-block: var(--bf-space-10); }
.section--tight { padding-block: var(--bf-space-9); }
@media (max-width: 720px) { .section, .section--tight { padding-block: var(--bf-space-8); } }

.section--night { background: var(--bf-night); }
.section--night h1, .section--night h2, .section--night h3 { color: var(--bf-cream); }
.section--night p { color: var(--bf-on-night-fg-1); }
.section--sunk { background: var(--bf-bg-2); }
.section--cream { background: var(--bf-cream); }
.problem-band { padding-bottom: 0; }

.lede { font-size: var(--bf-size-lead); line-height: 1.45; max-width: 54ch; }
.measure { max-width: 60ch; }
.measure--wide { max-width: 74ch; }

/* Section opener: marker over a big headline, editorial left rail */
.opener { margin-bottom: var(--bf-space-8); }
.opener h2 { max-width: 16ch; }
.opener .bf-marker, .opener .bf-tag { margin-bottom: var(--bf-space-4); }

/* ---------- Header / body rhythm ----------
   The design tokens zero every heading margin, which leaves headers
   crammed against the paragraph below. Restore a consistent gap so
   every section reads the same: eyebrow -> space -> headline -> space -> body. */
.bf-tag { margin-bottom: var(--bf-space-4); }
h2 + p, h2 + .lede, h2 + .measure { margin-top: var(--bf-space-5); }
h3 + p { margin-top: var(--bf-space-3); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bf-night);
  border-bottom: var(--bf-rule-night);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--bf-space-5);
}
.brand-lockup { height: 34px; width: auto; display: block; }
.site-header nav { display: flex; align-items: center; gap: var(--bf-space-6); }
/* The language + CTA pair is wrapped in .bf-nav__foot so the phone panel can
   sit them on their own row. On desktop `display: contents` dissolves that
   wrapper, so both stay direct flex children of nav and the row is unchanged. */
.site-header .bf-nav__foot { display: contents; }
/* nav links sit on the dark header */
.site-header .bf-navlink { color: var(--bf-cream); }
.site-header .bf-navlink--muted { color: var(--bf-on-night-fg-2); }
.site-header .bf-navlink:hover { color: var(--bf-cobalt-soft); }

/* A pill label must never break. Squeezed in a flex row it otherwise wraps to
   two or three lines and the pill balloons into a blob - which is exactly what
   the phone header used to do. The longest label we ship ("Boka ett
   kostnadsfritt samtal") is 249px, so it still fits a 320px screen unbroken. */
.bf-btn { white-space: nowrap; }

/* Language switch: a fixed-order EN / SV pair, same order on both languages so
   it never moves between pages. The current language is marked and inert; the
   other one is the link. Both labels are two characters, so it fits at any
   width without a long/short swap. */
.site-header .bf-langswitch {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-family: var(--bf-font-display); font-weight: 500; font-size: 15px;
  white-space: nowrap;
}
.site-header .bf-langswitch__on  { color: var(--bf-cream); }
.site-header .bf-langswitch__sep { color: var(--bf-on-night-fg-2); }
.site-header .bf-langswitch__off {
  color: var(--bf-on-night-fg-2); text-decoration: none;
  transition: color var(--bf-duration-1) var(--bf-ease);
}
.site-header .bf-langswitch__off:hover { color: var(--bf-cobalt-soft); }

/* ---------- Menu button (phone only) ----------
   Hidden above 640px, where the full nav fits on one line. Icon only: the
   name lives in aria-label, and aria-expanded carries the open/closed state
   for anyone on a screen reader. Padding runs left and down from a
   gutter-flush icon, so the touch target is a full 44x44. */
.bf-menubtn {
  display: none;
  align-items: center;
  margin: 0; padding: 16px 0 16px 24px;
  background: none; border: 0; cursor: pointer;
  color: var(--bf-cream);
  -webkit-tap-highlight-color: transparent;
}
.bf-menubtn:focus-visible { outline: 2px solid var(--bf-cobalt-soft); outline-offset: 3px; }
.bf-menubtn__icon { display: block; width: 20px; height: 12px; overflow: visible; }
.bf-menubtn__bar {
  fill: var(--bf-cream);
  transform-box: fill-box; transform-origin: center;
  transition: transform var(--bf-duration-2) var(--bf-ease),
              opacity var(--bf-duration-1) var(--bf-ease);
}
/* Open: the middle bar drops out and the outer two cross into an X. */
.site-header.is-open .bf-menubtn__bar--top { transform: translateY(4.85px) rotate(45deg); }
.site-header.is-open .bf-menubtn__bar--middle { opacity: 0; }
.site-header.is-open .bf-menubtn__bar--bottom { transform: translateY(-4.85px) rotate(-45deg); }

/* ============================================================
   HEADER - phone
   Three items (logo, language, CTA) need 297px of a 360px screen, so the row
   has no air left and the CTA label used to wrap. Below 640px the nav drops
   into a panel under the logo instead. That also brings back #work and #team,
   which had no reachable link on a phone at all.
   ============================================================ */
@media (max-width: 640px) {
  /* 10px + the 44px button + 10px keeps the closed bar at 65px, down from 120. */
  .site-header .wrap { flex-wrap: wrap; padding-block: 10px; }
  .brand-lockup { height: 28px; }
  .bf-menubtn { display: inline-flex; }

  /* Closed: out of the layout and out of the tab order. */
  .site-header nav { display: none; }
  .site-header.is-open nav {
    display: flex; flex-direction: column; align-items: stretch;
    flex-basis: 100%; gap: 0;
    padding-top: var(--bf-space-1); padding-bottom: var(--bf-space-2);
  }
  /* 19px over 14px padding gives every row a ~48px touch target. */
  .site-header nav .bf-navlink {
    font-family: var(--bf-font-display); font-size: 19px; font-weight: 500;
    color: var(--bf-cream);
    padding-block: 14px;
    border-top: var(--bf-rule-night);
  }
  .site-header .bf-nav__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--bf-space-4);
    margin-top: var(--bf-space-4); padding-top: var(--bf-space-4);
    border-top: var(--bf-rule-night);
  }
  /* Boxed so it reads as a control rather than stray text, and so the tap
     target clears the 24px minimum - it was 17x23px before. */
  .site-header .bf-langswitch {
    gap: 7px; font-size: 14px;
    padding: 9px 14px; border-radius: var(--bf-radius-pill);
    box-shadow: inset 0 0 0 1px rgba(232, 222, 200, 0.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bf-menubtn__bar { transition: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { background: var(--bf-night); padding-block: clamp(56px, 4vw + 40px, 128px) var(--bf-space-10); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--bf-space-9);
  align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: var(--bf-space-7); } }

.hero h1 {
  font-size: clamp(52px, 9vw, var(--bf-size-hero));
  max-width: 18ch;
  margin-bottom: var(--bf-space-6);
}
.hero .lede { margin-bottom: var(--bf-space-7); max-width: 56ch; }
.hero-actions { display: flex; align-items: center; gap: var(--bf-space-4); flex-wrap: wrap; }

/* Animated mark, hero signature */
.hero-mark { width: 100%; max-width: 420px; height: auto; justify-self: end; }
@media (max-width: 900px) { .hero-mark { justify-self: start; max-width: 300px; } }

.hero-foot {
  display: flex; align-items: center; gap: var(--bf-space-4);
  margin-top: var(--bf-space-8); padding-top: var(--bf-space-5);
  border-top: var(--bf-rule-night);
}

/* ============================================================
   TAGLINE BLOCK (night) - the brand promise, centered, with the
   animated mark above it.
   ============================================================ */
.tagline-block { background: var(--bf-cream); padding-block: var(--bf-space-8) var(--bf-space-9); }
.tagline-block .wrap { text-align: center; }
.tagline-mark {
  width: clamp(150px, 22vw, 210px); height: auto;
  display: block; margin: 0 auto var(--bf-space-4);
}
.tagline-line {
  font-family: var(--bf-font-display); font-weight: 700; font-style: italic;
  font-size: clamp(38px, 6vw, 68px); line-height: 1.08;
  letter-spacing: var(--bf-display-tracking);
  color: var(--bf-ink); max-width: 18ch; margin: 0 auto;
  text-wrap: balance;
}
.tagline-line em { color: var(--bf-cobalt); font-style: italic; }
.tagline-sub {
  color: var(--bf-mute); font-size: var(--bf-size-lead);
  max-width: 46ch; margin: 0 auto;
}

/* ============================================================
   "AI looks tangled" - the noise-to-clarity block
   ============================================================ */
/* Full-bleed utility: break an element out of the 1200px container so it
   spans the whole viewport width. Text stays in .wrap; visuals go edge to edge.
   (body has overflow-x:hidden, so 100vw never adds a horizontal scrollbar.) */
.fullbleed { width: 100vw; margin-left: calc(50% - 50vw); }

.tangle-viz { width: 100%; height: auto; }
.tangle-img { display: block; width: 100%; }
/* Show the whole image (the tubing flow), not a cropped band. */
.tangle-img.fullbleed {
  margin-top: var(--bf-space-8);
  height: auto;
}

/* ============================================================
   "What we help with" - numbered editorial list
   ============================================================ */
.help-list { display: grid; gap: 0; margin-top: var(--bf-space-6); }
.help-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--bf-space-6);
  align-items: start;
  padding-block: var(--bf-space-7);
  border-top: var(--bf-rule);
}
.help-item:last-child { border-bottom: var(--bf-rule); }
.help-num {
  font-family: var(--bf-font-display);
  font-weight: 700; font-size: var(--bf-size-h3);
  color: var(--bf-cobalt); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.help-item h3 { margin-bottom: var(--bf-space-3); }
.help-item p { margin: 0; }
@media (max-width: 560px) {
  .help-item { grid-template-columns: 1fr; gap: var(--bf-space-3); padding-block: var(--bf-space-6); }
}

/* ============================================================
   "How we work" - four steps, on night
   ============================================================ */
.steps {
  list-style: none; padding: 0; margin: var(--bf-space-7) 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bf-space-6);
}
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, 1fr); gap: var(--bf-space-7); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }
.step { padding-top: var(--bf-space-4); border-top: 1px solid var(--bf-cobalt-soft); }
.step .step-k {
  font-family: var(--bf-font-mono); font-size: var(--bf-size-meta);
  color: var(--bf-cobalt-soft); display: block; margin-bottom: var(--bf-space-4);
}
.step h3 { color: var(--bf-cream); margin-bottom: var(--bf-space-3); font-size: var(--bf-size-h4); }
.step p { color: var(--bf-on-night-fg-1); font-size: var(--bf-size-body); margin: 0; }

/* ============================================================
   "You might be here because" - pain list
   ============================================================ */
.because-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--bf-space-9); align-items: start; }
@media (max-width: 820px) { .because-grid { grid-template-columns: 1fr; gap: var(--bf-space-6); } }
.pains { list-style: none; margin: 0; padding: 0; }
.pains li {
  position: relative;
  padding: var(--bf-space-5) 0 var(--bf-space-5) var(--bf-space-6);
  border-bottom: var(--bf-rule-soft);
  font-size: var(--bf-size-lead); line-height: 1.4; max-width: none;
}
.pains li:first-child { border-top: var(--bf-rule-soft); }
/* cobalt dot before each pain line */
.pains li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--bf-space-5) + 0.5em);
  width: 9px; height: 9px; border-radius: var(--bf-radius-pill);
  background: var(--bf-cobalt);
}

/* ============================================================
   Testimonial
   ============================================================ */
.testimonial { text-align: center; background: var(--bf-cream); }
.testimonial .bf-tag { justify-content: center; margin-bottom: var(--bf-space-6); }
.quote-wrap { max-width: 82ch; margin: 0 auto; }
.quote {
  font-family: var(--bf-font-display); font-weight: 700;
  font-size: clamp(24px, 2.7vw, 34px); line-height: 1.3;
  letter-spacing: var(--bf-display-tracking);
  margin: 0 0 var(--bf-space-6);
}
.quote .hl { color: var(--bf-cobalt); }
.quote-cite {
  font-family: var(--bf-font-display); font-weight: 500;
  font-size: var(--bf-size-meta); color: var(--bf-mute);
  max-width: none; margin: 0;   /* override the token 64ch p-cap so it centers */
}

/* ============================================================
   Team - two humans, two AIs
   ============================================================ */
.team-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bf-space-6);
  margin-top: var(--bf-space-7);
}
@media (max-width: 820px) { .team-grid { grid-template-columns: repeat(2, 1fr); gap: var(--bf-space-6); } }
@media (max-width: 420px) { .team-grid { grid-template-columns: 1fr; } }
.member-photo {
  aspect-ratio: 4 / 5; width: 100%; background: var(--bf-bg-2);
  border: var(--bf-rule); display: flex; align-items: flex-end; padding: 0;
  margin-bottom: var(--bf-space-4);
  overflow: hidden;
}
.member-photo img { width: 100%; height: 100%; object-fit: cover; }
.member-photo--ai { background: var(--bf-night); }
.member h3 { font-size: var(--bf-size-h4); margin-bottom: 2px; }
.member .role {
  font-family: var(--bf-font-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--bf-cobalt); display: block; margin-bottom: var(--bf-space-3);
}
.member p { font-size: var(--bf-size-meta); color: var(--bf-mute); margin: 0; }
.member .member-cred {
  font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: 0.01em;
  line-height: 1.45; color: var(--bf-mute); margin-top: var(--bf-space-3);
}
.steps-note { margin-top: var(--bf-space-7); opacity: 0.8; }

/* ============================================================
   Final CTA + footer
   ============================================================ */
.cta-final h2 { font-size: clamp(36px, 5.5vw, 72px); max-width: 18ch; margin-bottom: var(--bf-space-7); }
.cta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bf-space-6); flex-wrap: wrap;
}
.cta-sub {
  color: var(--bf-on-night-fg-2); font-size: var(--bf-size-lead);
  max-width: 42ch; margin: 0;
}

/* Primary button + a lighter secondary text link stacked under it. */
.cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--bf-space-4); }
.cta-alt {
  color: var(--bf-cobalt-soft); font-size: var(--bf-size-body);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.cta-alt:hover { color: var(--bf-cream); }

/* ---------- Booking embed (Microsoft Bookings iframe on the night CTA) ----------
   The Bookings widget renders on its own light surface, so we frame it in a
   paper card to read as intentional against the dark section. */
.booking-embed {
  margin-top: var(--bf-space-8);
  background: var(--bf-paper);
  border-radius: var(--bf-radius-sm);
  padding: var(--bf-space-3);
  box-shadow: var(--bf-shadow-2);
}
.booking-embed iframe {
  width: 100%; height: 720px;
  border: 0; display: block;
  border-radius: var(--bf-radius-xs);
}
@media (max-width: 720px) { .booking-embed iframe { height: 760px; } }
.booking-fallback {
  margin-top: var(--bf-space-4);
  color: var(--bf-on-night-fg-2); font-size: var(--bf-size-meta);
}
.booking-fallback a { color: var(--bf-cobalt-soft); }
.booking-fallback a:hover { color: var(--bf-cream); }

.site-footer { background: var(--bf-paper); border-top: var(--bf-rule-soft); padding-block: var(--bf-space-6); }
.footer-inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--bf-space-5); flex-wrap: wrap;
}
.footer-lockup { height: 34px; width: auto; display: block; }
.footer-legal { font-family: var(--bf-font-mono); font-size: 12px; color: var(--bf-mute); margin: 0; }
.footer-legal a { color: var(--bf-mute); text-decoration-color: var(--bf-cobalt); }
.footer-legal a:hover { color: var(--bf-cobalt); }

/* ============================================================
   MOTION  (per README: quiet, ease cubic-bezier(.2,0,0,1),
   the mark is the one element allowed to move; the anchor
   pulses +-10%; 6s loop; content reveals are opacity-only.)
   ============================================================ */

/* Animated dot mark: radius-only animation, driven in JS per MOTION-SPEC.md
   (a one-time grow-in cascade, then a rightward-traveling sine pulse; the
   anchor pulses less so the wave resolves). The static circles in the markup
   are the reduced-motion / no-JS fallback. Mark is ink on light, cream on dark. */

/* Header lockup: gentle fade on load (opacity only) */
.brand-lockup { animation: fade var(--bf-duration-3) var(--bf-ease) both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Scroll reveal - opacity only, no transform (per motion rules) */
.reveal { opacity: 0; transition: opacity 360ms var(--bf-ease); }
.reveal.in { opacity: 1; }

/* The tangle line "draws" itself in on reveal (stroke is fine; it is
   the one bespoke illustration, flagged as an extension to the system) */
.tangle-viz .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.reveal.in .tangle-viz .draw { animation: draw 1.6s var(--bf-ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .flowmark .stream, .flowmark .anchor, .brand-lockup, .reveal, .tangle-viz .draw {
    animation: none !important; transition: none !important;
  }
  .reveal { opacity: 1; }
  .tangle-viz .draw { stroke-dashoffset: 0; }
}

/* ============================================================
   Additions (used by the v11/v12 copy pass) - additive only.
   ============================================================ */

/* The updated design system dropped IBM Plex Mono ("captions are display-
   family now"), leaving --bf-font-mono undefined so every mono caption
   (footer, step numbers, role labels, cred lines) fell back to body.
   Point it at the brand caption family so those labels are intentional. */
:root { --bf-font-mono: var(--bf-font-display); }

/* Reusable cobalt highlight (generalized from the testimonial). */
.hl { color: var(--bf-cobalt); }
.bf-on-night .hl { color: var(--bf-cobalt-soft); }

/* A short, confident lead line inside a prose section (e.g. the
   "we don't sell tools" statement) - bigger than body, ink, tight. */
.statement-lead {
  font-family: var(--bf-font-display); font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2;
  letter-spacing: var(--bf-display-tracking);
  max-width: 24ch; margin: 0 0 var(--bf-space-5);
}

/* Team intro (v15): headline left, two-tier body right, then a stat +
   credibility row bracketed by hairlines. Uses brand type sizes. */
.team-intro { margin-bottom: var(--bf-space-8); }
.team-intro__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--bf-space-8);
  align-items: start;
}
@media (max-width: 820px) { .team-intro__grid { grid-template-columns: 1fr; gap: var(--bf-space-5); } }
.team-intro__head { max-width: 14ch; }
.team-intro__lead {
  font-size: var(--bf-size-lead); line-height: 1.45; color: var(--bf-ink);
  max-width: 44ch; margin: 0 0 var(--bf-space-4);
}
.team-intro__sub { color: var(--bf-mute); max-width: 44ch; margin: 0; }

.team-stats {
  display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: var(--bf-space-8);
  align-items: center; margin-top: var(--bf-space-8);
  padding-block: var(--bf-space-5);
  border-top: var(--bf-rule); border-bottom: var(--bf-rule);
}
@media (max-width: 560px) { .team-stats { grid-template-columns: 1fr; gap: var(--bf-space-5); } }
.team-stat__num {
  font-family: var(--bf-font-display); font-weight: 700;
  font-size: var(--bf-size-h3); line-height: 1; color: var(--bf-cobalt);
}
.team-stat__label { font-size: var(--bf-size-meta); color: var(--bf-mute); margin-top: var(--bf-space-2); }
.team-brands__eyebrow {
  font-family: var(--bf-font-display); font-weight: 700; text-transform: uppercase;
  font-size: 12px; letter-spacing: 0.06em; color: var(--bf-mute); margin: 0 0 var(--bf-space-2);
}
.team-brands__list {
  font-family: var(--bf-font-display); font-weight: 700;
  font-size: var(--bf-size-lead); color: var(--bf-ink); margin: 0;
}