:root{
    --bg:#ffffff;
    --hero-bg:#F8F7FA;
    /* Hero geometry, fitted to the supplied prototype (IoU 0.92 on the
       statue silhouette). All viewport-relative, so the composition holds at
       any window size. These are the knobs for retuning it. */
    --hero-fig-top:35.4vh;    /* top of the figure box */
    --hero-fig-w:112.9vh;     /* figure width (cropped clip is 1.685:1 -> height 67vh) */
    --hero-fig-shift:calc(-3vw + 1.46vh); /* keeps the statue where it was */
    --hero-copy-width:87.6vw; /* headline box width; it is centred on the page */
    --hero-cap-top:18.27vh;   /* caps of line 1 land here */
    --hero-line:19vh;         /* cap-to-cap spacing of the two lines */
    --hero-stroke:0.019em;    /* outline weight on line 2 */
    --hero-display-font:'Anton','Archivo Black','Haettenschweiler',Impact,'Arial Narrow Bold',sans-serif;
    --ink:#0D091E;             /* body + heading text */
    --muted:#4a4d78;           /* secondary copy, tinted from the ink so the
                                  two read as one family (8:1 on white) */
    --line:rgba(18,20,79,0.14);
    --line-strong:rgba(18,20,79,0.5);
    --accent:#724EE4;
    --accent-2:#BC57C8;
    --accent-soft:rgba(114,78,228,0.12);
    --glass-bg:rgba(255,255,255,0.55);
    --glass-border:rgba(255,255,255,0.6);
    --paper:#ffffff;

    --framer-font-family: "Biennale Medium", "Biennale Medium Placeholder", sans-serif;
    --framer-font-family-bold: "Biennale Black", "Biennale Black Placeholder", sans-serif;
    --framer-font-size: 18px;
    --framer-font-style: normal;
    --framer-font-style-bold: normal;
    --framer-font-variation-axes: normal;
    --framer-font-weight: 600;
    --framer-font-weight-bold: 800;
    --framer-letter-spacing: 0em;
    --framer-line-height: 28px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{height:100%;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Plus Jakarta Sans',sans-serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  #siteMain.hidden{ display:none; }
  .case-study{ display:none; }
  .case-study.active{ display:block; }

  .hero-scrub{
    position:relative;
    height:340vh;
  }
  .hero{
    position:sticky;
    top:0;
    width:100%;
    height:100vh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding:clamp(88px,10vw,108px) 2.4vw 0 2.4vw;
    background:var(--hero-bg);
  }

  /* ---------- TOP BAR (floating pill navbar) ---------- */
  .topbar{
    position:fixed;
    top:0;
    left:0;
    z-index:200;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    width:100%;
    background:var(--hero-bg);
    border-radius:0;
    padding:1.1rem 4vw;
    box-shadow:none;
    transition:width 0.5s cubic-bezier(0.22,1,0.36,1),
               left 0.5s cubic-bezier(0.22,1,0.36,1),
               top 0.5s cubic-bezier(0.22,1,0.36,1),
               transform 0.5s cubic-bezier(0.22,1,0.36,1),
               border-radius 0.5s cubic-bezier(0.22,1,0.36,1),
               padding 0.5s cubic-bezier(0.22,1,0.36,1),
               box-shadow 0.5s cubic-bezier(0.22,1,0.36,1),
               background 0.5s ease,
               backdrop-filter 0.5s ease;
  }
  .topbar.scrolled{
    top:14px;
    left:50%;
    transform:translateX(-50%);
    width:min(92vw, 900px);
    min-width:1200px;
    background:var(--glass-bg);
    backdrop-filter:blur(18px) saturate(180%);
    -webkit-backdrop-filter:blur(18px) saturate(180%);
    border:1px solid var(--glass-border);
    border-radius:999px;
    padding:0.7rem 0.9rem 0.7rem 1.1rem;
    box-shadow:0 10px 30px rgba(19,18,38,0.08), 0 2px 8px rgba(19,18,38,0.05);
  }
  .brand{
    display:flex;
    align-items:center;
    gap:0.6rem;
  }
  .brand .mark{
    width:34px; height:34px;
    border-radius:10px;
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .brand .mark img{ width:100%; height:100%; object-fit:cover; display:block; }
  .brand .role{
    font-size:0.8rem;
    font-weight:700;
    letter-spacing:0.01em;
    color:var(--ink);
  }

  .nav-links{
    display:flex;
    align-items:center;
    gap:1.9rem;
    font-family:var(--framer-font-family);
    font-weight:var(--framer-font-weight);
    letter-spacing:var(--framer-letter-spacing);
    font-size:0.95rem;
    color:var(--muted);
  }
  .nav-links a{
    color:inherit;
    text-decoration:none;
    position:relative;
    transition:color 0.2s ease;
  }
  .nav-links a:hover{ color:var(--ink); }
  .nav-links a.active{
    color:var(--accent);
  }
  .nav-links a.active::after{
    content:"";
    position:absolute;
    top:-2px; right:-9px;
    width:6px; height:6px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    animation:pulse 2.2s ease-in-out infinite;
  }

  .status{
    display:flex;
    align-items:center;
    gap:0.6rem;
    font-family:var(--framer-font-family);
    font-weight:var(--framer-font-weight);
    letter-spacing:var(--framer-letter-spacing);
    font-size:0.78rem;
    color:var(--ink);
    background:var(--accent-soft);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.5);
    padding:0.55rem 1rem;
    border-radius:999px;
  }
  .status .dot{
    width:7px;height:7px;border-radius:50%;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow:0 0 0 3px rgba(114,78,228,0.18);
    animation:pulse 2.2s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{ box-shadow:0 0 0 3px rgba(114,78,228,0.18); transform:scale(1); }
    50%{ box-shadow:0 0 0 6px rgba(114,78,228,0.05); transform:scale(1.08); }
  }

  /* ---------- SEPARATOR ---------- */
  .separator{
    width:100%;
    line-height:0;
    background:var(--bg);
    margin-top:-2px;
  }
  .separator img{
    width:100%;
    height:auto;
    display:block;
  }

  /* ---------- ABOUT ---------- */
  .about{
    background:var(--bg);
    padding:9vw 4vw 8vw;
    font-family:var(--framer-font-family);
    font-weight:var(--framer-font-weight);
    letter-spacing:var(--framer-letter-spacing);
    font-size:var(--framer-font-size);
    line-height:var(--framer-line-height);
  }
  .about-inner{
    max-width:1040px;
    margin:0 auto;
  }
  .eyebrow{
    display:inline-block;
    font-family:var(--framer-font-family);
    font-size:0.76rem;
    font-weight:var(--framer-font-weight-bold);
    letter-spacing:0.14em;
    color:var(--accent);
    text-transform:uppercase;
    margin-bottom:0.9rem;
  }
  .about h2{
    font-family:var(--framer-font-family-bold);
    font-weight:800;
    font-size:clamp(2.3rem, 5.2vw, 4.4rem);
    line-height:1.08;
    letter-spacing:-0.01em;
    color:var(--ink);
    margin:0 0 2rem 0;
  }
  .about-copy-text{
    font-size:clamp(1.02rem, 1.1vw, 1.15rem);
    font-weight:var(--framer-font-weight);
    line-height:1.8;
    color:var(--muted);
    max-width:62ch;
    margin:0 0 2.6rem 0;
  }
  .about-tags{
    display:flex;
    flex-wrap:wrap;
    gap:0.7rem;
  }
  .about-tags span{
    font-size:0.82rem;
    font-weight:700;
    padding:0.62rem 1.15rem;
    border-radius:999px;
    background:var(--accent-soft);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.5);
    color:var(--ink);
    white-space:nowrap;
  }

  /* ---------- PHILOSOPHY (animated background) ---------- */
  .philosophy{
    position:relative;
    background:var(--hero-bg);
    padding:9vw 4vw;
    overflow:hidden;
  }
  .philosophy-inner{
    max-width:860px;
    margin:0 auto;
    position:relative;
    z-index:10;
    text-align:center;
  }
  .philosophy .eyebrow{
    display:block;
    margin-bottom:1.1rem;
  }
  .philosophy h2{
    font-family:var(--framer-font-family);
    font-weight:var(--framer-font-weight-bold);
    letter-spacing:var(--framer-letter-spacing);
    font-size:clamp(2rem,4.2vw,3.4rem);
    line-height:1.14;
    color:var(--ink);
    margin-bottom:1.4rem;
  }
  .philosophy p{
    font-size:1.05rem;
    font-weight:var(--framer-font-weight);
    line-height:1.7;
    color:var(--muted);
    max-width:46ch;
    margin:0 auto;
  }

  /* animated blobs */
  .bg-decor{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    overflow:hidden;
  }
  .blob{
    position:absolute;
    border-radius:50%;
    filter:blur(50px);
    opacity:0.55;
  }
  .blob-a{
    width:34vw; height:34vw; max-width:460px; max-height:460px;
    top:-10%; left:-8%;
    background:radial-gradient(circle at 35% 35%, var(--accent), transparent 70%);
    animation:driftA 16s ease-in-out infinite;
  }
  .blob-b{
    width:28vw; height:28vw; max-width:380px; max-height:380px;
    bottom:-14%; right:-6%;
    background:radial-gradient(circle at 65% 65%, var(--accent-2), transparent 70%);
    animation:driftB 20s ease-in-out infinite;
  }
  .blob-c{
    width:20vw; height:20vw; max-width:280px; max-height:280px;
    top:38%; left:50%;
    background:radial-gradient(circle, var(--accent), transparent 72%);
    opacity:0.3;
    animation:driftC 24s ease-in-out infinite;
  }
  @keyframes driftA{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(4vw,3vw) scale(1.12); }
  }
  @keyframes driftB{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(-3vw,-4vw) scale(1.15); }
  }
  @keyframes driftC{
    0%,100%{ transform:translate(-50%,-10%) scale(1); }
    50%{ transform:translate(-50%,6%) scale(0.85); }
  }

  /* soft dot grid, faded toward the edges */
  .bg-grid{
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(19,18,38,0.14) 1px, transparent 1.4px);
    background-size:26px 26px;
    -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 45%, #000 0%, transparent 72%);
    mask-image:radial-gradient(ellipse 60% 55% at 50% 45%, #000 0%, transparent 72%);
    opacity:0.5;
  }

  /* animated cursor tracing "the next move" */
  .bg-cursor{
    position:absolute;
    width:22px; height:22px;
    animation:moveAround 15s cubic-bezier(.65,0,.35,1) infinite;
  }
  .bg-cursor svg{
    width:100%; height:100%;
    filter:drop-shadow(0 6px 10px rgba(19,18,38,0.22));
  }
  .bg-cursor::after{
    content:"";
    position:absolute;
    top:14px; left:14px;
    width:10px; height:10px;
    border-radius:50%;
    background:var(--accent);
    opacity:0.5;
    animation:ripple 3s ease-out infinite;
  }
  @keyframes moveAround{
    0%{   left:12%; top:74%; }
    22%{  left:80%; top:16%; }
    45%{  left:70%; top:78%; }
    68%{  left:24%; top:24%; }
    85%{  left:50%; top:58%; }
    100%{ left:12%; top:74%; }
  }
  @keyframes ripple{
    0%{ transform:scale(0.6); opacity:0.55; }
    70%{ transform:scale(2.6); opacity:0; }
    100%{ transform:scale(2.6); opacity:0; }
  }

  @media (max-width: 780px){
    .bg-cursor{ display:none; }
    .blob-a,.blob-b,.blob-c{ opacity:0.35; }
  }

  /* ---------- SELECTED PROJECTS ---------- */
  .work{
    background:var(--hero-bg);
    padding:7vw 4vw 8vw;
    font-family:var(--framer-font-family);
    font-weight:var(--framer-font-weight);
    letter-spacing:var(--framer-letter-spacing);
    font-size:var(--framer-font-size);
    line-height:var(--framer-line-height);
  }
  .work-inner{ max-width:1180px; margin:0 auto; }
  .work-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:1rem;
    margin-bottom:1.8rem;
  }
  .work-head h2{
    font-family:var(--framer-font-family);
    font-weight:var(--framer-font-weight-bold);
    font-size:clamp(1.9rem,3vw,2.6rem);
    letter-spacing:var(--framer-letter-spacing);
  }
  .view-all{
    font-size:0.85rem;
    font-weight:var(--framer-font-weight-bold);
    color:var(--accent);
    text-decoration:none;
    white-space:nowrap;
    display:flex;
    align-items:center;
    gap:0.35rem;
    transition:gap 0.2s ease;
  }
  .view-all:hover{ gap:0.6rem; }
  .view-all svg{ width:15px; height:15px; }

  .filters{
    display:flex;
    align-items:center;
    gap:0.5rem;
    flex-wrap:wrap;
    margin-bottom:2.6rem;
  }
  .filter-btn{
    font-family:inherit;
    font-size:0.82rem;
    font-weight:var(--framer-font-weight-bold);
    padding:0.55rem 1.15rem;
    border-radius:999px;
    border:1px solid transparent;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    transition:all 0.2s ease;
  }
  .filter-btn:hover{ color:var(--ink); }
  .filter-btn.active{
    background:var(--ink);
    color:var(--paper);
  }

  .project-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1.6rem;
  }
  .project-card{
    display:block;
    background:var(--paper);
    border-radius:20px;
    overflow:hidden;
    border:1px solid var(--line);
    text-decoration:none;
    color:inherit;
    transition:transform 0.3s ease, box-shadow 0.3s ease;
  }
  .project-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(19,18,38,0.1);
  }
  .thumb{
    position:relative;
    aspect-ratio:4/3;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .thumb .dots{
    position:absolute;
    top:0.9rem; left:0.9rem;
    display:flex;
    gap:0.3rem;
  }
  .thumb .dots span{
    width:6px;height:6px;border-radius:50%;
    background:rgba(255,255,255,0.55);
  }
  .thumb .mock-lines{
    width:70%;
  }
  .thumb .mock-lines .l{
    height:8px;
    border-radius:4px;
    background:rgba(255,255,255,0.35);
    margin-bottom:8px;
  }
  .thumb.dark .mock-lines .l{ background:rgba(255,255,255,0.28); }
  .thumb.light .mock-lines .l{ background:rgba(19,18,38,0.18); }
  .thumb.light .dots span{ background:rgba(19,18,38,0.2); }

  .project-info{ padding:1.1rem 1.3rem 1.4rem; }
  .project-info h3{
    font-size:1.02rem;
    font-weight:var(--framer-font-weight-bold);
    margin-bottom:0.25rem;
  }
  .project-info p{
    font-size:0.82rem;
    font-weight:var(--framer-font-weight);
    color:var(--muted);
  }

  /* ---------- MOBILE ---------- */
  @media (max-width: 780px){
    .hero{ padding:88px 5vw 0 5vw; }
    .nav-links{ display:none; }
    .topbar.scrolled{ min-width:0; width:92vw; }
    .stage{ min-height:60vh; margin-top:2rem; }
    .line-solid,.line-outline{ font-size:clamp(2rem,10vw,3.2rem); }
    .line-outline{ top:13%; }
    .figure-wrap img, .figure-wrap video, .figure-wrap canvas{ height:46vh; }

    .about h2{ margin-bottom:1.5rem; }
    .about-copy-text{ margin-bottom:2rem; }
    .about-tags{ gap:0.55rem; }
    .about-tags span{ font-size:0.76rem; padding:0.55rem 1rem; }
    .project-grid{ grid-template-columns:1fr; }
    .work-head{ flex-direction:column; align-items:flex-start; }
  }

/* ---------- CASE STUDY PAGES (in-page) ---------- */
/* ---------- HERO ---------- */
.cs-hero{
  position:relative;
  min-height:88vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:8rem 6vw 5vw;
  overflow:hidden;
}
.cs-hero.on-dark{ color:#ffffff; }
.cs-hero.on-light{ color:var(--ink); }
.cs-hero .eyebrow{
  display:inline-block;
  font-size:0.78rem;
  font-weight:800;
  letter-spacing:0.14em;
  text-transform:uppercase;
  margin-bottom:1.2rem;
  opacity:0.85;
}
.cs-hero.on-dark .eyebrow{ color:#E4D6FF; }
.cs-hero.on-light .eyebrow{ color:#4A2AA8; }
.cs-hero h1{
  font-family:var(--framer-font-family-bold);
  font-weight:800;
  font-size:3.4rem;
  line-height:1.05;
  letter-spacing:-0.01em;
  margin-bottom:1.4rem;
}
.cs-hero .tagline{
  font-size:clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight:600;
  line-height:1.6;
  opacity:0.92;
}

/* ---------- META BAR ---------- */
.cs-meta{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-bottom:1px solid var(--line);
}
.cs-meta div{
  padding:1.8rem 2vw;
  border-left:1px solid var(--line);
}
.cs-meta div:first-child{ border-left:none; }
.cs-meta .k{
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:0.5rem;
}
.cs-meta .v{
  font-size:0.98rem;
  font-weight:700;
  color:var(--ink);
}

/* ---------- SECTIONS ---------- */
.cs-section{ padding:4vw 6vw; }
.cs-section.tint{ background:var(--hero-bg); }
.cs-section-inner{ max-width:1100px; margin:0 auto; }
.cs-section .eyebrow{
  display:inline-block;
  font-size:0.76rem;
  font-weight:800;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:0.9rem;
}
.cs-section h2{
  font-family:var(--framer-font-family-bold);
  font-weight:800;
  font-size:clamp(1.8rem, 3.4vw, 2.3rem);
  line-height:1.2;
  margin-bottom:1.4rem;
}
.cs-section p{
  font-size:1.05rem;
  font-weight:500;
  line-height:1.85;
  color:var(--muted);
  max-width:88ch;
}
.cs-section p strong{
  color:var(--ink);
  font-weight:800;
}

/* ---------- PROCESS ---------- */
.cs-process{ max-width:1100px; margin:0 auto; }
.step{
  display:flex;
  gap:1.6rem;
  padding:1.8rem 0;
  border-top:1px solid var(--line);
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step .n{
  font-family:var(--framer-font-family-bold);
  font-weight:800;
  font-size:1.4rem;
  color:var(--accent);
  width:2.2rem;
  flex-shrink:0;
}
.step .t{ font-size:1.08rem; font-weight:800; margin-bottom:0.4rem; }
.step .d{ font-size:0.96rem; line-height:1.7; color:var(--muted); max-width:56ch; }

/* ---------- GALLERY ---------- */
.cs-gallery{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:1.3rem;
}
.cs-gallery .tile:first-child{ grid-row:span 2; }
.tile{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tile .dots{ position:absolute; top:1.1rem; left:1.1rem; display:flex; gap:0.35rem; }
.tile .dots span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.55); }
.tile.on-light .dots span{ background:rgba(19,18,38,0.22); }
.tile .mock-lines{ width:66%; }
.tile .mock-lines .l{ height:9px; border-radius:5px; background:rgba(255,255,255,0.32); margin-bottom:10px; }
.tile.on-light .mock-lines .l{ background:rgba(19,18,38,0.18); }

/* ---------- RESULTS (dark band) ---------- */
.cs-results{
  background:var(--ink);
  color:#ffffff;
  padding:7vw 6vw;
}
.cs-results-inner{ max-width:1100px; margin:0 auto; }
.cs-results .eyebrow{
  display:inline-block;
  font-size:0.76rem;
  font-weight:800;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#D9C6FF;
  margin-bottom:0.9rem;
}
.cs-results h2{
  font-family:var(--framer-font-family-bold);
  font-weight:800;
  font-size:clamp(1.8rem, 3.4vw, 2.6rem);
  margin-bottom:3rem;
  max-width:20ch;
}
.stat-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2rem;
}
.stat-row .num{
  font-family:var(--framer-font-family-bold);
  font-weight:800;
  font-size:clamp(2.2rem, 4vw, 3.2rem);
  background:linear-gradient(135deg, #ffffff, var(--accent) 160%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:0.5rem;
}
.stat-row .label{ font-size:0.92rem; color:rgba(255,255,255,0.65); max-width:22ch; }

/* ---------- NEXT PROJECT ---------- */
.cs-next{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:5vw 6vw;
  border-top:1px solid var(--line);
}
.cs-next a{ text-decoration:none; }
.cs-next-left .k{
  font-size:0.72rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:0.5rem;
}
.cs-next-left .name{
  font-family:var(--framer-font-family-bold);
  font-weight:800;
  font-size:clamp(1.6rem, 3vw, 2.2rem);
}
.cs-next-arrow{
  width:52px; height:52px;
  border-radius:50%;
  background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:background 0.2s ease, transform 0.2s ease;
}
.cs-next a:hover .cs-next-arrow{ background:var(--accent); transform:translateX(4px); }
.cs-next a:hover .cs-next-arrow svg{ stroke:#fff; }
.cs-next-arrow svg{ width:20px; height:20px; stroke:var(--ink); transition:stroke 0.2s ease; }

/* ---------- MOTHER TONGUE AI CASE STUDY: PAGE-SPECIFIC OVERRIDES ---------- */
#cs-mtl .cs-section{
  background:#ffffff;
  padding:3vw 6vw;
}
#cs-mtl .cs-section.dark .eyebrow{ color:var(--accent); }
#cs-mtl .cs-section.dark h2{ color:var(--ink); }
#cs-mtl .cs-section.dark p{ color:var(--muted); }
#cs-mtl .metric-item{
  background:var(--hero-bg);
  border:1px solid var(--line);
}
#cs-mtl .metric-item .m-label{ color:var(--ink); }
#cs-mtl .metric-item .m-val{ color:var(--muted); }

/* ---------- MOBILE ---------- */
@media (max-width: 780px){
  .cs-hero{ padding:7rem 6vw 4vw; min-height:72vh; }
  .cs-meta{ grid-template-columns:1fr 1fr; }
  .cs-meta div{ border-left:none; border-top:1px solid var(--line); }
  .cs-meta div:nth-child(1),.cs-meta div:nth-child(2){ border-top:none; }
  .cs-gallery{ grid-template-columns:1fr; }
  .cs-gallery .tile:first-child{ grid-row:auto; }
  .stat-row{ grid-template-columns:1fr; gap:1.8rem; }
  .cs-next{ flex-direction:column; align-items:flex-start; }
}

.cs-backlink{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  font-size:0.85rem;
  font-weight:700;
  text-decoration:none;
  color:inherit;
  opacity:0.8;
  margin-bottom:2rem;
  transition:opacity 0.2s ease;
}
.cs-backlink:hover{ opacity:1; }
.cs-backlink svg{ width:14px; height:14px; }

/* ---------- EXTENDED CASE-STUDY COMPONENTS (deep-dive template) ---------- */

/* dark full-bleed section for major transitions */
.cs-section.dark{
  background:var(--ink);
  color:#ffffff;
}
.cs-section.dark .eyebrow{ color:#D9C6FF; }
.cs-section.dark p{ color:rgba(255,255,255,0.68); }
.cs-section.dark h2{ color:#ffffff; }

/* sticky in-page case-study sub-nav */
.mtl-subnav-wrap{
  position:sticky;
  top:78px;
  z-index:150;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.mtl-subnav{
  display:flex;
  gap:0.4rem;
  overflow-x:auto;
  padding:1.1rem 6vw;
  scrollbar-width:none;
}
.mtl-subnav::-webkit-scrollbar{ display:none; }
.mtl-subnav a{
  flex-shrink:0;
  font-size:0.8rem;
  font-weight:700;
  text-decoration:none;
  color:var(--muted);
  background:transparent;
  padding:0.5rem 1rem;
  border-radius:999px;
  white-space:nowrap;
  transition:background 0.2s ease, color 0.2s ease;
}
.mtl-subnav a:hover{ color:var(--ink); background:var(--accent-soft); }

/* note / disclaimer callout */
.cs-note{
  border-left:3px solid var(--accent);
  background:var(--accent-soft);
  border-radius:0 14px 14px 0;
  padding:1.1rem 1.4rem;
  font-size:0.92rem;
  line-height:1.7;
  color:var(--ink);
  max-width:65ch;
  margin-top:1.4rem;
}
.cs-section.dark .cs-note{
  background:rgba(255,255,255,0.08);
  border-left-color:#D9C6FF;
  color:rgba(255,255,255,0.85);
}

/* user-group / persona cards */
.persona-grid{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.2rem;
}
.persona-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  padding:1.8rem;
}
.cs-section.dark .persona-card{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.14);
}
.persona-card .pn{
  font-family:var(--framer-font-family-bold);
  font-weight:800;
  font-size:1.9rem;
  color:var(--accent);
  margin-bottom:0.6rem;
}
.cs-section.dark .persona-card .pn{ color:#D9C6FF; }
.persona-card h4{ font-family:var(--framer-font-family-bold); font-size:1.15rem; font-weight:700; margin-bottom:0.5rem; }
.persona-card p{ font-size:0.92rem; line-height:1.65; color:var(--muted); max-width:none; }
.cs-section.dark .persona-card p{ color:rgba(255,255,255,0.65); }

/* role / checklist list */
.role-list{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.7rem 1.5rem;
  list-style:none;
}
.role-list li{
  display:flex;
  gap:0.6rem;
  font-size:0.95rem;
  line-height:1.6;
  color:var(--ink);
}
.role-list li::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--accent);
  margin-top:0.55rem;
  flex-shrink:0;
}

/* safety / safeguard list */
.safety-grid{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.9rem 1.6rem;
}
.safety-item{
  display:flex;
  gap:0.8rem;
  align-items:flex-start;
  font-size:0.92rem;
  line-height:1.6;
}
.safety-item .ic{
  width:26px; height:26px;
  border-radius:8px;
  background:var(--accent-soft);
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  margin-top:0.1rem;
}
.cs-section.dark .safety-item .ic{ background:rgba(255,255,255,0.1); }
.safety-item .ic svg{ width:13px; height:13px; stroke:var(--accent); }
.cs-section.dark .safety-item .ic svg{ stroke:#D9C6FF; }

/* flow diagram */
.flow-diagram{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  row-gap:0.9rem;
  column-gap:0;
}
.flow-item{
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.flow-step{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:0.9rem 1.15rem;
  font-size:0.86rem;
  font-weight:700;
  color:var(--ink);
  max-width:190px;
}
.cs-section.dark .flow-step{ background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.14); color:#fff; }
.flow-arrow{
  color:var(--accent);
  font-size:1.1rem;
  flex-shrink:0;
  margin:0 0.5rem;
}
.cs-section.dark .flow-arrow{ color:#D9C6FF; }
.flow-label{
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:0.9rem;
  display:block;
}

/* design-system comparison */
.compare-grid{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.3rem;
}
.compare-col{
  background:var(--hero-bg);
  border-radius:20px;
  padding:1.8rem;
}
.compare-col h4{
  font-family:var(--framer-font-family-bold);
  font-weight:700;
  font-size:1.3rem;
  margin-bottom:1rem;
}
.compare-col ul{ list-style:none; }
.compare-col li{
  font-size:0.9rem;
  line-height:1.6;
  color:var(--muted);
  padding:0.5rem 0;
  border-top:1px solid var(--line);
}
.compare-col li:first-of-type{ border-top:none; }

/* before / after */
.before-after{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.3rem;
}
.ba-block .cap{
  font-size:0.78rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:0.7rem;
  color:var(--muted);
}
.ba-block.after .cap{ color:var(--accent); }
.ba-tile{
  border-radius:18px;
  border:1px solid var(--line);
  background:#f3f3f5;
  min-height:170px;
  padding:1.2rem;
  display:flex;
  flex-direction:column;
  gap:8px;
  justify-content:center;
}
.ba-tile .l{ height:9px; border-radius:5px; background:rgba(19,18,38,0.14); }
.ba-block .note{ font-size:0.85rem; color:var(--muted); margin-top:0.8rem; line-height:1.6; max-width:none; }

/* metrics grid */
.metrics-grid{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.7rem;
}
.metric-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.9rem 1.2rem;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:14px;
  font-size:0.88rem;
}
.metric-item .m-label{ color:rgba(255,255,255,0.85); }
.metric-item .m-val{
  font-size:0.72rem;
  font-weight:700;
  color:rgba(255,255,255,0.45);
  white-space:nowrap;
  flex-shrink:0;
}

/* reflection / next-step list */
.dot-list{ max-width:1100px; margin:0 auto; list-style:none; }
.dot-list li{
  display:flex; gap:0.9rem;
  font-size:0.98rem; line-height:1.75;
  color:var(--muted);
  padding:0.85rem 0;
  border-top:1px solid var(--line);
}
.dot-list li:first-child{ border-top:none; }
.dot-list li::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  margin-top:0.6rem;
  flex-shrink:0;
}

/* closing statement */
.cs-closing{
  background:var(--ink);
  color:#fff;
  padding:9vw 6vw;
  text-align:center;
}
.cs-closing blockquote{
  max-width:900px;
  margin:0 auto;
  font-family:var(--framer-font-family-bold);
  font-weight:800;
  font-style:italic;
  font-size:clamp(1.5rem, 3vw, 2.3rem);
  line-height:1.4;
}
.cs-closing cite{
  display:block;
  margin-top:1.6rem;
  font-family:var(--framer-font-family);
  font-style:normal;
  font-weight:700;
  font-size:0.85rem;
  color:rgba(255,255,255,0.55);
}

/* challenge / solution pairs */
.pair-grid{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.1rem;
}
.pair-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  padding:1.6rem 1.7rem;
}
.pair-card .lbl{
  font-size:0.7rem;
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin-bottom:0.5rem;
}
.pair-card .challenge-txt{
  font-size:0.95rem;
  font-weight:700;
  line-height:1.55;
  color:var(--ink);
  margin-bottom:1.1rem;
  padding-bottom:1.1rem;
  border-bottom:1px dashed var(--line);
}
.pair-card .lbl.c{ color:var(--muted); }
.pair-card .lbl.s{ color:var(--accent); }
.pair-card .solution-txt{
  font-size:0.92rem;
  line-height:1.65;
  color:var(--muted);
}

/* team grid */
.team-grid{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1rem;
}
.team-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  padding:1.3rem 1.4rem;
}
.team-card .role{
  display:flex;
  align-items:center;
  gap:0.5rem;
  font-size:0.98rem;
  font-weight:800;
  color:var(--ink);
  margin-bottom:0.4rem;
}
.team-card .role .badge{
  font-size:0.68rem;
  font-weight:800;
  background:var(--accent-soft);
  color:var(--accent);
  padding:0.15rem 0.5rem;
  border-radius:999px;
}
.team-card p{ font-size:0.85rem; color:var(--muted); line-height:1.55; max-width:none; }
.team-card.me{
  background:var(--accent-soft);
  border-color:transparent;
}

/* stat + list combo (Hotjar review) */
.stat-callout{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:0.7fr 1fr;
  gap:2rem;
  align-items:center;
}
.stat-callout .big-num{
  font-family:var(--framer-font-family-bold);
  font-weight:800;
  font-size:clamp(3rem, 7vw, 5rem);
  line-height:1;
  color:var(--ink);
}
.stat-callout .big-num-label{
  font-size:0.85rem;
  color:var(--muted);
  margin-top:0.6rem;
  max-width:22ch;
  line-height:1.5;
}
.stat-callout .frustration-list{ list-style:none; }
.stat-callout .frustration-list li{
  font-size:0.92rem;
  line-height:1.6;
  color:var(--ink);
  padding:0.6rem 0;
  border-top:1px solid var(--line);
  display:flex;
  gap:0.7rem;
}
.stat-callout .frustration-list li:first-child{ border-top:none; }
.stat-callout .frustration-list li::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  margin-top:0.55rem;
  flex-shrink:0;
}

/* ---------- LOW-FI SCREENS: TABS + LAPTOP MOCKUP ---------- */
.lofi-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  justify-content:center;
  margin-bottom:2.6rem;
}
.lofi-tab{
  font-family:inherit;
  font-size:0.84rem;
  font-weight:800;
  padding:0.6rem 1.3rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--muted);
  cursor:pointer;
  transition:all 0.2s ease;
}
.lofi-tab:hover{ color:var(--ink); }
.lofi-tab.active{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}

.laptop-frame{ max-width:840px; margin:0 auto; }
.laptop-bezel{
  background:#1b1a24;
  border-radius:16px 16px 5px 5px;
  padding:12px 12px 6px;
  box-shadow:0 30px 60px rgba(19,18,38,0.18);
}
.laptop-cam{
  width:5px; height:5px;
  border-radius:50%;
  background:#3a3947;
  margin:0 auto 8px;
}
.laptop-screen{
  position:relative;
  background:#f4f4f6;
  border-radius:5px;
  aspect-ratio:16/10;
  overflow:hidden;
}
.laptop-base{
  height:12px;
  background:linear-gradient(180deg,#2c2b36,#1b1a24);
  border-radius:0 0 8px 8px;
  margin:0 -10px;
  position:relative;
}
.laptop-base::after{
  content:"";
  position:absolute;
  left:50%; top:0;
  transform:translateX(-50%);
  width:70px; height:4px;
  background:#0e0d14;
  border-radius:0 0 5px 5px;
}

.lofi-panel{ display:none; position:absolute; inset:0; }
.lofi-panel.active{ display:block; }
.lofi-slide{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 0.6s ease;
}
.lofi-slide.active{ opacity:1; }

/* wireframe primitives */
.wf-screen{ width:100%; height:100%; display:flex; flex-direction:column; }
.wf-topbar{ height:11%; background:#e7e7ec; display:flex; align-items:center; padding:0 4%; gap:5px; flex-shrink:0; }
.wf-dot{ width:6px; height:6px; border-radius:50%; background:#c7c7cf; }
.wf-body{ flex:1; display:flex; min-height:0; }
.wf-sidebar{ width:20%; background:#eceef1; padding:7% 4%; display:flex; flex-direction:column; gap:12px; flex-shrink:0; }
.wf-main{ flex:1; padding:5%; display:flex; flex-direction:column; gap:10px; min-width:0; }
.wf-bar{ height:10%; border-radius:4px; background:#d3d3da; flex-shrink:0; }
.wf-line{ height:7%; border-radius:3px; background:#dcdce2; flex-shrink:0; }
.wf-box{ border-radius:8px; background:#e2e2e8; }
.wf-btn{ height:9%; width:38%; border-radius:999px; background:var(--accent); opacity:0.55; flex-shrink:0; }
.wf-row{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.wf-circle{ width:14px; height:14px; border-radius:50%; background:#d3d3da; flex-shrink:0; }
.wf-card{ flex:1; border-radius:8px; background:#eceef1; }
.wf-pill{ width:30px; height:8px; border-radius:999px; background:#c9d6f5; flex-shrink:0; }
.wf-grid3{ display:flex; gap:8px; flex:1; }
.wf-center{ align-items:center; justify-content:center; text-align:center; }

/* ---------- REDESIGN: MOTHER TONGUE CASE STUDY v2 ---------- */

/* hero project-title line, sits above the big editorial h1 */
.cs-project-title{
  font-size:1.05rem;
  font-weight:700;
  opacity:0.85;
  margin-bottom:0.6rem;
}

/* overview facts panel (hero-adjacent) */
.overview-grid{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1rem;
}
.overview-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  padding:1.6rem 1.5rem;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.overview-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(19,18,38,0.08);
}
.overview-card .ic{
  width:38px; height:38px;
  border-radius:10px;
  background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.1rem;
}
.overview-card .ic svg{ width:18px; height:18px; stroke:var(--accent); }
.overview-card .k{
  font-size:0.68rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:0.5rem;
}
.overview-card .v{ font-size:0.95rem; font-weight:700; color:var(--ink); line-height:1.5; }

/* "how might we" pull statement */
.hmw-block{
  max-width:900px;
  margin:2rem auto 0;
  border-left:3px solid var(--accent);
  padding:0.3rem 0 0.3rem 1.6rem;
}
.hmw-block .lbl{
  font-size:0.72rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--accent); margin-bottom:0.6rem; display:block;
}
.hmw-block p{
  font-family:var(--framer-font-family-bold);
  font-size:clamp(1.2rem, 2.2vw, 1.6rem);
  line-height:1.4;
  color:var(--ink);
  max-width:none;
}

/* one connected flowchart, all roles as rows inside a single card */
.role-flows{
  max-width:1100px;
  margin:0 auto;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
}
.role-flow{
  padding:1.5rem 1.8rem;
  border-top:1px solid var(--line);
}
.role-flow:first-child{ border-top:none; }
.rf-head{ margin-bottom:1.2rem; }
.rf-badge{
  display:inline-block;
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
  background:var(--accent-soft);
  padding:0.35rem 0.8rem;
  border-radius:999px;
}
.fc-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  row-gap:1rem;
}
.fc-node{
  display:flex;
  align-items:center;
  text-align:left;
  width:170px;
  padding:0.85rem 1rem;
  border:1.5px solid var(--line);
  border-radius:12px;
  background:var(--hero-bg);
  flex-shrink:0;
}
.fc-node .fc-t{ font-size:0.85rem; font-weight:700; color:var(--ink); line-height:1.4; }
.fc-connector{
  display:flex;
  align-items:center;
  width:34px;
  flex-shrink:0;
}
.fc-connector .fc-line{
  flex:1;
  height:2px;
  background:var(--accent);
  opacity:0.4;
}
.fc-connector .fc-arrow{
  width:0; height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:7px solid var(--accent);
  opacity:0.7;
  flex-shrink:0;
}

@media (max-width: 780px){
  .fc-row{ flex-direction:column; align-items:flex-start; }
  .fc-node{ width:100%; }
  .fc-connector{ width:auto; height:20px; margin-left:19px; }
  .fc-connector .fc-line{ width:2px; height:100%; }
  .fc-connector .fc-arrow{
    border-top:7px solid var(--accent);
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:none;
    opacity:0.7;
  }
}

/* insight cards: Observation -> Implication -> Decision */
.insight-grid{ max-width:1100px; margin:0 auto; display:flex; flex-direction:column; gap:0.9rem; }
.insight-card{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:1.2rem;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  padding:1.4rem 1.6rem;
}
.insight-card .col .lbl{
  font-size:0.68rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  margin-bottom:0.4rem; display:block;
}
.insight-card .col:nth-child(1) .lbl{ color:var(--muted); }
.insight-card .col:nth-child(2) .lbl{ color:var(--accent); }
.insight-card .col:nth-child(3) .lbl{ color:#2748c4; }
.insight-card .col p{ font-size:0.9rem; line-height:1.6; color:var(--ink); max-width:none; }

/* iteration story cards */
.iter-story{
  max-width:1100px;
  margin:0 auto 2.2rem;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  padding:1.8rem 2rem;
}
.iter-story:last-child{ margin-bottom:0; }
.iter-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.2rem;
  margin-bottom:1.2rem;
}
.iter-grid .lbl{
  font-size:0.68rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--muted); margin-bottom:0.4rem; display:block;
}
.iter-grid p{ font-size:0.88rem; line-height:1.6; color:var(--ink); max-width:none; }
.iter-result{
  border-top:1px dashed var(--line);
  padding-top:1rem;
  font-size:0.88rem;
  color:var(--muted);
}
.iter-result strong{ color:var(--ink); }

/* UX decision cards: Problem -> Considerations -> Decision -> Effect */
.decision-grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.decision-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  padding:1.5rem 1.6rem;
}
.decision-card h5{
  font-family:var(--framer-font-family-bold);
  font-size:1.05rem;
  margin-bottom:0.9rem;
  color:var(--ink);
}
.decision-card .row{ margin-bottom:0.8rem; }
.decision-card .row:last-child{ margin-bottom:0; }
.decision-card .row .lbl{
  font-size:0.66rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent); margin-bottom:0.3rem; display:block;
}
.decision-card .row p{ font-size:0.86rem; line-height:1.6; color:var(--muted); max-width:none; }

/* trust/safety cards with status badges */
.trust-grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; }
.trust-card{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:14px;
  padding:1rem 1.2rem;
}
.trust-card .txt{ font-size:0.88rem; line-height:1.55; color:rgba(255,255,255,0.85); }
.status-badge{
  flex-shrink:0;
  font-size:0.66rem;
  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:0.3rem 0.65rem;
  border-radius:999px;
  white-space:nowrap;
}
.status-badge.implemented{ background:rgba(74,222,128,0.18); color:#86efac; }
.status-badge.tested{ background:rgba(96,165,250,0.18); color:#93c5fd; }
.status-badge.recommended{ background:rgba(201,169,245,0.18); color:#EFE6FF; }
.status-badge.future{ background:rgba(255,255,255,0.12); color:rgba(255,255,255,0.7); }

/* metrics grouped by question */
.metric-group{ max-width:1100px; margin:0 auto 2rem; }
.metric-group:last-child{ margin-bottom:0; }
.metric-group .q{
  font-family:var(--framer-font-family-bold);
  font-size:1rem;
  color:#ffffff;
  margin-bottom:0.9rem;
}

/* footer nav: prev / home / next */
.cs-footer-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:2.2rem 6vw;
  border-top:1px solid var(--line);
  flex-wrap:wrap;
}
.cs-footer-nav a{
  font-size:0.85rem;
  font-weight:700;
  color:var(--muted);
  text-decoration:none;
  transition:color 0.2s ease;
}
.cs-footer-nav a:hover{ color:var(--ink); }
.cs-footer-nav .home-link{ color:var(--accent); }

/* real-image blocks for image-heavy case studies */
.img-block{
  max-width:1100px;
  margin:0 auto;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 20px 40px rgba(19,18,38,0.08);
}
.img-block img{ width:100%; height:auto; display:block; }
.img-caption{
  max-width:1100px;
  margin:0.9rem auto 0;
  font-size:0.85rem;
  color:var(--muted);
  text-align:center;
}
.split-block{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:2rem;
  align-items:center;
}
.split-block .split-img{
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
}
.split-block .split-img img{ width:100%; height:auto; display:block; }
.img-grid{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.img-grid .img-block{ max-width:none; }
.img-grid-3{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:0.9rem;
}
.img-grid-3 .img-block{ max-width:none; }

@media (max-width: 780px){
  .split-block{ grid-template-columns:1fr; }
  .img-grid,.img-grid-3{ grid-template-columns:1fr; }
}

@media (max-width: 780px){
  .overview-grid{ grid-template-columns:1fr 1fr; }
  .insight-card,.iter-grid{ grid-template-columns:1fr; }
  .decision-grid,.trust-grid{ grid-template-columns:1fr; }
}

@media (max-width: 780px){
  .persona-grid,.role-list,.safety-grid,.compare-grid,.before-after,.metrics-grid,.pair-grid,.team-grid{
    grid-template-columns:1fr;
  }
  .stat-callout{ grid-template-columns:1fr; gap:1.2rem; }
}

/* ---------- HERO: scroll-scrubbed statue layered over the headline ----------
   The statue is drawn to a WebGL canvas with a real alpha channel (see the
   packed colour+matte clip below), so the hair silhouette cuts into the
   outlined second line exactly the way the prototype shows. Every number
   here was measured off that prototype; the vars are the tuning surface. */
.hero-scrub{
  position:relative;
  /* Scroll runway. This is the smoothness control: seeking a video costs a
     fixed ~20-40ms round-trip whatever its resolution, so the pipeline tops
     out around 25-30 frames a second. At 240vh a single 100px wheel notch
     demanded ~9 frames at once, which is more than that budget - hence the
     jumpy bursts. With rVFC driving the repaints the pipeline sustains ~60,
     so 300vh (~6 frames per notch) is comfortably inside budget while
     keeping the animation brisk. */
  height:300vh;
}
.hero-static{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;       /* the figure runs past the fold and is clipped here */
  background:var(--bg);
}

/* --- headline ------------------------------------------------------------ */
.hero-copy{
  position:absolute;
  /* Centred on the page: the box is pinned to the viewport's midline, so with
     text-align:center the headline's optical centre is exactly 50vw. It used
     to sit in a box running 9.08vw -> 96.68vw, which centred the text on
     52.88vw - visibly off to the right. Width is deliberately unchanged, so
     the fitted font-size is identical to before. */
  left:50%;
  transform:translateX(-50%);
  width:var(--hero-copy-width);

  /* --- the two dials -------------------------------------------------------
     font-size and top are applied by script (it measures the real rendered
     text, so the headline still fits when Anton is substituted). Setting them
     directly in this rule would be overwritten; set these instead.
       auto   -> size to the box / anchor caps to --hero-cap-top
       length -> used verbatim (px, vh, vw, rem)                              */
  --hero-copy-size:auto;
  --hero-copy-top:auto;
  top:0;                 /* placeholder; the real value is applied by script */
  z-index:1;             /* behind the figure - the statue occludes line 2 */
  margin:0;
  font-family:var(--hero-display-font);
  font-weight:400;
  /* Cap-to-cap spacing is pinned in viewport units rather than to the
     font-size, so line 2 lands where the prototype puts it even if Anton is
     substituted by a fallback with different metrics. */
  line-height:var(--hero-line);
  letter-spacing:-0.004em;
  text-align:center;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
  -webkit-user-select:none;
  user-select:none;
}
.hero-copy .hl{ display:block; }
.hl-solid{ color:#000; }
.hl-outline{
  color:transparent;
  -webkit-text-stroke:var(--hero-stroke) #000;
}

/* --- figure -------------------------------------------------------------- */
.hero-figure{
  position:absolute;
  top:var(--hero-fig-top);
  left:50%;
  width:var(--hero-fig-w);
  aspect-ratio:1800 / 1068;   /* the packed clip's colour panel */
  transform:translateX(calc(-50% + var(--hero-fig-shift)));
  z-index:2;             /* in front of the headline */
  pointer-events:none;
}
.hero-figure canvas,
.hero-figure .hero-poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.hero-figure .hero-poster{
  object-fit:contain;
  transition:opacity .25s ease;
}
.hero-figure .hero-poster.is-hidden{ opacity:0; }
.hero-figure canvas{ opacity:0; transition:opacity .25s ease; }
.hero-figure canvas.is-ready{ opacity:1; }

/* The <video> is only a decode source for the canvas; it is never displayed.
   It stays on-screen at 2px because browsers may stop decoding a video that
   is display:none or scrolled out of view. */
#heroVideo{
  position:fixed;
  left:0; top:0;
  width:2px; height:2px;
  opacity:0.01;
  pointer-events:none;
  z-index:-1;
}
/* No WebGL: keep the still poster (which already carries its own alpha) and
   simply don't animate. The packed clip must never be shown directly - it is
   colour and matte side by side, so it would look like two half-images. */
.hero-static.no-gl #heroCanvas{ display:none; }

/* Laptop: the explicit values you asked for. Outside this range the headline
   goes back to sizing itself, so it can't overflow a narrow window or look
   undersized on a large display. */
@media (min-width: 1200px) and (max-width: 1680px){
  .hero-copy{
    --hero-copy-size:136.826px;
    --hero-copy-top:91.21px;
  }
}

@media (max-width: 900px){
  :root{
    /* The figure keeps its desktop proportions on purpose: it has to run
       past the fold so the clip's bottom-right watermark stays off screen,
       exactly as it does on desktop. The sides crop instead. */
    --hero-fig-top:35.4vh;
    --hero-fig-w:112.9vh;
    --hero-fig-shift:calc(-1vw + 1.46vh);
    --hero-copy-width:88vw;
    --hero-cap-top:16vh;
    --hero-line:13vh;
  }
  .hero-scrub{ height:280vh; }
}

/* ================= CASE-STUDY FAN =================================
   Five cards start stacked in the middle, then deal outwards one after
   another into a fan. Each card carries its own resting transform in
   inline custom properties (--x/--y/--r/--s/--z); the class .is-in is what
   swaps from the stacked state to that resting state, so the stagger is
   driven by JS timing rather than transition-delay - that keeps hover
   instant instead of inheriting a card's entry delay.               */
.fan-sec{
  position:relative;
  background:var(--bg);
  /* section rhythm: 2.5rem top and bottom across the home page */
  padding:2.5rem 4vw;
  overflow:hidden;              /* outer cards lean past the edge on small windows */
}
.fan-intro{
  max-width:900px;
  margin:0 auto 3.5rem;
  text-align:center;
}
/* An eyebrow + heading, sized to match the other section headings on the
   page (.xp-title, .abt-title) so the deck reads as one section among
   several rather than a second front door. */
.fan-kicker{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1rem;
}
.fan-kicker::before,
.fan-kicker::after{
  content:'';
  width:26px; height:1px;
  background:var(--line-strong);
  opacity:0.4;
}
.fan-title{
  font-size:clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight:800;
  letter-spacing:-0.025em;
  line-height:1.12;
  color:var(--ink);
  margin:0 0 1rem;
}
.fan-sub{
  font-size:clamp(0.98rem, 1.3vw, 1.12rem);
  line-height:1.6;
  color:var(--muted);
  margin:0 auto;
  max-width:640px;
}

/* --- the deck --------------------------------------------------------- */
.fan{
  position:relative;
  /* just enough for the outer cards once their lean and drop are counted;
     any more and the deck floats in a band of empty space */
  height:clamp(330px, 32vw, 450px);
  margin:0 auto;
  max-width:1400px;
}
.fan-card{
  --lift:0px;                   /* hover: rise */
  --grow:1;                     /* hover: scale */
  --straight:1;                 /* hover: 0 = fully upright, 1 = resting angle */
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(210px, 21vw, 310px);
  margin-left:calc(clamp(210px, 21vw, 310px) / -2);
  margin-top:calc(clamp(210px, 21vw, 310px) * -0.62);
  z-index:var(--z, 1);
  display:block;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow:0 10px 26px rgba(19,18,38,0.10);
  /* Phase 0 - not yet arrived: just above the centre, small, invisible. */
  transform:translate(0, -34px) scale(0.86);
  opacity:0;
  transition:transform 0.5s cubic-bezier(0.22,1,0.36,1),
             opacity   0.36s ease,
             box-shadow 0.35s ease;
  will-change:transform;
}
/* Phase 1 - gathered: the cards drop in one below another to build a single
   neat pile in the middle of the section, still square-on. */
.fan-card.is-stacked{
  opacity:1;
  transform:translate(0, var(--pile, 0px)) rotate(var(--pr, 0deg)) scale(0.95);
}
/* Phase 2 - spread: the pile opens out into the fan. Longer, softer easing
   than the gather so the two moves read as separate beats rather than one
   continuous slide. */
.fan-card.is-in{
  opacity:1;
  transform:
    translate(var(--x), calc(var(--y) + var(--lift)))
    rotate(calc(var(--r) * var(--straight)))
    scale(calc(var(--s) * var(--grow)));
  transition:transform 0.85s cubic-bezier(0.16,1,0.3,1),
             opacity   0.3s ease,
             box-shadow 0.35s ease;
}
/* Hover: lift, grow, straighten up and come to the front. Shorter transition
   than the deal-in so it feels responsive rather than floaty. */
.fan-card.is-in:hover,
.fan-card.is-in:focus-visible{
  --lift:-26px;
  --grow:1.07;
  --straight:0.25;
  z-index:20;
  box-shadow:0 30px 60px rgba(19,18,38,0.22);
  transition:transform 0.34s cubic-bezier(0.22,1,0.36,1),
             box-shadow 0.34s ease;
}
.fan-card:focus-visible{ outline:2px solid #4A2AA8; outline-offset:4px; }

.fan-card .thumb{
  aspect-ratio:4/3;
  background-size:cover;
  background-position:center;
}
.fan-card .project-info{ padding:0.95rem 1.1rem 1.15rem; }
.fan-card .project-info h3{
  font-size:0.98rem;
  line-height:1.3;
  margin:0 0 0.3rem;
}
.fan-card .project-info p{
  font-size:0.82rem;
  color:var(--muted);
  margin:0;
}
/* index badge, like the numbers in the reference */
/* The thumbnails range from dark gradients to near-white screenshots, so the
   badge can't rely on the thumb's class - 1Exchange is marked "dark" but its
   image is a white UI capture, which made a white numeral invisible. A small
   translucent puck gives it a guaranteed background on any artwork. */
.fan-num{
  position:absolute;
  top:0.6rem; right:0.6rem;
  z-index:2;
  min-width:1.9rem;
  padding:0.18rem 0.42rem;
  border-radius:999px;
  background:rgba(19,18,38,0.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  font-family:var(--hero-display-font);
  font-size:1.05rem;
  line-height:1.15;
  text-align:center;
  color:#fff;
  letter-spacing:0.02em;
}
.fan-card.lean-left .fan-num{ left:0.6rem; right:auto; }
/* the little window dots would collide with a left-hand badge, and they add
   nothing at this size */
.fan-card .dots{ display:none; }

/* --- the two projects that aren't in the deck ------------------------- */
.fan-more{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  justify-content:center;
  margin:2rem auto 0;
}
.fan-more a{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.6rem 1.1rem;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:0.9rem;
  text-decoration:none;
  color:var(--ink);
  background:var(--paper);
  transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.fan-more a:hover{
  transform:translateY(-3px);
  border-color:#4A2AA8;
  box-shadow:0 10px 22px rgba(19,18,38,0.12);
}

/* --- narrow screens: a fan is unusable, so stack it ------------------- */
@media (max-width: 820px){
  .fan{
    height:auto;
    display:grid;
    gap:1.1rem;
    max-width:420px;
  }
  .fan-card{
    position:relative;
    left:auto; top:auto;
    width:100%;
    margin:0;
    transform:translateY(26px) scale(1);
    z-index:auto !important;
  }
  /* No fan on narrow screens, so both phases resolve to the same resting
     position - the cards simply rise into place one after another. */
  .fan-card.is-stacked,
  .fan-card.is-in{ transform:translateY(0) scale(1); }
  .fan-card.is-in:hover,
  .fan-card.is-in:focus-visible{ transform:translateY(-6px) scale(1.02); }
}

@media (prefers-reduced-motion: reduce){
  .fan-card{ transition:opacity 0.2s linear, box-shadow 0.2s ease; }
}

/* ================= iTRAFFIC CASE STUDY ===========================
   The other case studies draw their visuals in CSS; this one is the
   first with real screenshots, so it needs cover, board and gallery
   styles of its own. */

/* The base rule gives .cs-section p no bottom margin, which was fine when
   every section held a single paragraph. iTraffic has two in a row, and they
   ran together as one block. */
.cs-section p + p{ margin-top:1.1rem; }

/* --- cover photo ----------------------------------------------------
   The hero carries a real screenshot behind the title. The scrim is two
   layers: a dark wash for overall contrast plus a stronger bottom-up
   gradient, so the headline never sits on a bright chart. */
.cs-hero.has-cover{
  position:relative;
  isolation:isolate;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.cs-hero.has-cover::before{
  content:'';
  position:absolute; inset:0;
  z-index:-1;
  /* Enough scrim to keep the headline legible, and no more - the earlier
     pass was heavy enough that the screenshot behind it had all but
     disappeared. The weight is concentrated on the lower-left, where the
     title sits, and the rest of the frame is left bright enough to read
     as a photograph. */
  background:
    linear-gradient(to right, rgba(9,11,14,0.78) 0%, rgba(9,11,14,0.52) 42%, rgba(9,11,14,0.30) 100%),
    linear-gradient(to top, rgba(9,11,14,0.72) 0%, rgba(9,11,14,0.14) 58%, rgba(9,11,14,0.30) 100%);
}
/* a soft halo directly under the copy, so the type has its own contrast
   without dimming the whole picture */
.cs-hero.has-cover::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:min(74%, 900px); height:62%;
  z-index:-1;
  background:radial-gradient(90% 100% at 12% 100%, rgba(9,11,14,0.72), transparent 72%);
  pointer-events:none;
}

/* --- the three redesigned areas -------------------------------------
   One panel, three tiles, captions underneath - the arrangement from the
   brief, but built in markup so it stays sharp at any width and the
   labels are real text. The tiles are previews: the full-size shot opens
   on click rather than taking over the page. */
.it-board{
  max-width:1180px;
  margin:2.8rem auto 0;
  padding:2.2rem;
  border:1px solid var(--line);
  border-radius:26px;
  background:#fff;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2rem;
}
.cs-section.tint .it-board{ background:#fff; }
.cs-section.dark .it-board{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.14);
}
/* the before/after pair - same panel, two up, and the screenshots are a
   different shape from the area shots so they get their own ratio */
.it-board.two{ grid-template-columns:repeat(2, 1fr); gap:2.4rem; }
.it-board.two .it-tile img{ aspect-ratio:1600/882; }
.it-board.two .it-tile .it-cap{ font-size:1.35rem; margin-top:1.3rem; }

.it-tile{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:none;
  text-align:left;
  cursor:zoom-in;
  font:inherit;
  color:inherit;
}
.it-tile img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1800/933;
  object-fit:cover;
  border-radius:8px;
  background:#16191D;
  transition:transform 0.35s ease, box-shadow 0.35s ease;
}
.it-tile:hover img,
.it-tile:focus-visible img{
  transform:translateY(-4px);
  box-shadow:0 18px 34px rgba(0,0,0,0.22);
}
.it-tile:focus-visible{ outline:2px solid var(--accent, #3D5AAE); outline-offset:6px; border-radius:10px; }
.it-tile .it-cap{
  display:block;
  margin-top:1.1rem;
  font-size:1.05rem;
  font-weight:700;
  color:var(--ink);
}
.cs-section.dark .it-tile .it-cap{ color:#fff; }

/* --- style-guide gallery --------------------------------------------
   A marquee, not a scroller: the boards drift past on their own and the
   track carries two copies so the loop has no seam. The translate is
   -50% minus half a gap, because the flex gap between the two copies is
   part of the track width and would otherwise show up as a hitch. */
.sg-gallery{
  --sg-gap:1.6rem;
  --sg-dur:64s;
  position:relative;
  margin:2.6rem auto 0;
  max-width:1400px;
  overflow:hidden;
  /* fade the boards out at the edges so they enter and leave the frame
     instead of being chopped off by it */
  -webkit-mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.sg-track{
  display:flex;
  gap:var(--sg-gap);
  width:max-content;
  padding:0.5rem 0 1.4rem;
  will-change:transform;
}
/* only once the script has appended the second copy - otherwise the single
   set would slide off the left and leave an empty frame */
.sg-track.is-looped{ animation:sg-marquee var(--sg-dur) linear infinite; }
@keyframes sg-marquee{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(calc(-50% - var(--sg-gap) / 2), 0, 0); }
}
/* let people stop it and look */
.sg-gallery:hover .sg-track,
.sg-gallery:focus-within .sg-track{ animation-play-state:paused; }
.sg-item{
  flex:0 0 auto;
  /* Sized by HEIGHT, not width: the boards are portrait, so a width-based
     size made each one taller than the window and you could never see a
     whole board at once. Bounding the height instead keeps every board
     readable in place and lets the width fall out of the artwork. */
  height:clamp(420px, 74vh, 820px);
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.10);
  background:#1b1f26;
  padding:0;
  cursor:zoom-in;
  transition:transform 0.35s ease, box-shadow 0.35s ease;
}
.sg-item img{ display:block; height:100%; width:auto; }
.sg-item:hover,
.sg-item:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 22px 44px rgba(0,0,0,0.4);
}
.sg-item:focus-visible{ outline:2px solid #fff; outline-offset:4px; }

/* --- lightbox --------------------------------------------------------
   Shared by the area tiles and the gallery boards. It reuses the very
   same image the page already decoded, so opening one costs no download
   and shows the full-resolution artwork. */
.it-lightbox{
  position:fixed; inset:0;
  z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem, 4vw, 3.5rem);
  background:rgba(8,10,13,0.92);
  -webkit-backdrop-filter:blur(4px);
          backdrop-filter:blur(4px);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.25s ease, visibility 0.25s ease;
  cursor:zoom-out;
}
.it-lightbox.open{ opacity:1; visibility:visible; }
.it-lightbox img{
  max-width:100%;
  max-height:100%;
  width:auto; height:auto;
  border-radius:10px;
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
  transform:scale(0.97);
  transition:transform 0.25s ease;
}
.it-lightbox.open img{ transform:scale(1); }
.it-lightbox .it-close{
  position:absolute;
  top:1.1rem; right:1.3rem;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.24);
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-size:1.5rem; line-height:1;
  cursor:pointer;
}
.it-lightbox .it-close:hover{ background:rgba(255,255,255,0.18); }
body.it-locked{ overflow:hidden; }

@media (max-width: 900px){
  /* .it-board.two also needs naming here - it is the more specific selector,
     so a rule on .it-board alone loses to it and the two screenshots stayed
     side by side at about 130px each on a phone. */
  .it-board,
  .it-board.two{
    grid-template-columns:1fr;
    gap:1.8rem;
    padding:1.4rem;
    border-radius:20px;
  }
  .it-board.two .it-tile .it-cap{ font-size:1.15rem; }
}
@media (max-width: 820px){
  /* whichever runs out first: two thirds of the screen, or the height a
     board reaches when it is 78vw wide (the boards are 1000x1676) */
  .sg-item{ height:min(66vh, calc(78vw * 1.676)); }
}

@media (prefers-reduced-motion: reduce){
  .sg-track{ animation:none; }
  .sg-gallery{
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-mask-image:none; mask-image:none;
  }
  .sg-gallery::-webkit-scrollbar{ display:none; }
  .it-tile img, .sg-item, .it-lightbox, .it-lightbox img{ transition:none; }
}


/* ================= BLACK-AND-WHITE TOKENS ========================
   Black is for ink, buttons and rules - never for a background. These
   are shared by the About band, the Numbers band and the Experience
   page, so the three stay in step. */
:root{
  --bw-bg:#ffffff;
  --bw-band:#F4F6FA;                    /* the alternate band ground */
  --bw-ink:#0B0C10;                     /* the black */
  --bw-ink-2:rgba(11,12,16,0.66);       /* body copy */
  /* 0.58, not 0.45: composited over the band ground that lands at 4.7:1,
     where 0.45 was 3.1:1 - under AA for the small uppercase labels this
     drives (eyebrows, captions, date ranges) */
  --bw-ink-3:rgba(11,12,16,0.58);       /* labels, captions */
  --bw-line:rgba(11,12,16,0.14);        /* hairlines and card borders */
  --bw-line-2:rgba(11,12,16,0.34);      /* the same, awake */
  --bw-grid:rgba(11,12,16,0.05);        /* background grid */
}

/* ================= ABOUT ME ======================================
   Prefixed .abt- because .about and .about-tags already exist here. */
.abt{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  /* section rhythm: 2.5rem top and bottom across the home page */
  padding:2.5rem 6vw;
  background:var(--bw-band);
  border-top:1px solid var(--bw-line);
  border-bottom:1px solid var(--bw-line);
  color:var(--bw-ink);
}
.abt::before{
  content:'';
  position:absolute; inset:0;
  z-index:-2;
  background-image:
    linear-gradient(to right, var(--bw-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bw-grid) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(120% 95% at 62% 40%, #000 26%, transparent 76%);
          mask-image:radial-gradient(120% 95% at 62% 40%, #000 26%, transparent 76%);
}

.abt-inner{
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:clamp(2.5rem, 5vw, 5.5rem);
  align-items:start;
}

/* --- left: the writing ------------------------------------------------ */
.abt-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--bw-ink-3);
  margin-bottom:1.15rem;
}
.abt-eyebrow::before{ content:''; width:26px; height:1px; background:var(--bw-line-2); }
.abt-title{
  font-size:clamp(2rem, 4vw, 3.15rem);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.08;
  margin:0 0 1.6rem;
  color:var(--bw-ink);
}
/* the greeting carries the section now, so it runs a step larger */
.abt-title{ font-size:clamp(2.2rem, 4.4vw, 3.5rem); }
.abt-wave{
  display:inline-block;
  transform-origin:72% 78%;      /* the heel of the hand, so it pivots like one */
  animation:abt-wave 2.8s ease-in-out infinite;
}
@keyframes abt-wave{
  0%, 62%, 100%{ transform:rotate(0deg); }
  8%           { transform:rotate(14deg); }
  18%          { transform:rotate(-8deg); }
  28%          { transform:rotate(14deg); }
  38%          { transform:rotate(-4deg); }
  48%          { transform:rotate(10deg); }
}
.abt-role{
  font-size:clamp(1.02rem, 1.5vw, 1.25rem);
  font-weight:600;
  color:var(--bw-ink-2);
  margin:0 0 1.8rem;
  letter-spacing:-0.005em;
}

/* the status and the button share a row; the button is the only magenta on
   this band, so it reads as the one thing to click */
.abt-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 1.4rem;
  margin-top:2.2rem;
}
.abt-more{ flex:0 0 auto; }

.abt-body p{
  font-size:clamp(0.98rem, 1.15vw, 1.08rem);
  line-height:1.85;
  color:var(--bw-ink-2);
  margin:0 0 1.15rem;
  max-width:56ch;
}
.abt-body p:last-child{ margin-bottom:0; }
/* Quiet supporting text, not a badge. .abt-body p (0,2,1) beats a bare
   .abt-status (0,1,0), so without the same weight this silently runs at the
   paragraph's font size. */
.abt-body p.abt-status{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  max-width:none;
  margin:0;              /* .abt-actions owns the spacing */
  padding:0;
  border:0;
  background:none;
  font-size:0.86rem;
  font-weight:500;
  color:var(--bw-ink-3);
}
.abt-status .dot{
  flex:0 0 auto;
  width:7px; height:7px; border-radius:50%;
  background:var(--sc-magenta, #BC57C8);
  box-shadow:0 0 0 4px rgba(188,87,200,0.16);
  animation:abt-breathe 2.6s ease-in-out infinite;
}
@keyframes abt-breathe{
  0%,100%{ box-shadow:0 0 0 4px rgba(188,87,200,0.16); }
  50%    { box-shadow:0 0 0 7px rgba(188,87,200,0.05); }
}

/* --- right: the panel -------------------------------------------------- */
.abt-panel{
  position:relative;
  overflow:hidden;
  padding:clamp(1.8rem, 2.8vw, 2.6rem);
  border:1px solid var(--bw-line);
  border-radius:22px;
  background:var(--bw-bg);
  box-shadow:0 24px 60px -34px rgba(11,12,16,0.4);
}
.abt-panel::before{   /* a black hairline across the top, not a light sheen */
  content:'';
  position:absolute;
  left:12%; right:12%; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--bw-line-2), transparent);
}
/* The AI-inspired motion: one faint band travelling down the panel on a long
   cycle. A single compositor-only transform, and the ONLY ambient animation
   here - the restraint is what keeps this from looking like a sci-fi
   dashboard. On white it is a shadow passing, not a light. */
.abt-panel::after{
  content:'';
  position:absolute;
  left:0; right:0; top:0; height:34%;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(11,12,16,0.045) 45%, transparent);
  transform:translate3d(0,-120%,0);
  animation:abt-scan 9s cubic-bezier(0.4,0,0.5,1) infinite;
}
@keyframes abt-scan{
  0%      { transform:translate3d(0,-120%,0); }
  55%,100%{ transform:translate3d(0,420%,0); }
}
.abt-panel > *{ position:relative; z-index:1; }

/* Stacked, not side by side: the caption grew from three words to eight,
   and beside a 5rem figure it had nowhere to go but three ragged lines. */
.abt-years{ display:block; }
.abt-fig{
  font-size:clamp(3.4rem, 7vw, 5.4rem);
  font-weight:800;
  letter-spacing:-0.05em;
  line-height:0.9;
  color:var(--bw-ink);
}
.abt-fig .plus{ font-size:0.5em; font-weight:700; color:var(--bw-ink-3); margin-left:0.04em; }
.abt-years .cap{
  font-size:0.92rem;
  line-height:1.4;
  color:var(--bw-ink-2);
  max-width:none;
  margin-top:0.5rem;
  font-size:1rem;
  font-weight:500;
}

.abt-div{ height:1px; background:var(--bw-line); margin:1.9rem 0 1.5rem; }

/* stacked, not wrapped: three disciplines across two ragged rows read as a
   layout accident, one per row reads as a deliberate list */
.abt-disc{ display:grid; gap:0.6rem; }
.abt-disc li{
  list-style:none;
  position:relative;
  padding-left:1rem;
  font-size:0.95rem;
  font-weight:600;
  color:var(--bw-ink);
}
.abt-disc li::before{
  content:'';
  position:absolute; left:0; top:0.55em;
  width:5px; height:5px; border-radius:50%;
  background:var(--bw-ink);
}

.abt-grp + .abt-grp{ margin-top:1.4rem; }
.abt-grp h3{
  font-size:0.66rem;
  font-weight:800;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--bw-ink-3);
  margin:0 0 0.75rem;
}
.abt-chips{ display:flex; flex-wrap:wrap; gap:0.45rem; }
.abt-chip{
  padding:0.4rem 0.8rem;
  border:1px solid var(--bw-line);
  border-radius:999px;
  font-size:0.8rem;
  color:var(--bw-ink-2);
  background:var(--bw-bg);
  /* reveal state; the script adds .is-in in sequence */
  opacity:0;
  transform:translateY(8px);
  transition:opacity 0.45s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1),
             border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.abt-chip.is-in{ opacity:1; transform:none; }
.abt-chip:hover{
  border-color:var(--bw-ink);
  color:var(--bw-ink);
  background:var(--bw-bg);
}
/* Every chip is the same outlined pill: black hairline, white ground. With
   thirteen of them, two competing fills turned the panel into a patchwork -
   the group headings already do the sorting. */

.abt-grp + .abt-grp{ margin-top:1.8rem; }

/* --- scroll reveal ----------------------------------------------------- */
.abt-rise{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.7s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.abt-rise.is-in{ opacity:1; transform:none; }

@media (max-width: 940px){
  .abt-inner{ grid-template-columns:1fr; gap:2.75rem; }
  .abt-body p{ max-width:none; }
}
@media (max-width: 560px){
  .abt{ padding-left:7vw; padding-right:7vw; }
  .abt::before{ background-size:56px 56px; }
  .abt-years .cap{ font-size:0.95rem; }
  .abt-actions{ flex-direction:column; align-items:stretch; }
  .abt-more{ justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  .abt-rise, .abt-chip{ opacity:1; transform:none; transition:border-color 0.2s ease, background 0.2s ease, color 0.2s ease; }
  .abt-panel::after, .abt-status .dot, .abt-wave{ animation:none; }
  .abt-panel::after{ opacity:0; }
}
/* ================= EXPERIENCE IN NUMBERS =========================
   A spotlight dragged across a wall of real work. Three layers, in
   order: the canvas of interfaces, a veil that is punched through
   around the cursor, and a vignette that guarantees the text stays
   readable wherever the spotlight happens to be.

   Only the veil's mask position and the tiles' transform change while
   the cursor moves - the blur is a constant, so it is rasterised once
   rather than re-computed every frame. */
.xp{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  /* section rhythm: 2.5rem top and bottom across the home page */
  padding:2.5rem 6vw;
  background:#07050F;
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
  color:#fff;
}

/* ---- layer 1: the canvas ---------------------------------------- */
.xp-bg{
  position:absolute; inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.xp-canvas{
  position:absolute;
  /* bleeds past every edge so the parallax drift never exposes a corner */
  inset:-5%;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(132px, 1fr));
  /* rows stretch to share whatever height is left, so the wall reaches
     every edge at any viewport without a second copy of the tiles */
  grid-auto-rows:minmax(78px, 1fr);
  grid-auto-flow:dense;
  gap:10px;
}
.xp-tile{
  grid-column:span var(--c, 2);
  grid-row:span var(--r, 2);
  border-radius:10px;
  overflow:hidden;
  background:#12101F;
  border:1px solid rgba(255,255,255,0.07);
  /* --d is the tile's depth: how far it drifts with the cursor */
  transform:translate3d(calc(var(--px, 0) * var(--d, 6) * 1px),
                        calc(var(--py, 0) * var(--d, 6) * 1px), 0);
  will-change:transform;
}
.xp-tile img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  object-position:top center;
}

/* ---- interface fragments, drawn rather than screenshotted -------- */
.xp-frag{
  display:flex;
  padding:12px;
  background:#15122A;
  gap:7px;
}
.xp-swatch{ flex-wrap:wrap; align-content:center; }
.xp-swatch i{
  width:30px; height:30px; border-radius:7px;
  background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1);
}
.xp-btns{ flex-direction:column; justify-content:center; }
.xp-btns b{
  font:700 10px/1 var(--sc-sans, sans-serif);
  padding:9px 12px; border-radius:999px; text-align:center;
  color:#fff;
}
.xp-btns b.p{ background:#724EE4; }
.xp-btns b.s{ background:#A63FB2; }
.xp-btns b.g{ background:transparent; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.34); }
.xp-chart{ align-items:flex-end; gap:6px; }
.xp-chart i{
  flex:1; height:var(--h); min-height:6px;
  border-radius:3px 3px 0 0;
  background:linear-gradient(180deg, #A77BFF, #4A2AA8);
}
.xp-wire{ flex-direction:column; justify-content:center; gap:8px; }
.xp-wire u{
  height:7px; border-radius:4px; text-decoration:none;
  background:rgba(255,255,255,0.22);
}
.xp-wire u.w80{ width:80%; } .xp-wire u.w70{ width:70%; }
.xp-wire u.w62{ width:62%; } .xp-wire u.w55{ width:55%; }
.xp-wire u.w40{ width:40%; }
.xp-wire .box{
  height:34px; border-radius:6px;
  border:1px dashed rgba(255,255,255,0.28);
}
.xp-toggles{ flex-direction:column; justify-content:center; gap:10px; }
.xp-toggles b{
  width:40px; height:22px; border-radius:999px; display:block; position:relative;
}
.xp-toggles b i{
  position:absolute; top:3px; width:16px; height:16px;
  border-radius:50%; background:#fff;
}
.xp-toggles b.on{ background:#724EE4; } .xp-toggles b.on i{ right:3px; }
.xp-toggles b.off{ background:rgba(255,255,255,0.2); } .xp-toggles b.off i{ left:3px; }
.xp-toggles .track{
  display:block; height:5px; border-radius:99px;
  background:rgba(255,255,255,0.2); position:relative;
}
.xp-toggles .track i{
  position:absolute; inset:0 38% 0 0; border-radius:99px; background:#BC57C8;
}

/* ---- layer 2: the veil the spotlight punches through -------------
   Two paint-only layers, masked identically: one darkens, one drains
   the colour. A backdrop-filter would do both in a single element, but
   it re-filters the whole band on every frame the mask moves, and it
   measured ~25% slower per frame than this does. Masked flat paint
   composites on the GPU and costs the same whether it moves or not. */
.xp-veil, .xp-desat{
  position:absolute; inset:0;
  /* alpha 0 at the centre means the layer is simply not painted there,
     so the work underneath is untouched - full colour, full clarity */
  -webkit-mask-image:radial-gradient(circle var(--mr, 0px) at var(--mx, 50%) var(--my, 50%),
      rgba(0,0,0,0) 0%, rgba(0,0,0,0.06) 38%, rgba(0,0,0,0.55) 70%,
      rgba(0,0,0,0.88) 88%, #000 100%);
          mask-image:radial-gradient(circle var(--mr, 0px) at var(--mx, 50%) var(--my, 50%),
      rgba(0,0,0,0) 0%, rgba(0,0,0,0.06) 38%, rgba(0,0,0,0.55) 70%,
      rgba(0,0,0,0.88) 88%, #000 100%);
}
.xp-veil{ background:rgba(7,5,16,0.84); }
/* a grey source under 'saturation' takes the colour out of everything
   behind it without touching how light or dark it is */
.xp-desat{ background:#77758C; mix-blend-mode:saturation; opacity:0.9; }

/* ---- layer 3: the guarantee -------------------------------------- */
/* The spotlight can be anywhere, including directly behind the heading.
   This layer is what keeps white text off a white screenshot: a soft
   pool under the copy and a vignette around the edges. It sits above
   the spotlight, so revealing the work never costs legibility. */
.xp-vig{
  position:absolute; inset:0;
  background:
    radial-gradient(58% 42% at 28% 26%, rgba(7,5,16,0.90) 0%,
                    rgba(7,5,16,0.62) 46%, rgba(7,5,16,0) 76%),
    radial-gradient(70% 46% at 50% 82%, rgba(7,5,16,0.80) 0%,
                    rgba(7,5,16,0.46) 52%, rgba(7,5,16,0) 82%),
    linear-gradient(180deg, rgba(7,5,16,0.55) 0%, rgba(7,5,16,0) 22%,
                    rgba(7,5,16,0) 78%, rgba(7,5,16,0.55) 100%);
}

/* ---- the content ------------------------------------------------- */
.xp-inner{ position:relative; z-index:2; max-width:1240px; margin:0 auto; }
.xp-head{ max-width:660px; }
.xp-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#D9C6FF;
  margin-bottom:1.1rem;
}
.xp-eyebrow::before{
  content:'';
  width:26px; height:1px;
  background:rgba(217,198,255,0.6);
}
.xp-title{
  font-size:clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.08;
  margin:0 0 1rem;
  color:#fff;
  text-wrap:balance;
}
.xp-sub{
  font-size:clamp(1rem, 1.5vw, 1.1rem);
  line-height:1.6;
  margin:0;
  color:rgba(255,255,255,0.82);
  text-wrap:pretty;
}

.xp-grid{
  margin-top:clamp(2.5rem, 5vw, 4rem);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(0.9rem, 1.6vw, 1.4rem);
}
/* Glass, not fill: dark enough that white numerals clear 4.5:1 over the
   brightest screenshot on the wall, sheer enough that you can still see
   the work moving underneath. */
.xp-card{
  position:relative;
  padding:clamp(1.4rem, 2.4vw, 2rem) clamp(1.1rem, 2vw, 1.6rem);
  border-radius:18px;
  background:rgba(9,7,20,0.84);
  border:1px solid rgba(255,255,255,0.16);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
          backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:0 1px 0 rgba(255,255,255,0.07) inset,
             0 22px 46px -28px rgba(0,0,0,0.9);
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.6s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1),
             border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.xp-card.is-in{ opacity:1; transform:none; }
.xp-card:hover{
  border-color:rgba(167,123,255,0.55);
  background:rgba(14,10,30,0.86);
  box-shadow:0 1px 0 rgba(255,255,255,0.1) inset,
             0 0 0 1px rgba(167,123,255,0.18),
             0 26px 54px -26px rgba(114,78,228,0.65);
  transform:translateY(-4px);
}
.xp-sr{
  position:absolute;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.xp-num{
  display:flex;
  align-items:flex-start;
  font-size:clamp(2.6rem, 5vw, 3.9rem);
  font-weight:800;
  letter-spacing:-0.04em;
  line-height:1;
  color:#fff;
  font-variant-numeric:tabular-nums;
}
.xp-num .plus{
  font-size:0.5em;
  line-height:1;
  margin-left:0.08em;
  margin-top:0.18em;
  color:#C9A9F5;
  transition:color 0.3s ease;
}
.xp-card:hover .xp-num .plus{ color:#E4D6FF; }
.xp-rule{
  width:30px; height:2px;
  margin:1.1rem 0 0.9rem;
  border-radius:2px;
  background:linear-gradient(90deg, #A77BFF, rgba(167,123,255,0));
}
.xp-label{
  margin:0;
  font-size:0.9rem;
  line-height:1.45;
  font-weight:500;
  color:rgba(255,255,255,0.88);
  text-wrap:pretty;
}

.xp-hint{
  display:inline-flex;
  align-items:center;
  gap:0.55rem;
  margin:clamp(2rem, 3.5vw, 3rem) 0 0;
  padding:0.5rem 0.95rem 0.5rem 0.75rem;
  border-radius:999px;
  /* opaque enough to carry its own text even with the spotlight sitting
     right on top of it - measured at 7:1 over the brightest tile */
  background:rgba(7,5,16,0.9);
  border:1px solid rgba(255,255,255,0.16);
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.01em;
  color:#fff;
  transition:opacity 0.5s ease;
}
.xp-hint .dot{
  width:7px; height:7px; border-radius:50%;
  background:#A77BFF;
  box-shadow:0 0 0 4px rgba(167,123,255,0.18);
  animation:xp-pulse 2.4s ease-in-out infinite;
}
@keyframes xp-pulse{
  0%, 100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.55; transform:scale(0.82); }
}
/* once someone has found the spotlight, stop telling them about it */
.xp.is-live .xp-hint{ opacity:0; }
.xp-hint .t{ display:none; }
@media (hover:none){
  .xp-hint .m{ display:none; }
  .xp-hint .t{ display:inline; }
}

/* Narrow screens fit far fewer columns, so the same tiles would stack into
   a wall several times taller than the band - most of it built, painted
   and then clipped away. Fewer tiles at an even size instead: the wall
   still reaches every edge, and what is on it is the part you can see. */
@media (max-width: 900px){
  .xp-grid{ grid-template-columns:repeat(2, 1fr); }
  /* an explicit even track count, not auto-fill: with seven tracks and
     every tile two wide, the seventh column can never be filled and the
     band ends in a dead stripe down its right edge */
  .xp-canvas{ grid-auto-rows:minmax(64px, 1fr); grid-template-columns:repeat(6, 1fr); }
  .xp-tile{ --c:2 !important; --r:2 !important; }
  .xp-tile:nth-child(n+21){ display:none; }
}
@media (max-width: 560px){
  .xp{ padding:clamp(4rem, 12vw, 5.5rem) 7vw; }
  .xp-canvas{ grid-auto-rows:minmax(52px, 1fr); grid-template-columns:repeat(4, 1fr); gap:7px; }
  .xp-tile:nth-child(n+15){ display:none; }
}

@media (prefers-reduced-motion: reduce){
  /* a static revealed background: no drift, no chase, no pulse - the work
     is simply visible, at a level that still carries white text */
  .xp-card{ opacity:1; transform:none; transition:none; }
  .xp-card:hover{ transform:none; }
  .xp-tile{ transform:none; will-change:auto; }
  .xp-hint{ display:none; }
  .xp-hint .dot{ animation:none; }
  .xp-veil, .xp-desat{ -webkit-mask-image:none; mask-image:none; }
  .xp-veil{ background:rgba(7,5,16,0.76); }
  .xp-desat{ opacity:0.55; }
}


/* ================= EXPERIENCE PAGE ===============================
   A routed page like the case studies (it carries .case-study so the
   existing router shows and hides it). White ground, black ink, black
   rules - the same black-and-white system as the About and Numbers
   bands on the main page. */
.exp{
  position:relative;
  isolation:isolate;
  background:var(--bw-bg);
  color:var(--bw-ink);
  overflow:hidden;
}
.exp::before{
  content:'';
  position:absolute; inset:0;
  z-index:-2;
  background-image:
    linear-gradient(to right, var(--bw-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bw-grid) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.35) 42%, transparent 85%);
          mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.35) 42%, transparent 85%);
}

/* --- header ----------------------------------------------------------- */
/* The measure is 1240px of CONTENT. Putting max-width and padding on the same
   border-box element made the padding eat into the measure instead of sitting
   outside it, which pushed everything 86px further in than the bands on the
   main page. */
.exp-head{
  max-width:calc(1240px + 12vw);
  margin:0 auto;
  padding:clamp(4.5rem, 8vw, 7.5rem) 6vw clamp(2.5rem, 4vw, 3.5rem);
}
.exp-back{
  /* inline-flex let the eyebrow flow up alongside it on the same line */
  display:flex;
  width:fit-content;
  align-items:center;
  gap:0.45rem;
  margin-bottom:2.4rem;
  padding:0.55rem 1.05rem;
  border:1px solid var(--bw-ink);
  border-radius:999px;
  background:var(--bw-ink);
  font-size:0.85rem;
  font-weight:700;
  text-decoration:none;
  color:#fff;
  transition:background 0.25s ease, transform 0.25s ease;
}
.exp-back:hover{ background:#000; transform:translateX(-3px); }
.exp-back svg{ width:14px; height:14px; }
.exp-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--bw-ink-3);
  margin-bottom:1.1rem;
}
.exp-eyebrow::before{ content:''; width:26px; height:1px; background:var(--bw-line-2); }
.exp-h1{
  font-size:clamp(2.6rem, 7vw, 5.4rem);
  font-weight:800;
  letter-spacing:-0.04em;
  line-height:0.98;
  margin:0 0 1.2rem;
  color:var(--bw-ink);
}
.exp-lede{
  font-size:clamp(1rem, 1.3vw, 1.15rem);
  line-height:1.75;
  color:var(--bw-ink-2);
  margin:0;
  max-width:56ch;
}
.exp-meta{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem 2.6rem;
  margin-top:2.4rem;
  padding-top:2rem;
  border-top:1px solid var(--bw-line);
}
.exp-meta div{ display:flex; align-items:baseline; gap:0.6rem; }
.exp-meta b{
  font-size:clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight:800;
  letter-spacing:-0.035em;
  line-height:1;
  color:var(--bw-ink);
}
.exp-meta span{ font-size:0.88rem; color:var(--bw-ink-3); }

/* --- timeline ---------------------------------------------------------- */
.exp-list{
  position:relative;
  max-width:calc(1240px + 12vw);
  margin:0 auto;
  padding:0 6vw clamp(5rem, 9vw, 8rem);
}
/* The rail sits under the row of nodes. The black part is a second layer
   scaled from the top by the scroll position, so the line appears to draw
   itself as you read down - one transform, updated in a rAF. */
.exp-rail{
  position:absolute;
  /* 6vw is the content edge, which is also where the item nodes are
     centred - anything else and the dots sit beside the line, not on it */
  left:6vw;
  top:0.6rem; bottom:clamp(5rem, 9vw, 8rem);
  width:1px;
  background:var(--bw-line);
}
.exp-rail i{
  position:absolute;
  inset:0;
  display:block;
  background:linear-gradient(to bottom, var(--bw-ink), rgba(11,12,16,0.35));
  transform:scaleY(var(--p, 0));
  transform-origin:top;
  will-change:transform;
}

.exp-item{
  position:relative;
  display:grid;
  grid-template-columns:200px 1fr;
  gap:clamp(1.5rem, 4vw, 4rem);
  padding:clamp(2.2rem, 4vw, 3.4rem) 0;
  border-bottom:1px solid var(--bw-line);
  /* reveal */
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.7s ease, transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
.exp-item.is-in{ opacity:1; transform:none; }
.exp-item:last-child{ border-bottom:0; }
/* the node on the rail */
.exp-item::before{
  content:'';
  position:absolute;
  left:-7px; top:calc(clamp(2.2rem, 4vw, 3.4rem) + 0.55em);
  width:14px; height:14px;
  border-radius:50%;
  background:var(--bw-bg);
  border:1px solid var(--bw-line-2);
  transition:box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease;
}
.exp-item:hover::before{
  background:var(--bw-ink);
  border-color:var(--bw-ink);
  box-shadow:0 0 0 5px rgba(11,12,16,0.1);
}

.exp-when{ padding-left:2.4rem; }
.exp-year{
  font-size:clamp(2.6rem, 5vw, 4rem);
  font-weight:800;
  letter-spacing:-0.045em;
  line-height:0.92;
  color:var(--bw-ink);
  font-variant-numeric:tabular-nums;
  transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
/* a word, not a figure: same weight and colour, stepped down so it sits
   in the same optical space as the four-digit years below it */
.exp-year.is-word{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); letter-spacing:-0.035em; }
.exp-item:hover .exp-year{ transform:translateX(4px); }
.exp-span{
  margin-top:0.6rem;
  font-size:0.86rem;
  line-height:1.5;
  color:var(--bw-ink-3);
}
.exp-now{
  display:inline-flex; align-items:center; gap:0.4rem;
  margin-top:0.75rem;
  padding:0.26rem 0.65rem;
  border:1px solid var(--bw-ink);
  border-radius:999px;
  background:var(--bw-ink);
  color:#fff;
  font-size:0.66rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
}
.exp-now::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:#fff;
  animation:abt-breathe 2.6s ease-in-out infinite;   /* shared with About */
}

.exp-co{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:0.5rem 0.9rem;
  margin:0 0 0.3rem;
  font-size:clamp(1.25rem, 2.1vw, 1.7rem);
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--bw-ink);
}
.exp-co a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid var(--bw-line-2);
  transition:border-color 0.25s ease;
}
.exp-co a:hover{ border-color:var(--bw-ink); }
.exp-co .loc{
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--bw-ink-3);
}
.exp-role{
  font-size:1rem;
  font-weight:600;
  color:var(--bw-ink);
  margin:0 0 1.6rem;
}

.exp-sub{
  font-size:0.66rem;
  font-weight:800;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--bw-ink-3);
  margin:0 0 0.85rem;
}
.exp-duties{ margin:0 0 1.9rem; padding:0; }
.exp-duties li{
  list-style:none;
  position:relative;
  padding-left:1.5rem;
  margin-bottom:0.7rem;
  font-size:0.97rem;
  line-height:1.72;
  color:var(--bw-ink-2);
  max-width:70ch;
}
.exp-duties li:last-child{ margin-bottom:0; }
.exp-duties li::before{
  content:'';
  position:absolute; left:0; top:0.8em;
  width:9px; height:1px;
  background:var(--bw-line-2);
}

.exp-projects{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.exp-projects span{
  padding:0.42rem 0.85rem;
  border:1px solid var(--bw-line);
  border-radius:999px;
  background:var(--bw-bg);
  font-size:0.83rem;
  color:var(--bw-ink-2);
  transition:border-color 0.28s ease, background 0.28s ease, color 0.28s ease;
}
.exp-projects span:hover{
  border-color:var(--bw-ink);
  background:var(--bw-ink);
  color:#fff;
}

/* --- closing ----------------------------------------------------------- */
.exp-foot{
  max-width:calc(1240px + 12vw);
  margin:0 auto;
  padding:0 6vw clamp(5rem, 9vw, 8rem);
}
.exp-foot a{
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:0.95rem 1.6rem;
  border:1px solid var(--bw-ink);
  border-radius:999px;
  background:var(--bw-ink);
  font-size:0.95rem; font-weight:700;
  text-decoration:none; color:#fff;
  transition:background 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
}
.exp-foot a:hover{
  background:#000;
  transform:translateY(-2px);
  box-shadow:0 16px 30px -14px rgba(11,12,16,0.55);
}

@media (max-width: 880px){
  .exp-item{ grid-template-columns:1fr; gap:1.1rem; }
  .exp-when{ padding-left:2.4rem; }
  .exp-year{ font-size:clamp(2.2rem, 9vw, 3rem); }
  .exp-what{ padding-left:2.4rem; }
}
@media (max-width: 560px){
  .exp-head, .exp-list, .exp-foot{ padding-left:7vw; padding-right:7vw; }
  .exp-rail{ left:7vw; }
  .exp-when, .exp-what{ padding-left:1.9rem; }
  .exp-meta{ gap:1.1rem 2rem; }
}

@media (prefers-reduced-motion: reduce){
  .exp-item{ opacity:1; transform:none; transition:none; }
  .exp-item:hover .exp-year{ transform:none; }
  .exp-rail i{ transform:scaleY(1); }
  .exp-now::before{ animation:none; }
}


/* ================= ABOUT ME PAGE ==================================
   A routed page (it carries .case-study, so the site's existing router
   shows and hides it). Deliberately not the homepage band rearranged:
   the portrait leads, the copy runs editorial-width beside it, and the
   sections below get progressively more personal. */
.me{
  position:relative;
  background:var(--sc-ground);
  color:var(--sc-ink);
  overflow:hidden;
}
.me-wrap{
  max-width:calc(1240px + 12vw);
  margin:0 auto;
  padding:0 6vw;
}

/* --- hero -------------------------------------------------------------- */
.me-hero{
  display:grid;
  grid-template-columns:1.02fr 0.98fr;
  gap:clamp(2rem, 5vw, 5rem);
  align-items:center;
  padding:clamp(4rem, 7vw, 7rem) 0 clamp(3rem, 5vw, 5rem);
}
.me-back{
  display:flex;
  width:fit-content;
  align-items:center;
  gap:0.45rem;
  margin-bottom:2.4rem;
  padding:0.55rem 1.1rem;
  border-radius:var(--sc-r-chip);
  background:var(--sc-surface);
  border:1px solid var(--sc-line);
  color:var(--sc-ink);
  font-size:0.85rem; font-weight:600;
  text-decoration:none;
  box-shadow:var(--sc-shadow);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.me-back:hover{ transform:translateX(-3px); box-shadow:var(--sc-shadow-lift); }
.me-back svg{ width:14px; height:14px; }

.me-eyebrow{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-size:0.72rem; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--sc-orchid);
  margin-bottom:1.1rem;
}
.me-eyebrow::before{ content:''; width:26px; height:1px; background:currentColor; opacity:0.45; }
.me-h1{
  font-size:clamp(2.3rem, 5vw, 3.9rem);
  font-weight:800;
  letter-spacing:-0.035em;
  line-height:1.04;
  margin:0 0 0.7rem;
}
.me-wave{
  display:inline-block;
  transform-origin:72% 78%;
  animation:abt-wave 2.8s ease-in-out infinite;   /* shared with the homepage */
}
.me-sub{
  font-size:clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight:600;
  color:var(--sc-body);
  margin:0 0 1.9rem;
  letter-spacing:-0.005em;
}
.me-lede p{
  font-size:clamp(1rem, 1.2vw, 1.1rem);
  line-height:1.75;
  color:var(--sc-body);
  margin:0 0 1.1rem;
  max-width:52ch;
}
.me-lede p:last-child{ margin-bottom:0; }

.me-tags{
  display:flex; flex-wrap:wrap; gap:0.5rem;
  margin-top:2.2rem;
}
.me-tags span{
  padding:0.52rem 1rem;
  border-radius:var(--sc-r-chip);
  background:var(--sc-surface);
  border:1px solid var(--sc-line);
  box-shadow:var(--sc-shadow);
  font-size:0.83rem; font-weight:600;
  color:var(--sc-ink);
  transition:transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.me-tags span:hover{
  transform:translateY(-2px);
  border-color:var(--sc-purple-bright);
  box-shadow:0 10px 24px -14px rgba(114,78,228,0.6);
}

/* the portrait floats - it was cut out of its white backdrop so it sits on
   the page ground rather than inside a box */
.me-figure{ position:relative; }
.me-figure img{
  display:block;
  width:100%; height:auto;
  filter:drop-shadow(0 40px 60px rgba(13,9,30,0.12));
}
/* the years badge overlaps the portrait's lower-left, which is where the
   composition has the most empty space */
.me-years{
  position:absolute;
  left:-2%; bottom:6%;
  display:flex; align-items:center; gap:0.9rem;
  padding:1.1rem 1.5rem;
  border-radius:20px;
  background:var(--sc-surface);
  border:1px solid var(--sc-line);
  box-shadow:var(--sc-shadow-lift);
}
.me-years b{
  font-size:clamp(2.2rem, 3.6vw, 3rem);
  font-weight:800;
  letter-spacing:-0.05em;
  line-height:0.9;
}
.me-years span{
  font-size:0.86rem; font-weight:600; line-height:1.35;
  color:var(--sc-body);
  max-width:8.5em;
}

/* --- off-duty ----------------------------------------------------------- */
.me-off{
  padding:clamp(3.5rem, 6vw, 6rem) 0;
  border-top:1px solid var(--sc-line);
}
.me-h2{
  font-size:clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.1;
  margin:0 0 1.4rem;
}
.me-off-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:start;
}
.me-off p{
  font-size:clamp(1rem, 1.2vw, 1.08rem);
  line-height:1.78;
  color:var(--sc-body);
  margin:0 0 1.1rem;
  max-width:54ch;
}
.me-mantra{
  font-size:clamp(1.1rem, 1.6vw, 1.3rem) !important;
  font-weight:700;
  color:var(--sc-ink) !important;
  line-height:1.5 !important;
}
/* the 32 kg line is the most surprising thing on the page, so it gets to
   behave like a pull-quote rather than a fourth paragraph */
.me-pull{
  margin:1.8rem 0 0;
  padding:1.4rem 1.6rem;
  border-radius:20px;
  border:1px solid var(--sc-line);
  border-left:3px solid var(--sc-purple-bright);
  background:var(--sc-surface);
  box-shadow:var(--sc-shadow);
}
.me-pull b{ color:var(--sc-purple-deep); }

.me-cards{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1rem;
}
.me-card{
  padding:1.5rem 1.4rem;
  border-radius:var(--sc-r-card);
  background:var(--sc-surface);
  border:1px solid var(--sc-line);
  box-shadow:var(--sc-shadow);
  transition:transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.me-card:hover{
  transform:translateY(-5px);
  border-color:rgba(114,78,228,0.4);
  box-shadow:var(--sc-shadow-lift);
}
.me-card .ic{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:14px;
  background:var(--sc-soft);
  color:var(--sc-purple-deep);
  margin-bottom:1rem;
}
.me-card .ic svg{ width:22px; height:22px; }
.me-card h3{ font-size:1.02rem; font-weight:700; margin:0 0 0.3rem; }
.me-card p{ font-size:0.88rem; line-height:1.55; color:var(--sc-body); margin:0; max-width:none; }

/* --- gallery ------------------------------------------------------------
   One row on desktop, swipeable on touch, scrollbar hidden but the rail is
   still a real scroll container so keyboard and trackpad keep working. */
.me-gal{ padding:0 0 clamp(3.5rem, 6vw, 6rem); }
.me-gal-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  margin-bottom:1.4rem;
}
.me-gal-label{
  font-size:0.72rem; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--sc-orchid);
}
.me-rail{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  padding-bottom:0.5rem;
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor:grab;
  -webkit-overflow-scrolling:touch;
}
.me-rail::-webkit-scrollbar{ display:none; }
.me-rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.me-shot{
  --me-h:clamp(240px, 34vw, 380px);
  flex:0 0 auto;
  position:relative;
  height:var(--me-h);
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--sc-line);
  background:var(--sc-surface);
  padding:0;
  scroll-snap-align:start;
  cursor:zoom-in;
  box-shadow:var(--sc-shadow);
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
}
/* The photo sets the tile's width: consistent heights, varied widths, and
   nothing cropped. object-fit:cover in a fixed box would have sliced the
   top off three portrait shots. The width comes from the shot's own aspect
   ratio (--ar, written into the markup) rather than from the decoded image,
   so a lazy photo cannot collapse its tile to a sliver and then jump. */
.me-shot:not(.is-placeholder){ width:calc(var(--me-h) * var(--ar, 0.75)); }
.me-shot img{
  display:block;
  height:100%; width:100%;
  object-fit:cover;
  transition:transform 0.55s cubic-bezier(0.16,1,0.3,1);
}
/* Four photos fit a desktop row, so there they stop being a rail and fill
   the content width exactly: each tile grows in proportion to its own
   aspect ratio from a zero basis, which keeps every height equal and crops
   nothing. The photo is lifted out of flow so it cannot stretch its tile -
   aspect-ratio on a flex item gives way to its content otherwise. Below
   900px the row is a draggable rail again. */
@media (min-width:900px){
  .me-rail{ overflow:visible; cursor:default; }
  .me-shot:not(.is-placeholder){
    flex:var(--ar) 1 0; width:auto; min-width:0;
    height:auto; aspect-ratio:var(--ar);
    align-self:flex-start;
  }
  .me-shot:not(.is-placeholder) img{ position:absolute; inset:0; }
}
/* The title sits on the photo under a bottom-up scrim, so it stays legible
   whatever the shot does down there - the gym photo is dark, the beach one
   is nearly white sand. */
.me-cap{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:2.6rem 1.1rem 1rem;
  background:linear-gradient(to top, rgba(13,9,30,0.88) 0%, rgba(13,9,30,0.55) 45%, transparent 100%);
  color:#fff;
  font-size:0.95rem;
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.3;
  text-align:left;
  pointer-events:none;
  transform:translateY(0);
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.me-shot:hover .me-cap,
.me-shot:focus-visible .me-cap{ transform:translateY(-3px); }

.me-shot:hover{ box-shadow:var(--sc-shadow-lift); }
.me-shot:hover img{ transform:scale(1.06); }
.me-shot:focus-visible{ outline:2px solid var(--sc-purple-bright); outline-offset:4px; }
/* placeholders have no artwork to take a width from, so they get one that
   sits in the same range as the real portraits */
.me-shot.is-placeholder{ width:clamp(190px, 24vw, 270px); }

/* Placeholder tiles, standing in until the real photos arrive. They are
   styled to look deliberate rather than broken, and carry the same markup
   as a real shot so swapping one in is a one-line change. */
.me-shot.is-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0.7rem;
  cursor:default;
  background:
    radial-gradient(80% 70% at 30% 15%, rgba(114,78,228,0.16), transparent 70%),
    linear-gradient(160deg, #EFEBFA, #F8F7FA);
  color:var(--sc-purple-deep);
}
.me-shot.is-placeholder:hover{ box-shadow:var(--sc-shadow); }
.me-shot.is-placeholder svg{ width:30px; height:30px; opacity:0.7; }
.me-shot.is-placeholder span{ font-size:0.95rem; font-weight:700; text-align:center; padding:0 0.8rem; }
.me-shot.is-placeholder small{ font-size:0.72rem; color:var(--sc-muted); }

/* --- connect ------------------------------------------------------------ */
.me-connect{
  padding:clamp(3.5rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 8rem);
  border-top:1px solid var(--sc-line);
  text-align:center;
}
.me-connect p{
  font-size:clamp(1rem, 1.2vw, 1.1rem);
  line-height:1.7;
  color:var(--sc-body);
  margin:0 auto;
  max-width:46ch;
}
.me-socials{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:1rem;
  margin-top:2.4rem;
}
.me-social{
  display:flex; align-items:center; gap:0.9rem;
  min-width:250px;
  padding:1.1rem 1.5rem;
  border-radius:var(--sc-r-card);
  background:var(--sc-surface);
  border:1px solid var(--sc-line);
  box-shadow:var(--sc-shadow);
  text-decoration:none;
  color:var(--sc-ink);
  text-align:left;
  transition:transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.me-social:hover{
  transform:translateY(-4px);
  border-color:rgba(114,78,228,0.4);
  box-shadow:var(--sc-shadow-lift);
}
.me-social .ic{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; flex:0 0 auto;
  border-radius:14px;
  background:var(--sc-soft);
  color:var(--sc-purple-deep);
}
.me-social .ic svg{ width:22px; height:22px; }
.me-social .t{ font-weight:700; font-size:1rem; }
.me-social .d{ font-size:0.82rem; color:var(--sc-muted); }
.me-social .go{
  margin-left:auto;
  color:var(--sc-muted);
  transition:transform 0.3s ease, color 0.3s ease;
}
.me-social:hover .go{ transform:translate(3px,-3px); color:var(--sc-purple-bright); }
.me-social .go svg{ width:16px; height:16px; display:block; }

/* --- scroll reveal ------------------------------------------------------ */
.me-rise{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 0.7s ease, transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
.me-rise.is-in{ opacity:1; transform:none; }

@media (max-width: 960px){
  .me-hero{ grid-template-columns:1fr; gap:2.5rem; }
  .me-off-grid{ grid-template-columns:1fr; gap:2.2rem; }
  .me-figure{ max-width:540px; margin:0 auto; }
  .me-years{ left:0; bottom:2%; }
}
@media (max-width: 560px){
  .me-wrap{ padding:0 7vw; }
  .me-cards{ grid-template-columns:1fr; }
  .me-years{ padding:0.9rem 1.1rem; gap:0.7rem; }
  .me-social{ min-width:0; width:100%; }
}

@media (prefers-reduced-motion: reduce){
  .me-rise{ opacity:1; transform:none; transition:none; }
  .me-cap{ transition:none; }
  .me-shot:hover .me-cap{ transform:none; }
  .me-wave{ animation:none; }
  .me-shot, .me-shot img, .me-card, .me-social, .me-tags span{ transition:none; }
  .me-shot:hover img{ transform:none; }
  .me-card:hover, .me-social:hover, .me-tags span:hover{ transform:none; }
}

/* ================= MTL CASE STUDY =================================
   An editorial layer that sits on top of the site theme rather than
   fighting it: same ground, same ink, same purple. What is new here is
   a longer measure, a harder type scale, a section rail and four role
   colours that mean the same thing everywhere they appear.

   Role colours are paired: the -ink value is the one used for TEXT and
   is the darker of the two, because the bright value is a fill and does
   not clear 4.5:1 on white. Nothing here uses the bright value for
   small type. */
.mtl{
  --mtl-max:1080px;
  --mtl-ground:#F8F7FA;
  --mtl-tint:#F1EFF6;
  --mtl-surface:#FFFFFF;
  --mtl-ink:#0D091E;
  --mtl-body:rgba(13,9,30,0.76);
  --mtl-muted:rgba(13,9,30,0.60);
  --mtl-line:rgba(13,9,30,0.10);
  --mtl-line-2:rgba(13,9,30,0.26);

  --r-stu:#E2711D;  --r-stu-ink:#9A4A06;  --r-stu-soft:rgba(226,113,29,0.10);
  /* deliberately not the old scheme's blue: the build guard scans for
     that value as a leftover, and it is right to */
  --r-tea:#2E6FD9;  --r-tea-ink:#1B54B3;  --r-tea-soft:rgba(46,111,217,0.10);
  --r-adm:#0E8A5F;  --r-adm-ink:#046A47;  --r-adm-soft:rgba(14,138,95,0.10);
  --r-own:#6D4AC8;  --r-own-ink:#5731A8;  --r-own-soft:rgba(109,74,200,0.10);
  --r-sys:#4A4458;  --r-sys-ink:#3A3545;  --r-sys-soft:rgba(74,68,88,0.08);
  --r-risk:#C8434F; --r-risk-ink:#A32633; --r-risk-soft:rgba(200,67,79,0.10);

  color:var(--mtl-ink);
  background:var(--mtl-ground);
}
.mtl .r-stu{ --rc:var(--r-stu); --ri:var(--r-stu-ink); --rs:var(--r-stu-soft); }
.mtl .r-tea{ --rc:var(--r-tea); --ri:var(--r-tea-ink); --rs:var(--r-tea-soft); }
.mtl .r-adm{ --rc:var(--r-adm); --ri:var(--r-adm-ink); --rs:var(--r-adm-soft); }
.mtl .r-own{ --rc:var(--r-own); --ri:var(--r-own-ink); --rs:var(--r-own-soft); }
.mtl .r-sys{ --rc:var(--r-sys); --ri:var(--r-sys-ink); --rs:var(--r-sys-soft); }
.mtl .r-risk{ --rc:var(--r-risk); --ri:var(--r-risk-ink); --rs:var(--r-risk-soft); }

/* ---- reading progress -------------------------------------------- */
.mtl-progress{
  position:fixed; left:0; right:0; top:69px;
  height:3px; z-index:40;
  background:rgba(13,9,30,0.07);
}
.mtl-progress i{
  display:block; height:100%; width:0;
  transform-origin:left center;
  background:linear-gradient(90deg, var(--r-stu), var(--r-tea) 40%, var(--r-own));
}

/* ---- the section rail -------------------------------------------- */
.mtl-rail{ display:none; }
@media (min-width:1180px){
  .mtl-rail{
    display:block;
    position:fixed; left:18px; top:50%;
    transform:translateY(-50%);
    z-index:35;
    padding:0.9rem 0.8rem;
    border-radius:18px;
    max-height:78vh; overflow:auto;
    scrollbar-width:none;
  }
  .mtl-rail::-webkit-scrollbar{ display:none; }
  .mtl-rail ol{ list-style:none; margin:0; padding:0; }
  .mtl-rail a{
    display:flex; align-items:center; gap:0.7rem;
    padding:0.28rem 0.1rem;
    text-decoration:none;
    color:var(--mtl-muted);
    font-size:0.76rem; font-weight:600; line-height:1.2;
  }
  .mtl-rail .i{
    flex:0 0 auto; width:22px; height:2px; border-radius:2px;
    background:var(--mtl-line-2); opacity:0.5;
    font-size:0; color:transparent;
    transition:width 0.3s ease, background 0.3s ease, opacity 0.3s ease;
  }
  .mtl-rail .t{
    max-width:0; overflow:hidden; white-space:nowrap;
    opacity:0;
    transition:max-width 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease;
  }
  .mtl-rail a:hover .i, .mtl-rail a:focus-visible .i{ opacity:1; }
  .mtl-rail a:hover, .mtl-rail a:focus-visible{ color:var(--mtl-ink); }
  .mtl-rail li.is-here .i{ width:30px; background:var(--r-own); opacity:1; }
  .mtl-rail li.is-here a{ color:var(--mtl-ink); }
  /* labels appear when the reader asks for them, or for the current
     section once there is room for them not to sit over the text */
  .mtl-rail{ transition:background 0.3s ease, box-shadow 0.3s ease; }
  .mtl-rail:not(.is-scrolling) .t,
  .mtl-rail:hover .t, .mtl-rail:focus-within .t{ max-width:170px; opacity:1; }
  .mtl-rail:not(.is-scrolling),
  .mtl-rail:hover, .mtl-rail:focus-within{
    background:rgba(255,255,255,0.94);
    box-shadow:0 1px 2px rgba(13,9,30,0.05), 0 20px 50px -28px rgba(13,9,30,0.4);
  }
}
@media (min-width:1560px){
  .mtl-rail li.is-here .t{ max-width:170px; opacity:1; }
}

/* ---- rhythm ------------------------------------------------------- */
.mtl-inner{ max-width:var(--mtl-max); margin:0 auto; padding:0 6vw; }
.mtl-inner.mtl-wide{ max-width:1320px; }
.mtl-sec{ padding:4.5rem 0; }
.mtl-sec.tint{ background:var(--mtl-tint); }
.mtl-sec + .mtl-sec{ border-top:1px solid var(--mtl-line); }

.mtl-sechead{ display:flex; align-items:center; gap:0.9rem; margin-bottom:1rem; }
.mtl-num{
  font-size:0.72rem; font-weight:800; letter-spacing:0.04em;
  color:#fff; background:var(--mtl-ink);
  padding:0.28rem 0.5rem; border-radius:6px;
  font-variant-numeric:tabular-nums;
}
.mtl-eyebrow{
  font-size:0.72rem; font-weight:800; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--sc-orchid, #A03BB8);
}

.mtl-h1{
  font-size:clamp(2.2rem, 5.2vw, 4.1rem);
  font-weight:800; letter-spacing:-0.035em; line-height:1.02;
  margin:0.9rem 0 1.4rem; text-wrap:balance;
}
.mtl-h2{
  font-size:clamp(1.65rem, 3.4vw, 2.7rem);
  font-weight:800; letter-spacing:-0.03em; line-height:1.1;
  margin:0 0 1.6rem; text-wrap:balance;
}
.mtl-h3{ font-size:clamp(1.15rem, 1.9vw, 1.5rem); font-weight:800; letter-spacing:-0.02em;
         line-height:1.25; margin:2.4rem 0 0.9rem; }
.mtl-h4{ font-size:1.02rem; font-weight:700; letter-spacing:-0.01em; margin:0 0 0.5rem; }
.mtl-h5{ font-size:0.74rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
         color:var(--mtl-muted); margin:0 0 0.6rem; }

.mtl p{ color:var(--mtl-body); line-height:1.68; margin:0 0 1.1rem; max-width:68ch;
        text-wrap:pretty; }
.mtl-lede{ font-size:clamp(1.05rem, 1.7vw, 1.22rem); color:var(--mtl-ink) !important;
           line-height:1.6; max-width:62ch; }
.mtl-small{ font-size:0.86rem; color:var(--mtl-muted); }
.mtl-kicker{ font-size:0.74rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
             color:var(--mtl-muted); margin:0 0 0.9rem; }

/* ---- hero --------------------------------------------------------- */
/* the topbar is fixed and ~69px tall; without this the back link opens
   the page already underneath it */
.mtl-hero{ padding:calc(69px + clamp(1.5rem, 3vw, 2.5rem)) 0 clamp(2.5rem, 5vw, 4rem); }
.mtl-back{ margin:0 6vw 2rem; }
.mtl-summary{ font-size:clamp(1.05rem, 1.8vw, 1.3rem); line-height:1.6; max-width:60ch;
              color:var(--mtl-body); }
.mtl-meta{
  display:grid; gap:0.9rem; margin-top:2.4rem;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
}
.mtl-meta-card{
  background:var(--mtl-surface); border:1px solid var(--mtl-line);
  border-radius:16px; padding:1.1rem 1.2rem;
  display:flex; flex-direction:column; gap:0.4rem;
}
.mtl-meta-card .k{ font-size:0.7rem; font-weight:800; letter-spacing:0.14em;
                   text-transform:uppercase; color:var(--mtl-muted); }
.mtl-meta-card .v{ font-size:0.94rem; font-weight:600; line-height:1.45; color:var(--mtl-ink); }

/* ---- placeholders -------------------------------------------------
   Deliberately obvious. A placeholder that looks like a finished panel
   is worse than no placeholder, because it reads as an empty design. */
.mtl-fig{ margin:1.6rem 0 0; }
.mtl-ph{
  aspect-ratio:var(--ar, 16 / 9);
  /* an empty frame taller than this stops reading as "artwork goes here"
     and starts reading as a hole in the page */
  max-height:440px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0.7rem; padding:1.4rem;
  border:1.5px dashed var(--mtl-line-2);
  border-radius:16px;
  background:
    repeating-linear-gradient(135deg, rgba(13,9,30,0.022) 0 10px, transparent 10px 20px),
    var(--mtl-surface);
  color:var(--mtl-muted);
  text-align:center;
}
.mtl-ph .ic{ opacity:0.55; }
.mtl-ph .lb{ font-size:0.86rem; font-weight:700; color:var(--mtl-body); max-width:46ch;
             line-height:1.4; }
.mtl-fig figcaption{ margin-top:0.7rem; font-size:0.85rem; color:var(--mtl-muted);
                     line-height:1.55; max-width:62ch; }
.mtl-fig figcaption:empty{ display:none; }

/* ---- lists -------------------------------------------------------- */
.mtl-list{ list-style:none; margin:0 0 1.2rem; padding:0; }
.mtl-list li{
  position:relative; padding-left:1.35rem; margin-bottom:0.5rem;
  color:var(--mtl-body); line-height:1.6;
}
.mtl-list li::before{
  content:''; position:absolute; left:0; top:0.62em;
  width:6px; height:6px; border-radius:50%;
  background:var(--mtl-line-2);
}
.mtl-cols{ columns:2; column-gap:2.4rem; }
.mtl-cols li{ break-inside:avoid; }
.mtl-check li::before{
  content:''; left:0; top:0.5em;
  width:9px; height:5px; border-radius:0;
  border-left:2px solid var(--r-adm); border-bottom:2px solid var(--r-adm);
  background:none; transform:rotate(-45deg);
}
.mtl-mini{ list-style:none; margin:0; padding:0; }
.mtl-mini li{
  position:relative; padding-left:1rem; margin-bottom:0.4rem;
  font-size:0.9rem; line-height:1.5; color:var(--mtl-body);
}
.mtl-mini li::before{
  content:''; position:absolute; left:0; top:0.6em;
  width:5px; height:5px; border-radius:50%; background:var(--rc, var(--mtl-line-2));
}

/* ---- callouts ----------------------------------------------------- */
.mtl-note{
  margin:1.8rem 0; padding:1.2rem 1.4rem;
  border-left:3px solid var(--sc-orchid, #A03BB8);
  background:var(--mtl-surface);
  border-radius:0 14px 14px 0;
  font-size:1rem; line-height:1.6; color:var(--mtl-ink);
  max-width:68ch;
}
.mtl-note.caution{ border-left-color:var(--r-risk); }
.mtl-hmw{
  margin:2.4rem 0;
  padding:clamp(1.6rem, 3vw, 2.4rem);
  border-radius:24px;
  background:linear-gradient(135deg, #301884, #724EE4);
  color:#fff;
}
.mtl-hmw .lbl{
  display:block; font-size:0.7rem; font-weight:800; letter-spacing:0.16em;
  text-transform:uppercase; color:rgba(255,255,255,0.78); margin-bottom:0.8rem;
}
.mtl-hmw p{
  margin:0; color:#fff !important;
  font-size:clamp(1.15rem, 2.4vw, 1.75rem);
  font-weight:700; letter-spacing:-0.02em; line-height:1.35; max-width:none;
}
.mtl-decision{
  margin:2.4rem 0 0; padding:clamp(1.4rem, 2.6vw, 2rem);
  border-radius:20px; background:var(--mtl-surface);
  border:1px solid var(--mtl-line); border-top:3px solid var(--r-stu);
}
.mtl-decision .lbl{
  font-size:0.7rem; font-weight:800; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--r-stu-ink);
}
.mtl-decision .mtl-h3{ margin-top:0.5rem; }
.mtl-notice{ font-size:0.88rem !important; color:var(--mtl-muted) !important; margin-top:0.9rem; }

/* ---- split + role cards ------------------------------------------- */
.mtl-split{ display:grid; gap:2.2rem; grid-template-columns:1fr 1fr; margin-top:1.6rem; }
.mtl-split .mtl-h3{ margin-top:0; }
.mtl-roles{
  display:grid; gap:1rem; margin:2rem 0 2.6rem; align-items:start;
  grid-template-columns:repeat(4, 1fr);
}
.mtl-role-card{
  background:var(--mtl-surface); border:1px solid var(--mtl-line);
  border-top:3px solid var(--rc); border-radius:18px;
  padding:1.3rem 1.2rem;
}
.mtl-role-card .n{
  font-size:0.72rem; font-weight:800; letter-spacing:0.06em; color:var(--ri);
  font-variant-numeric:tabular-nums;
}
.mtl-role-card h3{ margin:0.5rem 0 0.5rem; }
.mtl-role-card p{ font-size:0.9rem; line-height:1.55; margin:0; }
.mtl-role-tag{
  display:inline-block; padding:0.22rem 0.6rem; border-radius:999px;
  font-size:0.74rem; font-weight:700; white-space:nowrap;
  color:var(--ri); background:var(--rs);
}

/* ---- ecosystem ---------------------------------------------------- */
.mtl-eco{ margin:2.2rem 0; }
.mtl-eco-svg{ width:100%; height:auto; display:block; }
.mtl-eco-svg .nt{ font-size:19px; font-weight:800; letter-spacing:-0.01em; }
.mtl-eco-svg .ns{ font-size:13px; fill:var(--mtl-muted); }
.mtl-eco-svg .al{ font-size:12.5px; fill:var(--mtl-muted); font-weight:600; }
.mtl-eco-list{ display:none; list-style:none; margin:0; padding:0; counter-reset:eco; }
.mtl-eco-list li{
  padding:0.9rem 1rem; margin-bottom:0.6rem;
  border-radius:14px; background:var(--mtl-surface);
  border:1px solid var(--mtl-line); border-left:3px solid var(--rc);
  font-size:0.92rem; line-height:1.55; color:var(--mtl-body);
}
.mtl-eco-list b{ color:var(--ri); }
@media (max-width:760px){
  .mtl-eco-svg{ display:none; }
  .mtl-eco-list{ display:block; }
}

/* ---- state maps --------------------------------------------------- */
.mtl-states-grid{ display:grid; gap:1rem; grid-template-columns:1fr 1fr;
  align-items:start; margin:2rem 0; }
.mtl-state{
  background:var(--mtl-surface); border:1px solid var(--mtl-line);
  border-radius:18px; padding:1.3rem;
}
.mtl-chain{ display:flex; flex-wrap:wrap; align-items:center; gap:0.45rem; }
.mtl-chain .st{
  display:inline-block; padding:0.4rem 0.75rem; border-radius:9px;
  font-size:0.84rem; font-weight:600; line-height:1.3;
  color:var(--ri, var(--mtl-ink)); background:var(--rs, rgba(13,9,30,0.05));
  box-shadow:inset 0 0 0 1px var(--rs, transparent);
}
/* the arrows carry the direction of the flow, so they are toned to be
   read, not merely sensed: the hairline value measured 1.8:1 */
.mtl-chain .ar{ color:var(--mtl-muted); font-size:0.95rem; }
.mtl-branch{
  margin-top:1rem; padding-top:1rem; border-top:1px dashed var(--mtl-line-2);
}
.mtl-branch .lbl{
  display:block; font-size:0.7rem; font-weight:800; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--r-risk-ink); margin-bottom:0.6rem;
}
.mtl-branch .mtl-small{ margin-top:0.7rem; }

/* ---- tabs --------------------------------------------------------- */
.mtl-tabwrap{ margin:2rem 0; }
.mtl-tablist{
  display:flex; gap:0.5rem; margin-bottom:1.4rem;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  padding-bottom:2px;
}
.mtl-tablist::-webkit-scrollbar{ display:none; }
.mtl-tab{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.6rem 1.05rem;
  border-radius:999px; cursor:pointer;
  border:1px solid var(--mtl-line);
  background:var(--mtl-surface);
  color:var(--mtl-body);
  font-size:0.88rem; font-weight:700;
  font-family:inherit;
  transition:background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.mtl-tab .dot{ width:8px; height:8px; border-radius:50%; background:var(--rc); flex:0 0 auto; }
.mtl-tab .short{ display:none; }
.mtl-tab:hover{ border-color:var(--rc); color:var(--mtl-ink); }
.mtl-tab[aria-selected="true"]{
  background:var(--rs); border-color:var(--rc); color:var(--ri);
}
.mtl-tab:focus-visible{ outline:2px solid var(--rc); outline-offset:3px; }
.mtl-panel[hidden]{ display:none; }
.mtl-panel{ border-left:3px solid var(--rc); padding-left:clamp(0.9rem, 2vw, 1.6rem); }
.mtl-panel-lede{ font-weight:600; color:var(--mtl-ink) !important; }

/* ---- tables ------------------------------------------------------- */
.mtl-tablewrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--mtl-line); border-radius:16px;
  background:var(--mtl-surface);
  margin:1.4rem 0 0.8rem;
}
.mtl-tablewrap:focus-visible{ outline:2px solid var(--sc-purple-bright, #724EE4); outline-offset:2px; }
/* Tables carry seven columns of prose and suffocate inside the reading
   measure. On a wide screen they step outside it, centred on the same
   axis; below that they scroll horizontally, which the wrapper announces
   and makes keyboard-reachable. */
@media (min-width:1200px){
  .mtl-tablewrap{ width:min(1280px, 92vw); margin-left:50%; transform:translateX(-50%); }
}
.mtl-table{ border-collapse:collapse; width:100%; min-width:1040px; font-size:0.86rem; }
.mtl-table th, .mtl-table td{
  text-align:left; vertical-align:top;
  padding:0.85rem 1rem; border-bottom:1px solid var(--mtl-line);
  line-height:1.5; color:var(--mtl-body);
}
.mtl-table th{
  font-size:0.7rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--mtl-muted); background:rgba(13,9,30,0.02);
  white-space:nowrap;
}
.mtl-table tbody tr:last-child td{ border-bottom:0; }
.mtl-table tbody tr:hover td{ background:rgba(13,9,30,0.015); }
.mtl-table td:first-child{ color:var(--mtl-ink); font-weight:600; }
.mtl-tnote{ font-size:0.84rem !important; color:var(--mtl-muted) !important; margin:0 0 1.4rem; }

.mtl-badge{
  display:inline-block; padding:0.2rem 0.55rem; border-radius:999px;
  font-size:0.72rem; font-weight:700; white-space:nowrap;
}
.b-conf{ color:#046A47; background:rgba(14,138,95,0.12); }
.b-open{ color:var(--mtl-muted); background:rgba(13,9,30,0.06); }
.b-plan{ color:#5731A8; background:rgba(109,74,200,0.12); }
.b-hyp{ color:#9A4A06; background:rgba(226,113,29,0.12); }
.mtl-conf{ font-weight:700; font-size:0.78rem; white-space:nowrap; }
.c-high{ color:#046A47; } .c-med{ color:#9A4A06; } .c-low{ color:var(--mtl-muted); }
.c-open{ color:var(--mtl-muted); font-weight:600; }

.mtl-filters{ display:flex; flex-wrap:wrap; gap:0.45rem; margin-top:1.6rem; }
.mtl-chip{
  padding:0.4rem 0.85rem; border-radius:999px; cursor:pointer;
  border:1px solid var(--mtl-line); background:var(--mtl-surface);
  color:var(--mtl-body); font-size:0.8rem; font-weight:600; font-family:inherit;
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.mtl-chip:hover{ border-color:var(--sc-purple-bright, #724EE4); color:var(--mtl-ink); }
.mtl-chip.is-on{ background:var(--mtl-ink); border-color:var(--mtl-ink); color:#fff; }
.mtl-chip:focus-visible{ outline:2px solid var(--sc-purple-bright, #724EE4); outline-offset:2px; }
.mtl-empty{ font-size:0.9rem; color:var(--mtl-muted); }

/* ---- personas ------------------------------------------------------ */
.mtl-persona{
  background:var(--mtl-surface); border:1px solid var(--mtl-line);
  border-radius:20px; padding:clamp(1.2rem, 2.4vw, 1.8rem);
}
.mtl-persona header{ display:flex; gap:0.6rem; flex-wrap:wrap; align-items:center;
                     margin-bottom:1.2rem; }
.mtl-fields{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; margin:0; }
.mtl-fields .f{ margin:0; }
.mtl-fields dt{
  font-size:0.7rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--mtl-muted); margin-bottom:0.3rem;
}
.mtl-fields dd{ margin:0; font-size:0.9rem; line-height:1.55; color:var(--mtl-body); }

/* ---- blueprint lanes ------------------------------------------------ */
.mtl-lanes{
  margin:2rem 0; padding:clamp(1.2rem, 2.4vw, 1.8rem);
  border-radius:20px; background:var(--mtl-surface); border:1px solid var(--mtl-line);
}
.mtl-lanelist{ list-style:none; margin:0 0 1.2rem; padding:0; display:grid; gap:0.45rem; }
.mtl-lanelist li{
  display:flex; align-items:center; gap:0.8rem;
  padding:0.55rem 0.9rem; border-radius:10px;
  background:var(--rs); border-left:3px solid var(--rc);
  font-size:0.9rem; font-weight:600; color:var(--mtl-ink);
}
.mtl-lanelist .n{ font-size:0.72rem; font-weight:800; color:var(--ri);
                  font-variant-numeric:tabular-nums; }

/* ---- flows ---------------------------------------------------------- */
.mtl-flow .mtl-chain{ margin-bottom:1.6rem; }
.mtl-flowgrid{ display:grid; gap:1.4rem; grid-template-columns:1fr 1fr; }
.mtl-gal{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
.mtl-gal .mtl-fig{ margin-top:0; }

/* ---- lo-fi loop ----------------------------------------------------- */
.mtl-loop{
  display:flex; flex-wrap:wrap; align-items:center; gap:0.6rem;
  margin:2rem 0; padding:1.2rem 1.4rem;
  border-radius:18px; background:var(--mtl-surface); border:1px solid var(--mtl-line);
}
.mtl-loop .s{
  padding:0.5rem 0.9rem; border-radius:999px;
  background:rgba(13,9,30,0.05); font-size:0.86rem; font-weight:700; color:var(--mtl-ink);
}
.mtl-loop .ar{ color:var(--mtl-muted); }
.mtl-loop .ar.back{ color:var(--sc-orchid, #A03BB8); font-size:1.1rem; }
.mtl-loop .mtl-small{ flex:1 0 100%; margin:0.4rem 0 0; }

/* ---- themes --------------------------------------------------------- */
.mtl-themes{ display:grid; gap:1.2rem; grid-template-columns:1fr 1fr; margin:2rem 0; }
.mtl-theme{
  padding:1.4rem; border-radius:20px;
  background:var(--mtl-surface); border:1px solid var(--mtl-line);
  border-top:3px solid var(--rc);
}
.mtl-theme .mtl-small{ margin:-0.2rem 0 0.8rem; }

/* ---- trust ---------------------------------------------------------- */
.mtl-trusts{ display:grid; gap:1rem; grid-template-columns:repeat(3, 1fr);
  align-items:start; margin:2rem 0; }
.mtl-trust{
  padding:1.4rem; border-radius:18px;
  background:var(--mtl-surface); border:1px solid var(--mtl-line);
}
.mtl-trust .n{
  display:inline-block; margin-bottom:0.7rem;
  font-size:0.72rem; font-weight:800; color:var(--sc-orchid, #A03BB8);
  font-variant-numeric:tabular-nums;
}
.mtl-trust p{ font-size:0.9rem; line-height:1.55; margin:0; }

/* ---- timeline -------------------------------------------------------- */
.mtl-timeline{
  list-style:none; margin:2rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:0.2rem 1.6rem;
  position:relative;
}
.mtl-timeline li{
  position:relative; display:flex; align-items:center; gap:0.6rem;
  padding:0.5rem 0; font-size:0.9rem; font-weight:600; color:var(--mtl-body);
}
.mtl-timeline .d{
  width:9px; height:9px; border-radius:50%; flex:0 0 auto;
  background:var(--sc-purple-bright, #724EE4);
  box-shadow:0 0 0 4px rgba(114,78,228,0.14);
}
.mtl-timeline li:last-child .d{ background:var(--r-adm); box-shadow:0 0 0 4px rgba(14,138,95,0.16); }

/* ---- iterations ------------------------------------------------------ */
.mtl-iter{
  padding:clamp(1.4rem, 3vw, 2.4rem);
  border-radius:24px; background:var(--mtl-surface); border:1px solid var(--mtl-line);
  margin-bottom:1.6rem;
}
.mtl-iter-head{ margin-bottom:1.4rem; }
.mtl-iter-head .n{
  font-size:0.72rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--sc-orchid, #A03BB8);
}
.mtl-iter-head .mtl-h3{ margin:0.45rem 0 0; }
.mtl-iter-grid{ display:grid; gap:1.4rem; grid-template-columns:repeat(3, 1fr); }
.mtl-iter-grid p{ font-size:0.92rem; margin:0; }
.mtl-ba{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; margin-top:1.8rem; }
.mtl-ba-col .cap{
  display:block; margin-bottom:0.5rem;
  font-size:0.7rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase;
}
.mtl-ba-col.before .cap{ color:var(--r-risk-ink); }
.mtl-ba-col.after .cap{ color:var(--r-adm-ink); }
.mtl-ba-col .mtl-fig{ margin-top:0; }
.mtl-ba-col.after .mtl-ph{ border-color:rgba(14,138,95,0.4); }
.mtl-principle{
  margin:1.4rem 0 0; padding:1.1rem 1.3rem;
  border-radius:0 14px 14px 0; border-left:3px solid var(--sc-orchid, #A03BB8);
  background:rgba(160,59,184,0.05);
  font-size:1.02rem; font-weight:600; line-height:1.55; color:var(--mtl-ink);
}
.mtl-principle .lbl{
  display:block; font-size:0.68rem; font-weight:800; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--sc-orchid, #A03BB8); margin-bottom:0.45rem;
}

/* ---- matrix ----------------------------------------------------------- */
.mtl-matrix{
  display:grid; gap:0.8rem; grid-template-columns:1fr 1fr;
  margin:1.6rem 0 0.8rem; position:relative;
  padding-left:2rem; padding-bottom:1.8rem;
}
.mtl-matrix .ax-y, .mtl-matrix .ax-x{
  position:absolute; font-size:0.7rem; font-weight:800; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--mtl-muted);
}
.mtl-matrix .ax-y{ left:0; top:50%; transform:translateY(-50%) rotate(-90deg); }
.mtl-matrix .ax-x{ left:50%; bottom:0; transform:translateX(-50%); }
.mtl-quad{
  padding:1.2rem; border-radius:16px; border:1px solid var(--mtl-line);
  background:var(--mtl-surface);
}
.mtl-quad.q1{ border-color:rgba(14,138,95,0.35); background:rgba(14,138,95,0.05); }
.mtl-quad.q2{ border-color:rgba(109,74,200,0.3); background:rgba(109,74,200,0.05); }
.mtl-quad .lbl{
  display:block; margin-bottom:0.7rem;
  font-size:0.72rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--mtl-ink);
}

/* ---- outcome ----------------------------------------------------------- */
.mtl-metrics{ display:grid; gap:0.9rem; grid-template-columns:repeat(3, 1fr); margin-top:1.6rem; }
.mtl-metric{
  padding:1.2rem; border-radius:16px;
  background:var(--mtl-surface); border:1px dashed var(--mtl-line-2);
  display:flex; flex-direction:column; gap:0.35rem; align-items:flex-start;
}
.mtl-metric .v{ font-size:1.9rem; font-weight:800; color:var(--mtl-muted); line-height:1; }
.mtl-metric .k{ font-size:0.88rem; font-weight:600; color:var(--mtl-ink); line-height:1.4; }

/* ---- challenges --------------------------------------------------------- */
.mtl-chals{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; margin-top:1.6rem; }
.mtl-chal{
  padding:1.5rem; border-radius:20px;
  background:var(--mtl-surface); border:1px solid var(--mtl-line);
}
.mtl-chal .n{
  font-size:0.7rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--r-risk-ink);
}
.mtl-chal .mtl-h4{ margin:0.5rem 0 1rem; }
.mtl-chal .r{ margin-bottom:0.9rem; }
.mtl-chal .r:last-child{ margin-bottom:0; }
.mtl-chal .lbl{
  display:block; font-size:0.68rem; font-weight:800; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--mtl-muted); margin-bottom:0.3rem;
}
.mtl-chal p{ font-size:0.9rem; line-height:1.55; margin:0; }

/* ---- reflections --------------------------------------------------------- */
.mtl-learn{ list-style:none; margin:1.6rem 0 0; padding:0; counter-reset:lrn; }
.mtl-learn li{
  counter-increment:lrn;
  position:relative; padding:1.1rem 0 1.1rem 3.2rem;
  border-bottom:1px solid var(--mtl-line);
  font-size:1.02rem; line-height:1.6; color:var(--mtl-ink);
}
.mtl-learn li::before{
  content:counter(lrn, decimal-leading-zero);
  position:absolute; left:0; top:1.2rem;
  font-size:0.78rem; font-weight:800; color:var(--sc-orchid, #A03BB8);
  font-variant-numeric:tabular-nums;
}
.mtl-final{
  margin:2.4rem 0 0; padding:clamp(1.6rem, 3vw, 2.4rem);
  border-radius:24px;
  background:linear-gradient(135deg, #301884, #724EE4);
  color:#fff;
  font-size:clamp(1.1rem, 2.1vw, 1.45rem);
  font-weight:600; line-height:1.5; letter-spacing:-0.015em;
}
.mtl-final cite{
  display:block; margin-top:1rem; font-style:normal;
  font-size:0.84rem; font-weight:700; color:rgba(255,255,255,0.8);
}

/* ---- reveals -------------------------------------------------------------- */
.mtl-rise{ opacity:0; transform:translateY(18px);
           transition:opacity 0.6s ease, transform 0.75s cubic-bezier(0.16,1,0.3,1); }
.mtl-rise.is-in{ opacity:1; transform:none; }

/* ---- responsive ----------------------------------------------------------- */
@media (max-width:980px){
  .mtl-roles{ grid-template-columns:repeat(2, 1fr); }
  .mtl-trusts{ grid-template-columns:repeat(2, 1fr); }
  .mtl-iter-grid{ grid-template-columns:1fr; gap:1rem; }
  .mtl-metrics{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:760px){
  .mtl-split, .mtl-states-grid, .mtl-themes, .mtl-chals, .mtl-flowgrid,
  .mtl-gal, .mtl-ba, .mtl-matrix, .mtl-fields{ grid-template-columns:1fr; }
  .mtl-matrix{ padding-left:0; padding-bottom:0; }
  .mtl-matrix .ax-y, .mtl-matrix .ax-x{ display:none; }
  .mtl-cols{ columns:1; }
  .mtl-roles{ grid-template-columns:1fr; }
  .mtl-trusts{ grid-template-columns:1fr; }
  .mtl-metrics{ grid-template-columns:1fr; }
  .mtl-tab .full{ display:none; }
  .mtl-tab .short{ display:inline; }
  .mtl-h2{ max-width:none; }
  .mtl-progress{ top:0; }
}

@media (prefers-reduced-motion: reduce){
  .mtl-rise{ opacity:1; transform:none; transition:none; }
  .mtl-tab, .mtl-chip, .mtl-rail .i, .mtl-rail .t{ transition:none; }
}

/* ---- the student application, auto-playing -------------------------
   The iTraffic style-guide marquee, reused as-is for motion, looping,
   pause-on-hover and the lightbox; only the ground changes, to white.
   The screens are landscape, so they are sized by a lower height than
   the portrait boards it was built for. */
.mtl-screens{
  margin-top:clamp(2rem, 4vw, 3rem);
  padding:clamp(1.4rem, 3vw, 2.4rem) 0;
  max-width:none;
  background:#fff;
  border-top:1px solid var(--mtl-line);
  border-bottom:1px solid var(--mtl-line);
}
.mtl-screens .sg-item{
  height:clamp(260px, 44vh, 480px);
  background:#fff;
  border:1px solid var(--mtl-line);
  box-shadow:0 1px 2px rgba(13,9,30,0.04), 0 18px 40px -24px rgba(13,9,30,0.28);
}
.mtl-screens .sg-item:hover,
.mtl-screens .sg-item:focus-visible{
  box-shadow:0 2px 6px rgba(13,9,30,0.06), 0 30px 60px -28px rgba(13,9,30,0.38);
}
.mtl-screens .sg-item:focus-visible{ outline-color:var(--r-own, #724EE4); }
@media (max-width:820px){
  .mtl-screens .sg-item{ height:clamp(200px, 34vh, 320px); }
}

/* ---- low-fidelity wireframes: the same white marquee ---------------- */
/* ---- low-fidelity wireframes: a stepper --------------------------
   One wireframe at a readable size, with arrows, a step count, its
   caption, and thumbnails to jump between steps. */
.mtl-lv{ margin-top:0.4rem; outline:none; }
.lv-stage{
  position:relative; aspect-ratio:1400 / 897;
  background:#fff; border:1px solid var(--mtl-line); border-radius:16px; overflow:hidden;
  box-shadow:0 1px 2px rgba(13,9,30,0.04), 0 24px 50px -30px rgba(13,9,30,0.3);
  touch-action:pan-y;
}
.lv-shot{
  position:absolute; inset:0; margin:0; padding:0; border:0; background:#fff;
  cursor:zoom-in; opacity:0; visibility:hidden;
  transition:opacity 0.35s ease, visibility 0s linear 0.35s;
}
.lv-shot.is-on{ opacity:1; visibility:visible; transition:opacity 0.35s ease; }
.lv-shot img{ display:block; width:100%; height:100%; object-fit:contain; }
.lv-shot:focus-visible{ outline:2px solid var(--r-own); outline-offset:-4px; }
.lv-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; padding:0; cursor:pointer;
  background:rgba(255,255,255,0.94); color:var(--mtl-ink);
  border:1px solid var(--mtl-line);
  box-shadow:0 6px 18px -8px rgba(13,9,30,0.35);
  transition:background 0.2s ease, opacity 0.2s ease;
}
.lv-nav.prev{ left:14px; } .lv-nav.next{ right:14px; }
.lv-nav svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; }
.lv-nav:hover{ background:#fff; }
.lv-nav:focus-visible{ outline:2px solid var(--r-own); outline-offset:2px; }
.lv-nav[disabled]{ opacity:0.35; cursor:default; }
.lv-bar{ display:flex; align-items:baseline; gap:1rem; margin:0.9rem 0 0.8rem; }
.lv-count{ flex:0 0 auto; font-size:0.8rem; font-weight:700; color:var(--mtl-muted);
  font-variant-numeric:tabular-nums; }
.lv-count b{ color:var(--mtl-ink); font-size:1rem; }
.mtl .lv-cap{ flex:1 1 auto; margin:0; font-size:0.95rem; font-weight:600; color:var(--mtl-ink); max-width:none; }
.lv-hint{ flex:0 0 auto; font-size:0.76rem; color:var(--mtl-muted); }
.lv-strip{
  display:flex; gap:0.6rem; overflow-x:auto; padding:0.2rem 0.1rem 0.6rem;
  scrollbar-width:thin; scroll-behavior:smooth;
}
.lv-thumb{
  position:relative; flex:0 0 auto; width:118px; aspect-ratio:1400 / 897;
  padding:0; margin:0; cursor:pointer; overflow:hidden;
  background:#fff; border:1px solid var(--mtl-line); border-radius:8px;
  opacity:0.62; transition:opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.lv-thumb img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top left; }
.lv-thumb span{
  position:absolute; left:5px; bottom:5px; padding:0.05rem 0.35rem; border-radius:5px;
  font-size:0.66rem; font-weight:800; color:#fff; background:rgba(13,9,30,0.72);
}
.lv-thumb:hover{ opacity:0.9; }
.lv-thumb[aria-current="true"]{ opacity:1; border-color:var(--r-own);
  box-shadow:0 0 0 2px var(--r-own-soft); }
.lv-thumb:focus-visible{ outline:2px solid var(--r-own); outline-offset:2px; }
@media (max-width:640px){
  .lv-nav{ width:36px; height:36px; } .lv-nav.prev{ left:8px; } .lv-nav.next{ right:8px; }
  .lv-hint{ display:none; }
  .lv-thumb{ width:88px; }
}
@media (prefers-reduced-motion: reduce){ .lv-shot, .lv-shot.is-on{ transition:none; } .lv-strip{ scroll-behavior:auto; } }

/* ---- Hotjar findings report ----------------------------------------
   Stands in for the old placeholder: the report's numbers as two small
   charts, its eight findings, the AI output it caught, and the
   anonymised recordings on the same white marquee as the screens. */
.mtl-hj{
  margin-top:clamp(2rem, 4vw, 3rem);
  padding:clamp(1.4rem, 3vw, 2.4rem);
  background:var(--mtl-surface);
  border:1px solid var(--mtl-line);
  border-radius:20px;
  box-shadow:0 1px 2px rgba(13,9,30,0.04), 0 24px 60px -40px rgba(13,9,30,0.35);
}
.mtl-hj-head .mtl-h3{ margin:0.5rem 0 1.2rem; }
.mtl-hj-meta{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:0.8rem; margin:0;
}
.mtl-hj-meta div{ padding:0.9rem 1rem; border-radius:14px; background:var(--mtl-tint); }
.mtl-hj-meta dt{ font-size:0.74rem; font-weight:700; color:var(--mtl-muted); margin-bottom:0.3rem; }
.mtl-hj-meta dd{ margin:0; font-size:clamp(1.05rem, 1.8vw, 1.45rem); font-weight:800;
  letter-spacing:-0.02em; color:var(--mtl-ink); font-variant-numeric:tabular-nums; }

.mtl-hj-data{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
.mtl-hj-panel{ padding:1.2rem 1.25rem; border:1px solid var(--mtl-line); border-radius:16px; }
.mtl-hj-panel .mtl-h4{ margin-bottom:1rem; }
.mtl-hj-stack{ display:flex; height:14px; border-radius:99px; overflow:hidden; gap:3px; }
.mtl-hj-stack span{ display:block; height:100%; }
.mtl .d1{ background:var(--r-own); } .mtl .d2{ background:var(--r-stu); } .mtl .d3{ background:var(--r-tea); }
.mtl-hj-legend, .mtl-hj-browsers{ list-style:none; padding:0; margin:0.9rem 0 0;
  display:flex; flex-wrap:wrap; gap:0.45rem 1.1rem; font-size:0.86rem; color:var(--mtl-body); }
.mtl-hj-legend i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:0.45rem; }
.mtl-hj-legend b, .mtl-hj-browsers b{ color:var(--mtl-ink); font-variant-numeric:tabular-nums; }
.mtl-hj-legend span{ color:var(--mtl-muted); }
.mtl-hj-browsers{ padding-top:0.8rem; border-top:1px dashed var(--mtl-line); font-size:0.82rem; }
.mtl-hj-browsers b{ margin-left:0.2rem; }
.mtl .mtl-hj-take{ margin:1rem 0 0; font-size:0.88rem; line-height:1.5; color:var(--mtl-body); max-width:none; }

.mtl-hj-bars{ list-style:none; margin:0; padding:0; display:grid; gap:0.7rem; }
.mtl-hj-bars .row{ display:flex; justify-content:space-between; font-size:0.86rem; font-weight:700; }
.mtl-hj-bars .ct{ font-variant-numeric:tabular-nums; }
.mtl-hj-bars .ct span{ color:var(--mtl-muted); font-weight:600; margin-left:0.3rem; }
.mtl-hj-bars .track{ height:8px; border-radius:99px; background:var(--mtl-tint); margin:0.3rem 0 0.2rem; overflow:hidden; }
.mtl-hj-bars .track span{ display:block; height:100%; border-radius:99px; background:var(--bc); }
.mtl-hj-bars .ds{ font-size:0.76rem; color:var(--mtl-muted); }
.mtl-hj-bars .l-fr{ --bc:var(--r-risk); } .mtl-hj-bars .l-ok{ --bc:var(--r-adm); }
.mtl-hj-bars .l-cf{ --bc:var(--r-stu); } .mtl-hj-bars .l-ux{ --bc:var(--r-own); }
.mtl-hj-bars .l-bg{ --bc:var(--r-sys); }

.mtl-hj-sub{ margin:2rem 0 0.9rem; }
.mtl-hj-finds{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0.8rem; }
.mtl-hj-find{ position:relative; padding:1rem 1rem 1.1rem; border-radius:14px;
  background:var(--mtl-ground); border:1px solid var(--mtl-line); }
.mtl-hj-find .k{ font-size:0.74rem; font-weight:800; color:var(--r-own-ink); font-variant-numeric:tabular-nums; }
.mtl-hj-find .tg{ float:right; font-size:0.68rem; font-weight:700; letter-spacing:0.02em;
  padding:0.15rem 0.5rem; border-radius:99px; background:var(--r-own-soft); color:var(--r-own-ink); }
.mtl-hj-find h5{ margin:0.55rem 0 0.4rem; font-size:0.95rem; line-height:1.3; font-weight:800; letter-spacing:-0.01em; }
.mtl .mtl-hj-find p{ margin:0; font-size:0.84rem; line-height:1.5; color:var(--mtl-body); }
.mtl-hj-find strong{ color:var(--r-risk-ink); }

.mtl-hj-split{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(1rem, 3vw, 2.2rem); }
.mtl-hj-ai{ margin:0 0 0.7rem; padding:0.7rem 0.8rem; border:1px solid var(--mtl-line); border-radius:12px; }
.mtl-hj-ai figcaption{ display:flex; justify-content:space-between; gap:1rem;
  font-size:0.8rem; font-weight:700; color:var(--mtl-ink); margin-bottom:0.5rem; }
.mtl-hj-ai figcaption em{ font-style:normal; font-weight:600; color:var(--mtl-muted); white-space:nowrap; }
.mtl-hj-ai img{ display:block; width:auto; max-width:100%; height:auto; max-height:58px; border-radius:8px; }
.mtl-hj-split .mtl-list li{ font-size:0.9rem; }

/* the recordings marquee: captions sit under each shot, and do not widen it */
.mtl-evidence{ margin-top:0.2rem; border-radius:14px; }
.mtl-evidence .sg-item{ height:auto; display:flex; flex-direction:column; text-align:left; font:inherit; }
.mtl-evidence .sg-item img{ height:clamp(200px, 32vh, 330px); width:auto; }
.mtl .mtl-evidence .mtl-ev-cap{
  display:block; width:0; min-width:100%; box-sizing:border-box;
  margin:0; padding:0.7rem 0.9rem 0.8rem;
  font-size:0.82rem; line-height:1.4; font-weight:600; color:var(--mtl-body);
  border-top:1px solid var(--mtl-line); background:#fff;
}
.mtl .mtl-hj-anon{ margin:0.8rem 0 0; font-size:0.8rem; color:var(--mtl-muted); max-width:none; }

@media (max-width:1100px){ .mtl-hj-finds{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:820px){
  .mtl-hj-meta{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .mtl-hj-data, .mtl-hj-split{ grid-template-columns:1fr; }
  .mtl-evidence .sg-item img{ height:clamp(170px, 28vh, 240px); }
}
@media (max-width:520px){ .mtl-hj-finds{ grid-template-columns:1fr; } }

/* the low-fi panels drop the role rule on the left; the stepper frames itself */
#mtl-lofi .mtl-panel, #mtl-hifi .mtl-panel{ border-left:0; padding-left:0; }
.lv-play{
  flex:0 0 auto; align-self:center; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; padding:0; cursor:pointer;
  background:#fff; color:var(--mtl-ink); border:1px solid var(--mtl-line-2);
}
.lv-play svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.lv-play .i-play{ fill:currentColor; stroke-width:1.5; display:none; }
.lv-play[aria-pressed="true"] .i-play{ display:block; }
.lv-play[aria-pressed="true"] .i-pause{ display:none; }
.lv-play:focus-visible{ outline:2px solid var(--r-own); outline-offset:2px; }
/* a thin timer on the current thumbnail while it plays */
.lv-thumb::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--r-own);
}
.mtl-lv.is-playing .lv-thumb[aria-current="true"]::after{ animation:lv-timer var(--lv-dur, 4.5s) linear forwards; }
.mtl-lv.is-held .lv-thumb[aria-current="true"]::after{ animation-play-state:paused; }
@keyframes lv-timer{ to{ width:100%; } }
@media (prefers-reduced-motion: reduce){ .lv-thumb::after{ display:none; } }

/* an iteration explained in steps rather than before-and-after shots */
.mtl-how{ margin:1.4rem 0 0.2rem; padding:1.2rem 1.3rem; border-radius:16px;
  background:var(--mtl-surface); border:1px solid var(--mtl-line); }
.mtl-how .mtl-h5{ margin-bottom:0.9rem; color:var(--mtl-muted); }
.mtl .mtl-how-list{ margin-bottom:0; }
.mtl .mtl-how-list li{ max-width:none; }

/* ================= CAPBRIDGE CASE STUDY ===========================
   A fintech page, so the restraint is the point: white ground, near-
   black type, one grey surface, and the two CapBridge brand colours
   used sparingly - navy for structure, gold for the single action.
   Both accents are darkened for text use; the brand values are fills
   and do not clear 4.5:1 at body size. */
.cb{
  --cb-max:1180px;
  --cb-white:#FFFFFF;
  --cb-grey:#F6F7F9;          /* the one surface */
  --cb-line:rgba(16,20,32,0.10);
  --cb-line-2:rgba(16,20,32,0.22);
  --cb-ink:#101420;
  --cb-body:rgba(16,20,32,0.74);
  /* 0.58 measured exactly 4.50:1 on white and 4.40:1 on the grey surface -
     right on the line and under it. 0.64 clears both with room. */
  --cb-muted:rgba(16,20,32,0.64);
  --cb-navy:#1D4C83;          /* CapBridge main */
  --cb-navy-ink:#17406F;
  --cb-gold:#B48521;          /* CapBridge accent */
  --cb-gold-ink:#7C5A0E;
  --cb-gold-soft:rgba(180,133,33,0.10);
  --cb-navy-soft:rgba(29,76,131,0.07);

  background:var(--cb-white);
  color:var(--cb-ink);
}

.cb-inner{ max-width:var(--cb-max); margin:0 auto; padding:0 6vw; }
.cb-sec{ padding:clamp(3.5rem, 7vw, 6.5rem) 0; }
.cb-tint{ background:var(--cb-grey); }
.cb-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---- type ---------------------------------------------------------- */
.cb-eyebrow{
  font-size:0.72rem; font-weight:800; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--cb-gold-ink);
}
.cb-kicker{
  display:inline-block; margin-bottom:0.9rem;
  font-size:0.72rem; font-weight:800; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--cb-navy-ink);
}
.cb-h1{
  font-size:clamp(2.3rem, 5.4vw, 4rem);
  font-weight:800; letter-spacing:-0.035em; line-height:1.03;
  margin:1rem 0 1.2rem; text-wrap:balance;
}
.cb-h2{
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight:800; letter-spacing:-0.03em; line-height:1.12;
  margin:0 0 1.4rem; max-width:22ch; text-wrap:balance;
}
.cb-h3{
  font-size:clamp(1.15rem, 1.9vw, 1.45rem);
  font-weight:800; letter-spacing:-0.02em; line-height:1.25; margin:0 0 0.9rem;
}
.cb-h4{ font-size:0.78rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
        color:var(--cb-muted); margin:0 0 0.9rem; }
.cb p{ color:var(--cb-body); line-height:1.7; margin:0 0 1.1rem; text-wrap:pretty; }
/* the brief's 60-75 character measure, held by the type size not by a
   hard pixel width */
.cb-prose{ max-width:68ch; }
.cb-prose p:last-child{ margin-bottom:0; }
.cb-lede{
  font-size:clamp(1.02rem, 1.6vw, 1.18rem); line-height:1.65;
  color:var(--cb-body); max-width:60ch; margin:0 0 2rem;
}

/* ---- buttons -------------------------------------------------------- */
.cb-actions{ display:flex; flex-wrap:wrap; gap:0.7rem; }
.cb-btn{
  display:inline-flex; align-items:center; gap:0.55rem;
  padding:0.95rem 1.5rem; border-radius:8px;
  font-size:0.95rem; font-weight:700; text-decoration:none;
  transition:background 0.25s ease, color 0.25s ease, border-color 0.25s ease,
             transform 0.25s ease;
}
.cb-btn svg{ transition:transform 0.25s ease; }
.cb-btn.is-primary{ background:var(--cb-navy); color:#fff; }
.cb-btn.is-primary:hover{ background:#163B67; transform:translateY(-2px); }
.cb-btn.is-primary:hover svg{ transform:translate(2px, -2px); }
.cb-btn.is-ghost{
  background:transparent; color:var(--cb-ink);
  border:1px solid var(--cb-line-2);
}
.cb-btn.is-ghost:hover{ border-color:var(--cb-navy); color:var(--cb-navy-ink); }
.cb-btn.is-ghost:hover svg{ transform:translateY(2px); }
.cb-btn.is-quiet{ background:#fff; color:var(--cb-ink); border:1px solid var(--cb-line-2); }
.cb-btn.is-quiet:hover{ border-color:var(--cb-navy); color:var(--cb-navy-ink); }
.cb-btn:focus-visible{ outline:2px solid var(--cb-navy); outline-offset:3px; }
/* inside the pinned column now, so it rides with the copy */
.cb-back{ margin:0 0 1.4rem; }

/* ---- hero ------------------------------------------------------------
   The grid pins for the length of the hero while the screen inside the
   phone scrolls through the app. The extra height below is what buys
   that scroll distance; take it away and there is nothing to pin to. */
.cb-hero{
  padding-top:calc(69px + clamp(1rem, 2vw, 2rem));
  min-height:230vh;
}
.cb-hero-grid{
  position:sticky; top:0;
  height:100vh;
  max-width:var(--cb-max); margin:0 auto; padding:0 6vw;
  display:grid; grid-template-columns:1.05fr 0.95fr;
  gap:clamp(2rem, 5vw, 4.5rem); align-items:center;
}
.cb-stage{ display:flex; flex-direction:column; align-items:center; gap:1rem; }
.cb-stage-hint{
  font-size:0.76rem; font-weight:600; letter-spacing:0.02em;
  color:var(--cb-muted); margin:0;
  opacity:0; transition:opacity 0.5s ease;
}
.cb-hero.is-pinned .cb-stage-hint{ opacity:1; }

/* ---- the phone -------------------------------------------------------
   Drawn rather than dropped in as a PNG: it scales cleanly, weighs
   nothing, and the screen is a real element the artwork can move
   inside. */
.cb-phone{
  position:relative;
  /* Height first, width derived from it. aspect-ratio alone left the box
     indefinite inside the flex column, so the tall screenshot stretched
     the phone to its own height and there was nothing left to scroll. */
  --cb-ph-h:min(640px, 70vh);
  flex:0 0 auto;
  height:var(--cb-ph-h);
  width:calc(var(--cb-ph-h) * 9 / 19.5);
  border-radius:clamp(34px, 4.2vw, 48px);
  padding:10px;
  background:
    linear-gradient(150deg, #FDFDFE 0%, #E8EAEE 24%, #FCFCFD 48%, #DFE2E7 72%, #F7F8FA 100%);
  box-shadow:
    0 0 0 1px rgba(16,20,32,0.10),
    inset 0 0 0 1.5px rgba(255,255,255,0.9),
    0 30px 60px -28px rgba(16,20,32,0.45),
    0 60px 120px -50px rgba(16,20,32,0.5);
  animation:cb-float 7s ease-in-out infinite;
}
@keyframes cb-float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
.cb-screen{
  position:relative;
  height:100%; width:100%;
  box-sizing:border-box;
  border-radius:clamp(26px, 3.4vw, 39px);
  overflow:hidden;
  background:#1D4C83;
  box-shadow:inset 0 0 0 1px rgba(16,20,32,0.22);
}
.cb-screen img{
  display:block; width:100%; height:auto;
  will-change:transform;
}
.cb-island{
  position:absolute; top:19px; left:50%; transform:translateX(-50%);
  width:31%; height:20px; border-radius:99px;
  background:#0B0D12;
  box-shadow:0 0 0 1px rgba(0,0,0,0.35);
}
.cb-btn-side{
  position:absolute; width:2.5px; border-radius:2px;
  background:linear-gradient(180deg, #D6D9DF, #AFB4BE);
}
.cb-vol-a{ left:-2.5px; top:19%; height:4.4%; }
.cb-vol-b{ left:-2.5px; top:27%; height:7%; }
.cb-vol-c{ left:-2.5px; top:36%; height:7%; }
.cb-pwr{ right:-2.5px; top:27%; height:11%; }

/* ---- project meta ---------------------------------------------------- */
.cb-meta{
  display:grid; gap:1px;
  grid-template-columns:repeat(3, 1fr);
  margin-top:clamp(2rem, 4vw, 3rem);
  background:var(--cb-line);
  border:1px solid var(--cb-line);
  border-radius:12px; overflow:hidden;
}
.cb-meta-card{
  background:var(--cb-white);
  padding:1.3rem 1.4rem;
  display:flex; flex-direction:column; gap:0.5rem;
}
.cb-meta-card .k{
  font-size:0.68rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--cb-muted);
}
.cb-meta-card .v{ font-size:0.94rem; font-weight:600; line-height:1.5; color:var(--cb-ink); }
.cb-meta-card .sub{ font-weight:500; color:var(--cb-body); font-size:0.86rem; }

/* ---- the showcase rail ------------------------------------------------ */
.cb-rail-wrap{ position:relative; margin-top:clamp(2rem, 4vw, 3rem); }
.cb-rail{
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
  /* partial screens at both edges, so it reads as a longer strip */
  padding:0 max(6vw, calc((100vw - var(--cb-max)) / 2 + 6vw));
}
.cb-rail::-webkit-scrollbar{ display:none; }
.cb-rail.is-dragging{ cursor:grabbing; }
.cb-rail:focus-visible{ outline:2px solid var(--cb-navy); outline-offset:4px; border-radius:8px; }
.cb-track{ display:flex; gap:1.4rem; width:max-content; }
.cb-card{ margin:0; flex:0 0 auto; width:216px; }
.cb-card-screen{
  display:block;
  border-radius:18px; overflow:hidden;
  background:var(--cb-white);
  border:1px solid var(--cb-line);
  box-shadow:0 1px 2px rgba(16,20,32,0.04), 0 22px 44px -28px rgba(16,20,32,0.35);
  /* a window onto the screen: the whole shot is there, the tile shows
     the top of it rather than squashing a 1:4 image into a card */
  height:430px;
}
.cb-card-screen img{ display:block; width:100%; height:auto;
                     transition:transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.cb-card-btn:hover .cb-card-screen{ border-color:var(--cb-navy); }
.cb-card-btn:hover .cb-card-screen img{ transform:translateY(-10px); }
.cb-note{ font-size:0.86rem; color:var(--cb-muted); margin-top:-0.4rem; }
.cb-card figcaption{
  margin-top:0.8rem; font-size:0.82rem; font-weight:600;
  color:var(--cb-body); line-height:1.4;
}
.cb-card.is-empty .cb-card-screen{
  display:flex; align-items:center; justify-content:center;
  border-style:dashed; border-color:var(--cb-line-2); box-shadow:none;
  background:var(--cb-grey);
}
.cb-card.is-empty .lb{
  font-size:0.82rem; font-weight:700; color:var(--cb-muted); text-align:center; padding:1rem;
}
.cb-card.is-empty figcaption{ color:var(--cb-muted); }

.cb-rail-ctl{
  display:flex; gap:0.6rem; justify-content:flex-end;
  max-width:var(--cb-max); margin:1.4rem auto 0; padding:0 6vw;
}
.cb-nav{
  width:46px; height:46px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--cb-white); border:1px solid var(--cb-line-2);
  color:var(--cb-ink); cursor:pointer;
  transition:background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.cb-nav:hover{ background:var(--cb-navy); border-color:var(--cb-navy); color:#fff; }
.cb-nav:focus-visible{ outline:2px solid var(--cb-navy); outline-offset:3px; }

/* ---- two-column blocks ------------------------------------------------ */
.cb-two{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem, 5vw, 4rem); }
.cb-two p:last-child{ margin-bottom:0; }
.cb-split{ display:grid; grid-template-columns:1.35fr 0.65fr; gap:clamp(2rem, 4vw, 3.5rem);
           align-items:start; }
.cb-priorities{
  background:var(--cb-white); border:1px solid var(--cb-line);
  border-top:3px solid var(--cb-gold);
  border-radius:12px; padding:1.5rem;
}
.cb-priorities ul{ list-style:none; margin:0; padding:0; }
.cb-priorities li{
  position:relative; padding-left:1.5rem; margin-bottom:0.8rem;
  font-size:0.92rem; line-height:1.5; color:var(--cb-body);
}
.cb-priorities li:last-child{ margin-bottom:0; }
.cb-priorities li::before{
  content:''; position:absolute; left:0; top:0.45em;
  width:9px; height:5px;
  border-left:2px solid var(--cb-gold-ink); border-bottom:2px solid var(--cb-gold-ink);
  transform:rotate(-45deg);
}

/* ---- process stages ---------------------------------------------------- */
.cb-stages{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; }
.cb-stage-card{
  display:flex; flex-direction:column; gap:0.5rem;
  padding:1.6rem; border-radius:12px;
  background:var(--cb-white); border:1px solid var(--cb-line);
  text-decoration:none; color:var(--cb-ink);
  transition:border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.cb-stage-card .n{
  font-size:0.72rem; font-weight:800; letter-spacing:0.14em; color:var(--cb-gold-ink);
  font-variant-numeric:tabular-nums;
}
.cb-stage-card .t{ font-size:1.12rem; font-weight:800; letter-spacing:-0.02em; }
.cb-stage-card .d{ font-size:0.88rem; line-height:1.5; color:var(--cb-body); }
.cb-stage-card .go{ margin-top:0.4rem; color:var(--cb-navy-ink); display:inline-flex; }
.cb-stage-card:hover{
  border-color:var(--cb-navy);
  transform:translateY(-3px);
  box-shadow:0 18px 40px -26px rgba(16,20,32,0.45);
}
.cb-stage-card:focus-visible{ outline:2px solid var(--cb-navy); outline-offset:3px; }

/* ---- findings and outcomes --------------------------------------------- */
.cb-finds{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem;
           margin-top:clamp(2rem, 4vw, 3rem); }
.cb-find{
  padding:1.4rem; border-radius:12px;
  background:var(--cb-grey); border:1px solid var(--cb-line);
}
.cb-find h3{ font-size:0.98rem; font-weight:800; letter-spacing:-0.01em; margin:0 0 0.5rem;
             line-height:1.3; }
.cb-find p{ font-size:0.86rem; line-height:1.55; margin:0; }

.cb-outs{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem;
          margin-top:clamp(2rem, 4vw, 3rem); }
.cb-out{
  padding:1.6rem; border-radius:12px;
  background:var(--cb-white); border:1px solid var(--cb-line);
  border-left:3px solid var(--cb-navy);
}
.cb-out h3{ font-size:1.02rem; font-weight:800; letter-spacing:-0.015em; margin:0 0 0.5rem; }
.cb-out p{ font-size:0.9rem; line-height:1.55; margin:0; }

/* ---- style guide boards -------------------------------------------------- */
.cb-boards{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1.2rem;
  margin-top:clamp(2rem, 4vw, 3rem);
}
.cb-board{ margin:0; }
.cb-shot{
  display:block; width:100%; padding:0; border:0;
  background:none; cursor:zoom-in; position:relative;
  font:inherit; color:inherit; text-align:inherit;
}
.cb-shot img{ display:block; width:100%; height:auto; }
.cb-board .cb-shot, .cb-wide .cb-shot{
  border:1px solid var(--cb-line);
  border-radius:12px; overflow:hidden; background:var(--cb-white);
  box-shadow:0 1px 2px rgba(16,20,32,0.03), 0 20px 44px -30px rgba(16,20,32,0.4);
  transition:border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.cb-board .cb-shot:hover, .cb-wide .cb-shot:hover{
  border-color:var(--cb-navy);
  transform:translateY(-3px);
  box-shadow:0 2px 6px rgba(16,20,32,0.05), 0 28px 56px -30px rgba(16,20,32,0.5);
}
.cb-shot:focus-visible{ outline:2px solid var(--cb-navy); outline-offset:3px;
                        border-radius:12px; }
.cb-zoom{
  position:absolute; right:0.8rem; bottom:0.8rem;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(16,20,32,0.82); color:#fff;
  opacity:0; transform:translateY(4px);
  transition:opacity 0.25s ease, transform 0.25s ease;
}
.cb-shot:hover .cb-zoom, .cb-shot:focus-visible .cb-zoom{ opacity:1; transform:none; }
.cb-board figcaption,
.cb-wide figcaption{
  margin-top:0.7rem; font-size:0.8rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--cb-muted);
}
.cb-wide figcaption{ text-transform:none; letter-spacing:0; font-weight:500; font-size:0.86rem; }
.cb-shot-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.4rem;
  aspect-ratio:1400 / 1107;
  border:1.5px dashed var(--cb-line-2); border-radius:12px;
  background:var(--cb-grey); text-align:center; padding:1rem;
}
.cb-shot-empty span{ font-size:0.92rem; font-weight:700; color:var(--cb-body); }
.cb-shot-empty small{ font-size:0.8rem; color:var(--cb-muted); }

/* ---- the full application map --------------------------------------------- */
.cb-wide{
  max-width:1420px; margin:clamp(2rem, 4vw, 3rem) auto 0; padding:0 6vw;
}
.cb-wide .cb-shot{ border-radius:16px; padding:clamp(0.8rem, 2vw, 1.6rem);
                   background:var(--cb-white); }
.cb-wide .cb-shot img{ border-radius:6px; }

/* ---- closing ----------------------------------------------------------------- */
.cb-cta{
  background:var(--cb-navy);
  color:#fff;
  padding:clamp(3.5rem, 7vw, 6rem) 0;
  text-align:center;
}
.cb-cta .cb-h2{ color:#fff; max-width:18ch; margin-left:auto; margin-right:auto; }
.cb-cta p{ color:rgba(255,255,255,0.86); max-width:52ch; margin:0 auto 2rem; }
.cb-cta .cb-actions{ justify-content:center; }
.cb-cta .cb-btn.is-primary{ background:var(--cb-gold); color:#141414; }
.cb-cta .cb-btn.is-primary:hover{ background:#C9962C; }
.cb-cta .cb-btn.is-quiet{ background:transparent; color:#fff; border-color:rgba(255,255,255,0.4); }
.cb-cta .cb-btn.is-quiet:hover{ background:rgba(255,255,255,0.1); border-color:#fff; color:#fff; }
.cb-cta .cb-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.cb-foot{ max-width:var(--cb-max); margin:0 auto; }

/* ---- reveals ------------------------------------------------------------------ */
.cb-rise{ opacity:0; transform:translateY(16px);
          transition:opacity 0.6s ease, transform 0.75s cubic-bezier(0.16,1,0.3,1); }
.cb-rise.is-in{ opacity:1; transform:none; }

/* ---- responsive --------------------------------------------------------------- */
@media (max-width:1100px){
  .cb-finds{ grid-template-columns:repeat(2, 1fr); }
  .cb-meta{ grid-template-columns:repeat(2, 1fr); }
  .cb-stages{ grid-template-columns:1fr; }
  .cb-outs{ grid-template-columns:1fr; }
  .cb-split{ grid-template-columns:1fr; }
}
/* Below this the phone goes under the copy and the pinning is switched
   off entirely - a sticky column and a scroll-driven transform buy
   nothing on a screen this size and cost a lot. */
@media (max-width:900px){
  .cb-hero{ min-height:0; padding-bottom:clamp(2rem, 6vw, 3rem); }
  .cb-hero-grid{ position:static; height:auto; grid-template-columns:1fr; }
  /* the token is a HEIGHT, so a vw value here made the phone 137px wide on
     a phone; the width is what needs capping, and the height follows it */
  .cb-phone{ animation:none; --cb-ph-h:calc(min(300px, 72vw) * 19.5 / 9); }
  .cb-screen{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .cb-screen img{ transform:none !important; }
  .cb-stage-hint{ opacity:1; }
  .cb-two{ grid-template-columns:1fr; }
  .cb-boards{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .cb-finds{ grid-template-columns:1fr; }
  .cb-meta{ grid-template-columns:1fr; }
  .cb-card{ width:180px; }
  .cb-card-screen{ height:360px; }
}

@media (prefers-reduced-motion: reduce){
  .cb-rise{ opacity:1; transform:none; transition:none; }
  /* the token is a HEIGHT, so a vw value here made the phone 137px wide on
     a phone; the width is what needs capping, and the height follows it */
  .cb-phone{ animation:none; --cb-ph-h:calc(min(300px, 72vw) * 19.5 / 9); }
  .cb-screen{ overflow-y:auto; }
  .cb-screen img{ transform:none !important; }
  .cb-btn, .cb-btn svg, .cb-nav, .cb-shot, .cb-stage-card, .cb-zoom,
  .cb-card-screen img,
  .cb-stage-hint{ transition:none; }
  .cb-btn:hover, .cb-shot:hover, .cb-stage-card:hover,
  .cb-card-btn:hover .cb-card-screen img{ transform:none; }
}

/* the deck card carries a real screenshot now, so it needs no dark plate
   behind it - just the top of the image and a readable number chip */
.fan-card .thumb.cb-thumb{
  background-color:#1D4C83;
  background-size:cover;
  background-position:top center;
  background-repeat:no-repeat;
}

/* ================================================================
   DESIGNING BETTER DIGITAL EXPERIENCES
   Black on white with one accent. The device frames and the screens
   inside them are the only colour on the page; everything around
   them is type, rule and space, so the designs stay the subject.
   ================================================================ */
.wb{
  --wb-max:1240px;
  --wb-ink:#0B0C10;
  --wb-ink-2:rgba(11,12,16,0.68);
  /* 0.62, not 0.56: at 0.56 this measured 4.48:1 on white - under AA by
     two hundredths, and it drives the nav, the step numbers and every
     small label on the page */
  --wb-ink-3:rgba(11,12,16,0.62);
  --wb-line:rgba(11,12,16,0.12);
  --wb-line-2:rgba(11,12,16,0.26);
  --wb-band:#F5F5F7;
  --wb-ac:#724EE4;          /* fills, rules, device accents */
  --wb-ai:#5731A8;          /* the same hue, safe as small text on white */
  --wb-shadow:0 1px 2px rgba(11,12,16,0.04), 0 30px 60px -34px rgba(11,12,16,0.34);
  --wb-shadow-lift:0 2px 6px rgba(11,12,16,0.05), 0 44px 80px -36px rgba(11,12,16,0.42);
  background:#fff;
  color:var(--wb-ink);
}

/* ---- reading progress -------------------------------------------- */
.wb-progress{
  position:fixed; left:0; right:0; top:69px;
  height:2px; z-index:40;
  background:rgba(11,12,16,0.06);
}
.wb-progress span{
  display:block; height:100%; width:0;
  background:var(--wb-ac);
}

/* ---- hero --------------------------------------------------------- */
.wb-hero{ padding:calc(69px + clamp(1.6rem, 3.4vw, 3rem)) 0 0; }
.wb-back{ margin:0 6vw clamp(1.8rem, 4vw, 3rem); }
.wb-hero-in{ max-width:var(--wb-max); margin:0 auto; padding:0 6vw; }
.wb-eyebrow{
  display:block;
  font-size:0.72rem; font-weight:800; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--wb-ai);
}
.wb-h1{
  font-size:clamp(2.4rem, 7vw, 5.4rem);
  font-weight:800; line-height:0.98; letter-spacing:-0.04em;
  margin:1rem 0 1.4rem; max-width:14ch; text-wrap:balance;
}
.wb-lede{
  font-size:clamp(1.02rem, 1.65vw, 1.24rem); line-height:1.6;
  color:var(--wb-ink-2); max-width:62ch; margin:0 0 1rem;
}
.wb-sub{
  font-size:0.96rem; line-height:1.55; margin:0 0 1.6rem;
  color:var(--wb-ink-3); max-width:56ch;
}
.wb-labels{ display:flex; flex-wrap:wrap; gap:0.6rem; }

.wb-tag{
  display:inline-flex; align-items:center; gap:0.45rem;
  padding:0.4rem 0.85rem; border-radius:999px;
  font-size:0.76rem; font-weight:700; letter-spacing:0.02em;
  border:1px solid var(--wb-line-2);
  color:var(--wb-ink);
  background:#fff;
}
.wb-tag::before{
  content:''; width:7px; height:7px; border-radius:2px;
  background:var(--wb-ink);
}
.wb-tag.is-revamp::before{ background:var(--wb-ac); border-radius:999px; }
.wb-tag.is-concept::before{ background:transparent; border:1.5px solid var(--wb-ac); }
.wb-tag.is-cat{
  border-color:var(--wb-line); color:var(--wb-ink-3); font-weight:600;
}
.wb-tag.is-cat::before{ display:none; }

/* ---- the hero showcase -------------------------------------------- */
.wb-hero-stage{
  position:relative;
  max-width:1320px;
  margin:clamp(2.4rem, 6vw, 5rem) auto 0;
  padding:0 6vw clamp(2rem, 4vw, 3.5rem);
  aspect-ratio:16 / 7.4;
}
.wb-hero-stage > div{ position:absolute; }
/* The laptop sits a little left of centre so it stops short of the tablet:
   with a real trading screen in the tablet, the bond-name column is the
   part that makes it readable, and a centred laptop was covering it. */
.wb-hs-browser{ left:3%; top:20%; width:36%; z-index:2; }
.wb-hs-mac{ left:21.5%; top:2%; width:52%; z-index:3; }
.wb-hs-tablet{ right:2.5%; top:12%; width:23.5%; z-index:2; }
.wb-hs-phone{ right:19%; bottom:14%; width:10.5%; z-index:4; }

/* ---- device frames -------------------------------------------------
   Drawn rather than photographed: a photo of a laptop would have to be
   colour-matched to the page and would pin the screenshot to one
   aspect ratio. These scale to any width and any artwork. */
.wb-dev{ position:relative; }
.wb-screen{
  position:relative; overflow:hidden;
  background:#fff;
}
.wb-shot{
  display:block; width:100%; height:auto;

  will-change:transform;
  animation:wb-scroll var(--dur, 22s) var(--dly, 0s) ease-in-out infinite alternate;
  animation-play-state:paused;
}
/* the screens only move while they are on screen; an animation on an
   off-screen element is not composited, but this keeps it honest */
.wb-dev.is-in .wb-shot{ animation-play-state:running; }
@keyframes wb-scroll{ to{ transform:translate3d(0, calc(var(--tr) * -1%), 0); } }

.wb-dev.is-mac{
  padding:8px 8px 8px;
  background:linear-gradient(170deg, #2B2C36, #0D0E13);
  border-radius:14px;
  box-shadow:var(--wb-shadow);
}
.wb-dev.is-mac .wb-screen{ border-radius:6px; aspect-ratio:16 / 10; }
.wb-notch{
  position:absolute; left:50%; top:8px; transform:translateX(-50%);
  width:16%; height:9px; border-radius:0 0 6px 6px;
  background:#15161C; z-index:2;
}
/* the laptop's base. Named .wb-base, not .wb-foot: the page's footer nav
   already carries .wb-foot, and an absolutely positioned 116%-wide footer
   was pushing the whole document sideways. */
.wb-base{
  position:absolute; left:50%; bottom:-10px; transform:translateX(-50%);
  /* 106%, not the 116% a real laptop base is: at the full content width
     of a project row the wider base hangs past the page gutter and gives
     the document a horizontal scrollbar */
  width:106%; height:10px;
  background:linear-gradient(#D2D3DA, #9FA0AC);
  border-radius:0 0 9px 9px;
}
.wb-base::after{
  content:''; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:13%; height:4px; border-radius:0 0 5px 5px;
  background:#8A8B97;
}

.wb-dev.is-browser{
  border-radius:12px; overflow:hidden;
  border:1px solid var(--wb-line);
  background:#fff;
  box-shadow:var(--wb-shadow);
}
.wb-chrome{
  display:flex; align-items:center; gap:6px;
  height:30px; padding:0 12px;
  background:#F1F1F4;
  border-bottom:1px solid var(--wb-line);
}
.wb-chrome .d{ width:8px; height:8px; border-radius:50%; background:#CBCBD3; }
.wb-chrome .url{
  flex:1; height:12px; margin-left:10px; border-radius:6px; background:#DEDEE5;
}
.wb-dev.is-browser .wb-screen{ aspect-ratio:16 / 10.5; }

.wb-dev.is-tablet{
  padding:10px;
  background:linear-gradient(170deg, #2B2C36, #0D0E13);
  border-radius:20px;
  box-shadow:var(--wb-shadow);
}
.wb-dev.is-tablet .wb-screen{ border-radius:10px; aspect-ratio:4 / 3; }

.wb-dev.is-phone{
  padding:6px;
  background:linear-gradient(170deg, #2B2C36, #0D0E13);
  border-radius:26px;
  box-shadow:var(--wb-shadow-lift);
}
.wb-dev.is-phone .wb-screen{ border-radius:21px; aspect-ratio:9 / 19.5; }
.wb-pill{
  position:absolute; left:50%; top:13px; transform:translateX(-50%);
  width:32%; height:8px; border-radius:999px; background:#15161C; z-index:2;
}

/* ---- in-page navigation ------------------------------------------- */
.wb-nav{
  position:sticky; top:78px; z-index:20;
  background:rgba(255,255,255,0.9);
  -webkit-backdrop-filter:saturate(1.6) blur(10px);
          backdrop-filter:saturate(1.6) blur(10px);
  border-top:1px solid var(--wb-line);
  border-bottom:1px solid var(--wb-line);
}
.wb-nav-in{
  max-width:var(--wb-max); margin:0 auto;
  padding:0 6vw;
  display:flex; gap:0.3rem; overflow-x:auto;
  scrollbar-width:none;
}
.wb-nav-in::-webkit-scrollbar{ display:none; }
.wb-nav a{
  flex:0 0 auto;
  padding:0.85rem 0.8rem;
  font-size:0.82rem; font-weight:700;
  color:var(--wb-ink-3); text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color 0.2s ease, border-color 0.2s ease;
}
.wb-nav a:hover{ color:var(--wb-ink); }
.wb-nav a.is-here{ color:var(--wb-ink); border-bottom-color:var(--wb-ac); }
.wb-nav a:focus-visible{ outline:2px solid var(--wb-ac); outline-offset:-4px; border-radius:6px; }

/* ---- section shell -------------------------------------------------- */
/* scroll-margin so a jump from the in-page nav does not park the
   section's kicker underneath the sticky bar */
.wb-sec, .wb-hero{ scroll-margin-top:128px; }
.wb-sec{ padding:clamp(3.4rem, 8vw, 7rem) 0; }
.wb-sec-in{ max-width:var(--wb-max); margin:0 auto; padding:0 6vw; }
.wb-head{ max-width:66ch; margin-bottom:clamp(2rem, 4vw, 3.2rem); }
.wb-kicker{
  display:block;
  font-size:0.7rem; font-weight:800; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--wb-ai); margin-bottom:0.9rem;
}
.wb-head h2{
  font-size:clamp(1.8rem, 4.2vw, 3.2rem);
  font-weight:800; line-height:1.04; letter-spacing:-0.035em;
  margin:0 0 1rem; text-wrap:balance;
}
.wb-head p{
  font-size:clamp(0.98rem, 1.5vw, 1.1rem); line-height:1.62;
  color:var(--wb-ink-2); margin:0;
}

/* ---- why ------------------------------------------------------------ */
.wb-why{ background:var(--wb-band); border-top:1px solid var(--wb-line); }
.wb-why-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  border-top:1px solid var(--wb-line-2);
  counter-reset:wbwhy;
}
.wb-why-list li{
  counter-increment:wbwhy;
  display:flex; gap:1rem; align-items:baseline;
  padding:1rem 1.2rem 1rem 0;
  border-bottom:1px solid var(--wb-line);
  font-size:0.98rem; line-height:1.5;
}
.wb-why-list li::before{
  content:counter(wbwhy, decimal-leading-zero);
  flex:0 0 auto;
  font-size:0.72rem; font-weight:800; letter-spacing:0.08em;
  color:var(--wb-ac);
  font-variant-numeric:tabular-nums;
}
.wb-note{
  margin:clamp(1.8rem, 4vw, 2.8rem) 0 0;
  padding-left:1.1rem;
  border-left:3px solid var(--wb-ac);
  font-size:clamp(1rem, 1.8vw, 1.22rem); line-height:1.55; font-weight:600;
  max-width:60ch;
}

/* ---- the two paths --------------------------------------------------- */
.wb-paths{
  display:grid; gap:clamp(2rem, 5vw, 4.5rem);
  grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
}
.wb-path-h{ padding-bottom:1.1rem; border-bottom:2px solid var(--wb-ink); margin-bottom:0.6rem; }
.wb-path-k{
  display:block;
  font-size:0.7rem; font-weight:800; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--wb-ac); margin-bottom:0.45rem;
}
.wb-path-h h3{
  font-size:clamp(1.15rem, 2.1vw, 1.5rem); font-weight:800; margin:0;
  letter-spacing:-0.02em;
}
.wb-steps{ list-style:none; margin:0; padding:0; }
.wb-step{
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem;
  padding:1.25rem 0;
  border-bottom:1px solid var(--wb-line);
}
.wb-step .n{
  font-size:0.78rem; font-weight:800; letter-spacing:0.06em;
  color:var(--wb-ink-3); font-variant-numeric:tabular-nums;
  padding-top:0.18rem;
}
.wb-step h4{ font-size:1.02rem; font-weight:700; margin:0 0 0.35rem; }
.wb-step p{ margin:0; font-size:0.93rem; line-height:1.55; color:var(--wb-ink-2); }

/* ---- the checklist grid ---------------------------------------------- */
.wb-consider{ background:var(--wb-band); border-top:1px solid var(--wb-line); }
.wb-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  background:var(--wb-line);
  border:1px solid var(--wb-line);
  border-radius:18px; overflow:hidden;
}
.wb-card{
  display:flex; align-items:center; gap:0.85rem;
  padding:1.3rem 1.2rem;
  background:#fff;
  font-size:0.93rem; font-weight:600; line-height:1.35;
  transition:background 0.22s ease;
}
.wb-card svg{ flex:0 0 auto; color:var(--wb-ac); }
.wb-card:hover{ background:#FAFAFC; }

/* ---- the design slider ---------------------------------------------
   One shared height and each screen at its own width, so a landing page
   and a dashboard sit in the same row without either being cropped. The
   rail is a real scroller: snap, swipe and the keyboard need no script. */
.wb-slider{ --sh:clamp(220px, 30vw, 440px); }
.wb-rail{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:max(6vw, calc((100vw - var(--wb-max)) / 2 + 6vw));
  padding:0.5rem max(6vw, calc((100vw - var(--wb-max)) / 2 + 6vw)) 1.6rem;
  scrollbar-width:none;
  cursor:grab;
  outline:none;
}
.wb-rail::-webkit-scrollbar{ display:none; }
.wb-rail:focus-visible{ box-shadow:inset 0 0 0 2px var(--wb-ac); border-radius:12px; }
.wb-rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.wb-rail.is-dragging .wb-slide-btn{ pointer-events:none; }
.wb-track{
  list-style:none; margin:0; padding:0;
  display:flex; gap:clamp(1rem, 2.4vw, 1.8rem);
  width:max-content;
}
.wb-slide{ scroll-snap-align:start; flex:0 0 auto; }
.wb-slide-btn{
  position:relative; display:block;
  padding:0; margin:0; border:0; background:none;
  font:inherit; color:inherit; cursor:zoom-in;
  border-radius:12px;
}
.wb-slide-btn:focus-visible{ outline:2px solid var(--wb-ac); outline-offset:4px; }
.wb-slide-frame{
  display:block;
  border-radius:12px; overflow:hidden;
  border:1px solid var(--wb-line);
  background:#fff;
  box-shadow:var(--wb-shadow);
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
}
.wb-slide-frame .wb-chrome{ height:26px; }
.wb-slide-frame img{
  display:block;
  height:var(--sh); width:auto;
  user-select:none; -webkit-user-drag:none;
}
.wb-slide-btn:hover .wb-slide-frame{
  transform:translateY(-4px);
  box-shadow:var(--wb-shadow-lift);
}
.wb-zoom{
  position:absolute; right:12px; top:38px;
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(11,12,16,0.82); color:#fff;
  opacity:0; transform:scale(0.9);
  transition:opacity 0.22s ease, transform 0.22s ease;
}
.wb-slide-btn:hover .wb-zoom, .wb-slide-btn:focus-visible .wb-zoom{ opacity:1; transform:none; }
.wb-slide-cap{
  display:flex; gap:0.8rem; align-items:baseline;
  margin-top:1rem; padding-right:1rem;
}
.wb-slide-cap .no{
  font-size:0.74rem; font-weight:800; letter-spacing:0.06em;
  color:var(--wb-ai); font-variant-numeric:tabular-nums;
}
.wb-slide-cap h3{ margin:0 0 0.2rem; font-size:1rem; font-weight:700; letter-spacing:-0.01em; }
.wb-slide-cap p{ margin:0; font-size:0.84rem; color:var(--wb-ink-3); }

.wb-slider-foot{
  max-width:var(--wb-max); margin:0.4rem auto 0; padding:0 6vw;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.wb-pos{
  margin:0; font-size:0.86rem; font-weight:700; letter-spacing:0.06em;
  color:var(--wb-ink-3); font-variant-numeric:tabular-nums;
}
.wb-pos span{ color:var(--wb-ink); }
.wb-arrows{ display:flex; gap:0.6rem; }
.wb-arrow{
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--wb-line-2); background:#fff; color:var(--wb-ink);
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wb-arrow:hover:not(:disabled){ background:var(--wb-ink); border-color:var(--wb-ink); color:#fff; }
.wb-arrow:disabled{ opacity:0.35; cursor:default; }
.wb-arrow:focus-visible{ outline:2px solid var(--wb-ac); outline-offset:3px; }

/* ---- speed ------------------------------------------------------------ */
.wb-speed{ background:var(--wb-band); border-top:1px solid var(--wb-line); }
.wb-cwv{
  display:grid; gap:1px;
  grid-template-columns:repeat(3, 1fr);
  background:var(--wb-line);
  border:1px solid var(--wb-line);
  border-radius:18px; overflow:hidden;
  margin-bottom:clamp(2rem, 4vw, 3rem);
}
.wb-cwv-lbl{
  grid-column:1 / -1; margin:0;
  padding:0.85rem 1.3rem;
  background:#fff;
  font-size:0.72rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--wb-ink-3);
}
.wb-cwv-t{ background:#fff; padding:1.4rem 1.3rem 1.5rem; }
.wb-cwv-t .k{
  display:inline-block;
  font-size:0.72rem; font-weight:800; letter-spacing:0.1em;
  padding:0.22rem 0.55rem; border-radius:6px;
  background:var(--wb-ink); color:#fff;
}
.wb-cwv-t .v{
  display:block; margin:0.8rem 0 0.2rem;
  font-size:clamp(1.8rem, 3.6vw, 2.6rem); font-weight:800; letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;
}
.wb-cwv-t .n{ display:block; font-size:0.9rem; font-weight:700; }
.wb-cwv-t p{ margin:0.4rem 0 0; font-size:0.88rem; line-height:1.5; color:var(--wb-ink-2); }

/* two columns, not auto-fit: ten actions into three leaves one orphan */
.wb-acts{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1rem;
  grid-template-columns:repeat(2, 1fr);
}
@media (max-width:760px){ .wb-acts{ grid-template-columns:1fr; } }
.wb-act{
  display:flex; gap:1rem; align-items:flex-start;
  padding:1.3rem 1.3rem 1.4rem;
  background:#fff;
  border:1px solid var(--wb-line);
  border-radius:16px;
}
.wb-act .i{
  flex:0 0 auto;
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(114,78,228,0.09); color:var(--wb-ac);
}
.wb-act h4{ margin:0.1rem 0 0.4rem; font-size:1rem; font-weight:700; display:flex; gap:0.5rem; }
.wb-act h4 .no, .wb-seo-col h3 .no{
  font-size:0.74rem; font-weight:800; color:var(--wb-ai);
  font-variant-numeric:tabular-nums; padding-top:0.18rem;
}
.wb-act p{ margin:0; font-size:0.9rem; line-height:1.55; color:var(--wb-ink-2); }
.wb-act code, .wb-seo-col code{
  font-family:ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size:0.84em; padding:0.08em 0.35em; border-radius:5px;
  white-space:nowrap;
  background:rgba(11,12,16,0.06); color:var(--wb-ink);
}

/* ---- SEO ---------------------------------------------------------------- */
.wb-seo-grid{
  display:grid; gap:clamp(1.6rem, 3.6vw, 3rem);
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
.wb-seo-col h3{
  display:flex; gap:0.6rem; align-items:baseline;
  margin:0 0 0.4rem; padding-bottom:1rem;
  border-bottom:2px solid var(--wb-ink);
  font-size:clamp(1.1rem, 1.9vw, 1.35rem); font-weight:800; letter-spacing:-0.02em;
}
.wb-seo-col ul{ list-style:none; margin:0; padding:0; }
.wb-seo-col li{
  display:flex; gap:0.75rem; align-items:flex-start;
  padding:1.05rem 0;
  border-bottom:1px solid var(--wb-line);
}
.wb-seo-col li svg{ flex:0 0 auto; color:var(--wb-ac); margin-top:3px; }
.wb-seo-col h4{ margin:0 0 0.3rem; font-size:0.98rem; font-weight:700; }
.wb-seo-col p{ margin:0; font-size:0.9rem; line-height:1.55; color:var(--wb-ink-2); }

/* ---- principles ---------------------------------------------------------- */
.wb-principles{ background:var(--wb-ink); color:#fff; }
.wb-principles .wb-kicker{ color:#C9A9F5; }
.wb-principles .wb-head h2{ color:#fff; }
.wb-prs{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:18px; overflow:hidden;
}
/* seven into three or two columns leaves empty cells, and the grid's
   1px background shows through them as a grey block. The last one
   takes the whole row instead, at any column count. */
.wb-pr:last-child{ grid-column:1 / -1; }
.wb-pr{
  display:flex; gap:1rem; align-items:flex-start;
  padding:1.6rem 1.4rem;
  background:var(--wb-ink);
}
.wb-pr .n{
  font-size:0.72rem; font-weight:800; letter-spacing:0.08em;
  color:#C9A9F5; font-variant-numeric:tabular-nums; padding-top:0.28rem;
}
.wb-pr p{
  margin:0;
  font-size:clamp(1rem, 1.8vw, 1.22rem); line-height:1.35;
  font-weight:700; letter-spacing:-0.02em; color:#fff;
}

/* ---- the close ------------------------------------------------------------ */
.wb-end{
  padding:clamp(3.4rem, 8vw, 7rem) 6vw;
  border-top:1px solid var(--wb-line);
}
.wb-end-in{ max-width:900px; margin:0 auto; text-align:center; }
.wb-end h2{
  font-size:clamp(2rem, 5.4vw, 4rem);
  font-weight:800; line-height:1.02; letter-spacing:-0.04em;
  margin:0 0 1.2rem; text-wrap:balance;
}
.wb-end > .wb-end-in > p{
  margin:0 auto; max-width:62ch;
  font-size:clamp(1rem, 1.6vw, 1.15rem); line-height:1.62; color:var(--wb-ink-2);
}
.wb-cta{
  margin-top:clamp(2.2rem, 5vw, 3.6rem);
  padding-top:clamp(2rem, 4vw, 3rem);
  border-top:1px solid var(--wb-line);
}
.wb-cta-q{
  margin:0 0 1.2rem;
  font-size:clamp(1.15rem, 2.4vw, 1.7rem); font-weight:800; letter-spacing:-0.03em;
}
.wb-btn{
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:0.95rem 1.7rem; border-radius:999px;
  background:var(--wb-ink); color:#fff; text-decoration:none;
  font-size:0.98rem; font-weight:700;
  transition:background 0.22s ease, transform 0.22s ease;
}
.wb-btn:hover{ background:#000; transform:translateY(-2px); }
.wb-btn:focus-visible{ outline:2px solid var(--wb-ac); outline-offset:3px; }
.wb-btn svg{ transition:transform 0.25s ease; }
.wb-btn:hover svg{ transform:translateX(3px); }
.wb-foot.cs-footer-nav{ border-top:1px solid var(--wb-line); }

/* the deck thumbnail on the home page now shows a layout, not a gradient */
.wb-thumb{ background-size:cover; background-position:top center; }

/* ---- reveals ---------------------------------------------------------- */
.wb-rise{ opacity:0; transform:translateY(16px); }
.wb-rise.is-in{
  opacity:1; transform:none;
  transition:opacity 0.6s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

/* ---- narrower ---------------------------------------------------------- */
@media (max-width:760px){
  .wb-cwv{ grid-template-columns:1fr; }
  .wb-slider{ --sh:clamp(190px, 52vw, 300px); }
}
@media (max-width:760px){
  /* the four-device cluster does not survive a phone: the two that carry
     the most information stay, the rest go */
  .wb-hero-stage{ aspect-ratio:16 / 12.5; padding-bottom:1.5rem; }
  .wb-hs-browser, .wb-hs-tablet{ display:none; }
  .wb-hs-mac{ left:0; top:0; width:88%; }
  .wb-hs-phone{ right:2%; bottom:0; width:20%; }
  .wb-why-list li{ padding-right:0; }
  .wb-nav{ top:70px; }
  .wb-progress{ top:61px; }
}

@media (prefers-reduced-motion: reduce){
  .wb-shot{ animation:none; }
  .wb-rise{ opacity:1; transform:none; transition:none; }
  .wb-btn, .wb-card, .wb-nav a, .wb-btn svg, .wb-slide-frame, .wb-zoom, .wb-arrow{ transition:none; }
  .wb-btn:hover, .wb-slide-btn:hover .wb-slide-frame{ transform:none; }
  .wb-rail{ scroll-behavior:auto; }
}

/* ---- the 1Exchange pages: whole pages, auto-playing ------------------- */
.wb-newpages{ padding-bottom:clamp(2.5rem, 5vw, 4rem); }
.wb-pages{ --sg-gap:clamp(2.2rem, 4vw, 4rem); margin-top:clamp(1.6rem, 3vw, 2.4rem); max-width:1680px; }
.wb-pages .sg-item{
  height:clamp(520px, 88vh, 1020px);
  display:flex; flex-direction:column; text-align:left; font:inherit;
  background:#fff; border:1px solid rgba(13,9,30,0.10); border-radius:14px;
  box-shadow:0 2px 6px rgba(13,9,30,0.06), 0 26px 50px -26px rgba(13,9,30,0.45);
}
.wb-pages .sg-item img{ height:auto; width:auto; max-height:calc(100% - 64px); flex:0 1 auto; }
.wb-pages .wb-pg-cap{
  display:block; width:0; min-width:100%; box-sizing:border-box;
  padding:0.7rem 0.9rem; border-top:1px solid rgba(13,9,30,0.08);
  font-size:0.84rem; line-height:1.35; color:rgba(13,9,30,0.62);
}
.wb-pages .wb-pg-cap b{ display:block; color:#0D091E; font-weight:700; }
.wb-pages .sg-item:hover, .wb-pages .sg-item:focus-visible{
  box-shadow:0 4px 10px rgba(13,9,30,0.08), 0 34px 60px -28px rgba(13,9,30,0.5); }
.wb-pages .sg-item:focus-visible{ outline-color:#724EE4; }
@media (max-width:820px){ .wb-pages{ --sg-gap:1.4rem; } .wb-pages .sg-item{ height:clamp(380px, 64vh, 620px); } }

/* ================= CASE STUDIES PAGE ==============================
   Five rows, alternating sides. The visual half is a small collage
   rather than one big frame: a lead image with three smaller slots
   pinned around it at different sizes, so real screenshots land as a
   arrangement instead of a grid. */
.wk{
  --wk-max:1240px;
  background:var(--sc-ground, #F8F7FA);
  color:var(--sc-ink, #0D091E);
}
/* --ac is the FILL (borders, rules, accents); --ai is the same hue taken
   dark enough to clear 4.5:1 as small text, including over the tinted chip
   background. Using --ac for a label measured as low as 3.65:1. */
.wk .a-a{ --ac:#724EE4; --ai:#5731A8; --as:rgba(114,78,228,0.09); }
.wk .a-b{ --ac:#2E6FD9; --ai:#1B54B3; --as:rgba(46,111,217,0.09); }
.wk .a-c{ --ac:#0E8A5F; --ai:#046A47; --as:rgba(14,138,95,0.09); }
.wk .a-d{ --ac:#C0632B; --ai:#8A4107; --as:rgba(192,99,43,0.09); }
.wk .a-e{ --ac:#A03BB8; --ai:#872D9A; --as:rgba(160,59,184,0.09); }

/* ---- hero ---------------------------------------------------------- */
.wk-hero{ padding:calc(69px + clamp(2rem, 4vw, 3.5rem)) 0 clamp(2rem, 4vw, 3.5rem); }
.wk-back{ margin:0 6vw 2.4rem; }
.wk-hero-inner{ max-width:var(--wk-max); margin:0 auto; padding:0 6vw; }
.wk-eyebrow{
  font-size:0.72rem; font-weight:800; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--sc-orchid, #A03BB8);
}
.wk-h1{
  font-size:clamp(2.1rem, 5vw, 3.8rem);
  font-weight:800; letter-spacing:-0.035em; line-height:1.04;
  margin:0.9rem 0 1.2rem; max-width:18ch; text-wrap:balance;
}
.wk-lede{
  font-size:clamp(1rem, 1.7vw, 1.2rem); line-height:1.6;
  color:var(--sc-body, rgba(13,9,30,0.72)); max-width:62ch; margin:0;
  text-wrap:pretty;
}

/* ---- rows ----------------------------------------------------------- */
.wk-rows{ max-width:var(--wk-max); margin:0 auto; padding:0 6vw clamp(2rem, 5vw, 4rem); }
.wk-row{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:clamp(1.8rem, 4vw, 4rem);
  align-items:center;
  padding:clamp(2.4rem, 5vw, 4.5rem) 0;
  border-top:1px solid var(--sc-line, rgba(13,9,30,0.09));
}
.wk-row:first-child{ border-top:0; }
/* the odd rows put the text first in the source so the reading order is
   always name-then-visual, and swap sides visually only */
.wk-row.is-right .wk-visual{ order:2; }

/* ---- the collage ----------------------------------------------------- */
.wk-visual{
  position:relative;
  aspect-ratio:4 / 3.2;
  min-height:300px;
}
.wk-lead, .wk-slot{
  position:absolute;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0.45rem; text-align:center; padding:0.8rem;
  border-radius:16px;
  border:1.5px dashed rgba(13,9,30,0.24);
  background:
    repeating-linear-gradient(135deg, rgba(13,9,30,0.02) 0 10px, transparent 10px 20px),
    #fff;
  color:var(--sc-muted, rgba(13,9,30,0.62));
  box-shadow:0 1px 2px rgba(13,9,30,0.03), 0 18px 44px -28px rgba(13,9,30,0.3);
}
.wk-lead{
  left:0; top:0; right:22%; bottom:20%;
  border-radius:20px;
  border-color:var(--ac);
  background:
    repeating-linear-gradient(135deg, rgba(13,9,30,0.02) 0 10px, transparent 10px 20px),
    var(--as), #fff;
}
.wk-lead .lb{ font-size:0.9rem; font-weight:700; color:var(--sc-ink, #0D091E); }
.wk-slot .lb{ font-size:0.74rem; font-weight:700; }
.wk-lead .ic, .wk-slot .ic{ opacity:0.5; }
/* three slots, deliberately unaligned with each other and with the lead */
.wk-slot.s1{ right:0; top:12%; width:34%; height:30%; }
.wk-slot.s2{ right:8%; bottom:0; width:40%; height:34%; }
.wk-slot.s3{ left:10%; bottom:0; width:26%; height:22%; }

/* ---- text ------------------------------------------------------------- */
.wk-meta{ display:flex; align-items:center; gap:0.7rem; margin-bottom:0.9rem; }
.wk-kind{
  font-size:0.7rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ai);
}
.wk-year{
  font-size:0.74rem; font-weight:700; color:var(--sc-muted, rgba(13,9,30,0.62));
  padding-left:0.7rem; border-left:1px solid var(--sc-line-2, rgba(13,9,30,0.18));
  font-variant-numeric:tabular-nums;
}
.wk-name{
  font-size:clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight:800; letter-spacing:-0.03em; line-height:1.12;
  margin:0 0 0.9rem; text-wrap:balance;
}
.wk-sum{
  font-size:0.98rem; line-height:1.65; margin:0 0 1.6rem;
  color:var(--sc-body, rgba(13,9,30,0.72)); max-width:54ch; text-wrap:pretty;
}
.wk-group{ margin-bottom:1rem; }
.wk-lbl{
  display:block; margin-bottom:0.5rem;
  font-size:0.68rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--sc-muted, rgba(13,9,30,0.62));
}
.wk-chips{ display:flex; flex-wrap:wrap; gap:0.4rem; }
.wk-chip{
  padding:0.35rem 0.75rem; border-radius:999px;
  font-size:0.78rem; font-weight:600; line-height:1.3;
}
.wk-chip.t-tool{ background:#fff; border:1px solid var(--sc-line, rgba(13,9,30,0.09));
                 color:var(--sc-ink, #0D091E); }
.wk-chip.t-tech{ background:var(--as); color:var(--ai); }
.wk-cta{
  display:inline-flex; align-items:center; gap:0.5rem;
  margin-top:0.9rem;
  font-size:0.92rem; font-weight:700; text-decoration:none;
  color:var(--sc-ink, #0D091E);
  border-bottom:2px solid var(--ac);
  padding-bottom:0.25rem;
  transition:gap 0.25s ease, color 0.25s ease;
}
.wk-cta:hover{ gap:0.85rem; color:var(--ai); }
.wk-cta:focus-visible{ outline:2px solid var(--ac); outline-offset:4px; }

/* ---- archive ---------------------------------------------------------- */
.wk-archive{
  max-width:var(--wk-max); margin:0 auto;
  padding:clamp(2rem, 4vw, 3rem) 6vw clamp(2.5rem, 5vw, 4rem);
  border-top:1px solid var(--sc-line, rgba(13,9,30,0.09));
}
.wk-arch-h{
  font-size:0.72rem; font-weight:800; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--sc-muted, rgba(13,9,30,0.62)); margin:0 0 1.1rem;
}
.wk-arch-grid{ display:flex; flex-wrap:wrap; gap:0.7rem; }
.wk-arch-grid a{
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:0.8rem 1.2rem; border-radius:999px;
  background:#fff; border:1px solid var(--sc-line, rgba(13,9,30,0.09));
  text-decoration:none; color:var(--sc-ink, #0D091E);
  font-size:0.92rem; font-weight:700;
  box-shadow:var(--sc-shadow, 0 18px 48px -26px rgba(13,9,30,0.28));
  transition:border-color 0.25s ease, transform 0.25s ease;
}
.wk-arch-grid a em{
  font-style:normal; font-weight:600; font-size:0.8rem;
  color:var(--sc-muted, rgba(13,9,30,0.62));
}
.wk-arch-grid a:hover{ border-color:var(--sc-purple-bright, #724EE4); transform:translateY(-2px); }
.wk-foot{ max-width:var(--wk-max); margin:0 auto; }

@media (max-width:900px){
  .wk-row{ grid-template-columns:1fr; gap:1.6rem; }
  .wk-row.is-right .wk-visual{ order:0; }
  .wk-visual{ aspect-ratio:4 / 3; min-height:0; }
}
@media (max-width:560px){
  .wk-visual{ aspect-ratio:1 / 1; }
  .wk-lead{ right:26%; bottom:26%; }
  .wk-slot.s1{ width:38%; height:28%; }
  .wk-slot.s2{ width:44%; height:30%; }
  .wk-slot.s3{ width:30%; height:20%; }
}
@media (prefers-reduced-motion: reduce){
  .wk-cta, .wk-arch-grid a{ transition:none; }
  .wk-arch-grid a:hover{ transform:none; }
}


/* ---- the screen showcase: one large frame, thumbnails beneath ---------- */
.wk-visual:has(.wk-show){ aspect-ratio:auto; min-height:0; min-width:0; }
.wk-show, .wk-thumbs{ min-width:0; }
.wk-show{
  padding:clamp(0.9rem, 2vw, 1.4rem);
  border-radius:24px;
  background:
    radial-gradient(120% 80% at 0% 0%, var(--as), transparent 60%),
    radial-gradient(90% 70% at 100% 100%, var(--as), transparent 60%),
    #fff;
  border:1px solid rgba(13,9,30,0.08);
  box-shadow:0 1px 2px rgba(13,9,30,0.04), 0 30px 60px -40px rgba(13,9,30,0.35);
}
.wk-stage{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:16 / 10; border-radius:14px;
  background:#fff;
  border:1px solid rgba(13,9,30,0.10);
  box-shadow:0 2px 6px rgba(13,9,30,0.05), 0 24px 44px -26px rgba(13,9,30,0.4);
  transition:transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
}
.wk-stage:hover{ transform:translateY(-3px);
  box-shadow:0 4px 10px rgba(13,9,30,0.06), 0 32px 56px -28px rgba(13,9,30,0.45); }
.wk-stage:focus-visible{ outline:2px solid var(--ac); outline-offset:4px; }
.wk-main{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:opacity 0.14s ease; }
.wk-stage.is-swapping .wk-main{ opacity:0; }
/* phone screens sit upright in the frame, like a device on a desk */
.wk-stage.m-p{ background:var(--as), #F4F2F8; background-color:#F4F2F8; }
.wk-stage.m-p .wk-main{
  width:auto; height:88%; margin:6% auto 0; object-fit:cover; object-position:top;
  aspect-ratio:0.52; border-radius:18px 18px 0 0;
  box-shadow:0 0 0 6px #0D091E, 0 24px 40px -18px rgba(13,9,30,0.5);
}
.wk-thumbs{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0.6rem; margin-top:0.8rem; }
.wk-th{
  position:relative; padding:0; margin:0; cursor:pointer; overflow:hidden;
  aspect-ratio:16 / 10; border-radius:9px; background:#fff;
  border:1px solid rgba(13,9,30,0.10);
  opacity:0.72; transition:opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.wk-th img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center; }
.wk-th.m-p{ background:#F4F2F8; }
.wk-th.m-p img{ width:auto; height:100%; margin:0 auto; aspect-ratio:0.52; }
.wk-th:hover{ opacity:1; transform:translateY(-2px); }
.wk-th.is-on{ opacity:1; border-color:var(--ac); box-shadow:0 0 0 2px var(--ac); }
.wk-th:focus-visible{ outline:2px solid var(--ac); outline-offset:3px; }
/* a thin timer along the current thumbnail while it plays */
.wk-th::after{ content:""; position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--ac); }
.wk-show.is-playing .wk-th.is-on::after{ animation:wk-timer var(--wk-dur, 3.8s) linear forwards; }
.wk-show.is-held .wk-th.is-on::after{ animation-play-state:paused; }
@keyframes wk-timer{ to{ width:100%; } }
@media (max-width:560px){
  .wk-show{ padding:0.7rem; border-radius:18px; }
  .wk-thumbs{ gap:0.4rem; }
}
@media (prefers-reduced-motion: reduce){
  .wk-stage, .wk-main, .wk-th{ transition:none; }
  .wk-th::after{ display:none; }
  .wk-stage:hover, .wk-th:hover{ transform:none; }
}

/* ================= MY RESUME ======================================
   A document page, so it is built like one: a narrow header, the two
   actions, then the sheet itself on a tinted ground so the white page
   reads as paper rather than as the background. */
.rs{
  --rs-max:980px;
  background:var(--sc-ground, #F8F7FA);
  color:var(--sc-ink, #0D091E);
}
.rs-hero{ padding:calc(69px + clamp(2rem, 4vw, 3.2rem)) 0 clamp(1.6rem, 3vw, 2.4rem); }
.rs-back{ margin:0 6vw 2.2rem; }
.rs-hero-inner{ max-width:var(--rs-max); margin:0 auto; padding:0 6vw; }
.rs-eyebrow{
  font-size:0.72rem; font-weight:800; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--sc-orchid, #A03BB8);
}
.rs-h1{
  font-size:clamp(2.1rem, 5vw, 3.4rem);
  font-weight:800; letter-spacing:-0.035em; line-height:1.04;
  margin:0.8rem 0 0.9rem;
}
.rs-lede{
  font-size:clamp(1rem, 1.6vw, 1.14rem); line-height:1.6;
  color:var(--sc-body, rgba(13,9,30,0.72)); max-width:58ch; margin:0 0 1.8rem;
  text-wrap:pretty;
}

/* ---- the two actions ------------------------------------------------ */
.rs-actions{ display:flex; flex-wrap:wrap; gap:0.7rem; }
.rs-btn{
  display:inline-flex; align-items:center; gap:0.55rem;
  padding:0.82rem 1.3rem;
  border-radius:999px;
  font:inherit; font-size:0.95rem; font-weight:700;
  text-decoration:none; cursor:pointer;
  transition:transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.rs-btn-a{
  background:var(--sc-purple-bright, #724EE4); color:#fff; border:1px solid transparent;
  box-shadow:0 1px 2px rgba(13,9,30,0.06), 0 16px 34px -20px rgba(114,78,228,0.7);
}
.rs-btn-a:hover{ background:var(--sc-purple, #4A2AA8); transform:translateY(-2px); }
.rs-btn-b{
  background:transparent; color:var(--sc-ink, #0D091E);
  border:1px solid var(--sc-line-2, rgba(13,9,30,0.18));
}
.rs-btn-b:hover{ background:rgba(13,9,30,0.04); transform:translateY(-2px); }
.rs-btn:focus-visible{ outline:2px solid var(--sc-purple-bright, #724EE4); outline-offset:3px; }
/* a lightened pill put white on white-over-purple and measured 3.54:1;
   darkening the button underneath instead takes it to 8.8:1 */
.rs-size{
  font-size:0.74rem; font-weight:700; letter-spacing:0.04em;
  padding:0.16rem 0.5rem; border-radius:999px;
  background:rgba(13,9,30,0.3);
}

/* ---- the fact strip -------------------------------------------------- */
.rs-facts{
  display:grid; gap:1.1rem 2rem;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  margin:2.2rem 0 0; padding:1.4rem 0 0;
  border-top:1px solid var(--sc-line, rgba(13,9,30,0.09));
}
.rs-fact dt{
  font-size:0.68rem; font-weight:800; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--sc-muted, rgba(13,9,30,0.62)); margin-bottom:0.35rem;
}
.rs-fact dd{ margin:0; font-size:0.95rem; line-height:1.45; font-weight:600; }

/* ---- the sheet ------------------------------------------------------- */
.rs-sheet-wrap{ max-width:var(--rs-max); margin:0 auto; padding:clamp(1.4rem, 3vw, 2.4rem) 6vw 0; }
.rs-sheet{
  margin:0;
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--sc-line, rgba(13,9,30,0.09));
  box-shadow:var(--sc-shadow, 0 1px 2px rgba(13,9,30,0.04), 0 18px 48px -26px rgba(13,9,30,0.28));
}
.rs-sheet img{ display:block; width:100%; height:auto; }
.rs-note{
  margin:1rem 0 0;
  font-size:0.86rem; line-height:1.55;
  color:var(--sc-muted, rgba(13,9,30,0.62));
}
.rs-foot{ margin-top:clamp(2rem, 4vw, 3rem); }

@media (prefers-reduced-motion: reduce){
  .rs-btn{ transition:none; }
  .rs-btn:hover{ transform:none; }
}

/* ---- the torn edge over the hero ----------------------------------
   The hero image is clipped flat by its section's overflow, and this
   strip is lifted so the torn line hides that cut. The lift is not a
   number chosen here: the build measures the artwork's alpha, finds the
   lowest dip of the torn line, and writes --sep-lift onto the element.
   Percentage margins resolve against width, and so does the scaled
   image height, so one figure holds at every viewport size.

   The background has to stay transparent - a solid one would paint a
   rectangle over the statue instead of letting the artwork's own alpha
   do the cutting. */
.separator{
  position:relative;
  z-index:3;
  margin-top:var(--sep-lift, -10.5%);
  background:transparent;
  pointer-events:none;
}
.separator img{ width:100%; height:auto; display:block; }

/* the brand is an anchor now, so it picks up the default link underline */
a.brand{ text-decoration:none; color:inherit; }
a.brand:focus-visible{ outline:2px solid var(--sc-purple-bright, #724EE4); outline-offset:6px;
                       border-radius:12px; }

/* ================= TESTIMONIALS ==================================== */
.ts{
  /* section rhythm: 2.5rem top and bottom across the home page */
  padding:2.5rem 6vw;
  background:var(--sc-surface, #fff);
  border-top:1px solid var(--sc-line, rgba(13,9,30,0.09));
}
.ts-inner{ max-width:1240px; margin:0 auto; }
.ts-head{ max-width:640px; margin-bottom:clamp(1.4rem, 3vw, 2.2rem); }
.ts-eyebrow{
  font-size:0.72rem; font-weight:800; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--sc-orchid, #A03BB8);
}
/* one line, not two: the heading is allowed past the 640px measure the
   rest of the block keeps, and the size is tied to the viewport so it
   still fits when there is less of it. Below 760px it wraps again -
   nothing sensible fits a phone on one line. */
.ts-title{
  font-size:clamp(1.5rem, 3.15vw, 2.5rem);
  font-weight:800; letter-spacing:-0.03em; line-height:1.15;
  margin:0.7rem 0 0.8rem; text-wrap:balance;
}
@media (min-width:760px){
  .ts-title{ max-width:none; width:max-content; white-space:nowrap; }
}
.ts-sub{
  font-size:1.02rem; line-height:1.6; margin:0;
  color:var(--sc-body, rgba(13,9,30,0.72)); text-wrap:pretty;
}
/* the section is honest about what it is until real quotes replace these */
.ts-flag{
  margin:1.2rem 0 0;
  padding:0.8rem 1rem;
  border-radius:12px;
  border:1px dashed rgba(13,9,30,0.26);
  background:rgba(13,9,30,0.03);
  font-size:0.86rem; line-height:1.55;
  color:var(--sc-body, rgba(13,9,30,0.72));
}
.ts-flag b{ color:var(--sc-ink, #0D091E); }

/* Five cards: a grid leaves a lone orphan on the second row, so they flow
   and centre instead - three, then two under the middle of them. */
.ts-grid{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:1rem; align-items:stretch;
}
.ts-card{ flex:1 1 320px; max-width:390px; }
.ts-card{
  margin:0;
  display:flex; flex-direction:column; gap:1.2rem;
  padding:clamp(1.4rem, 2.4vw, 1.9rem);
  border-radius:22px;
  background:var(--sc-ground, #F8F7FA);
  border:1px solid var(--sc-line, rgba(13,9,30,0.09));
  position:relative;
  transition:transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
}
.ts-card::before{
  content:'“';
  position:absolute; top:0.4rem; right:1.1rem;
  font-size:4.2rem; line-height:1; font-weight:800;
  color:var(--qc, rgba(114,78,228,0.16));
  pointer-events:none;
}
.ts-card:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 6px rgba(13,9,30,0.04), 0 26px 54px -30px rgba(13,9,30,0.34);
}
/* --ac tints the avatar ring and the quote mark; --ai is the text-safe
   version of the same hue, for the role line */
.ts-card.q-a{ --qc:rgba(114,78,228,0.18); --ac:#724EE4; --ai:#5731A8; }
.ts-card.q-b{ --qc:rgba(46,111,217,0.18);  --ac:#2E6FD9; --ai:#1B54B3; }
.ts-card.q-c{ --qc:rgba(14,138,95,0.18);   --ac:#0E8A5F; --ai:#046A47; }
.ts-card.q-d{ --qc:rgba(192,99,43,0.18);   --ac:#C0632B; --ai:#8A4107; }
.ts-card.q-e{ --qc:rgba(160,59,184,0.18);  --ac:#A03BB8; --ai:#872D9A; }

.ts-card blockquote{
  margin:0; position:relative; z-index:1;
  font-size:1rem; line-height:1.62;
  color:var(--sc-ink, #0D091E);
  text-wrap:pretty;
}
.ts-card figcaption{
  display:flex; align-items:center; gap:0.8rem;
  padding-top:1rem;
  border-top:1px solid var(--sc-line, rgba(13,9,30,0.09));
  margin-top:auto;
}
/* a dashed ring rather than a photograph: there is no real person behind
   this card yet, and a stock face would imply there is */
.ts-card .av{
  flex:0 0 auto;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1.5px dashed rgba(13,9,30,0.28);
  background:#fff;
  color:var(--ac);
}
.ts-card .who{ display:flex; flex-direction:column; gap:0.15rem; min-width:0; }
.ts-card .nm{
  font-size:0.9rem; font-weight:700;
  color:var(--sc-muted, rgba(13,9,30,0.62));
  border-bottom:1px dashed rgba(13,9,30,0.3);
  align-self:flex-start;
}
.ts-card .rl{ font-size:0.8rem; font-weight:600; color:var(--ai); }

/* the deck's single call to action, replacing the two project pills */
.fan-cta{ display:flex; justify-content:center; margin-top:clamp(1.5rem, 3vw, 2.5rem); }
.fan-cta .sc-btn svg{ transition:transform 0.25s ease; }
.fan-cta .sc-btn:hover svg{ transform:translateX(3px); }

/* ================= FOOTER ========================================== */
.ft{
  background:#0D091E;
  color:#fff;
  padding:clamp(3rem, 6vw, 5rem) 6vw clamp(1.6rem, 3vw, 2.4rem);
}
.ft-inner{ max-width:1240px; margin:0 auto; }
.ft-top{
  display:grid; gap:clamp(2rem, 5vw, 4rem);
  grid-template-columns:1.1fr 1.4fr;
  padding-bottom:clamp(2rem, 4vw, 3rem);
}
.ft-say{
  font-size:clamp(1.4rem, 2.6vw, 2rem);
  font-weight:800; letter-spacing:-0.03em; line-height:1.15;
  margin:0 0 1.4rem; color:#fff; max-width:16ch; text-wrap:balance;
}
.ft-name{ margin:0; font-size:1rem; font-weight:700; color:#fff; }
.ft-role{ margin:0.25rem 0 1.1rem; font-size:0.9rem; color:rgba(255,255,255,0.68); }
.ft-status{
  display:inline-flex; align-items:center; gap:0.55rem;
  padding:0.45rem 0.9rem; border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.16);
  font-size:0.82rem; font-weight:600; color:#fff;
}
.ft-status .dot{
  width:7px; height:7px; border-radius:50%;
  background:#4ADE80; box-shadow:0 0 0 4px rgba(74,222,128,0.18);
}

.ft-cols{ display:grid; gap:1.6rem; grid-template-columns:repeat(3, 1fr); }
.ft-col{ display:flex; flex-direction:column; gap:0.6rem; }
.ft-lbl{
  font-size:0.68rem; font-weight:800; letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(255,255,255,0.5); margin-bottom:0.2rem;
}
.ft-col a{
  color:rgba(255,255,255,0.84);
  text-decoration:none; font-size:0.92rem; line-height:1.4;
  transition:color 0.22s ease;
  align-self:flex-start;
}
.ft-col a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.ft-col a:focus-visible{ outline:2px solid #A77BFF; outline-offset:3px; border-radius:4px; }
.ft-social{ display:inline-flex; align-items:center; gap:0.55rem; }

.ft-base{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,0.14);
}
.ft-base p{ margin:0; font-size:0.84rem; color:rgba(255,255,255,0.6); }
.ft-top-link{
  display:inline-flex; align-items:center; gap:0.5rem;
  color:#fff; text-decoration:none; font-size:0.86rem; font-weight:700;
  padding:0.5rem 0.95rem; border-radius:999px;
  border:1px solid rgba(255,255,255,0.2);
  transition:background 0.22s ease;
}
.ft-top-link:hover{ background:rgba(255,255,255,0.1); }
.ft-top-link:focus-visible{ outline:2px solid #A77BFF; outline-offset:3px; }

@media (max-width:860px){
  .ft-top{ grid-template-columns:1fr; }
  .ft-cols{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:520px){
  .ft-cols{ grid-template-columns:1fr; }
  .ft-base{ justify-content:flex-start; }
}
@media (prefers-reduced-motion: reduce){
  .ts-card, .ft-col a, .ft-top-link, .fan-cta .sc-btn svg{ transition:none; }
  .ts-card:hover{ transform:none; }
}

/* a quote with no attribution yet: the blockquote carries the card on its own */
.ts-card.no-cap blockquote{ margin-bottom:0; padding-bottom:0; border-bottom:0; }

/* the wordmark: the name alone, in the display face */
.brand .role .sig{
  font-family:"Manufacturing Consent", "Plus Jakarta Sans", sans-serif;
  font-style:normal; font-weight:400;
  font-size:2.7em; line-height:1;
  letter-spacing:0.02em;
}
.brand .role{ display:inline-flex; align-items:baseline; }

/* a real photograph in the avatar slot */
.ts-card .av.has-img{ border:1px solid rgba(13,9,30,0.10); padding:0; overflow:hidden; }
.ts-card .av.has-img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ================= THE CLOSING IMAGE ==============================
   Full-bleed art, a layer of falling stars over its upper half, and a
   fade at the foot into exactly the colour the footer starts from, so
   the two read as one sky. */
.fin{
  --sky-top:#2A1140;
  position:relative;
  isolation:isolate;
  background:var(--sky-top);
  overflow:hidden;
}
.fin-art{ position:relative; line-height:0; }
.fin-art img{
  display:block; width:100%; height:auto;
  /* on a tall phone the art would otherwise be a thin strip */
  max-height:78vh; object-fit:cover; object-position:50% 42%;
}
/* the stars belong in the sky, not in the pink cloud at the foot */
.fin-stars{
  position:absolute; inset:0;
  pointer-events:none;
  /* The artwork is only night sky across its top quarter - below that it
     is lit screens and pink cloud, where a white point simply disappears.
     The layer is faded out before it gets there, so the stars read as
     falling INTO the scene rather than over it. */
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 30%, transparent 58%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 30%, transparent 58%);
  z-index:2;
}
/* A falling point. One transform and one opacity, both composited, and
   the whole layer stops being composited the moment it scrolls away.

   The span runs the full height of the layer and the dot is its
   ::before, because a percentage in translateY resolves against the
   element's OWN height - on a 2px dot, translateY(108%) is two pixels
   and nothing appears to move. Full-height, and the percentage means
   what it reads as. */
.fin-stars .fs-d{
  position:absolute; top:0; height:100%;
  width:var(--s);
  opacity:0;
  animation:fin-fall var(--t) linear var(--d) infinite;
  will-change:transform, opacity;
}
.fin-stars .fs-d::before{
  content:'';
  position:absolute; top:0; left:0;
  width:var(--s); height:var(--s);
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 9px 2px rgba(255,255,255,0.7);
}
@keyframes fin-fall{
  0%   { transform:translate3d(0, -8%, 0); opacity:0; }
  12%  { opacity:var(--o); }
  78%  { opacity:var(--o); }
  100% { transform:translate3d(-6vw, 108%, 0); opacity:0; }
}
/* A shooting star: a tapered line that travels along its own length. */
.fin-stars .fs-s{
  position:absolute;
  width:var(--w); height:1.6px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 88%, #fff 100%);
  transform:rotate(28deg);
  opacity:0;
  animation:fin-shoot var(--t) cubic-bezier(0.4,0,0.7,1) var(--d) infinite;
  will-change:transform, opacity;
}
@keyframes fin-shoot{
  0%   { transform:translate3d(-14vw, -8vw, 0) rotate(28deg); opacity:0; }
  8%   { opacity:1; }
  34%  { opacity:1; }
  55%, 100% { transform:translate3d(30vw, 16vw, 0) rotate(28deg); opacity:0; }
}
/* ---- the line, over the top of the illustration ---------------------
   The artwork opens on empty night sky, which is where this belongs.
   A scrim is still needed: the panels start about a tenth of the way
   down and the text has to stay readable over them at every width, so
   the band darkens what is behind it and releases before the face. */
.fin-top{
  position:absolute; left:0; right:0; top:0;
  z-index:3;
  text-align:center;
  /* 69px is the floating nav bar, which overlaps whatever sits at the top
     of a section once it reaches the top of the viewport - the copy has to
     start below it or the headline reads through the bar. */
  padding:calc(69px + clamp(0.9rem, 2.2vw, 1.8rem)) 6vw clamp(3rem, 7vw, 5.5rem);
  /* Held high through the band the text occupies (roughly 35-72% of this
     box) and released after it: the sub-line crosses the top of a white
     journey-map panel, and at 0.6 there it measured 4.2:1. */
  background:linear-gradient(to bottom,
    rgba(5,8,24,0.93) 0%, rgba(5,8,24,0.88) 55%,
    rgba(5,8,24,0.7) 76%, rgba(5,8,24,0) 100%);
  pointer-events:none;
}
.fin-line{
  margin:0 0 0.6rem;
  font-size:clamp(1.45rem, 3.6vw, 2.6rem);
  font-weight:800; letter-spacing:-0.035em; line-height:1.1;
  color:#fff; text-wrap:balance;
  text-shadow:0 2px 24px rgba(5,8,24,0.85);
}
.fin-line-sub{
  margin:0 auto; max-width:60ch;
  font-size:clamp(0.9rem, 1.5vw, 1.05rem); line-height:1.6;
  color:rgba(255,255,255,0.9); text-wrap:pretty;
  text-shadow:0 1px 18px rgba(5,8,24,0.9);
}

/* the seam: the art dissolves into the footer's first colour */
.fin-fade{
  position:absolute; left:0; right:0; bottom:-1px; height:34%;
  background:linear-gradient(to bottom, rgba(42,17,64,0) 0%,
             rgba(42,17,64,0.55) 58%, var(--sky-top) 100%);
  pointer-events:none;
}

/* ================= THE FOOTER'S SKY ================================
   The treatment is entirely background: the violet the illustration
   fades into, carried down through a star field to near-black. */
.ft{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(to bottom, #2A1140 0%, #150A2B 46%, #08061A 100%);
  padding:2.5rem 6vw;
}
/* the star field. Ninety points in one paint rather than ninety elements. */
.ft::before{
  content:'';
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 83.42% 74.16%, rgba(255,255,255,0.19) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 70.62% 57.60%, rgba(255,255,255,0.61) 0, rgba(255,255,255,0) 1.6px),
    radial-gradient(circle at 56.49% 99.67%, rgba(255,255,255,0.24) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 34.34% 80.63%, rgba(255,255,255,0.34) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 60.54% 26.41%, rgba(255,255,255,0.35) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 68.00% 61.45%, rgba(255,255,255,0.20) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 41.60% 96.53%, rgba(255,255,255,0.75) 0, rgba(255,255,255,0) 1.6px),
    radial-gradient(circle at 21.90% 82.26%, rgba(255,255,255,0.20) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 15.43% 92.73%, rgba(255,255,255,0.16) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 58.56% 39.80%, rgba(255,255,255,0.26) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 21.90% 55.02%, rgba(255,255,255,0.23) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 43.64% 98.87%, rgba(255,255,255,0.22) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 40.30% 60.71%, rgba(255,255,255,0.24) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 63.86% 71.58%, rgba(255,255,255,0.28) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 37.05% 51.70%, rgba(255,255,255,0.35) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 49.88% 33.52%, rgba(255,255,255,0.34) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 28.69% 25.71%, rgba(255,255,255,0.26) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 45.48% 21.92%, rgba(255,255,255,0.41) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 37.48% 68.48%, rgba(255,255,255,0.20) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 76.26% 90.17%, rgba(255,255,255,0.42) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 65.45% 99.90%, rgba(255,255,255,0.18) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 52.46% 8.70%, rgba(255,255,255,0.38) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 66.64% 92.44%, rgba(255,255,255,0.16) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 25.00% 37.81%, rgba(255,255,255,0.23) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 7.94% 19.34%, rgba(255,255,255,0.12) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 53.72% 61.58%, rgba(255,255,255,0.35) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 48.70% 52.52%, rgba(255,255,255,0.38) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 59.90% 53.61%, rgba(255,255,255,0.79) 0, rgba(255,255,255,0) 1.6px),
    radial-gradient(circle at 58.84% 19.88%, rgba(255,255,255,0.18) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 99.11% 78.97%, rgba(255,255,255,0.39) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 52.20% 26.18%, rgba(255,255,255,0.29) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 90.77% 63.29%, rgba(255,255,255,0.78) 0, rgba(255,255,255,0) 1.6px),
    radial-gradient(circle at 13.05% 43.15%, rgba(255,255,255,0.17) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 47.09% 59.81%, rgba(255,255,255,0.39) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 38.32% 38.97%, rgba(255,255,255,0.31) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 91.64% 95.93%, rgba(255,255,255,0.36) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 26.00% 98.70%, rgba(255,255,255,0.17) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 89.28% 38.77%, rgba(255,255,255,0.35) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 67.46% 57.51%, rgba(255,255,255,0.27) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 48.13% 54.17%, rgba(255,255,255,0.41) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 62.29% 82.70%, rgba(255,255,255,0.27) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 97.79% 5.21%, rgba(255,255,255,0.12) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 48.43% 40.47%, rgba(255,255,255,0.35) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 59.44% 24.58%, rgba(255,255,255,0.18) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 53.39% 81.03%, rgba(255,255,255,0.18) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 42.98% 87.92%, rgba(255,255,255,0.27) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 27.34% 39.00%, rgba(255,255,255,0.31) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 63.44% 40.62%, rgba(255,255,255,0.28) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 61.07% 35.76%, rgba(255,255,255,0.29) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 26.45% 38.66%, rgba(255,255,255,0.83) 0, rgba(255,255,255,0) 1.6px),
    radial-gradient(circle at 51.05% 47.01%, rgba(255,255,255,0.15) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 27.83% 41.37%, rgba(255,255,255,0.18) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 26.70% 60.43%, rgba(255,255,255,0.35) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 40.44% 17.84%, rgba(255,255,255,0.66) 0, rgba(255,255,255,0) 1.6px),
    radial-gradient(circle at 41.93% 35.82%, rgba(255,255,255,0.60) 0, rgba(255,255,255,0) 1.6px),
    radial-gradient(circle at 60.64% 48.85%, rgba(255,255,255,0.68) 0, rgba(255,255,255,0) 1.6px),
    radial-gradient(circle at 14.93% 3.90%, rgba(255,255,255,0.31) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 68.10% 23.05%, rgba(255,255,255,0.16) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 26.70% 63.73%, rgba(255,255,255,0.33) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 91.26% 42.79%, rgba(255,255,255,0.18) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 88.69% 68.64%, rgba(255,255,255,0.39) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 65.51% 52.99%, rgba(255,255,255,0.18) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 15.48% 63.22%, rgba(255,255,255,0.33) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 0.14% 2.31%, rgba(255,255,255,0.29) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 31.63% 19.09%, rgba(255,255,255,0.21) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 38.56% 92.18%, rgba(255,255,255,0.75) 0, rgba(255,255,255,0) 1.6px),
    radial-gradient(circle at 74.90% 20.08%, rgba(255,255,255,0.89) 0, rgba(255,255,255,0) 1.6px),
    radial-gradient(circle at 91.54% 15.36%, rgba(255,255,255,0.17) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 88.86% 88.25%, rgba(255,255,255,0.64) 0, rgba(255,255,255,0) 1.6px),
    radial-gradient(circle at 79.62% 45.76%, rgba(255,255,255,0.16) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 72.01% 9.00%, rgba(255,255,255,0.24) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 92.99% 45.58%, rgba(255,255,255,0.82) 0, rgba(255,255,255,0) 1.6px),
    radial-gradient(circle at 4.97% 49.74%, rgba(255,255,255,0.25) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 31.52% 18.20%, rgba(255,255,255,0.36) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 60.37% 28.67%, rgba(255,255,255,0.16) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 43.47% 48.37%, rgba(255,255,255,0.41) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 46.31% 88.54%, rgba(255,255,255,0.18) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 73.36% 69.12%, rgba(255,255,255,0.35) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 10.74% 19.69%, rgba(255,255,255,0.41) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 93.71% 66.97%, rgba(255,255,255,0.13) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 21.27% 37.78%, rgba(255,255,255,0.32) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 79.43% 89.38%, rgba(255,255,255,0.40) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 74.26% 76.66%, rgba(255,255,255,0.14) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 1.15% 76.43%, rgba(255,255,255,0.15) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 17.88% 0.72%, rgba(255,255,255,0.20) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 52.85% 83.04%, rgba(255,255,255,0.37) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 43.54% 78.67%, rgba(255,255,255,0.27) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 60.64% 16.13%, rgba(255,255,255,0.82) 0, rgba(255,255,255,0) 1.6px),
    radial-gradient(circle at 34.33% 19.71%, rgba(255,255,255,0.26) 0, rgba(255,255,255,0) 1.1px),
    radial-gradient(circle at 37.76% 55.72%, rgba(255,255,255,0.13) 0, rgba(255,255,255,0) 1.1px);
  /* thin them out towards the foot, so the closing line sits in clear sky */
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.5) 58%, transparent 96%);
          mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.5) 58%, transparent 96%);
}
.ft-inner{ position:relative; z-index:1; }
/* the base rule was a hairline on flat ink; on the sky it needs to be a
   little brighter to stay visible against the sky */
.ft-base{ border-top-color:rgba(255,255,255,0.2); }

/* On a phone the artwork is only as tall as 390px x 0.56 - a 220px strip
   in which none of it is readable. It is given a real height instead and
   cropped to the figure, who is centred, so the face and the nearest two
   screens survive. */
@media (max-width:700px){
  .fin-art img{
    /* taller than the desktop crop in proportion, because the scrim band
       is a fixed height and would otherwise swallow half the picture */
    height:clamp(420px, 66vh, 600px);
    max-height:none;
    object-position:50% 44%;
  }
}

@media (prefers-reduced-motion: reduce){
  /* the points stay, they just stop falling - --y is where each one was
     scattered, so the layer is still a sky and not a row along the top */
  .fin-stars .fs-d{ animation:none; opacity:var(--o); transform:translate3d(0, var(--y), 0); }
  .fin-stars .fs-s{ animation:none; opacity:0.8; }
  .fin-stars{
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 22%, transparent 46%);
            mask-image:linear-gradient(to bottom, #000 0%, #000 22%, transparent 46%);
  }
}


/* ================= THEME ==========================================
   Rebuilt against the reference screenshots. Every value here was
   sampled from them rather than guessed:

     ground   #F8F7FA   (82% of the light frames)
     ink      #0D091E   (every heading, link and label, at opacity)
     purple   #301884 -> #724EE4  (the gradient panels)
     magenta  #BC57C8  (every primary button)
     red      #C8434F  (problem / struggle callouts only)

   The system is flat and clean: white cards, hairline rules, one very
   soft wide shadow, big radii, generous air. No frosted glass - the
   reference has none, and the two treatments fight each other. */
:root{
  --sc-ground:#F8F7FA;
  --sc-surface:#FFFFFF;
  --sc-ink:#0D091E;
  --sc-body:rgba(13,9,30,0.72);
  /* 0.62, not 0.52: composited on the ground that is 5.5:1, where 0.52 was
     3.9:1 - under AA for the small uppercase labels it drives */
  --sc-muted:rgba(13,9,30,0.62);
  --sc-faint:rgba(13,9,30,0.40);
  --sc-line:rgba(13,9,30,0.09);
  --sc-line-2:rgba(13,9,30,0.18);

  --sc-purple-deep:#301884;
  --sc-purple:#4A2AA8;
  --sc-purple-bright:#724EE4;
  --sc-magenta:#BC57C8;        /* the reference's accent, for fills and glows */
  /* White on #BC57C8 is 3.94:1 - under AA for button labels, which are
     bold but not large. The button fill goes one step deeper (same hue,
     5.3:1) and the brand magenta stays for everything non-textual. */
  --sc-magenta-btn:#A63FB2;
  --sc-magenta-deep:#8F3399;
  --sc-orchid:#A03BB8;          /* eyebrow purple. #B048C8 measured 4.30:1 on
                                   the ground - under AA for small type */
  --sc-red:#C8434F;

  --sc-soft:rgba(114,78,228,0.10);
  --sc-r-card:24px;
  --sc-r-panel:36px;
  --sc-r-chip:999px;
  /* One shadow, used everywhere. Wide, soft and weak - it reads as
     "lifted" rather than "dropped", which is what keeps the reference
     looking calm with this many cards on screen. */
  --sc-shadow:0 1px 2px rgba(13,9,30,0.04), 0 18px 48px -26px rgba(13,9,30,0.28);
  --sc-shadow-lift:0 2px 6px rgba(13,9,30,0.05), 0 34px 70px -30px rgba(13,9,30,0.38);

  /* remap the base file's own tokens so untouched components follow */
  --bg:var(--sc-ground);
  --hero-bg:#F8F7FA;
  --paper:var(--sc-surface);
  --ink:var(--sc-ink);
  --muted:var(--sc-body);
  --line:var(--sc-line);
  --line-strong:var(--sc-line-2);
  --accent:var(--sc-purple-bright);
  --accent-2:var(--sc-magenta);
  --accent-soft:var(--sc-soft);
  --accent-text:var(--sc-orchid);

  /* the black-and-white tokens the About / Numbers / Experience files use */
  --bw-bg:var(--sc-surface);
  --bw-band:var(--sc-ground);
  --bw-ink:var(--sc-ink);
  --bw-ink-2:var(--sc-body);
  --bw-ink-3:var(--sc-muted);
  --bw-line:var(--sc-line);
  --bw-line-2:var(--sc-line-2);
  --bw-grid:rgba(13,9,30,0.04);
}

html, body{ background:var(--sc-ground); }
body{ color:var(--sc-ink); }
::selection{ background:var(--sc-purple-bright); color:#fff; }

/* The topbar is fixed and ~69px tall; a nav link used to drop the target
   section's first line straight underneath it. */
#about, #work, #experience, #contact{ scroll-margin-top:96px; }

/* --- surfaces ---------------------------------------------------------
   One card recipe, applied to every card-like thing on the site. */
.fan-card,
.abt-panel,
.it-board,
.cs-note,
.overview-card,
.insight-card,
.decision-card,
.trust-card,
.iter-story,
.compare-col,
.team-card,
.pair-card,
.persona-card,
.flow-step{
  background:var(--sc-surface);
  border:1px solid var(--sc-line);
  border-radius:var(--sc-r-card);
  box-shadow:var(--sc-shadow);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.abt-panel, .it-board{ border-radius:var(--sc-r-panel); }

/* the deck keeps a deeper lift because the cards genuinely overlap */
.fan-card{
  box-shadow:0 2px 5px rgba(13,9,30,0.04), 0 16px 32px rgba(13,9,30,0.08),
             0 44px 84px -22px rgba(13,9,30,0.26);
}
.fan-card.is-in:hover,
.fan-card.is-in:focus-visible{
  box-shadow:0 4px 10px rgba(13,9,30,0.06), 0 28px 54px rgba(13,9,30,0.13),
             0 70px 120px -26px rgba(13,9,30,0.34);
}
.fan-card .project-info{ background:var(--sc-surface); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.fan{ padding-bottom:2.5rem; margin-bottom:-2.5rem; }
.fan-num{
  background:rgba(13,9,30,0.78);
  border:0;
  box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}

/* --- buttons and chips ------------------------------------------------
   Magenta is the one call to action. Dark ink is the "selected" state.
   Everything else is a white pill with a hairline. */
.sc-btn,
.exp-foot a{
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:1rem 1.9rem;
  border:0;
  border-radius:var(--sc-r-chip);
  background:var(--sc-magenta-btn);
  color:#fff;
  font-weight:700;
  font-size:0.98rem;
  text-decoration:none;
  box-shadow:0 10px 26px -12px rgba(188,87,200,0.75);
  transition:background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.sc-btn:hover,
.exp-foot a:hover{
  background:var(--sc-magenta-deep);
  transform:translateY(-2px);
  box-shadow:0 16px 34px -12px rgba(188,87,200,0.8);
}

.fan-more a,
.exp-projects span,
.about-tags span,
.lofi-tab{
  background:var(--sc-surface);
  border:1px solid var(--sc-line);
  border-radius:var(--sc-r-chip);
  color:var(--sc-body);
  box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.fan-more a{ color:var(--sc-ink); font-weight:600; box-shadow:var(--sc-shadow); }
/* Same pill as the "more projects" links under the deck: white, a whisper of
   a border, bold ink, and the soft lift doing the work instead of a hard
   outline. */
.abt-chip{
  background:var(--sc-surface);
  border:1px solid var(--sc-line);
  border-radius:var(--sc-r-chip);
  color:var(--sc-ink);
  font-weight:600;
  padding:0.52rem 1rem;
  box-shadow:var(--sc-shadow);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.abt-chip:hover{
  border-color:var(--sc-purple-bright);
  color:var(--sc-ink);
  background:var(--sc-surface);
  box-shadow:0 10px 24px -14px rgba(114,78,228,0.6);
}

.fan-more a:hover,
.exp-projects span:hover{
  background:var(--sc-surface);
  border-color:var(--sc-purple-bright);
  color:var(--sc-ink);
  box-shadow:0 10px 24px -14px rgba(114,78,228,0.6);
}
.about-tags span{ background:var(--sc-soft); border-color:transparent; color:var(--sc-ink); font-weight:600; }

/* The "next case study" footer is a ROW, not a button - filling it magenta
   left its dark label sitting on the magenta at 3.5:1. The reference puts
   its colour in a circular icon button instead. */
.cs-next .case-nav-link{ background:transparent; color:inherit; box-shadow:none; text-decoration:none; }
.cs-next-left .k{ color:var(--sc-muted); }
.cs-next-left .name{ color:var(--sc-ink); }
.cs-next-arrow{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px;
  border-radius:50%;
  background:var(--sc-magenta-btn);
  color:#fff;
  box-shadow:0 10px 24px -12px rgba(166,63,178,0.8);
  transition:transform 0.25s ease, background 0.25s ease;
}
.cs-next a:hover .cs-next-arrow{ background:var(--sc-magenta-deep); transform:translateX(4px); }
.cs-next-arrow svg{ width:20px; height:20px; }

/* dark-ink pills: the reference's "selected" treatment. The About status
   line is deliberately NOT one of these - it is quiet supporting text. */
.exp-back,
.exp-now{
  background:var(--sc-ink);
  border-color:var(--sc-ink);
  color:#fff;
  box-shadow:none;
}
.exp-back:hover{ background:#000; }

.status{
  background:var(--sc-soft);
  border:1px solid transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  color:var(--sc-ink);
  font-weight:600;
}
.status .dot{ background:linear-gradient(135deg, var(--sc-purple-bright), var(--sc-magenta)); }

/* Back links. .cs-backlink is inline-flex inside a flex COLUMN, so without
   align-self it stretches the full width of the hero - invisible with no
   background, a full-width bar the moment it gets one. */
.cs-backlink{
  align-self:flex-start;
  padding:0.55rem 1.1rem;
  border-radius:var(--sc-r-chip);
  background:var(--sc-surface);
  border:1px solid var(--sc-line);
  color:var(--sc-ink);
  opacity:1;
  font-weight:600;
  box-shadow:var(--sc-shadow);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.cs-backlink:hover{ transform:translateX(-3px); box-shadow:var(--sc-shadow-lift); }
/* over artwork it needs the dark recipe or it is a white slab on a photo */
.cs-hero.on-dark .cs-backlink,
.cs-section.dark .cs-backlink{
  background:rgba(13,9,30,0.55);
  border-color:rgba(255,255,255,0.24);
  color:#fff;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:none;
}

/* the nav keeps its floating pill, but flat white like the reference */
.topbar.is-pill, .topbar{ box-shadow:0 10px 30px -18px rgba(13,9,30,0.35); }

/* --- gradient panels --------------------------------------------------
   The reference's signature surface: a deep purple gradient, a bloom of
   lighter purple low-left, film grain over the top, and a soft glow
   spilling out beneath. The grain is what stops a big flat gradient from
   looking like a CSS default - it is one tiny inline SVG, not an image. */
.sc-grad,
.cs-results{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(90% 80% at 18% 92%, var(--sc-purple-bright) 0%, transparent 62%),
    linear-gradient(158deg, var(--sc-purple-deep) 0%, var(--sc-purple) 52%, #5B34C4 100%);
  color:#fff;
}
.sc-grad::after,
.cs-results::after{
  content:'';
  position:absolute; inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0.5;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
/* The reference never runs a gradient edge-to-edge: its purple moments are
   big rounded panels inset from the page with a bloom of their own colour
   spilling out underneath. */
.cs-results{
  margin:0 6vw;
  border-radius:var(--sc-r-panel);
  padding:clamp(3rem, 5vw, 5rem) clamp(2rem, 4vw, 4rem);
  box-shadow:0 40px 80px -40px rgba(74,42,168,0.65);
}
.cs-results-inner{ max-width:1100px; margin:0 auto; }
@media (max-width: 700px){
  .cs-results{ margin:0 5vw; border-radius:26px; }
}

.cs-hero.on-dark h1,
.cs-results h2{ color:#fff; }
.cs-hero.on-dark .tagline{ color:rgba(255,255,255,0.8); }
.cs-hero.on-dark .eyebrow{ color:#D9C6FF; }
.cs-results .eyebrow{ color:#D9C6FF; }
.metric-item{
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:16px;
  box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}

/* --- dark sections ----------------------------------------------------
   #0D091E, the same value as the ink. */
.cs-section.dark{ background:var(--sc-ink); }
.cs-section.dark h2{ color:#fff; }
.cs-section.dark p{ color:rgba(255,255,255,0.66); }
.cs-section.dark .eyebrow{ color:#C9A9F5; }
.cs-section.dark .cs-note,
.cs-section.dark .persona-card,
.cs-section.dark .insight-card,
.cs-section.dark .decision-card,
.cs-section.dark .trust-card,
.cs-section.dark .team-card,
.cs-section.dark .compare-col,
.cs-section.dark .flow-step{
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.12);
  box-shadow:none;
}
/* The MTL case study is rebuilt on its own .mtl-* layer and no longer
   borrows .cs-section.dark, so the overrides that used to repair it
   have gone with the markup they patched. */

/* the "+" is a superscript, so it hangs off the cap line rather than the
   baseline the flex row aligns to */
.abt-fig .plus, .xp-num .plus{ align-self:flex-start; line-height:1.35; }

/* --- accents ----------------------------------------------------------
   Orchid for section eyebrows, red reserved for problem framing, exactly
   as the reference does it. */
.eyebrow, .cs-section .eyebrow, .cs-hero.on-light .eyebrow, .fan-kicker,
.nav-links a.active, .rf-badge, .step .n, .overview-card .ic,
.flow-label, .flow-arrow, .home-link, .cs-section .lbl,
.decision-card .row .lbl, .ba-block.after .cap, .cs-footer-nav .home-link,
.insight-card .col:nth-child(2) .lbl, .pair-card .lbl,
.hmw-block .lbl, .iter-grid .lbl{ color:var(--sc-orchid); }


/* the numbers band is inverted and owns its own palette - it is the one
   place on the site where the ground is dark, so the light-ground rules
   for eyebrows, cards and bands deliberately skip it */
.abt-eyebrow, .exp-eyebrow{ color:var(--sc-orchid); }
.abt-eyebrow::before, .exp-eyebrow::before,
.fan-kicker::before, .fan-kicker::after{ background:currentColor; opacity:0.45; }

/* --- bands ------------------------------------------------------------ */
.fan-sec, .philosophy, .cs-section:not(.dark), .exp{ background:var(--sc-ground); }
.cs-section.tint{ background:var(--sc-surface); }
.abt{
  background:var(--sc-ground);
  border-top:1px solid var(--sc-line);
  border-bottom:1px solid var(--sc-line);
}
.separator{ background:transparent; }

/* --- iTraffic ---------------------------------------------------------- */
.it-tile img{ border-radius:14px; }
.sg-item{ border-radius:16px; border-color:rgba(255,255,255,0.12); box-shadow:0 24px 48px -16px rgba(0,0,0,0.5); }
.it-lightbox{ background:rgba(13,9,30,0.94); }
.it-lightbox .it-close{
  background:rgba(255,255,255,0.1);
  border-color:rgba(255,255,255,0.22);
  box-shadow:none;
}

/* --- experience page ---------------------------------------------------- */
.exp-rail i{ background:linear-gradient(to bottom, var(--sc-purple-bright), rgba(114,78,228,0.25)); }
.exp-item:hover::before{ background:var(--sc-purple-bright); border-color:var(--sc-purple-bright); box-shadow:0 0 0 5px rgba(114,78,228,0.14); }
.exp-meta b, .exp-year, .exp-h1, .exp-co, .exp-role{ color:var(--sc-ink); }

@media (prefers-reduced-motion: reduce){
  .sc-btn, .exp-foot a{ transition:none; }
  .sc-btn:hover, .exp-foot a:hover{ transform:none; }
}


/* ================= TYPE ===========================================
   One family for everything, the way the reference does it. Biennale
   is named first so it wins wherever it is licensed and installed;
   Poppins is the substitute because it shares the traits that make
   Biennale recognisable - a single-storey geometric 'a', a
   single-storey 'g' with a straight tail, circular bowls and large
   round dots. (Checked against a zoom of the reference headline.)

   The hero keeps Anton - it is display type and off-limits here. */
:root{
  --sc-sans:'Biennale Regular','Biennale','Poppins','Plus Jakarta Sans',
            -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sc-sans-bold:'Biennale Black','Biennale','Poppins','Plus Jakarta Sans',sans-serif;

  --lh-tight:1.08;    /* display - the reference sets its headlines very tight */
  --lh-snug:1.28;
  --lh-body:1.62;     /* their body runs looser than ours did */
  --measure:66ch;
  --measure-lead:52ch;
}

body,
.framer-text{
  font-family:var(--sc-sans);
  font-size:17px;                 /* their 21px is for a wider canvas */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
:root{
  --framer-font-family:var(--sc-sans);
  --framer-font-family-bold:var(--sc-sans-bold);
}

/* Headings: heavy, very tight tracking, balanced across lines. The
   reference tracks its big type at roughly -0.03em; the larger the
   size, the tighter it needs to be or it reads gappy. */
h1, h2, h3, h4, h5,
.abt-title, .xp-title, .exp-h1, .fan-title, .exp-co, .cs-hero h1{
  font-family:var(--sc-sans);
  font-weight:800;
  text-wrap:balance;
}
h1, .exp-h1, .cs-hero h1{ letter-spacing:-0.035em; line-height:var(--lh-tight); }
h2, .abt-title, .xp-title, .fan-title{ letter-spacing:-0.03em; line-height:var(--lh-tight); }
h3, h4{ letter-spacing:-0.015em; line-height:var(--lh-snug); font-weight:700; }
h5{ letter-spacing:-0.005em; line-height:var(--lh-snug); font-weight:700; }

p, li{ text-wrap:pretty; }
.cs-section p, .philosophy p, .abt-body p, .xp-sub, .exp-lede, .exp-duties li,
.fan-sub, .cs-section li{
  line-height:var(--lh-body);
  font-weight:400;
}
.cs-section p:not([class]){ max-width:var(--measure); }
.tagline, .exp-lede, .xp-sub, .fan-sub{ max-width:var(--measure-lead); }

/* Eyebrows: uppercase, tracked out, coloured. In the reference this is
   the one place colour is used for type, and it is what tells you a new
   section has started. */
.eyebrow, .abt-eyebrow, .xp-eyebrow, .exp-eyebrow, .fan-kicker,
.exp-sub, .abt-grp h3, .cs-section .eyebrow{
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

/* Figures line up between rows. */
.metric-item, .xp-num, .exp-year, .abt-fig, .exp-meta b, table, .m-val, .num{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}

a:not([class]), .cs-section p a{
  text-underline-offset:0.18em;
  text-decoration-thickness:1px;
}
p, li, h1, h2, h3, h4, h5{ overflow-wrap:break-word; }

.ts-card.q-f{ --qc:rgba(13,138,95,0.18);   --ac:#0E8A5F; --ai:#046A47; }
.ts-card.q-g{ --qc:rgba(192,99,43,0.18);   --ac:#C0632B; --ai:#8A4107; }
.ts-more{ margin:0; }
.ts-more a{
  display:inline-flex; align-items:center; gap:0.45rem;
  font-size:0.92rem; font-weight:700; text-decoration:none;
  color:var(--sc-orchid, #A03BB8);
  border-bottom:1px solid currentColor; padding-bottom:0.1rem;
}
.ts-more a svg{ width:16px; height:16px; transition:transform 0.25s ease; }
.ts-more a:hover svg, .ts-more a:focus-visible svg{ transform:translateX(3px); }
.ts-more a:focus-visible{ outline:2px solid currentColor; outline-offset:4px; border-radius:3px; }
@media (prefers-reduced-motion: reduce){ .ts-more a svg{ transition:none; } }

.ts-more-end{ margin-top:clamp(1.4rem, 3vw, 2.2rem); text-align:center; }

/* ---- no flash of the fallback display face -------------------------- */
html.fonts-loading .hero-copy,
html.fonts-loading .brand .role{ opacity:0; }
.hero-copy, .brand .role{ transition:opacity 0.25s ease; }
@media (prefers-reduced-motion: reduce){ .hero-copy, .brand .role{ transition:none; } }

/* ================= THE OPENING LOADER ==============================
   Held only while the display faces are still arriving, so the first
   thing anyone reads is already in the right type. It removes itself
   after three and a half seconds whatever happens, and with no script
   at all it fades on its own - the page underneath is complete the
   whole time. */
.pl{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.6rem;
  background:#F8F7FA;
  animation:pl-failsafe 0s 10s forwards;
}
html.pl-done .pl{ opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s .45s; }
.pl-core{ display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.pl-mark{
  position:relative; width:76px; height:76px;
  display:grid; place-items:center;
}
.pl-mark img{
  width:46px; height:46px; border-radius:13px; display:block;
  animation:pl-breathe 2.2s ease-in-out infinite;
}
/* the arc: a conic sweep with its middle masked out, so only a ring shows */
.pl-ring{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(114,78,228,0) 0deg, rgba(114,78,228,0) 190deg,
             #A03BB8 300deg, #724EE4 352deg, rgba(114,78,228,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation:pl-spin 1.15s linear infinite;
}
/* five letterforms finding their places */
.pl-bars{ display:flex; align-items:flex-end; gap:5px; height:16px; }
.pl-bars i{
  width:5px; height:100%; border-radius:3px;
  background:rgba(13,9,30,0.26);
  transform-origin:50% 100%;
  animation:pl-set 1.1s cubic-bezier(.2,.7,.3,1) infinite;
}
.pl-bars i:nth-child(1){ animation-delay:0s; }
.pl-bars i:nth-child(2){ animation-delay:.09s; }
.pl-bars i:nth-child(3){ animation-delay:.18s; }
.pl-bars i:nth-child(4){ animation-delay:.27s; }
.pl-bars i:nth-child(5){ animation-delay:.36s; }
.pl-line{
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:rgba(13,9,30,0.07); overflow:hidden;
}
.pl-line span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, #724EE4, #A03BB8);
  animation:pl-fill 8s cubic-bezier(.2,.7,.3,1) forwards;
}
html.pl-done .pl-line span{ width:100%; transition:width .35s ease; animation:none; }
@keyframes pl-spin{ to{ transform:rotate(360deg); } }
@keyframes pl-breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(0.93); } }
@keyframes pl-set{
  0%, 100%{ transform:scaleY(0.35); opacity:0.45; }
  40%{ transform:scaleY(1); opacity:1; }
}
@keyframes pl-fill{ from{ width:0; } to{ width:88%; } }
@keyframes pl-failsafe{ to{ opacity:0; visibility:hidden; } }
@media (prefers-reduced-motion: reduce){
  .pl-ring{ animation:none; }
  .pl-mark img, .pl-bars i{ animation:none; }
  .pl-bars i{ transform:scaleY(0.6); opacity:0.7; }
  .pl-line span{ animation:none; width:60%; }
}

/* the headline waits until it has measured itself in the real face */
html.hero-unfit .hero-copy{ opacity:0 !important; }
.hero-copy{ transition:opacity .4s ease; }

/* The headline's size no longer waits on a measurement.
   The fit the script performs is linear - size = box width / the ink width
   of the longest line at 100px, which for Anton is ~922 - so the same number
   can be expressed in CSS and never changes as fonts arrive. It is applied
   only once Anton is provably in use; without it the script's own measured
   fit still runs, so a blocked font cannot overflow the box. */
.hero-copy{ --hero-fit:min(calc(var(--hero-copy-width) / 9.22), calc(var(--hero-line) * 1.15)); }
html.anton-live .hero-copy{ font-size:var(--hero-fit) !important; }