/* Parent Grid: 1 Row, 2 Columns */ 
.main-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; /* Splits into two equal columns */ 
  gap: 20px; 
} 

/* 🌟 ADDED TO BODY: Turns the entire viewport into a vertical scroll snapping runway */
html {
  scroll-snap-type: y mandatory; /* Forces a full, confident lock on the nearest card */
  scroll-padding-top: 9vh;      /* Gives 10% viewport height of structural padding "give" */
  scroll-padding-bottom: 9vh;
  scroll-behavior: smooth;
  height: 100%; /* required for Chrome to reliably register html as the scroll-snap container */
}
.left-col { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 60%; /* Let layout handle the half-screen split */
  height: 100vh; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  padding-left: 5%; 
  padding-right: 5%; 
  box-sizing: border-box; 
  pointer-events: none;   /* this text overlaps the left edge of the cards; never let it eat clicks */
}

/* 🌟 THE FIX: This container locks text characters perfectly, ignoring screen paddings */
.text-wrap-lock {
  min-width: 67ch;
  max-width: 67ch;
  width: 67ch;
}


/* 2. MAKE THE INTRODUCTION TEXT FADE OUT ON SCROLL */ 
.intro-fade { 
  font-family: "Pontano Sans", sans-serif; 
  font-optical-sizing: auto; 
  font-weight: 400; 
  font-style: normal; 
  margin: 0; 
  display: inline; 
  will-change: opacity;
} 

/* 3. KEEP THE STICKY PHRASE VISIBLE AND BOLD */ 
.HMW { 
display: inline; 
}

/* Shared typography fallback settings */ 
.pontano-sans-custom { 
  font-family: "Pontano Sans", sans-serif; 
  font-optical-sizing: auto; 
  font-weight: 400; 
  font-style: normal; 
  margin: 0; 
  display: inline; 
} 

.right-col-grid { 
grid-column: 2;             
display: grid; 
grid-template-rows: repeat(4, 1fr); 
gap: 700vh;
width: 40%; 
} 

.sub-row { 
  min-height: 85vh;
  min-width: 50vw;
  max-width: 50vw;  
  scroll-snap-align: center;     /* Magnetically aligns the row center to viewport center */
  scroll-snap-stop: always;
  align-items: right;      /* 🌟 ADDED: Prevents the user from accidentally skipping a row if they scroll fast */
} 

/* 🌟 ADDED: Smoothly keeps your hero frame locked on screen alongside left text */
.fixed-hero-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  width: 50%; /* Locks cleanly onto the right half of the main-grid layout */
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: opacity;
}

.hero-img { 
  width: 0%; 
  margin-top: 5%; 
} 

img { 
  border-radius: 14px; 
} 


/* --- DANCING DOTS BASE STYLE (Kept from your current file) --- */
.dot { 
  display: inline-block; 
  width: 8px; 
  height: 8px; 
  margin-left: 5px; 
  margin-top: 30px; 
  background-color: #5866F2; 
  border-radius: 50%; 
  opacity: 0; /* Dots 2 and 3 still start hidden */ 
  will-change: transform; 
  transition: opacity 0.2s ease; 
}

/* 🌟 ADDED: Makes the first dot behave like a permanent, tight period on load */
.period-dot {
  opacity: 1 !important;  /* Forces it to stay visible right from the start */
  margin-left: 2px;
}


body{
  background-color: #ffffff;
  padding: 0;
  margin: 0;
}

.case-study{
  display: flex;
  height: 100%;
  width: 100%;
  background-color: gray;
  border-radius: 58px 0px 0px 58px;
  margin: 0;
}

#case-study-one{
  background-color:  #5866F2;
}

#case-study-two{
  background-color:  #ED0086;
}

#case-study-three{
  background-color:  #EDED00;
}


  

/* Hide the 2nd and 3rd dots when a full sentence is deployed */
.HMW.has-text .dot:nth-child(even),
.HMW.has-text .dot:nth-child(odd):not(.period-dot) {
  opacity: 0 !important;
  transition: opacity 0.2s ease;
}


.completion-text {
font-family: "Pontano Sans", sans-serif;
font-weight: 400;          /* Matches your default regular paragraph font weight */
font-size: 33pt; 
display: inline;     /* Changed from inline to inline-block so transforms work perfectly */
vertical-align: top;       /* Keeps it aligned with the baseline of "How Might We" */
color: #111;

/* 🌟 THE SMOOTH STARTING STATE */
opacity: 0;                
transform: translateY(8px); /* Starts slightly lower down for a subtle lift-off look */

/* Increased from 0.2s to 0.4s and swapped 'ease' for an elegant cinematic curve */
transition: opacity 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000), 
            transform 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
will-change: opacity, transform;
}

.completion-text.active {
/* 🌟 THE ACTIVE STATE */
opacity: 1;
transform: translateY(0);   /* Glides smoothly back onto the main horizontal line */
}



h1{
font-size: 33pt;
}

/* ==========================================================================
   ● PAGE DOCK
   Horizontal row on mobile (36px above the bottom), vertical column on
   desktop. The open project is a dark dot attached to a flat pill of four
   chapter dots, with a grey close button just before it. No shadows.

   Every size is a ratio of --dock-dot (the project dot), measured from the
   design frame, so changing that one number rescales the whole dock.
   ========================================================================== */

:root {
  /* Mobile sizes (ratios of the 23px project dot, snapped to whole pixels) */
  --dock-dot: 23px;                /* project dot diameter */
  --dock-kid: 13px;                /* chapter dot            0.56 */
  --dock-close: 32px;              /* close circle           1.37 */
  --dock-glyph: 13px;              /* the X inside it        0.55 */
  --dock-gap: 17px;                /* between projects       0.75 */
  --dock-closegap: 10px;           /* close > open project   0.46 */
  --dock-tight: 6px;               /* dot > first chapter    0.28 */
  --dock-kidgap: 8px;              /* between chapters       0.36 */
  --dock-tail: 4px;                /* after the last chapter 0.18 */

  --dock-offset: 36px;                            /* distance from bottom of viewport */
  --dock-idle: #e9e9e9;
  --dock-pill: #e9e9e9;
  --dock-ink: #282827;                            /* current project */
  --dock-kid-bg: #ffffff;
  --dock-mid: #5f5f5f;                            /* current chapter (dark grey) */
  --dock-x: #1c1b1f;
  --dock-ease: cubic-bezier(0.77, 0, 0.175, 1);
}

@media (min-width: 769px) {
  :root {                          /* same ratios on the 19px desktop dot */
    --dock-dot: 19px;
    --dock-kid: 11px;
    --dock-close: 26px;
    --dock-glyph: 10px;
    --dock-gap: 14px;
    --dock-closegap: 9px;
    --dock-tight: 5px;
    --dock-kidgap: 7px;
    --dock-tail: 4px;
  }
}

.page-dock {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--dock-offset) + env(safe-area-inset-bottom, 0px));
  width: max-content;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--dock-gap);
  z-index: 80;
  transition: opacity 0.4s ease;
}

/* Home page hides the dock until the first case study is reached */
.page-dock.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* A group = one project. Closed: just a dot. Open: dot + pill. */
.dock-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--dock-tight);
  border-radius: 999px;
}

/* The pill sits behind the dot, flush with its left end, as its own layer
   so opening it only animates opacity. */
.dock-group::before {
  content: "";
  position: absolute;
  inset: calc(var(--dock-dot) * 0.02) 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--dock-pill);
  opacity: 0;
}

.dock-group.is-open::before {
  opacity: 1;
  animation: dock-fade 0.4s ease backwards;
}

/* --- project dot --- */
.dock-parent {
  position: relative;
  display: block;
  flex: none;
  width: var(--dock-dot);
  height: var(--dock-dot);
  border-radius: 50%;
  background-color: var(--dock-idle);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.dock-parent::after {           /* generous touch target */
  content: "";
  position: absolute;
  inset: -14px -4px;
}

.dock-parent:hover { transform: scale(1.1); }

.dock-parent.is-active,
.dock-group.is-open .dock-parent {
  background-color: var(--dock-ink);
  transform: none;
}

/* --- chapter dots (only the open group has them) --- */
.dock-kids {
  display: flex;
  align-items: center;
  gap: var(--dock-kidgap);
  padding: 0 var(--dock-tail) 0 0;
  transform-origin: left center;   /* grows out of the project dot */
  animation: dock-open 0.45s var(--dock-ease) 0.1s backwards;
}

.dock-kid {
  position: relative;
  display: block;
  flex: none;
  width: var(--dock-kid);
  height: var(--dock-kid);
  border-radius: 50%;
  background-color: var(--dock-kid-bg);
  transition: background-color 0.3s ease;
}

.dock-kid::after {
  content: "";
  position: absolute;
  inset: -12px -3px;
}

.dock-kid:hover { background-color: #d6d6d6; }

.dock-kid.is-current { background-color: var(--dock-mid); }

.dock-kid[aria-disabled="true"] {   /* chapter not on this page yet */
  opacity: 0.5;
  pointer-events: none;
}

/* --- close: grey circle just before the open project; returns home --- */
.dock-close {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--dock-close);
  height: var(--dock-close);
  border-radius: 50%;
  background-color: #FE5656;
  color: var(--dock-x);
  /* sits close to its project instead of a full project-gap away */
  margin-inline-end: calc(var(--dock-closegap) - var(--dock-gap));
  transition: transform 0.3s ease;
  animation: dock-fade 0.4s ease 0.15s backwards;
}

.dock-close svg {
  width: var(--dock-glyph);
  height: var(--dock-glyph);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: butt;
}

.dock-close::after {
  content: "";
  position: absolute;
  inset: -8px -2px;
}

.dock-close:hover { transform: scale(1.08); }

.dock-parent:focus-visible,
.dock-kid:focus-visible,
.dock-close:focus-visible {
  outline: 2px solid #5866F2;
  outline-offset: 3px;
}

@keyframes dock-open {
  from { opacity: 0; transform: scale(0.4); }
}

@keyframes dock-fade {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dock-parent, .dock-kid, .dock-close, .page-dock { transition: none; }
  .dock-kids, .dock-group::before, .dock-close { animation: none; }
}

/* Chapter anchors land using the html scroll-padding-top already set above. */

/* --- Desktop: vertical column in the original spot -------------------- */
@media (min-width: 769px) {
  .page-dock {
    inset: auto;
    right: 53%;                 /* home page: same place as the old side dots */
    top: 30%;
    width: auto;
    margin: 0;
    transform: translateY(-50%);
    flex-direction: column;
  }

  .page-dock.on-case {          /* case studies: tucked against the left edge */
    right: auto;
    left: 32px;
  }

  .dock-group::before { inset: 0 calc(var(--dock-dot) * 0.02); }

  .dock-group { flex-direction: column; }

  .dock-kids {
    flex-direction: column;
    padding: 0 0 var(--dock-tail);
    transform-origin: center top;
  }

  .dock-close {
    margin-inline-end: 0;
    margin-block-end: calc(var(--dock-closegap) - var(--dock-gap));
  }

  .dock-parent::after { inset: -4px -14px; }
  .dock-kid::after    { inset: -3px -12px; }
  .dock-close::after  { inset: -2px -8px; }
}

.case-meta {
  max-width: 46ch;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000),
              transform 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
  will-change: opacity, transform;
  margin-top: 18px;
  display: flex;
  gap: 20px;
  align-items: baseline;
}

.case-meta.active {
  opacity: 1;
  transform: translateY(0);
}

.case-year {
  font-family: "Pontano Sans", sans-serif;
  font-weight: 600;
  color: #111;
  flex-shrink: 0;
}

.case-description {
  font-family: "Pontano Sans", sans-serif;
  font-weight: 400;
  color: #999;
  margin: 0;
  line-height: 1.4;
}

footer{
  height: 120px;
  width: 100%;
  background-color: #ffffff;
}


/* ==========================================================================
   📱 MOBILE MEDIA QUERIES (PERFECT INITIAL LANDING FIX)
   ========================================================================== */
@media (max-width: 768px) {

  /* MIRRORS DESKTOP: Native viewport tracking configurations */
  html {
    scroll-snap-type: y mandatory; 
    scroll-padding-top: 9vh;      
    scroll-padding-bottom: 9vh;
    scroll-behavior: smooth;
    height: 100%; 
  }

  .main-grid {
    display: block; 
  }

  .left-col { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    padding-left: 24px; 
    padding-right: 24px; 
    box-sizing: border-box; 
    pointer-events: none; 
    z-index: 20;
  }

  /* 🌟 THE REPAIR: Added a 5th row to cleanly accommodate the intro layout space, 
     and replaced the loose padding with a controlled grid layout tracking matrix */
  .right-col-grid { 
    display: grid; 
    grid-column: auto;             
    grid-template-rows: repeat(5, 1fr); /* 🌟 Increased from 4 to 5 rows */
    gap: 120vh; 
    width: 100%; 
    padding-top: 0;                     /* 🌟 Reset padding so the first row handles the top */
  } 

  /* 🌟 THE INTRO LANDING PAD: Instead of hiding the first-child layout slot, 
     we give it a massive footprint to protect your intro paragraph text on load */
  .right-col-grid > .sub-row:first-child {
    display: flex;
    min-height: 100vh;
    height: 100vh;
    scroll-snap-align: start; /* 🌟 Snaps securely to the absolute top of the screen */
    scroll-snap-stop: always;
  }

  /* Hide desktop floating asset wrapper safely */
  .fixed-hero-wrapper {
    display: none;
  }

  /* MIRRORS DESKTOP: Identical viewport framing and rigid lock properties */
  .sub-row { 
    min-height: 85vh;
    min-width: 100%;
    max-width: 100%;  
    scroll-snap-align: center;     
    scroll-snap-stop: always;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start; 
  } 

  /* The 30vw offset lives on the link, not inside it, so the clickable area
     is exactly the card (a margin inside the <a> made the whole row clickable). */
  .sub-row > a {
    display: block;
    width: 70vw;
    margin-left: 30vw;
  }

  .case-study {
    width: 100%;
    height: 47vh;
    margin-left: 0;
    border-radius: 40px 0 0 40px;
  }

  /* Keep the text positioned independently of the snap rows */
  .intro-fade,
  .HMW,
  .case-meta {
    position: relative;
    top: 60%;
  }

  .text-wrap-lock {
    width: 48ch;
    min-width: 0;
    max-width: 100%;
  }

  h1,
  .pontano-sans-custom,
  .completion-text {
    font-size: 23pt;
  }

  .case-meta {
    max-width: 46ch;
    margin-top: 24px;
    gap: 14px;
  }



}

   

/* ==========================================================================
 📄 CASE STUDY PAGE
 Shared layout for case-study-one.html, case-study-two.html, etc.
 Accent color is set per page via an inline --case-accent custom property
 on <body>, so this single block styles all four case studies.
 ========================================================================== */

body {
--case-accent: #5866F2;
}

.case-page {
max-width: 1100px;
margin: 0 auto;
padding: 160px 5% 120px;
font-family: "Pontano Sans", sans-serif;
}

/* --- Header: title left, meta right --- */
.case-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
margin-bottom: 56px;
}

.case-title-block {
flex: 1;
max-width: 640px;
}

.case-title-block h1 {
line-height: 1.15;
margin: 0;
}

.dot-accent {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: var(--case-accent);
margin-left: 12px;
vertical-align: middle;
}

.case-info-block {
text-align: right;
color: #999;
font-size: 14px;
line-height: 1.8;
flex-shrink: 0;
padding-top: 10px;
white-space: nowrap;
}

.case-info-block .case-client {
color: #111;
font-weight: 600;
}

.case-info-block p {
margin: 0;
}

/* --- Hero --- */
.case-hero {
width: 100%;
min-height: 60vh;
border-radius: 32px;
background-color: var(--case-accent);
margin-bottom: 72px;
}

/* --- Section rhythm --- */
.case-section {
margin-bottom: 72px;
}

.case-section:last-of-type {
margin-bottom: 40px;
}

.section-label {
display: block;
font-size: 14px;
color: #999;
margin-bottom: 16px;
}

.section-body {
font-size: 18px;
line-height: 1.7;
color: #333;
max-width: 62ch;
margin: 0;
}

.section-body.wide {
max-width: 68ch;
}

/* --- What I did --- */
.did-list {
list-style: none;
margin: 0;
padding: 0;
max-width: 62ch;
}

.did-list li {
font-size: 18px;
line-height: 1.7;
color: #333;
padding-left: 22px;
position: relative;
margin-bottom: 14px;
}

.did-list li:last-child {
margin-bottom: 0;
}

.did-list li::before {
content: "";
position: absolute;
left: 0;
top: 11px;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--case-accent);
}

/* --- Metrics --- */
.metrics-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}

.metric-card {
background-color: #edf2ee;
border-radius: 20px;
padding: 32px 26px;
}

.metric-number {
display: block;
font-size: 38px;
color: #111;
font-weight: 500;
margin-bottom: 12px;
}

.metric-caption {
display: block;
font-size: 14px;
color: #909a92;
line-height: 1.5;
}

/* --- Placeholder image blocks --- */
.placeholder-block {
background-color: #edf2ee;
border-radius: 24px;
min-height: 460px;
display: flex;
align-items: center;
justify-content: center;
}

.placeholder-note {
color: #b7c2bb;
font-size: 14px;
}

.placeholder-block.small {
min-height: 200px;
margin-top: 20px;
border-radius: 18px;
}

.placeholder-block.feature-image {
min-height: 380px;
flex: 1;
margin: 0;
}

/* --- Big display heading (e.g. "The Problem") --- */
.display-heading {
font-weight: 400;
font-size: 72px;
line-height: 1.05;
margin: 0 0 28px;
color: #111;
}

/* --- Research grid --- */
.research-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}

.research-card h3 {
font-weight: 600;
font-size: 19px;
margin: 0 0 10px;
color: #111;
}

.research-card p {
font-size: 15px;
line-height: 1.6;
color: #666;
margin: 0;
}

/* --- Key insight pull quote --- */
.insight-block {
border-left: 3px solid var(--case-accent);
padding-left: 32px;
}

.insight-quote {
font-weight: 400;
font-size: 28px;
line-height: 1.4;
color: #111;
margin: 0;
max-width: 34ch;
}

/* --- Brainstorming / iteration --- */
.iteration-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 32px;
}

.iteration-card p {
margin: 16px 0 0;
font-size: 15px;
line-height: 1.6;
color: #666;
}

/* --- Final design feature rows --- */
.feature-row {
display: flex;
align-items: center;
gap: 56px;
margin-bottom: 56px;
}

.feature-row.reverse {
flex-direction: row-reverse;
}

.feature-row:last-child {
margin-bottom: 0;
}

.feature-text {
flex: 1;
}

.feature-text h3 {
font-weight: 600;
font-size: 24px;
margin: 0 0 14px;
color: #111;
}

.feature-text p {
font-size: 16px;
line-height: 1.7;
color: #666;
margin: 0;
max-width: 42ch;
}

/* --- Testimonial --- */
.case-testimonial {
margin: 40px 0 0;
padding: 0;
border: none;
font-size: 22px;
line-height: 1.5;
font-style: normal;
color: #111;
max-width: 56ch;
}

.case-testimonial cite {
display: block;
margin-top: 14px;
font-size: 14px;
color: #999;
font-style: normal;
}

/* --- Reflection --- */
.reflection-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 56px;
}

.reflection-card {
padding-top: 20px;
border-top: 1px solid #e5e5e5;
}

.reflection-card h3 {
font-weight: 600;
font-size: 19px;
margin: 0 0 12px;
color: #111;
}

.reflection-card p {
font-size: 15px;
line-height: 1.7;
color: #666;
margin: 0;
}

/* --- Footer nav --- */
.case-footer-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 40px;
border-top: 1px solid #e5e5e5;
}

.next-project {
text-decoration: none;
color: #111;
}

.next-label {
display: block;
font-size: 13px;
color: #999;
margin-bottom: 6px;
}

.next-title {
font-size: 20px;
}

.back-home {
text-decoration: none;
color: #999;
font-size: 14px;
transition: color 0.3s ease;
}

.back-home:hover {
color: #111;
}

/* --- Mobile --- */
@media (max-width: 768px) {
.case-page {
  padding: 120px 6% 80px;
}

.case-header {
  flex-direction: column;
  gap: 20px;
}

.case-title-block {
  max-width: 100%;
}

.case-title-block h1 {
  font-size: 28pt;
}

.case-info-block {
  text-align: left;
}

.case-hero {
  min-height: 42vh;
  border-radius: 24px;
  margin-bottom: 48px;
}

.case-section {
  margin-bottom: 56px;
}

.metrics-grid {
  grid-template-columns: repeat(2, 1fr);
}

.research-grid,
.iteration-grid,
.reflection-grid {
  grid-template-columns: 1fr;
  gap: 32px;
}

.feature-row,
.feature-row.reverse {
  flex-direction: column;
  gap: 24px;
}

.placeholder-block.feature-image {
  width: 100%;
}

.display-heading {
  font-size: 42px;
}

.insight-quote {
  font-size: 22px;
}

.case-footer-nav {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
}

/* ==========================================================================
   📄 CASE INTRO  (first screen of a case study: card left, summary right)
   Used by case-study-one.html. Mobile stacks it: card on top, text below.
   ========================================================================== */

.case-intro {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 54vw 1fr;
  column-gap: 2.5vw;
  align-items: center;
  padding: 4vh 5vw 0 6.8vw;
  font-family: "Pontano Sans", sans-serif;
}

.case-intro-card {
  height: 82vh;
  min-height: 420px;
  border-radius: 40px;
  background-color: var(--case-accent);
}

.case-intro-text h1 {
  margin: 0 0 28px;
  font-weight: 400;
  line-height: 1.2;
}

.case-intro-text .case-client {
  margin: 0 0 6px;
  font-size: 17px;
  color: #111;
}

.case-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  font-size: 17px;
  color: #999;
}

.case-intro-text h2 {
  margin: 44px 0 18px;
  font-weight: 400;
  font-size: 28px;
  color: #111;
}

.case-intro-text .section-body {
  font-size: 17px;
  line-height: 1.75;
  max-width: 54ch;
}

/* the long-form page continues right under the intro */
.case-page.after-intro { padding-top: 96px; }

@media (max-width: 768px) {
  .case-intro {
    display: block;
    min-height: 0;
    padding: 0;
  }

  .case-intro-card {
    height: 40vh;
    min-height: 0;
    border-radius: 0;
  }

  .case-intro-text { padding: 28px 6% 0; }

  .case-intro-text h1 { font-size: 23pt; margin-bottom: 20px; }

  .case-intro-text h2 { margin-top: 32px; font-size: 24px; }

  .case-page.after-intro { padding-top: 56px; }
}

/* ==========================================================================
   ● CURSOR — orange dot (default) that grows into a solid dot over anything
   clickable. Built from default.svg / hover.svg, rasterised at 1x and 2x so
   it is sharp on retina. Falls back to the normal cursor if images fail.
   ========================================================================== */
html {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 8 8'><circle cx='4' cy='4' r='5.3' fill='%23282827'/></svg>") 4 4, auto;
}

a,
button,
label,
summary,
[role="button"],
.case-study,
.dock-parent,
.dock-kid,
.dock-close {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 10 10'><circle cx='5' cy='5' r='3.36' fill='%23282827'/></svg>") 5 5, pointer;
}

/* ==========================================================================
   HOME CARD IMAGES
   Each image sits inside its colored card and bleeds off the top/right edge.
   ========================================================================== */
.case-study { position: relative; overflow: hidden; }

#case-study-four { background-color: #00C864; }

.card-img {
  position: absolute;
  width: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

#case-study-one   .card-img { left: 24.37vh; top: -34.98%; height: 126.27%; }
#case-study-two   .card-img { left: 12.37vh; top: 6.35%; height: 87.8%; }
#case-study-three .card-img { left: 10.9vh; top: 13%; height: 82.5%; border-radius: 0; }
#case-study-four  .card-img { left: calc(50% - 29.14vh); top: -51.23%; height: 145.57%; }  /* centred in the card */

@media (max-width: 768px) {
  /* Mobile cards keep the desktop card's proportions (720 x 765 on a
     1440 x 900 screen) and place each image as a share of the card, so the
     composition matches desktop and is identical on every phone. */
  .case-study { height: 74.375vw; }

  #case-study-one   .card-img { left: 30.4%; }
  #case-study-two   .card-img { left: 15.4%; }
  #case-study-three .card-img { left: 13.6%; }
  #case-study-four  .card-img { left: 50%; transform: translateX(-50%); }
}


/* ==========================================================================
   GLOBAL NAV + START-SCREEN ARROW
   ========================================================================== */
.global-nav {
  position: fixed;
  top: 20px;
  right: 23px;
  display: flex;
  gap: 33px;
  z-index: 90;
  font-family: "Pontano Sans", sans-serif;
  font-size: 14px;
  line-height: 1.3;
}

.global-nav a {
  color: #999;
  text-decoration: none;
  transition: color 0.2s ease;
}

.global-nav a:hover { color: #111; }

.scroll-arrow {
  position: fixed;
  left: 53.5vw;
  top: 90.7%;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  z-index: 5;
  will-change: opacity;
}

@media (max-width: 768px) {
  .global-nav { top: 16px; right: 16px; gap: 20px; font-size: 13px; }
  .scroll-arrow { left: 50%; top: auto; bottom: 36px; width: 48px; height: 48px; transform: translateX(-50%); }
}

/* ==========================================================================
   📄 CASE STUDY ROWS  (card left, text right — one chapter per screen)
   Shares the .case-intro grid. Card tint comes from --case-tint on <body>.
   ========================================================================== */

.case-intro-card,
.case-row-card {
  position: relative;
  overflow: hidden;
}

.case-intro-card img,
.case-row-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  user-select: none;
}

.case-intro .case-summary { margin-top: 44px; }

.case-row {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 54vw 1fr;
  column-gap: 2.5vw;
  align-items: center;
  padding: 4vh 5vw 4vh 6.8vw;
  font-family: "Pontano Sans", sans-serif;
}

.case-row-card {
  height: 70vh;
  min-height: 420px;
  border-radius: 40px;
  background-color: var(--case-tint, #edf2ee);
}

.case-row-text h2 {
  margin: 0 0 16px;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  color: #111;
}

.case-row-text .section-body {
  font-size: 16px;
  line-height: 1.75;
  max-width: 50ch;
}

/* one chapter per screen, matching the home page's snapping */
.case-intro,
.case-row {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

@media (max-width: 768px) {
  .case-row {
    display: block;
    min-height: 0;
    padding: 0 0 72px;
  }

  .case-row-card {
    height: 44vh;
    min-height: 0;
    border-radius: 0;
  }

  .case-row-text { padding: 24px 6% 0; }

  .case-intro .case-summary { margin-top: 28px; }
}


/* ==========================================================================
   TYPE BASELINE
   The browser never fakes bold/italic, so each Pontano Sans weight
   (loaded as a 300–700 variable font) renders as designed.
   ========================================================================== */
html {
  font-synthesis: none;
}

button, input, select, textarea {
  font: inherit;
}

b, strong { font-weight: 600; }


/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
html.no-snap { scroll-snap-type: none; }

.global-nav a[aria-current="page"] { color: #111; }

.about-page {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 30vw minmax(0, 1fr);
  column-gap: 12vw;
  align-items: center;
  padding: 120px 3.9vw 80px 9.6vw;
  color: #111;
  font-family: "Pontano Sans", sans-serif;
}

.about-text p {
  margin: 0 0 1.85em;
  font-size: clamp(15px, 1.15vw, 20px);
  font-weight: 400;
  line-height: 2.2;
}

.about-text p:last-child { margin-bottom: 0; }

.about-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

@media (max-width: 900px) {
  .about-page {
    display: flex;
    flex-direction: column-reverse;
    gap: 40px;
    padding: 80px 6% 64px;
  }

  .about-text p { font-size: 16px; line-height: 1.9; }
}


/* --- About page: close button back to home (matches the case-study dock X) --- */
.back-home {
  position: fixed;
  top: 16px;
  left: 20px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: var(--dock-close);
  height: var(--dock-close);
  border-radius: 50%;
  background-color: #FE5656;
  color: var(--dock-x);
  transition: transform 0.3s ease;
}

.back-home svg {
  width: var(--dock-glyph);
  height: var(--dock-glyph);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: butt;
}

.back-home:hover { transform: scale(1.08); }

.back-home:focus-visible {
  outline: 2px solid #5866F2;
  outline-offset: 3px;
  border-radius: 4px;
}


/* --- Case studies: a slim header band so the top-right links sit on
       white above the first image instead of over it --- */
:root { --case-header: 68px; }

.case-intro {
  padding-top: var(--case-header);
}

.case-intro-card {
  height: min(82vh, calc(100vh - var(--case-header) - 4vh));
}

@media (max-width: 768px) {
  :root { --case-header: 58px; }

  .case-intro { padding-top: var(--case-header); }

  .case-intro-card { height: 40vh; }
}


/* --- Case-study video card: the phone recording sits centred on the tint --- */
.case-row-card.has-video video {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  height: 88%;
  width: auto;
  max-width: 90%;
  object-fit: contain;
  border-radius: 28px;
}

@media (max-width: 768px) {
  .case-row-card.has-video video { border-radius: 16px; }
}


/* --- Case-study image cards keep the artwork's own proportions ---
   The images are designed as 1622 x 1338 cards (colour, padding and corners
   are part of the artwork), so the card takes that shape instead of a fixed
   height and nothing gets cropped. Width shrinks if needed to fit the screen. */
:root { --card-ratio: 1622 / 1338; --card-ratio-n: 1.2123; }

.case-intro-card:has(> img),
.case-row-card:has(> img) {
  height: auto;
  min-height: 0;
  aspect-ratio: var(--card-ratio);
  width: 100%;
  justify-self: start;
}

.case-intro-card:has(> img) {
  max-width: calc((100vh - var(--case-header) - 8vh) * var(--card-ratio-n));
}

.case-row-card:has(> img) {
  max-width: calc(88vh * var(--card-ratio-n));
}

.case-intro-card:has(> img) img,
.case-row-card:has(> img) img {
  object-fit: contain;
}

@media (max-width: 768px) {
  .case-intro-card:has(> img),
  .case-row-card:has(> img) {
    height: auto;
    max-width: none;
  }
}


/* --- Password gate (case studies one and two) ---
   Same parts as the rest of the site: Pontano Sans, grey #999 labels,
   the light-grey dock pill, the dark dock dot and the red close X. */
html.pw-locked { overflow: hidden; scroll-snap-type: none; }
html.pw-locked body > *:not(.pw-gate) { visibility: hidden; }

.pw-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: #fff;
  font-family: "Pontano Sans", sans-serif;
}

.pw-form {
  display: grid;
  gap: 14px;
  justify-items: center;
}

.pw-form label { font-size: 17px; color: #999; }

.pw-field {
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(300px, 80vw);
  padding: 6px 6px 6px 20px;
  border-radius: 999px;
  background: var(--dock-idle, #e9e9e9);
}

.pw-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 17px;
  color: #111;
  outline: none;
}

.pw-field input::placeholder { color: #999; }

.pw-field button {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dock-ink, #282827);
  color: #fff;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.pw-field button:hover { transform: scale(1.08); }

.pw-field button svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pw-field button:focus-visible { outline: 2px solid #5866F2; outline-offset: 2px; }

.pw-form.is-wrong .pw-field { animation: pw-shake 0.35s ease; background: #ffe3e3; }

@keyframes pw-shake {
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .pw-form.is-wrong .pw-field { animation: none; }
}


/* --- Home intro: identical line breaks on every phone ---
   On phones the sentence always reads
   "I’m Jacob, a designer, coder, / and asker of the question / How Might We".
   The breaks are fixed with <br class="m-br"> (hidden on desktop), and the
   type, side padding and HMW dots scale with the screen width so the longest
   line always fits. Capped at 480px so tablets don't get oversized text. */
.m-br { display: none; }

@media (max-width: 768px) {
  .m-br { display: inline; }

  .text-wrap-lock { width: 100%; }

  .left-col {
    padding-left: min(6.154vw, 29.54px);
    padding-right: min(6.154vw, 29.54px);
  }

  .left-col h1,
  .left-col .pontano-sans-custom,
  .left-col .completion-text {
    font-size: min(7.2vw, 34.56px);
  }

  .HMW .dot {
    width: min(1.88vw, 9px);
    height: min(1.88vw, 9px);
    margin-top: min(7.04vw, 33.8px);
  }

  .HMW .dot:not(.period-dot) { margin-left: min(1.17vw, 5.6px); }
  .HMW .period-dot { margin-left: min(0.47vw, 2.25px); }
}


/* --- Case study three: playable Past / Present / Future soundscape card ---
   Same shape as the image cards; everything inside scales with the card
   width (container units) so the buttons sit where they did in the image. */
.case-row-card.sound-card {
  height: auto;
  min-height: 0;
  aspect-ratio: var(--card-ratio);
  width: 100%;
  max-width: calc(88vh * var(--card-ratio-n));
  justify-self: start;
  container-type: inline-size;
  background-color: rgb(225, 225, 225);
  transition: background-color 1s ease;
  display: grid;
  place-items: center;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media (max-width: 768px) {
  .case-row-card.sound-card { max-width: none; }
}

.sound-buttons {
  display: flex;
  gap: 1.5em;
  font-size: 3.04cqw;
}

.sound-btn {
  all: unset;
  cursor: pointer;
  position: relative;
  border-radius: 999vw;
  background-color: rgba(0, 0, 0, 0.75);
  box-shadow: -0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25),
    0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1);
  transition: transform 250ms ease;
  -webkit-tap-highlight-color: transparent;
}

.sound-btn .button-outer {
  display: block;
  position: relative;
  border-radius: inherit;
  transition: box-shadow 300ms ease;
  box-shadow: 0 0.05em 0.05em -0.01em rgba(5, 5, 5, 1),
    0 0.01em 0.01em -0.01em rgba(5, 5, 5, 0.5),
    0.15em 0.3em 0.1em -0.01em rgba(5, 5, 5, 0.25);
}

.sound-btn:hover .button-outer { box-shadow: none; }

.sound-btn .button-inner {
  display: block;
  padding: 1em 1.5em;
  border-radius: inherit;
  background-image: linear-gradient(135deg, rgba(230, 230, 230, 1), rgba(180, 180, 180, 1));
  box-shadow:
    0 0 0 0 inset rgba(5, 5, 5, 0.1),
    -0.05em -0.05em 0.05em 0 inset rgba(5, 5, 5, 0.25),
    0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.5),
    0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15);
  transition: transform 200ms ease;
}

.sound-btn .button-label {
  display: block;
  font-weight: 500;
  line-height: 1.2;
  background-image: linear-gradient(135deg, rgba(25, 25, 25, 1), rgba(75, 75, 75, 1));
  -webkit-background-clip: text;
  background-clip: text;
  color: rgba(0, 0, 0, 0);
}

.sound-btn:active .button-inner,
.sound-btn.active .button-inner { transform: scale(0.95); }

.sound-btn:focus-visible { outline: 2px solid #5866F2; outline-offset: 0.35em; }

/* mute / unmute, bottom right of the card */
.sound-mute {
  all: unset;
  position: absolute;
  right: 3.2cqw;
  bottom: 3.2cqw;
  display: grid;
  place-items: center;
  width: max(32px, 4.6cqw);
  height: max(32px, 4.6cqw);
  border-radius: 50%;
  color: #3a3a3a;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.sound-mute:hover { background-color: rgba(0, 0, 0, 0.07); color: #111; }
.sound-mute:focus-visible { outline: 2px solid #5866F2; outline-offset: 2px; }

.sound-mute svg {
  width: 62%;
  height: 62%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sound-mute svg path:first-child { fill: currentColor; }
.sound-mute .icon-off { display: none; }
.sound-mute.is-muted .icon-on { display: none; }
.sound-mute.is-muted .icon-off { display: block; }

@media (prefers-reduced-motion: reduce) {
  .sound-btn, .sound-btn .button-inner, .sound-btn .button-outer { transition: none; }
}


/* Soundscape card: drifting shapes behind the buttons while a track plays */
.sound-card[data-mode="past"]    { background-color: rgba(196, 164, 132, 0.7); }
.sound-card[data-mode="present"] { background-color: rgba(135, 206, 235, 0.7); }
.sound-card[data-mode="future"]  { background-color: rgba(225, 225, 255, 0); }

.sound-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sound-card .sound-buttons,
.sound-card .sound-mute { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .case-row-card.sound-card { transition: none; }
}


/* --- Case study one cover: UGen sensors over the bottom-left of the card --- */
.case-study { position: relative; overflow: hidden; }
#case-study-one .card-sensors {
  left: -7.92vh;
  top: 41.6%;
  height: 70.2%;
  border-radius: 0;
  z-index: 1;
}

@media (max-width: 768px) {
  #case-study-one .card-sensors { left: -9.9%; }
}