/* ============================================================
   KEDARO — shared stylesheet
   Used by index.html AND approach.html.
   Change something here and BOTH pages update.

   Layout of this file:
     1. Fonts
     2. Design system — colours and --scale   <- the dials
     3. Shared bits — buttons, header, footer, popups
     4. Home page sections
     5. Approach page sections
     6. Breakpoints (phone / tablet)
   ============================================================ */

/* ---------- 1. FONTS ---------- */
@font-face{
    font-family:'Geist'; font-style:normal; font-weight:400; font-display:swap;
    src:url('fonts/geist-v5-latin-regular.woff2') format('woff2');
  }
  @font-face{
    font-family:'Geist'; font-style:normal; font-weight:600; font-display:swap;
    src:url('fonts/geist-v5-latin-600.woff2') format('woff2');
  }
  @font-face{
    font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
    src:url('fonts/inter-var.woff2') format('woff2-variations');
  }
  @font-face{
    font-family:'Roboto Mono'; font-style:normal; font-weight:100; font-display:swap;
    src:url('fonts/roboto-mono-v31-latin-100.woff2') format('woff2');
  }
  @font-face{
    font-family:'Inter'; font-style:italic; font-weight:100 900; font-display:swap;
    src:url('fonts/inter-var-italic.woff2') format('woff2-variations');
  }
  @font-face{
    font-family:'Roboto Mono'; font-style:normal; font-weight:300; font-display:swap;
    src:url('fonts/roboto-mono-v31-latin-300.woff2') format('woff2');
  }
  @font-face{
    font-family:'Roboto Mono'; font-style:normal; font-weight:400; font-display:swap;
    src:url('fonts/roboto-mono-v31-latin-regular.woff2') format('woff2');
  }
  @font-face{
    font-family:'Roboto Mono'; font-style:normal; font-weight:500; font-display:swap;
    src:url('fonts/roboto-mono-v31-latin-500.woff2') format('woff2');
  }

/* ============================================================
   KEDARO — home page
   Rebuilt from _home page export.indd (1920 × 5233.8 pt artboard)
   Type + colour values taken directly from the IDML.
   ============================================================ */

:root{
  /* ---- colour (sampled from the InDesign export) ---- */
  --paper:      #f8f8f8;
  --white:      #ffffff;
  --ink:        #202020;

  /* ---- TONE PASS · 17 Aug 2026, from the team review ----
     Three separate notes — "black is too hostile", "too hostile; not cool",
     "cold and weird looking" — were all one problem: pure black plus an acid
     green-yellow. That pairing reads as a terminal window, which undercuts
     the infrastructure argument the page is making.

     No layout changed. Only these five values. Originals are kept in the
     comments, so reverting is a search-and-replace. */
  --black:      #16130f;   /* was #000000 — warm off-black, not a void */
  --footer-bg:  #d7d7d7;
  --body:       #404040;   /* InDesign "Black copy 2" = K75 */
  --teal:       #0097b2;
  --mint:       #7fbfa8;   /* was #58f3d5 — soft, still clears AA on dark */
  --lime:       #c4603a;   /* was #d8ff38 — ember: haze and fire, not neon */
  --rule:       #bdbdbd;
  --rule-dark:  #332e27;   /* was #2a2a2a — warmed to sit on --black */
  --teal-bright:#2397b2;   /* Breayz accent: icons, COMPLETED pill */

  /* ============================================================
     SCALE — the one number to change if the page feels too big
     or too small.

     Your InDesign artboard is 1920pt wide with a 117pt headline.
     Reproduced literally, that's oversized on a normal laptop,
     where a display headline is usually 64–80px. --scale pulls
     the whole system down proportionally.

       1     = literal InDesign size (huge on a laptop)
       0.82  = current — reads like a website, keeps the proportions
       0.7   = noticeably compact

     Everything below is derived from it, so nothing gets out of
     step with anything else.
     ============================================================ */
  --scale: 0.82;

  /* ---- layout ---- */
  --page:       1680px;   /* was 1920 — caps growth on large monitors */
  --gutter:     clamp(20px, calc(5.4vw * var(--scale)), 96px);

  /* ---- type scale: design px at 1920 → fluid, × --scale ---- */
  --t-hero:     clamp(38px, calc(6.12vw * var(--scale)), 96px);
  --t-h2:       clamp(26px, calc(2.40vw * var(--scale)), 38px);
  --t-h3:       clamp(20px, calc(1.56vw * var(--scale)), 25px);
  --t-eyebrow:  clamp(12px, calc(1.30vw * var(--scale)), 19px);
  --t-lead:     clamp(17px, calc(1.25vw * var(--scale)), 21px);
  --t-body:     clamp(16px, calc(1.10vw * var(--scale)), 19px);
  --t-small:    clamp(14px, calc(0.89vw * var(--scale)), 16px);
  --t-ui:       clamp(11px, calc(0.78vw * var(--scale)), 13px);
  --t-number:   calc(var(--t-body) * .9);

  /* ---- approach page only, same system, read from its IDML ---- */
  --t-hero-approach: clamp(30px, calc(4.12vw * var(--scale)), 66px);  /* 79pt  */
  --t-intro:         clamp(15px, calc(1.56vw * var(--scale)), 24px);  /* 30pt  */
  --t-h3-approach:   clamp(19px, calc(1.77vw * var(--scale)), 28px);  /* 34pt  */
  --t-method-head:   clamp(14px, calc(1.20vw * var(--scale)), 19px);  /* 23pt  */
  --t-method-num:    clamp(13px, calc(1.09vw * var(--scale)), 17px);  /* 21pt  */
  --t-table:         clamp(13px, calc(1.04vw * var(--scale)), 17px);  /* 20pt  */
  --t-table-head:    clamp(12px, calc(0.99vw * var(--scale)), 16px);  /* 19pt  */

  /* ---- breayz page only, read from its IDML ---- */
  --t-hero-bz:    clamp(28px, calc(3.43vw * var(--scale)), 55px);  /* 66pt */
  --t-h2-bz:      clamp(22px, calc(2.14vw * var(--scale)), 34px);  /* 41pt */
  --t-stat:       clamp(24px, calc(2.10vw * var(--scale)), 34px);  /* 52pt, dialled back */
  --t-mono-lg:    clamp(13px, calc(0.94vw * var(--scale)), 15px);  /* 18pt */
  --t-mono-sm:    clamp(11px, calc(0.83vw * var(--scale)), 14px);  /* 16pt */

  /* ---- about page only — no IDML for this one, sized by eye to sit
     between --t-h2 and --t-hero-approach, same --scale system ---- */
  --t-h1-about:   clamp(28px, calc(2.6vw * var(--scale)), 44px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--white);
  color:var(--body);
  font-family:'Inter',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:var(--t-body);
  font-weight:300;
  line-height:1.45;
  letter-spacing:.03em;         /* InDesign tracking 30 */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.wrap{
  width:100%;
  max-width:var(--page);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:500;
  font-size:var(--t-eyebrow);
  letter-spacing:.09em;          /* tracking 90 */
  color:var(--teal);
  margin:0 0 clamp(18px,1.8vw,34px);
  text-transform:uppercase;
}
.eyebrow::before{ content:'>| '; }
.eyebrow.is-mint{ color:var(--mint); }
.eyebrow.is-lime{ color:var(--lime); }

h2{
  font-family:'Inter',sans-serif;
  font-weight:300;
  font-size:var(--t-h2);
  line-height:1.14;
  letter-spacing:.03em;
  color:var(--ink);
  margin:0;
}
h3{
  font-family:'Inter',sans-serif;
  font-weight:300;
  font-size:var(--t-h3);
  line-height:1.2;
  letter-spacing:.03em;
  color:var(--ink);
  margin:0;
}

.rule-short{
  width:clamp(64px,5.5vw,106px);
  height:2px;
  background:var(--teal);
  border:0;
  margin:clamp(22px,2vw,38px) 0;
}

/* ---------- buttons ---------- */
.btn,
.btn-ghost,
.btn-pill{
  font-family:'Geist',system-ui,sans-serif;
  font-weight:600;
  font-size:var(--t-ui);
  letter-spacing:.09em;          /* tracking 90 */
  text-transform:uppercase;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.9em;
  white-space:nowrap;
}

.btn-pill{
  background:var(--ink);
  color:var(--white);
  border-radius:999px;
  padding:.95em 1.9em;
  font-size:calc(var(--t-ui) * .9);
  letter-spacing:.08em;
  transition:background .25s ease, transform .25s ease;
}
.btn-pill:hover{ background:var(--teal); transform:translateY(-1px); }

.btn{
  background:var(--ink);
  color:var(--white);
  padding:.7em 1.4em;
  font-size:calc(var(--t-ui) * .8);
  letter-spacing:.12em;
  transition:background .25s ease, transform .25s ease;
}
.btn:hover{ background:var(--teal); transform:translateY(-1px); }

.btn-ghost{
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  padding:0 0 .55em;
  align-items:center;
  width:fit-content;
  min-width:clamp(110px, 11vw, 150px);
  transform:translateY(2px);
  transition:color .25s ease, border-color .25s ease;
}
.btn-ghost .case-study-text{
  font-family:'Roboto Mono',monospace;
  font-weight:500;
  font-size:calc(var(--t-ui) * .78);
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1;
}
.btn-ghost .chev{
  display:inline-flex;
  align-items:center;
  line-height:1;
  margin-top:-1px;
}
.btn-ghost:hover{ color:var(--mint); border-color:var(--mint); }

/* a placeholder that still needs a real label */
.is-placeholder{ position:relative; }
.is-placeholder::after{
  content:'';
  position:absolute; inset:-6px -8px;
  border:1px dashed rgba(0,151,178,.5);
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
}
body.show-placeholders .is-placeholder::after{ opacity:1; }

/* ============================================================
   HEADER
   ============================================================ */
/* No backdrop-filter here. It looked nice but caused smearing in
   full-page screenshot/PDF capture tools, so the bar stays softly
   translucent instead of fully opaque. */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(248,248,248,.82);
  transition:box-shadow .3s ease;
}
.site-header.is-stuck{ box-shadow:0 1px 0 rgba(0,0,0,.08); }

.site-header .wrap{
  display:flex; align-items:center; gap:clamp(16px,2vw,40px);
  min-height:clamp(60px, calc(5.4vw * var(--scale)), 96px);
}
.brand{ flex:0 0 auto; }
.brand img{ width:clamp(112px, calc(11vw * var(--scale)), 190px); }

.nav{
  flex:1 1 auto;
  display:flex; justify-content:flex-end;
  gap:clamp(20px,2.8vw,42px);
  list-style:none; margin:0; padding:0 0 0 clamp(8px,1.2vw,16px);
}
.nav a{
  font-family:'Geist',system-ui,sans-serif;
  font-weight:600;
  font-size:calc(var(--t-ui) * .9);
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  padding-bottom:.5em;
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.nav a:hover,
.nav a[aria-current="page"]{ color:var(--mint); border-color:var(--mint); }

.nav-toggle{
  display:none;
  margin-left:auto;
  width:44px; height:44px;
  background:none; border:0; padding:0; cursor:pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  display:block; height:1.5px; width:24px; background:var(--ink);
  transition:transform .3s ease, opacity .2s ease;
}
.nav-toggle span{ margin:0 auto; position:relative; }
.nav-toggle span::before{ content:''; position:absolute; top:-7px; }
.nav-toggle span::after{ content:''; position:absolute; top:7px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  background:var(--white);
  overflow:hidden;
}
.hero-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  /* favour the top of the artwork — the pale area. The dark mass sits
     bottom-left and would fight the copy. */
  object-position:50% 20%;
  z-index:0;
}
/* Legibility scrim. The InDesign artwork fades out on the left naturally,
   but once the image is cropped to a shorter web hero that falloff moves,
   so this guarantees the copy always has contrast behind it. */
.hero::after{
  content:'';
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  background:linear-gradient(100deg,
    rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.86) 22%,
    rgba(255,255,255,.45) 42%,
    rgba(255,255,255,0)   62%);
}
.hero .wrap{
  position:relative; z-index:2;
  /* capped at 88vh so the hero can't push everything below the
     fold on a short laptop screen */
  min-height:min(88vh, clamp(460px, 52vw, 900px));
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(48px,4.6vw,88px);
}
.hero h1{
  font-family:'Geist',system-ui,sans-serif;
  font-weight:400;
  font-size:var(--t-hero);
  line-height:1.08;
  letter-spacing:-.01em;         /* tracking -10 */
  color:var(--ink);
  margin:0 0 clamp(36px,4.2vw,76px);
  max-width:16ch;
}
.hero h1 .strong{
  font-weight:600;
  display:inline-block;
  position:relative;
  padding-bottom:.04em;
}
.hero h1 .strong::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:.075em;
  background:var(--ink);
}
.hero-lead{
  font-size:var(--t-lead);
  font-weight:300;
  line-height:1.5;
  color:var(--body);
  max-width:34ch;
  margin:0 0 clamp(30px,3.6vw,68px);
}
.hero-actions{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(20px,2.8vw,54px);
}

.scroll-cue{
  position:absolute; z-index:2;
  right:var(--gutter);
  bottom:clamp(28px,4vw,80px);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  font-family:'Geist',system-ui,sans-serif;
  font-weight:600;
  font-size:var(--t-ui);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
}
.scroll-cue .line{
  width:1px; height:clamp(30px,3.4vw,64px);
  background:var(--ink);
  transform-origin:top;
  animation:cue 2.4s ease-in-out infinite;
}
.scroll-cue .line::after{
  content:''; display:block;
  margin-left:-3px;
  width:7px; height:7px;
  border-right:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  transform:rotate(45deg) translate(-1px,-4px);
}
@keyframes cue{
  0%,100%{ transform:scaleY(1);   opacity:1; }
  50%    { transform:scaleY(.72); opacity:.55; }
}

/* ============================================================
   THE PROBLEM
   ============================================================ */
.section{ padding-block:clamp(72px, calc(8vw * var(--scale)), 132px); }
.section-paper{ background:var(--paper); }
/* body copy warmed alongside --black; a neutral grey on a warm ground is
   what made these sections read cold */
.section-dark{ background:var(--black); color:#cfc8bc; }
.section-dark h2,.section-dark h3{ color:var(--white); }
#breayz{ padding-bottom:clamp(28px, calc(3.2vw * var(--scale)), 64px); }
#how-we-work{ padding-top:clamp(28px, calc(3.2vw * var(--scale)), 64px); }

.problem-grid{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.35fr);
  gap:clamp(36px,5vw,96px);
  align-items:start;
}
.problem-copy p{ margin:0; max-width:42ch; }
.problem-copy .lead{ margin-top:clamp(18px,1.9vw,36px); }
.problem-claim{
  font-size:calc(var(--t-h2) * .92);
  font-weight:300;
  line-height:1.16;
  letter-spacing:.03em;
  color:var(--teal);
  margin:0;
  max-width:16ch;
}

/* ============================================================
   DUAL PATHWAY
   ============================================================ */
.pathway-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,2.7vw,52px);
}
.pathway-card{
  border:1px solid rgba(0,151,178,.4);
  background:var(--paper);
  padding:clamp(22px,2.4vw,46px);
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(18px,2.2vw,42px);
  align-items:center;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.pathway-card:hover{
  border-color:var(--teal);
  box-shadow:0 12px 40px -24px rgba(0,151,178,.55);
  transform:translateY(-2px);
}
.pathway-card .art{ align-self:center; }
.pathway-card p{ margin:clamp(14px,1.5vw,28px) 0 clamp(18px,2vw,36px); max-width:30ch; }
.pathway-card .btn-ghost{
  color:var(--teal);
  border-bottom-color:transparent;
  font-family:'Inter',sans-serif;
  font-weight:400;
  letter-spacing:.03em;
  text-transform:none;
  font-size:var(--t-small);
  padding-bottom:.2em;
}
.pathway-card .btn-ghost:hover{ border-bottom-color:var(--teal); }

/* ============================================================
   FEATURED PROJECT — Breayz
   ============================================================ */
.breayz-grid{
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,2fr);
  gap:clamp(32px,4vw,80px);
  align-items:start;
}
.breayz-copy h2{ margin-bottom:clamp(20px,2.2vw,42px); }
.breayz-copy p{ margin:0 0 .6em; max-width:32ch; color:#b8b8b8; }
.breayz-copy p + p{ margin-top:0; margin-bottom:.6em; }
.breayz-copy .btn-ghost{
  color:var(--mint);
  border-bottom-color:transparent;
  font-family:'Inter',sans-serif;
  font-weight:400;
  letter-spacing:.03em;
  text-transform:none;
  font-size:calc(var(--t-lead) * .78);
  font-weight:600;
}
.breayz-copy .btn-ghost:hover{ border-bottom-color:var(--mint); color:var(--mint); }

.breayz-cols{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.breayz-col{
  display:flex;
  flex-direction:column;
  padding-inline:clamp(12px,1.5vw,28px);
  border-left:1px solid var(--rule-dark);
}
.breayz-col:first-child{ border-left:0; padding-left:0; }
.breayz-col h3{
  font-size:var(--t-h3);
  margin-bottom:clamp(14px,1.5vw,28px);
}
.breayz-col img{ display:block; max-width:100%; height:auto; }
.breayz-col--app img{ width:100%; margin-top:auto; }
.breayz-col:not(.breayz-col--app) img{
  max-height:584px;
  width:auto;
  max-width:100%;
  height:auto;
}
.breayz-col p{
  font-size:calc(var(--t-small) * .95);
  font-weight:500;
  line-height:1.5;
  color:#b8b8b8;
  margin:clamp(12px,1.2vw,22px) 0 0;
}

/* ============================================================
   HOW WE WORK
   ============================================================ */
.work-head{ margin-bottom:clamp(44px,5.2vw,100px); }
.work-head h2{ max-width:22ch; }
.work-head .accent{ color:var(--lime); }

.work-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.work-col{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding-inline:clamp(16px,2.2vw,44px);
  border-left:1px solid var(--rule-dark);
}
.work-col:first-child{ border-left:0; padding-left:0; }
.work-col img{ width:100%; aspect-ratio:1 / 1; object-fit:cover; display:block; margin-bottom:clamp(20px,2.4vw,46px); height:clamp(220px, 24vw, 320px); }
.work-num{
  /* fixed px, not clamp/vw — must render pixel-identical to .method-num at every width, see .method-num */
  font-family:'Roboto Mono',monospace;
  font-weight:500;
  font-size:14px;
  line-height:1.2;
  letter-spacing:.03em;
  color:#6f7a2e;
  margin:0 0 .5em;
  min-height:1.4em;
}
.work-col h3{
  /* fixed px, not clamp/vw — must render pixel-identical to .method-step h3 at every width, see .method-step h3 */
  font-family:'Roboto Mono',monospace;
  font-weight:500;
  font-size:14px;
  line-height:1.2;
  letter-spacing:.03em;
  color:var(--lime);
  text-transform:uppercase;
  margin:0;
}
.work-col hr{
  width:clamp(44px,3.6vw,68px);
  height:2px; border:0; background:#5a5a5a;
  margin:clamp(16px,1.8vw,34px) 0;
}
.work-col p{ font-size:var(--t-small); font-weight:500; color:#b8b8b8; margin:0; max-width:30ch; }

/* ============================================================
   PARTNERS
   ============================================================ */
.partners-grid{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,2.2fr);
  gap:clamp(32px,4vw,80px);
  align-items:center;
}
.partners-copy h2{
  font-family:'Roboto Mono',monospace;
  font-weight:500;
  font-size:var(--t-eyebrow);
  letter-spacing:.09em;
  color:var(--teal);
  text-transform:uppercase;
  line-height:1.4;
  max-width:18ch;
  margin-bottom:clamp(18px,2vw,38px);
}
.partners-copy p{ margin:0; max-width:34ch; }
.logo-grid{
  display:grid;
  /* was a fixed 5 columns for ten placeholders; now adapts to however
     many real logos are in the markup */
  grid-template-columns:repeat(auto-fit, minmax(clamp(110px,12vw,190px), 1fr));
  gap:clamp(20px,3vw,58px) clamp(24px,3.2vw,62px);
  align-items:center;
  justify-items:center;
}
.logo-grid img{
  width:100%;
  max-width:clamp(130px, calc(15vw * var(--scale)), 220px);
  filter:grayscale(1);
  opacity:.72;
  transition:opacity .25s ease, filter .25s ease;
}
.logo-grid img:hover{ opacity:1; filter:grayscale(0); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--footer-bg);
  color:var(--ink);
  padding-block:clamp(48px,5.5vw,106px) clamp(30px,3vw,58px);
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(36px,4vw,80px);
  align-items:start;
}
.footer-brand img{ width:clamp(130px,13vw,250px); margin-bottom:clamp(16px,1.8vw,34px); }
.footer-brand p{ margin:0; font-size:var(--t-body); color:var(--ink); }

.footer-bottom{
  display:flex; flex-wrap:wrap; gap:clamp(16px,2vw,40px);
  justify-content:space-between; align-items:center;
  margin-top:clamp(40px,4.6vw,88px);
  font-size:var(--t-small);
}
.footer-bottom nav{ display:flex; gap:clamp(20px,2.4vw,46px); }
.footer-bottom a{ text-decoration:none; }
.footer-bottom a:hover{ color:var(--teal); }

.linklike{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:inherit; letter-spacing:inherit;
  transition:color .2s ease;
}
.linklike:hover{ color:var(--teal); }

/* ---------- legal modals ---------- */
.modal{
  border:0; padding:0;
  width:min(720px, calc(100vw - 2 * var(--gutter)));
  max-height:min(80vh, 900px);
  background:var(--white);
  color:var(--body);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.55);
}
.modal::backdrop{
  background:rgba(20,20,20,.62);
}
.modal-inner{
  position:relative;
  padding:clamp(28px,3.4vw,60px);
  overflow-y:auto;
  max-height:inherit;
}
.modal h2{
  font-family:'Inter',sans-serif;
  font-weight:300;
  font-size:var(--t-h3);
  letter-spacing:.03em;
  color:var(--ink);
  margin:0 0 clamp(18px,2vw,34px);
  padding-right:2.5em;
}
.modal p{
  font-size:var(--t-small);
  line-height:1.65;
  margin:0 0 1.15em;
}
.modal p:last-child{ margin-bottom:0; }
.modal strong{ color:var(--ink); font-weight:600; }
.modal a{ color:var(--teal); }
.modal-close{
  position:absolute;
  top:clamp(14px,1.4vw,24px); right:clamp(14px,1.4vw,24px);
  width:40px; height:40px;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer;
  font-size:30px; line-height:1; color:var(--body);
  transition:color .2s ease, transform .2s ease;
}
.modal-close:hover{ color:var(--teal); transform:rotate(90deg); }

/* fade/scale in */
.modal[open]{ animation:modal-in .28s cubic-bezier(.22,.61,.36,1); }
@keyframes modal-in{
  from{ opacity:0; transform:translateY(10px) scale(.985); }
  to  { opacity:1; transform:none; }
}
body.modal-open{ overflow:hidden; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (max-width:1080px){
  .problem-grid,
  .partners-grid,
  .breayz-grid{ grid-template-columns:minmax(0,1fr); }
  .breayz-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3vw,40px) 0; }
  .breayz-col:nth-child(3){ border-left:0; padding-left:0; }
  .logo-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

@media (max-width:860px){
  .nav-toggle{ display:block; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:flex-start;
    gap:0;
    background:var(--white);
    border-top:1px solid rgba(0,0,0,.08);
    box-shadow:0 20px 40px -28px rgba(0,0,0,.4);
    max-height:0; overflow:hidden;
    transition:max-height .35s ease;
  }
  .nav.is-open{ max-height:70vh; }
  .nav li{ width:100%; }
  .nav a{
    display:block; width:100%;
    padding:1.15em var(--gutter);
    border-bottom:1px solid rgba(0,0,0,.06);
  }
  .nav a[aria-current="page"]{ border-bottom-color:rgba(0,0,0,.06); }
  .site-header .wrap{ position:relative; }
  .header-cta{ display:none; }

  .pathway-grid{ grid-template-columns:minmax(0,1fr); }
  .work-grid{ grid-template-columns:minmax(0,1fr); gap:clamp(40px,6vw,64px); }
  .work-col{ border-left:0; padding-left:0; }
  .footer-grid{ grid-template-columns:minmax(0,1fr); }
  .scroll-cue{ display:none; }
  .hero-img{ object-position:62% 18%; }
  /* narrow screens: the copy sits over more of the artwork, so
     strengthen the scrim into a near-vertical wash */
  .hero::after{
    background:linear-gradient(120deg,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.90) 45%,
      rgba(255,255,255,.55) 78%,
      rgba(255,255,255,.3)  100%);
  }
}

@media (max-width:600px){
  .breayz-cols{ grid-template-columns:minmax(0,1fr); }
  .breayz-col{ border-left:0; padding-left:0; }
  .pathway-card{ grid-template-columns:minmax(0,1fr); }
  .pathway-card .art{ max-width:220px; }
  .logo-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hero-actions{ gap:22px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

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

/* ============================================================
   5. APPROACH PAGE
   Only used by approach.html. Everything above is shared.
   ============================================================ */

/* ---------- header sitting on the dark hero ---------- */
/* The header is transparent and white until you scroll, then it
   turns into the normal light bar so the nav stays readable. */
.page-approach .site-header{
  background:transparent;
  position:absolute; left:0; right:0;
  color:var(--white);
}
.page-approach .site-header .brand{ color:var(--white); }
.page-approach .site-header .brand img{ filter:brightness(0) invert(1); }
.page-approach .site-header .nav a{ color:var(--white); }
.page-approach .site-header .nav a:hover,
.page-approach .site-header .nav a[aria-current="page"]{
  color:var(--mint); border-color:var(--mint);
}
.page-approach .site-header .btn-pill{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.5);
}
.page-approach .site-header .btn-pill:hover{ background:var(--teal); border-color:var(--teal); }
.page-approach .nav-toggle span,
.page-approach .nav-toggle span::before,
.page-approach .nav-toggle span::after{ background:var(--white); }

/* once scrolled past the hero it becomes a normal sticky light bar */
.page-approach .site-header.is-pinned{
  position:fixed; top:0;
  background:var(--white);
  color:var(--ink);
  box-shadow:0 1px 0 rgba(0,0,0,.08);
}
.page-approach .site-header.is-pinned .brand,
.page-approach .site-header.is-pinned .nav a{ color:var(--ink); }
.page-approach .site-header.is-pinned .btn-pill{
  background:var(--ink); border-color:var(--ink);
}
.page-approach .site-header.is-pinned .nav-toggle span,
.page-approach .site-header.is-pinned .nav-toggle span::before,
.page-approach .site-header.is-pinned .nav-toggle span::after{ background:var(--ink); }

/* ---------- dark hero ---------- */
.hero-dark{
  position:relative;
  background:#12233c;          /* matches the darkest corner of the artwork */
  overflow:hidden;
  color:var(--white);
}
.hero-dark .hero-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  z-index:0;
}
/* keeps the copy legible over the busiest part of the network artwork */
.hero-dark::after{
  content:'';
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  background:linear-gradient(100deg,
    rgba(10,26,48,.82) 0%,
    rgba(10,26,48,.62) 34%,
    rgba(10,26,48,.18) 62%,
    rgba(10,26,48,0)   85%);
}
.hero-dark .wrap{
  position:relative; z-index:2;
  min-height:min(86vh, clamp(440px, 50.6vw, 860px));
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(96px,9vw,180px) clamp(48px,4.6vw,88px);
}
.hero-dark .eyebrow{ color:var(--white); }
.hero-dark h1{
  font-family:'Geist',system-ui,sans-serif;
  font-weight:400;
  font-size:var(--t-hero-approach);
  line-height:1.08;
  letter-spacing:-.01em;
  color:var(--white);
  margin:0 0 clamp(28px,3.2vw,56px);
  max-width:18ch;
}
.hero-dark h1 .strong{
  font-weight:600;
  display:inline-block; position:relative;
  padding-bottom:.04em;
}
.hero-dark h1 .strong::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:.075em; background:var(--white);
}
.hero-dark .hero-intro{
  font-size:var(--t-intro);
  font-weight:300;
  line-height:1.5;
  letter-spacing:.06em;         /* tracking 60 */
  color:rgba(255,255,255,.92);
  max-width:44ch;
  margin:0;
}
.hero-dark .hero-intro strong{ font-weight:700; color:var(--white); }
.hero-dark .hero-intro em{ font-style:italic; }

/* ---------- the thesis ---------- */
.thesis-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(32px,4vw,80px);
  align-items:start;
}
.thesis-grid h2{ margin-bottom:clamp(4px,0.8vw,10px); }
.thesis-grid p{ margin:0; }
.thesis-lede{
  font-size:var(--t-h3-approach);
  font-weight:300;
  line-height:1.28;
  letter-spacing:.03em;
  color:var(--teal);
  margin:0 0 clamp(10px,1.1vw,18px);
}
.thesis-col-right .intro{ margin-bottom:clamp(4px,0.7vw,10px); }
.thesis-figure img{ width:100%; }

/* ---------- our method ---------- */
.method-grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) repeat(4, minmax(0,1fr));
  gap:clamp(26px,3.2vw,58px);
  align-items:start;
  margin-top:clamp(8px,1vw,16px);
}
.method-head{ align-self:start; }
.method-head h2{ max-width:14ch; margin:0; }
.method-step{
  padding-top:0;
  align-self:start;
  border-left:1px solid var(--rule);
  padding-left:clamp(16px,2vw,32px);
}
.method-head + .method-step{ border-left:0; padding-left:0; }
.method-num{
  /* fixed px, not clamp/vw — must render pixel-identical to .work-num at every width, see .work-num */
  font-family:'Roboto Mono',monospace;
  font-weight:500;
  font-size:14px;
  line-height:1.2;
  letter-spacing:.03em;
  color:var(--teal);
  margin:0 0 .5em;
}
.method-step h3{
  /* fixed px, not clamp/vw — must render pixel-identical to .work-col h3 at every width, see .work-col h3 */
  font-family:'Roboto Mono',monospace;
  font-weight:500;
  font-size:14px;
  line-height:1.2;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--teal);
  margin:0;
}
.method-step hr{
  width:clamp(34px,2.6vw,50px);
  height:1px; border:0; background:var(--teal);
  margin:clamp(14px,1.6vw,26px) 0;
}
.method-step p{
  font-size:var(--t-body);
  color:var(--body);
  margin:0;
}

/* ---------- comparison table ---------- */
.compare-grid{
  display:grid;
  grid-template-columns:minmax(0,.54fr) minmax(0,1.8fr);
  gap:clamp(18px,2.2vw,36px);
  align-items:start;
}
.compare-copy p{ margin:0; }
.compare-copy .eyebrow{ white-space:nowrap; margin-bottom:clamp(8px,0.9vw,14px); }

.compare-table{
  width:100%;
  max-width:720px;
  margin-left:auto;
  table-layout:fixed;
  border-collapse:collapse;
  font-size:clamp(11px, calc(0.78vw * var(--scale)), 14px);
  letter-spacing:.01em;
}
.compare-table th{
  font-family:'Roboto Mono',monospace;
  font-weight:500;
  font-size:clamp(10px, calc(0.72vw * var(--scale)), 13px);
  letter-spacing:.02em;
  text-align:left;
  padding:clamp(4px,0.4vw,6px) clamp(4px,0.5vw,6px);
  background:#3a3a3a;
  color:var(--white);
  border:1px solid #3a3a3a;
}
.compare-table th:last-child{ background:var(--teal); border-color:var(--teal); }
.compare-table td{
  padding:clamp(4px,0.4vw,6px) clamp(4px,0.5vw,6px);
  border:1px solid var(--rule);
  color:var(--body);
  vertical-align:top;
  background:var(--white);
}
.compare-table td:last-child{ color:var(--teal); }
.compare-table tbody tr:hover td{ background:#fcfcfc; }

/* the table becomes stacked cards on narrow screens */
.compare-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------- approach page breakpoints ---------- */
@media (max-width:1080px){
  .thesis-grid{ grid-template-columns:minmax(0,1fr); }
  .thesis-figure{ order:-1; }
  .method-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .method-head{ grid-column:1 / -1; }
  .compare-grid{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:860px){
  /* the header can't be transparent once it's a dropdown panel */
  .page-approach .site-header{ position:sticky; background:var(--white); color:var(--ink); }
  .page-approach .site-header .brand,
  .page-approach .site-header .nav a{ color:var(--ink); }
  .page-approach .site-header .nav a:hover,
  .page-approach .site-header .nav a[aria-current="page"]{ color:var(--teal); border-color:var(--teal); }
  .page-approach .nav-toggle span,
  .page-approach .nav-toggle span::before,
  .page-approach .nav-toggle span::after{ background:var(--ink); }
  .hero-dark .wrap{ padding-block:clamp(48px,6vw,88px); }
  .hero-dark::after{
    background:linear-gradient(120deg,
      rgba(10,26,48,.88) 0%, rgba(10,26,48,.72) 50%, rgba(10,26,48,.4) 100%);
  }
}

@media (max-width:600px){
  .method-grid{ grid-template-columns:minmax(0,1fr); }
  /* a 3-column table can't shrink usefully — let it scroll sideways instead */
  .compare-table{ min-width:520px; }
}

/* visually hidden, but still read out by screen readers */
.visually-hidden{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   7. BREAYZ PAGE
   Only used by breayz.html.
   ============================================================ */

/* ---------- header floating over the Breayz hero ---------- */
/* Transparent over the artwork, then a normal white bar once you scroll
   past the hero. The Breayz hero is light, so the type stays dark. */
.page-breayz .site-header{
  background:transparent;
  position:absolute; left:0; right:0;
}
.page-breayz .site-header.is-pinned{
  position:fixed; top:0;
  background:var(--white);
  box-shadow:0 1px 0 rgba(0,0,0,.08);
}

/* ---------- hero + problem: one continuous artwork ---------- */
/* Your InDesign file blends the cover plate into the cloud plate across an
   overlapping band, so this is ONE section with ONE background. Two sections
   would put a seam in the middle of the gradient, and that seam would move
   every time the page reflowed. */
.bz-opening{
  position:relative;
  overflow:hidden;
  background:#dfe3e2;          /* shows only before the image loads */
}
.bz-opening .bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 0;       /* keep the top of the artwork anchored */
  z-index:0;
}
.bz-opening .wrap{ position:relative; z-index:2; }

/* a gentle wash so the dark copy at top-left always has something to sit on,
   however the artwork crops */
.bz-opening::after{
  content:'';
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(105deg,
    rgba(248,248,248,.55) 0%,
    rgba(248,248,248,.22) 26%,
    rgba(248,248,248,0)   52%);
}

.bz-opening-hero{
  min-height:min(56vh, clamp(290px, 32vw, 560px));
  display:flex; flex-direction:column; justify-content:center;
  /* top padding clears the header, which now floats over the artwork */
  padding-block:clamp(84px,7vw,140px) clamp(20px,2vw,40px);
}
.bz-lockup{
  display:flex;
  align-items:flex-start;
  gap:.35em;
  margin:0 0 clamp(22px,2.6vw,48px);
}
.bz-logo{
  width:clamp(190px, calc(23vw * var(--scale)), 380px);
  margin:0;
}
.bz-tm{
  font-family:'Inter',sans-serif;
  font-weight:400;
  font-size:clamp(15px, calc(1.7vw * var(--scale)), 27px);
  line-height:1;
  color:var(--ink);
  margin-top:.2em;
}
.bz-opening h1{
  font-family:'Geist',system-ui,sans-serif;
  font-weight:400;
  font-size:var(--t-hero-bz);
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0 0 clamp(14px,1.6vw,28px);
  max-width:20ch;
}
.bz-opening .bz-sub{
  font-size:var(--t-lead);
  font-weight:300;
  color:var(--body);
  max-width:36ch;
  margin:0;
}

/* ---------- the statistics half ---------- */
.bz-opening-problem{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.45fr);
  gap:clamp(32px,4vw,80px);
  /* bottom-aligned so the grid finishes level with "and unknown."
     and sits lower into the dark half of the gradient */
  align-items:end;
  padding-block:clamp(40px,4vw,80px) clamp(56px,6vw,120px);
}
.bz-opening-problem h2{ color:var(--ink); max-width:16ch; }
.bz-opening-problem h2 strong{ font-weight:600; }
.bz-opening-problem .lede{ margin:clamp(18px,2vw,34px) 0 0; color:var(--ink); max-width:22ch; }

.stat-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(20px,2.4vw,44px) clamp(16px,2vw,36px);
}
/* darkens exactly the stat numbers' own footprint, not a guess at where
   they fall in the photo — bleeds a little past the grid so the fade
   feels like part of the image rather than a pasted-on box */
.stat-grid::before{
  content:'';
  position:absolute; inset:-14% -10%; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at center,
    rgba(0,0,0,.6)  0%,
    rgba(0,0,0,.5)  65%,
    rgba(0,0,0,0)  100%);
}
.stat{ border-top:1px solid rgba(255,255,255,.3); padding-top:clamp(10px,1.1vw,18px); }
.stat .fig{
  font-family:'Roboto Mono',monospace;
  font-weight:300;
  font-size:var(--t-stat);
  line-height:1.1;
  letter-spacing:.01em;
  margin:0 0 .35em;
}
.stat p{
  font-family:'Roboto Mono',monospace;
  font-weight:300;
  font-size:var(--t-mono-sm);
  line-height:1.5;
  color:rgba(255,255,255,.85);
  margin:0;
}
.stat--a .fig{ color:#4fe3c0; }
.stat--b .fig{ color:#f2c14e; }
.stat--c .fig{ color:#f0873c; }
.stat--d .fig{ color:#f2604c; }
.stat--e .fig{ color:#c88fe0; }
.stat--f .fig{ color:#ef5aa0; }

/* ---------- the system ---------- */
.bz-system{ position:relative; overflow:hidden; background:var(--white); }
.bz-system .bg{
  position:absolute; left:0; right:0; bottom:0; width:100%;
  /* fixed to the same height as the governance section's image (below) —
     bottom-anchored, so the extra height this section needs (it has more
     content) shows up as white space ABOVE the image, not below it */
  height:clamp(360px, 34vw, 580px);
  object-fit:cover; z-index:0; opacity:.22;   /* matches the governance section's treatment */
}
.bz-system .wrap{ position:relative; z-index:2; }
.bz-system-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4vw,80px);
  /* each column keeps its own natural height — the left column
     (five short layers) is meant to end up shorter than the right */
  align-items:start;
}
.bz-app{ display:flex; flex-direction:column; }
.bz-system-col{ display:flex; flex-direction:column; }
.bz-system-col .layer:last-child{ margin-bottom:0; }
.bz-system-col .layers{ margin-top:clamp(20px,2.4vw,44px); display:flex; flex-direction:column; }
.bz-system h2{ max-width:18ch; margin-bottom:clamp(28px,3vw,56px); }

.layer{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(12px,1.3vw,24px);
  align-items:start;
  margin-bottom:clamp(8px,.9vw,16px);
}
/* the five icons are line art lifted from the InDesign vectors —
   no container, no circle, just the mark */
.layer .ico{
  width:clamp(26px,2.2vw,40px);
  height:auto;
  flex:0 0 auto;
  margin-top:.1em;
}
.layer p{
  font-family:'Roboto Mono',monospace;
  font-weight:300;
  font-size:var(--t-mono-sm);
  line-height:1.6;
  color:var(--body);
  margin:0;
}
.layer p b{ font-weight:500; color:var(--ink); }

/* app column */
.bz-app h3{
  font-family:'Roboto Mono',monospace;
  font-weight:500;
  font-size:var(--t-mono-lg);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#f2604c;
  margin:0 0 clamp(10px,1.1vw,18px);
}
/* intro (blurb + tag) sits beside the phones rather than above them —
   keeping this column narrow is what leaves room for the phones alongside it */
.bz-app-top{
  display:flex;
  align-items:flex-start;
  gap:clamp(20px,2.6vw,44px);
}
.bz-app-intro{ flex:0 0 auto; max-width:24ch; }
.bz-app .blurb{
  font-family:'Roboto Mono',monospace;
  font-weight:300;
  font-size:var(--t-mono-sm);
  line-height:1.6;
  margin:0 0 clamp(12px,1.3vw,20px);
}
.bz-app .blurb em{ color:#f2604c; font-style:normal; }
/* max-width caps how wide (and so how tall, since the frame keeps a
   phone's aspect ratio) the mockups get */
.phones{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(6px,.8vw,14px); flex:1 1 auto; max-width:380px; }
/* device frame built in CSS rather than shipped as artwork —
   the extracted screenshots are screen content only */
.phone{
  position:relative;
  background:#141414;
  border-radius:13%/6%;
  padding:2.4%;
  box-shadow:0 2px 10px -4px rgba(0,0,0,.45);
}
.phone img{ width:100%; border-radius:11%/5%; display:block; }
.phone::after{           /* the island */
  content:'';
  position:absolute; top:4.2%; left:50%; transform:translateX(-50%);
  width:30%; height:2.4%;
  background:#141414; border-radius:999px;
}

.tag{
  display:inline-flex;
  align-items:center; justify-content:center;
  text-align:center;
  font-family:'Roboto Mono',monospace;
  font-weight:500;
  font-size:var(--t-mono-sm);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--white);
  border:1px solid var(--teal-bright);
  background:var(--teal-bright);
  border-radius:999px;
  padding:.5em 1.5em;
  line-height:1;
  width:fit-content;          /* stops it stretching the full column */
  align-self:flex-start;
  margin-bottom:clamp(10px,1.1vw,18px);
}
/* IN PRODUCTION / POST-PRODUCTION — white fill, coloured stroke */
.tag.is-outline{ background:var(--white); color:var(--teal); border-color:var(--teal); }

/* ---------- products ---------- */
.bz-products{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(28px,3.4vw,68px);
  margin-top:clamp(28px,3vw,56px);      /* clear of the phone mockups */
  padding-top:clamp(18px,2vw,34px);
  border-top:1px solid #f2604c;
}
/* the red plus that sits on the rule, between the two products */
.bz-products::before{
  content:'';
  position:absolute; top:0; left:50%;
  transform:translate(-50%,-50%);
  width:clamp(22px,2vw,34px);
  height:clamp(22px,2vw,34px);
  background:
    linear-gradient(#f2604c,#f2604c) center/100% 22% no-repeat,
    linear-gradient(#f2604c,#f2604c) center/22% 100% no-repeat;
}
.product h3{
  font-family:'Roboto Mono',monospace;
  font-weight:500;
  font-size:var(--t-mono-lg);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#f2604c;
  margin:0 0 clamp(10px,1.1vw,18px);
}
.product p{
  font-family:'Roboto Mono',monospace;
  font-weight:300;
  font-size:var(--t-mono-sm);
  line-height:1.6;
  margin:0 0 clamp(12px,1.3vw,20px);
  max-width:40ch;
}
.product p em{ color:#f2604c; font-style:normal; }
/* tag and figure sit side by side rather than the figure stacked below */
.product-row{ display:flex; align-items:center; justify-content:space-between; gap:clamp(12px,1.4vw,26px); }
.product-row .tag{ margin-bottom:0; }
.product-figure{ display:flex; align-items:flex-end; gap:clamp(12px,1.4vw,26px); }
.product-figure img{ width:clamp(90px, calc(8vw * var(--scale)), 150px); }
.product-figure .smarko{ width:clamp(60px, calc(5vw * var(--scale)), 85px); }

/* ---------- governance model ---------- */
.bz-governance{ position:relative; overflow:hidden; background:var(--white); }
.bz-governance{ padding-block:clamp(80px,8vw,150px) clamp(56px,6vw,110px); }
.bz-governance .bg{
  position:absolute; inset:0; width:100%;
  height:clamp(360px, 34vw, 580px);   /* same fixed height as the system section's image */
  object-fit:cover; z-index:0; opacity:.22;   /* was .45 — the copy was drowning */
  transform:scaleY(-1);   /* InDesign flips this one vertically */
}
.bz-governance::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.35) 28%, rgba(255,255,255,0) 50%);
}
.bz-governance .wrap{ position:relative; z-index:2; }
.bz-gov-grid{
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,2fr);
  gap:clamp(28px,3.4vw,68px);
  align-items:center;
}
.bz-gov-grid p{ margin:0; max-width:24ch; }
.bz-gov-figure img{ width:100%; }

/* ---------- consortium ---------- */
.consortium-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(24px,3vw,60px);
  align-items:center;
  justify-items:center;
  margin-top:clamp(28px,3vw,56px);
}
.consortium-grid img{
  width:100%;
  max-width:clamp(140px, calc(17vw * var(--scale)), 250px);
  /* full colour here — greyscale is only used on the home page */
}

/* ---------- breayz breakpoints ---------- */
@media (max-width:1080px){
  .bz-opening-problem,
  .bz-system-grid,
  .bz-gov-grid{ grid-template-columns:minmax(0,1fr); }
  .bz-products{ grid-template-columns:minmax(0,1fr); }
  .bz-opening::after{
    background:linear-gradient(180deg, rgba(248,248,248,.6) 0%, rgba(248,248,248,.1) 34%, rgba(248,248,248,0) 60%);
  }
}
@media (max-width:860px){
  .stat-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .consortium-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bz-app-top{ flex-direction:column; }
  .bz-app-intro{ max-width:none; }
  .phones{ max-width:340px; }
}
@media (max-width:600px){
  .stat-grid{ grid-template-columns:minmax(0,1fr); }
  .phones{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
}

/* ============================================================
   8. ABOUT PAGE
   Only used by about.html. There's no InDesign file behind this
   page — Zulaikha didn't have one — so sizes below are chosen by
   eye rather than read off an IDML, but still run through --scale
   the same as everywhere else.
   ============================================================ */

/* ---------- intro ---------- */
.about-intro h1{
  font-family:'Inter',sans-serif;
  font-weight:300;
  font-size:var(--t-h1-about);
  line-height:1.22;
  letter-spacing:.03em;
  color:var(--ink);
  max-width:26ch;
  margin:0 0 clamp(24px,2.6vw,44px);
}
.about-intro-body{ max-width:62ch; }
.about-intro-body p{ margin:0 0 clamp(16px,1.6vw,28px); }
.about-intro-body p:last-child{ margin-bottom:0; }

/* ---------- team ---------- */
.team-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(44px,5vw,96px) clamp(32px,4vw,64px);
  margin-top:clamp(8px,1vw,16px);
}
.team-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,2.4vw,36px);
  align-items:start;
}
/* real portraits aren't ready yet — this box holds the layout and
   gets outlined by the placeholder toggle (press P) until photos
   land at images/team-*.jpg */
.team-photo{
  width:clamp(120px,14vw,220px);
  aspect-ratio:1/1;
  background:var(--paper);
  border:1px solid var(--rule);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.team-photo img{
  width:100%; height:100%;
  object-fit:cover;
}
.team-photo span{
  font-family:'Roboto Mono',monospace;
  font-weight:300;
  font-size:clamp(26px,2.6vw,40px);
  letter-spacing:.05em;
  color:var(--rule);
}
.team-card h3{ margin:0 0 .25em; }
.team-role{
  font-family:'Roboto Mono',monospace;
  font-weight:500;
  font-size:var(--t-small);
  letter-spacing:.03em;
  color:var(--teal);
  margin:0 0 clamp(12px,1.3vw,20px);
}
.team-bio{
  font-size:var(--t-small);
  color:var(--body);
  margin:0;
  max-width:58ch;
}

/* ---------- about page breakpoints ---------- */
@media (max-width:1080px){
  .team-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:600px){
  .team-card{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- AI transparency line (footer, all pages) ---------- */
.footer-ai{
  font-family:'Roboto Mono',monospace;
  font-weight:300;
  font-size:var(--t-ui);
  letter-spacing:.04em;
  color:var(--body);
  opacity:.72;
  margin:clamp(28px,3vw,54px) 0 0;
}

/* ============================================================
   BAKED-BLACK ARTWORK — the follow-on from the tone pass
   ------------------------------------------------------------
   Warming --black off pure #000 revealed something the old
   palette was hiding: the glow artwork (AirMap, BreathID, the
   sensor, the three How-We-Work lattices) is exported with a
   solid BLACK background, not transparency. Against a pure-black
   section it was invisible. Against a warm ground it reads as
   six hard black rectangles.

   `screen` blending drops black to nothing and keeps the glow,
   so the artwork sits on the section rather than in a box. It's
   a stopgap — the proper fix is re-exporting these as PNGs with
   real transparency, or redrawing them (see D2 in the plan).

   The phone mockup is excluded: it has legitimate dark greys in
   the device body that screen blending would eat.
   ============================================================ */
.section-dark .breayz-col:not(.breayz-col--app) img,
.section-dark .work-col img{
  mix-blend-mode:screen;
}

/* the three How-We-Work lattices are acid lime in the file itself.
   Rotating them towards the ember accent keeps the section coherent
   until they're redrawn. Delete this rule when new artwork lands. */
.section-dark .work-col img{
  filter:hue-rotate(-46deg) saturate(.9) brightness(1.06);
}

/* the phone keeps a plate, but a warm one that belongs to the section */
.breayz-col--app img{
  background:#0d0b09;
  border-radius:2px;
}