:root{
  --bg: #ffffff;
  --text: rgba(10,10,10,.92);
  --accent: #e864ba;
  --home-color: #19a84b;

  --pad: 40px;

  /* Logo */
  --logo-size: 80px;
  --logo-track: 0.12em;
  --logo-weight: 800;

  /* Nav */
  --nav-size: 16px;

  /* 3D feel */
  --perspective: 900px;

  /* Explore grid */
  --grid-gap: 14px;

  /* Projects phone */
  --phone-w: 320px;
  --phone-h: 568px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  overflow-y: hidden; /* unlocked after intro finishes */
  font-family: "Montserrat", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* Prevent any flash before JS decides whether to play intro */
body.preload #logoBtn,
body.preload #siteHeader{
  opacity: 0 !important;
}

/* PAGE GRID */
#page{
  display: grid;
  grid-template-rows: 100vh auto auto auto auto auto auto;
}

/* Landing spacer */
#landing{ grid-row: 1; }

/* LOGO BUTTON */
#logoBtn{
  position: fixed;
  left: var(--pad);
  bottom: var(--pad);
  z-index: 10;
  text-decoration: none;
  color: var(--text);
  will-change: transform;
}

/* Logo text */
.logoText{
  display: inline-block;
  white-space: nowrap;
  font-size: var(--logo-size);
  font-weight: var(--logo-weight);
  letter-spacing: var(--logo-track);
  line-height: 1;

  perspective: var(--perspective);
  transform-style: preserve-3d;

  transition: color 700ms ease;
}

/* Logo stays solid green once home */
#logoBtn.is-home .logoText{ color: var(--home-color); }

.char{
  display: inline-block;
  vertical-align: baseline;
  white-space: pre;
  overflow: hidden;
  will-change: width, opacity, transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
}

/* =========================
   NAV (CENTERED + STICKY + DIFFERENCE)
   ========================= */

#siteHeader{
  grid-row: 1;
  align-self: center;

  position: sticky;
  top: 18px;
  z-index: 5;

  width: 100%;
  display: flex;
  justify-content: center;

  opacity: 0;
  pointer-events: none;

  mix-blend-mode: normal;
  isolation: auto;
}



.nav{
  display: flex;
  gap: 28px;
  font-size: var(--nav-size);
  font-weight: 400;
}

.nav a{
  display: inline-block;
  color: #ffffff;      /* base for blend-mode */
  text-decoration: none;
  opacity: 0.92;

  font-weight: 400;
  transition: opacity 140ms ease;

  min-width: 0;
}

/* Invisible bold clone reserves width */
.nav a::after{
  content: attr(data-label);
  font-weight: 800;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  display: block;
}

/* Hover becomes bold but does not move neighbors */
.nav a:hover{
  font-weight: 800;
  opacity: 1;
    color: var(--accent);
}

/* Active section = GREEN */
.nav a.is-active{
  font-weight: 800;
  color: var(--accent);
}

/* =========================
   INTRODUCTION
   ========================= */

#introduction{
  grid-row: 2;

  padding-top: 110px;
  padding-bottom: 130px;

  scroll-margin-top: 60px;

  display: flex;
  justify-content: center;
}

.intro-wrap{
  width: min(1100px, calc(100% - (var(--pad) * 2)));
}

/* Keep your existing centered content in the middle column */
#introduction .intro-wrap{
  grid-column: 2;
}

/* Right-side sticky title that scrolls away when section ends */
#introduction .section-side-title{
  grid-column: 3;
  justify-self: end;

  position: sticky;
  top: 50vh;
  transform: translateY(-50%);

  margin-right: var(--pad);

  font-size: 12px;
  letter-spacing: 0.10em;
  font-weight: 800;

  /* informational only */
  pointer-events: none;
  user-select: none;
}


.intro-title{
  font-size: 12px;
  letter-spacing: 0.10em;
  font-weight: 800;
  margin-bottom: 18px;
}

.intro-copy{
  width: min(840px, 100%);
  margin: 0 auto;          /* centers the block itself */
  text-align: center;      /* centers the text inside */
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0.01em;
}


.intro-copy p{ margin: 0 0 14px 0; }
/* Intro: green highlight words (informational only, no hover, no click) */
.intro-copy .intro-highlight{
  color: var(--home-color);
  font-weight: inherit;
  text-decoration: none;
}


/* =========================
   EXPLORE (9 tiles, vertical 5x7)
   ========================= */

#gallery{
  grid-row: 3;

  padding-top: 20px;
  padding-bottom: 80px;

  scroll-margin-top: 40px;

  display: flex;
  justify-content: center;
}

.grid{
  width: min(1100px, calc(100% - (var(--pad) * 2)));

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.tile{
  width: 100%;
  background: transparent;     /* was #000 */
  border-radius: 3px;
  overflow: hidden;

  aspect-ratio: 5 / 7;
  transition: transform 260ms ease, box-shadow 260ms ease;
}

/* make sure the video fills the tile */
.tile video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: transparent;
}

.tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.16);
}

/* =========================
   ABOUT (INTEGRATED)
   ========================= */

#about{
  grid-row: 4;

  padding-top: 140px;
  padding-bottom: 320px; /* BIG GAP before Projects (safe) */

  scroll-margin-top: 60px;

  display: flex;
  justify-content: center;
}

.about-wrap{
  width: min(1100px, calc(100% - (var(--pad) * 2)));
}

.three-col{
  width: min(980px, 100%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 68px;
}

.col-title{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.col p{
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

.bottom-statement{
  width: min(820px, 100%);
  margin: 130px auto 0;
  text-align: center;
}

.statement-line{
  margin: 0 0 14px 0;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.statement-line strong{ font-weight: 800; }

/* =========================
   PROJECTS (SCOPED)
   ========================= */

/* keep your good landing behavior */
#projects{
  grid-row: 5;

  scroll-margin-top: calc((100vh - var(--phone-h)) / 2);
  padding-top: 0;
  padding-bottom: 160px;

  display: flex;
  justify-content: center;
}



.projects-wrap{
  width: min(1100px, calc(100% - (var(--pad) * 2)));
  padding-top: 0;
  margin-bottom: -80px; 
}

#projects{ padding-bottom: 0px; }

.projects-layout{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 34px;
  align-items: start;
}

/* Sticky phone column (sticks ONLY within #projects) */
#projects .projects-left{
  position: sticky;
  top: 0;
  height: 75vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
}

/* Phone container */
#projects .video-container{
  width: var(--phone-w);
  height: var(--phone-h);
  background: #ffffff;
  /* border-radius: 15px; */
  position: relative;
  overflow: hidden;
  flex-shrink: 0;

  --slide-h: var(--phone-h);
}

#projects .video-track{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  display: flex;
  flex-direction: column;

  transform: translateY(0);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Phone SVG overlay (no layout changes) */
#projects .video-container{
  position: relative; /* needed so overlay can absolute-position */
}

/* --- SCREEN WINDOW (clip the video so it can't bleed under the bezel) --- */
#projects .video-container{
  --screen-top: 22px;
  --screen-right: 26px;
  --screen-bottom: 22px;
  --screen-left: 26px;
  --screen-radius: 38px;
}

/* clip the moving video stack */


#projects .phoneFrameOverlay{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  z-index: 999;
  display: block;
}

/* ensures SVG scales perfectly inside container */
#projects .phoneFrameOverlay svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* Force SVG to fully cover the container */
#projects .phoneFrameOverlay svg{
  width: 395%;
  height: 395%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  pointer-events: none;
}

#projects .phoneFrameOverlay svg{
  backface-visibility: hidden;
  transform: translate(-50%, -50%) translateZ(0);
}

#projects .phoneFrameOverlay{
  overflow: visible;
}

@media (max-width: 900px){
  #projects .phoneFrameOverlay{
    display: none;
  }
}





/* Each slide exactly one phone screen tall */
#projects .slide{
  position: relative;
  width: 100%;
  height: var(--slide-h);
  flex: 0 0 var(--slide-h);
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

#projects .slide video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay pinned to bottom */
#projects .overlay{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 10;

  display: flex;
  flex-direction: column;
  gap: 6px;

  pointer-events: none;
}

#projects .overlay::before{
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  bottom: -18px;
  height: 160px;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
  z-index: 0;
}

#projects .overlay-title,
#projects .overlay-meta{
  position: relative;
  z-index: 1;
  color: #ffffff;
}

/* Right list column */
#projects .projects-right{
  display: block;
}

#projects .client-list{
  width: var(--phone-w);
  padding-top: 0px;
  padding-bottom: 0px;

  display: flex;
  flex-direction: column;
  gap: 50px;

  transform: translateY( -15px);
}

#projects .projects-left{
  top: 80px;
}


#projects .client{
  font-size: 16px;     /* smaller text */
  line-height: 1.35;
  cursor: pointer;
  transition: transform 0.15s ease;
  font-weight: 800;
  letter-spacing: 0.02em;
}

#projects .client:hover{ transform: scale(1.06); }
#projects .client.is-active{ transform: scale(1.06); }


/* =========================
   CLIENT LIST — SPACING + SCALE + HOVER COLOR
   ========================= */


#projects .client{
  font-size: 22px;           /* larger type */
  line-height: 1.2;
  letter-spacing: 0.04em;
  font-weight: 800;

  white-space: nowrap;       /* keep brand names on one line */
  overflow-wrap: normal;
  word-break: normal;

  color: rgba(10,10,10,88);
  transition:
    transform 0.18s ease,
    color 0.18s ease,
    letter-spacing 0.18s ease;
}

/* Hover state */
#projects .client:hover{
  color: var(--home-color);  /* your green */
  letter-spacing: 0.06em;
  transform: scale(1.08);
}

/* Active (synced to phone) */
#projects .client.is-active{
  color: var(--home-color);
  letter-spacing: 0.06em;
  transform: scale(1.08);
}

/* =========================
   TEAM (INTEGRATED)
   ========================= */

#team{
  grid-row: 6;

  padding-top: 280px;     /* keep the top breathing room */
  padding-bottom: 0px;  /* MUCH tighter so contact bar appears sooner */

  scroll-margin-top: -100px;

  display: flex;
  justify-content: center;
}


.team-wrap{
  width: min(1100px, calc(100% - (var(--pad) * 2)));
}

.bio{
  width: min(860px, 100%);
  margin: 0 auto;
}

.bio-name{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.10em;
  margin-bottom: 18px;
}

.bio-copy{
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: rgba(10,10,10,.78);
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 980px){
  .three-col{
    width: min(760px, 100%);
    gap: 46px;
  }
}

@media (max-width: 900px){
  :root{
    --pad: 22px;
    --nav-size: 15px;
    --grid-gap: 12px;
  }

  #introduction{
    padding-top: 92px;
    padding-bottom: 110px;
  }

  .grid{
    width: min(900px, calc(100% - (var(--pad) * 2)));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px; /* keeps it tighter on iPad */
  }

  #about{
    padding-top: 120px;
    padding-bottom: 240px;
  }

  #projects{
    padding-bottom: 140px;
  }

  .projects-layout{
    grid-template-columns: 1fr;
    row-gap: 48px;
  }

  #projects .projects-left{
    position: relative;
    top: auto;
    height: auto;
    padding: 0;
  }

  #projects .projects-right{
    min-height: auto;
  }

}


@media (max-width: 820px){
  .three-col{
    grid-template-columns: 1fr;
    gap: 36px;
  }

  

  .bottom-statement{
    margin-top: 80px;
    text-align: left;
  }

  .statement-line{ font-size: 16px; }
}

@media (max-width: 520px){
  :root{
    --pad: 18px;
    --logo-size: clamp(28px, 7.2vw, 44px);
    --logo-track: 0.10em;
    --nav-size: 14px;
    --grid-gap: 10px;

    /* ✅ TRUE 9:16 */
    --phone-w: min(360px, calc(100vw - 24px));
    --phone-h: calc(var(--phone-w) * 16 / 9);
  }

  .nav{ gap: 20px; }

  .grid{
    width: min(420px, calc(100% - (var(--pad) * 2)));
    grid-template-columns: 1fr;
  }

  #projects .client{
    font-size: 15px;
  }
}

@media (max-width: 520px){
/* --- PHONE SCREEN WINDOW (tune these to match your SVG opening) --- */
#projects .video-container{
  width: calc(100vw - 24px);
  height: calc(100vh - 32px);

  margin: 16px auto;

  border-radius: 20px; /* subtle, premium */
  overflow: hidden;
  background: #000;

  position: relative;
  isolation: isolate;
}

/* Clip ONLY the video to the screen opening */
#projects .slide video{
  inset: 0 !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
/* Make sure the slide itself doesn't clip the overlay */
/* Keep each slide clipped (prevents “original div flash” during switch) */
#projects .slide{
  overflow: hidden;
}

/* Make sure overlays always render above video */
#projects .overlay{
  z-index: 30;
}

/* Force the whole phone stack to composite consistently */
#projects .video-container{
  transform: translateZ(0);
  backface-visibility: hidden;
}

#projects .video-track{
  will-change: transform;
  transform: translateZ(0);
}

/* Keep overlay inside the screen area (so it looks "in the phone") */
#projects .overlay{
  left: calc(var(--screen-left) + 14px);
  right: calc(var(--screen-right) + 14px);
  bottom: calc(var(--screen-bottom) + 14px);
}

/* Optional: keep the gradient from bleeding outside the screen */
#projects .overlay::before{
  left: calc(-1 * (var(--screen-left) + 14px));
  right: calc(-1 * (var(--screen-right) + 14px));
  bottom: calc(-1 * (var(--screen-bottom) + 14px));
}



}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  body{ overflow-y: auto; }
  #siteHeader{ opacity: 1; pointer-events: auto; }
}

/* =========================================
   RIGHT-SIDE STICKY SECTION TITLE (global)
   - visibility controlled by existing active-section logic in JS
   ========================================= */
.sideTitle{
  position: fixed;
/* center within the right "gutter" (halfway between content edge and viewport edge) */
right: calc(
  var(--pad) +
  (
    (100vw - min(1100px, calc(100% - (var(--pad) * 2)))) / 4
  )
);
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;

  font-size: 12px;
  letter-spacing: 0.10em;
  font-weight: 800;
  color: var(--text);

  opacity: 0;
  pointer-events: none;
  user-select: none;

  transition: opacity 160ms ease;

  /* Anchor to the content's right edge, then push into the right margin */
left: calc(
  50% + (min(1100px, calc(100% - (var(--pad) * 2))) / 2) + 24px
);
right: auto;

/* Keep it from spilling into content on narrower viewports */
max-width: min(220px, calc((100vw - min(1100px, calc(100% - (var(--pad) * 2)))) / 2 - 24px));
text-align: center;

}

@media (max-width: 900px){
  .sideTitle{
    left: auto;
    right: var(--pad);
    max-width: 200px;
    text-align: right; /* optional: tighter on small screens */
  }
}


.sideTitle.is-visible{
  opacity: 1;
}

/* Side title text animation (swap: old goes up/out, new comes from below) */
.sideTitle .sideTitleText{
  display: inline-block;
  transform: translateY(0);
  opacity: 1;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
  will-change: transform, opacity;
}

/* animate old word up and out */
.sideTitle.is-exiting .sideTitleText{
  transform: translateY(-28px);
  opacity: 0;
}

/* start position for new word (below) */
.sideTitle.is-enter-prep .sideTitleText{
  transform: translateY(28px);
  opacity: 0;
    transition: none;
}

/* animate new word into place */
.sideTitle.is-entering .sideTitleText{
  transform: translateY(0);
  opacity: 1;
}


/* Hide scrollbars */
::-webkit-scrollbar{ width: 0px; height: 0px; }
*{ scrollbar-width: none; }

.char{
  transform: translateZ(0);
  will-change: transform, opacity;
}
.teamcredits{
  max-width: 1100px;
  padding: 40px 32px;
  text-align: center;
}

/* Main paragraph block */
.teamcreditLine{
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Small role labels */
.teamrole{
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: 4px;
}

/* Names stand out */
.teamname{
  font-weight: 900;
  text-transform: uppercase;
}

/* Mobile tuning */
@media (max-width: 640px){
  .teamcreditLine{
    font-size: 18px;
    line-height: 1.25;
  }
}

/* =========================
   TEAM (INTEGRATED)
   ========================= */

#team{
  grid-row: 7;
  padding-top: 320px;
  padding-bottom: 320px;

  /* leave this if you liked how it triggers */
  scroll-margin-top: -100px;

  display: flex;
  justify-content: center;
}

.team-wrap{
  width: min(1100px, calc(100% - (var(--pad) * 2)));
}

.bio{
  width: min(860px, 100%);
  margin: 0 auto;
}

.bio-name{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.10em;
  margin-bottom: 18px;
}

.bio-copy{
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: rgba(10,10,10,.78);
}


#team{
  display: grid;
  place-items: center;
  min-height: 100vh;
}

#team .team-wrap{
  width: min(1100px, 92vw);
  padding: 40px 24px;
  text-align: center;
}

#team .team-credits{
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(18px, 2.2vw, 32px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #000;
}

#team .team-credits .role{
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: 4px;
  color: #000;
  opacity: 1;
}

#team .team-credits .name{
  font-weight: 900;
  text-transform: uppercase;
  color: #000;
}

@media (max-width: 640px){
  #team .team-credits{
    font-size: 18px;
    line-height: 1.25;
  }
}

/* =========================
   EXPERTS LIST
   ========================= */

.experts-list{
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
}

.expert{
  text-align: center;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.15;
}

.expert-name{
  display: block;
  font-weight: 800;
}

.expert-meta{
  display: block;
  margin-top: 6px;

  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: rgba(10,10,10,.7);
}

.expert-meta a{
  color: inherit;
  text-decoration: none;
}

/* Frannie special */
.expert-featured .expert-link{
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

.expert-name-accent{
  color: var(--home-color);
}

/* Hover (Frannie only) */
.expert-featured .expert-link:hover{
  opacity: 0.85;
}


/* --- SCREEN WINDOW (match SVG opening) --- */
#projects .video-container{
  --screen-top: 22px;
  --screen-right: 26px;
  --screen-bottom: 22px;
  --screen-left: 26px;
  --screen-radius: 38px;
}

/* Clip ONLY the video */
#projects .slide video{
  position: absolute;

  top: var(--screen-top);
  left: var(--screen-left);
  right: var(--screen-right);
  bottom: var(--screen-bottom);

  width: auto;
  height: auto;

  border-radius: var(--screen-radius);
  /* overflow: hidden; */
  object-fit: cover;
}

/* Overlay stays inside the “screen safe area” */
#projects .overlay{
  left: calc(var(--screen-left) + 14px);
  right: calc(var(--screen-right) + 14px);
  bottom: calc(var(--screen-bottom) + 14px);
}

/* Gradient should only live inside the screen too (no weird bleed) */
#projects .overlay::before{
  left: calc(-1 * (14px));
  right: calc(-1 * (14px));
  bottom: calc(-1 * (14px));
  top:  (14px);

  /* border-radius: calc(var(--screen-radius) - 6px); */
}


/* =========================================================
   PHONE SCREEN MASK + TEXT SAFE AREA (stable)
   ========================================================= */

/* 1) Define the screen window once */
#projects .video-container{
  position: relative;

  /* TUNE THESE to match your SVG screen opening */
  --screen-top: 7px;
  --screen-right: 26px;
  --screen-bottom: 7px;
  --screen-left: 26px;

  --screen-radius: 38px;
  --screen-safe: 14px; /* padding inside screen for text */
}

/* 2) Ensure slides are stable (prevents flash) */
#projects .slide{
  position: relative;
  overflow: hidden;
}

/* 3) Clip ONLY the video using inset + radius */
#projects .slide video{
  position: absolute;
  top: var(--screen-top);
  right: var(--screen-right);
  bottom: var(--screen-bottom);
  left: var(--screen-left);

  width: calc(100% - (var(--screen-left) + var(--screen-right)));
  height: calc(100% - (var(--screen-top) + var(--screen-bottom)));

  /* border-radius: var(--screen-radius); */
  object-fit: cover;
  display: block;
}

/* 4) Put overlay text INSIDE the screen window (not clipped by the video mask) */
#projects .overlay{
  position: absolute;
  left: calc(var(--screen-left) + var(--screen-safe));
  right: calc(var(--screen-right) + var(--screen-safe));
  bottom: calc(var(--screen-bottom) + var(--screen-safe));
  z-index: 20;              /* above video */
  pointer-events: none;

  /* ✅ CENTER THE CAPTION CONTENT */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#projects .overlay-title{
  width: 100%;
  text-align: center;
  font-weight: 800;
}

@media (max-width: 520px){
  #projects .overlay{
    display: none !important;
  }
}

/* Gradient only behind text (inside screen area) */
#projects .overlay::before{
  content: "";
  position: absolute;

  left: calc(-1 * var(--screen-safe));
  right: calc(-1 * var(--screen-safe));
  bottom: calc(-1 * var(--screen-safe));

  height: 160px;
  /* border-radius: calc(var(--screen-radius) - 6px); */
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
  z-index: 0;
}

#projects .overlay-title,
#projects .overlay-meta{
  position: relative;
  z-index: 1;
  color: #fff;
}

/* 5) Keep SVG bezel ALWAYS on top */
#projects .phoneFrameOverlay{
  position: absolute;
  inset: 0;
  z-index: 999;
  pointer-events: none;
}

/* if you're scaling the SVG huge, keep it centered */
#projects .phoneFrameOverlay svg{
  width: 395%;
  height: 395%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  display: block;
  pointer-events: none;
}

/* 6) Stability / no flash during translateY */
#projects .video-container,
#projects .video-track{
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* =========================================================
   FIX: REMOVE WHITE FLASH BETWEEN SLIDES
   ========================================================= */

/* The “phone body” behind the screen window */
#projects .video-container{
  background: #000 !important; /* was #fff */
}

/* The moving stack itself */
#projects .video-track{
  background: #000;
}

/* Each slide also black as a fallback */
#projects .slide{
  background: #000;
}

/* =========================================================
   OVERLAY TEXT FADE DURING SLIDE TRANSITION
   ========================================================= */

/* Default: hide overlay */
#projects .slide .overlay{
  opacity: 0;
  transition: opacity 260ms ease;
}

/* Only the active slide shows text */
#projects .slide.is-active .overlay{
  opacity: 1;
}

/* =========================
   BOTTOM CONTACT BAR (UPDATED)
   ========================= */

.contactBar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  background: #000;
  color: #fff;

  /* behind logo (logo is z-index: 10) */
  z-index: 9;

  /* taller: frames the home logo nicely */
  min-height: clamp(150px, 22vh, 240px);

  display: flex;
  align-items: center;

  padding: 28px var(--pad);

  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;

  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
}

.contactBar.is-visible{
  transform: translateY(0%);
  opacity: 1;
  pointer-events: auto;
}

.contactBar-inner{
  width: min(1100px, calc(100% - (var(--pad) * 2)));
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  column-gap: 34px;
}

/* LEFT */
.contactBig{
  display: flex;
  align-items: baseline;
  gap: 14px;

  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.05;

  /* big + bold */
  font-size: clamp(22px, 2.6vw, 36px);
}

.contactLabel{
  font-weight: 800;
}

.contactEmail{
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  border-bottom: 2px solid rgba(255,255,255,0.35);
  padding-bottom: 2px;
}

.contactEmail:hover{
  border-bottom-color: rgba(255,255,255,0.85);
}

/* RIGHT */
.contactRight{
  text-align: right;
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.92;
}

.addrTitle{
  font-weight: 800;
  opacity: 1;
}

/* Responsive: stack on small screens */
@media (max-width: 700px){
  .contactBar-inner{
    grid-template-columns: 1fr;
    row-gap: 18px;
  }
  .contactRight{
    text-align: left;
  }
}
/* =========================================================
   CONTACT BAR – TYPOGRAPHY REFINEMENT
   ========================================================= */

/* Smaller, more editorial scale */
.contactBig{
  font-size: clamp(14px, 1.6vw, 20px);
  letter-spacing: 0.12em;
  gap: 18px;
}

/* Remove underline entirely */
.contactEmail{
  border-bottom: none !important;
  padding-bottom: 0;
}

/* Optional: slightly softer hover instead of underline */
/* .contactEmail:hover{
  opacity: 0.7;
} */

/* =========================================================
   CONTACT BAR – INTERACTION + POSITION TUNING
   ========================================================= */

/* Make the whole contact block behave like a button */
.contactBig{
  display: inline-flex;
  align-items: baseline;
  gap: 18px;

  text-decoration: none;
  color: #fff;
  cursor: pointer;

  /* push it toward center (away from logo) */
  margin-left: clamp(120px, 14vw, 220px);
}

/* Green hover for both label + email */
.contactBig:hover{
  color: var(--home-color);
}

/* Keep typography tight + clean */
.contactLabel{
  text-transform: lowercase;
}

/* Kill any inherited underline just in case */
.contactBig,
.contactBig *{
  text-decoration: none !important;
}

.intro-cta{
  margin-top: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.intro-email{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(10,10,10,0.35);
  padding-bottom: 2px;
}
.intro-email:hover{
  border-bottom-color: rgba(10,10,10,0.85);
}


#introduction .intro-title{ display: none; }


.sideTitle.is-entering .sideTitleText{
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
  transform: translateY(0);
  opacity: 1;
}

.sideTitle .sideTitleText{
  display: inline-block;
  width: 100%;
  text-align: center;
}

.sideTitle{ text-align: center !important; }
.sideTitle .sideTitleText{ width: 100%; text-align: center !important; }


.sideTitle .sideTitleText{
  display: inline-block;
  width: 100%;
  text-align: center;

  transform: translateY(0);
  opacity: 1;

  transition:
    transform 140ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 120ms ease;

  will-change: transform, opacity;
}

/* EXITING */
.sideTitle.exit-up .sideTitleText{
  transform: translateY(-20px);
  opacity: 0;
}
.sideTitle.exit-down .sideTitleText{
  transform: translateY(20px);
  opacity: 0;
}

/* PREP (no animation) */
.sideTitle.enter-from-bottom .sideTitleText{
  transform: translateY(20px);
  opacity: 0;
  transition: none;
}
.sideTitle.enter-from-top .sideTitleText{
  transform: translateY(-20px);
  opacity: 0;
  transition: none;
}

/* ENTERING */
.sideTitle.entering .sideTitleText{
  transform: translateY(0);
  opacity: 1;
}

/* =========================================================
   SIDE TITLE – FINAL OVERRIDE (PASTE AT BOTTOM)
   ========================================================= */

.sideTitle{
  /* positioning stays as you already placed it */
  width: 220px;                 /* fixed column = consistent alignment */
  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  pointer-events: none;
  user-select: none;
}

.sideTitle .sideTitleText{
  display: block;
  width: 100%;
  text-align: center;

  /* animation base */
  transform: translateY(0);
  opacity: 1;

  will-change: transform, opacity;
  transition:
    transform 120ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 100ms ease;

  /* paint stability */
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* ===== EXIT STATES ===== */
.sideTitle.exit-up .sideTitleText{
  transform: translateY(-18px);
  opacity: 0;
}

.sideTitle.exit-down .sideTitleText{
  transform: translateY(18px);
  opacity: 0;
}

/* ===== PREP STATES (NO TRANSITION, HIDDEN) ===== */
.sideTitle.enter-from-bottom .sideTitleText{
  transform: translateY(18px);
  opacity: 0;
  transition: none;
}

.sideTitle.enter-from-top .sideTitleText{
  transform: translateY(-18px);
  opacity: 0;
  transition: none;
}

/* ===== ENTER ===== */
.sideTitle.entering .sideTitleText{
  transform: translateY(0);
  opacity: 1;
}

/* ===== HARD SAFETY: NO FLASH FRAMES ===== */
.sideTitle.exit-up .sideTitleText,
.sideTitle.exit-down .sideTitleText,
.sideTitle.enter-from-top .sideTitleText,
.sideTitle.enter-from-bottom .sideTitleText{
  opacity: 0;
}

/* =========================================================
   EXPERTS – SINGLE-LINE FINAL OVERRIDE
   ========================================================= */

/* List spacing */
.experts-list{
  gap: 14px;
}

/* Each expert is ONE LINE */
.expert{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;

  text-align: center;
  white-space: nowrap;
}

/* Name */
.expert-name{
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.1;
}

/* Meta (role + handle/site) */
.expert-meta{
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(10,10,10,.65);
}

/* Links inside meta */
.expert-meta a{
  color: inherit;
  text-decoration: none;
}

/* ===== Frannie special ===== */
.expert-featured .expert-name{
  color: var(--home-color);
}

.expert-featured .expert-link{
  display: flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

/* ===== Responsive safety ===== */
@media (max-width: 520px){
  .expert{
    flex-wrap: wrap;
    row-gap: 6px;
  }
}

/* =========================================================
   FRANNIE BIO PAGE – FINAL LAYOUT
   ========================================================= */

.frannie-bio{
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 140px 80px 80px;
  gap: 60px;
  overflow: hidden; /* no page scroll */
}

/* LEFT */
.frannie-bio-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.frannie-role{
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.frannie-copy{
  font-size: 14px;
  line-height: 1.6;
}

.frannie-copy p{
  margin: 0 0 14px;
}

/* RIGHT – PHONE DUPLICATION */
.frannie-bio-media{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* reuse your existing phone styles */
.frannie-bio-media .phone{
  width: var(--phone-w);
  height: var(--phone-h);
}

.frannie-bio-media .phoneScreen video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   FRANNIE PAGE – FORCE NAV VISIBLE (bio page has no intro JS)
   ========================================================= */

body.frannie-page #siteHeader{
  opacity: 1 !important;
  pointer-events: auto !important;

  /* keep it clean on white pages */
  mix-blend-mode: normal;
  isolation: auto;
}

/* =========================================================
   FRANNIE PAGE – LAYOUT + PHONE (FINAL OVERRIDE)
   ========================================================= */

body.frannie-page{
  overflow-y: hidden; /* page should fit, no scroll */
}

/* Full-height, vertically centered layout */
body.frannie-page .frannie-bio{
  height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;

  /* remove the big top gap */
  padding: 0 var(--pad);

  align-items: center;   /* vertical centering */
  overflow: hidden;
}

/* LEFT text column */
body.frannie-page .frannie-bio-text{
  display: flex;
  flex-direction: column;
  justify-content: center; /* ensures no top gap */
}

body.frannie-page .frannie-role{
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 22px 0;
}

body.frannie-page .frannie-copy{
  font-size: 14px;
  line-height: 1.6;
}

body.frannie-page .frannie-copy p{
  margin: 0 0 14px 0;
}

/* RIGHT phone column */
body.frannie-page .frannie-bio-media{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Phone container: visible (black) + same size as site */
body.frannie-page .frannie-phone.video-container{
  width: var(--phone-w);
  height: var(--phone-h);
  background: #000;
  position: relative;
  overflow: hidden;
}

/* Make the single slide fill */
body.frannie-page .frannie-phone .slide{
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

body.frannie-page .frannie-phone .slide video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay on top (kept minimal / empty) */
body.frannie-page .frannie-phone .overlay{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  pointer-events: none;
}

/* SVG overlay on top (same behavior as Projects) */
body.frannie-page .frannie-phone .phoneFrameOverlay{
  position: absolute;
  inset: 0;
  z-index: 999;
  pointer-events: none;
}

body.frannie-page .frannie-phone .phoneFrameOverlay svg{
  width: 395%;
  height: 395%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  display: block;
  pointer-events: none;
}

/* Small screens: stack if needed */
@media (max-width: 900px){
  body.frannie-page .frannie-bio{
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 0 var(--pad);
  }
}

/* =========================================================
   FRANNIE PAGE – NAV FORCE VISIBLE + READABLE
   ========================================================= */

body.frannie-page #siteHeader{
  opacity: 1 !important;
  pointer-events: auto !important;

  /* kill the landing blend-mode behavior on this page */
  mix-blend-mode: normal !important;
  isolation: auto !important;
}

body.frannie-page #siteHeader .nav a{
  color: var(--text) !important;
  opacity: 0.92 !important;
}

body.frannie-page #siteHeader .nav a:hover{
  opacity: 1 !important;
}

/* =========================================================
   FRANNIE PAGE – TEXT INSET + SMALLER TYPE
   ========================================================= */

body.frannie-page .frannie-bio{
  /* more comfortable inset on the left */
  padding-left: calc(var(--pad) + 48px) !important;
  padding-right: var(--pad) !important;
}

body.frannie-page .frannie-role{
  font-size: 13px !important;
  margin-bottom: 18px !important;
}

body.frannie-page .frannie-copy{
  font-size: 13px !important;
  line-height: 1.55 !important;
}

body.frannie-page .frannie-copy p{
  margin-bottom: 12px !important;
}

/* =========================================================
   BRAND / PROJECT PAGES (scaffold)
   ========================================================= */

body.brand-page{
  overflow-y: auto !important;
  overflow-x: hidden;
}

/* Ensure header is visible on standalone pages */
body.brand-page #siteHeader{
  opacity: 1 !important;
  pointer-events: auto !important;
  mix-blend-mode: normal !important;
}

body.brand-page #siteHeader .nav a{
  color: var(--text) !important;
  opacity: 0.92;
}

/* Layout */
.brand-wrap{
  width: min(1200px, calc(100% - (var(--pad) * 2)));
  margin: 0 auto;
  padding: 150px 0 160px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 42px;
}

/* Top-left brand title */
.brand-title{
  grid-column: 1 / -1;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 18px;
}

/* Left nav */
.brand-side{
  position: sticky;
  top: 140px;
  align-self: start;
}

.brand-side-nav{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.brand-side-link{
  text-decoration: none;
  color: var(--text);
  opacity: 0.72;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.brand-side-link:hover{
  opacity: 0.95;
}

.brand-side-link.is-active{
  opacity: 1;
  font-weight: 800;
  color: var(--home-color);
}

/* Anchors + section titles */
.brand-anchor{
  scroll-margin-top: 140px;
}

.brand-section-title{
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 36px 0 16px;
  opacity: 0.7;
}

/* Organic 3-col grid */
.brand-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.brand-item{
  margin: 0;
  border: 0;
  overflow: hidden;
}

.brand-item img,
.brand-item video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ratio helpers */
.brand-item.r-4-5{ aspect-ratio: 4 / 5; }
.brand-item.r-1-1{ aspect-ratio: 1 / 1; }
.brand-item.r-16-9{ aspect-ratio: 16 / 9; }

.brand-sentinel{
  height: 1px;
}

/* Responsive */
@media (max-width: 980px){
  .brand-wrap{
    grid-template-columns: 180px 1fr;
  }
  .brand-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .brand-wrap{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .brand-side{
    position: relative;
    top: auto;
  }
  .brand-side-nav{
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
  }
  .brand-side-link{
    white-space: nowrap;
  }
  .brand-grid{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   BRAND PAGE – FINAL STRUCTURAL PASS
   ========================================================= */

body.brand-page{
  overflow-y: auto !important;
  overflow-x: hidden;
}

/* NAV stays exactly like main site */
body.brand-page #siteHeader{
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* =========================
   BRAND TITLE (PANDORA)
   ========================= */
body.brand-page .brand-corner{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;

  height: var(--logo-size); /* aligns with navbar band */
  display: flex;
  align-items: center;

  padding-left: var(--pad);

  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  pointer-events: none;
}

/* =========================
   MAIN LAYOUT
   ========================= */

/* Center the feed under the nav */
body.brand-page .brand-layout{
  width: min(1200px, calc(100% - (var(--pad) * 2)));
  margin: 0 auto;

  padding: calc(var(--logo-size) + 60px) 0 160px;
  display: grid;
  grid-template-columns: 1fr; /* feed is centered */
}

/* =========================
   LEFT LIST (PINNED HARD LEFT)
   ========================= */
body.brand-page .brand-left{
  position: fixed;
  top: calc(var(--logo-size) + 60px);
  left: 0;

  height: calc(100vh - (var(--logo-size) + 120px));
  width: 200px;

  padding-left: var(--pad);
  z-index: 5;
}

body.brand-page .brand-left-nav{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Force BLACK links */
body.brand-page .brand-left-link{
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

body.brand-page .brand-left-link:hover{
  opacity: 1;
}

body.brand-page .brand-left-link.is-active{
  color: var(--home-color);
  font-weight: 800;
  opacity: 1;
}

/* =========================
   FEED / GRID
   ========================= */
body.brand-page .brand-right{
  /* keep the feed centered in the viewport */
  width: min(1200px, calc(100% - (var(--pad) * 2)));
  margin: 0 auto;

  /* reserve space INSIDE the centered feed for the left list */
  padding-left: 220px;
  box-sizing: border-box;
}

/* Correct anchor snapping */
body.brand-page .brand-anchor{
  scroll-margin-top: calc(var(--logo-size) + 80px);
}

/* Section titles */
body.brand-page .brand-section-title{
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 26px 0 14px;
  opacity: 0.7;
}

/* Explore-like grid */
body.brand-page .brand-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}

/* Tiles – slightly LESS rounded */
body.brand-page .brand-tile{
  background: #000;
  border-radius: 12px; /* reduced from 18px */
  overflow: hidden;
}

/* Ratios */
body.brand-page .brand-tile.r-9-16{ aspect-ratio: 9 / 16; }
body.brand-page .brand-tile.r-16-9{ aspect-ratio: 16 / 9; }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 980px){
  body.brand-page .brand-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  body.brand-page .brand-left{
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    padding-left: 0;
    margin-bottom: 24px;
  }

  body.brand-page .brand-left-nav{
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
    overflow-x: auto;
  }

  body.brand-page .brand-right{
    margin-left: 0;
  }

  body.brand-page .brand-grid{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   BRAND PAGE – NAV REACTIVE BLEND (MODE CHANGE)
   ========================================================= */

body.brand-page #siteHeader{
  mix-blend-mode: normal;
}

body.brand-page.is-blend #siteHeader{
  mix-blend-mode: difference;
}

body.brand-page .brand-corner{
  mix-blend-mode: normal;
}

body.brand-page.is-blend .brand-corner{
  mix-blend-mode: difference;
}


body.brand-page #siteHeader{
  background: transparent !important;
}

body.brand-page #siteHeader,
body.brand-page #siteHeader .nav,
body.brand-page #siteHeader .nav a{
  mix-blend-mode: difference !important;
}

body.brand-page #siteHeader .nav a{
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

/* =========================================================
   BRAND PAGE – ADD RIGHT PEOPLE COLUMN + CENTER GRID
   Paste at bottom of main.css
   ========================================================= */

/* Right column mirrors left */
body.brand-page .brand-people{
  position: fixed;
  top: calc(var(--logo-size) + 0px);
  right: 0;

  height: calc(100vh - (var(--logo-size) + 120px));
  width: 220px;

  padding-right: var(--pad);
  z-index: 5;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.brand-page .brand-people-title{
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Make the right list visually match your Experts style but constrained */
body.brand-page .brand-people-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
}

body.brand-page .brand-people-list .expert{
  display: block; /* not the one-line roster style here */
  white-space: normal;
}

body.brand-page .brand-people-list .expert-name{
  font-weight: 800;
  font-size: 14px;
  line-height: 1.1;
}

body.brand-page .brand-people-list .expert-meta{
  display: block;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* TRUE CENTERING: carve equal gutters for left + right columns */
body.brand-page .brand-right{
  width: min(1200px, calc(100% - (var(--pad) * 2)));
  margin: 0 auto;
  padding-left: 220px;
  padding-right: 220px;
  box-sizing: border-box;
}

/* Mobile: remove fixed side columns */
@media (max-width: 900px){
  body.brand-page .brand-people{
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: auto;
    padding-right: 0;
    margin-top: 22px;
  }

  body.brand-page .brand-right{
    padding-left: 0;
    padding-right: 0;
  }
}

/* =========================================================
   BRAND PAGE – PEOPLE LIST FADE
   ========================================================= */

body.brand-page .brand-people-list{
  transition: opacity 140ms ease;
  opacity: 1;
}

body.brand-page .brand-people-list.is-fading{
  opacity: 0;
}

/* Lift the first grid closer to the navbar */
body.brand-page .brand-section-title{
  margin-top: 6px;
}

body.brand-page .brand-grid{
  margin-top: 0;
}


/* =========================================================
   IG icon: appears with header, pinned top-right always
   ========================================================= */

#siteHeader .igFixed{
  position: fixed;
  top: 22px;
  right: var(--pad);
  z-index: 9999;

  width: 18px;
  height: 18px;

  display: flex;
  align-items: center;
  justify-content: center;
  }

  /* text-decoration: none;
  color: black;
  opacity: 1;
}

#siteHeader .igFixed:hover{
  opacity: 1;
}

#siteHeader .igFixed svg{
  width: 18px;
  height: 18px;
  display: block;
}

/* avoid blue/visited */
/* #siteHeader .igFixed:visited{
  color: currentColor; */ 


/* #siteHeader .igFixed{
  color: #000 !important;
} */

/* IG icon must stay solid black (no blend) */
/* /* #siteHeader .igFixed{ 
  color: #000 !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  z-index: 99999 !important;
}
/* ABOUT — centered blurb above buckets */
#about .about-blurb{
  width: min(760px, 100%);
  margin: 0 auto 120px;
  text-align: center;
}

#about .about-blurb p{
  margin: 0 0 14px 0;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

#about .about-blurb strong{
  font-weight: 800;
}


/* =========================================
   ABOUT (editorial override)
   ========================================= */

#about{
  padding-top: 120px;
}

#about .about-wrap{
  width: min(1180px, calc(100% - (var(--pad) * 2)));
}

#about .about-blurb{
  width: min(920px, 100%);
  margin: 0 auto 90px;
  text-align: center;
}

#about .about-blurb p{
  margin: 0 0 18px 0;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

#about .about-blurb strong{
  font-weight: 800;
}

#about .three-col{
  width: min(1040px, 100%);
  margin: 0 auto;
  gap: 52px;

  padding-top: 26px;
  border-top: 1px solid rgba(10,10,10,.12);
}

#about .col{
  padding-top: 6px;
}

#about .col:not(:first-child){
  border-left: 1px solid rgba(10,10,10,.10);
  padding-left: 34px;
}

#about .col-title{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
  opacity: .9;
}

#about .col p{
  font-size: 13px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  opacity: .92;
}

@media (max-width: 820px){
  #about .about-blurb{
    text-align: left;
    margin-bottom: 60px;
  }

  #about .three-col{
    border-top: 1px solid rgba(10,10,10,.12);
    padding-top: 18px;
  }

  #about .col:not(:first-child){
    border-left: none;
    padding-left: 0;
  }
}

/* BRAND PAGES: force header visible + clickable */
body.brand-page #siteHeader{
  opacity: 1 !important;
  pointer-events: auto !important;
  mix-blend-mode: normal !important;
  isolation: auto !important;
}

/* ============================================================
   HIDE RIGHT-SIDE SECTION INDICATOR ON TABLET + MOBILE
   ============================================================ */

@media (max-width: 1024px) {
  #sideTitle,
  .sideTitle,
  .section-indicator,
  .scroll-indicator {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
/* ============================================================
   LOCK HORIZONTAL SCROLL ON MOBILE + TABLET
   ============================================================ */

@media (max-width: 1024px) {

  html,
  body {
    max-width: 100%;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
    touch-action: pan-y;
  }

  /* Safety net: prevent rogue elements from exceeding viewport */
  body * {
    max-width: 100vw;
    box-sizing: border-box;
  }

}

/* ============================================================
   MOBILE: MAKE FEATURED EXPERT (FRANNIE LINK) STACK LIKE OTHERS
   ============================================================ */

@media (max-width: 768px) {

  /* The linked featured expert should stack name over meta */
  .expert.expert-featured > a.expert-link{
    display: block !important;          /* overrides flex/inline-flex if present */
    text-align: center;
  }

  .expert.expert-featured > a.expert-link .expert-name{
    display: block;
    white-space: nowrap;                /* keep "Frannie Petok" on one line */
  }

  .expert.expert-featured > a.expert-link .expert-meta{
    display: block;
    margin-top: 6px;
    white-space: normal;                /* allow meta to wrap like others */
  }

}
/* ============================================================
   MOBILE: KEEP FRANNIE META ON ONE LINE
   ============================================================ */

@media (max-width: 768px) {

  .expert.expert-featured > a.expert-link .expert-meta,
  .expert.expert-featured > a.expert-link .expert-meta * {
    display: inline;
    white-space: nowrap;
  }

}

/* ============================================================
   EXPERT HANDLE LINKS – NO VISUAL STYLING
   ============================================================ */

.expert-meta a,
.expert-handle {
  color: inherit;
  text-decoration: none;
  font: inherit;
}

.expert-meta a:hover,
.expert-meta a:focus,
.expert-handle:hover,
.expert-handle:focus {
  color: inherit;
  text-decoration: none;
}

/* ============================================================
   COLLABORATIONS (#projects) PHONE ONLY UI — FULL BLEED + BOTTOM CLIENT BAR
   ============================================================ */

@media (max-width: 520px){

  /* Make anchor jump align correctly (no "centered phone" offset) */
  #projects{
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Full width wrap */
  #projects .projects-wrap{
    width: 100%;
  }

  /* Phone column becomes full-viewport */
  #projects .projects-left{
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 0;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
  }

  /* Kill the SVG phone overlay on mobile */
  #projects .phoneFrameOverlay{
    display: none !important;
  }

  /* FULL BLEED VIDEO CONTAINER (no rounded card) */
  #projects .video-container{
    width: 100vw !important;
    max-width: none;
    height: 100vh;
    border-radius: 0;
    overflow: hidden;
    background: #000;
    isolation: isolate; /* helps blend-mode behave predictably */
  }

  /* Make the video truly fill */
  #projects .slide video{
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    object-fit: cover;
  }

  /* Hide the caption overlays on mobile */
  #projects .overlay{
    display: none !important;
  }

  /* RIGHT COLUMN can collapse on mobile */
  #projects .projects-right{
    display: none;
  }

  /* If you have any old "center snap" padding hacks, kill them */
  #projects .client-list{ padding-right: 0 !important; }
}

@media (max-width: 520px){

  /* client list: centered snap without blowing up layout */
  #projects .client-list{
    padding-inline: 16px;
    box-sizing: border-box;

    /* this is the key */
    scroll-padding-left: 50%;
    scroll-padding-right: 50%;
  }

  #projects .client{
    scroll-snap-align: center;
  }

}

/* CLIENT LIST LINKS — no underline / no link styling */
#projects .client,
#projects .client:visited{
  text-decoration: none;
  color: inherit;
}

#projects .client:hover,
#projects .client:focus{
  text-decoration: none;
  color: var(--home-color);
}

  #projects .client-list{ padding-right: 350px; }

.mm-logo{
  position: fixed;
  top: 22px;
  left: 22px;
  z-index: 999;

  display: flex;
  align-items: flex-end;

  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.08em;

  color: #fff;
  text-decoration: none;

  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.mm-logo span{
  display: inline-block;
  transform-origin: bottom left;
  transform: rotate(-4deg);
}

.mm-logo span:nth-child(odd){
  transform: rotate(-3deg);
}
.mm-logo span:nth-child(even){
  transform: rotate(-5deg);
}

body.intro-done .mm-logo{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* FRANNIE PAGE — logo must be visible + clickable + bold (no intro on this page) */
body.frannie-page .mm-logo{
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;

  font-weight: 800 !important; /* overrides .nav a */
  text-decoration: none !important;
}

@media (max-width: 640px){
  body.brand-page.mmLightbox-open .mmLightbox-backdrop{
    background: rgba(255, 0, 0, 0.95) !important;
  }
}

.tile video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- GRID VIDEO TILES: enforce 9:16 and make media behave --- */
#gallery .grid .tile{
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16; /* true vertical */
  background: #000;     /* looks intentional if letterboxed */
}

/* Make videos/images fill the tile box */
#gallery .grid .tile video,
#gallery .grid .tile img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* CHOOSE ONE: contain (no crop) OR cover (cropped) */

/* Option A: show full frame (no cropping) */
#gallery .grid .tile video,
#gallery .grid .tile img{
  object-fit: contain;
}

/* Option B: fill the tile (will crop) */
/*
#gallery .grid .tile video,
#gallery .grid .tile img{
  object-fit: cover;
}
*/
/* =========================================
   HOME: MOBILE NAV TIGHTER + HAMBURGER MENU
   ========================================= */

/* 1) TIGHTER TOP NAV ON PHONE */
@media (max-width: 520px){
  .nav{
    gap: 14px;                  /* tighter than your current 20px */
    font-size: 12px;            /* smaller */
    letter-spacing: 0.06em;     /* optional: feels more luxe, less stretched */
  }
}

/* 2) HOMEPAGE HAMBURGER (hidden until nav scrolls away) */

/* hide default disclosure marker */
#siteHeader details.homeMenuWrap > summary{
  list-style: none;
}
#siteHeader details.homeMenuWrap > summary::-webkit-details-marker{
  display: none;
}

/* hamburger button */
#siteHeader summary.homeMenuBtn{
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 0;
  padding: 0;

  cursor: pointer;
  user-select: none;

  color: #fff; /* base for difference */
  -webkit-text-fill-color: currentColor;
}

#siteHeader summary.homeMenuBtn svg{
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
}

/* drawer menu (mobile) */
#siteHeader nav.homeMenu{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(320px, 82vw);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;

  padding: 92px var(--pad) 28px;

  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-left: 1px solid rgba(0,0,0,0.08);

  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 10070;

  mix-blend-mode: normal; /* inside drawer, keep normal */
}

/* open state */
#siteHeader details.homeMenuWrap[open] nav.homeMenu{
  transform: translateX(0);
}

#siteHeader nav.homeMenu a{
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #000;
  text-decoration: none;
  opacity: 0.92;
}

/* 3) SHOW hamburger only when we add a body class (set by JS) */
@media (max-width: 820px){
  body.intro-done.mmNavOff #siteHeader details.homeMenuWrap{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s;
  }
}

/* =========================================
   HOME: HAMBURGER SHOULD MATCH PANDORA DRAWER
   ========================================= */

/* wrapper exists just to hold open state */
details.homeMenuWrap{
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 10060 !important;
  pointer-events: auto !important;

  /* shown/hidden controlled via body.mmNavOff */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0);
  transition: opacity 160ms ease, visibility 0s linear 160ms;

  /* critical: do NOT inherit home header blend-mode */
  mix-blend-mode: normal !important;
  isolation: auto !important;
}

@media (max-width: 900px){
  body.intro-done.mmNavOff details.homeMenuWrap{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 160ms ease, visibility 0s;
  }
}

/* hide default disclosure marker */
details.homeMenuWrap > summary{ list-style: none; }
details.homeMenuWrap > summary::-webkit-details-marker{ display: none; }

/* Hamburger button (left of IG), matches Pandora sizing/behavior */
summary.homeMenuBtn{
  position: fixed !important;
  top: 22px !important;
  right: calc(var(--pad) + 34px) !important;

  width: 18px;
  height: 18px;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;

  cursor: pointer !important;
  user-select: none !important;

  z-index: 10120 !important;

  color: #000 !important;
  opacity: 1 !important;
  visibility: visible !important;

  mix-blend-mode: normal !important;
  -webkit-text-fill-color: currentColor !important;
}
summary.homeMenuBtn svg{
  width: 18px;
  height: 18px;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
}

/* Mobile drawer menu (RIGHT), identical geometry to Pandora */
@media (max-width: 900px){
  nav.homeMenu{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    height: 100dvh !important;
    width: min(250px, 82vw) !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;

    /* starts near top, covers full height */
    padding: 92px var(--pad) 28px !important;

background: rgba(255,255,255,0.88);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
    -webkit-backdrop-filter: none !important;

    border-left: 1px solid rgba(0,0,0,0.08);

    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 10070 !important;

    /* kill any blend mode effects */
    mix-blend-mode: normal !important;
  }

  details.homeMenuWrap[open] nav.homeMenu{
    transform: translateX(0);
  }

  nav.homeMenu a{
    color: #000 !important;
    text-decoration: none !important;
    opacity: 0.92 !important;
    transform: none !important;
  }
}

/* backdrop */
.mmMenuBackdrop.home{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.18);
  z-index: 10069;
}


#siteHeader a.igFixed{
  color: #000 !important;
  mix-blend-mode: normal !important;
  -webkit-text-fill-color: currentColor !important;
  z-index: 10130 !important; /* above drawer + hamburger */
}

/* =========================================
   BLEND MODE: ONLY NAV + WORDMARK
   ========================================= */

/* main nav links */
#siteHeader nav.nav{
  mix-blend-mode: difference;
  isolation: isolate;
}

/* Maison Magnolia wordmark */
#siteHeader a.mm-logo{
  mix-blend-mode: difference;
  isolation: isolate;
}

/* make sure individual letters inherit correctly */
#siteHeader a.mm-logo span{
  mix-blend-mode: inherit;
}

/* =========================================================
   FINAL BLEND RULES (HOME)
   Blend-mode ONLY on:
   - <nav class="nav">
   - <a class="mm-logo">
   Everything else stays normal.
   ========================================================= */

/* Make sure the header itself is NOT blending */
#siteHeader{
  mix-blend-mode: difference;
  isolation: isolate;
}

/* Nav blends */
#siteHeader nav.nav{
  mix-blend-mode: difference;
  isolation: isolate;
}

/* Wordmark blends */
#siteHeader a.mm-logo{
  mix-blend-mode: difference;
  isolation: isolate;
}
#siteHeader a.mm-logo span{
  mix-blend-mode: inherit;
}

/* Bottom MM logo stays green (no blend) */
#logoBtn,
#logoBtn .logoText{
  mix-blend-mode: normal;
  isolation: auto;
}

/* Instagram always solid black and always above drawer */
#siteHeader a.igFixed{
  color: #000;
  mix-blend-mode: normal;
  -webkit-text-fill-color: currentColor;
  z-index: 10130;
}

/* Hamburger + drawer NEVER blend */
#siteHeader details.homeMenuWrap,
#siteHeader summary.homeMenuBtn,
#siteHeader nav.homeMenu{
  mix-blend-mode: normal;
  isolation: auto;
}

/* INDEX: blend only nav + top wordmark together */
#siteHeader .blend-header{
  mix-blend-mode: difference;
  isolation: isolate;
}

/* Keep IG + hamburger + drawer out of blend */
#siteHeader a.igFixed,
#siteHeader details.homeMenuWrap,
#siteHeader summary.homeMenuBtn,
#siteHeader nav.homeMenu,
#logoBtn{
  mix-blend-mode: normal !important;
  isolation: auto !important;
}

#siteHeader a.igFixed{
  color: #fff !important;              /* source white → renders black */
  -webkit-text-fill-color: currentColor;
  mix-blend-mode: inherit;             /* inherit header difference */
  z-index: 10130;
}
#siteHeader a.igFixed svg{
  fill: currentColor;
  stroke: currentColor;
}

summary.homeMenuBtn{
  color: #fff !important;              /* source white → renders black */
  -webkit-text-fill-color: currentColor;
  mix-blend-mode: inherit;             /* participate in header blend */
  z-index: 10120;
}
summary.homeMenuBtn svg{
  stroke: currentColor;
}
nav.homeMenu{
  background: #fff !important;
  mix-blend-mode: normal !important;
  isolation: isolate;
}

/* =========================================================
   SIMPLE RULE: blend-mode ON normally, OFF when drawer is open
   ========================================================= */

/* default header behavior (your original vibe) */
#siteHeader{
  mix-blend-mode: difference;
  isolation: isolate;
}

/* when the hamburger <details> is open, kill blend for the whole header */
#siteHeader:has(details.homeMenuWrap[open]){
  mix-blend-mode: normal !important;
  isolation: auto !important;
}
/* =========================================================
   DRAWER: frosty again + keep IG + hamburger above it
   ========================================================= */

/* Frosty drawer */
@media (max-width: 900px){
  nav.homeMenu{
    background: rgba(255,255,255,0.88) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }
}

/* Keep icons above the drawer */
#siteHeader a.igFixed{
  z-index: 20020 !important;
}

#siteHeader summary.homeMenuBtn{
  z-index: 20010 !important;
}

/* drawer stays under icons */
@media (max-width: 900px){
  nav.homeMenu{
    z-index: 20000 !important;
  }
}
/* =========================================================
   DRAWER OPEN: guaranteed stacking order (icons always on top)
   ========================================================= */

/* When drawer is open, make header the top-most stacking context */
#siteHeader:has(details.homeMenuWrap[open]){
  z-index: 99999 !important;          /* beats everything */
}

/* IMPORTANT: header itself should not block clicks on the drawer */
#siteHeader:has(details.homeMenuWrap[open]){
  pointer-events: none;
}

/* Re-enable pointer events ONLY for the interactive bits */
#siteHeader:has(details.homeMenuWrap[open]) a.igFixed,
#siteHeader:has(details.homeMenuWrap[open]) summary.homeMenuBtn,
#siteHeader:has(details.homeMenuWrap[open]) nav.homeMenu,
#siteHeader:has(details.homeMenuWrap[open]) .mmMenuBackdrop.home{
  pointer-events: auto;
}

/* Now enforce the z-index ladder inside that top context */
#siteHeader:has(details.homeMenuWrap[open]) .mmMenuBackdrop.home{
  z-index: 90000 !important;
}

#siteHeader:has(details.homeMenuWrap[open]) nav.homeMenu{
  z-index: 90010 !important;
}

#siteHeader:has(details.homeMenuWrap[open]) summary.homeMenuBtn{
  position: fixed !important;
  z-index: 90020 !important;
}

#siteHeader:has(details.homeMenuWrap[open]) a.igFixed{
  position: fixed !important;
  z-index: 90030 !important;
}

/* =========================
   MOBILE: CENTERED BRAND CAPTION
   ========================= */

@media (max-width: 520px){
  #projects .overlay{
    left: 50%;
    right: auto;
    bottom: calc(var(--screen-bottom) + 18px);
    transform: translateX(-50%);
    align-items: center;
    text-align: center;
  }

  #projects .overlay::before{
    left: -120px;
    right: -120px;
  }

  #projects .overlay-title{
    font-weight: 800;
    letter-spacing: 0.08em;
    text-align: center;
  }
}
/* MOBILE — pull client list up to overlap the video */
@media (max-width: 520px){
  #projects .projects-right{
    position: relative;
    z-index: 60;
    margin-top: -88px; /* adjust: -60px to -120px depending on taste */
  }

  #projects .client-list{
    padding-top: 0;
  }
}
@media (max-width: 520px){
/* =========================================
   MOBILE: CLIENT LIST OVERLAY (MASKED ON VIDEO)
   ========================================= */

#projects .client,
#projects .client:visited{
  text-decoration: none;
  color: inherit;
}

/* Overlay wrapper that will sit inside .video-container on mobile */
#projects .clientOverlay{
  position: absolute;
  z-index: 60;             /* above video */
  pointer-events: none;    /* wrapper ignores, links handle */

  /* ✅ only visible "on the video" (screen window mask) */
  top: var(--screen-top);
  right: var(--screen-right);
  bottom: var(--screen-bottom);
  left: var(--screen-left);

  overflow: hidden;
  border-radius: var(--screen-radius);

  display: flex;
  align-items: flex-start;
}

/* the list itself becomes interactive */
#projects .clientOverlay .client-list{
  pointer-events: auto;

  /* put it higher / overlapping the video */
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;

  display: flex;
  flex-direction: row;
  gap: 18px;

  padding: 0 16px;
  margin: 0;

  overflow-x: auto;
  overflow-y: hidden;

  white-space: nowrap;
  -webkit-overflow-scrolling: touch;

  /* ✅ different blend mode for mobile */
  mix-blend-mode: difference;
  color: #fff;
  text-decoration: none;
}

/* remove underline even on hover/focus */
#projects .clientOverlay .client-list .client:hover,
#projects .clientOverlay .client-list .client:focus{
  text-decoration: none;
}

/* Hide scrollbar without changing behavior */
#projects .clientOverlay .client-list::-webkit-scrollbar{ height: 0; }
#projects .clientOverlay .client-list{ scrollbar-width: none; }

}

/* ============================================================
   MOBILE CLIENT BAR (inside video-container) — BOTTOM + BLEND + NO ROUNDING
   ============================================================ */

#projects .clientOverlay{
  position: absolute;
  inset: 0;
  z-index: 80;
  pointer-events: none; /* wrapper ignores; list handles */
}

/* Bottom bar */
#projects .clientOverlay .client-list{
  pointer-events: auto;

  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);

  display: flex;
  flex-direction: row;
  gap: 18px;

  padding: 0 18px;
  margin: 0;

  overflow-x: auto;
  overflow-y: hidden;

  white-space: nowrap;
  -webkit-overflow-scrolling: touch;

  /* ✅ NO rounding on the list */
  border-radius: 0;

  /* ✅ MODE CHANGE */
  mix-blend-mode: difference;
  color: #fff;

  /* snap is optional but feels great */
  scroll-snap-type: x mandatory;

  /* no underline/link styling */
  text-decoration: none;
}

#projects .clientOverlay .client{
  flex: 0 0 auto;
  scroll-snap-align: center;

  text-decoration: none;
  color: inherit;
}

#projects .clientOverlay .client:visited{
  text-decoration: none;
  color: inherit;
}

/* hide scrollbar */
#projects .clientOverlay .client-list::-webkit-scrollbar{ height: 0; }
#projects .clientOverlay .client-list{ scrollbar-width: none; }
@media (max-width: 520px){

  #projects .clientOverlay{
    position: absolute;
    inset: 0;
    z-index: 80;
    pointer-events: none;
  }

  #projects .clientOverlay .client-list{
    position: absolute;
    left: 0;
    right: 0;

    bottom: 18px; /* 🔑 forces bottom */

    padding: 0 18px;
    margin: 0;

    display: flex;
    gap: 18px;

    overflow-x: auto;
    white-space: nowrap;

    pointer-events: auto;

    mix-blend-mode: difference;
    color: #fff;

    border-radius: 0; /* list itself stays flat */
    top: auto;

  }
}

@media (max-width: 520px){
  #projects{
    scroll-margin-top: -5px;
  }
}
/* ============================================================
   OVERRIDE: MOBILE PHONE SIZE + CLIENT BAR POSITION (TWEAKABLE)
   Paste at VERY BOTTOM of main.css
   ============================================================ */

:root{
  /* You can tweak these anytime */
  --mm-phone-maxw-mobile: 360px;   /* smaller phone width */
  --mm-phone-margin-mobile: 14px; /* outer padding around phone */
  --mm-phone-radius-mobile: 22px; /* corner radius */

  --mm-clientbar-bottom: 22px;    /* move list up/down (smaller = lower, bigger = higher) */
  --mm-clientbar-pad-x: 18px;     /* left/right padding */
  --mm-clientbar-gap: 18px;       /* spacing between names */
}

@media (max-width: 520px){

  /* keep 9:16 but make it smaller + rounded */
  #projects .video-container{
    width: min(var(--mm-phone-maxw-mobile), calc(100vw - (var(--mm-phone-margin-mobile) * 2))) !important;
    height: calc(
      min(var(--mm-phone-maxw-mobile), calc(100vw - (var(--mm-phone-margin-mobile) * 2)))
      * 16 / 9
    );

    margin: var(--mm-phone-margin-mobile) auto;

    overflow: hidden;
    background: #000;

    position: relative;
    isolation: isolate;
  }

  /* video fills that 9:16 box */
  #projects .slide video{
    position: absolute;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  /* client bar control (this assumes your JS moves the list into .clientOverlay inside video-container) */
  #projects .clientOverlay{
    position: absolute;
    inset: 0;
    z-index: 80;
    pointer-events: none;
  }

  #projects .clientOverlay .client-list{
    position: absolute;
    left: 0;
    right: 0;

    /* ✅ THIS IS YOUR CONTROL KNOB */
    bottom: var(--mm-clientbar-bottom);
    top: auto !important;

    padding: 0 var(--mm-clientbar-pad-x);
    margin: 0;

    display: flex;
    gap: var(--mm-clientbar-gap);

    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;

    pointer-events: auto;

    mix-blend-mode: difference !important;
    color: #fff;

    text-decoration: none;
  }

  #projects .clientOverlay .client,
  #projects .clientOverlay .client:visited{
    text-decoration: none;
    color: inherit;
  }

  #projects .clientOverlay .client-list::-webkit-scrollbar{ height: 0; }
  #projects .clientOverlay .client-list{ scrollbar-width: none; }
}

/* ============================================================
   FINAL MOBILE OVERRIDES — PHONE SIZE + RADIUS (NO VARS)
   ============================================================ */

@media (max-width: 520px){

  /* Phone container — true 9:16, slightly inset */
  #projects .video-container{
    width: calc(100vw - 28px);
    height: calc((102vw - 28px) * 16 / 9);

    margin: 14px auto;

    border-radius: 10px;   /* ← CHANGE THIS NUMBER ONLY */
    overflow: hidden;
    background: #000;

    position: relative;
    isolation: isolate;
  }

  /* Video respects the same radius */
  #projects .slide video{
    width: 100%;
    height: 100%;
    object-fit: cover;

    border-radius: 2px;   /* ← SAME VALUE */
  }
}
/* =========================================================
   GLOBAL VIDEO UI KILL (inline videos should NEVER show controls/play UI)
   ========================================================= */
video::-webkit-media-controls { display: none !important; }
video::-webkit-media-controls-enclosure { display: none !important; }
video::-webkit-media-controls-panel { display: none !important; }
video::-webkit-media-controls-overlay-play-button { display: none !important; }
video::-webkit-media-controls-start-playback-button { display: none !important; }
/* =========================================================
   HARD KILL: inline video UI + paused-state visibility
   ========================================================= */


/* Kill any possible WebKit UI */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

.mm-inline-video { opacity: 0; }
.mm-inline-video.is-playing { opacity: 1; }
.mmLightbox video { opacity: 1 !important; }


/* =========================================================
   CONTACT BAR — FULL-WIDTH RECEIPT PAPER (NO BLACK STAGE)
   ========================================================= */

.contactBar--receipt{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  width: 100vw;

  /* ✅ the whole bar is the receipt paper */
  background: #f7f7f4;
  color: #111;

  padding:
    22px
    var(--pad)
    calc(env(safe-area-inset-bottom, 0px) + 22px);

  z-index: 9;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono", "Courier New", monospace;

  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.25;

  /* subtle receipt banding across the WHOLE width */
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.035) 0px,
      rgba(0,0,0,0.035) 1px,
      rgba(255,255,255,0) 10px,
      rgba(255,255,255,0) 18px
    );
}

/* center your existing receipt content block */
.contactBar--receipt .contactBar-inner{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* receiptPaper becomes a PASS-THROUGH wrapper (no card) */
.contactBar--receipt .receiptPaper{
  width: 100%;
  margin: 0;
  padding: 0;

  background: transparent;
  color: inherit;

  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* HEADER */
.contactBar--receipt .rcptHeader{
  text-align: center;
  display: grid;
  gap: 6px;
}

.contactBar--receipt .rcptBrand{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.10em;
}

.contactBar--receipt .rcptAddr{
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.92;
}

.contactBar--receipt .rcptLine{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* RULES */
.contactBar--receipt .rcptRule{
  margin: 14px 0 12px;
  height: 10px;
  overflow: hidden;
}

.contactBar--receipt .rcptRule::before{
  content: "******************************************************";
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.10em;
  color: rgba(0,0,0,.75);
}

.contactBar--receipt .rcptRule--thin{
  margin: 10px 0 0;
  height: 8px;
}

.contactBar--receipt .rcptRule--thin::before{
  content: "------------------------------------------------------";
  color: rgba(0,0,0,.55);
}

/* BODY */
.contactBar--receipt .rcptBody{
  display: grid;
  gap: 10px;
}

.contactBar--receipt .rcptRow{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;

  font-size: 12px;
}

.contactBar--receipt .rcptKey{
  font-weight: 700;
  opacity: 0.9;
}

.contactBar--receipt .rcptVal{
  font-weight: 800;
  color: inherit;
  text-decoration: none;
  text-transform: none; /* keep email readable */
  letter-spacing: 0.04em;

  border-bottom: 1px dotted rgba(0,0,0,.25);
  padding-bottom: 1px;
}

.contactBar--receipt .rcptVal:hover{
  border-bottom-color: rgba(0,0,0,.75);
}

/* MOBILE */
@media (max-width: 520px){
  .contactBar--receipt{
    padding-left: 14px;
    padding-right: 14px;
  }

  .contactBar--receipt .rcptRow{
    font-size: 11px;
  }
}


/* =========================================================
   FIX: CENTER RECEIPT CONTENT
   ========================================================= */

/* Center the receipt content block itself */
.contactBar--receipt .contactBar-inner{
  display: flex;
  justify-content: center;
}

/* Constrain + center text column */
.contactBar--receipt .receiptPaper{
  max-width: 720px;     /* matches visual receipt width */
  margin: 0 auto;
}

/* Header text centered (brand + address) */
.contactBar--receipt .rcptHeader{
  text-align: center;
}

/* Keep body rows aligned like a real receipt */
.contactBar--receipt .rcptBody{
  text-align: left;
}

/* =========================================================
   INTRO — MENU / INVITATION LAYOUT (NO COPY CHANGES)
   ========================================================= */

/* subtle “paper” vibe behind the intro only */
#introduction{
  position: relative;
  padding-top: 140px;
  padding-bottom: 160px;
}

/* keep your width rules but make it feel like a centered “card” without changing content */
#introduction .intro-wrap{
  width: min(820px, calc(100% - (var(--pad) * 2)));
  margin: 0 auto;
  text-align: center;
}

/* bring back the “INTRODUCTION” label as a small menu heading (you had it, just hidden) */
.intro-title{
  display: block !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 0 auto 26px;
}

/* menu-style body spacing */
.intro-copy{
  width: 100%;
  margin: 0 auto;
  text-align: center;
  font-size: 13px;
  line-height: 1.75;
  letter-spacing: 0.02em;
}

/* tighten paragraph rhythm like a printed menu */
.intro-copy p{
  margin: 0 0 18px 0;
}


/* the “script standout” phrase */
.intro-script{
  font-family: "Snell Roundhand", "Apple Chancery", "Brush Script MT", "Segoe Script", cursive;
  font-size: clamp(26px, 4vw, 46px);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.05;
  display: inline-block;
  margin-right: 6px; /* keeps it flowing into the sentence naturally */
}

/* keep your green highlight behavior but make it a touch more “print” */
.intro-copy .intro-highlight{
  color: var(--home-color);
  font-weight: 800;
  text-decoration: none;
}

/* CTA line gets “menu footer” vibe */
.intro-cta{
  margin-top: 26px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
  opacity: 0.9;
}

.intro-email{
  display: inline-block;
  margin-left: 10px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(0,0,0,0.35);
  padding-bottom: 2px;
}
.intro-email:hover{
  border-bottom-color: rgba(0,0,0,0.75);
}

/* mobile tuning */
@media (max-width: 520px){
  #introduction{
    padding-top: 110px;
    padding-bottom: 130px;
  }

  .intro-script{
    font-size: 28px;
  }

  #introduction .intro-wrap::before,
  #introduction .intro-wrap::after{
    width: 100%;
  }
}

/* =========================================================
   ABOUT — PROCESS (01/02/03) — CLEAN + CENTERED
   (No SVGs. Scoped to .about-process so nothing else changes.)
   ========================================================= */

#about .three-col.about-process{
  /* layout */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  align-items: start;
  position: relative;

  /* spacing */
  margin-top: 56px;

  /* CENTER + slight right nudge (the fix you want) */
  width: min(1120px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;   /* nudge right */
  padding-right: 24px;  /* keep right breathing room */
}

/* columns */
#about .three-col.about-process .col{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  max-width: none;
}

/* staggered placement (keep what you like) */
#about .three-col.about-process .col:nth-child(1){
  grid-column: 1 / span 4;
  grid-row: 1;
}

#about .three-col.about-process .col:nth-child(2){
  grid-column: 5 / span 4;
  grid-row: 1;
}

#about .three-col.about-process .col:nth-child(3){
  grid-column: 9 / span 4;
  grid-row: 1;
}

/* number alignment + rhythm */
#about .three-col.about-process .process-num{
  height: 64px;              /* locks top rhythm across cols */
  line-height: 1;
  display: flex;
  align-items: flex-end;
  margin: 0 0 12px 0;

  font-size: 52px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--home-color);
}

/* title + paragraph spacing */
#about .three-col.about-process .col-title{
  margin: 0 0 14px 0;
}

#about .three-col.about-process .col p{
  margin: 0;
  max-width: 36ch; /* keeps wrapping consistent */
}

/* ensure no legacy dividers/padding sneak in */
#about .three-col.about-process .col:not(:first-child){
  border-left: none;
  padding-left: 0;
}

/* =========================================================
   ABOUT — FORCE TRUE MOBILE STACK (kills any grid-column spans)
   ========================================================= */
@media (max-width: 820px){

  /* Force the container to be a single vertical stack */
  #about .three-col.about-process{
    display: flex !important;
    flex-direction: column !important;
    gap: 48px !important;
  }

  /* Each column becomes full-width in normal document flow */
  #about .three-col.about-process .col{
    width: 100% !important;
    max-width: 100% !important;
    grid-column: auto !important;
    transform: none !important;
  }

  /* In case any nth-child rules are still present somewhere */
  #about .three-col.about-process .col:nth-child(1),
  #about .three-col.about-process .col:nth-child(2),
  #about .three-col.about-process .col:nth-child(3){
    grid-column: auto !important;
    transform: none !important;
  }

  /* Let copy breathe on mobile */
  #about .three-col.about-process .col p{
    max-width: 100% !important;
  }

  /* Optional: numbers shouldn’t reserve a big block on mobile */
  #about .three-col.about-process .process-num{
    height: auto !important;
    margin-bottom: 8px !important;
  }
}

/* =========================================================
   ABOUT — MOBILE CENTERED TYPE
   ========================================================= */
@media (max-width: 820px){

  /* Center the paragraph ABOVE the 01/02/03 blocks */
  #about .about-wrap,
  #about .about-blurb{
    text-align: center;
  }

  /* Center each process column */
  #about .three-col.about-process .col{
    align-items: center;
    text-align: center;
  }

  /* Numbers centered */
  #about .three-col.about-process .process-num{
    justify-content: center;
  }

  /* Titles centered */
  #about .three-col.about-process .col-title{
    text-align: center;
  }

  /* Paragraph copy centered + readable width */
  #about .three-col.about-process .col p{
    text-align: center;
    max-width: 28ch; /* tighter for centered reading */
  }
}

/* =========================================================
   PROJECTS PHONE — AE MATTE (MASK ONLY VIDEO STACK)
   Requires: .phoneMask wrapper around .video-track
   ========================================================= */

#projects .video-container{
  position: relative;
  background: transparent; /* black comes from .phoneMask */
}

/* Black matte + videos are clipped together */
#projects .phoneMask{
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 1;

  -webkit-mask-image: url("../phone-matte.svg");
  mask-image: url("../phone-matte.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  transform: translateZ(0);
  backface-visibility: hidden;
}

/* keep the moving track behavior unchanged */
#projects .phoneMask .video-track{
  position: absolute;
  inset: 0;
}

/* keep phone art above everything */
#projects .phoneFrameOverlay{
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* =========================================================
   PROJECTS PHONE — FIX MASK SCALE + BLACK RECTANGLE
   Paste at END of main.css
   ========================================================= */

/* 1) Kill the old 395% phone overlay scaling */
#projects .phoneFrameOverlay svg{
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}

/* 2) The container itself must NOT be black (that’s the rectangle you see) */
#projects .video-container{
  background: transparent !important;
  overflow: visible;
}



/* =========================================================
   PROJECTS PHONE — KEEP BIG PHONE + SCALE MASK TO MATCH
   Paste at END of main.css
   ========================================================= */

/* 0) One knob to rule them all */
#projects .video-container{
  --phone-scale: 395%;              /* 👈 your preferred size */
  background: transparent !important; /* kill the big black rectangle */
}

/* 1) Your phone SVG overlay stays HUGE (as before) */
#projects .phoneFrameOverlay svg{
  width: var(--phone-scale) !important;
  height: var(--phone-scale) !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) translateZ(0) !important;
  pointer-events: none;
}

/* 2) Black matte belongs INSIDE the masked layer */
#projects .phoneMask{
  background: #000 !important;

  -webkit-mask-image: url("../phone-matte.svg");
  mask-image: url("../phone-matte.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  /* 👇 THIS is the missing piece: scale mask to match the 395% phone */
  -webkit-mask-size: var(--phone-scale) var(--phone-scale);
  mask-size: var(--phone-scale) var(--phone-scale);
}

/* =========================================================
   PROJECTS — PHONE: swap matte SVG to mobile.svg
   (desktop uses phone-matte.svg)
   ========================================================= */
@media (max-width: 520px){

  /* If your matte is applied to .phoneMask (most likely) */
  #projects .phoneMask{
    -webkit-mask-image: url("../mobile.svg") !important;
    mask-image: url("../mobile.svg") !important;

    /* mobile matte should fit normally */
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
  }

  /* If you ALSO apply the matte to the moving stack, swap it too */
  #projects .phoneMask .video-track{
    -webkit-mask-image: url("../mobile.svg") !important;
    mask-image: url("../mobile.svg") !important;

    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
  }
}
/* =========================================================
   PROJECTS — PHONE: swap matte SVG, keep SAME SCALE (395%)
   ========================================================= */

@media (max-width: 520px){

  /* Swap matte SVG ONLY — keep scale + positioning identical */
  #projects .phoneMask{
    -webkit-mask-image: url("../mobile.svg") !important;
    mask-image: url("../mobile.svg") !important;

    /* keep the big cinematic scale */
    -webkit-mask-size: var(--phone-scale) var(--phone-scale) !important;
    mask-size: var(--phone-scale) var(--phone-scale) !important;
  }

  /* Safety: if mask is also applied to the moving stack */
  #projects .phoneMask .video-track{
    -webkit-mask-image: url("../mobile.svg") !important;
    mask-image: url("../mobile.svg") !important;

    -webkit-mask-size: var(--phone-scale) var(--phone-scale) !important;
    mask-size: var(--phone-scale) var(--phone-scale) !important;
  }
}

/* =========================================================
   PROJECTS — iPHONE SAFARI FIX
   WebKit can fail to render <video> inside -webkit-mask-image.
   So: disable mask on iPhone, use overflow clip instead.
   ========================================================= */

@media (max-width: 520px){

  /* 1) Turn OFF masking on iPhone (video rendering fix) */
  #projects .phoneMask{
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  #projects .phoneMask .video-track{
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* 2) Use your mobile “screen clip” behavior instead */
  #projects .video-container{
    background: #000 !important;
    overflow: hidden !important;

    /* tune if you want, but these should match the mobile look */
    border-radius: 20px !important;
  }

  /* 3) Make sure the moving stack stays positioned correctly */
  #projects .phoneMask{
    position: absolute !important;
    inset: 0 !important;
    background: transparent !important; /* black is on container */
    z-index: 1 !important;
  }

  #projects .video-track{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
  }

  /* 4) Keep each slide cleanly clipped */
  #projects .slide{
    overflow: hidden !important;
  }
}

/* =========================================================
   FIX: iPad Air / iPad Pro should behave like DESKTOP in #projects
   - keep 2-column layout
   - keep sticky phone
   - keep SVG phone overlay
   - scale phone + list down together
   ========================================================= */

/* 1) iPad range: scale the phone + list down (but keep desktop behavior) */
@media (min-width: 701px) and (max-width: 1180px){

  /* Scale knobs (tweak if you want slightly bigger/smaller) */
  :root{
    --phone-w: 280px;
    --phone-h: 498px;
  }

  /* Keep the DESKTOP 2-column layout */
  .projects-layout{
    grid-template-columns: 1fr 1fr !important;
    column-gap: 28px !important;
    row-gap: 0 !important;
  }

  /* Keep sticky phone inside the section (desktop behavior) */
  #projects .projects-left{
    position: sticky !important;
    top: 80px !important;      /* matches your existing desktop offset */
    height: 75vh !important;
  }

  /* Make sure the phone container uses the scaled vars */
  #projects .video-container{
    width: var(--phone-w) !important;
    height: var(--phone-h) !important;
    --slide-h: var(--phone-h);
  }

  /* Scale list to match the phone */
  #projects .client-list{
    width: var(--phone-w) !important;
    gap: 36px !important;
  }

  #projects .client{
    font-size: 18px !important;
  }
}

/* 2) IMPORTANT: Do NOT hide the phone SVG overlay on iPad.
      Your file currently hides it at max-width:900px. This turns it back on. */
@media (min-width: 521px) and (max-width: 1024px){
  #projects .phoneFrameOverlay{
    display: block !important;
  }
}

/* 3) Move the “collapse to 1 column / non-sticky” behavior DOWN to true small screens.
      (Your current max-width:900px rule is what breaks iPad Air.) */
@media (max-width: 700px){
  .projects-layout{
    grid-template-columns: 1fr !important;
    row-gap: 48px !important;
  }

  #projects .projects-left{
    position: relative !important;
    top: auto !important;
    height: auto !important;
  }
}

/* =========================================================
   PROJECTS: iPad scaling fix — keep phone overlay truly 1:1
   (removes the 395% SVG hack so it tracks container resizing)
   ========================================================= */

#projects .phoneFrameOverlay svg{
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
  transform: none !important;
}

/* (Optional but recommended) ensure the mask layer always matches container */
#projects .phoneMask{
  width: 100%;
  height: 100%;
}

/* =========================================================
   PROJECTS: restore iPhone frame scale (desktop + iPad)
   ========================================================= */

/* Default scale for the iphonec.svg */
:root{
  --frame-scale: 3.95; /* this is basically your old "395%" */
}

/* Make overlay fill container and scale up */
#projects .phoneFrameOverlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

#projects .phoneFrameOverlay svg{
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  inset: 0 !important;

  /* key part: scale the SVG up again */
  transform-origin: 50% 50% !important;
  transform: scale(var(--frame-scale)) !important;
}

/* If you want iPad slightly different, tweak here (optional) */
@media (min-width: 701px) and (max-width: 1180px){
  :root{
    --frame-scale: 3.95; /* keep same as desktop for now */
  }
}

/* ============================================================
   FRANNIE PETOK — MOBILE + TABLET
   No media, no scroll, text-only viewport fit
   ============================================================ */

@media (max-width: 1024px) {
  body.frannie-page {
    height: 100svh;
    overflow: hidden;
  }

  body.frannie-page .frannie-bio {
    display: grid;
    grid-template-columns: 1fr;
    height: calc(100svh - var(--nav-h, 72px));
  }

  /* ❌ REMOVE MEDIA COMPLETELY */
  body.frannie-page .frannie-bio-media,
  body.frannie-page .frannie-phone,
  body.frannie-page video,
  body.frannie-page .phoneFrameOverlay {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* ✅ TEXT TAKES FULL SCREEN */
  body.frannie-page .frannie-bio-text {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 5vw, 64px);
  }

  /* ROLE */
  body.frannie-page .frannie-role {
    font-size: clamp(12px, 2.5vw, 14px);
    letter-spacing: 0.12em;
    margin-bottom: clamp(12px, 3vw, 20px);
  }

  /* COPY */
  body.frannie-page .frannie-copy {
    font-size: clamp(13px, 2.6vw, 16px);
    line-height: 1.55;
    max-width: 72ch;
  }

  body.frannie-page .frannie-copy p {
    margin-bottom: clamp(10px, 2.5vw, 18px);
  }
}

/* ============================================================
   FRANNIE — PHONE ONLY: allow text to scroll, keep nav clear
   ============================================================ */
@media (max-width: 520px) {

  /* keep the overall page from scrolling behind the nav */
  body.frannie-page {
    height: 100svh;
    overflow: hidden;
  }

  /* let the TEXT area be the scroller */
  body.frannie-page .frannie-bio {
    height: calc(100svh - var(--nav-h, 72px));
  }

  body.frannie-page .frannie-bio-text {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: clamp(18px, 5vw, 32px);
    padding-bottom: clamp(28px, 8vw, 56px);
  }

  /* optional: prevents the first paragraph from hiding under the nav if header is fixed */
  body.frannie-page .frannie-bio-text {
    scroll-padding-top: var(--nav-h, 72px);
  }
}