/* ============================================================================
   TransformLulu — Design System
   Editorial-led hybrid: the A2A "Ambition to Action" grayscale editorial system
   (Source Serif 4 + Inter, hairlines, no radius, no shadows, active whitespace,
   one rare accent) adapted with Lululemon RED as the single rare site accent,
   greys as secondary, and the competitor brand palette preserved for data viz.

   This is the SINGLE SOURCE OF TRUTH. Every page links only this stylesheet
   (plus chart libraries where needed). Do not fork tokens into page <style> blocks.
   ============================================================================ */

/* ── Fonts (Source Serif 4 editorial + Inter UI) ──────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400;1,8..60,600&family=Inter:wght@400;500;600;700&display=swap');

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root{
  /* Gray value ramp (A2A) — paper g0 → ink g7 */
  --g0:#FFFFFF; --g1:#F4F5F6; --g2:#E3E5E8; --g3:#C9CDD2;
  --g4:#A7ACB3; --g5:#787E86; --g6:#4A4F57; --g7:#23262B;
  --ink-2:#636973;   /* secondary ink (captions, eyebrows) */
  --soft:#353A42;    /* soft ink — secondary emphasis, hover */
  --ground:#F4F5F6;  /* page ground when not pure paper */

  /* THE accent — Lululemon red. Used by rarity: active nav, key figures,
     one primary CTA per view, the single focal mark. Never as a field. */
  --accent:#E20010;
  --accent-ink:#B8000D;     /* hover / pressed */
  --accent-wash:#FDF0F2;    /* rare tint background for an accented block */

  /* Competitor brand palette — for data viz / legends ONLY, never site chrome */
  --brand-lululemon:#c41230;
  --brand-alo:#3d2b7a;
  --brand-vuori:#e8a815;
  --brand-athleta:#7b2d8e;
  --brand-gymshark:#2563eb;
  --brand-fabletics:#e85d9a;
  --brand-nike:#00615a;
  --brand-adidas:#005EB8;
  --brand-underarmour:#1e3a5f;
  --brand-rhone:#a0522d;
  --brand-puma:#2a9d3e;
  --brand-beyondyoga:#d4651a;

  /* Type */
  --serif:'Source Serif 4', Georgia, serif;   /* titles, prose, takeaways */
  --sans:'Inter', system-ui, -apple-system, sans-serif; /* nav, labels, UI */
  --mono:'SFMono-Regular', Consolas, ui-monospace, monospace; /* numbers */

  /* Spacing scale */
  --sp-2:2px; --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px;
  --sp-24:24px; --sp-32:32px; --sp-48:48px; --sp-64:64px; --sp-96:96px;

  /* Motion */
  --dur-fast:120ms; --dur:200ms; --ease:cubic-bezier(.2,0,.2,1);

  /* Layout */
  --nav-h:64px; --measure:680px; --wide:1100px;
}

/* ── Reset & base ─────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--serif);
  font-size:17px; line-height:1.6;
  background:var(--g0); color:var(--g7);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  display:flex; flex-direction:column; min-height:100vh;
}
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
::selection{ background:var(--accent); color:#fff; }

/* No radius, no shadows anywhere — enforced by the system. */

/* ── Type primitives ──────────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2);
  margin:0 0 var(--sp-12);
}
h1,.page-title{
  font-family:var(--serif); font-weight:600; letter-spacing:-.015em;
  line-height:1.08; color:var(--g7);
  font-size:clamp(38px,5vw,64px); margin:0 0 var(--sp-16);
}
h2,.h2{ font-family:var(--serif); font-weight:600; font-size:clamp(26px,3vw,34px); line-height:1.18; letter-spacing:-.01em; color:var(--g7); margin:0 0 var(--sp-12); }
h3,.h3{ font-family:var(--serif); font-weight:600; font-size:22px; line-height:1.3; color:var(--g7); margin:0 0 var(--sp-8); }
.lede{ font-family:var(--serif); font-size:20px; line-height:1.55; color:var(--g6); max-width:64ch; }
p{ margin:0 0 var(--sp-16); }
.prose{ font-family:var(--serif); font-size:17px; line-height:1.65; color:var(--g7); max-width:var(--measure); }
.prose p{ margin:0 0 var(--sp-16); }
.prose b,.prose strong{ font-weight:600; color:var(--g7); }
.caption{ font-family:var(--sans); font-size:12px; line-height:1.5; color:var(--ink-2); }
.takeaway{ font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.5; color:var(--g7); }
.num-mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* Accent helpers — use by RARITY only */
.accent{ color:var(--accent); }
.accent-rule{ border:0; border-top:2px solid var(--accent); width:48px; margin:var(--sp-16) 0; }
hr,.rule{ border:0; border-top:1px solid var(--g3); margin:var(--sp-48) 0 var(--sp-24); }
.hairline{ border:0; border-top:1px solid var(--g2); margin:var(--sp-24) 0; }

/* Section label + lede (editorial section heads) */
.sec-h{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--g6); margin:var(--sp-48) 0 var(--sp-8); }
.sec-lede{ font-family:var(--serif); font-size:18px; line-height:1.55; color:var(--g6); margin:0 0 var(--sp-24); max-width:var(--measure); }
.sec-lede b{ color:var(--g7); font-weight:600; }

/* ── Top nav ──────────────────────────────────────────────────────────────── */
.top-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:var(--sp-32);
  height:var(--nav-h); padding:0 var(--sp-24);
  background:rgba(255,255,255,.92); backdrop-filter:saturate(1.1) blur(6px);
  border-bottom:1px solid var(--g3);
}
@media(min-width:1024px){ .top-nav{ padding:0 var(--sp-48); } }
.top-nav .logo{ flex:0 0 auto; display:flex; align-items:center; }
.top-nav .logo img{ height:30px; width:auto; }
.nav-items{ display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.nav-item{
  font-family:var(--sans); font-size:13px; font-weight:600;
  letter-spacing:.04em; color:var(--g6);
  padding:var(--sp-8) var(--sp-12); position:relative;
  transition:color var(--dur) var(--ease); white-space:nowrap;
}
.nav-item:hover{ color:var(--g7); }
.nav-item.active{ color:var(--g7); }
.nav-item.active::after{
  content:''; position:absolute; left:var(--sp-12); right:var(--sp-12); bottom:-1px;
  height:2px; background:var(--accent);
}
.nav-spacer{ flex:1 1 auto; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer{
  margin-top:auto; border-top:1px solid var(--g3); background:var(--g0);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-16);
  padding:var(--sp-24); flex-wrap:wrap;
}
@media(min-width:1024px){ .site-footer{ padding:var(--sp-24) var(--sp-48); } }
.site-footer .foot-meta{ font-family:var(--sans); font-size:12px; color:var(--ink-2); }
.site-footer .foot-links{ display:flex; align-items:center; gap:var(--sp-16); }
.site-footer .foot-links a{ font-family:var(--sans); font-size:12px; color:var(--ink-2); transition:color var(--dur) var(--ease); }
.site-footer .foot-links a:hover{ color:var(--g7); }

/* ── Layout containers ────────────────────────────────────────────────────── */
main{ flex:1 1 auto; }
.wrap{ max-width:var(--wide); margin:0 auto; padding:var(--sp-64) var(--sp-24); }
@media(min-width:1024px){ .wrap{ padding:var(--sp-96) var(--sp-48); } }
.wrap-narrow{ max-width:760px; margin:0 auto; padding:var(--sp-64) var(--sp-24); }
.section{ padding:var(--sp-64) 0; }
.stack > * + *{ margin-top:var(--sp-16); }

/* ── Eyebrow / badge ──────────────────────────────────────────────────────── */
.badge{
  display:inline-block; font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--g7);
  border:1px solid var(--g7); padding:5px 14px;
}
.badge.accent-badge{ border-color:var(--accent); color:var(--accent); }

/* ── Hero / full-bleed product imagery ────────────────────────────────────── */
/* Keeps the high-res product-in-action photography as section grounds. */
.hero{ position:relative; }
.hero-media{ position:relative; min-height:clamp(420px,70vh,720px); overflow:hidden; }
.hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,16,18,.62) 0%, rgba(15,16,18,.28) 45%, rgba(15,16,18,0) 75%); }
/* Stronger scrim for busier images (e.g. a full-frame subject behind the headline) */
.hero-media.scrim-strong::after{ background:linear-gradient(90deg, rgba(15,16,18,.78) 0%, rgba(15,16,18,.5) 48%, rgba(15,16,18,.16) 100%); }
.hero-content{ position:relative; z-index:1; max-width:var(--wide); margin:0 auto; padding:var(--sp-64) var(--sp-24); }
.hero-content.on-media{ color:#fff; }
.hero-content.on-media .eyebrow{ color:rgba(255,255,255,.8); }
.hero-content.on-media h1,.hero-content.on-media .page-title{ color:#fff; }
.hero-content.on-media .lede{ color:rgba(255,255,255,.88); }
@media(min-width:1024px){ .hero-content{ padding:var(--sp-96) var(--sp-48); } }

/* A figure/photo band inside flowing content */
.media-band{ position:relative; margin:var(--sp-48) 0; }
.media-band img{ width:100%; height:auto; object-fit:cover; }
.media-band figcaption{ font-family:var(--sans); font-size:12px; color:var(--ink-2); margin-top:var(--sp-8); }

/* ── Editorial blocks (from A2A) ──────────────────────────────────────────── */
/* Logic / formula block — left accent bar */
.logic{ background:var(--g0); border:1px solid var(--g3); border-left:4px solid var(--g6); padding:20px 24px; margin:0 0 var(--sp-16); }
.logic .formula{ font-family:var(--serif); font-size:19px; color:var(--g7); display:flex; flex-wrap:wrap; gap:0 10px; align-items:baseline; margin-bottom:10px; }
.logic .formula .x{ color:var(--ink-2); font-size:16px; }
.logic p{ font-family:var(--serif); font-size:16px; line-height:1.55; color:var(--g6); margin:0; }
.logic p b{ color:var(--g7); font-weight:600; }

/* Factor list — hairline-separated rows */
.factor{ border-top:1px solid var(--g2); padding:16px 0; }
.factor:last-of-type{ border-bottom:1px solid var(--g2); }
.factor .fn{ font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); margin-bottom:6px; }
.factor .fd{ font-family:var(--serif); font-size:16px; line-height:1.5; color:var(--g7); margin:0 0 5px; }
.factor .fif{ font-family:var(--serif); font-style:italic; font-size:14.5px; color:var(--ink-2); margin:0; }

/* Callout / "holds" block */
.callout{ background:var(--g1); border:1px solid var(--g3); padding:18px 22px; margin:var(--sp-24) 0; }
.callout .ch{ font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--g6); font-weight:600; margin-bottom:8px; }
.callout p{ font-family:var(--serif); font-size:15.5px; line-height:1.55; color:var(--g6); margin:0; }
.callout b{ color:var(--g7); font-weight:600; }
/* Accented callout — use sparingly for the single most important point */
.callout.accent-callout{ background:var(--accent-wash); border-left:4px solid var(--accent); }

/* Counter / "what changes" arrow list */
.counter{ background:var(--g0); border:1px solid var(--g3); border-left:4px solid var(--g7); padding:20px 24px; margin:var(--sp-32) 0 var(--sp-8); }
.counter .ch{ font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--g7); font-weight:700; margin:0 0 8px; }
.counter ul{ margin:0; padding:0; list-style:none; }
.counter li{ font-family:var(--serif); font-size:16px; line-height:1.5; color:var(--g7); padding:9px 0 9px 24px; border-top:1px solid var(--g2); position:relative; }
.counter li:first-child{ border-top:0; }
.counter li::before{ content:"\2192"; position:absolute; left:0; top:9px; color:var(--accent); font-family:var(--sans); }

/* ── Cards / grid ─────────────────────────────────────────────────────────── */
.grid{ display:grid; gap:var(--sp-16); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:860px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }
.card{ background:var(--g0); border:1px solid var(--g3); padding:24px; }
.card .knum{ font-family:var(--serif); font-weight:600; font-size:30px; line-height:1; color:var(--g7); margin-bottom:6px; }
.card.accent-card .knum{ color:var(--accent); }
.card .klabel{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.card ul{ list-style:none; padding:0; margin:var(--sp-12) 0 0; }
.card li{ font-family:var(--serif); font-size:15px; line-height:1.5; color:var(--g7); padding-left:16px; position:relative; margin-bottom:6px; }
.card li::before{ content:"\2013"; position:absolute; left:0; color:var(--g4); }

/* Stat — big number + label */
.stat{ }
.stat .v{ font-family:var(--serif); font-weight:600; font-size:clamp(36px,5vw,56px); line-height:1; color:var(--g7); letter-spacing:-.02em; }
.stat .v.accent{ color:var(--accent); }
.stat .l{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-top:var(--sp-8); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn{ display:inline-block; font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.03em; line-height:1; padding:var(--sp-12) var(--sp-24); border:1px solid transparent; background:none; cursor:pointer; transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast); }
.btn-primary{ background:var(--accent); color:#fff; border-color:var(--accent); }    /* the one red CTA */
.btn-primary:hover{ background:var(--accent-ink); border-color:var(--accent-ink); }
.btn-secondary{ background:var(--g0); color:var(--g7); border-color:var(--g3); }
.btn-secondary:hover{ border-color:var(--g7); }
.btn-text{ padding:var(--sp-8) 0; color:var(--g7); }
.btn-text:hover{ color:var(--accent); }
.btn-text::after{ content:" \2192"; }

/* ── Forms (gate / inputs) ────────────────────────────────────────────────── */
.field-label{ display:block; font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin-bottom:var(--sp-8); }
.input{ width:100%; font-family:var(--sans); font-size:14px; color:var(--g7); background:var(--g0); border:1px solid var(--g3); padding:var(--sp-12); }
.input::placeholder{ color:var(--g4); }
.input:focus{ border-color:var(--accent); outline:2px solid var(--accent-wash); outline-offset:0; }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.tbl{ width:100%; border-collapse:collapse; background:var(--g0); border:1px solid var(--g2); font-family:var(--sans); }
.tbl th,.tbl td{ text-align:left; padding:var(--sp-12) var(--sp-16); border-top:1px solid var(--g2); font-size:13.5px; line-height:1.5; color:var(--g7); }
.tbl thead th{ border-top:0; border-bottom:1px solid var(--g3); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.tbl .num{ text-align:right; font-variant-numeric:tabular-nums; }
.tbl tbody tr:hover{ background:var(--g1); }

/* ── Figures ──────────────────────────────────────────────────────────────── */
figure.fig{ margin:var(--sp-32) 0; }
figure.fig svg,figure.fig canvas{ width:100%; height:auto; display:block; }
figure.fig.bordered svg,figure.fig.bordered canvas{ border:1px solid var(--g2); background:var(--g0); }
figure.fig figcaption{ font-family:var(--sans); font-size:12px; line-height:1.5; color:var(--ink-2); margin-top:var(--sp-12); }

/* Brand legend chip (data viz) */
.legend{ display:flex; flex-wrap:wrap; gap:var(--sp-12) var(--sp-24); font-family:var(--sans); font-size:12px; color:var(--g6); }
.legend .lg{ display:inline-flex; align-items:center; gap:6px; }
.legend .sw{ width:11px; height:11px; flex:0 0 auto; }

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.crumb{ font-family:var(--sans); font-size:12px; color:var(--ink-2); margin-bottom:var(--sp-24); }
.crumb a{ color:var(--ink-2); }
.crumb a:hover{ color:var(--g7); }
.crumb b{ color:var(--g7); font-weight:600; }

/* ── Nav dots (scroll spy on long pages) ──────────────────────────────────── */
.nav-dots{ position:fixed; right:24px; top:50%; transform:translateY(-50%); z-index:40; display:flex; flex-direction:column; gap:16px; }
.nav-dots button{ width:11px; height:11px; border-radius:50%; border:1.5px solid var(--g5); background:transparent; cursor:pointer; transition:background var(--dur),border-color var(--dur); padding:0; }
.nav-dots button:hover{ border-color:var(--g7); }
.nav-dots button.active{ background:var(--accent); border-color:var(--accent); }
@media(max-width:1024px){ .nav-dots{ display:none; } }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media(max-width:760px){
  body{ font-size:16px; }
  .nav-items{ gap:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .nav-item{ padding:var(--sp-8); font-size:12px; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .wrap,.wrap-narrow{ padding:var(--sp-48) var(--sp-16); }
}

/* Print */
@media print{
  .top-nav,.nav-dots,.site-footer{ display:none; }
  body{ color:#000; }
}