/* ===========================
   styles.css — FULL implementation (with Link System)
   (header + copy feedback + hero + xp + work + photo + footer + fade + links)
   IMPORTANT:
   - NO HTML in this file
   =========================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');


:root{
  --bg: #f4f3ef;
  --text: #111111;
  --muted: rgba(17,17,17,0.62);
  --border: rgba(17,17,17,0.12);
  --surface: rgba(255,255,255,0.55);

  /* Header sizing knobs */
  --header-scale: 1;
  --brand-size: 22px;
  --nav-size: 16px;
  --connect-size: 13px;
  --email-size: 15px;

  --max: 1120px;
  --radius: 18px;

  --shadow: 0 14px 40px rgba(0,0,0,0.08);
  
    /* ===========================
     TYPE SCALE (global)
     =========================== */
  --fs-body: clamp(0.95rem, 0.25vw + 0.9rem, 1rem);         /* ~15–16px */
  --fs-caption: clamp(0.80rem, 0.15vw + 0.78rem, 0.875rem); /* ~13–14px */
  --fs-subhead: clamp(1.25rem, 0.45vw + 1.15rem, 1.5rem);   /* ~20–24px */
  --fs-title: clamp(1.6rem, 0.8vw + 1.45rem, 2rem);         /* ~26–32px */

  --lh-body: 1.6;
  --lh-tight: 1.2;
  --lh-title: 1.25;

  --space-section: clamp(56px, 6vw, 110px);    /* default top/bottom section padding */

  --space-section-sm: clamp(40px, 4.5vw, 80px);/* tighter sections */

  --space-section-lg: clamp(72px, 8vw, 140px); /* big hero/ending sections */

  --space-stack: clamp(18px, 2vw, 28px);       /* spacing between blocks inside a section */

  
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family: Roboto, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  background: var(--bg);
  color: var(--text);

  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: -0.01em;
}


/* ===========================
   GLOBAL TYPOGRAPHY RULES
   =========================== */

/* Titles / section headers */
h1, h2{
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: 700;
  margin: 0 0 16px;
}

/* Subheadings / subsections */
h3, h4{
  font-size: var(--fs-subhead);
  line-height: var(--lh-tight);
  font-weight: 600;
  margin: 0 0 12px;
}

/* Smaller headings */
h5, h6{
  font-size: 1rem;
  line-height: var(--lh-tight);
  font-weight: 600;
  margin: 0 0 10px;
}

/* Body text */
p{
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0 0 16px;
}

/* Captions / labels / small notes */
small,
figcaption,
.caption,
.meta-kicker,
.pill,
.tag{
  font-size: var(--fs-caption);
  line-height: 1.4;
  font-weight: 500;
}


.container{max-width:var(--max); margin:0 auto; padding:0px}
.muted{color:var(--muted)}
.site-main{padding: 0 0 0}
/* Default spacing for ALL major sections */
.site-main > section{
  padding-block: var(--space-section);
}
/* Opt-out sections that already control their own spacing */
.site-main > section.hero--minimal,
.site-main > section.photo,
.site-main > section.case-hero-cover{
  padding-block: 50px;
}
.site-main > section.case-intro-grid,
.site-main > section.po,
.site-main > section.insight-pair,
.site-main > section.psh{
  padding-block: 50px;
}


/* ===========================
   GLOBAL SECTION PADDING
   =========================== */

/* Default: all sections get consistent top/bottom padding */
/* Only apply global padding inside the case study wrapper */
.case section{
  padding-block: var(--space-section);
}

/* opt-outs inside case only */
.case .case-hero-cover{ padding-block: 0; }



/* If these already define their own spacing, set them to 0 here */
.research-block,
.hero--minimal,
.photo{
  padding-block: 0;
}


section.case > .case-hero-cover:first-child{
  margin-top: calc(-1 * var(--space-section));
}




/* consistent vertical spacing inside a section */
.stack{
  display: grid;
  gap: var(--space-stack);
}


figure{ margin: 0; }


/* ===========================
   LINK SYSTEM — GLOBAL
   =========================== */
a{
  color: inherit;
  text-decoration: none;
}

/* Keyboard focus everywhere */
a:focus-visible,
button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(17,17,17,0.25);
  border-radius: 8px;
}

/* Inline text links (inside paragraphs, bios, summaries) */
p a,
.muted a,
.footer-bio a{
  position: relative;
  font-weight: 650;
}

p a::after,
.muted a::after,
.footer-bio a::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  background: currentColor;
  opacity: 0.35;
  transition: opacity .15s ease, transform .15s ease;
}

@media (hover:hover){
  p a:hover::after,
  .muted a:hover::after,
  .footer-bio a:hover::after{
    opacity: 0.75;
    transform: translateY(1px);
  }
}






/* ===========================
   Skip link (only visible on keyboard focus)
   =========================== */
.skip-link{
  position:absolute;
  left:-999px;
  top:10px;
  padding:10px 14px;
  border-radius: 10px;
  background:#fff;
  border:1px solid rgba(17,17,17,0.15);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  color:#111;
  z-index: 9999;
}
.skip-link:focus{ left: 14px; }

/* ===========================
   HEADER (reference style)
   =========================== */
.site-header--ref{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244,243,239,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(17,17,17,0.10);
}

.header-row--ref{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 18px;
}

/* Brand */
.brand--ref{
  max-width: 260px;
  text-decoration:none;
}
.brand__name--ref{
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 0.95;
  font-size: calc(var(--brand-size) * var(--header-scale));
}

/* Nav */
.nav--ref{
  display:flex;
  align-items:center;
  gap: 34px;
}

.nav__link--ref{
  position: relative;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: calc(var(--nav-size) * var(--header-scale));
  padding: 6px 2px;
  line-height: 1;
  color: rgba(17,17,17,0.85);
}

.nav__link--ref::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 3px;
  background: #111;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}

.nav__link--ref.is-active{
  color:#111;
}
.nav__link--ref.is-active::after{ transform: scaleX(1); }

@media (hover:hover){
  .nav__link--ref:hover::after{ transform: scaleX(1); }
}

/* Right side */
.header-right{
  display:flex;
  align-items:center;
  gap: 14px;
}

.connect-label{
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: calc(var(--connect-size) * var(--header-scale));
  white-space: nowrap;
  color: rgba(17,17,17,0.80);
}

/* Email pill (shared header + footer) */
.email-pill{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(17,17,17,0.12);
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
  white-space: nowrap;
}

/* nice focus ring when tabbing into the pill */
.email-pill:focus-within{
  box-shadow: 0 0 0 3px rgba(17,17,17,0.18), 0 10px 26px rgba(0,0,0,0.06);
}

.email-pill__text{
  font-weight: 700;
  font-size: calc(var(--email-size) * var(--header-scale));
  letter-spacing: 0.01em;
}

.email-pill__btn{
  display:grid;
  place-items:center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(17,17,17,0.12);
  background: rgba(255,255,255,0.65);
  color: rgba(17,17,17,0.85);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}

@media (hover:hover){
  .email-pill__btn:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,0.9);
  }
}

/* Copy feedback */
.email-pill__btn.is-copied{
  background: rgba(17,17,17,0.9);
  color: #fff;
  transform: translateY(-1px);
}
.email-pill__btn.is-copied svg{ opacity: 0.9; }

/* Responsive */
@media (max-width: 980px){
  :root{
    --brand-size: 18px;
    --nav-size: 14px;
    --email-size: 14px;
  }
  .connect-label{ display:none; }
}
@media (max-width: 720px){
  .nav--ref{ display:none; } /* optional */
}

/* ===========================
   HERO
   =========================== */
.hero--minimal{padding: 62px 0 70px}
.hero-min__title{margin: 0 0 22px}
.bigtype{
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.92;
  font-size: clamp(52px, 8.5vw, 132px);

}
.bigtype-2{
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.92;
  font-size: clamp(52px, 8.5vw, 132px);
  text-align: center; /* 👈 center text */
}
.bigtype--tight{
  line-height: 0.90;
  letter-spacing: -0.045em;
}

.hero-min__meta{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  padding-top: 10px;
}
.meta-kicker{
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.meta-value{
  font-size: 14px;
  letter-spacing: 0.02em;
}

.meta-value-2{
  font-size: 14px;
  letter-spacing: 0.02em;
  text-align: center;
}


@media (max-width: 720px){
  .hero-min__meta{flex-direction:column; align-items:flex-start}
}


/* Hero text scroll effect (driven by JS vars) */
/* Hero text scroll effect (driven by JS vars) */
html.js-enabled .hero-min__title{
  opacity: var(--hero-o, 1);
  transform: translate3d(0, var(--hero-y, 0px), 0) scale(var(--hero-s, 1));
  transform-origin: 50% 0%;
  will-change: transform, opacity;
}

/* Meta fades less (stays readable) */
html.js-enabled .hero-min__meta{
  opacity: clamp(0.55, calc(var(--hero-o, 1) + 0.20), 1);
  transform: translate3d(0, calc(var(--hero-y, 0px) * 0.6), 0) scale(var(--hero-s, 1));
  transform-origin: 50% 0%;
  will-change: transform, opacity;
}






/* ===========================
   PHOTO + IMAGE SYSTEM
   =========================== */
/* HERO stays on top so the image can slide behind it */
.hero--minimal{
  position: relative;
  z-index: 5;
}

/* PHOTO section no longer clips -> allows overlap */
.photo{
  position: relative;
  overflow: visible;     /* ✅ allow overlap */
  padding: 40px 0 10px;
  z-index: 1;            /* ✅ sits under hero */
}

/* Center the hero image frame */
.img-frame--hero{
  width: min(520px, 86vw);
  margin: 0 auto;
  display: block;        /* ✅ true centering */
}

/* Make sure image is never stretched */
.img-frame--hero img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) - 2px);
  filter: grayscale(10%) contrast(1.03);
  transform-origin: 50% 50%;
  will-change: transform, filter;
}

/* Scroll animation lives here */
html.js-enabled .img-frame--hero{
  transform: translate3d(0, clamp(-40px, var(--img-y, 0px), 40px), 0) scale(var(--img-s, 1));
  filter: saturate(var(--img-sat, 1)) contrast(1.03) brightness(var(--img-b, 1));
  will-change: transform, filter;
}



/* tighten the gap after photo */
.xp{ padding-block: var(--space-section); }


/* ---------------- STATEMENT ---------------- */
.statement{
  padding-block: var(--space-section-lg);
}


.statement-text{
  max-width: 45ch;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(25px, 6vw, 25px);  /* was fixed 40px */
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* ---------------- PROCESS (polished) ---------------- */
.process{
  padding-block: var(--space-section-lg);
}


/* 5-column grid that stays readable */
.process-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 56px);
  align-items: start;
}

/* card-like rhythm without changing your style */
.process-item{
  min-height: 240px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  transition: transform 220ms ease;
}

/* (01) */
.process-num{
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--text);
  opacity: 0.85;
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}

/* Make titles fit in 5 columns + stop awkward wraps */
.process-title-1{
  margin: 0 0 14px 0;
  font-size: clamp(28px, 2.6vw, 44px); /* key change */
  line-height: 1.05;
  letter-spacing: -0.02em;
  white-space: nowrap; /* keeps “Discovery” clean */
}

/* copy: tighter + easier to scan */
.process-desc{
  margin: 0;
  max-width: 34ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}

/* subtle “alive” hover (desktop only) */
@media (hover:hover){
  .process-item:hover{
    transform: translateY(-4px);
  }
}

/* responsive: 3 cols -> 2 cols -> 1 col */
@media (max-width: 1100px){
  .process-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 44px;
  }
  .process-title{
    white-space: normal; /* allow wrap again */
  }
}

@media (max-width: 760px){
  .process-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }
}

@media (max-width: 520px){
  .process-grid{
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .process-item{
    min-height: unset;
  }
}





/* ===========================
   RELEVANT EXPERIENCE
   =========================== */
.xp{ padding-block: var(--space-section); }

.xp-head{margin-bottom: 26px}
.xp-list{border-top: 1px solid var(--border)}

.xp-row{
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 160px;
  gap: 34px;
  padding: 34px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
  transition: background .18s ease;
}
.xp-row:hover{background: rgba(255,255,255,0.22)}
.xp-company-wrap{display:flex; justify-content:flex-start}
.xp-company{
  font-size: 30px;
  font-weight: 780;
  letter-spacing: -0.03em;
  line-height: 0.98;
}
.xp-meta{padding-top: 10px; max-width: 70ch}
.xp-title{
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(17,17,17,0.75);
  font-weight: 750;
  margin-bottom: 10px;
}
.xp-summary{
  font-size: 18px;
  color: var(--muted);
  line-height: 1.5;
}
.xp-years{
  padding-top: 12px;
  text-align: right;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  color: rgba(17,17,17,0.78);
  letter-spacing: 0.01em;
}
@media (max-width: 980px){
  .xp-row{
    grid-template-columns: 220px minmax(0, 1fr) 140px;
    gap: 22px;
  }
  .xp-company{font-size: 36px}
}
@media (max-width: 720px){
  .xp-row{
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 26px 0;
  }
  .xp-years{ text-align:left; padding-top:0; }
}

/* ===========================
   WORK GRID
   =========================== */
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin:12px 0 14px;
  flex-wrap:wrap;
}
.section-title{margin:0; font-size: 18px; letter-spacing:-0.02em}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){ .grid{grid-template-columns: repeat(2, minmax(0, 1fr));} }
@media (max-width: 640px){ .grid{grid-template-columns: 1fr;} }

.work-card{
  background: rgba(255,255,255,0.50);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.work-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.65);
}

.work-card__meta{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.work-card__title{margin: 6px 0 8px; font-size: 18px; letter-spacing:-0.02em}

/* Card title links: underline appears when card hovered */
.work-card__title a{
  position: relative;
  font-weight: 800;
  color: #111;
}
.work-card__title a::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: #111;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .20s ease;
}
@media (hover:hover){
  .work-card:hover .work-card__title a::after{
    transform: scaleX(1);
  }
}

/* CTA link: arrow motion */
.work-card__cta{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  margin-top:12px;
  color: rgba(17,17,17,0.88);
  font-weight: 700;
}
.work-card__cta::after{
  content:"→";
  transition: transform .15s ease;
}
@media (hover:hover){
  .work-card__cta:hover::after{
    transform: translateX(3px);
  }
}

.pill{
  font-size:12px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid var(--border);
  background: rgba(17,17,17,0.04);
}
.pill--ghost{background: transparent}
.pill--warn{background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.35)}

.tag{
  font-size:12px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid var(--border);
  background: rgba(17,17,17,0.03);
  color: rgba(17,17,17,0.75);
}
.tags{display:flex; gap:8px; flex-wrap:wrap}

/* ===========================
   WORK HERO CARDS (clickable)
   =========================== */

.work-heroes{
  padding: 32px 0 48px;
}

/* Full-width grid with "site-like" side padding */
.work-heroes-grid{
  display: grid;
  grid-template-columns: 1fr;      /* always stacked */
  gap: 28px;
  width: 100%;
  padding: 0 22px;                 /* matches your .container padding */
}

/* Optional: keep the cards aligned with your max width while still feeling wide
   If you truly want EDGE-TO-EDGE, delete max-width + margin lines below. */
.work-heroes-grid{
  max-width: var(--max);
  margin: 0 auto;
}

/* Big cinematic card */
.work-hero{
  position: relative;
  display: block;
  width: 100%;
  min-height: clamp(340px, 42vw, 520px);
  border-radius: 26px;
  overflow: hidden;
  padding: 32px 0 48px;

  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(17,17,17,0.10);
  box-shadow: var(--shadow);
  text-decoration: none;
  isolation: isolate;
}

/* Media layer (zoom happens here) */
.work-hero__media{
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: scale(1);
  transition: transform 280ms ease;
  will-change: transform;
}

.work-hero__media img{
  object-position: center top;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dark overlay */
.work-hero__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,0.28);
  transition: background 280ms ease;
}

/* Centered text */
.work-hero__content{
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 2;

  width: min(760px, 88%);
  text-align: center;
  color: #fff;
  padding: 0 10px;
}

.work-hero__title{
  display: block;
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1;
  font-size: clamp(34px, 3.6vw, 56px);
  margin-bottom: 12px;
}

.work-hero__desc{
  display: block;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: clamp(18px, 1.8vw, 26px);
  opacity: 0.95;
}

.work--page{
  padding-top: 60px;  /* adjust: 60–140px */
}

/* Hover: zoom + darken */
@media (hover:hover){
  .work-hero:hover .work-hero__media{
    transform: scale(1.045);
  }
  .work-hero:hover .work-hero__overlay{
    background: rgba(0,0,0,0.45);
  }
}

/* Keyboard accessibility */
.work-hero:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(17,17,17,0.25), var(--shadow);
}


/* ===========================
   Case study hero image
   =========================== */

.case-hero{
  margin-top: 40px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.case-hero img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ===========================
   CASE NAV (above hero)
   =========================== */

.case-nav{
  padding-top: 22px;
  padding-bottom: 12px;
}

/* ===========================
   FULL-BLEED HERO IMAGE
   =========================== */

/* FULL-BLEED HERO IMAGE (no drift) */
.case-hero-cover{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* REMOVE fixed height */
  height: auto;

  /* control vertical spacing HERE */
  padding-top: 0;      /* 👈 top spacing */
  padding-bottom: 20px;  /* 👈 bottom spacing */

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

  background: var(--bg);
  overflow: hidden;
}


.case-hero-cover img{
  max-width: 100%;
  height: auto;
  display: block;
}



/* ===========================
   CASE INTRO GRID (Seren-style)
   =========================== */

.case-intro-grid{

}

.case-intro-grid__inner{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr; /* text a bit wider than image */
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

/* LEFT */
.case-kicker{
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17,17,17,0.55);
  position: relative;
  padding-bottom: 8px;
}

.case-kicker::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 1.5px;
  background: rgba(17,17,17,0.6);
}


/* Bigger, Seren-like editorial headline */
.case-question{
  color: #592841;
  margin: 0 0 16px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;

  /* MUCH smaller, Seren-like */
  font-size: clamp(35px, 3.2vw, 44px);

  max-width: 22ch;
}



/* Body = readable width + softer color */
.case-body{
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(17,17,17,0.65);
}

.case-body p{
  margin: 0 0 16px;
}


/* CTA like Seren */
.case-cta{
  margin-top: 14px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 999px;
}

@media (hover:hover){
  .case-cta:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,0.92);
    border-color: rgba(17,17,17,0.75);
  }
}

/* RIGHT */
.case-intro-grid__visual{
  display: flex;
  justify-content: center;
  padding-top: 8px; /* aligns with Seren */
}

.case-device{
  width: min(420px, 36vw);
  margin: 0;
  filter: drop-shadow(0 22px 60px rgba(0,0,0,0.12));
}
.case-device img{
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive: stack like Seren on mobile */
@media (max-width: 980px){
  .case-intro-grid__inner{
    grid-template-columns: 1fr;
  }
  .case-intro-grid__visual{
    justify-content: flex-start;
    padding-top: 18px;
  }
  .case-device{
    width: min(420px, 70vw);
  }
}


/* ===========================
   PROJECT OVERVIEW (Seren-style)
   =========================== */

.po{

}

.po-card{
  border: 2px solid rgba(17,17,17,0.38);
  border-radius: 44px;
  background: rgba(255,255,255,0.08);
  padding: clamp(26px, 3.4vw, 40px) clamp(18px, 3vw, 34px); /* ✅ smaller top/bottom */
}

.po-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 36px);
  align-items: start;
}

.po-item{
  text-align: center;
}

.po-icon{
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  opacity: 0.70;
}

.po-icon svg{
  width: 44px;
  height: 44px;
  stroke: rgba(17,17,17,0.75);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.po-label{
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  position: relative;
  display: inline-block;
}

.po-label::after{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  width: 64px;
  height: 3px;
  border-radius: 99px;
  background: rgba(17,17,17,0.65);
}

.po-value{
  margin-top: 18px; /* sits under underline */
  font-size: 18px;
  line-height: 1.55;
  color: #592841; /* your accent */
  font-weight: 500;
}

/* Keep tools from feeling “too tall” */
.po-value{
  max-width: 26ch;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive */
@media (max-width: 980px){
  .po-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .po-card{ border-radius: 36px; }
}
@media (max-width: 560px){
  .po-grid{ grid-template-columns: 1fr; }
  .po-label::after{ width: 56px; }
}



/* ===========================
   INSIGHT PAIR (Seren-style)
   =========================== */

.insight-pair{

}

.insight-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
}

/* Card */
.insight-card{
  border-radius: 28px;
  padding: clamp(28px, 4vw, 44px);
  background: #eef4f1;
}

/* Subtle color variation like Seren */
.insight-card--soft{
  background: #DDCBC8; /* Dark Pink */
}

.insight-card--cool{
  background: #FDF1EE; /* Light Pink */
}


/* Kicker */
.insight-kicker{
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17,17,17,0.55);
}

/* Big statement */
.insight-title{
  margin: 0 0 16px;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.25;
  font-weight: 500;
  color: #592841;
}

/* Supporting text */
.insight-body{
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(17,17,17,0.75);
}

/* Responsive */
@media (max-width: 900px){
  .insight-grid{
    grid-template-columns: 1fr;
  }
}



/* ===========================
   DESGIN PROCESS
   =========================== */

.case-process .case-title{
  color:#592841;
}

/* ===========================
   DESIGN PROCESS — section + image + dt2
   =========================== */


.case-process.dt2 .case-process-media{
  margin: clamp(18px, 2.8vw, 34px) auto clamp(26px, 4.2vw, 52px);
  width: 100%;

  /* 🔑 center the image block */
  display: flex;
  justify-content: center;
}

/* 🔑 visually constrained image */
.case-process.dt2 .case-process-media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
}



/* ===========================
   dt2 (your existing code)
   =========================== */

:root{
  --dt2-ink: #4a2a3a;
  --dt2-title-bg: rgba(74,42,58,0.14);
  --dt2-pin: rgba(74,42,58,0.70);
  --dt2-dot: rgba(74,42,58,0.70);
  --dt2-body: rgba(17,17,17,0.70);
  --dt2-bullet: rgba(74,42,58,0.65);

  --dt2-title-h: 140px;
  --dt2-gap: clamp(22px, 4vw, 70px);
  --dt2-list-size: 26px;
}

/* 4 columns like screenshot */
.dt2-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: var(--dt2-gap);
  align-items: start;
}

/* each column */
.dt2-step{
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto 1fr;
  justify-items: center;
}

/* top rectangle */
.dt2-title{
  width: 100%;
  height: var(--dt2-title-h);
  background: var(--dt2-title-bg);
  display: grid;
  place-items: center;
  text-align: center;

  color: var(--dt2-ink);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: clamp(24px, 2.2vw, 44px);
}

/* pin */
.dt2-pin{
  width: 3px;
  height: 70px;
  background: var(--dt2-pin);
  margin: 14px 0 14px;
  position: relative;
  border-radius: 999px;
  opacity: 1;
}

.dt2-pin::before{
  content:"";
  position: absolute;
  left: 50%;
  top: -7px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 12px solid var(--dt2-pin);
}

.dt2-pin::after{
  content:"";
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--dt2-dot);
}

/* bullet list */
.dt2-list{
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;

  display: grid;
  gap: 5px;

  color: var(--dt2-body);
  font-size: clamp(18px, 1.2vw, var(--dt2-list-size));
  line-height: 1.35;
}

.dt2-list li{
  position: relative;
  padding-left: 22px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dt2-list li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--dt2-bullet);
  font-weight: 800;
}

/* responsive */
@media (max-width: 1100px){
  .dt2-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px){
  .dt2-grid{ grid-template-columns: 1fr; }
  .dt2-title{ height: 120px; }
  .dt2-pin{ height: 90px; }
}













/* ===========================
   PROCESS HEADER — mauve (extra compact)
   =========================== */

.process-header{
  padding: 28px 0;              /* ⬅ much shorter */
  color: #F5F1ED;
}

/* color variant */
.process-header--discover{
  background: #4A2A3A;
}

/* small step label */
.process-kicker{
  display: inline-block;
  font-size: 16px;              /* ⬅ much smaller */
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #F5F1ED;
  position: relative;
}

/* underline */
.process-kicker::after{
  content: "";
  display: block;
  width: 56px;                  /* ⬅ shorter */
  height: 2px;                  /* ⬅ thinner */
  background: rgba(245,241,237,0.85);
  margin-top: 8px;
  border-radius: 999px;
}

/* main headline */
.process-title{
  margin: 14px 0 0;             /* ⬅ tight spacing */
  max-width: 720px;

  font-size: clamp(20px, 2.4vw, 30px); /* ⬅ much smaller */
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #F5F1ED;
}

/* ===========================
   Mobile refinement
   =========================== */

@media (max-width: 640px){
  .process-header{
    padding: 20px 0;
  }

  .process-kicker{
    font-size: 15px;
  }

  .process-title{
    font-size: 22px;
  }
}




/* ===========================
   DISCOVER — Research section (CLEANER + mauve headings)
   FULL implementation (optimized vertical spacing between rows)
   Replace your current "DISCOVER — Research section" block with this.
   =========================== */

.research-block{
  /* more consistent section rhythm + better separation between internal rows */
  padding: clamp(28px, 4.2vw, 64px) 0;
}

.research-intro{
  margin: 0 0 clamp(22px, 3vw, 40px);
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 72ch;
}

/* 3 activity row */
.research-quick{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.6vw, 40px);
  align-items: center;

  /* ✅ more space below this "row" */
  padding: 6px 0 clamp(18px, 3vw, 34px);
}

.rq-item{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* ✅ cleaner icons (no “white bubble” feel) */
.rq-ico{
  width: auto;
  height: auto;
  display: inline-grid;
  place-items: center;
  border-radius: 0;
  background: none;
  border: 0;
  box-shadow: none;
  font-size: 18px;
  line-height: 1;
  color: #592841;
}

.rq-text{
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(17,17,17,0.86);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* divider */
.research-divider{
  border: 0;
  height: 1px;
  background: rgba(17,17,17,0.10);

  /* ✅ bigger breath between "rows" */
  margin: clamp(26px, 4vw, 52px) 0;
}

/* header block */
.research-head{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;

  /* ✅ more separation from next row */
  margin: 0 0 clamp(22px, 3vw, 40px);
}

/* ✅ cleaner icon (no circle container) */
.research-head__ico{
  width: auto;
  height: auto;
  display: inline-grid;
  place-items: center;
  border-radius: 0;
  background: none;
  border: 0;
  box-shadow: none;
  font-size: 20px;
  line-height: 1;
  color: #592841;
}

.research-head__copy{
  position: relative;
  padding-left: 16px;
}

/* accent bar uses your mauve */
.research-head__copy::before{
  content:"";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  background: rgba(89,40,65,0.85); /* #592841 */
  border-radius: 999px;
}

.research-eyebrow{
  margin: 0 0 8px;
  font-size: var(--fs-caption);
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(17,17,17,0.55);
}

/* ✅ MAIN heading: Exploring Existing Insights */
.research-h3{
  margin: 0;
  font-size: clamp(28px, 2.4vw, 38px);
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: -0.03em;
  color: #592841;
  max-width: 30ch;
}

/* tighter + cleaner check summary */
.research-checkgrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  /* ✅ column spacing */
  column-gap: clamp(18px, 3vw, 40px);

  /* ✅ vertical spacing between check items + between "rows" */
  row-gap: clamp(18px, 3vw, 34px);

  /* ✅ more breathing room around this block */
  margin: clamp(18px, 3vw, 36px) 0 clamp(30px, 4vw, 54px);
}

.rcheck{
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
}

.rcheck-ico{
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(89,40,65,0.10);
  border: 1px solid rgba(89,40,65,0.18);
  color: rgba(89,40,65,0.78);
  font-size: 14px;
  line-height: 1;
  margin-top: 3px;
}

.rcheck p{
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted);
  max-width: 62ch;
}

/* takeaways columns */
.takeaways-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4.2vw, 64px);
  align-items: start;

  /* ✅ more separation from previous row + calmer top rule spacing */
  margin-top: clamp(18px, 3vw, 36px);
  padding-top: clamp(26px, 4vw, 44px);

  border-top: 1px solid rgba(17,17,17,0.10);

  /* ✅ ensures nice spacing when stacked on mobile */
  row-gap: clamp(26px, 4vw, 44px);
}

/* ✅ headings: Takeaways... / Key Takeaways... */
.takeaways-title{
  margin: 0 0 16px;
  font-size: clamp(20px, 1.2vw + 1rem, 26px);
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: #592841;
}

/* cleaner list rhythm */
.takeaways-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;

  /* ✅ more air between list rows */
  gap: clamp(14px, 2vw, 20px);
}

.takeaways-list li{
  position: relative;
  padding-left: 30px;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--muted);
  max-width: 70ch;
}

/* ✅ cleaner bullets (no “white space badge” look) */
.takeaways-list--doc li::before,
.takeaways-list--star li::before{
  position: absolute;
  left: 0;
  top: 3px;
  width: auto;
  height: auto;
  border-radius: 0;
  display: inline-block;
  background: none;
  border: 0;
  color: rgba(89,40,65,0.70);
  font-size: 14px;
  line-height: 1;
}

/* keep icons minimal */
.takeaways-list--doc li::before{ content: "▦"; }
.takeaways-list--star li::before{ content: "★"; }

/* emphasis */
.takeaways-list strong,
.rcheck strong{
  font-weight: 850;
  color: rgba(17,17,17,0.90);
}

/* responsive */
@media (max-width: 980px){
  .research-quick{ grid-template-columns: 1fr; }
  .research-checkgrid{ grid-template-columns: 1fr; }
  .takeaways-grid{ grid-template-columns: 1fr; }
}






/* ===========================
   INSIGHT BLOCK — (logo + accent bar + clean text layout)
   Use for: User Research / Competitive Analysis / User Interviews
   =========================== */


/* Put this on the whole Competitive Analysis section if you want
   the top text + this strip to share one continuous background. */
.insight-block--research,
#competitive-analysis{
  background: #F4F3EF;
}

/* ensure children don’t override it */
.competitive-analysis .swot-strip{
  background: transparent;
}



.case .insight-block{
  padding-block: var(--space-section-sm);
}


/* header row: logo + accent-bar copy */
.insight-head{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: clamp(20px, 3vw, 36px);
}

.insight-head__logo{
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
}

/* small “logo” treatment */
.insight-emoji{
  font-size: 28px;
  line-height: 1;
  transform: translateY(2px);
}

/* accent bar + text wrapper */
.insight-head__copy{
  position: relative;
  padding-left: 18px;
}

/* mauve vertical bar */
.insight-head__copy::before{
  content:"";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 5px;
  background: rgba(89,40,65,0.85); /* mauve */
  border-radius: 999px;
}

/* kicker like screenshot */
.insight-eyebrow{
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(17,17,17,0.55);
}

/* big heading like screenshot */
.insight-title{
  margin: 0 0 16px;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: #592841;
  max-width: 22ch;
}

/* spacing between insight text and takeaways */
.insight-divider{
  margin-top: clamp(48px, 6vw, 96px);
}


/* body text layout like image 1 */
.insight-body{
  max-width: 86ch;
}

.insight-body p{
  margin: 0 0 18px;
  font-size: var(--fs-body, 18px);
  line-height: var(--lh-body, 1.8);
  color: rgba(17,17,17,0.78);
}

.insight-body p:last-child{
  margin-bottom: 0;
}

.insight-body strong{
  font-weight: 850;
  color: rgba(17,17,17,0.92);
}

/* responsive */
@media (max-width: 720px){
  .insight-head{
    grid-template-columns: 44px 1fr;
    gap: 14px;
  }
  .insight-head__logo{
    width: 44px;
    height: 44px;
  }
  .insight-emoji{ font-size: 22px; }
}















/* ===========================
   COMPETITIVE ANALYSIS — 3-column strip (no cards)
   =========================== */



/* the 3-column strip */
.swot-strip{
  margin-top: clamp(32px, 4.5vw, 64px);
  padding-top: clamp(26px, 3.5vw, 44px);

  max-width: 980px;
  margin-left: auto;
  margin-right: auto;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);

  border-top: 1px solid rgba(17,17,17,0.12);
}


/* each column (no card, just clean column) */
.swot-col{
  min-width: 0;
  position: relative;
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;   /* ⬅️ centers image + text block */
  text-align: left;      /* text still reads well */
}




/* vertical dividers between columns */
.swot-col:not(:last-child)::after{
  content:"";
  position: absolute;
  top: 0;
  right: calc(-1 * (clamp(22px, 3.2vw, 56px) / 2));
  width: 1px;
  height: 100%;
  background: rgba(17,17,17,0.10);
}

/* image container */
.swot-mark{
  width: 100%;
  height: 400px;                 /* ⬅️ controls visual weight */
  margin: 0 auto 26px;           /* space below image */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* image itself */
.swot-mark img{
  width: auto;
  height: 100%;
  max-width: 400px;              /* ⬅️ prevents overflow, keeps balance */
  object-fit: contain;
  display: block;

  /* soft presence like reference */
  filter: drop-shadow(0 22px 36px rgba(0,0,0,0.14));
}



/* text matches your body rhythm */
.swot-text{
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 48ch;
}

/* emphasis consistent with your system */
.swot-text strong{
  font-weight: 850;
  color: rgba(17,17,17,0.90);
}

/* responsive */
@media (max-width: 980px){
  .swot-strip{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .swot-col:not(:last-child)::after{
    display: none;
  }
  .swot-col{
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(17,17,17,0.10);
  }
  .swot-col:last-child{
    border-bottom: 0;
    padding-bottom: 0;
  }
}






/* ===========================
   TAKEAWAYS 3-UP (quotes + key takeaways)
   Palette:
   - Dark violet: #592841
   - Dark Pink:  #DDCBC8
   - Light Pink: #FDF1EE
   =========================== */


/* Background band (pick one) */
.takeaways-band{
  padding-block: var(--space-section);
}

/* 3-column layout */
.takeaways-3{
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: clamp(18px, 3vw, 40px);
  align-items: stretch;
}

/* Quote cards */
.quote-card{
  background: #DDCBC8;           /* Dark Pink */
  border-radius: 22px;
  padding: clamp(22px, 2.8vw, 34px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.10);
  position: relative;
}

.quote-mark{
  font-size: 44px;
  line-height: 1;
  color: #592841;               /* Dark violet */
  opacity: 0.9;
  margin-bottom: 10px;
  font-weight: 900;
}

.quote-text{
  margin: 0 0 18px;
  color: rgba(17,17,17,0.82);
  font-size: clamp(1rem, 0.25vw + 0.95rem, 1.08rem);
  line-height: 1.75;
  max-width: 34ch;
}

.quote-who{
  margin: 0;
  color: rgba(17,17,17,0.78);
}

/* Center “Key Takeaways” card */
.takeaways-card{
  background: rgba(255,255,255,0.65);
  border: 2px solid rgba(89,40,65,0.60);  /* violet */
  border-radius: 22px;
  padding: clamp(24px, 3vw, 38px);
}

.takeaways-title{
  margin: 0 0 16px;
  font-size: clamp(22px, 1.2vw + 1.1rem, 30px);
  font-weight: 850;
  letter-spacing: -0.02em;
  color: #592841;
}

.takeaways-list{
  margin: 0;
  padding-left: 22px;
  color: rgba(17,17,17,0.80);
  line-height: 1.7;
  font-size: clamp(1rem, 0.25vw + 0.95rem, 1.08rem);
}

.takeaways-list li{ margin: 0 0 14px; }
.takeaways-list li:last-child{ margin-bottom: 0; }
.takeaways-list strong{ color: rgba(17,17,17,0.92); font-weight: 850; }

/* Responsive */
@media (max-width: 980px){
  .takeaways-3{
    grid-template-columns: 1fr;
  }
}



/* ===========================
   3 SVG CARDS (image-only version)
   Uses your palette:
   - Dark violet: #592841
   - Dark Pink:  #DDCBC8
   - Light Pink: #FDF1EE
   =========================== */

.svg-cards3{

}

/* 3-up grid */
.svg3-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 30px);
  align-items: stretch;
}

/* Card shell */
.svg3-card{
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(17,17,17,0.10);
  border-radius: 26px;
  padding: clamp(14px, 1.6vw, 20px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.08);

  /* keeps the “big card” feeling */
  min-height: clamp(200px, 28vw, 300px);

  display: flex;
  flex-direction: column;
}

/* Center the SVG and let it grow */
.svg3-media{
  flex: 1;
  display: grid;
  place-items: center;
}

/* Make SVGs large + centered */
.svg3-media img,
.svg3-media svg{
  width: min(520px, 100%);     /* bigger visual */
  height: auto;
  max-height: 420px;            /* fill card height */
  object-fit: contain;
  display: block;

  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.10));
}

/* Optional: subtle hover lift */
@media (hover:hover){
  .svg3-card{
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .svg3-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 26px 70px rgba(0,0,0,0.12);
  }
}

/* Responsive */
@media (max-width: 980px){
  .svg3-grid{
    grid-template-columns: 1fr;
  }
  .svg3-card{
    min-height: clamp(300px, 60vw, 520px);
  }
  .svg3-media img,
  .svg3-media svg{
    width: min(640px, 100%);
  }
}










/* ===========================
   SVG CARDS — 2-UP (same style as 3-up)
   Use with:
   <section class="svg-cards2 js-fade" id="...">
     <div class="container">
       <div class="svg2-grid">
         <article class="svg2-card"><div class="svg2-media"><img ...></div></article>
         <article class="svg2-card"><div class="svg2-media"><img ...></div></article>
       </div>
     </div>
   </section>
   =========================== */

:root{
  --sv2-radius: 34px;
  --sv2-pad: clamp(14px, 1.4vw, 18px);
  --sv2-minh: clamp(360px, 32vw, 520px); /* controls overall box height */
  --sv2-img-maxh: clamp(320px, 28vw, 460px); /* controls how big the svg can be */
}

/* section wrapper */
.svg-cards2{
  padding-block: var(--space-section);
  background: transparent; /* keep page background */
}

/* 2-column grid */
.svg2-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 4vw, 56px);
  align-items: stretch;
}

/* card */
.svg2-card{
  background: rgba(255,255,255,0.86);
  border-radius: var(--sv2-radius);
  padding: var(--sv2-pad);
  min-height: var(--sv2-minh);

  box-shadow:
    0 26px 90px rgba(0,0,0,0.10),
    inset 0 0 0 1px rgba(0,0,0,0.055);

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

/* media wrapper centers content */
.svg2-media{
  width: 100%;
  height: 100%;

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

  padding: clamp(10px, 1.2vw, 18px);
}

/* image / inline svg sizing */
.svg2-media img,
.svg2-media svg{
  width: 100%;
  height: auto;

  /* make the SVG BIG inside the box */
  max-width: 100%;
  max-height: var(--sv2-img-maxh);

  display: block;
  object-fit: contain;

  filter: drop-shadow(0 18px 34px rgba(0,0,0,0.10));
}

/* optional hover polish (matches your site style) */
@media (hover:hover){
  .svg2-card{
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
  }
  .svg2-card:hover{
    transform: translateY(-2px);
    background: rgba(255,255,255,0.92);
    box-shadow:
      0 34px 110px rgba(0,0,0,0.12),
      inset 0 0 0 1px rgba(0,0,0,0.055);
  }
}

/* responsive */
@media (max-width: 980px){
  .svg2-grid{ grid-template-columns: 1fr; }
  .svg2-card{ min-height: auto; }
  .svg2-media img,
  .svg2-media svg{ max-height: none; }
}







/* ===========================
   SINGLE SVG (no card / no box)
   =========================== */

.svg-single{
  padding: clamp(20px, 6vw, 30px) 0;
  background: transparent; /* inherits page bg */
}

.svg-single-media{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  /* subtle visual grounding without a box */

}

.svg-single-media img,
.svg-single-media svg{
  width: 100%;
  max-width: min(1100px, 92vw);   /* 🔑 controls overall size */
  height: auto;

  object-fit: contain;
  display: block;

  /* optional polish */
  filter: drop-shadow(0 24px 50px rgba(0,0,0,0.10));
}

/* tighter on mobile */
@media (max-width: 780px){
  .svg-single{
    padding: clamp(32px, 6vw, 64px) 0;
  }

  .svg-single-media img,
  .svg-single-media svg{
    max-width: 100%;
  }
}





/* ===========================
   PROBLEM + HYPOTHESIS (2-col)
   Palette:
   - Dark violet: #592841
   - Dark Pink:  #DDCBC8
   - Light Pink: #FDF1EE
   =========================== */

.psh{

  background: #FDF1EE; /* Light Pink band like reference */
}

.psh-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}

/* optional subtle column separation (like screenshot whitespace) */
.psh-col{
  min-width: 0;
}

/* eyebrow + rule */
.psh-top{
  display: inline-block;
  margin-bottom: clamp(18px, 2.2vw, 28px);
}

.psh-eyebrow{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(17,17,17,0.70);
}

.psh-rule{
  width: 64px;
  height: 2px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(89,40,65,0.55); /* violet */
}

/* section headline */
.psh-h2{
  margin: 0 0 18px;
  font-size: clamp(34px, 3vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 900;
  color: #592841; /* Dark violet */
}

/* intro line */
.psh-lead{
  margin: 0 0 14px;
  font-size: clamp(16px, 0.35vw + 15px, 18px);
  line-height: 1.7;
  color: rgba(17,17,17,0.80);
}

/* bullets */
.psh-list{
  margin: 0 0 22px;
  padding-left: 20px;
  color: rgba(17,17,17,0.78);
  font-size: clamp(16px, 0.35vw + 15px, 18px);
  line-height: 1.8;
}

.psh-list li{ margin: 8px 0; }

.psh-body{
  margin: 0;
  font-size: clamp(16px, 0.35vw + 15px, 18px);
  line-height: 1.8;
  color: rgba(17,17,17,0.78);
  max-width: 70ch;
}

.psh strong{
  font-weight: 900;
  color: rgba(17,17,17,0.92);
}

/* Responsive */
@media (max-width: 980px){
  .psh-grid{
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .psh-rule{ width: 56px; }
}




/* ===========================
   PALETTE — 2 BOXES (violet + dark pink)
   Fixes:
   - remove duplicate card styles (use one base + modifiers)
   - correct comments + consistent colors
   - remove heavy shadow (optional, softer)
   - make both cards same height automatically
   =========================== */

.palette-2up{

}

.palette2-grid{
  --palette-max: 980px; /* controls overall width */

  max-width: var(--palette-max);
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 36px);

  align-items: stretch;
}

/* Base card */
.palette-card{
  border: 2px solid rgba(89,40,65,0.55); /* #592841 */
  border-radius: 24px;
  padding: clamp(22px, 2.8vw, 34px);

  /* lighter + more “modern” */
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);

  display: flex;
  flex-direction: column;
  min-height: clamp(220px, 20vw, 320px);
}

.palette-card-2{
  border: 2px solid rgba(221, 203, 200, 1); /* #DDCBC8 */
  border-radius: 24px;
  padding: clamp(22px, 2.8vw, 34px);

  /* lighter + more “modern” */
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);

  display: flex;
  flex-direction: column;
  min-height: clamp(220px, 20vw, 320px);
}

/* Variants */
.palette-card--pink{ background: #DDCBC8; }  /* Dark Pink */
.palette-card--cream{ background: #FDF1EE; } /* Light blush */

.palette-card__title{
  margin: 0 0 14px;
  color: #592841;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: clamp(18px, 1.2vw + 14px, 24px);
}

.palette-card__body{
  margin: 0;
  color: rgba(17,17,17,0.78);
  font-size: var(--fs-body);
  line-height: 1.75;
  max-width: 60ch;
}

.palette-card__body strong{
  color: rgba(17,17,17,0.90);
  font-weight: 850;
}

@media (max-width: 980px){
  .palette2-grid{ grid-template-columns: 1fr; }
  .palette-card{ min-height: unset; }
}



/* ===========================
   PALETTE SWATCH — 5 across
   - no shadows/halos
   - subtle entrance animation
   - staggered vertical layout (IMAGE + TEXT together)
   =========================== */

.palette-swatch{

  background: transparent;
}

.swatch5{
  --swatch-max: 1200px;

  max-width: var(--swatch-max);
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 110px);

  align-items: start;
  justify-items: center;
}

.swatch5-item{
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 18px;
  position: relative;

  /* entrance */
  opacity: 0;
  transform: translateY(10px);
  animation: swatchIn 650ms cubic-bezier(.2,.8,.2,1) forwards;
  will-change: transform, opacity;
}

/* stagger entrance timing */
.swatch5-item:nth-child(1){ animation-delay: 0ms; }
.swatch5-item:nth-child(2){ animation-delay: 80ms; }
.swatch5-item:nth-child(3){ animation-delay: 160ms; }
.swatch5-item:nth-child(4){ animation-delay: 240ms; }
.swatch5-item:nth-child(5){ animation-delay: 320ms; }

@keyframes swatchIn{
  to{ opacity: 1; transform: translateY(0); }
}

/* remove any halo */
.swatch5-item::before{ display: none !important; }

/* ---------------------------
   Vertical stagger (IMAGE + TEXT)
   1: mid, 2: lower, 3: mid, 4: higher, 5: mid
   --------------------------- */
.swatch5-item:nth-child(1){ --y: 0px; }
.swatch5-item:nth-child(2){ --y: 36px; }
.swatch5-item:nth-child(3){ --y: 0px; }
.swatch5-item:nth-child(4){ --y: -36px; }
.swatch5-item:nth-child(5){ --y: 0px; }

/* SVG */
.swatch5-item img{
  width: min(125px, 11vw);
  height: auto;
  display: block;

  filter: none !important;
  box-shadow: none !important;

  /* MOVE IMAGE */
  transform: translateY(var(--y, 0px));
  transition: transform 250ms ease;
  will-change: transform;
}

/* label */
.swatch5-item figcaption{
  font-size: 14px;
  letter-spacing: 0.16em;
  font-weight: 800;
  color: rgba(17,17,17,0.80);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;

  /* MOVE TEXT (same offset) */
  transform: translateY(var(--y, 0px));
  transition: transform 250ms ease;
  will-change: transform;
}

/* subtle hover */
@media (hover:hover){
  .swatch5-item:hover img{
    transform: translateY(var(--y, 0px)) scale(1.02);
  }
  .swatch5-item:hover figcaption{
    transform: translateY(calc(var(--y, 0px) - 4px));
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .swatch5-item{
    animation: none;
    opacity: 1;
    transform: none;
  }
  .swatch5-item img,
  .swatch5-item figcaption{
    transition: none;
  }
  .swatch5-item:hover img{
    transform: translateY(var(--y, 0px));
  }
  .swatch5-item:hover figcaption{
    transform: translateY(var(--y, 0px));
  }
}

/* responsive */
@media (max-width: 980px){
  .swatch5{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px 40px;
  }
  .swatch5-item img{
    width: min(140px, 28vw);
  }

  /* reduce stagger on smaller screens */
  .swatch5-item:nth-child(2){ --y: 22px; }
  .swatch5-item:nth-child(4){ --y: -22px; }
}

@media (max-width: 560px){
  .swatch5{
    grid-template-columns: 1fr;
    gap: 46px;
  }
  .swatch5-item img{
    width: min(150px, 56vw);
  }

  /* no stagger in 1 column */
  .swatch5-item{ --y: 0px; }
  .swatch5-item img,
  .swatch5-item figcaption{
    transform: translateY(0);
  }
}





/* ===========================
   UI KIT — shared card styles
   =========================== */

.ui-kit-1up,
.ui-kit-2up{
  padding: clamp(46px, 6vw, 92px) 0;
}

.ui-card{
  background: #ffffff;
  border-radius: 34px;
  padding: clamp(26px, 3.2vw, 44px);

  box-shadow: 0 18px 60px rgba(0,0,0,0.10);
}

/* full-width card in section A */
.ui-card--full{
  width: 100%;
}


/* ===========================
   TYPOGRAPHY SECTION
   =========================== */

.typography-section{
  display: flex;
  justify-content: center;
}

/* the actual card */
.type-card{
  max-width: 560px;          /* controls box size */
  width: 100%;
  margin: 0 auto;

  padding: clamp(36px, 4vw, 48px);

  background: #DDCBC8;
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.10);
}
   
  
/* big Aa */
.type-sample{
  font-size: 64px;
  font-weight: 500;       /* Inter Medium */
  color: #592841;
  margin-bottom: 24px;
}

/* list layout */
.type-scale{
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 10px;
}

/* font rows */
.tm-20{
  font-size: 20px;
  font-weight: 500;       /* Inter Medium */
}

.tm-16{
  font-size: 16px;
  font-weight: 500;       /* Inter Medium */
}

.ts-14{
  font-size: 14px;
  font-weight: 600;       /* Inter SemiBold */
}

.tr-12{
  font-size: 12px;
  font-weight: 400;       /* Inter Regular */
  letter-spacing: 0.14em;
}

/* description */
.type-desc{
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 46ch;
}





/* ===========================
   Section B: 2-column layout
   =========================== */
/* ===========================
   COLOR ACCESSIBILITY — aligned with global type system
   =========================== */

.accessibility-band{
  background: transparent; /* keep page bg */
  padding-block: var(--space-section);
}

.access-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(22px, 3vw, 44px);
  align-items: center;
}

/* LEFT */
.access-copy{
  max-width: 72ch; /* matches your writing widths */
}

.access-title{
  /* match your global h2 */
  margin: 0 0 16px;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #592841;
}

.access-lead{
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgba(17,17,17,0.78);
}

.access-lead strong{
  color: rgba(17,17,17,0.92);
  font-weight: 700;
}

/* Optional bullets (match your body rhythm) */
.access-bullets{
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.access-bullets li{
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;

  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted);
  font-weight: 500;
}

.access-bullets li::before{
  content: "✓";
  font-size: 20px;
  line-height: 1;
  color: rgba(17,17,17,0.72);
  transform: translateY(2px);
}

/* RIGHT IMAGE */
.access-visual{
  margin: 0;
  border-radius: 34px;
  overflow: hidden;

  /* subtle surface, not a solid mauve block */
  background: rgba(255,255,255,0.25);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.access-visual img{
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive */
@media (max-width: 980px){
  .access-grid{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .access-visual{
    border-radius: 28px;
  }
}


































/* ===========================
   REFLECTION — Project Learnings
   =========================== */

.reflection-block{
  padding-block: var(--space-section);
}


/* header */
.reflection-head{
  max-width: 72ch;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.reflection-kicker{
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17,17,17,0.55);
  position: relative;
  margin-bottom: 10px;
}

.reflection-kicker::after{
  content:"";
  display:block;
  width: 56px;
  height: 2px;
  background: rgba(17,17,17,0.55);
  margin-top: 10px;
  border-radius: 999px;
}

.reflection-title{
  margin: 18px 0 0;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #592841;
}

/* grid */
.reflection-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

/* columns */
.reflection-subtitle{
  margin: 0 0 22px;
  font-size: 22px;
  font-weight: 700;
  color: #592841; /* subtle teal like your reference */
}

/* list */
.reflection-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}

.reflection-list li{
  position: relative;
  padding-left: 36px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted);
  max-width: 62ch;
}

/* checkmark */
.reflection-list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 20px;
  line-height: 1;
  color: #3f5f66;
}

/* emphasis */
.reflection-list strong{
  color: var(--text);
  font-weight: 750;
}

/* responsive */
@media (max-width: 900px){
  .reflection-grid{
    grid-template-columns: 1fr;
  }
}





/* ===========================
   FINAL FIGMA PROTOTYPE SECTION
   =========================== */

.figma-final{
  padding-block: var(--space-section-lg);
  background: transparent;
  text-align: center;
}

.figma-final__inner{
  max-width: 820px;
}

/* header */
.figma-final__head{
  margin-bottom: clamp(36px, 5vw, 64px);
}

.figma-final__kicker{
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(89,40,65,0.70); /* #592841 */
  position: relative;
  margin-bottom: 12px;
}

.figma-final__kicker::after{
  content:"";
  display:block;
  width: 56px;
  height: 2px;
  background: rgba(89,40,65,0.85);
  margin: 10px auto 0;
  border-radius: 999px;
}

.figma-final__title{
  margin: 18px 0 0;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #592841;
}

/* device image */
.figma-final__device{
  margin: 0 auto clamp(36px, 5vw, 56px);
  max-width: 360px;
}

.figma-final__device img{
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 28px 60px rgba(0,0,0,0.18));
}

/* CTA */
.figma-final__cta{
  margin-top: 12px;
}

.figma-final__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 28px;
  border-radius: 999px;

  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;

  color: #592841;
  background: transparent;
  border: 2px solid rgba(89,40,65,0.55);

  text-decoration: none;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

@media (hover:hover){
  .figma-final__btn:hover{
    background: #592841;
    color: #fff;
    transform: translateY(-2px);
  }
}

/* focus accessibility */
.figma-final__btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(89,40,65,0.35);
}














































/* ===========================
   MOBILE TUNING
   =========================== */

@media (max-width: 720px){
  .case-hero-cover{
    height: 58vh;
  }

  .case-title{
    max-width: 18ch;
  }
}



/* ===========================
   SCROLL FADE REVEAL
   =========================== */

/* Default = visible (if JS disabled) */
.js-fade{
  opacity: 1;
  transform: none;
}

/* When JS enabled, start hidden */
html.js-enabled .js-fade{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}

/* Reveal */
html.js-enabled .js-fade.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Optional: nicer image reveal */
/* Fade photo content, but DO NOT touch .img-frame--hero (it is scroll-animated) */
html.js-enabled .photo .photo-card.js-fade{
  transform: translateY(18px);
}
html.js-enabled .photo .photo-card.js-fade.is-visible{
  transform: translateY(0);
}


/* XP row stagger (correct targeting) */
html.js-enabled .xp-list .xp-row.js-fade:nth-child(1){ transition-delay: .05s; }
html.js-enabled .xp-list .xp-row.js-fade:nth-child(2){ transition-delay: .12s; }
html.js-enabled .xp-list .xp-row.js-fade:nth-child(3){ transition-delay: .18s; }
html.js-enabled .xp-list .xp-row.js-fade:nth-child(4){ transition-delay: .24s; }
html.js-enabled .xp-list .xp-row.js-fade:nth-child(5){ transition-delay: .30s; }


/* ===========================
   FOOTER (aligned + optimized)
   =========================== */

.site-footer--pro{
  --f-text: rgba(255,255,255,0.92);
  --f-strong: rgba(255,255,255,0.95);
  --f-muted: rgba(255,255,255,0.62);
  --f-kicker: rgba(255,255,255,0.55);
  --f-border: rgba(255,255,255,0.10);

  color: var(--f-text);
  border-top: 1px solid var(--f-border);
  background:
    radial-gradient(1200px 500px at 20% 120%, rgba(255,255,255,0.10), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(255,255,255,0.08), transparent 55%),
    linear-gradient(180deg, #0c0c0c 0%, #070707 100%);
}

.footer-pro{
  padding: clamp(64px, 6.5vw, 86px) 0 34px;
}

/* This is the magic: ONE shared grid for top + bottom */
.footer-grid{
  display: grid;
  grid-template-columns: 1fr 1.6fr; /* matches your original footer-top */
  gap: clamp(26px, 4vw, 44px) clamp(40px, 6vw, 80px);
  align-items: start;
}

/* Force each block into the correct column */
.footer-id,
.footer-col--projects{ grid-column: 1; }

.footer-cta,
.footer-col--links{ grid-column: 2; }

/* Give breathing space between top row and bottom row */
.footer-col--projects,
.footer-col--links{
  margin-top: clamp(26px, 5vw, 56px);
}

/* Identity */
.footer-name{
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-size: 18px;
  color: var(--f-strong);
}
.footer-bio{
  margin-top: 12px;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.35;
  color: var(--f-muted);
  max-width: 34ch;
}

/* CTA */
.footer-headline{
  margin: 0;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--f-strong);
}
.footer-headline__strong{ color: var(--f-strong); }

/* Email pill footer variant */
.email-pill--footer{
  margin-top: 22px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.20);
  box-shadow: 0 22px 60px rgba(0,0,0,0.35);
}
.email-pill--footer .email-pill__text{ color: rgba(17,17,17,0.92); }
.email-pill--footer .email-pill__btn{
  background: rgba(255,255,255,0.72);
  border-color: rgba(17,17,17,0.14);
}

/* Footer focus ring should be light on dark background */
.site-footer--pro a:focus-visible,
.site-footer--pro button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.35);
}

/* Kicker + lists */
.footer-kicker{
  margin: 0 0 16px;
  font-size: 14px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--f-kicker);
}
.footer-kicker--spaced{ margin-top: 26px; }

.footer-list,
.footer-photo,
.footer-socials{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

/* Links: underline system */
.footer-link{
  position: relative;
  display: inline-block;
  color: rgba(255,255,255,0.90);
  font-weight: 700;
  font-size: clamp(17px, 1.8vw, 20px);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: opacity .15s ease, transform .15s ease;
  will-change: transform;
}
.footer-link::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: currentColor;
  opacity: 0.25;
  transform: translateY(0);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
@media (hover:hover){
  .footer-link:hover{
    opacity: 0.88;
    transform: translate3d(2px,0,0);
  }
  .footer-link:hover::after{
    opacity: 0.60;
    transform: translate3d(0,1px,0);
  }
}

/* Meta */
.footer-meta{
  margin-top: clamp(34px, 5vw, 60px);
  padding-top: 22px;
  border-top: 1px solid var(--f-border);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--f-kicker);
  font-size: 14px;
}

.footer-link--muted{
  font-size: 14px;
  font-weight: 700;
  color: var(--f-muted);
}
.footer-dot{
  margin: 0 10px;
  color: rgba(255,255,255,0.35);
}

/* Responsive: stack but keep spacing nice */
@media (max-width: 980px){
  .footer-grid{
    grid-template-columns: 1fr;
  }
  .footer-id,
  .footer-cta,
  .footer-col--projects,
  .footer-col--links{
    grid-column: 1;
  }
  .footer-col--projects,
  .footer-col--links{
    margin-top: 22px;
  }
}



/* -------- meta -------- */
.footer-meta{
  margin-top: clamp(34px, 5vw, 60px);
  padding-top: 22px;
  border-top: 1px solid var(--f-border);
  display:flex;
  justify-content:space-between;
  gap: 18px;
  flex-wrap:wrap;
  color: var(--f-kicker);
  font-size: 14px;
}

.footer-link--muted{
  font-size: 14px;
  font-weight: 700;
  color: var(--f-muted);
}

.footer-dot{
  margin: 0 10px;
  color: rgba(255,255,255,0.35);
}

/* -------- responsive -------- */
@media (max-width: 980px){
  .footer-top{ grid-template-columns: 1fr; }
  .footer-bottom{ grid-template-columns: 1fr; }
}




/* ---------------- PDF Preview ---------------- */
/* Smaller, cleaner PDF preview */
.pdf-preview { padding: 4rem 0; }

.pdf-card {
  width: 100%;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.pdf-card--compact{
  display: grid;
  grid-template-columns: 1fr;          /* ✅ stack */
  justify-items: center;               /* ✅ center everything */
  text-align: center;                  /* ✅ center text */
  gap: 14px;

  padding: 22px 22px;                  /* tighter */
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);

  max-width: 560px;                    /* ✅ reduces empty space */
  margin: 0 auto;                      /* ✅ centers card */
  transition: transform .25s ease, box-shadow .25s ease;
}


.pdf-card--compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
}

.pdf-thumb{
  width: 190px;                        /* slightly larger */
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
}


.pdf-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* nice crop */
  display: block;
}

/* Overlay stays the same as before */
.pdf-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 1000;
}

.pdf-overlay.is-open { opacity: 1; pointer-events: auto; }

.pdf-overlay-inner {
  position: absolute;
  inset: 5vh 6vw; /* margins visible */
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}

.pdf-overlay-frame { width: 100%; height: 100%; border: 0; }

.pdf-close {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 10;
  font-size: 28px;
  background: none;
  border: 0;
  cursor: pointer;
  opacity: .6;
}
.pdf-close:hover { opacity: 1; }

/* Mobile: stack nicely */
@media (max-width: 640px) {
  .pdf-card--compact {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  .pdf-thumb {
    width: 100%;
    max-width: 220px;
  }
}


/* ---------------- Overlay (expanded view) ---------------- */

.pdf-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 1000;
}

.pdf-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.pdf-overlay-inner {
  position: absolute;
  inset: 5vh 6vw; /* 👈 leaves margins visible */
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}

.pdf-overlay-frame {
  width: 100%;
  height: 100%;
  border: 0;
}

.pdf-close {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 10;
  font-size: 28px;
  background: none;
  border: 0;
  cursor: pointer;
  opacity: .6;
}

.pdf-close:hover {
  opacity: 1;
}


/* ---------------- Strong blink (statement only) ---------------- */
html.js-enabled .js-fade.js-fade--blink{
  opacity: 0;
  transform: none !important;
  transition: opacity 200ms linear !important;
}

html.js-enabled .js-fade.is-visible.js-fade--blink{
  opacity: 1;
  transform: none !important;
}



/* ===========================
   SVG CARDS 3 — NO ANIMATION (section only)
   =========================== */

/* disable scroll-fade animation behavior inside this section */
#user-interview-cards.js-fade,
#user-interview-cards .js-fade{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

/* disable hover lift + transitions for the cards */
#user-interview-cards .svg3-card{
  transition: none !important;
}
#user-interview-cards .svg3-card:hover{
  transform: none !important;
  box-shadow: 0 18px 60px rgba(0,0,0,0.08) !important; /* keep base shadow */
}

/* if you want: also remove shadow filter on the images (often causes softness) */
#user-interview-cards .svg3-media img,
#user-interview-cards .svg3-media svg{
  filter: none !important;
}





/* ===========================
   MOBILE ONLY — media side margins
   =========================== */

@media (max-width: 720px){

  .svg3-media,
  .svg2-media,
  .svg-single-media,
  .video-section__inner,
  .case-device__screen{
    padding-inline: 18px;   /* ← adjust 16–24px to taste */
  }

}

/* ===========================
   SVG CARDS 2 — NO ANIMATION (section only)
   =========================== */

#user-interview-cards-2.js-fade,
#user-interview-cards-2 .js-fade{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}

/* disable hover lift */
#user-interview-cards-2 .svg2-card{
  transition: none !important;
}

#user-interview-cards-2 .svg2-card:hover{
  transform: none !important;
  box-shadow: 0 18px 60px rgba(0,0,0,0.08) !important; /* keep base look */
}

/* remove filter softness (recommended for crisp SVGs) */
#user-interview-cards-2 .svg2-media img,
#user-interview-cards-2 .svg2-media svg{
  filter: none !important;
}

/* =====================================
   FIGMA FINAL — ONLY second laptop
   ===================================== */

/* center the figure */
.figma-final .figma-device{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* control size independently from first one */
.figma-final .figma-device{
  width: min(620px, 92%);
}

/* optional: make section content centered */
.figma-final{
  text-align: center;
}








/* ===========================
   DEVICE: PNG overlay + video cutout
   =========================== */

.case-device--frame{
  position: relative;
  width: min(800px, 100%);   /* controls overall size */
  margin: 0 auto;
}

/* PNG frame sits ON TOP */
.case-device__frame{
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 10;
  pointer-events: none;
  user-select: none;
}

/* screen hole: THIS is what you tune */
.case-device__screen{
  position: absolute;
  z-index: 5;               /* under PNG */
  overflow: hidden;
  background: transparent;

  /* START VALUES — tweak these 4 numbers */
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
}

/* video fills the screen hole */
.case-device__video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}


/* ===========================
   SECTION HEADERS (editorial / smaller)
   =========================== */

.section-head{
  padding: clamp(64px, 8vw, 110px) 0 clamp(40px, 5vw, 70px);
  text-align: center;
}

/* small label */
.section-head__kicker{
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

/* main title */
.section-head__title{
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  margin: 0;
}

/* subtle divider */
.section-head__rule{
  width: 60px;
  height: 2px;
  margin: 26px auto 0;
  background: var(--border);
  border-radius: 2px;
}