:root{
  --cream:#faf7f3;
  --ink:#111111;
  --near-black:#141310;
  --muted:#63635f;
  --line: rgba(17,17,17,0.12);
  --purple: rgba(124,92,255,0.55);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
a, button{outline-offset:3px;}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:4px;
}
footer a:focus-visible{
  outline-color:var(--cream);
}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter','Inter Placeholder',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:'Archivo','Archivo Placeholder',sans-serif;
  margin:0;
  letter-spacing:-0.02em;
}

a{text-decoration:none;color:inherit;}

/* NAV */
.navpill{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 40px);
  z-index:100;
  max-width:480px;
  background:var(--near-black);
  color:var(--cream);
  border-radius:100px;
  padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
  transition:border-radius .3s ease;
}
.navpill.open{
  border-radius:32px;
}
.navpill-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 2px 0 12px;
}
.navlogo{
  font-family:'Archivo','Archivo Placeholder',sans-serif;
  font-weight:700;
  font-size:16px;
  letter-spacing:0.02em;
}
.navmenu{
  width:44px;height:44px;
  flex:none;
  border-radius:13px;
  background:var(--cream);
  border:none;
  position:relative;
  cursor:pointer;
}
.navmenu-icon{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(1);
  transition:opacity .2s ease, transform .2s ease;
}
.navmenu-close{opacity:0; transform:translate(-50%,-50%) scale(0.6);}
.navpill.open .navmenu-dots{opacity:0; transform:translate(-50%,-50%) scale(0.6);}
.navpill.open .navmenu-close{opacity:1; transform:translate(-50%,-50%) scale(1);}

.navdropdown{
  max-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  margin-top:0;
  transition:max-height .35s ease, margin-top .35s ease;
}
.navpill.open .navdropdown{
  max-height:280px;
  margin-top:20px;
}
.navdropdown a{
  background:var(--cream);
  color:var(--ink);
  font-weight:600;
  font-size:17px;
  padding:12px 22px;
  border-radius:14px;
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .3s ease, transform .3s ease, background .2s ease;
}
.navpill.open .navdropdown a{
  opacity:1;
  transform:translateY(0);
}
.navpill.open .navdropdown a:nth-child(1){transition-delay:.05s;}
.navpill.open .navdropdown a:nth-child(2){transition-delay:.1s;}
.navpill.open .navdropdown a:nth-child(3){transition-delay:.15s;}
.navdropdown a:hover{background:#efeae3;}

/* HERO */
.hero-wrap{
  position:relative;
  height:150vh;
}
.hero{
  position:sticky;
  top:0;
  height:100vh;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:60px 20px;
  overflow:hidden;
}
.hero-title{
  font-weight:800;
  font-size:clamp(48px, 9.1vw, 178px);
  line-height:0.9;
  display:flex;
  flex-direction:column;
}
.lp-disk{
  position:relative;
  display:inline-block;
  width:0.92em;
  height:0.92em;
  vertical-align:-0.11em;
  border-radius:50%;
  overflow:hidden;
  cursor:pointer;
  transition:opacity .22s ease;
}
.lp-disk-video{display:block;width:102%;height:102%;margin:-1%;object-fit:cover;}
.deco{
  position:absolute;
  z-index:2;
}
.sparkle-1{
  width:clamp(56px, 7.3vw, 148px);
  height:clamp(56px, 7.3vw, 148px);
  left:10%;
  top:26%;
}
.bolt-1{
  width:clamp(72px, 10.3vw, 208px);
  height:clamp(72px, 10.3vw, 208px);
  right:9%;
  top:50%;
}
.hero-portrait{
  margin-top:36px;
  width:clamp(140px, 10.4vw, 210px);
  aspect-ratio:200/228;
  height:auto;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 40px rgba(0,0,0,0.18);
}
.hero-portrait img{
  width:100%;height:100%;object-fit:cover;
}
.hero-tag{
  margin-top:24px;
  font-size:clamp(11px, 0.95vw, 18px);
  letter-spacing:0.06em;
  color:var(--ink);
}
.hero-copyright{
  position:absolute;
  left:8%;
  bottom:6%;
  font-family:'Archivo','Archivo Placeholder',sans-serif;
  font-weight:600;
  font-size:clamp(24px,3.6vw,68px);
  letter-spacing:-0.01em;
}
@media (min-width:820px){
  .hero-tag{
    position:absolute;
    right:8%;
    bottom:6%;
    margin-top:0;
  }
}

/* MORPH: shared-element flip from hero portrait to About portrait */
.morph-card{
  position:fixed;
  top:0;
  left:0;
  width:200px;
  height:228px;
  transform-style:preserve-3d;
  pointer-events:none;
  z-index:60;
  opacity:0;
  border-radius:16px;
  box-shadow:0 20px 40px rgba(0,0,0,0.18);
  will-change:transform, width, height, top, left;
}
.morph-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  border-radius:inherit;
  overflow:hidden;
}
.morph-face img{width:100%;height:100%;object-fit:cover;display:block;}
.morph-face-back{transform:rotateY(180deg);}

/* INTRO */
.intro{
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  padding:80px 24px 60px;
}
.intro-grid{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:40px;
}
.intro-col{
  flex:none;
}
.intro-hey{
  font-size:clamp(32px,3.96vw,76px);
  font-weight:800;
  margin-bottom:24px;
}
.intro-lead{
  font-size:clamp(24px,2.8vw,40px);
  line-height:1.4;
  font-weight:600;
  margin:0;
}
.intro-lead strong{font-weight:700;}
.intro-image{
  flex:none;
  width:clamp(180px, 20.8vw, 400px);
  aspect-ratio:400/456;
  border-radius:clamp(12px,1.05vw,20px);
  overflow:hidden;
  margin:0 auto;
}
.intro-image img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.intro-col-text,
.intro-col-body{
  opacity:0;
  transform:translateY(20px);
  will-change:opacity, transform;
}
.intro-body{
  font-size:clamp(15px,0.94vw,18px);
  line-height:1.6;
  color:#2b2b2b;
  margin:0 0 20px;
}
.story-btn{
  margin-top:8px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  border:1.5px solid var(--ink);
  border-radius:100px;
  font-weight:600;
  font-size:15px;
  transition:background .25s ease, color .25s ease;
}
.story-btn:hover{background:var(--ink);color:var(--cream);}

@media (min-width:960px){
  /* grid, not flex: the image sits in its own centre column so it stays on the true
     midline of the row regardless of how much text is in the columns either side of it. */
  .intro-grid{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:end;
    row-gap:0;
    column-gap:clamp(24px, 3.8vw, 45px);
  }
  .intro-image{
    justify-self:center;
  }
}

/* STATEMENT: the section is tall so the sticky pin has room to sit still while the
   text fills in; once scrolled through, it releases and the page continues normally. */
.statement{
  position:relative;
  height:220vh;
}
.statement-pin{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
}
.statement p{
  max-width:900px;
  font-family:'Archivo','Archivo Placeholder',sans-serif;
  font-weight:600;
  font-size:clamp(24px,4.2vw,44px);
  line-height:1.3;
  margin:0;
}
.statement .word{
  color:var(--line);
  transition:color .3s ease;
}
.statement .word.active{
  color:var(--ink);
}
@media (max-width:720px){
  .statement{height:180vh;}
}
@media (prefers-reduced-motion:reduce){
  .statement{height:auto;}
  .statement-pin{position:static;height:auto;min-height:100vh;}
}

/* JOURNEY */
.journey{
  max-width:1100px;
  margin:0 auto;
  padding:60px 24px 120px;
}
.section-heading{
  font-size:clamp(32px,5vw,44px);
  font-weight:800;
  margin-bottom:48px;
}
.journey-list{list-style:none;margin:0;padding:0;}
.journey-item{
  border-top:1px solid var(--line);
  padding:28px 0;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.journey-item:last-child{border-bottom:1px solid var(--line);}
.journey-item h3{
  font-size:clamp(22px,3.4vw,32px);
  font-weight:700;
}
.journey-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  text-align:right;
}
.journey-company{font-weight:600;font-size:16px;}
.journey-dates{font-size:14px;color:var(--muted);}

/* PROJECTS */
.projects{
  max-width:1100px;
  margin:0 auto;
  padding:60px 24px 120px;
}
.projects-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:32px;
}
.projects-head .section-heading{
  /* the heading's own margin-bottom (used elsewhere to space it from following content)
     would otherwise make align-items:center centre its margin box, not its text, and
     visibly shift "Featured Projects" above the button's centre. */
  margin-bottom:0;
}
.view-all{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 20px;
  border:1.5px solid var(--ink);
  border-radius:100px;
  font-weight:600;
  font-size:14px;
  transition:background .25s ease, color .25s ease;
}
.view-all:hover{background:var(--ink);color:var(--cream);}
.projects-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:32px;
}
.project-card{display:block;}
.project-media{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
  border-radius:20px;
  background-size:cover;
  background-position:center;
  margin-bottom:18px;
  transition:transform .35s ease;
}
.project-media::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 100%);
  transition:opacity .45s ease;
}
.project-card:hover .project-media{transform:translateY(-6px);}
.project-card:hover .project-media::before{opacity:0;}
.project-card h3{font-size:22px;font-weight:700;margin-bottom:6px;}
.project-card p{margin:0;color:var(--muted);font-size:15px;}

/* WORK PAGE */
.work-hero{
  max-width:1100px;
  margin:0 auto;
  padding:140px 24px 40px;
}
.work-title{
  font-size:clamp(40px,7vw,80px);
  font-weight:800;
  line-height:1.05;
  margin:0 0 24px;
}
.work-subtitle{
  font-size:18px;
  line-height:1.6;
  color:#2b2b2b;
  max-width:600px;
  margin:0;
}
.work-grid-section{
  max-width:1100px;
  margin:0 auto;
  padding:0 24px 120px;
}
.work-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
}
.work-card{display:block;transition:transform .35s ease;}
.work-card:hover{transform:translateY(-6px);}
.work-media{
  aspect-ratio:580/468;
  border-radius:20px;
  overflow:hidden;
  margin-bottom:18px;
  position:relative;
}
.work-media-img{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transition:transform .6s cubic-bezier(0.22,1,0.36,1);
}
.work-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 100%);
  pointer-events:none;
  transition:opacity .45s ease;
}
.work-card:hover .work-media-img{transform:scale(1.08);}
.work-card:hover .work-media::after{opacity:0;}
.work-card h3{font-size:24px;font-weight:700;margin-bottom:6px;}
.work-card p{margin:0;color:var(--muted);font-size:15px;}
@media (max-width:720px){
  .work-grid{grid-template-columns:1fr;}
}

/* THOUGHTS */
.thoughts{
  max-width:1100px;
  margin:0 auto;
  padding:60px 24px 120px;
}
.thoughts-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
}
.thought-card{
  position:relative;
  display:block;
  border-radius:24px;
  min-height:420px;
  background-size:cover;
  background-position:center;
  overflow:hidden;
  transition:transform .35s ease;
}
.thought-card:hover{transform:translateY(-6px);}
}


.thought-card::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.75) 90%);
}
.thought-inner{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:28px;
  color:#fff;
}
.thought-date{font-size:13px;opacity:0.8;}
.thought-inner h3{
  font-size:24px;
  font-weight:700;
  margin:12px 0 10px;
  color:#fff;
}
.thought-inner p{
  font-size:14px;
  line-height:1.5;
  margin:0;
  opacity:0.85;
}
.blog-cta{
  display:flex;
  align-items:flex-start;
  min-height:420px;
  background:var(--near-black);
  color:var(--cream);
  border-radius:24px;
  padding:36px 28px;
  transition:transform .35s ease;
}
.blog-cta:hover{transform:translateY(-6px);}
/* three cards + this tile: let the tile span the row instead of sitting alone in a fourth column */
@media (min-width:901px){.thoughts-grid .blog-cta{grid-column:1/-1;min-height:0;align-items:center;padding:30px 36px;}.thoughts-grid .blog-cta span{font-size:clamp(22px,2.1vw,30px);}}
.blog-cta span{
  font-family:'Archivo','Archivo Placeholder',sans-serif;
  font-weight:600;
  font-size:clamp(24px,2.4vw,34px);
  line-height:1.3;
}

/* FOOTER */
footer{
  position:relative;
  background:var(--near-black);
  color:var(--cream);
  padding:100px 24px 0;
  overflow:hidden;
}
footer::before{
  content:"";
  position:absolute;
  top:0; right:0;
  width:60%;
  height:70%;
  background:radial-gradient(ellipse at top right, rgba(255,255,255,0.06), transparent 70%);
  pointer-events:none;
}
.footer-inner{
  position:relative;
  max-width:1100px;
  margin:0 auto;
}
.footer-top-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.footer-top h2{
  font-size:clamp(40px,5.5vw,64px);
  font-weight:800;
  line-height:1.05;
  margin:0;
  text-align:left;
}
.footer-contact h3{font-size:18px;font-weight:600;margin:0 0 20px;}
.footer-links{display:flex;gap:16px;}
.footer-links a{
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid rgba(250,247,243,0.3);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease, border-color .25s ease;
}
.footer-links a:hover{background:rgba(250,247,243,0.1);border-color:var(--cream);}
.footer-watermark-wrap{
  position:relative;
  margin-top:60px;
  height:clamp(90px,14vw,220px);
  overflow:hidden;
}
.footer-watermark{
  position:absolute;
  left:0; right:0; top:0;
  font-family:'Archivo','Archivo Placeholder',sans-serif;
  font-weight:900;
  font-size:clamp(120px,20vw,320px);
  line-height:1;
  text-align:center;
  color:rgba(250,247,243,0.14);
  letter-spacing:-0.02em;
  white-space:nowrap;
}
.footer-bottom{
  position:relative;
  text-align:center;
  padding:20px 0 28px;
  font-size:13px;
  color:rgba(250,247,243,0.5);
}

/* CASE STUDY PAGE */
.case-hero{
  background:var(--near-black);
  color:var(--cream);
  padding:140px 24px 64px;
}
.case-hero-inner{max-width:1100px;margin:0 auto;}
.case-back{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;color:rgba(250,247,243,0.65);
  margin-bottom:40px;
}
.case-back:hover{color:var(--cream);}
.case-label{
  display:inline-block;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(250,247,243,0.55);
  margin-bottom:18px;
}
.case-title{
  font-size:clamp(36px,6vw,72px);
  font-weight:800;
  line-height:1.05;
  margin:0 0 22px;
  max-width:900px;
}
.case-subtitle{
  font-size:clamp(16px,2vw,20px);
  color:rgba(250,247,243,0.8);
  max-width:680px;
  line-height:1.6;
  margin:0 0 32px;
}
.case-tags{display:flex;flex-wrap:wrap;gap:10px;}
.case-tag{
  padding:8px 16px;
  border:1px solid rgba(250,247,243,0.25);
  border-radius:100px;
  font-size:13px;
}
.case-cover{
  max-width:1100px;
  margin:-40px auto 0;
  padding:0 24px;
  position:relative;
}
.case-cover img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:24px;
  display:block;
  box-shadow:0 30px 60px rgba(0,0,0,0.2);
}
.case-body{
  max-width:1100px;
  margin:0 auto;
  padding:100px 24px 40px;
}
.case-block{margin-bottom:80px;}
.case-block h2{
  font-size:clamp(28px,4vw,40px);
  font-weight:800;
  margin:0 0 20px;
}
.case-block p{
  font-size:17px;
  line-height:1.7;
  color:#2b2b2b;
  max-width:760px;
  margin:0 0 16px;
}
.case-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  margin-top:32px;
}
.case-card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
}
.case-card h4{margin:0 0 8px;font-size:17px;font-weight:700;}
.case-card p{margin:0;font-size:14px;color:var(--muted);max-width:none;}
.case-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:32px;
}
.case-stat{
  text-align:center;
  padding:32px 20px;
  background:var(--near-black);
  color:var(--cream);
  border-radius:20px;
}
.case-stat .num{font-size:clamp(28px,4vw,44px);font-weight:800;font-family:'Archivo','Archivo Placeholder',sans-serif;}
.case-stat .stat-label{font-size:13px;color:rgba(250,247,243,0.7);margin-top:6px;}
.case-gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  margin-top:32px;
}
.case-gallery img{width:100%;border-radius:16px;display:block;}
.case-gallery.single{grid-template-columns:1fr;}
.case-cta-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
  padding-top:40px;
  border-top:1px solid var(--line);
}
.case-external{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  border:1.5px solid var(--ink);
  border-radius:100px;
  font-weight:600;
  font-size:15px;
  transition:background .25s ease, color .25s ease;
}
.case-external:hover{background:var(--ink);color:var(--cream);}
.case-next{font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:8px;}

/* RESPONSIVE */
@media (max-width:720px){
  .projects-grid, .thoughts-grid{grid-template-columns:1fr;}
  .journey-item{flex-direction:column;align-items:flex-start;}
  .journey-meta{align-items:flex-start;text-align:left;}
  .sparkle-1{left:6%;top:14%;}
  .bolt-1{right:8%;top:60%;}
  .case-cards, .case-stats, .case-gallery{grid-template-columns:1fr;}
}

/* SLIDE DECK (project case studies) -- light theme, matches landing page */
body.deck-page{background:var(--cream);overflow:hidden;}
.deck-topbar{
  position:fixed;
  top:100px;left:0;right:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:0 32px;
  pointer-events:none;
}
.deck-topbar > *{pointer-events:auto;}
.deck-back{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--ink);
  font-weight:600;
  font-size:14px;
  padding:10px 18px;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:100px;
}
.deck-back:hover{background:rgba(17,17,17,0.05);}
.deck-project-name{display:none;}
.deck-progress{
  position:fixed;
  top:0;left:0;right:0;
  height:3px;
  background:var(--line);
  z-index:31;
}
.deck-progress-bar{
  height:100%;
  width:0%;
  background:var(--ink);
  transition:width .35s ease;
}
.deck{
  position:relative;
  height:100vh;
  width:100%;
}
.slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:180px 32px 110px;
  opacity:0;
  visibility:hidden;
  transition:opacity .4s ease;
  overflow-y:auto;
}
.slide.active{opacity:1;visibility:visible;}
.slide-inner{max-width:1080px;margin:0 auto;width:100%;position:relative;z-index:1;}
.slide-deco{position:absolute;pointer-events:none;z-index:0;}
.slide-deco.sparkle{width:clamp(48px,6vw,84px);height:clamp(48px,6vw,84px);top:10%;right:9%;}
.slide-deco.bolt{width:clamp(38px,5vw,66px);height:clamp(56px,7.5vw,98px);bottom:12%;right:16%;}
.slide-eyebrow{
  display:inline-block;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  padding:7px 16px;
  border:1px solid var(--line);
  border-radius:100px;
  margin-bottom:22px;
}

/* Content slides: asymmetric label-column layout, like the reference's
   CHALLENGE / SOLUTION byline rows -- label sits in a narrow left rail,
   everything else (title, copy, cards, media) flows in the wide column.
   Hero and closing slides stay full-width/centered, same as the
   reference's own intro section. */
.slide-inner:not(.slide-hero):not(.slide-closing) > .slide-eyebrow{
  display:block;
  border:none;
  padding:0;
  border-radius:0;
  background:none;
  font-weight:600;
  margin-bottom:20px;
}
@media (min-width:900px){
  .slide-inner:not(.slide-hero):not(.slide-closing){
    padding-left:224px;
  }
  .slide-inner:not(.slide-hero):not(.slide-closing) > .slide-eyebrow{
    position:absolute;
    top:8px;
    left:0;
    width:190px;
    margin-bottom:0;
  }
}
.slide-title{
  font-size:clamp(28px,4.6vw,54px);
  font-weight:800;
  color:var(--ink);
  line-height:1.1;
  margin:0 0 18px;
}
.slide-title .accent{color:var(--ink);}
.slide-sub{
  font-size:clamp(15px,1.6vw,19px);
  color:#2b2b2b;
  max-width:680px;
  line-height:1.6;
  margin:0 0 36px;
}
.slide-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px;}
.slide-tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 16px;
  border:1px solid var(--ink);
  border-radius:100px;
  font-size:13px;
  color:var(--ink);
  font-weight:600;
}
.slide-tag svg{flex:none;}
.slide-hero-stats{display:flex;flex-wrap:wrap;gap:16px;}
.slide-hero-stat{
  padding:16px 22px;
  border:1px solid var(--line);
  border-radius:14px;
  text-align:center;
  min-width:110px;
}
.slide-hero-stat .num{font-size:22px;font-weight:800;color:var(--ink);font-family:'Archivo','Archivo Placeholder',sans-serif;}
.slide-hero-stat .stat-label{font-size:12px;color:var(--muted);margin-top:4px;}

/* Editorial meta row (label + value), inspired by case-study byline rows */
.slide-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:44px;
  margin:40px 0 0;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.slide-meta-item{display:flex;flex-direction:column;gap:7px;}
.slide-meta-item .meta-label{
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
}
.slide-meta-item .meta-value{
  font-size:18px;
  font-weight:700;
  color:var(--ink);
  font-family:'Archivo','Archivo Placeholder',sans-serif;
}
.slide-meta-item .meta-value .meta-sub{
  font-weight:400;
  font-size:14px;
  color:var(--muted);
  font-family:'Inter','Inter Placeholder',sans-serif;
  margin-left:6px;
}

/* Soft showcase tray for product screenshots */
.slide-showcase{
  margin-top:36px;
  background:#efeee9;
  border-radius:24px;
  padding:clamp(20px,3vw,36px);
  display:flex;
  justify-content:center;
  align-items:center;
}
.slide-showcase img{
  max-height:38vh;
  max-width:100%;
  border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,0.1);
  display:block;
}

.slide-cards-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.slide-cards-grid.cols-1{grid-template-columns:1fr;}
.slide-cards-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.slide-cards-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.slide-cards-grid.narrow{max-width:700px;margin:0 auto;}
.slide-card{
  border:none;
  border-top:1px solid var(--line);
  border-radius:0;
  padding:22px 0 4px;
  background:transparent;
}
.slide-card h4{color:var(--ink);font-size:18px;font-weight:700;margin:0 0 10px;}
.slide-card p{color:#2b2b2b;font-size:15px;line-height:1.6;margin:0;max-width:440px;}
.slide-card .badge{
  display:block;
  margin-top:14px;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  background:none;
  padding:0;
  border-radius:0;
  color:var(--muted);
}

.slide-steps{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  align-items:flex-start;
  justify-content:center;
}
.slide-step{
  text-align:center;
  width:170px;
  padding:0 10px;
}
.slide-step .icon{
  width:56px;height:56px;
  border-radius:50%;
  border:1.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;
  font-size:20px;
  color:var(--ink);
}
.slide-step h5{color:var(--ink);font-size:15px;font-weight:700;margin:0 0 6px;}
.slide-step p{color:var(--muted);font-size:13px;line-height:1.5;margin:0;}
.slide-step-arrow{
  align-self:center;
  color:var(--muted);
  font-size:20px;
  margin-top:18px;
}

.slide-personas-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.slide-personas-grid.cols-2{grid-template-columns:repeat(2,1fr);max-width:760px;margin:0 auto;}
.persona-card{
  border:none;
  border-top:1px solid var(--line);
  border-radius:0;
  padding:24px 0 4px;
  background:transparent;
}
.persona-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.persona-avatar{width:40px;height:40px;border-radius:50%;background:rgba(17,17,17,0.06);display:flex;align-items:center;justify-content:center;font-size:18px;}
.persona-head h5{color:var(--ink);font-size:15px;font-weight:700;margin:0;}
.persona-head span{display:block;color:var(--muted);font-size:12px;margin-top:2px;}
.persona-section{margin-bottom:12px;}
.persona-section .label{font-size:11px;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);margin-bottom:6px;}
.persona-section ul{margin:0;padding-left:16px;color:#2b2b2b;font-size:13px;line-height:1.6;}

.slide-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px 40px;
}
.slide-stats-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.slide-stat-card{
  display:flex;
  flex-direction:column;
  text-align:left;
  padding:20px 0 4px;
  border:none;
  border-top:1px solid var(--line);
  border-radius:0;
}
.slide-stat-card .num{order:2;font-size:clamp(26px,3.4vw,38px);font-weight:800;color:var(--ink);font-family:'Archivo','Archivo Placeholder',sans-serif;margin-top:6px;}
.slide-stat-card .stat-label{order:1;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);}
.slide-stat-card .stat-desc{order:3;font-size:13px;color:var(--muted);margin-top:8px;line-height:1.5;}

.slide-media{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  background:#efeee9;
  border-radius:24px;
  padding:clamp(20px,3vw,36px);
}
.slide-media img{
  max-height:55vh;
  max-width:100%;
  border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,0.1);
}
.slide-media.single img{max-height:60vh;}

.slide-closing{text-align:center;}
.slide-closing .slide-title{margin:0 auto 20px;}
.slide-closing .slide-hero-stats{justify-content:center;margin-top:28px;}
.slide-closing .slide-sub{margin-left:auto;margin-right:auto;}

.deck-nav{
  position:fixed;
  bottom:24px;left:0;right:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
}
.deck-btn{
  width:46px;height:46px;
  border-radius:50%;
  border:1.5px solid var(--ink);
  background:var(--cream);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, opacity .2s ease;
}
.deck-btn:hover{background:var(--ink);color:var(--cream);}
.deck-btn:disabled{opacity:0.3;cursor:default;}
.deck-btn:disabled:hover{background:var(--cream);color:var(--ink);}
.deck-counter{
  color:var(--ink);
  font-size:14px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  min-width:64px;
  text-align:center;
}
a.deck-btn{
  width:auto;height:auto;
  padding:14px 24px;
  border-radius:100px;
  font-weight:600;
  font-size:15px;
}

@media (max-width:820px){
  .slide{padding:150px 22px 96px;}
  .slide-cards-grid, .slide-personas-grid, .slide-stats-grid{grid-template-columns:1fr;}
  .slide-cards-grid.cols-1,
  .slide-cards-grid.cols-3,
  .slide-cards-grid.cols-4,
  .slide-personas-grid.cols-2,
  .slide-stats-grid.cols-3{grid-template-columns:1fr;}
  .slide-steps{flex-direction:column;align-items:center;}
  .slide-step-arrow{display:none;}
  .slide-step{width:100%;}
}

/* ==========================================================================
   FIGMA DECK — "AI Attendance Module | UX Case Study" (project-arivoo.html)
   Source: figma.com/slides/uDPCGC76s5TtNPCGS4m4K1, 9 slides at 1920×1080.
   Every value below is measured from the Figma nodes (px @ 1920 wide).
   Desktop: the 1920×1080 stage is scaled to fit (--s set in script.js), so
   pixel values equal the Figma file. <=900px: tokens shrink and layout stacks.
   ========================================================================== */
@font-face{font-family:'Inter FS';font-weight:300;font-style:normal;font-display:swap;src:url(assets/fonts/inter3-300.woff2) format('woff2');}
@font-face{font-family:'Inter FS';font-weight:400;font-style:normal;font-display:swap;src:url(assets/fonts/inter3-400.woff2) format('woff2');}
@font-face{font-family:'Inter FS';font-weight:500;font-style:normal;font-display:swap;src:url(assets/fonts/inter3-500.woff2) format('woff2');}
@font-face{font-family:'Inter FS';font-weight:700;font-style:normal;font-display:swap;src:url(assets/fonts/inter3-700.woff2) format('woff2');}
body.deck-fs-page{
  /* colour */
  --fs-bg-dark:#191819;      /* slide 1 background, callouts, badge, bars */
  --fs-bg-light:#f1f1f1;     /* slides 2–9 background */
  --fs-ink:#191819;          /* primary text */
  --fs-ink-2:#595959;        /* secondary text (slide 3 sub, slide 4/8 body) */
  --fs-ink-3:#4d4d4d;        /* slide 3 card body */
  --fs-mute:#999999;         /* text on dark (eyebrow, labels, note) */
  --fs-idx:#8c8c8c;          /* slide 3 card index, slide 10 dark-card index */
  --fs-grey-808:#808080;     /* slide 10 'manual process' tag */
  --fs-grey-666:#666666;     /* slide 10 units / times */
  --fs-grey-b3:#b3b3b3;      /* slide 10 dark-card secondary text */
  --fs-surface:#ffffff;      /* cards */
  --fs-panel:#d9d9d9;        /* slide 9 image panel */
  --fs-on-dark:#ffffff;
  /* families */
  --fs-sans:'Inter FS','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;   /* Figma file renders Inter 3.x */
  --fs-mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-alt:'42dot Sans','Inter FS','Inter',system-ui,sans-serif;   /* slide 3 only */
  /* radii */
  --fs-r-card:20px; --fs-r-callout-lg:20px; --fs-r-callout-sm:12px; --fs-r-pill:40px; --fs-r-bar:2px;
  /* type sizes (named by Figma px size) */
  --fs-120:120px; --fs-96:96px; --fs-72:72px; --fs-64:64px; --fs-56:56px; --fs-48:48px; --fs-44:44px; --fs-40:40px;
  --fs-32:32px; --fs-30:30px; --fs-28:28px; --fs-26:26px; --fs-24:24px; --fs-22:22px; --fs-20:20px;
  --fs-18:18px; --fs-16:16px; --fs-14:14px;
  --fs-80:80px; --fs-18t:18px; --fs-12:12px;   /* 80 = slide 10 totals; 18t = slide 12 body; 12 = mono tags */
  background:var(--fs-bg-light);
}
body.deck-fs-page.deck-dark{background:var(--fs-bg-dark);}

/* slide shell + scaled stage */
.deck-fs .slide.fs{display:block;padding:0;overflow:hidden;color:var(--fs-ink);font-family:var(--fs-sans);}
.deck-fs .slide.fs[data-theme="dark"]{background:var(--fs-bg-dark);color:var(--fs-on-dark);}
.deck-fs .slide.fs[data-theme="light"]{background:var(--fs-bg-light);}
.fs-stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;margin:-540px 0 0 -960px;transform:scale(var(--s,.5));transform-origin:center;}
.fs-safe{box-sizing:border-box;position:relative;width:1920px;height:1080px;display:flex;flex-direction:column;justify-content:center;gap:40px;}
.fs-safe > *{flex-shrink:0;}
.fs-col{display:flex;flex-direction:column;gap:40px;}
.fs-head{display:flex;flex-direction:column;gap:16px;}
:where(.deck-fs .fs :is(h1,h2,h3,p,dl,dd,ul,ol)){margin:0;padding:0;}
:where(.deck-fs .fs :is(ul,ol)){list-style:none;}
/* site-wide h1–h3 are Archivo / -0.02em; the Figma deck is Inter, untracked */
.fs-display,.fs-title,.fs-h28,.fs-h28-34,.fs-h26,.fs-h24,.fs-row-title,
.fs-pgroup h3,.fs-feat h3,.fs-photo-body h3{font-family:var(--fs-sans);letter-spacing:normal;}
.fs-photo-body h3{font-family:var(--fs-alt);}

/* type roles */
.fs-eyebrow{font-family:var(--fs-mono);font-weight:400;font-size:var(--fs-18);letter-spacing:.12em;text-transform:uppercase;color:var(--fs-ink);}
.fs-eyebrow-px{letter-spacing:3px;}
.fs-display{font-weight:700;font-size:var(--fs-120);line-height:1;color:var(--fs-on-dark);}
.fs-title{font-weight:700;font-size:var(--fs-72);line-height:calc(80 / 72);}
.fs-title-auto{line-height:normal;}
.fs-title-64{font-size:var(--fs-64);line-height:calc(72 / 64);}
.fs-sub-light{font-weight:300;font-size:var(--fs-32);line-height:calc(42 / 32);color:var(--fs-on-dark);}
.fs-sub-22{font-weight:300;font-size:var(--fs-22);line-height:calc(38 / 22);}
.fs-lead-30{font-size:var(--fs-30);line-height:calc(40 / 30);}
.fs-lead-28{font-size:var(--fs-28);line-height:calc(40 / 28);}
.fs-lh-38{line-height:calc(38 / 28);}
.fs-h28{font-weight:500;font-size:var(--fs-28);line-height:calc(36 / 28);}
.fs-h28-34{font-weight:500;font-size:var(--fs-28);line-height:calc(34 / 28);}
.fs-h26{font-weight:500;font-size:var(--fs-26);line-height:calc(34 / 26);}
.fs-h24{font-weight:500;font-size:var(--fs-24);line-height:normal;}
.fs-body-22{font-size:var(--fs-22);line-height:calc(35 / 22);color:var(--fs-ink-2);}
.fs-body-20{font-size:var(--fs-20);line-height:calc(31 / 20);}
.fs-c-2{color:var(--fs-ink-2);}
.fs-op-50{opacity:.5;} .fs-op-65{opacity:.65;} .fs-op-70{opacity:.7;}
.fs-mono-16{font-family:var(--fs-mono);font-size:var(--fs-16);line-height:calc(24 / 16);letter-spacing:.08em;text-transform:uppercase;}
.fs-num-96{font-weight:700;font-size:var(--fs-96);line-height:calc(100 / 96);}
.fs-num-56{font-weight:700;font-size:var(--fs-56);line-height:calc(60 / 56);}
.fs-num-48{font-weight:700;font-size:var(--fs-48);line-height:normal;}

/* surfaces */
.fs-callout{background:var(--fs-bg-dark);color:var(--fs-on-dark);padding:20px 32px;line-height:normal;}
.fs-callout-lg{border-radius:var(--fs-r-callout-lg);}
.fs-callout-sm{border-radius:var(--fs-r-callout-sm);}
.fs-callout-24{font-weight:500;font-size:var(--fs-24);}
.fs-callout-22{font-weight:500;font-size:var(--fs-22);}
.fs-callout-22r{font-weight:400;font-size:var(--fs-22);}

/* 1 · title */
.fs-s1 .fs-safe{padding:140px 120px 96px;}
.fs-s1 .fs-col{width:920px;}
.fs-s1 .fs-eyebrow{color:var(--fs-mute);}
.fs-rule{height:1px;}
.fs-stats{display:flex;gap:64px;margin:0;}
.fs-stat{display:flex;flex-direction:column-reverse;gap:8px;}
.fs-stat-num{font-weight:700;font-size:var(--fs-56);line-height:calc(60 / 56);color:var(--fs-on-dark);margin:0;}
.fs-stat-label{font-family:var(--fs-mono);font-size:var(--fs-14);line-height:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--fs-mute);}
.fs-note{font-size:var(--fs-20);line-height:calc(28 / 20);color:var(--fs-mute);}

/* 2 · challenge */
.fs-s2 .fs-safe{padding:140px 96px 80px;}
.fs-hr{height:1px;background:var(--fs-ink);}
.fs-rows{display:flex;flex-direction:column;gap:24px;}
.fs-row{display:flex;align-items:center;gap:24px;}
.fs-row > div{display:flex;flex-direction:column;gap:4px;}
.fs-row-num{font-weight:700;font-size:var(--fs-44);line-height:normal;}
.fs-row-title{font-weight:500;font-size:var(--fs-28);line-height:normal;}
.fs-row-desc{font-size:var(--fs-22);line-height:calc(30 / 22);opacity:.7;}

/* 3 · origin story (42dot Sans) */
.fs-s3 .fs-safe{padding:150px 120px 80px;}
.fs-alt-title{letter-spacing:normal;font-family:var(--fs-alt);font-weight:400;font-size:var(--fs-72);line-height:calc(80 / 72);}
.fs-alt-sub{font-family:var(--fs-alt);font-weight:400;font-size:var(--fs-28);line-height:calc(38 / 28);color:var(--fs-ink-2);}
.fs-photo-cards{display:grid;grid-template-columns:repeat(3,538px);gap:32px;align-items:start;justify-content:start;}
.fs-photo-card{background:var(--fs-surface);border-radius:var(--fs-r-card);overflow:hidden;}
.fs-photo-card img{display:block;width:538px;height:252px;object-fit:cover;}
.fs-photo-body{display:flex;flex-direction:column;gap:8px;padding:24px 28px;font-family:var(--fs-alt);}
.fs-idx{font-family:var(--fs-mono);font-size:var(--fs-16);letter-spacing:.08em;color:var(--fs-idx);}
.fs-photo-body h3{font-weight:400;font-size:var(--fs-26);line-height:calc(32 / 26);}
.fs-photo-body p{font-size:var(--fs-20);line-height:calc(28 / 20);color:var(--fs-ink-3);}
.fs-caption{font-family:var(--fs-alt);font-size:var(--fs-24);line-height:calc(34 / 24);text-align:center;}

/* 4 · research goals */
.fs-s4 .fs-safe{padding:140px 153px 80px;}
.fs-s4 .fs-col{gap:64px;}
.fs-goals{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;}
.fs-goal{display:flex;flex-direction:column;gap:8px;}
.fs-goal-num{font-weight:700;font-size:var(--fs-40);line-height:normal;}

/* 5 · research approach */
.fs-s5 .fs-safe{padding:140px 96px 80px;}
.fs-num-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.fs-num-card{display:flex;flex-direction:column;gap:8px;background:var(--fs-surface);border-radius:var(--fs-r-card);padding:36px 32px;}
.fs-bar{width:80px;height:3px;border-radius:var(--fs-r-bar);background:var(--fs-ink);}
.fs-closing-24{font-weight:500;font-size:var(--fs-24);line-height:calc(34 / 24);opacity:.7;}

/* 6 · stakeholders */
.fs-s6 .fs-safe{padding:140px 120px 72px;justify-content:flex-start;}
.fs-personas{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;}
.fs-persona{display:flex;flex-direction:column;gap:24px;background:var(--fs-surface);border-radius:var(--fs-r-card);padding:36px;}
.fs-pgroup{display:flex;flex-direction:column;gap:8px;}
.fs-pgroup h3{font-weight:500;font-size:var(--fs-24);line-height:calc(32 / 24);}
.fs-pgroup ul{display:flex;flex-direction:column;gap:8px;}
.fs-pgroup li{font-size:var(--fs-20);line-height:calc(28 / 20);opacity:.75;}
.fs-pgroup li::before{content:"\2022\00a0\00a0";}

/* 7 · findings */
.fs-s7 .fs-safe{padding:140px 96px 72px;justify-content:flex-start;}
.fs-findings{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 24px;}
.fs-finding{display:flex;flex-direction:column;gap:16px;background:var(--fs-surface);border-radius:var(--fs-r-card);padding:28px;}

/* 8 · how it works */
.fs-s8 .fs-safe{padding:140px 120px 0;justify-content:flex-start;gap:0;}
.fs-s8 .fs-head{margin-bottom:122px;}
.fs-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:84px;}
.fs-step{display:flex;flex-direction:column;gap:16px;background:var(--fs-surface);border-radius:var(--fs-r-card);padding:32px 28px;}
.fs-timeline{position:absolute;left:0;top:396px;width:1920px;height:12px;}
.fs-tl-line{position:absolute;left:180px;top:6px;width:1278px;height:2px;background:var(--fs-ink);}
.fs-tl-dot{position:absolute;top:0;width:12px;height:12px;border-radius:50%;background:var(--fs-ink);}
.fs-constraint{display:flex;align-items:center;gap:24px;}
.fs-badge{background:var(--fs-bg-dark);color:var(--fs-on-dark);border-radius:var(--fs-r-pill);padding:10px 20px;font-family:var(--fs-mono);font-weight:700;font-size:var(--fs-22);line-height:normal;}
.fs-constraint p{font-size:var(--fs-24);line-height:calc(32 / 24);}

/* 9 · interface */
.fs-s9 .fs-safe{padding:205px 0 0 89px;justify-content:flex-start;gap:0;}
.fs-s9 .fs-col{width:864px;gap:67px;}
.fs-panel{position:absolute;z-index:2;top:0;bottom:0;right:0;left:calc(50% + var(--s,.5) * 101px);background:var(--fs-panel);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.fs-panel iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;}
.fs-panel-link{position:absolute;right:24px;bottom:26px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:100px;background:var(--fs-bg-light);border:1px solid var(--line);color:var(--fs-ink);font:500 14px/1 var(--fs-sans);}
.fs-panel-link:hover{background:#fff;}
.fs-feats{display:grid;grid-template-columns:503px auto;row-gap:53px;align-content:start;justify-content:start;min-height:262px;}
.fs-feat{display:flex;gap:8px;width:var(--fw);}
.fs-feat > div{display:flex;flex-direction:column;gap:8px;}
.fs-feat-num{font-size:var(--fs-24);line-height:normal;letter-spacing:2px;}
.fs-feat h3{font-weight:700;font-size:var(--fs-24);line-height:normal;}
.fs-feat p{font-weight:300;font-size:var(--fs-20);line-height:calc(28 / 20);}
.fs-closing-22{font-weight:500;font-size:var(--fs-22);line-height:calc(30 / 22);opacity:.7;}

/* 10 · the transformation (42dot Sans + Roboto Mono) */
.fs-alt-title.fs-lh-auto{line-height:calc(86 / 72);}
.fs-alt-sub.fs-lh-auto{line-height:calc(33 / 28);}
.fs-op-60{opacity:.6;}
.fs-s10 .fs-safe{padding:140px 120px 72px;}
.fs-arrow{position:absolute;left:828px;top:440px;font-family:var(--fs-alt);font-size:var(--fs-40);line-height:normal;color:var(--fs-ink);z-index:1;}
.fs-cmp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:48px;}
.fs-cmp{display:flex;flex-direction:column;gap:24px;background:var(--fs-surface);border-radius:var(--fs-r-card);padding:32px;font-family:var(--fs-alt);}
.fs-cmp-dark{background:var(--fs-bg-dark);color:var(--fs-on-dark);}
.fs-cmp-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;}
.fs-cmp-tag{font-family:var(--fs-mono);font-weight:700;font-size:var(--fs-14);letter-spacing:3px;text-transform:uppercase;line-height:normal;}
.fs-cmp-mode{font-family:var(--fs-mono);font-size:var(--fs-12);letter-spacing:2px;text-transform:uppercase;line-height:normal;color:var(--fs-grey-808);}
.fs-cmp-total{display:flex;align-items:baseline;gap:16px;}
.fs-cmp-big{font-size:var(--fs-80);line-height:1;}
.fs-cmp-unit{font-size:var(--fs-28);line-height:calc(33 / 28);color:var(--fs-grey-666);}
.fs-cmp-list{display:flex;flex-direction:column;gap:16px;}
.fs-cmp-list li{display:flex;align-items:center;gap:16px;}
.fs-cmp-idx{font-family:var(--fs-mono);font-size:var(--fs-18);line-height:normal;color:var(--fs-mute);}
.fs-cmp-txt{flex:1;font-size:var(--fs-22);line-height:calc(30 / 22);}
.fs-cmp-time{font-family:var(--fs-mono);font-size:var(--fs-18);line-height:normal;color:var(--fs-grey-666);}
.fs-cmp-dark .fs-cmp-mode,.fs-cmp-dark .fs-cmp-unit,.fs-cmp-dark .fs-cmp-time{color:var(--fs-grey-b3);}
.fs-cmp-dark .fs-cmp-idx{color:var(--fs-idx);}
.fs-saved{display:flex;align-items:center;gap:40px;}
.fs-saved p{flex:1;font-family:var(--fs-alt);font-size:var(--fs-24);line-height:calc(32 / 24);color:var(--fs-ink-2);}
.fs-badge-20{font-size:var(--fs-20);padding:14px 28px;white-space:nowrap;text-transform:uppercase;}

/* 11 · measurable results */
.fs-s11 .fs-safe{padding:140px 120px 80px;justify-content:flex-start;}
.fs-spacer{width:10px;height:12px;}
.fs-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
.fs-kpi{display:flex;flex-direction:column;gap:8px;background:var(--fs-surface);border-radius:var(--fs-r-card);padding:32px;font-family:var(--fs-alt);}
.fs-kpi-num{font-size:var(--fs-64);line-height:calc(76 / 64);}
.fs-kpi-label{font-family:var(--fs-mono);font-size:var(--fs-16);letter-spacing:2px;text-transform:uppercase;line-height:normal;opacity:.5;}
.fs-kpi-desc{font-size:var(--fs-22);line-height:calc(26 / 22);opacity:.7;}
.fs-bars{display:flex;align-items:center;gap:40px;}
.fs-bar-before{flex:none;box-sizing:border-box;width:55%;height:53px;display:flex;align-items:center;padding:0 24px;background:var(--fs-bg-dark);color:var(--fs-on-dark);border-radius:var(--fs-r-callout-sm);font-family:var(--fs-mono);font-size:var(--fs-16);letter-spacing:2px;text-transform:uppercase;}
.fs-bar-after{font-family:var(--fs-mono);font-size:var(--fs-16);letter-spacing:2px;text-transform:uppercase;line-height:normal;opacity:.7;}
.fs-closing-28{font-family:var(--fs-alt);font-size:var(--fs-28);line-height:1.3;}

/* 12 · smarter, faster, safer */
.fs-s12 .fs-safe{padding:140px 96px 80px;justify-content:flex-start;}
.fs-close-wrap{display:grid;grid-template-columns:520px 1fr;gap:60px;height:788px;}
.fs-close-left{display:flex;flex-direction:column;justify-content:center;gap:24px;}
.fs-close-eyebrow{font-family:var(--fs-mono);font-size:var(--fs-16);letter-spacing:3px;text-transform:uppercase;line-height:normal;}
.fs-close-title{font-weight:700;font-size:var(--fs-96);line-height:calc(100 / 96);letter-spacing:normal;font-family:var(--fs-sans);}
.fs-close-desc{font-size:var(--fs-24);line-height:calc(34 / 24);}
.fs-res-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,382px);gap:24px;}
.fs-res-card{display:flex;flex-direction:column;gap:16px;background:var(--fs-surface);border-radius:var(--fs-r-card);padding:28px;}
.fs-res-label{font-family:var(--fs-sans);font-weight:500;font-size:var(--fs-22);letter-spacing:2px;text-transform:uppercase;line-height:normal;}
.fs-res-desc{font-size:var(--fs-18t);line-height:calc(26 / 18);opacity:.65;}
.fs-lh-32{line-height:calc(32 / 22);}

/* ==========================================================================
   Reusable layouts for the other case studies (RICE Smart, BuzzEd, NABC).
   Same tokens as the AI Attendance deck; these only add layout variants.
   ========================================================================== */
.fs-tags{display:flex;flex-wrap:wrap;gap:12px 40px;margin:0;}
.fs-tags li{font-family:var(--fs-mono);font-size:var(--fs-14);letter-spacing:.08em;text-transform:uppercase;line-height:normal;color:var(--fs-mute);}
.fs-para{max-width:1400px;}
.fs-num-cards.n2{grid-template-columns:repeat(2,1fr);}
.fs-goals.cols-3{grid-template-columns:repeat(3,1fr);}
.fs-personas.cols-3{grid-template-columns:repeat(3,1fr);gap:24px;}
.fs-personas.cols-3 .fs-persona{padding:32px;}
.fs-pname{font-weight:500;font-size:var(--fs-28);line-height:calc(36 / 28);}
.fs-persona-text{font-size:var(--fs-22);line-height:calc(32 / 22);color:var(--fs-ink-2);}
.fs-mono-tag{font-family:var(--fs-mono);font-size:var(--fs-14);letter-spacing:.08em;text-transform:uppercase;line-height:1.4;opacity:.6;}
.fs-s8 .fs-head{min-height:184px;}
.fs-s8.no-tl .fs-head{margin-bottom:64px;min-height:0;}
.fs-s8.no-tl .fs-timeline{display:none;}
.fs-s8.no-tl .fs-steps{margin-bottom:0;}
/* side panel with an image (same panel as the interface slide) */
.fs-split .fs-safe{padding:0 0 0 89px;justify-content:center;gap:0;}
.fs-split .fs-col{width:864px;gap:48px;}
.fs-panel img{display:block;width:auto;height:auto;max-width:88%;max-height:90%;object-fit:contain;}

/* interactive prototype slide: step list beside the live phone */
.fs-psteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px;}
.fs-pstep{display:flex;gap:20px;align-items:flex-start;width:100%;box-sizing:border-box;text-align:left;font:inherit;color:var(--fs-ink);background:var(--fs-surface);border:0;border-radius:var(--fs-r-card);padding:14px 28px;cursor:pointer;transition:background .25s,color .25s,box-shadow .2s;}
.fs-pstep:hover{box-shadow:inset 0 0 0 2px var(--fs-ink);}
.fs-pstep:focus-visible{outline:2px solid var(--fs-ink);outline-offset:3px;}
.fs-pstep-n{flex:none;width:32px;font-family:var(--fs-mono);font-size:var(--fs-16);line-height:calc(30 / 16);letter-spacing:.08em;color:var(--fs-idx);}
.fs-pstep-b{display:block;min-width:0;}
.fs-pstep-t{display:block;font-family:var(--fs-sans);letter-spacing:normal;font-weight:500;font-size:var(--fs-24);line-height:calc(30 / 24);}
.fs-pstep-x{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;}
.fs-pstep-d{display:block;min-height:0;overflow:hidden;visibility:hidden;font-size:var(--fs-20);line-height:calc(28 / 20);color:var(--fs-grey-b3);transition:visibility 0s .3s;}
.fs-pstep-d > span{display:block;padding-top:8px;}
.fs-pstep[aria-current="step"]{background:var(--fs-bg-dark);color:var(--fs-on-dark);cursor:default;}
.fs-pstep[aria-current="step"]:hover{box-shadow:none;}
.fs-pstep[aria-current="step"] .fs-pstep-n{color:var(--fs-idx);}
.fs-pstep[aria-current="step"] .fs-pstep-x{grid-template-rows:1fr;}
.fs-pstep[aria-current="step"] .fs-pstep-d{visibility:visible;transition-delay:0s;}
.fs-hint{color:var(--fs-ink-2);}
@media (prefers-reduced-motion:reduce){.fs-pstep,.fs-pstep-x,.fs-pstep-d{transition:none;}}

/* screens gallery */
.fs-gal .fs-safe{padding:140px 120px 80px;justify-content:flex-start;}
.fs-gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.fs-gal-grid li{display:flex;align-items:center;justify-content:center;height:700px;background:var(--fs-panel);border-radius:var(--fs-r-card);overflow:hidden;}
.fs-gal-grid img{display:block;width:auto;height:auto;max-width:86%;max-height:92%;object-fit:contain;}

/* challenge / solution cards (comparison card with text) */
.fs-cmp-grid.pairs{row-gap:24px;}
.fs-cmp-body{font-size:var(--fs-28);line-height:calc(42 / 28);}

/* closing slide variants */
.fs-close-title.sm{font-size:var(--fs-72);line-height:calc(80 / 72);}
.fs-res-grid.rows{grid-template-columns:1fr;}
.fs-res-cell{display:flex;}
.fs-res-cell > a{flex:1;}
.fs-res-link{color:var(--fs-ink);transition:background .2s ease,color .2s ease;}
.fs-res-link:hover{background:var(--fs-bg-dark);color:var(--fs-on-dark);}
.fs-res-linktitle{font-weight:500;font-size:var(--fs-40);line-height:calc(48 / 40);}
.fs-pill{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:12px 20px;border-radius:var(--fs-r-pill);background:var(--fs-surface);border:1px solid var(--line);color:var(--fs-ink);font:500 16px/1 var(--fs-sans);}
.fs-pill:hover{background:var(--fs-bg-dark);color:var(--fs-on-dark);}

/* ==========================================================================
   BuzzEd now — layouts taken from its Figma deck (competitor table, journey
   cards, list cards beside images, problem solving). Same tokens.
   ========================================================================== */
.fs-tbl-sec .fs-safe{padding:140px 120px 80px;justify-content:flex-start;}
.fs-tbl-wrap{background:var(--fs-surface);border-radius:var(--fs-r-card);overflow:hidden;}
.fs-tbl{width:100%;border-collapse:collapse;table-layout:fixed;font-family:var(--fs-sans);}
.fs-tbl th,.fs-tbl td{height:52px;padding:0 24px;text-align:center;border-top:1px solid rgba(25,24,25,.08);}
.fs-tbl thead th{height:92px;border-top:0;vertical-align:middle;}
.fs-tbl thead th:first-child,.fs-tbl tbody th{text-align:left;}
.fs-tbl col.c0{width:34%;}
.fs-tbl-h{font-family:var(--fs-mono);font-weight:400;font-size:var(--fs-16);letter-spacing:.08em;text-transform:uppercase;}
.fs-tbl-name{font-weight:500;font-size:var(--fs-20);line-height:normal;}
.fs-tbl tbody th{font-weight:400;font-size:var(--fs-20);}
.fs-tbl .us{background:var(--fs-bg-dark);color:var(--fs-on-dark);border-top-color:rgba(255,255,255,.1);}
.fs-tbl .us img{display:block;height:54px;width:auto;margin:0 auto;}
.fs-mark{display:inline-grid;place-items:center;width:32px;height:32px;vertical-align:middle;}
.fs-mark svg{width:22px;height:22px;display:block;}
.fs-mark.no{color:var(--fs-grey-b3);}
.us .fs-mark{background:var(--fs-surface);color:var(--fs-ink);border-radius:50%;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.fs-jrn .fs-safe{padding:140px 120px 80px;justify-content:flex-start;}
.fs-jrn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.fs-jc{display:flex;flex-direction:column;gap:14px;background:var(--fs-surface);border-radius:var(--fs-r-card);padding:32px 28px;}
.fs-jc ul{display:flex;flex-direction:column;gap:6px;}
.fs-jc li{font-size:var(--fs-20);line-height:calc(31 / 20);color:var(--fs-ink-2);}
.fs-jc li::before{content:"\2022\00a0\00a0";}
.fs-jc-emotion{font-weight:500;font-size:var(--fs-24);line-height:normal;}
.fs-jc-pain{margin-top:auto;background:var(--fs-bg-dark);color:var(--fs-on-dark);border-radius:var(--fs-r-callout-sm);padding:14px 18px;font-size:var(--fs-20);line-height:calc(31 / 20);}
.fs-jc-spacer{margin-top:auto;}
.fs-jrn-line{display:flex;align-items:center;gap:20px;margin-top:8px;}
.fs-jrn-line i{flex:1;height:2px;background:var(--fs-ink);border-radius:var(--fs-r-bar);}

.fs-p-head{display:flex;align-items:center;gap:16px;}
.fs-avatar{width:60px;height:60px;border-radius:50%;flex:none;display:block;}
.fs-p-head p{margin:0;}
.fs-p-age{font-size:var(--fs-20);line-height:calc(28 / 20);color:var(--fs-ink-2);}

.fs-lcards{display:flex;flex-direction:column;gap:16px;}
.fs-lcard{display:flex;flex-direction:column;gap:8px;background:var(--fs-surface);border-radius:var(--fs-r-card);padding:24px 28px;}
.fs-lcard h3{font-family:var(--fs-sans);letter-spacing:normal;font-weight:500;font-size:var(--fs-28);line-height:calc(34 / 28);}
.fs-lcard p{font-size:var(--fs-20);line-height:calc(31 / 20);color:var(--fs-ink-2);}
.fs-lcard.dark{background:var(--fs-bg-dark);color:var(--fs-on-dark);}
.fs-lcard.dark p{color:var(--fs-grey-b3);}
.fs-split.has-cards .fs-col{gap:32px;}
.fs-split.has-proto .fs-col{gap:28px;}
.fs-panel.multi{gap:16px;padding:0 12px;box-sizing:border-box;}
.fs-panel.multi img{flex:0 1 auto;min-width:0;max-width:calc((100% - 24px - (var(--n) - 1) * 16px) / var(--n));max-height:88%;}

.fs-solve .fs-safe{padding:140px 120px 80px;justify-content:flex-start;gap:32px;}
.fs-solve-grid{display:grid;grid-template-columns:1fr 560px;gap:48px;align-items:start;}
.fs-opts{display:flex;flex-direction:column;gap:16px;}
.fs-opt{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:var(--fs-surface);border-radius:var(--fs-r-card);padding:22px 28px;}
.fs-opt h3{font-family:var(--fs-sans);letter-spacing:normal;font-weight:500;font-size:var(--fs-24);line-height:calc(32 / 24);}
.fs-opt p{margin-top:6px;font-size:var(--fs-20);line-height:calc(31 / 20);color:var(--fs-ink-2);}
.fs-opt.chosen{background:var(--fs-bg-dark);color:var(--fs-on-dark);}
.fs-opt.chosen p{color:var(--fs-grey-b3);}
.fs-verdict{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--fs-grey-b3);color:var(--fs-grey-666);}
.fs-verdict svg{width:22px;height:22px;display:block;}
.chosen .fs-verdict{background:var(--fs-surface);border-color:var(--fs-surface);color:var(--fs-ink);}
.fs-linkrow{display:flex;align-items:center;gap:16px;font-size:var(--fs-20);}
.fs-linkrow .fs-pill{align-self:center;}

/* ==========================================================================
   User-flow diagrams (vector): white cards + icon tiles joined by rounded
   connectors. Desktop draws the canvas; small screens show a stacked list.
   ========================================================================== */
.fs-flowsl .fs-safe{padding:140px 120px 80px;justify-content:flex-start;gap:28px;}
.fs-flow{position:relative;width:1680px;height:var(--fh);}
.fs-flow-svg{position:absolute;left:0;top:0;width:1680px;height:var(--fh);overflow:visible;pointer-events:none;}
.fs-flow-svg .ln{fill:none;stroke:var(--fs-grey-808);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.fs-flow-svg .ln.dash{stroke-dasharray:7 7;}
.fs-flow-svg .ah{fill:var(--fs-grey-808);}
.fs-flow-svg .sp{fill:var(--fs-ink);filter:drop-shadow(0 0 6px rgba(25,24,25,.35));}
.fs-fn{position:absolute;display:flex;align-items:center;gap:14px;box-sizing:border-box;width:var(--w);height:68px;padding:0 18px 0 12px;background:var(--fs-surface);border:1px solid rgba(25,24,25,.08);border-radius:var(--fs-r-callout-sm);}
.fs-fn .ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--fs-bg-light);color:var(--fs-ink-2);}
.fs-fn .ic svg{width:22px;height:22px;display:block;}
.fs-fn .t{font-weight:500;font-size:var(--fs-18t);line-height:1.25;}
.fs-fn small{display:block;margin-top:2px;font-weight:400;font-size:var(--fs-14);line-height:1.3;color:var(--fs-ink-2);}
.fs-fn.hub{background:var(--fs-bg-dark);color:var(--fs-on-dark);border-color:var(--fs-bg-dark);}
.fs-fn.hub .ic{background:rgba(255,255,255,.14);color:var(--fs-on-dark);}
.fs-fn.alt{border:1px dashed var(--fs-grey-808);background:transparent;}
.fs-flow-list{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.fs-lcards.row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.fs-lcards.row .fs-lcard{padding:20px 24px;}

/* vertical-centering utility: added to individual slides whose content is short for its template.
   Placed after every .fs-sN/.fs-jrn/.fs-flowsl/.fs-solve/etc rule above so it always wins regardless
   of which template it is combined with (equal selector specificity, so source order decides). */
.fs-vc .fs-safe{justify-content:center;padding-bottom:80px;}

/* deck chrome on this page */
@media (min-width:901px){
  .deck-fs-page .deck-topbar{top:34px;left:24px;padding:0;}
}
.deck-dark .deck-progress{background:rgba(255,255,255,.2);}
.deck-dark .deck-progress-bar{background:#fff;}
.deck-dark .deck-counter{color:#fff;}
.deck-dark .deck-btn{background:transparent;border-color:#fff;color:#fff;}
.deck-dark .deck-btn:hover{background:#fff;color:var(--fs-bg-dark);}
.deck-dark .deck-btn:disabled:hover{background:transparent;color:#fff;}
.deck-dark a:focus-visible,.deck-dark button:focus-visible{outline-color:#fff;}

/* small screens: drop the fixed stage, shrink tokens, stack everything */
@media (max-width:900px){
  body.deck-fs-page{
    --fs-120:44px; --fs-96:52px; --fs-72:34px; --fs-64:32px; --fs-56:34px; --fs-48:32px; --fs-44:28px; --fs-40:30px;
    --fs-32:20px; --fs-30:19px; --fs-28:19px; --fs-26:19px; --fs-24:17px; --fs-22:16px; --fs-20:15px;
    --fs-18:12px; --fs-16:12px; --fs-14:12px;
    --fs-80:48px; --fs-18t:15px; --fs-12:12px;
  }
  .deck-fs .slide.fs{overflow-y:auto;}
  .deck-fs .slide.fs-s9{display:flex;flex-direction:column;}
  .deck-fs .slide.fs-s9 > *{flex-shrink:0;}
  .fs-stage{position:relative;left:auto;top:auto;width:100%;height:auto;margin:0;transform:none;overflow:hidden;}
  .deck-fs .slide.fs .fs-safe{width:100%;height:auto;padding:164px 22px 110px;gap:28px;justify-content:flex-start;}
  .deck-fs .slide.fs .fs-col{width:100%;gap:28px;}
  .fs-head,.deck-fs .fs-s8 .fs-head{margin:0;}
  .fs-stats{flex-wrap:wrap;gap:24px 40px;}
  .fs-photo-cards,.fs-goals,.fs-personas,.fs-findings,.fs-steps{grid-template-columns:1fr;gap:16px;}
  .fs-goals{gap:24px;}
  .fs-num-cards{grid-template-columns:repeat(2,1fr);gap:12px;}
  .fs-photo-card img{width:100%;height:auto;aspect-ratio:538 / 252;}
  .fs-steps{margin-bottom:0;}
  .fs-timeline{display:none;}
  .fs-num-card{padding:22px 18px;} .fs-persona{padding:22px;} .fs-finding,.fs-step{padding:22px;}
  .fs-callout{padding:16px 18px;}
  .fs-constraint{align-items:flex-start;flex-direction:column;gap:12px;}
  .fs-feats{grid-template-columns:1fr;row-gap:20px;min-height:0;}
  .fs-feat{width:auto;}
  .fs-panel{position:relative;left:auto;top:auto;bottom:auto;order:2;width:100%;min-height:320px;}
  .fs-panel iframe{position:relative;inset:auto;display:block;height:700px;}
  .fs-panel{min-height:0;flex-direction:column;align-items:stretch;padding-bottom:96px;}
  .fs-panel-link{position:relative;right:auto;bottom:auto;margin:0 0 16px 22px;align-self:flex-start;}
  .deck-fs .slide.fs-s9 .fs-stage{order:1;}
  .fs-arrow{display:none;}
  .fs-cmp-grid,.fs-kpis,.fs-res-grid{grid-template-columns:1fr;gap:16px;}
  .fs-cmp,.fs-kpi,.fs-res-card{padding:22px;}
  .fs-res-grid{grid-template-rows:none;}
  .fs-close-wrap{grid-template-columns:1fr;height:auto;gap:28px;}
  .fs-saved{flex-direction:column;align-items:flex-start;gap:14px;}
  .fs-bars{flex-direction:column;align-items:flex-start;gap:12px;}
  .fs-bar-before{width:100%;}
  .fs-spacer{display:none;}
}

/* small screens: layouts added for the other case studies */
@media (max-width:900px){
  .deck-fs .slide.fs-split{display:flex;flex-direction:column;}
  .deck-fs .slide.fs-split > *{flex-shrink:0;}
  .deck-fs .slide.fs-split .fs-stage{order:1;}
  .fs-panel img{max-width:100%;max-height:640px;align-self:center;margin:24px 0 8px;}
  .fs-goals.cols-3,.fs-personas.cols-3{grid-template-columns:1fr;}
  .fs-personas.cols-3 .fs-persona{padding:22px;}
  .fs-gal-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .fs-gal-grid li{height:340px;}
  .fs-res-grid.rows{grid-template-rows:none;}
  .fs-res-link{min-height:150px;}
  .fs-pill{padding:12px 18px;}
  .fs-s8 .fs-head,.fs-s8.no-tl .fs-head{margin-bottom:0;min-height:0;}
}

/* small screens: BuzzEd layouts */
@media (max-width:900px){
  .fs-jrn-grid{grid-template-columns:1fr;gap:16px;}
  .fs-jc,.fs-lcard,.fs-opt{padding:22px;}
  .fs-pstep{padding:14px 18px;gap:14px;}
  .fs-pstep-n{width:24px;}
  .fs-solve-grid{grid-template-columns:1fr;gap:20px;}
  .fs-opt{grid-template-columns:1fr auto;gap:14px;}
  .fs-verdict{width:36px;height:36px;}
  .fs-tbl-wrap{overflow-x:auto;}
  .fs-tbl th,.fs-tbl td{padding:0 6px;height:46px;}
  .fs-tbl thead th{height:80px;}
  .fs-tbl col.c0{width:31%;}
  .fs-tbl-name{font-size:13px;line-height:1.25;}
  .fs-tbl-h{font-size:11px;}
  .fs-tbl tbody th{font-size:13px;line-height:1.3;padding-left:12px;}
  .fs-tbl .us img{height:34px;max-width:100%;}
  .fs-mark{width:26px;height:26px;}
  .fs-mark svg{width:17px;height:17px;}
  .fs-panel.multi{padding:24px;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-start;}
  .fs-panel.multi img{max-width:44%;max-height:420px;margin:0;}
  .fs-jrn-line{display:none;}
}

/* small screens: the flow becomes a stacked list */
@media (max-width:900px){
  .fs-flow{display:none;}
  .fs-flow-list{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:flex;flex-direction:column;gap:12px;}
  .fs-flow-list li{position:relative;display:flex;align-items:center;gap:12px;margin-left:calc(var(--lv, 0) * 16px);padding:12px 14px;background:var(--fs-surface);border:1px solid rgba(25,24,25,.08);border-radius:var(--fs-r-callout-sm);font-weight:500;font-size:var(--fs-18t);line-height:1.3;}
  .fs-flow-list li.hub{background:var(--fs-bg-dark);color:var(--fs-on-dark);}
  .fs-flow-list li.alt{border-style:dashed;background:transparent;}
  .fs-flow-list .ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--fs-bg-light);color:var(--fs-ink-2);}
  .fs-flow-list .hub .ic{background:rgba(255,255,255,.14);color:var(--fs-on-dark);}
  .fs-flow-list .ic svg{width:20px;height:20px;display:block;}
  .fs-flow-list small{display:block;font-weight:400;font-size:var(--fs-14);color:var(--fs-ink-2);}
  .fs-flow-list li:not(:last-child)::after{content:"";position:absolute;left:32px;bottom:-12px;width:2px;height:12px;background:var(--fs-grey-808);}
  .fs-lcards.row{grid-template-columns:1fr;gap:16px;}
}

/* ==========================================================================
   NABC case study: same deck theme as the other projects. Only the NABC-specific blocks (nb-*) live here;
   the app's own colours appear as content (palette swatches, UI samples), never as slide chrome.
   ========================================================================== */
/* mood board */
.nb-mood{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:112px 44px 44px;width:100%;height:100%;box-sizing:border-box;align-content:center;}
.nb-mood figure{margin:0;position:relative;border-radius:20px;overflow:hidden;height:204px;}
.fs-panel .nb-mood img{width:100%;height:100%;max-height:none;max-width:none;object-fit:cover;display:block;}
.nb-mood figcaption{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:40px;background:rgba(25,24,25,.78);color:#fff;font-size:var(--fs-14);line-height:1.2;}
/* roles */
.nb-roles{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.nb-role{background:#fff;border-radius:28px;padding:44px 0 0 48px;display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:end;overflow:hidden;height:660px;}
.nb-role.dark{background:var(--fs-bg-dark);color:var(--fs-on-dark);}
.nb-role > div:first-child{align-self:start;display:flex;flex-direction:column;gap:20px;}
.nb-role .k{font-family:var(--fs-mono);font-size:var(--fs-14);letter-spacing:.08em;text-transform:uppercase;color:var(--fs-idx);}
.nb-role h3{font-weight:700;font-size:var(--fs-44);line-height:1.1;}
.nb-role p{font-size:var(--fs-20);line-height:calc(28 / 20);color:var(--fs-ink-2);}
.nb-role.dark p{color:var(--fs-grey-b3);}
.nb-role ul{display:flex;flex-direction:column;gap:12px;margin-top:6px;}
.nb-role li{font-size:var(--fs-20);line-height:calc(28 / 20);padding-left:26px;position:relative;}
.nb-role li::before{content:"";position:absolute;left:0;top:10px;width:10px;height:10px;border-radius:50%;background:var(--fs-ink);}
.nb-role.dark li::before{background:var(--fs-on-dark);}
.nb-role img{width:300px;height:auto;border-radius:34px 34px 0 0;box-shadow:0 0 0 6px #111;align-self:end;margin-bottom:-2px;}
/* screens gallery */
.nb-gal{display:flex;gap:14px;justify-content:center;align-items:flex-start;}
.nb-gal li{flex:1;min-width:0;}
.nb-gal img{display:block;width:100%;height:auto;border-radius:22px;box-shadow:0 12px 28px rgba(0,0,0,.14);}
.nb-sl .fs-safe{padding:0 120px;}
.nb-sl .fs-head{max-width:1500px;}
@media (max-width:900px){
  .nb-roles{grid-template-columns:1fr;}
  .nb-role{grid-template-columns:1fr;height:auto;padding:28px 24px 0;}.nb-role img{width:70%;justify-self:center;}
  .nb-mood{grid-template-columns:1fr 1fr;padding:20px;}.nb-mood figure{height:120px;}
  .nb-gal{flex-wrap:wrap;}.nb-gal li{flex:0 0 calc(50% - 7px);}
}
/* NABC screens are taller than the other case studies' phones: keep them clear of the floating nav pill */
body.page-nabc .fs-panel img{max-height:80%;}
body.page-nabc .fs-panel .nb-mood img{max-height:none;}
/* NABC overview: a single photograph in the panel */
.fs-panel.nb-photo{padding:0;}
.fs-panel.nb-photo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border-radius:0;object-fit:cover;object-position:66% 50%;}
@media (max-width:900px){.fs-panel.nb-photo{min-height:340px;padding-bottom:0;}.fs-panel.nb-photo img{margin:0;max-height:none;}}
body.page-nabc .fs-panel.nb-photo img{max-height:none;}

/* generic: a single photograph filling the panel edge to edge, no letterboxing */
.fs-panel.full-bleed{padding:0;}
.fs-panel.full-bleed img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border-radius:0;object-fit:cover;}
@media (max-width:900px){.fs-panel.full-bleed{min-height:340px;padding-bottom:0;}.fs-panel.full-bleed img{margin:0;max-height:none;}}

/* RICE: static screens swapped by the step list (no prototype available) */
.fs-panel .rc-shot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s;}
.fs-panel .rc-shot.on{opacity:1;visibility:visible;transition:opacity .25s ease;}
.fs-panel .rc-shot img{max-height:82%;max-width:80%;width:auto;height:auto;}
@media (max-width:900px){.fs-panel .rc-shot{position:relative;display:none;}.fs-panel .rc-shot.on{display:flex;}.fs-panel .rc-shot img{max-height:560px;margin:24px 0 8px;}}
@media (prefers-reduced-motion:reduce){.fs-panel .rc-shot,.fs-panel .rc-shot.on{transition:none;}}

/* Virtual Try-on: wide (landscape) screens fill more of the panel; longer step list gets tighter spacing */
.fs-panel.wide .rc-shot img{max-width:94%;max-height:none;border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.2);}
@media (min-width:901px){
  /* landscape screens: give the panel more width, narrow the text column to match */
  .fs-panel.wide{left:calc(50% - var(--s,.5) * 150px);}
  .fs-split.has-wide .fs-col{width:690px;}
}
.fs-psteps.tight{gap:12px;}

/* STAN: prototype modal opened from a Thoughts card */
body.stan-lock{overflow:hidden;}
.stan-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(10,9,8,.72);backdrop-filter:blur(6px);}
.stan-modal[hidden]{display:none;}
.stan-panel{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center;width:min(940px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:36px;border-radius:24px;background:var(--near-black);color:var(--cream);}
.stan-x{position:absolute;right:14px;top:12px;z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(20,19,16,.8);color:var(--cream);font-size:24px;line-height:1;cursor:pointer;}
.stan-box{position:relative;height:min(680px,calc(100vh - 112px));aspect-ratio:420/780;border-radius:20px;overflow:hidden;background:#000 url('assets/stan/proto-poster.webp') center/cover no-repeat;}
.stan-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;}
/* lighting flash for the character-reveal step, a "game effect" layered over the live prototype.
   the embed's own load time varies a lot (Figma reloads itself internally after 'load' fires), so
   this plays as a spread of flicker pulses across several seconds rather than one precisely-timed
   flash -- it can't know exactly when the character actually paints, but a pulse will land near it. */
.stan-lightning{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(60% 60% at 50% 30%,rgba(220,235,255,.95),rgba(150,190,255,.5) 40%,transparent 70%);}
.stan-lightning.flash{animation:stanLightning 4.2s ease-out;}
@keyframes stanLightning{
  0%{opacity:0;} 2%{opacity:.95;} 5%{opacity:.1;} 8%{opacity:.7;} 12%{opacity:0;}
  48%{opacity:0;} 50%{opacity:.9;} 53%{opacity:.1;} 56%{opacity:.6;} 60%{opacity:0;}
  88%{opacity:0;} 90%{opacity:.85;} 93%{opacity:.08;} 96%{opacity:.5;} 99%{opacity:0;}
  100%{opacity:0;}
}
.stan-step{min-width:0;}
.stan-eyebrow{margin:0 0 10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.65;}
.stan-step h3{margin:0 0 12px;font-size:30px;line-height:1.1;font-weight:700;color:#fff;}
.stan-step p{font-size:15px;line-height:1.6;opacity:.85;}
.stan-progress{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.stan-dots{display:flex;gap:6px;}
.stan-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);transition:background .2s,transform .2s;}
.stan-dot.on{background:var(--cream);transform:scale(1.2);}
.stan-count{font-size:12px;letter-spacing:.06em;opacity:.5;}
.stan-form{display:flex;flex-direction:column;gap:14px;}
.stan-form[hidden],.stan-step[hidden]{display:none;}
.stan-form fieldset{border:0;margin:0;padding:0;}
.stan-form legend,.stan-form label{display:block;padding:0;font-size:14px;font-weight:500;color:#fff;}
.stan-form label span{font-weight:400;opacity:.65;}
.stan-form textarea,.stan-form input[type=email]{display:block;width:100%;margin-top:8px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:15px;line-height:1.5;resize:vertical;}
.stan-form textarea::placeholder,.stan-form input::placeholder{color:rgba(250,247,243,.45);}
.stan-form textarea:focus,.stan-form input:focus{outline:2px solid var(--cream);outline-offset:1px;}
.stan-stars{display:flex;gap:4px;margin-top:8px;}
.stan-stars button{width:38px;height:38px;border:0;background:none;padding:0;color:rgba(255,255,255,.25);cursor:pointer;transition:transform .15s,color .2s;}
.stan-stars button svg{width:100%;height:100%;fill:currentColor;}
.stan-stars button.on{color:#f5b301;}
.stan-stars button:hover{transform:scale(1.12);}
.stan-stars button:focus-visible,.stan-x:focus-visible{outline:2px solid var(--cream);border-radius:8px;}
.stan-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.stan-actions button,.stan-actions a{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border-radius:100px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;border:1.5px solid var(--cream);background:var(--cream);color:var(--near-black);text-decoration:none;}
.stan-actions .ghost,.stan-actions a{background:transparent;color:var(--cream);}
.stan-actions [hidden]{display:none;}
.stan-actions button:disabled{opacity:.6;cursor:default;}
.stan-msg{min-height:20px;margin:0;font-size:14px;font-weight:500;opacity:1!important;}
.stan-msg.err{color:#ff8f86;}.stan-msg.ok{color:#7ff29a;}
.stan-fine{margin:0;font-size:12px!important;line-height:1.5;opacity:.6!important;}
.stan-form.sent fieldset,.stan-form.sent label,.stan-form.sent .stan-fine,.stan-form.sent #stanBack{display:none;}
@media (max-width:820px){
  .stan-modal{padding:0;place-items:stretch;}
  .stan-panel{display:block;width:100%;max-height:100vh;height:100vh;border-radius:0;padding:56px 18px 28px;}
  .stan-box{height:auto;width:min(100%,320px);margin:0 auto 22px;}
  .stan-step h3{font-size:24px;}
}
@media (prefers-reduced-motion:reduce){.stan-lightning.flash{animation:none;}}

/* STAN surprise card: no thumbnail, just type + micro-animation */
.stan-surprise{--g:#39FF14;background:#0d0c10;display:flex;flex-direction:column;justify-content:space-between;padding:28px;color:#fff;isolation:isolate;}
.stan-surprise::before{content:"";position:absolute;inset:-10%;background:radial-gradient(120% 70% at 20% 0%,rgba(129,73,244,.55),transparent 60%),radial-gradient(90% 60% at 100% 100%,rgba(57,255,20,.16),transparent 60%);animation:ssGlow 7s ease-in-out infinite alternate;z-index:-1;}
.stan-surprise::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px);}
@keyframes ssGlow{to{transform:translate(-6%,4%) scale(1.15);opacity:.8;}}
.ss-tag{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;}
.ss-tag i{width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 0 0 rgba(57,255,20,.6);animation:ssPing 1.8s ease-out infinite;}
@keyframes ssPing{to{box-shadow:0 0 0 10px rgba(57,255,20,0);}}
.ss-type{display:block;min-height:3.3em;font-family:'Archivo','Archivo Placeholder',sans-serif;font-weight:700;font-size:clamp(28px,2.7vw,38px);line-height:1.1;letter-spacing:-.01em;text-wrap:balance;}
.ss-type::after{content:"";display:inline-block;width:.5em;height:.9em;margin-left:.12em;vertical-align:-.08em;background:var(--g);animation:ssBlink 1s steps(2,start) infinite;}
@keyframes ssBlink{to{visibility:hidden;}}
.ss-start{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:100px;background:var(--g);color:#0d0c10;font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;animation:ssPulse 1.6s ease-in-out infinite;transition:transform .2s;}
.ss-start em{font-style:normal;display:inline-block;transition:transform .2s;}
@keyframes ssPulse{50%{box-shadow:0 0 0 8px rgba(57,255,20,.18),0 0 26px rgba(57,255,20,.45);}}
.stan-surprise:hover .ss-start{transform:scale(1.06);}
.stan-surprise:hover .ss-start em{transform:translateX(5px);}
.stan-surprise:focus-visible{outline:3px solid var(--g);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){
  .stan-surprise::before,.ss-tag i,.ss-type::after,.ss-start{animation:none;}
}
/* locked: card is a static "coming soon" announcement, not an interactive control */
.stan-surprise.locked{cursor:default;pointer-events:none;opacity:.72;}
.stan-surprise.locked::before{animation:none;}
.stan-surprise.locked .ss-tag i{animation:none;background:rgba(255,255,255,.4);}
.stan-surprise.locked .ss-type::after{display:none;}
.stan-surprise.locked .ss-start{animation:none;background:rgba(255,255,255,.14);color:var(--cream);}

/* ============ LP LOADER: drag the tonearm onto the record to enter the site ============ */
:root {
  --lp-bg: #c8c8c8;
  --lp-bg-hi: #d6d6d6;
  --lp-deck: #efefef;
  --lp-ink: #2b2b2b;
  --lp-ink-soft: #6b6b6b;
  --lp-accent: #e8123f; /* matches the record label */
  --lp-size: min(72vmin, 500px);
}

html.lp-lock, html.lp-lock body { overflow: hidden; }

.lp-loader {
  position: fixed;
  /* 100vw (not right:0) so the loader is the same size with or without the page scrollbar -- unlocking
     scroll at lift-off then can't nudge the deck */
  inset: 0 auto 0 0;
  width: 100vw;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 90% at 50% 40%, var(--lp-bg-hi), var(--lp-bg) 60%, #b9b9b9);
  color: var(--lp-ink);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.lp-loader.is-leaving { opacity: 0; visibility: hidden; }
.lp-loader[hidden] { display: none; }
.lp-loader.is-leaving .lp-deck { transform: scale(1.08); }
.lp-loader.is-flying .lp-deck { transform: none; }

/* the record in flight from the loader to the hero "O" */
.lp-fly {
  position: fixed;
  z-index: 10000;
  border-radius: 50%;
  overflow: hidden;
  background: #0d0d0d;
  transform-origin: 0 0;
  pointer-events: none;
  will-change: transform;
}
html.lp-flying .lp-disk { opacity: 0; transition: none; }


.lp-stage { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(28px, 6vmin, 56px); }

/* desk-photo backdrop, focal point over its empty patch — desktop only */
@media (min-width: 900px) {
  /* the photo is its own layer so it can fade in once decoded, instead of snapping in over the plain gray */
  .lp-loader::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('assets/loader/desk-bg.webp') 52% 50% / cover no-repeat;
    opacity: 0;
    transition: opacity 1.1s ease;
  }
  .lp-loader.is-ready::before { opacity: 1; }
  :root { --lp-size: min(24vw, 380px); }
}

/* ---------- intro: nothing is shown until its assets are decoded, then it eases in together ---------- */
.lp-loader:not(.is-ready) .lp-stage { opacity: 0; animation: lp-failsafe 0s 4s forwards; } /* shows anyway if the script never marks it ready */
@keyframes lp-failsafe { to { opacity: 1; } }
.lp-loader.is-ready .lp-stage { animation: lp-rise 1.05s cubic-bezier(.2, .75, .2, 1) backwards; }
.lp-loader.is-ready .lp-hint { animation: lp-fade .7s ease .6s backwards; }
@keyframes lp-rise { from { opacity: 0; transform: translateY(24px) scale(.965); } }
@keyframes lp-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .lp-loader::before { transition: none; }
  .lp-loader.is-ready .lp-stage, .lp-loader.is-ready .lp-hint { animation: none; }
}

/* ---------- deck ---------- */
.lp-deck {
  position: relative;
  width: var(--lp-size);
  aspect-ratio: 1;
  border-radius: 22%;
  background: linear-gradient(150deg, #f8f8f8 0%, var(--lp-deck) 55%, #e6e6e6 100%);
  box-shadow:
    0 60px 90px -40px rgba(0, 0, 0, .55),
    0 24px 40px -24px rgba(0, 0, 0, .35),
    inset 0 2px 1px rgba(255, 255, 255, .9),
    inset 0 -4px 8px rgba(0, 0, 0, .06);
  transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}

.lp-platter {
  position: absolute;
  left: 8.5%; top: 8.5%;
  width: 83%; aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: #0d0d0d;
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .25);
}
.lp-disc {
  display: block;
  width: 102%; height: 102%;
  margin: -1%;
  object-fit: cover;
  pointer-events: none;
}

.lp-label {
  position: absolute;
  left: 50%; top: 50%;
  width: 30%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  background: var(--lp-accent);
  pointer-events: none;
}

.lp-spindle {
  position: absolute;
  left: 50%; top: 50%;
  width: 5%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, #9a9a9a 38%, #2b2b2b 70%, #6d6d6d 100%);
  box-shadow: 0 0 0 3px #111, 0 2px 4px rgba(0, 0, 0, .6);
  pointer-events: none;
}

.lp-led {
  position: absolute;
  left: 12.6%; top: 84.4%;
  width: 3%; aspect-ratio: 1;
  border-radius: 50%;
  background: #cfcfcf;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
  transition: background .3s, box-shadow .3s;
}
.lp-loader.is-playing .lp-led {
  background: var(--lp-accent);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--lp-accent) 70%, transparent), inset 0 -1px 2px rgba(0, 0, 0, .25);
  animation: lp-blink 1.1s ease-in-out infinite;
}
@keyframes lp-blink { 50% { opacity: .55; } }

/* ---------- tonearm ---------- */
.lp-arm-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.lp-arm {
  transform-box: view-box;
  transform-origin: 858px 137px;
  transition: transform .8s cubic-bezier(.3, 1.3, .5, 1);
}
.lp-arm.is-dragging, .lp-arm.is-tracking { transition: none; }
.lp-arm-hit {
  pointer-events: stroke;
  cursor: grab;
  outline: none;
}
.lp-arm-hit.fill { pointer-events: fill; }
.lp-arm.is-dragging .lp-arm-hit { cursor: grabbing; }
.lp-sr {
  position: absolute;
  left: 50%; bottom: -54px;
  transform: translateX(-50%);
  padding: 8px 14px;
  border: 0; border-radius: 999px;
  background: var(--lp-ink); color: #fff;
  font: inherit; font-size: 12px; white-space: nowrap;
  clip-path: inset(50%);
  opacity: 0;
}
.lp-sr:focus-visible { clip-path: none; opacity: 1; outline: 2px solid var(--lp-accent); outline-offset: 2px; }

/* pulsing target ring that nudges the user before first interaction */
.lp-nudge {
  transform-box: fill-box;
  transform-origin: center;
  animation: lp-nudge 1.8s ease-out infinite;
  pointer-events: none;
}
.lp-loader.has-touched .lp-nudge { display: none; }
@keyframes lp-nudge {
  0% { opacity: .7; transform: scale(.6); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* ---------- hint ---------- */
.lp-hint {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lp-ink-soft);
  min-height: 1.4em;
}
.lp-hint svg { width: 16px; height: 16px; }

@media (max-width: 520px) {
  :root { --lp-size: min(86vw, 420px); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-nudge, .lp-loader.is-playing .lp-led { animation: none; }
  .lp-arm { transition-duration: .01s; }
}