@charset "utf-8";
/* CSS Document */

/* =======================================================
   CEDAR HAVEN — CLEANED CSS (duplicates/old removed only)
   ======================================================= */

body.workpage { background: var(--bg); }

/* ============ Top bar ============ */
.case-topbar{
  position: relative;
  background: var(--bg);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  width: min(1200px, 92vw);
  margin: 0 auto;
  height: 84px;
  display: grid;
  grid-template-columns: auto 1fr auto; /* home | center | brand */
  align-items: center;
  column-gap: 12px;
  padding-inline: 6px;
}
.home-icon{ display:inline-flex; align-items:center; color:#fff; }
.home-icon:hover{ color: var(--accent-warm); }
.case-center{ justify-self:center; display:flex; align-items:center; gap:28px; }
.case-center a{
  text-decoration:none;
  font-family:'Montserrat', sans-serif;
  font-weight:700; letter-spacing:.12em; font-size:.86rem;
  color:#fff; transition: color .2s ease;
}
.case-center a:hover{ color: var(--accent-warm); }
.case-center .lnk-in{ color: var(--accent-2); }
.case-brand{ display:flex; align-items:center; justify-self:end; text-decoration:none; }
.case-brand img{ height: clamp(60px, 7.5vw, 92px); width:auto; object-fit:contain; }
@media (max-width: 720px){
  .case-topbar{ height:74px; }
  .case-center{ gap:16px; }
  .case-center a{ font-size:.78rem; letter-spacing:.10em; }
  .case-brand img{ height: clamp(50px, 7vw, 70px); }
}
@media (max-width: 540px){
  .case-topbar{ height:68px; }
  .case-center{ gap:12px; }
  .case-center a{ font-size:.74rem; }
  .case-brand img{ height: clamp(44px, 6.6vw, 64px); }
}

/* ============ Hero section ============ */
.case-hero{
  background: var(--paper);
  color:#111;
  padding: clamp(28px, 5vw, 40px) 0 0;
}
.case-hero-inner{
  width: min(1200px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: max-content minmax(560px, 1fr);
  grid-template-areas:
    "badge head"
    "badge image";          /* image occupies column 2 */
  column-gap: clamp(16px, 4vw, 40px);
  align-items: start;
}
.case-head{ max-width: 860px; margin: 0 0 16px; }
.case-badge{
  grid-area: badge;
  width: clamp(96px, 15vw, 156px);
  aspect-ratio: 1 / 1;
  justify-self: start;
  align-self: start;
  display: block;
}
.case-badge img{ width:100%; height:100%; object-fit:contain; display:block; }
.eyebrow{
  margin:0 0 10px;
  font-family:'Red Hat Display',sans-serif; font-weight:700;
  letter-spacing:.21em; font-size:.82rem; text-transform:uppercase;
  color:#7a6f69;
}
.case-title{
  margin:0; font-weight:800; letter-spacing:-.01em; line-height:1.1; color:#111;
  font-size: clamp(32px, 6vw, 54px);
}
.case-subtitle{
  margin:8px 0 0; font-style:italic; font-weight:600;
  font-size: clamp(18px, 2.2vw, 24px); color: var(--accent-warm);
}
.case-hero-image{
  grid-area: image;
  justify-self: start;
  width: 100%;
  max-width: 980px;
  margin-top: clamp(12px, 2vw, 24px);
  background:#9da0a3;
  overflow:hidden;
  box-shadow: 0 24px 42px rgba(0,0,0,.22);
}
.case-hero-image img{ width:100%; height:auto; object-fit:cover; display:block; }
@media (max-width: 720px){
  .case-hero-inner{
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "badge"
      "image";
  }
  .case-head{ text-align:center; margin: 8px auto 16px; }
  .case-badge{ justify-self:center; margin-top:8px; }
}

/* ============ Dark summary strip (shared) ============ */
.case-summary{
  --ul-w: 64px; --ul-h: 2px; --ul-offset: .5rem; --ul-color: currentColor;
  position:relative; background: var(--ink-2); color:#eee;
  padding: clamp(26px, 5vw, 36px) 0;
}
.summary-label{ position: relative; text-wrap: balance; margin:0 0 10px;
  font-family:'Red Hat Display',sans-serif; font-weight:900;
  letter-spacing:.22em; font-size: clamp(18px, 1.8vw, 20px); color:#e4e4e4;
}
.summary-label::after{
  content:""; display:block; inline-size: var(--ul-w); block-size: var(--ul-h);
  background: var(--ul-color); opacity:.5; margin-block-start: var(--ul-offset);
  margin-inline-start: 0;
}
.summary-label.accent{ color: var(--accent); font-size: clamp(20px, 2vw, 22px); }
.case-summary-inner{
  width:min(1200px, 92vw); margin:0 auto; display:grid;
  grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 36px);
  padding-left: clamp(40px, 6vw, 80px);
}
.summary-col{ min-width:0; }
.summary-col:first-child { text-align: right; }
.summary-col:first-child .summary-label,
.summary-col:first-child .summary-note{ text-align:right; margin-left:auto; }
.summary-note{
  max-width: 38ch; line-height: 1.65; letter-spacing:.005em;
  color: rgba(255,255,255,.86); text-wrap: pretty;
  font-size: clamp(12px, 1.2vw, 14px);
}
.summary-col:first-child .summary-label::after{ margin-inline-start: auto; }
.summary-note a{
  color: var(--accent); text-decoration: underline;
  text-decoration-thickness: .08em; text-underline-offset: .18em;
}

/* ==== Dark-band: robust stack + left-anchored rule ==== */
/* ==== Dark summary strip: force stack + left anchors ==== */

/* Stack earlier so headings sit above their own copy */
@media (max-width: 1120px){
  .case-summary-inner{
    grid-template-columns: 1fr;                 /* one column */
    row-gap: clamp(16px, 3vw, 28px);
    padding-inline: clamp(16px, 4vw, 24px);     /* even insets */
  }

  /* cancel desktop first-child right alignment */
  .case-summary .summary-col:first-child,
  .case-summary .summary-col:first-child .summary-label,
  .case-summary .summary-col:first-child .summary-note{
    text-align: left !important;
    margin-left: 0; margin-right: 0;
  }

  /* ensure BOTH blocks are left-aligned when stacked */
  .case-summary .summary-col,
  .case-summary .summary-col .summary-label,
  .case-summary .summary-col .summary-note{
    text-align: left !important;
  }

  /* keep the small rule on the LEFT for both headings */
  .case-summary .summary-label::after{
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
  }

  /* allow a wider, comfy measure on stack */
  .case-summary .summary-note{ max-width: 50ch; }
}

/* 1) Auto-wrap to two → one column as space shrinks */
.case-summary-inner{
  grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); /* stacks below ~1040px content width */
}

/* 2) Hard fallbacks so it ALWAYS stacks nicely when tight */
@media (max-width: 980px){
  .case-summary-inner{ grid-template-columns: 1fr; row-gap: clamp(16px,3vw,24px); }
}

/* 3) When wrapped/stacked, make EVERYTHING left-aligned
      and pin the underline to the LEFT (overrides desktop rules) */
@media (max-width: 1200px){
  .summary-col,
  .summary-col .summary-label,
  .summary-col .summary-note{
    text-align: left !important;
    margin-left: 0; margin-right: 0;
  }

  /* keep the small rule on the left for both blocks */
  .summary-col .summary-label::after{
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
  }

  /* slightly wider measure reads better when stacked */
  .summary-note{ max-width: 50ch; }
}

@media (min-width: 1400px){ .case-summary .summary-note{ font-size:16px; } }
@media (max-width: 720px){
  .case-summary-inner{ grid-template-columns: 1fr; padding-left: clamp(16px,4vw,24px); }
  .summary-col:first-child .summary-label,
  .summary-col:first-child .summary-note{ text-align:left; margin-left:0; }
  .summary-note{ max-width:50ch; line-height:1.7; font-size: clamp(14px, 3.6vw, 16px); }
}
/* ===== Dark summary band: smaller type on narrow screens ===== */

/* Step down once on small tablets */
@media (max-width: 900px){
  .case-summary .summary-note{
    font-size: clamp(13px, 2.2vw, 15px);  /* was larger before */
    line-height: 1.6;
    max-width: 48ch;
  }
  .case-summary .summary-label{
    font-size: clamp(16px, 2.2vw, 18px);
    letter-spacing: .18em;                /* a touch tighter so it wraps less */
  }
  .case-summary .summary-label.accent{
    font-size: clamp(18px, 2.6vw, 20px);
  }
}

/* Step down a bit more on phones */
@media (max-width: 600px){
  .case-summary .summary-note{
    font-size: clamp(12.5px, 3vw, 14.5px);
    line-height: 1.58;
    max-width: 46ch;
  }
  .case-summary .summary-label{ letter-spacing: .16em; }
  .case-summary .summary-label::after{ --ul-w: 48px; } /* shorter underline so it doesn't dominate */
}

//* Stack the dark-band columns and keep everything left aligned */
@media (max-width: 1024px){
  .case-summary-inner{
    grid-template-columns: 1fr;              /* stack */
    row-gap: clamp(16px, 3.2vw, 24px);
    padding-left: clamp(16px,4vw,24px);      /* comfy inset on both sides */
    padding-right: clamp(16px,4vw,24px);
  }

  /* kill the desktop right-align on the first column */
  .summary-col,
  .summary-col .summary-label,
  .summary-col .summary-note{
    text-align: left;
    margin-left: 0; margin-right: 0;
  }

  /* underline stays on the LEFT for both blocks */
  .summary-col .summary-label::after{
    margin-inline-start: 0;
    margin-inline-end: auto;
  }

  /* slightly wider measure reads nicer on tablet/phone */
  .summary-note{ max-width: 50ch; }
}






/* ============ Base stack-card (shared) ============ */
.stack-scroll{ background: var(--paper); padding-bottom: 48px; }
.stack-card{
  position: sticky; top: 0; min-height: 100vh;
  display:grid; place-items:center;
  background: var(--paper);
  z-index:0; transition: filter .35s ease, opacity .35s ease;
  overflow: clip; isolation: isolate;
}
.stack-card:not(.stack-card--flow){ display:grid; place-items:center; }
.stack-card:not(.stack-card--flow) img{
  width: min(1200px, 92vw); height:auto; display:block;
  box-shadow: 0 24px 42px rgba(0,0,0,.22);
}
.stack-card--flow{ display:block; }
.stack-card > :is(.seg3-split-qr, .seg3-pill-columns, img){
  width: min(1200px, 92vw); margin-inline: auto;
}
.stack-card.is-dim{ filter: brightness(.6) saturate(.95); }
.stack-card.no-dim-next.is-dim{ filter:none !important; opacity:1 !important; }
.stack-card.stack-card--transparent{ background:transparent; box-shadow:none; align-items:stretch; }
.stack-card.stack-card--transparent .seg3-pill-columns{
  width: min(1200px, 92vw); margin:0 auto; height:100%;
  display:grid; grid-template-columns: minmax(280px, 40ch) minmax(14vw, 22vw) minmax(280px, 40ch);
  gap: clamp(16px, 2vw, 24px); align-items:stretch;
}
.stack-card.stack-card--transparent .pill{ height:100%; display:grid; align-content:start; }
.stack-card.stack-card--transparent .pill.light{ background: rgba(215,222,219,.92); }
.stack-card.stack-card--transparent .pill.dark{ background: rgba(47,58,52,.92); }
.stack-card .pill, .stack-card .seg3-split-qr{ box-shadow:none; filter:drop-shadow(0 12px 24px rgba(0,0,0,.12)); }
.stack-card--frame{ overflow: clip; }
.stack-card--frame > img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:680px){ .stack-card--frame{ aspect-ratio: 4 / 3; } .stack-card--frame > img{ object-position:auto; } }
@media (min-width:480px) and (max-width:680px){
  #duo-phones.stack-card--frame{ aspect-ratio: 16 / 9; }
  #duo-phones.stack-card--frame > img{
    max-width:none; width:min(1200px, 98vw); height:auto; aspect-ratio:inherit;
    object-fit:cover; object-position:46% 50%;
  }
}

/* ===== SEGMENT 2 ===== */
.case-seg2{ background: var(--paper); color:#111; padding: clamp(28px,5vw,40px) 0; }
.feature-split{
  position:relative; isolation:isolate;
  width: min(1200px, 92vw); margin:0 auto; display:grid;
  grid-template-columns: minmax(320px, .55fr) minmax(420px, 1fr);
  align-items:center; gap: clamp(16px, 3vw, 32px); padding: clamp(20px, 3vw, 36px);
  border-radius:16px;
}
.feature-split::before{
  content:""; position:absolute; inset:0; background:#2f3835; border-radius:inherit;
  box-shadow: 0 28px 48px rgba(0,0,0,.16); z-index:0;
}
.device-card{
  position:relative; min-height: clamp(320px, 48vh, 680px);
  display:grid; place-items:center; z-index:1;
}
.device-card img{ width: clamp(220px, 36vw, 420px); height:auto; filter: drop-shadow(0 22px 36px rgba(0,0,0,.28)); }
.device-card::after{
  content:""; position:absolute; left:10%; right:10%; bottom: clamp(10px,2vw,20px);
  height: clamp(10px, 2.4vw, 20px);
  background: radial-gradient(closest-side, rgba(0,0,0,.18), transparent 70%);
  z-index:0;
}
.copy-card{
  z-index:1; background:transparent; color:#eef0ee; padding: clamp(8px, 2vw, 20px);
  display:grid; align-content:center;
}
.copy-card .copy-eyebrow{
  margin:0 0 10px; font-family:'Red Hat Display',sans-serif;
  letter-spacing:.35em; font-weight:900; font-size: clamp(14px,1.5vw,18px);
  color:#fff; opacity:.9;
}
.copy-card h1{ font-size: clamp(20px, 2.4vw, 34px); margin:.4rem 0 .6rem; color:#F1EFE7; }
.copy-card h2{ font-size: clamp(18px, 2vw, 28px); margin:1rem 0 .4rem; color:#d6ddd9; }
.copy-card h3{ font-size: clamp(16px,1.6vw,22px); color:#89968F; margin:.8rem 0 .4rem; }
.copy-card p{
  margin-top: 1.1rem; max-width: 52ch; font-family:'Montserrat',sans-serif;
  color:#e8ece9; line-height:1.6;
}
@media (max-width:980px){
  .feature-split{ grid-template-columns:1fr; text-align:left; }
  .device-card{ order:-1; min-height:300px; }
  .device-card img{ width: clamp(220px, 56vw, 360px); }
}
@media (min-width:681px) and (max-width:980px){
  .feature-split{
    grid-template-columns: minmax(280px, .55fr) 1fr; align-items:center;
    row-gap:0; padding: clamp(16px, 3vw, 24px); text-align:left;
  }
  .device-card{ order:0; min-height:360px; }
  .device-card img{ width: clamp(240px, 42vw, 400px); height:auto; max-height:58svh; }
  .copy-card{ align-content:center; }
}
@media (max-width:680px){
  .feature-split{
    grid-template-columns:1fr; grid-template-rows: minmax(32svh, auto) auto;
    row-gap: clamp(10px, 3vw, 14px); padding: clamp(12px, 4vw, 16px);
  }
  .device-card{ min-height:0; }
  .device-card img{ max-height:34svh; width:auto; height:auto; }
  .copy-card{ align-content:start; padding: 0 clamp(12px,4vw,16px) clamp(12px,4vw,16px); text-align:left; }
  .copy-card .copy-eyebrow{ font-size: clamp(12px,3.4vw,14px); letter-spacing:.28em; }
  .copy-card h1{ font-size: clamp(18px,5.2vw,22px); margin:.25rem 0 .4rem; }
  .copy-card h2{ font-size: clamp(16px,4.8vw,20px); margin:.6rem 0 .3rem; }
  .copy-card h3{ font-size: clamp(15px,4.2vw,18px); }
  .copy-card p{ font-size: clamp(14px,3.8vw,16px); line-height:1.55; max-height:44svh; overflow:auto; }
}

/* ===== B) two tall “pill” columns ===== */
.seg3-pill-columns{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  gap: clamp(18px, 4vw, 36px); align-items:start;
}
.pill{
  position:relative; padding: clamp(18px, 3.4vw, 26px);
  min-height: clamp(260px, 40vw, 420px);
  display:grid; align-content:start; gap:10px;
  border-left:10px solid transparent; box-shadow: 0 14px 28px rgba(0,0,0,.12);
}
.pill .pill-title{
  margin:0; font-family:'Red Hat Display',sans-serif;
  letter-spacing:.35em; font-weight:900; font-size: clamp(14px,1.6vw,18px);
}
.pill p{ margin:0; color:#272423; line-height:1.55; font-family:'Montserrat',sans-serif; }
.pill.light{ background:#d7dedb; border-left-color: rgba(0,0,0,.18); }
.pill.dark{ background:#2f3a34; color:#e9ecea; border-left-color: rgba(0,0,0,.55); }
.pill.dark .pill-title{ color:#fff; }
.pill.dark p{ color:#e7ece8; }
.pill .kicker{
  margin:.25rem 0 .6rem; font-family:'Montserrat',sans-serif;
  font-size: clamp(13px, 1.2vw, 15px); line-height:1.6; opacity:.92; max-width:50ch;
}
.pill .note{ margin-top:.8rem; font-size: clamp(12px,1.1vw,14px); line-height:1.55; opacity:.85; max-width:52ch; }
.list{ margin:0; padding:0; list-style:none; display:grid; gap:.55rem; max-width:52ch; }
.list--tight{ gap:.45rem; }
.list li{ position:relative; padding-left:1.1rem; line-height:1.55; font-family:'Montserrat',sans-serif; }
.list li::before{
  content:""; position:absolute; left:.2rem; top:.6em; width:.35rem; height:.35rem; border-radius:50%;
  background: currentColor; opacity:.45;
}
.pill.light .kicker, .pill.light .list, .pill.light .note{ color:#272423; }
.pill.dark  .kicker, .pill.dark  .list, .pill.dark  .note{ color:#e7ece8; }
.pill .list + .note{ border-top:1px solid rgba(255,255,255,.08); margin-top:.9rem; padding-top:.7rem; }
.pill.light .list + .note{ border-top-color: rgba(0,0,0,.08); }

/* Force light-left / dark-right for the tall pills */
@media (min-width: 981px){
  /* 2-column layout */
  .seg3-pill-columns{
    grid-template-columns: 1fr 1fr;
  }
  .seg3-pill-columns .pill.light{ grid-column: 1; }
  .seg3-pill-columns .pill.dark { grid-column: 2; }
}

/* If this block lives inside the 3-column “transparent” stack card,
   put the dark pill in the far-right column there too */
@media (min-width: 981px){
  .stack-card.stack-card--transparent .seg3-pill-columns .pill.light{ grid-column: 1; }
  .stack-card.stack-card--transparent .seg3-pill-columns .pill.dark { grid-column: 3; }
}

/* When it stacks on mobile/tablet, let them flow naturally again */
@media (max-width: 980px){
  .seg3-pill-columns .pill{ grid-column: 1 !important; }
}

/* ===== C) large split with copy + phone image (QR features card) ===== */
.seg3-split-qr{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  display:grid; grid-template-columns: .56fr .44fr; align-items:start;
  gap: clamp(18px, 4vw, 28px); padding: clamp(20px, 4vw, 34px);
  box-shadow: 0 18px 36px rgba(0,0,0,.12);
}
.seg3-copy{ padding: clamp(6px, 1.4vw, 10px); position:relative; z-index:1; }
.seg3-h1{ margin:0 0 12px; font-weight:800; letter-spacing:.02em; font-size: clamp(22px, 4.4vw, 36px); }
.seg3-lead{ margin:0 0 18px; line-height:1.6; }
.seg3-sub{ margin-top:16px; }
.seg3-sub h4{
  margin:0 0 6px; font-family:'Red Hat Display',sans-serif; font-weight:900; letter-spacing:.25em;
  font-size: clamp(12px,1.2vw,14px); color:#7a6f69;
}
.seg3-sub p{ margin:0; color:#333; }

/* Underlay = gradient scrim + image in one layer */
.seg3-phone{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(90deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.94) 42%,
      rgba(255,255,255,.70) 58%,
      rgba(255,255,255,0) 78%),
    url("images/QRimage(8000x5150).png");
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right center;
  background-size: 100% 100%, auto 108%;
  filter: drop-shadow(0 22px 44px rgba(0,0,0,.18));
}

@media (max-width:980px){
  .seg3-pill-columns{ grid-template-columns:1fr; }
  .seg3-split-qr{ grid-template-columns:1fr; }
  .seg3-phone{ background-position: left top, 85% 48%; background-size: 100% 100%, auto 120%; min-height:360px; }
}
@media (max-width:640px){
  .pill{ min-height:220px; }
  .seg3-h1{ font-size: clamp(22px, 8vw, 30px); }
  .seg3-phone{
    background-image:
      linear-gradient(0deg, rgba(255,255,255,.98) 0 56%, rgba(255,255,255,0) 86%),
      url("images/QRimage(8000x5150).png");
    background-position: left top, 80% 50%;
    background-size: 100% 100%, auto 128%;
  }
}

/* FEATURES card tweaks */
#features-card{ align-items: start; --panel-h: clamp(640px, 82vh, 860px); }
#features-card > .seg3-split-qr{ height: var(--panel-h); display:grid; align-items:center; }
#features-card .seg3-phone{
  background-image:
    linear-gradient(90deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.90) 36%,
      rgba(255,255,255,.54) 52%,
      rgba(255,255,255,0) 68%),
    url("images/QRimage(8000x5150).png");
  background-position: left top, right 50%;
  background-size: 100% 100%, auto 106%;
}
@media (max-width:980px){
  #features-card{ align-items:start; }
  #features-card > .seg3-split-qr{ height:auto; }
  #features-card .seg3-phone{ background-position: 85% 48%; background-size: 100% 100%, auto 120%; }
}
/* place copy at TL; remove white panel look + add comfy insets */
#features-card > .seg3-split-qr{
  padding-inline: clamp(28px, 4.6vw, 48px);
  padding-block:  clamp(18px, 3.6vw, 32px);
  background: transparent; border:0; box-shadow:none;
}
#features-card .seg3-copy{
  align-self:start; justify-self:start;
  padding-top: clamp(8px, 1.4vw, 16px);
  padding-inline: clamp(8px, 1.6vw, 16px);
}
/* earlier global ::after scrim removed—gradient now lives in .seg3-phone */

/* ===== Social proof stack-card (pattern underlay + post) ===== */
.stack-card--social{
  background:#2f3835; position:relative; overflow:hidden; isolation:isolate;
  display:grid; place-items:center; padding-block: clamp(12px, 3vh, 28px);
}
.stack-card--social::before{
  content:""; position:absolute; inset:0;
  background-image: var(--pattern, url('/images/BRAND_PATTERNHIGHRES-TRANSPARENT.png'));
  background-repeat: repeat; background-position:center; background-size:100px;
  mix-blend-mode: normal; opacity:.6; z-index:1; pointer-events:none;
}
.stack-card--social .social-post{
  position:relative; z-index:2; display:block;
  height: clamp(460px, 64vh, 760px);
  max-width: min(900px, 86vw); width:auto !important;
  object-fit: contain; margin-inline:auto;
  box-shadow: 0 16px 28px rgba(0,0,0,.18);
}
@media (max-width:680px){
  .stack-card--social .social-post{ height:60vh; max-width:92vw; }
  .stack-card--social::before{ background-size: clamp(140px, 28vw, 260px); opacity:.28; }
}

/* ===== SEGMENT 5 — Prototype CTA (compact; doesn’t push pills) ===== */
.case-seg5{
  position:relative; background: var(--paper); color:#111;
  --pad: clamp(64px, 10vh, 120px);
  padding: var(--pad) 0;
  min-height: clamp(620px, 82svh, 880px);
  z-index:2; overflow:visible; isolation:isolate;
}
.case-seg5::before,
.case-seg5::after{
  content:""; position:absolute; left:0; right:0; height:14vh;
  background: var(--paper); z-index:-1; pointer-events:none;
}
.case-seg5::before{ top:-14vh; }
.case-seg5::after{
  bottom:-14vh;
  background:
    radial-gradient(1200px 520px at 55% 58%, rgba(0,0,0,.06), transparent 65%),
    var(--paper);
}
.case-seg5 .inner{ width:min(1200px, 92vw); margin:0 auto; }
.cta-hero{
  display:grid; grid-template-columns: minmax(260px, .42fr) 1fr;
  align-items:center; gap: clamp(24px, 5vw, 60px);
}
.cta-phone{ margin:0; display:grid; place-items:center; }
.cta-phone img{ width: clamp(260px, 26vw, 520px); height:auto; filter: drop-shadow(0 28px 38px rgba(0,0,0,.18)); }
.cta-right{ display:grid; justify-items:start; gap: clamp(12px, 1.8vw, 18px); align-content:center; }
.brand-lockup{ width: clamp(520px, 40vw, 700px); height:auto; display:block; object-fit:contain; filter: drop-shadow(0 10px 24px rgba(0,0,0,.08)); }
.btn-pill{
  display:inline-grid; grid-auto-flow:column; align-items:center; gap:12px;
  text-decoration:none; text-transform:uppercase;
  font-family:'Montserrat',sans-serif; font-weight:700; letter-spacing:.12em;
  font-size: clamp(13px, .95vw, 16px);
  background:#fff; color:#1f1b1a; border:3px solid var(--accent);
  padding:14px 24px; border-radius:999px;
  box-shadow: 0 14px 28px rgba(125,59,224,.12);
  transition: transform .15s ease, box-shadow .2s ease, background .15s ease, color .15s ease;
}
.btn-pill:hover{ transform: translateY(-1px); background: rgba(104,43,215,.06); box-shadow: 0 22px 42px rgba(125,59,224,.22); }
.btn-pill svg{ transform: translateY(1px); color: var(--accent); }
@media (min-width:1024px){
  .cta-hero{ grid-template-columns: .42fr 1fr; align-items:center; min-height:0; }
  .cta-phone img{ width: clamp(280px, 26vw, 520px); max-height:none; }
}
@media (min-width:860px) and (max-width:1023px){
  .brand-lockup{ width: clamp(480px, 46vw, 640px); }
  .cta-phone img{ width: clamp(300px, 30vw, 520px); }
}
@media (max-width:859px){
  .cta-hero{ grid-template-columns:1fr; gap: clamp(18px, 6vw, 28px); align-items:center; justify-items:center; min-height:auto; text-align:center; }
  .cta-right{ justify-items:center; }
  .brand-lockup{ width: min(520px, 84vw); }
  .cta-phone img{ width: min(420px, 70vw); }
}
/* =========================================================
   PRESENTABLE-ON-ANYTHING-BELOW-DESKTOP PACK
   (paste AFTER your current styles)
   ========================================================= */

/* 1) Turn sticky cards into normal sections sub-desktop */
@media (max-width: 1200px){
  .stack-card{
    position: relative; top: auto; min-height: auto;
    padding-block: clamp(18px, 4vw, 28px);
    filter: none; opacity: 1;
  }
}

/* 2) Universal overflow guard – no right-edge clipping */
@media (max-width: 1200px){
  .stack-card,
  .stack-card > :is(.seg3-split-qr, .seg3-pill-columns, img),
  .stack-card.stack-card--transparent .seg3-pill-columns,
  .feature-split,
  .case-seg5 .inner{
    width: min(100%, 92vw);
    margin-inline: auto;
  }
  .stack-card:not(.stack-card--flow) img{ width: min(100%, 92vw); }
}

/* 3) Gallery polish */
@media (max-width: 1024px){
  .stack-card:not(.stack-card--flow) img{ box-shadow: 0 16px 28px rgba(0,0,0,.18); }
  .stack-card--frame{ aspect-ratio: 4 / 3; }
  #duo-phones.stack-card--frame{ aspect-ratio: 16 / 9; }
}

/* 4) Feature split (phone + copy) */
@media (max-width: 1024px){
  .feature-split{
    grid-template-columns: 1fr;
    gap: clamp(12px, 3vw, 20px);
    padding: clamp(16px, 3vw, 22px);
    text-align: left;
  }
  .device-card{ order:-1; min-height: clamp(220px, 38vh, 420px); }
  .device-card img{ width: clamp(220px, 58vw, 360px); max-height: 44svh; height: auto; }
}
@media (max-width: 680px){
  .device-card{ min-height: 0; }
  .device-card img{ width: min(82vw, 360px); max-height: 36svh; }
  .copy-card p{ max-height: none; overflow: visible; }
}

/* 5) Two tall “pill” columns → stack */
@media (max-width: 1024px){
  .seg3-pill-columns{ grid-template-columns: 1fr; }
  .seg3-pill-columns .pill{ min-height: auto; }
}

/* 6) QR features split */
@media (max-width: 1024px){
  .seg3-split-qr{ grid-template-columns: 1fr; }
  .seg3-phone{
    background-position: left top, 80% 50%;
    background-size: 100% 100%, auto 120%;
    min-height: 360px;
  }
}
@media (max-width: 640px){
  .seg3-h1{ font-size: clamp(22px, 7.2vw, 30px); }
  .seg3-phone{
    background-image:
      linear-gradient(0deg, rgba(255,255,255,.98) 0 56%, rgba(255,255,255,0) 86%),
      url("images/QRimage(8000x5150).png");
    background-size: 100% 100%, auto 130%;
  }
}

/* 7) Social post sizing */
@media (max-width: 900px){
  .stack-card--social .social-post{ height: 64vh; max-width: 92vw; }
}
@media (max-width: 480px){
  .stack-card--social .social-post{ height: 58vh; }
}

/* 8) Prototype CTA stack */
@media (max-width: 900px){
  .case-seg5 .inner{ width: min(100%, 92vw); }
  .cta-hero{
    grid-template-columns: 1fr;
    gap: clamp(18px, 6vw, 28px);
    text-align: center; justify-items: center;
  }
  .cta-right{ justify-items: center; }
  .brand-lockup{ width: min(520px, 84vw); }
  .cta-phone img{ width: min(420px, 70vw); }
}

/* 9) Phone-friendly type tweaks */
@media (max-width: 600px){
  .copy-card h1{ font-size: clamp(18px, 5.6vw, 22px); }
  .copy-card h2{ font-size: clamp(16px, 4.8vw, 20px); }
  .copy-card h3{ font-size: clamp(15px, 4.2vw, 18px); }
  .copy-card p,
  .pill p,
  .seg3-lead{ font-size: clamp(14px, 3.8vw, 16px); line-height: 1.55; }
  .pill .kicker{ font-size: clamp(13px, 3.4vw, 15px); }
}

/* 10) Final safety: no horizontal scroll on mobile; keep shadows visible */
@media (max-width: 900px){
  html, body{ overflow-x: clip; }
  .stack-card{ overflow: visible; }
}

/* ===== Pills: 2-up grid on mid screens (980 → 500) ===== */
@media (min-width: 500px) and (max-width: 980px){
  /* normal pill block */
  .seg3-pill-columns{
    grid-template-columns: 1fr 1fr;          /* side-by-side */
    gap: clamp(14px, 3vw, 24px);
    width: min(100%, 92vw);
    margin-inline: auto;
  }

  /* cancel the earlier "force column:1" stack */
  .seg3-pill-columns .pill{ grid-column: auto !important; min-height: auto; }

  /* if this lives inside the 3-col transparent stack-card, flatten to 2-up too */
  .stack-card.stack-card--transparent .seg3-pill-columns{
    grid-template-columns: 1fr 1fr;
    width: min(100%, 92vw);
  }
  .stack-card.stack-card--transparent .seg3-pill-columns .pill{ grid-column: auto !important; }
}

/* keep single-column stack below 500px (your existing ≤980 rule can stay) */
@media (max-width: 500px){
  .seg3-pill-columns{ grid-template-columns: 1fr; }
}


/* ===== QR card: keep copy readable on tablet/phone ===== */
@media (max-width: 1024px){
  /* Make sure the card forms a stacking context */
  .seg3-split-qr{ position: relative; }

  /* Scrim overlay ABOVE the background image, BELOW the text */
  .seg3-split-qr::before{
    content:"";
    position:absolute;
    inset: 0 30% 0 0;  /* cover the left ~70% where text lives */
    background: linear-gradient(
      90deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.92) 35%,
      rgba(255,255,255,.80) 60%,
      rgba(255,255,255,0) 100%
    );
    z-index: 1;              /* sits above .seg3-phone */
    pointer-events: none;
  }

  /* Ensure text is above the scrim */
  .seg3-copy{ position: relative; z-index: 2; }

  /* Keep the phone art pushed right a touch on tablet */
  .seg3-phone{
    z-index: 0;
    background-position: left top, right 50%;
    background-size: 100% 100%, auto 110%;
  }
}

/* A bit stronger fade on small phones */
@media (max-width: 640px){
  .seg3-split-qr::before{
    inset: 0 22% 0 0; /* cover ~78% on tiny screens */
    background: linear-gradient(
      90deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.94) 40%,
      rgba(255,255,255,.86) 70%,
      rgba(255,255,255,0) 100%
    );
  }
  .seg3-phone{
    background-position: left top, 80% 50%;
    background-size: 100% 100%, auto 120%;
  }
}
/* ===== QR card readability (≤1024px) ===== */
@media (max-width: 1024px){
  /* 1) Left scrim above the BG image, below the text */
  .seg3-split-qr{ position: relative; }
  .seg3-split-qr::before{
    content:"";
    position:absolute;
    /* cover the left 70% where the text sits */
    inset: 0 30% 0 0;
    background: linear-gradient(
      90deg,
      rgba(255,255,255,1)   0%,
      rgba(255,255,255,.96) 35%,
      rgba(255,255,255,.90) 60%,
      rgba(255,255,255,0)   100%
    );
    z-index:1;               /* above .seg3-phone */
    pointer-events:none;
  }

  /* 2) Ensure text is above the scrim; constrain width */
  .seg3-copy{
    position:relative; z-index:2;
    max-width: 58ch;
  }

  /* 3) Optional micro-panel for extra contrast on busy areas */
  .seg3-copy::before{
    content:"";
    position:absolute; z-index:-1;
    inset: -8px -10px -10px -10px;             /* little halo around text */
    background: rgba(255,255,255,.82);         /* subtle frosted plate */
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
  }

  /* 4) Nudge the phone art farther right so it competes less */
  .seg3-phone{
    background-position: left top, right 48%;
    background-size: 100% 100%, auto 112%;
    z-index:0;
  }
}

/* Stronger help on small phones */
@media (max-width: 640px){
  .seg3-split-qr::before{
    inset: 0 18% 0 0; /* scrim covers more of the left */
    background: linear-gradient(
      90deg,
      rgba(255,255,255,1)   0%,
      rgba(255,255,255,.97) 40%,
      rgba(255,255,255,.92) 70%,
      rgba(255,255,255,0)   100%
    );
  }
  .seg3-phone{
    background-position: left top, 82% 50%;
    background-size: 100% 100%, auto 120%;
  }
}











/* ===== Project nav pills (shared) ===== */
.case-pills--ends{
  width:100%; display:grid; grid-template-columns:1fr 1fr;
  margin-block: clamp(24px, 5vw, 56px);
  align-items:center; min-height:112px;
  padding-block: clamp(18px, 3vw, 28px);
  padding-inline: clamp(24px, 5vw, 72px);
  gap: clamp(18px, 3vw, 28px);
  position:relative; z-index:2; /* sits above seg5 glow */
}
.case-pills--ends .pill-split:first-child{ justify-self:start; }
.case-pills--ends .pill-split:last-child { justify-self:end; }
.case-pills--ends::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  top:-20px; bottom:-20px; width:100vw; background: var(--ink-2, #111);
  box-shadow: 0 -16px 28px rgba(0,0,0,.18), 0 10px 24px rgba(0,0,0,.20) inset;
  z-index:-1; pointer-events:none;
}
/* Split-cap pill */
.pill-split{
  --pill-bg: var(--ink-2); --pill-fg: var(--paper-2); --pill-cap: var(--accent); --pill-cap-fg:#fff;
  display:inline-grid; grid-auto-flow:column; align-items:center; gap:0; text-decoration:none;
  border-radius:999px; overflow:hidden; padding:0; border:2px solid var(--muted-20);
  background: var(--pill-bg); color: var(--pill-fg);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  box-shadow: 0 20px 36px rgba(0,0,0,.16);
}
.pill-split .label{
  font-weight:700; font-family:'Montserrat',sans-serif; line-height:1; letter-spacing:.02em; white-space:nowrap;
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  padding: clamp(18px, 2.6vw, 26px) clamp(28px, 3.6vw, 38px);
}
.pill-next .cap{ border-left:1px solid rgba(255,255,255,.15); }
.pill-prev .cap{ border-right:1px solid rgba(255,255,255,.15); order:-1; }
.pill-next{ --pill-bg: var(--ink-2); --pill-fg: var(--paper-2);
  --pill-cap: color-mix(in srgb, var(--accent) 85%, black 15%);
  border-color: rgba(255,255,255,.08);
}
.pill-split:hover{ transform: translateY(-1px); box-shadow: 0 16px 28px rgba(0,0,0,.14); }
.pill-next:hover{ background: color-mix(in srgb, var(--ink-2) 88%, white); }
.pill-split:focus-visible{
  outline:0; box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--accent), 0 12px 26px rgba(0,0,0,.12);
}
/* One place to control how “light” the hover gets */
.case-pills--ends{ --hover-mix: 88%; } /* 88% base + 12% white; tweak here */

/* Ensure both pills share the same base bg vars (belt & suspenders) */
.case-pills--ends .pill-prev{ --pill-bg: var(--ink-2); --pill-fg: var(--paper-2); }
.case-pills--ends .pill-next{ --pill-bg: var(--ink-2); --pill-fg: var(--paper-2); }

/* Apply identical hover to BOTH pills */
.case-pills--ends .pill-split:hover{
  background: color-mix(in srgb, var(--pill-bg, var(--ink-2)) var(--hover-mix), white);
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(0,0,0,.14);
  border-color: rgba(255,255,255,.12);
}

/* Neutralize any side-specific leftovers earlier in the cascade */
.case-pills--ends .pill-prev:hover,
.case-pills--ends .pill-next:hover{
  background: color-mix(in srgb, var(--pill-bg, var(--ink-2)) var(--hover-mix), white);
}

/* Pills responsive — tablet (≤980px): labels hug their chevrons */
@media (max-width:980px){
  .case-pills--ends{
    grid-template-columns: 1fr;
    justify-items: center;
    gap: clamp(12px, 3vw, 18px);
    min-height: unset;
    padding-inline: 0;
  }

  .case-pills--ends .pill-split{
    justify-self: center;
    width: min(680px, 94vw);
    display: grid;
    align-items: center;
    column-gap: 10px;
    padding: 14px 16px;
    border-radius: 999px;
  }

  /* grid directions per pill */
  .case-pills--ends .pill-prev{ grid-template-columns: auto 1fr; } /* cap | label */
  .case-pills--ends .pill-next{ grid-template-columns: 1fr auto; } /* label | cap */

  /* labels can actually shrink/wrap later breakpoints */
  .case-pills--ends .pill-split .label{ min-width: 0; }

  /* hug edges */
  .case-pills--ends .pill-prev  .label{ justify-self: start; text-align: left;  white-space: nowrap; }
  .case-pills--ends .pill-next  .label{ justify-self: end;   text-align: right; white-space: nowrap; }

  /* chevron caps + inner dividers */
  .case-pills--ends .pill-split .cap{
    width: 42px; height: 42px; display: grid; place-items: center;
    margin: 0;
    border: 0;
  }
  .case-pills--ends .pill-prev .cap{  border-right: 1px solid rgba(255,255,255,.14); padding-right: 10px; }
  .case-pills--ends .pill-next .cap{  border-left:  1px solid rgba(255,255,255,.14); padding-left:  10px; }

  /* kill any legacy pseudo-divider on tablet */
  .case-pills--ends .pill-split::before{ content: none !important; }
}

/* let the label actually shrink in a grid cell */
.case-pills--ends .pill-split .label { min-width: 0; }

/* below 640px, override the tablet nowrap */
@media (max-width:640px){
  .case-pills--ends .pill-split .label{
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: center;  /* matches your 640 look */
  }
}

/* make sure the cap really hides at <=440 */
@media (max-width:440px){
  .case-pills--ends .pill-split .cap{ display:none !important; }
}


@media (max-width:640px){
  .pill-split .label{
    white-space:normal; text-align:center; hyphens:auto;
    padding:14px 18px; font-size: clamp(1rem, 3.8vw, 1.125rem);
  }
  .pill-split .cap{ padding:10px 14px; }
}
@media (max-width:440px){
  .pill-split .cap{ display:none; }
  .pill-split{ padding:0; }
}

/* Allow the grid child to actually shrink/wrap */
.case-pills--ends .pill-split .label{ min-width:0; }

/* Fix cut-off between 441–640px (keep your 640 & 440 looks) */
@media (max-width:640px) and (min-width:441px){
  .case-pills--ends .pill-split .label{
    white-space: normal !important;  /* override the nowrap from 980 */
    overflow-wrap: anywhere;
    hyphens: auto;
    text-align: center;              /* matches your 640px style */
    font-size: clamp(0.95rem, 3.6vw, 1.0625rem);
    padding: 14px 16px;
  }
  /* make the cap a touch smaller to free space */
  .case-pills--ends .pill-split .cap{
    width: 36px; height: 36px;
    padding: 0;
    margin-left: 8px;
    border-left: 1px solid rgba(255,255,255,.14);
  }
}
























/* =========================================================
   SACRED SPACES (page-local styles only)
   Sections:
    1) Hero
    2) Dark Summary Strip (.ss-band)
    3) Stack Scroll (.ss-seg2)
    4) CTA Panel (.ss-seg3)
   ========================================================= */

/* ---------------------------------------
   1) HERO
   --------------------------------------- */
.ss-hero{
  background: var(--paper);
  color:#111;
  padding: clamp(28px, 5vw, 40px) 0 0;
}

.ss-hero-inner{
  width:min(1200px, 92vw);
  margin:0 auto;
  position:relative;
  display:grid;
  gap: clamp(14px, 3vw, 22px);
}

/* header block */
.ss-head{
  text-align:center;
  margin:8px auto 16px;
  max-width:860px;
}
.ss-eyebrow{
  margin:0 0 10px;
  font-family:'Red Hat Display', sans-serif;
  font-weight:700;
  letter-spacing:.21em;
  font-size:.82rem;
  text-transform:uppercase;
  color:#7a6f69;
  line-height:1;
}
.ss-title{
  margin:0;
  font-weight:800;
  font-size: clamp(32px, 6vw, 54px);
  letter-spacing:-.01em;
  line-height:1.1;
  color:#111;
}
.ss-sub{
  margin:8px 0 0;
  font-style:italic;
  font-weight:600;
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--accent-2);
}

/* image + top wash */
.ss-hero-figure{ position:relative; }
.ss-hero-figure::before{
  content:"";
  position:absolute; inset:0 auto auto 0; right:0;
  height: clamp(220px, 40vw, 500px);
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.85) 25%,
    rgba(255,255,255,.65) 50%,
    rgba(255,255,255,.35) 75%,
    rgba(255,255,255,0) 100%
  );
  pointer-events:none;
  z-index:0;
}
.ss-hero-figure img{ display:block; width:100%; height:auto; object-fit:cover; }

/* logo card pinned to top of image */
.ss-logo-card{
  position:absolute;
  z-index:1;
  top: clamp(8px, 2.2vw, 16px);
  left: clamp(12px, 3vw, 24px);
  right: clamp(12px, 3vw, 24px);
  bottom:auto;
  background:transparent;
  border:none;
  padding: clamp(12px, 2.2vw, 20px) clamp(14px, 2.8vw, 24px);
  box-shadow:0 12px 24px rgba(0,0,0,.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ss-logo-card img{
  display:block;
  height: clamp(46px, 7vw, 74px);
  width:auto; object-fit:contain;
}

/* brand block inside the card */
.ss-hero .ss-brand-title,
.ss-hero .ss-brand-sub{ font-family:'Merriweather', serif; }
.ss-hero .ss-tagline{ font-family:'Dancing Script', cursive; }

.ss-brand{
  display:flex; align-items:center; justify-content:center;
  gap: clamp(12px, 2.4vw, 24px);
  flex-wrap:wrap; text-align:left;
}
.ss-brand-text{ min-width:0; }
.ss-brand-title{
  margin:0; font-weight:700; letter-spacing:-.01em; line-height:1.1;
  font-size: clamp(20px, 3vw, 36px); color:#111;
}
.ss-brand-sub{
  margin:4px 0 0; font-weight:400;
  font-size: clamp(12px, 1.8vw, 18px); color:#3f3f3f; opacity:.9;
}
.ss-tagline{
  grid-column:1 / -1; width:100%;
  text-align:center; margin-top: clamp(8px, 1.6vw, 14px);
  font-weight:400; line-height:1.2;
  color:#214a2e; text-shadow:0 1px 0 rgba(255,255,255,.6);
  font-size: clamp(18px, 4vw, 36px);
}

.ss-logo{ width: clamp(60px, 9vw, 92px); height:auto; display:block; }

/* hero responsive */
@media (max-width: 900px){
  .ss-logo-card{
    top: clamp(6px, 2.5vw, 14px);
    left: clamp(10px, 4vw, 22px);
    right: clamp(10px, 4vw, 22px);
    bottom:auto;
    padding: clamp(10px, 2.4vw, 18px) clamp(12px, 3vw, 20px);
  }
  .ss-brand{
    flex-direction:row; align-items:center; justify-content:center;
    gap: clamp(10px, 2vw, 18px);
  }
  .ss-logo{ width: clamp(50px, 10vw, 72px); }
  .ss-brand-title{ font-size: clamp(20px, 3.4vw, 30px); }
  .ss-brand-sub{ font-size: clamp(12px, 2.2vw, 16px); }
  .ss-tagline{ font-size: clamp(18px, 4vw, 30px); line-height:1.25; }
}
@media (max-width: 680px){
  .ss-brand{ text-align:center; }
  .ss-logo{ margin:0 auto; }
}

/* ---------------------------------------
   2) DARK SUMMARY STRIP (matches .case-summary)
   --------------------------------------- */
.ss-band{
  --ul-w:64px; --ul-h:2px; --ul-offset:.5rem; --ul-color:currentColor;
  position:relative; background:var(--ink-2); color:#eee;
  padding: clamp(26px, 5vw, 36px) 0;
}
.ss-band-inner{
  width:min(1200px, 92vw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap: clamp(20px, 4vw, 36px);
  padding-left: clamp(40px, 6vw, 80px);
}
.ss-col{ min-width:0; }
.ss-col:first-child{ text-align:right; }
.ss-col:first-child .ss-kicker,
.ss-col:first-child .ss-copy{ text-align:right; margin-left:auto; }
.ss-col:first-child .ss-kicker::after{ margin-inline-start:auto; }

.ss-kicker{
  position:relative; margin:0 0 10px;
  font-family:'Red Hat Display', sans-serif; font-weight:900;
  letter-spacing:.22em; font-size: clamp(18px, 1.8vw, 20px);
  color:#e4e4e4; text-wrap:balance;
}
.ss-kicker::after{
  content:""; display:block; inline-size:var(--ul-w); block-size:var(--ul-h);
  background:var(--ul-color); opacity:.5; margin-block-start:var(--ul-offset);
}
.ss-kicker--green{ color:var(--accent); font-size: clamp(20px, 2vw, 22px); }

.ss-copy{
  max-width:38ch; margin:0; line-height:1.65; letter-spacing:.005em;
  color:rgba(255,255,255,.86); text-wrap:pretty;
  font-size: clamp(12px, 1.2vw, 14px);
  font-family:'Montserrat', sans-serif;
}
.ss-copy a{
  color:var(--accent);
  text-decoration:underline; text-decoration-thickness:.08em; text-underline-offset:.18em;
}
@media (min-width:1400px){ .ss-band .ss-copy{ font-size:16px; } }
@media (max-width:720px){
  .ss-band-inner{ grid-template-columns:1fr; padding-left: clamp(16px,4vw,24px); }
  .ss-col:first-child .ss-kicker,
  .ss-col:first-child .ss-copy{ text-align:left; margin-left:0; }
  .ss-copy{ max-width:50ch; line-height:1.7; font-size: clamp(14px, 3.6vw, 16px); }
}


/* Hold row layout for logo + text between 900px → 426px */
@media (max-width: 900px) and (min-width: 426px){
  .ss-brand{
    flex-wrap: nowrap;              /* don't drop under the logo */
    justify-content: flex-start;    /* keep the text right next to the logo */
    text-align: left;
    gap: clamp(10px, 2vw, 18px);
  }
  .ss-brand-text{ min-width: 0; flex: 1 1 auto; }  /* allow shrink without wrapping away */
  .ss-logo{ margin: 0; }                            /* cancel the mobile centering */
}

/* ===== Hero micro-tuning for 425 → 320 px ===== */
@media (max-width: 425px){
  /* Keep the card inside the image and stop the global scale */
  .ss-logo-card{
    left: 14px; right: 14px; top: 12px;
    padding: 14px 16px;
    transform: none;                 /* cancel the earlier scale */
  }

  /* Make sure the logo never takes over */
  .ss-logo-card img{ height: auto !important; }   /* stop the generic height rule */
  .ss-logo{ 
    width: clamp(64px, 24vw, 96px);  /* hard cap the logo size */
    max-width: 96px;
  }

  /* Stack + tighten type so it all fits nicely */
  .ss-brand{
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 8px;
  }
  .ss-brand-title{ font-size: clamp(22px, 7.2vw, 28px); line-height: 1.08; }
  .ss-brand-sub{   font-size: clamp(12px, 3.8vw, 15px); }
  .ss-tagline{
    font-size: clamp(16px, 5.2vw, 22px);
    max-width: 26ch;
    margin-top: 8px;
  }

  /* Give the hero a taller stage so image + card feel bigger but not cramped */
  .ss-hero-figure{
    min-height: clamp(440px, 74vh, 600px);
  }
  .ss-hero-figure img{
    width: 100%; height: 100%; object-fit: cover;
  }
}

/* Even tighter on very small phones */
@media (max-width: 360px){
  .ss-logo{ width: clamp(56px, 26vw, 86px); }
  .ss-brand-title{ font-size: clamp(20px, 8.8vw, 26px); }
  .ss-tagline{ font-size: clamp(15px, 6.2vw, 20px); }
}

/* Bigger hero canvas + slightly larger type and card on small screens */
@media (max-width: 680px){
  .ss-hero-figure{
    min-height: clamp(420px, 70vh, 560px); /* taller stage so image + card feel bigger */
  }
  .ss-hero-figure img{
    width: 100%;
    height: 100%;                 /* fill the taller stage */
    object-fit: cover;
  }

  /* scale the card content a touch and keep it centered */
  .ss-logo-card{
    transform: scale(1.06);
    transform-origin: top center;
  }

  /* bump the type so it stays readable */
  .ss-brand-title{ font-size: clamp(26px, 7vw, 36px); }
  .ss-brand-sub{   font-size: clamp(14px, 3.6vw, 18px); }
  .ss-tagline{     font-size: clamp(22px, 6.6vw, 36px); }
}



/* ---------------------------------------
   3) STACK SCROLL
   --------------------------------------- */
.ss-seg2{
  --ss-green:#6bb38a;
  --ss-green-deep:#243f2a;
  --ss-teal:#7ec3c6;
  --ss-teal-bar:#6ea8aa;

  background:var(--paper);
  width:100%;
  margin:0;
  display:grid;
  gap: clamp(28px,5vw,44px);
  padding: clamp(22px,4vw,36px) 0;
}

/* container spans full width and sets a right rail */
.ss-seg2 .stack-scroll{
  background:var(--paper);
  width:100%; max-width:none; margin:0;
  --rail: clamp(16px, 3.5vw, 40px);
}
.ss-seg2 .stack-card{
  box-sizing:border-box;
  place-items:center;                 /* default */
  padding-inline-end: var(--rail);
}
.ss-seg2 .stack-card:has(.ss-pan-img){ place-items:stretch; }

/* images */
.ss-seg2 .stack-card img{
  width:100%; max-width:none; height:auto;
  box-shadow:0 24px 42px rgba(0,0,0,.22);
}
.ss-seg2 .stack-card:not(.stack-card--flow) img{ width:min(1400px, 96vw); }

/* panel (image container) */
.ss-pan{ display:grid; gap:0; }
.ss-pan-img{
  position:relative; margin:0; background:#d9d9d9;
  min-height: clamp(320px, 46vw, 520px);
  overflow:hidden;
  box-shadow:0 24px 42px rgba(0,0,0,.22);
}
.ss-pan-img img{ display:block; box-shadow:none !important; }
.ss-pan-img.left{  margin-right: clamp(10px,3vw,26px); }
.ss-pan-img.right{ margin-left:  clamp(10px,3vw,26px); }
/* quick placeholders */
.ss-a .ss-pan-img{ background:#5e8765; }
.ss-b .ss-pan-img{ background:#7ec3c6; }

/* text bar */
.ss-info{
  display:grid; grid-template-columns:auto 1px 1fr;
  align-items:center; gap: clamp(14px,3vw,22px);
  padding: clamp(14px,2.8vw,20px) clamp(16px,3.2vw,24px);
  margin-top:-4px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.ss-info h3{
  margin:0; font-family:'Red Hat Display',sans-serif; font-weight:900;
  letter-spacing:.35em; text-transform:uppercase;
  font-size: clamp(14px,1.8vw,20px);
}
.ss-info .vrule{ width:1px; height:100%; background:rgba(255,255,255,.65); }
.ss-info p{
  margin:0; font-family:'Montserrat',sans-serif; line-height:1.6; color:inherit;
}

/* default dark bar + readability (no dimming) */
.ss-seg2 .stack-card.ss-text-only{ background:transparent; box-shadow:none; }
.ss-seg2 .stack-card.ss-text-only.is-dim{ filter:none !important; opacity:1 !important; }
.ss-seg2 .stack-card.ss-text-only .ss-info{
  background: color-mix(in srgb, var(--ss-green-deep) 92%, transparent);
  color:#eef3ef;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.ss-seg2 .stack-card.ss-text-only h3,
.ss-seg2 .stack-card.ss-text-only p{ text-shadow:0 2px 6px rgba(0,0,0,.45); }
.ss-seg2 .stack-card.ss-text-only .ss-info p{
  max-width:60ch; font-size: clamp(14px, 1.2vw, 16px); line-height:1.7;
}

/* light/teal variants */
.ss-info.light{ background: var(--ss-teal-bar); color:#fff; }
.ss-info.light .vrule{ background: rgba(255,255,255,.85); }

.ss-seg2 .stack-card.ss-text-only .ss-info.teal{
  background:#5aa0a2; color:#fff;
  border:1px solid rgba(0,0,0,.08);
}
.ss-seg2 .stack-card.ss-text-only .ss-info.teal h3{ color:#fff; letter-spacing:.32em; }
.ss-seg2 .stack-card.ss-text-only .ss-info.teal .vrule{ background:rgba(255,255,255,.8); }

/* stagger: (image, text) (image, text) ... */
.ss-seg2 .stack-scroll > .stack-card:nth-child(4n+1) .ss-pan-img{
  justify-self:start; margin-right: clamp(10px,3vw,26px);
}
.ss-seg2 .stack-scroll > .stack-card:nth-child(4n+2).ss-text-only .ss-info{
  justify-self:end; margin-left: clamp(10px,3vw,26px);
}
.ss-seg2 .stack-scroll > .stack-card:nth-child(4n+3) .ss-pan-img{
  justify-self:end; margin-left: clamp(10px,3vw,26px); margin-inline-end: var(--rail);
}
.ss-seg2 .stack-scroll > .stack-card:nth-child(4n+4).ss-text-only .ss-info{
  justify-self:start; margin-right: clamp(10px,3vw,26px);
}
.ss-seg2 .stack-scroll > .stack-card:nth-child(4n+1) .ss-pan-img,
.ss-seg2 .stack-scroll > .stack-card:nth-child(4n+4).ss-text-only .ss-info{
  margin-inline-start: var(--rail);
}

/* widths */
.ss-seg2 .ss-pan-img,
.ss-seg2 .ss-info{ width: min(1000px, 88vw); }
/* === SS stack-scroll: centered variant (prevents clipping) === */
.ss-seg2 .stack-card.stack-card--center{
  place-items: center;            /* center like Cedar Haven */
  padding-inline: 0;              /* ignore the right rail */
}

.ss-seg2 .stack-card.stack-card--center .ss-pan-img{
  justify-self: center !important;
  margin: 0 auto !important;
  width: min(1200px, 92vw);       /* same content width rhythm */
  min-height: auto;               /* let the image set height */
  overflow: visible;              /* avoid edge clipping */
}

.ss-seg2 .stack-card.stack-card--center img{
  width: 100%;
  height: auto;
  object-fit: contain;            /* no cropping on centered variant */
  box-shadow: none;
}

/* ==== SS seg2 — consistency pack for 1024→425 ==== */
/* Put AFTER your existing ss-seg2 rules */

@media (max-width: 1060px){
  /* kill the rail and side offsets; center everything */
  .ss-seg2 .stack-scroll{ --rail: 0; }
  .ss-seg2 .stack-card{ padding-inline: 0; }

  .ss-seg2 .ss-pan-img,
  .ss-seg2 .ss-text-only .ss-info{
    width: min(980px, 92vw);
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
  }

  /* neutralize the alternating push/pull so nothing clips */
  .ss-seg2 .stack-scroll > .stack-card:nth-child(4n+1) .ss-pan-img,
  .ss-seg2 .stack-scroll > .stack-card:nth-child(4n+2).ss-text-only .ss-info,
  .ss-seg2 .stack-scroll > .stack-card:nth-child(4n+3) .ss-pan-img,
  .ss-seg2 .stack-scroll > .stack-card:nth-child(4n+4).ss-text-only .ss-info{
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }

  /* let the image define height; avoid cropped edges */
  .ss-seg2 .ss-pan-img{ min-height: auto; overflow: visible; }
}

@media (max-width: 900px){
  /* simpler, single-column info bar + softer type sizing */
  .ss-seg2 .ss-text-only .ss-info{
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: left;
  }
  .ss-seg2 .ss-text-only .ss-info .vrule{ display: none; }
  .ss-seg2 .ss-text-only .ss-info h3{
    letter-spacing: .26em;
    font-size: clamp(13px, 2.4vw, 18px);
  }
  .ss-seg2 .ss-text-only .ss-info p{
    font-size: clamp(14px, 2.2vw, 16px);
    line-height: 1.7;
  }

  /* slightly lighter shadows to reduce visual weight/jank */
  .ss-seg2 .ss-pan-img,
  .ss-seg2 .stack-card:not(.stack-card--flow) img{
    box-shadow: 0 18px 36px rgba(0,0,0,.18);
  }
}

@media (max-width: 680px){
  /* lock widths to viewport rhythm and (if needed) disable stickiness */
  .ss-seg2 .ss-pan-img,
  .ss-seg2 .ss-text-only .ss-info{ width: 92vw; }
  .stack-card{ position: relative; top: auto; min-height: auto; }
}

/* your existing 480px rules continue to apply */

@media (max-width: 820px){
  .ss-seg2 .stack-card.stack-card--center .ss-pan-img{ width: min(100%, 92vw); }
}

/* responsive */
@media (max-width: 820px){
  .ss-seg2 .ss-pan-img{ min-height: clamp(260px, 52vw, 420px); }
  .ss-seg2 .ss-pan-img,
  .ss-seg2 .ss-text-only .ss-info{
    width:min(100%, 92vw); justify-self:center; margin-left:0; margin-right:0;
  }
  .ss-info{ grid-template-columns:1fr; gap:10px; }
  .ss-info .vrule{ display:none; }
  .ss-info h3{ letter-spacing:.28em; }
}
@media (max-width: 480px){
  .stack-card{
    position:relative; top:auto; min-height:auto; place-items:center; padding:0;
  }
  .ss-seg2 .stack-card{ padding-inline:0; }
  .ss-pan-img{ width:92vw; min-height:auto; overflow:visible; box-shadow:0 24px 42px rgba(0,0,0,.22); }
  .ss-pan-img img, .stack-card > img{ width:100%; height:auto; object-fit:contain; }
  .ss-info{ width:92vw; margin:0 auto; text-align:left; }
  .stack-card:not(.stack-card--flow) img{ width:92vw; height:auto; box-shadow:0 24px 42px rgba(0,0,0,.22); }
  .stack-card > :is(.seg3-split-qr, .seg3-pill-columns, img, .ss-pan-img, .ss-text-only .ss-info){
    max-width:92vw; margin-inline:auto;
  }
}

/* ---------------------------------------
   4) CTA PANEL
   --------------------------------------- */
.ss-seg3{
  --ss-green:#8fb695; --ss-green-deep:#2a3a34; --ss-teal:#58aeb5;
  background:var(--paper);
  width:100vw; margin:0 auto;
  display:grid; gap: clamp(24px, 4vw, 40px);
  padding: clamp(24px,5vw,44px) 0;
}

/* CH-style container width */
.ss-seg3 .ss-cta-hero{
  width:min(1200px, 92vw);
  margin:0 auto;
  display:grid; place-items:center;
  gap: clamp(24px, 5vw, 48px);
  padding: clamp(32px, 6vw, 72px) 0;
}

/* card */
.ss-seg3 .ss-cta-panel{
  position:relative; width:min(860px, 100%);
  border-radius:20px;
  background:
    linear-gradient(to right, #dfeade 0%, #c9dacb 35%, #9fbea5 70%, #6e8f77 100%),
    radial-gradient(120% 90% at 50% 35%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
  border:1px solid rgba(0,0,0,.08);
  box-shadow: inset 0 18px 36px rgba(255,255,255,.28), 0 18px 36px rgba(0,0,0,.14);
  overflow:hidden;
}
.ss-seg3 .ss-cta-strip{
  content:""; position:absolute; left:0; right:0; top:0; height:10px;
  background: linear-gradient(90deg, #5aa0a2, #6ea8aa);
}
.ss-seg3 .ss-cta-panel::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(140% 100% at 50% -10%, rgba(255,255,255,.55), transparent 55%);
  pointer-events:none;
}
.ss-seg3 .ss-cta-panel::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(120% 120% at 50% 110%, rgba(0,0,0,.06), transparent 55%);
  pointer-events:none;
}

/* inner layout */
.ss-seg3 .ss-cta-inner{
  display:grid; justify-items:center; text-align:center;
  gap:12px; padding: clamp(40px, 8vw, 96px) clamp(18px, 4vw, 28px);
}

/* badge halo */
.ss-seg3 .ss-cta-badge{ position:relative; }
.ss-seg3 .ss-cta-badge::before{
  content:""; position:absolute; inset:-8px; border-radius:999px;
  background: radial-gradient(60% 60% at 50% 45%, rgba(255,255,255,.65), transparent 70%);
  filter: blur(10px);
}
.ss-seg3 .ss-cta-badge img{
  width: clamp(120px, 20vw, 180px); height:auto; display:block;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.18));
}

/* typography (white with soft shadow) */
.ss-seg3 .ss-cta-lead{
  margin:12px 0 0; font-weight:800; letter-spacing:.01em;
  color:#fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 0 6px rgba(0,0,0,.25);
  font-size: clamp(12px, 1.2vw, 14px);
}
.ss-seg3 .ss-cta-link{
  display:inline-block; margin-top:2px;
  font-family:'Merriweather', serif; font-weight:800;
  color:#fff; letter-spacing:.005em;
  font-size: clamp(20px, 4vw, 40px);
  text-decoration:none;
  text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35), 0 10px 22px rgba(0,0,0,.20);
}
.ss-seg3 .ss-cta-link:hover{ text-decoration:underline; }
.ss-seg3 .ss-cta-note{
  margin-top:2px; font-family:'Merriweather', serif; font-style:italic;
  color: rgba(255,255,255,.96);
  font-size: clamp(12px, 1.6vw, 16px);
  text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 0 1px rgba(0,0,0,.35);
}

/* button */
.ss-seg3 .ss-btn{
  background:#fff; color:#1f4e31;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  padding:10px 18px; border-radius:999px;
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; text-decoration:none;
  transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease;
}
.ss-seg3 .ss-btn:hover{ box-shadow:0 10px 22px rgba(0,0,0,.22); }
.ss-seg3 .ss-btn:active{ transform: translateY(1px); }
.ss-seg3 .ss-btn:focus-visible{
  outline:2px solid #5aa0a2; outline-offset:3px; box-shadow:0 0 0 6px rgba(90,160,162,.25);
}






	




























/* ===== Prehistoric Pathways – Section 1 ===== */
.pp-hero {
  background: var(--paper); /* full-width background */
  color: #111;
  padding: clamp(28px, 5vw, 40px) 0 0; /* same top spacing as other pages */
}

.pp-hero-inner {
  width: min(1200px, 92vw); /* consistent content width */
  margin: 0 auto;
  display: grid;
  gap: clamp(14px, 3vw, 22px);
  text-align: center; /* center all text under image */
  padding-bottom: clamp(14px, 3vw, 24px); /* new bottom breathing room */
}

/* hero placeholder/image */
.pp-hero-figure {
  margin: 0;
  background: #d9d9d9;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 36px rgba(0,0,0,.12);
}
.pp-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* title block */
.pp-title {
  margin: clamp(12px, 2vw, 18px) 0 0;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(28px, 6vw, 56px);
}
.pp-sub-italic {
  margin: 4px 0 0 0;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(16px, 3vw, 28px);
}
.pp-sub-accent {
  margin: 6px 0 clamp(14px, 3vw, 24px) 0; /* last value adds bottom space */
  font-style: italic;
  font-weight: 600;
  color: var(--accent-2);
  font-size: clamp(14px, 2.4vw, 24px);
}



/* ===== Prehistoric Pathways – Dark summary strip (matches SS/Cedar Haven) ===== */
.pp-band{
  /* underline custom props used by kicker */
  --ul-w: 64px; --ul-h: 2px; --ul-offset: .5rem; --ul-color: currentColor;

  position: relative;
  background: var(--ink-2);
  color: #eee;
  padding: clamp(26px, 5vw, 36px) 0;
}

.pp-band-inner{
  width: min(1200px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 36px);
  padding-left: clamp(40px, 6vw, 80px);
}

.pp-col{ min-width: 0; }

/* Right-align first column content (and its underline) */
.pp-col:first-child { text-align: right; }
.pp-col:first-child .pp-kicker,
.pp-col:first-child .pp-copy{ text-align: right; margin-left: auto; }
.pp-col:first-child .pp-kicker::after{ margin-inline-start: auto; }

/* Kicker (same as .ss-kicker / .summary-label) */
.pp-kicker{
  position: relative;
  margin: 0 0 10px;
  font-family: 'Red Hat Display', sans-serif;
  font-weight: 900;
  letter-spacing: .22em;
  font-size: clamp(18px, 1.8vw, 20px);
  color: #e4e4e4;
  text-wrap: balance;
}
.pp-kicker::after{
  content:"";
  display:block;
  inline-size: var(--ul-w);
  block-size: var(--ul-h);
  background: var(--ul-color);
  opacity:.5;
  margin-block-start: var(--ul-offset);
  margin-inline-start: 0;
}
.pp-kicker--accent{ color: var(--accent-2, var(--accent)); }

/* Body copy (same as .ss-copy / .summary-note) */
.pp-copy{
  max-width: 38ch;
  margin: 0;
  line-height: 1.65;
  letter-spacing: .005em;
  color: rgba(255,255,255,.86);
  text-wrap: pretty;
  font-size: clamp(12px, 1.2vw, 14px);
  font-family: 'Montserrat', sans-serif;
}
 

/* Responsive: mirror the SS band behavior */
@media (min-width: 1400px){ .pp-band .pp-copy{ font-size:16px; } }
@media (max-width: 720px){
  .pp-band-inner{ grid-template-columns: 1fr; padding-left: clamp(16px, 4vw, 24px); }
  .pp-col:first-child .pp-kicker,
  .pp-col:first-child .pp-copy{ text-align: left; margin-left: 0; }
  .pp-copy{ max-width: 50ch; line-height: 1.7; font-size: clamp(14px, 3.6vw, 16px); }
}





/*PREHISTORIC PATHWAYS SECTIONS 2-5 ON PREHISTORIC.CSS*/



























/* ===== MIARTS – Section 1 (aligned with Sacred Spaces Section 1) ===== */
.miarts-hero {
  background: var(--paper);
  color: #111;
  padding: clamp(28px, 5vw, 40px) 0 0;
}

.miarts-hero-inner {
  width: min(1200px, 92vw);
  margin: 0 auto;
  display: grid;
  gap: clamp(14px, 3vw, 22px);
}

/* Header block */
.miarts-head {
  text-align: center;
  margin: 8px auto 16px;
  max-width: 860px;
}

.miarts-eyebrow {
  margin: 0 0 10px 0;
  font-family: 'Red Hat Display', sans-serif;
  font-weight: 700;
  letter-spacing: .21em;
  font-size: .82rem;
  text-transform: uppercase;
  color: #7a6f69;
  line-height: 1;
}

.miarts-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(32px, 6vw, 54px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #111;
}

.miarts-sub {
  margin: 8px 0 0 0;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--accent-2);
}

/* Hero image */
.miarts-figure {
  position: relative;
  width: min(920px, 100%);
  margin: clamp(20px, 4vw, 28px) auto 0;
  background: #d7d7d9;
  overflow: hidden;
  box-shadow: 0 24px 42px rgba(0,0,0,.22);
  border: 0;
}

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





/* ===== MIARTS – Dark summary strip (match SS band) ===== */
.miarts-band{
  position: relative;
  background: var(--ink-2);
  color: #eee;
  padding: clamp(26px, 5vw, 36px) 0 clamp(26px, 5vw, 36px);
}

.miarts-band-inner{
  width: min(1200px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 36px);
  padding-left: clamp(40px, 6vw, 80px); /* same left inset as SS */
}

.mi-col{ min-width: 0; }

/* Right-align the first column, like SS */
.mi-col:first-child{ text-align: right; }
.mi-col:first-child .mi-kicker,
.mi-col:first-child .mi-copy{ text-align: right; }

/* Headings (match SS kicker scale/spacing) */
.mi-kicker{
  margin: 0 0 10px 0;
  font-family: 'Red Hat Display', sans-serif;
  font-weight: 900;
  letter-spacing: .22em;                    /* match SS */
  font-size: clamp(14px, 1.6vw, 18px);      /* match SS */
  color: #e4e4e4;
}
/* Accent color for SOLUTION label — use your global accent */
.mi-kicker--accent{ color: var(--accent); }

/* Body copy (match SS note scale/color) */
.mi-copy{
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(12px, 1.2vw, 14px);      /* match SS */
  line-height: 1.6;
  color: rgba(255,255,255,.75);
}
/* Optional muted variant for the PROBLEM column */
.mi-copy--muted{ color: rgba(255,255,255,.6); }

/* Bottom accent bar (mirror SS ::after) */
.miarts-band::after{
  content: "";
  display: block;
  height: 8px;
  background: var(--accent-2);              /* MIARTS accent; change if needed */
  margin-top: clamp(18px, 3vw, 24px);
  border-radius: 2px;
}

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






/* ===== MIARTS – SEGMENT 2 (Backdrop panels + sticky outline) ===== */
.miarts-seg2.backdrop{
  background: var(--paper); /* full-width bg */
  color:#111;
  padding: clamp(22px,4vw,36px) 0;
}
/* Inner wrapper for content alignment */
.miarts-seg2.backdrop .backdrop-inner{
  width:min(1200px, 92vw);
  margin:0 auto;
  display:grid;
  grid-template-columns: 360px 1fr; /* sticky outline | panels */
  gap: clamp(20px, 4vw, 36px);
}

/* Sticky outline card stays the same */
.mi2-outline{
  position: sticky;
  top: clamp(60px, 12vh, 120px);
  align-self:start;
  background: #141414;
  color: rgba(255,255,255,.9);
  border-radius: 20px;
  padding: clamp(14px, 2.6vw, 22px);
  box-shadow: 0 16px 32px rgba(0,0,0,.18);
}

.mi2-outline h3{
  margin:0 0 10px 0;
  font-family:'Red Hat Display',sans-serif;
  letter-spacing:.28em;
  font-weight:900;
  text-transform:uppercase;
  font-size: clamp(14px,1.6vw,18px);
  color: var(--accent-2);
}
.mi2-outline ul{
  margin: 8px 0 0 18px;
  padding:0;
  line-height:1.6;
  font-family:'Montserrat',sans-serif;
}
/* Emphasize opening labels inside each list item */
.mi2-outline .li-lead{
  font-weight: 800;
  color: rgba(255,255,255,.98); /* brighter = higher contrast on dark card */
  letter-spacing: .01em;
}

/* (Optional) if you truly want them darker instead of brighter, swap to this: */
/* .mi2-outline .li-lead{ color: rgba(255,255,255,.72); } */


/* Scrolling panels */
.mi2-panels{
  display:grid;
  gap: clamp(16px, 2.8vw, 24px);
}
.panel{
  margin:0;
  border-radius: 28px;
  overflow:hidden;
  box-shadow: 0 18px 36px rgba(0,0,0,.12);
  min-height: clamp(420px, 72vh, 860px);   /* big, immersive */
  background:#c8c8c8;
}
.panel img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

@media (max-width: 900px){
  .miarts-seg2.backdrop .backdrop-inner{ grid-template-columns: 1fr; }
  .mi2-outline{ position: static; }
}
/* =========================
   MIARTS — ≤768px
   ========================= */
@media (max-width: 768px){

  /* --- Hero --- */
  .miarts-hero-inner{ gap: 14px; }
  .miarts-head{ margin: 6px auto 10px; }
  .miarts-title{ font-size: clamp(26px, 6.2vw, 40px); }
  .miarts-sub{   font-size: clamp(16px, 3.2vw, 20px); }

  /* keep hero image elegant, not massive */
  .miarts-figure{
    width: min(820px, 96vw);
    border-radius: 18px;
    box-shadow: 0 16px 28px rgba(0,0,0,.18);
    aspect-ratio: 16 / 10;               /* consistent height on small screens */
  }

  /* --- Dark summary strip (shared band) --- */
  .miarts-band-inner,
  .case-summary-inner{                    /* if you’re using .case-summary here */
    grid-template-columns: 1fr;           /* one column */
    padding-left: clamp(16px,4vw,24px);
  }
  .mi-col:first-child,
  .summary-col:first-child{
    text-align: left;
  }

  /* --- Segment 2 (outline + panels) --- */
  .miarts-seg2.backdrop .backdrop-inner{
    grid-template-columns: 1fr;           /* stack outline then panels */
    gap: clamp(14px, 3.6vw, 18px);
  }
  .mi2-outline{
    position: static;
    border-radius: 18px;
    padding: clamp(12px, 3.6vw, 16px);
    margin-bottom: clamp(8px, 3vw, 12px);
  }

  /* scrolling panels: reduce “huge” heights */
  .mi2-panels{ gap: clamp(12px, 3.6vw, 16px); }
  .panel{
    border-radius: 18px;
    min-height: clamp(240px, 52vh, 520px);  /* was 72vh */
  }
  .panel img{
    object-fit: cover;
    object-position: center;
  }
}

/* Phones: a little tighter */
@media (max-width: 480px){

  .miarts-title{ font-size: clamp(24px, 7vw, 34px); }
  .miarts-sub{   font-size: clamp(15px, 4vw, 18px); }

  .miarts-figure{
    aspect-ratio: 4 / 3;                   /* slightly taller = looks nicer on phones */
    border-radius: 16px;
    box-shadow: 0 12px 22px rgba(0,0,0,.16);
  }

  .panel{
    min-height: clamp(220px, 48vh, 380px);
    border-radius: 16px;
  }

  /* optional: give panels a consistent box shape on very small phones */
  .panel img{ aspect-ratio: 4 / 3; }
}

























/* ===== SVSU WORK – Segment 1 ===== */
.svsu-hero{
  background: var(--paper);
  color:#111;
  padding: clamp(28px, 5vw, 40px) 0 0;
}
.svsu-hero-inner{
  width:min(1200px, 92vw);
  margin:0 auto;
  display:grid;
  gap: clamp(18px, 3vw, 32px);
  text-align:center;
  padding-bottom: clamp(18px, 3vw, 32px);
}

/* Logo lockup — soft “paper” card w/ subtle fade */
.svsu-head{ margin:0 auto; max-width: 980px; }
.svsu-lockup{
  position:relative; z-index:2;
  border-radius: 26px;
  padding: clamp(18px, 3.2vw, 32px) clamp(18px, 3.6vw, 40px);
  background:
    radial-gradient(140% 120% at 50% 0%,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.96) 45%,
      rgba(255,255,255,.92) 100%);
  /* remove this if present: border:1px solid rgba(0,0,0,.05); */
  border: 1px solid rgba(0,0,0,.05);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.45),   /* soft keyline */
    inset 0 0 24px rgba(255,255,255,.24),   /* feathered white glow */
    0 10px 22px rgba(0,0,0,.08),
    0 28px 44px rgba(0,0,0,.14); 
}

/* slimmer, centered accent bar with a cardinal red pinstripe */
.svsu-lockup::after{
  content:"";
  display:block;
  height: 12px;
  width: min(460px, 46%);
  margin: clamp(10px,1.4vw,16px) auto 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--svsu-red) 0 6%, var(--svsu-blue) 6% 100%);
}
.svsu-lockup img{
  max-width: min(760px, 78vw);
  height:auto; display:block; margin: 0 auto;
}

/* Subtitle */
.svsu-sub{
  margin: clamp(10px, 1.8vw, 16px) 0 0;
  font-style: italic; font-weight:600;
  font-size: clamp(16px, 2.1vw, 22px);
  color:#555; text-wrap: balance;
}
.svsu-sub--accent{ color: var(--accent-2); }

/* Collage card below — clearer separation + “paper ring” */
.svsu-hero-figure{
  margin:0; position:relative; z-index:1; overflow:hidden;
  border-radius: 28px;
  background:#e9eaec;
  aspect-ratio: 16 / 9;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:
    0 20px 36px rgba(0,0,0,.14),
    0 46px 72px rgba(0,0,0,.12);
  margin-top: clamp(-36px, -5vw, -72px); /* gentler overlap so nothing feels cramped */
}
/* white ring to lift off the page */
.svsu-hero-figure::before{
  content:"";
  position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  /* soft, blurred white edge instead of a solid ring */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 0 36px rgba(255,255,255,.28);
  mix-blend-mode: screen;   /* keeps it light over dark areas */
  opacity:.95;
}
/* soft edge vignette */
.svsu-hero-figure::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top,
      rgba(255,255,255,.80) 0%,
      rgba(255,255,255,.40) 14%,
      rgba(255,255,255,0) 36%),
    radial-gradient(120% 100% at 50% 20%,
      transparent 60%, rgba(0,0,0,.06) 100%);
}

/* Toggle this on if you want even softer edges */
.svsu-hero-figure{
  --feather: 22px;
  -webkit-mask-image: radial-gradient(100% 100% at 50% 50%,
                      #000 calc(100% - var(--feather)),
                      rgba(0,0,0,.5) calc(100% - (var(--feather) - 8px)),
                      transparent 100%);
          mask-image: radial-gradient(100% 100% at 50% 50%,
                      #000 calc(100% - var(--feather)),
                      rgba(0,0,0,.5) calc(100% - (var(--feather) - 8px)),
                      transparent 100%);
}

.svsu-hero-figure img{
  display:block; inline-size:100%; block-size:100%; object-fit:cover;
}

/* Brand tokens */
:root{
  --svsu-ice:#f3f5f7;
  --svsu-blue:#01426a;
  --svsu-red:#C8102E;  /* SVSU cardinal */
}

/* Mobile – reduce drama */
@media (max-width: 720px){
  .svsu-hero-figure{ margin-top: 8px; border-radius: 22px; }
  .svsu-lockup{ border-radius: 22px; }
}
/* Tunable overlap amount */
.svsu-hero{ --overlap: clamp(548px, 48vw, 820px); }

/* Keep your existing .svsu-lockup styles, then add: */
.svsu-lockup{
  z-index: 2; /* above the collage */
  margin-bottom: calc(var(--overlap) * .35); /* space before the tuck */
  position: relative;
}

/* Shadow cast from the card onto the collage below */
.svsu-lockup::before{
  content:"";
  position:absolute; left:8%; right:8%;
  bottom: calc(-1 * var(--overlap) * .55);
  height: calc(var(--overlap) * .9);
  background: radial-gradient(60% 100% at 50% 0,
              rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 70%);
  filter: blur(12px);
  pointer-events:none;
  z-index: -1; /* behind the card but still above the collage */
}

/* Collage rises up under the card */
.svsu-hero-figure{
  margin-top: calc(var(--overlap) * -1);
  z-index: 1;
  position: relative;
}

/* White top-fade + edge vignette on the collage */
.svsu-hero-figure::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    /* top white fade so it tucks under the lockup gracefully */
    linear-gradient(to top,
      rgba(255,255,255,.90) 0%,
      rgba(255,255,255,.55) 14%,
      rgba(255,255,255,0) 38%),
    /* existing soft vignette */
    radial-gradient(120% 100% at 50% 20%,
      transparent 60%, rgba(0,0,0,.06) 100%);
}

/* Optional: slightly tighter card radius so layers feel related */
.svsu-lockup{ border-radius: 24px; }
.svsu-hero-figure{ border-radius: 26px; }

/* Mobile: disable the overlap for clarity */
@media (max-width: 720px){
  .svsu-lockup{ margin-bottom: 10px; }
  .svsu-hero-figure{ margin-top: 8px; }
  .svsu-lockup::before{ display:none; }
}


/* Full-bleed section with a blue top band */
.svsu-project{
  position: relative;
  color:#111;
  /* two-layer background: blue band on top + the light gray base */
  --band-h: clamp(40px, 5vw, 60px);
  background:
    linear-gradient(var(--svsu-blue), var(--svsu-blue)) 0 0 / 100% var(--band-h) no-repeat,
    var(--svsu-ice);
  padding: calc(var(--band-h) + clamp(22px, 5vw, 36px)) 0 clamp(22px, 5vw, 36px);
  /* remove the old margin-top */
  /* margin-top: clamp(40px, 5vw, 60px);  <-- delete this if present */
}

.svsu-project-inner{
  width:min(1200px, 92vw);
  margin:0 auto;
  display:grid;
  gap: clamp(16px, 3vw, 24px);
}

/* Mini page title block (unchanged except it sits inside the new inner wrapper) */
.svsu-proj-head{ text-align:left; max-width:860px; }
.svsu-eyebrow{
  margin:0 0 6px 0;
  font-family:'Red Hat Display',sans-serif;
  font-weight:700; letter-spacing:.21em; text-transform:uppercase;
  font-size:.78rem; color:#7a6f69; line-height:1;
}
.svsu-proj-title{
  margin:0; font-weight:800; letter-spacing:-.01em; line-height:1.15;
  font-size: clamp(22px, 4.8vw, 36px);
}
.svsu-proj-sub{
  margin:6px 0 0 0; font-style:italic; font-weight:600;
  font-size: clamp(14px, 2vw, 18px); color: var(--accent-2);
}

/* Two-column layout */
/* Indent the two-column block inward */
.svsu-proj-grid {
  display: grid;
  align-items: stretch;
  padding-left: clamp(14px, 3vw, 36px);  /* NEW: inward shift */
  padding-right: clamp(14px, 3vw, 36px);
	grid-template-columns: 0.95fr 0.85fr; /* slightly smaller columns */
  gap: clamp(18px, 3.6vw, 28px);/* optional: indent both sides equally */
}


/* ---------- Brand blues (add once if not set) ---------- */
:root{
  --svsu-ice: #f3f5f7;
  --svsu-blue: #01426a;    /* primary navy */
  --svsu-blue-deep: #0b2e47;
  --svsu-red: #C8102E;
}

/* ---------- Two-column panel: switch from black to blue ---------- */
.svsu-panel{
  /* blue, slightly textured gradient */
  background:
    radial-gradient(120% 160% at 0% -20%, rgba(255,255,255,.06) 0 35%, transparent 35%),
    linear-gradient(165deg, var(--svsu-blue-deep) 0%, var(--svsu-blue) 68%, #1b6a96 100%);
  color: #f2f6fb;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 18px 36px rgba(0,0,0,.16);
  padding: clamp(18px, 3.2vw, 24px);
}

/* right-aligned content + max readable width like your shared bands */
.svsu-panel-inner{
  display:grid;
  gap: clamp(14px, 2.6vw, 20px);
  text-align: right;
}
.svsu-panel-inner .svsu-copy{ max-width: 42ch; margin-left: auto; }

/* Headings styled like your MIARTS band (label + underline) */
.svsu-kicker{
  margin:0;
  font-family:'Red Hat Display',sans-serif;
  font-weight:900;
  letter-spacing:.22em;
  font-size: clamp(14px, 1.6vw, 18px);
  color:#eaf1f7;
  position: relative;
}
.svsu-kicker::after{
  content:"";
  display:block;
  inline-size: 64px; block-size: 2px;
  background: currentColor; opacity:.45;
  margin-block-start: .5rem; margin-inline-start: auto; /* right aligned */
}
.svsu-kicker--accent{ color: var(--svsu-red); }

/* Body copy contrast tuned for blue panel */
.svsu-copy{
  margin:0;
  font-family:'Montserrat',sans-serif;
  font-size: clamp(12px, 1.2vw, 14px);
  line-height: 1.65;
  color: rgba(255,255,255,.9);
}
.svsu-copy--muted{ color: rgba(255,255,255,.78); }

/* Mock: soften frame so it pairs with the blue panel */
.svsu-mock{
  margin:0; background: var(--svsu-ice);
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 16px 34px rgba(0,0,0,.12);
  min-height: clamp(320px, 48vw, 560px);
  display:grid; place-items:center; overflow:hidden;
}
.svsu-mock::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 0 32px rgba(255,255,255,.22);  /* soft inner glow (not a hard ring) */
}
.svsu-mock img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Keep your existing grid & responsive rules */
















/* ===== SVSU – SEGMENT 2: Backdrop panels + sticky outline with collage scenes ===== */
.svsu-seg2.backdrop{
  background: var(--svsu-ice);              /* same light background you set earlier */
  color:#111;
  padding: clamp(22px,4vw,36px) 0;
}

/* inner wrapper keeps alignment consistent with other sections */
.svsu-seg2.backdrop .svsu-seg2-inner{
  width:min(1200px, 92vw);
  margin:0 auto;
  display:grid;
  gap: clamp(20px, 4vw, 36px);
}

/* sticky outline card (mirrors MIARTS outline styling) */
.sv2-outline{
  position: sticky;
  top: clamp(60px, 12vh, 120px);
  align-self:start;
  background:#141414;
  color: rgba(255,255,255,.9);
  border-radius: 20px;
  padding: clamp(14px, 2.6vw, 22px);
  box-shadow: 0 16px 32px rgba(0,0,0,.18);
}

.sv2-outline h3{
  margin:0 0 10px 0;
  font-family:'Red Hat Display',sans-serif;
  letter-spacing:.28em; font-weight:900; text-transform:uppercase;
  font-size: clamp(14px,1.6vw,18px);
  color: var(--accent-2);
}
.sv2-outline ul{
  margin:8px 0 0 18px; padding:0;
  line-height:1.6; font-family:'Montserrat',sans-serif;
}

.sv2-stage{
  display:grid;
  grid-template-columns: 360px 1fr;      /* outline | scenes */
  gap: clamp(20px, 4vw, 36px);
}

/* scenes column */
.sv2-scenes{
  display:grid;
  gap: clamp(16px, 2.8vw, 24px);
}

/* generic scene panel */
.scene{
  border-radius: 28px;
  overflow:hidden;
  box-shadow: 0 18px 36px rgba(0,0,0,.12);
  background:#c8c8c8;
}

/* hero image scene */
.scene.hero{ min-height: clamp(420px, 70vh, 860px); }
.scene.hero img{ width:100%; height:100%; object-fit:cover; display:block; }

/* collage scenes */
.scene-grid{
  display:grid;
  background:#fff;
}

/* 1) two-up */
.scene-grid.two-up{
  grid-template-columns: 1fr 1fr;
  gap: 1px;                         /* thin seam like print */
}
.scene-grid.two-up img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio: 16 / 10; }

/* 2) tall-left + text card */
.scene-grid.tall-left{
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1px;
  min-height: clamp(320px, 48vw, 560px);
}
.scene-grid.tall-left .tall{
  width:100%; height:100%; object-fit:cover; display:block;
}
.scene-grid.tall-left .sv2-card{
  background: var(--accent);
  color:#fff;
  display:grid; align-content:center; justify-items:center;
  text-align:center;
  padding: clamp(18px,3vw,22px);
}
.sv2-card h3{
  margin:0 0 8px 0;
  font-family:'Red Hat Display',sans-serif;
  font-weight:900; letter-spacing:.35em; text-transform:uppercase;
  font-size: clamp(14px, 2vw, 20px);
}
.sv2-card p{
  margin:0; line-height:1.5; font-family:'Montserrat',sans-serif;
  font-size: clamp(12px, 1.6vw, 14px);
}

/* Make the final 4-up span full container width and sit below the sticky stage */
.full-span{
  grid-column: 1 / -1;    /* spans across the .svsu-seg2-inner grid */
}

/* Ensure the four-up fills width cleanly */
.scene-grid.four{
  grid-template-columns: 1fr 1fr;
  gap: 1px;
}
.scene-grid.four img{
  width:100%; height:100%; object-fit:cover; display:block;
  aspect-ratio: 16 / 10;
}

/* ---- Sticky outline card: switch to SVSU navy with soft glow ---- */
.sv2-outline{
  background:
    radial-gradient(120% 160% at 0% -20%, rgba(255,255,255,.06) 0 35%, transparent 35%),
    linear-gradient(165deg, var(--svsu-blue-deep, #0b2e47) 0%, var(--svsu-blue, #01426a) 68%, #1b6a96 100%);
  color:#f2f6fb;
  border-radius: 22px;
  border: none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.45),
    inset 0 0 28px rgba(255,255,255,.20),
    0 16px 32px rgba(0,0,0,.16);
}
.sv2-outline h3{
  color:#eaf1f7;
  letter-spacing:.28em; font-weight:900; text-transform:uppercase;
  position: relative;
}
.sv2-outline h3::after{
  content:""; display:block; inline-size:64px; block-size:2px;
  background: currentColor; opacity:.45; margin-block-start:.5rem;
}
.sv2-outline ul{ line-height:1.65; font-family:'Montserrat',sans-serif; }
.sv2-outline ul li::marker{ color:rgba(255,255,255,.7); }

/* ---- Side text card: SVSU red, softer edge, readable text width ---- */
.scene-grid.tall-left .sv2-card{
  background: linear-gradient(165deg, var(--svsu-red, #C8102E) 0%, #971129 100%);
  color:#fff;
  display:grid; align-content:center; justify-items:center; text-align:center;
  padding: clamp(18px,3vw,22px);
  border-top-right-radius: 28px; border-bottom-right-radius: 28px; /* match container */
  border: none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.40),
    inset 0 0 26px rgba(255,255,255,.18);
}
.sv2-card h3{
  margin:0 0 8px 0;
  font-family:'Red Hat Display',sans-serif;
  font-weight:900; letter-spacing:.35em; text-transform:uppercase;
  font-size: clamp(14px, 2vw, 20px); color:#fff;
}
.sv2-card h3::after{
  content:""; display:block; inline-size:56px; block-size:2px;
  background: rgba(255,255,255,.6); margin-block-start:.5rem;
}
.sv2-card p{
  margin:0; line-height:1.55; font-family:'Montserrat',sans-serif;
  font-size: clamp(12px, 1.6vw, 14px); color: rgba(255,255,255,.92);
  max-width: 36ch;
}

/* ---- Two-up & hero keep your current look (optional soft inner glow) ---- */
.scene{ border-radius:28px; overflow:hidden;
  box-shadow: 0 18px 36px rgba(0,0,0,.12);
}
.scene::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.50), inset 0 0 28px rgba(255,255,255,.18);
  mix-blend-mode: screen; opacity:.9;
}


/* Responsive */
@media (max-width: 900px){
  .sv2-stage{ grid-template-columns: 1fr; }
  .sv2-outline{ position: static; }
  .scene.hero{ min-height: clamp(320px, 60vh, 680px); }
  .full-span{ grid-column: 1; }
}







/* ===== SVSU WORK – SECTION 3 ===== */
/* Brand tokens for this section */
:root{
  --svsu-red: #a6192e;
  --svsu-frost: #eef1f3;    /* slightly darker than seg2’s ice */
}

/* Full-bleed section with a red top band and a darker frost base.
   The band is part of the background, so no extra markup is needed. */
.svsu-career{
  --band-h: clamp(36px, 4.5vw, 56px);
  background:
    linear-gradient(var(--svsu-red), var(--svsu-red)) 0 0 / 100% var(--band-h) no-repeat,
    var(--svsu-frost);
  padding: calc(var(--band-h) + clamp(22px,4vw,32px)) 0 clamp(22px,4vw,36px);
}

/* Inner wrapper (width + subtle lift so it feels “separate”) */
.svsu-career-inner{
  width:min(1200px,92vw);
  margin:0 auto;
  display:grid;
  gap: clamp(18px,4vw,28px);
  background: rgba(255,255,255,0.65);                     /* slight frost overlay */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: 0 18px 36px rgba(0,0,0,.10);                /* soft separation */
  padding: clamp(18px,3vw,24px);
}

/* Header — same grid as before, but INDENTED toward center to read as a subcategory */
.cs-head{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  align-items:start;
  gap: clamp(16px,3vw,24px);
  padding-left: clamp(8px,3vw,28px);     /* <-- extra inward indent */
  padding-right: clamp(8px,3vw,28px);
}

.cs-head { max-width: 980px; }
.cs-desc { max-width: 68ch; }

.cs-head-left{ display:grid; gap:6px; }
.cs-rule{ width:100%; height:2px; background: var(--accent-2); display:block; }

.cs-head h2{ letter-spacing:.01em; line-height:1.1; }
.cs-sub{ font-weight:600; }
.cs-item h3{ letter-spacing:.005em; }


.cs-head h2 {
  margin: 6px 0 0;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(26px, 6.2vw, 48px); /* slightly larger */
  color: #a6192e; /* SVSU red */
}

/* Keep subtitle & line blue */
.cs-rule {
  width: 100%;
  height: 2px;
  background: #4a5da2; /* blue accent */
  display: block;
}
.cs-sub {
  margin: 2px 0 0;
  color: #4a5da2;
  font-style: italic;
  font-size: clamp(14px, 2.4vw, 18px);
}
.cs-desc{
  margin:8px 0 0;
  color:#333;
}

.cs-dark{
  background: linear-gradient(165deg, #0b2e47 0%, #01426a 68%, #1b6a96 100%);
  color:#fff;
}
.cs-dark .cs-bullet{ background:#fff; box-shadow:none; }

.cs-logo{
  margin:0;
  background-image: url("images/CareerServicesLogo-03.png");
  background-size: contain;          /* key: scale to fit */
  background-repeat: no-repeat;      /* prevent tiling */
  background-position: center;       /* center it */
  background-color: #fff;            /* ensure contrast */
  min-height: clamp(120px, 18vw, 220px);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
  border-radius: 12px;
}


/* Accordion base */
.cs-accordion{ display:grid; gap: clamp(14px,2.4vw,18px); }
.cs-item{
  border:1px solid rgba(0,0,0,.12);
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
  border-radius: 14px;                     /* unify with rounded card language */
  overflow: clip;
}
.cs-item > summary{ position: relative; }
.cs-item[open] > summary::before{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background: linear-gradient(90deg, #C8102E 0 10%, #01426a 10% 100%);
  opacity:.9;
}
.tile { transition: transform .25s ease, box-shadow .25s ease; }
.tile:hover{ transform: translateY(-2px); box-shadow: 0 16px 28px rgba(0,0,0,.14); }
@media (prefers-reduced-motion: reduce){
  .tile, .tile:hover{ transition:none; transform:none; }
}


/* summary row */
.cs-item > summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:12px;
  padding: clamp(14px,2.6vw,18px);
}
.cs-item > summary::-webkit-details-marker{ display:none; }

/* left bullet */
.cs-bullet{
  width:14px; height:14px; border-radius:50%;
  background:#e9e9e9; box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
}

/* heading + right caret */
.cs-item h3{
  margin:0; font-weight:900; letter-spacing:.01em; line-height:1.15;
  font-size: clamp(16px,2.6vw,20px);     /* slightly smaller than project section */
}
.cs-item > summary::after{
  content:"▸"; font-size:1.1em; opacity:.8; transform: translateY(1px);
  transition: transform .25s ease;
}
.cs-item[open] > summary::after{ transform: rotate(90deg); }

/* bodies */
.cs-body{ padding: clamp(14px,2.6vw,20px); }

/* ===== Accordion colors (homepage palette) ===== */
.cs-light {
  background: #ece7e2; /* light warm beige */
  color: #000;
}
.cs-mid {
  background: #dfdad4; /* light grey-beige */
  color: #000;
}
.cs-dark {
  background: var(--ink-2); /* purple */
  color: #fff;
}

/* Bullet contrast */
.cs-light .cs-bullet {
  background: #d1ccc5;
}
.cs-mid .cs-bullet {
  background: #c8c3bc;
}
.cs-dark .cs-bullet {
  background: #fff;
}


/* “note” on dark row (top right) */
.cs-note{ justify-self:end; opacity:.85; font-size:.78rem; }

/* grids + tiles */
.cs-grid.two{
  display:grid; grid-template-columns:1fr 1fr; gap: clamp(12px,2vw,16px);
}
.tile{
  margin:0; background:#c8c8c8; border:1px solid rgba(0,0,0,.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  aspect-ratio: 16 / 10; overflow:hidden; border-radius: 10px;
}
.tile.tall{ aspect-ratio:auto; min-height: clamp(260px,40vw,520px); }
.tile img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Focus/hover polish for a11y */
.cs-item > summary:focus-visible{ outline: 2px solid var(--accent-2); outline-offset: 3px; }
.cs-item > summary:hover{ background: rgba(0,0,0,.04); }

/* responsive */
@media (max-width: 860px){
  .cs-head{ grid-template-columns:1fr; padding-left: clamp(12px,4vw,28px); }
  .cs-grid.two{ grid-template-columns:1fr; }
}

/* =========================
   SVSU page — ≤720px
   ========================= */
@media (max-width: 720px){

  /* --- Segment 1 (hero) --- */
  .svsu-hero-inner{ gap: 14px; padding-bottom: 14px; }
  .svsu-lockup{ border-radius: 22px; padding: 16px 18px; }
  .svsu-hero-figure{ border-radius: 22px; aspect-ratio: 16/10; }

  /* --- Segment 1 project block (panel + mock) --- */
  .svsu-proj-grid{
    grid-template-columns: 1fr;                 /* stack */
    gap: 14px;
    padding-inline: clamp(10px, 4vw, 18px);
  }
  .svsu-panel{ border-radius: 18px; }
  .svsu-panel-inner{
    text-align: left;                            /* easier to read on phone */
  }
  .svsu-panel-inner .svsu-copy{ max-width: 48ch; margin-left: 0; }

  .svsu-mock{
    position: relative;                          /* for ::before ring */
    min-height: clamp(240px, 56vw, 420px);       /* stop the “huge” mock */
    border-radius: 18px;
  }

  /* --- Segment 2 (sticky outline + scenes) --- */
  .sv2-stage{ grid-template-columns: 1fr; }      /* already at ≤900; safe re-assert */
  .sv2-outline{
    position: static; top: auto;
    border-radius: 18px;
    padding: clamp(12px, 3.6vw, 16px);
    margin-bottom: clamp(8px, 3vw, 12px);
  }

  .scene.hero{ min-height: clamp(280px, 52vh, 520px); border-radius: 20px; }

  /* two-up becomes single column */
  .scene-grid.two-up{
    grid-template-columns: 1fr;
    gap: 1px;
  }
  .scene-grid.two-up img{ aspect-ratio: 16/10; object-fit: cover; }

  /* tall-left stacks: image first, then card */
  .scene-grid.tall-left{
    grid-template-columns: 1fr;
    min-height: unset;
  }
  .scene-grid.tall-left .sv2-card{
    border-radius: 0;                             /* let outer scene supply rounding */
    padding: clamp(14px, 4vw, 18px);
  }

  /* four-up collage: enforce equal heights so none look “tiny” */
  .scene-grid.four{
    grid-template-columns: 1fr 1fr;
    gap: 1px;
  }
  .scene-grid.four img{
    aspect-ratio: 4 / 3;                          /* uniform boxes */
    object-fit: cover;
    display: block;
  }

  /* --- Segment 3 (Career Services) --- */
  .svsu-career-inner{
    padding: clamp(14px, 3.6vw, 18px);
    border-radius: 14px;
  }
  .cs-head{
    grid-template-columns: 1fr;                   /* single column */
    gap: 12px;
    padding-inline: clamp(8px, 4vw, 20px);
  }
  .cs-logo{ min-height: clamp(100px, 24vw, 160px); }
}

/* Phones: tighten a bit more */
@media (max-width: 480px){
  .scene-grid.four{ grid-template-columns: 1fr; } /* 2x2 → single column */
  .svsu-mock{ min-height: clamp(220px, 54vw, 360px); }
}
















/* ===== Other Projects – Segment 1 (consistent hero) ===== */
.op-hero{
  background: var(--paper);                 /* full-bleed bg */
  color:#111;
  padding: clamp(28px, 5vw, 40px) 0 0;      /* same top rhythm as others */
}

.op-hero-inner{
  width: min(1200px, 92vw);                 /* shared content width */
  margin: 0 auto;
  text-align: center;
  padding-bottom: clamp(14px, 3vw, 24px);   /* bottom breathing room */
  display: grid; gap: clamp(8px, 2vw, 14px);
}

.op-title {
  margin: 0;
  font-weight: 900; /* same heavy weight as other pages */
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-size: clamp(34px, 7vw, 64px); /* matches previous hero font size */
  color: var(--ink); /* uses same text color variable as other hero titles */
}


.op-underline{
  display: block;
  height: 2px;
  width: min(760px, 86%);                   /* mirrors the head rule width */
  margin: 0 auto;
  background: var(--accent-2);
  opacity: .95;
}









/* ===== Full-width section background (slightly lighter than ink-2) ===== */
.op-accordion-section{
  --ink-2: #2a2e33;                /* your existing dark band, for reference */
  --ink-1p: #31363c;               /* slightly lighter than ink-2 */
  background: var(--ink-1p);       /* full-bleed bg */
  padding: clamp(22px, 5vw, 36px) 0;
}

/* Inner width constraint */
.op-accordion{
  width:min(1200px, 92vw);
  margin: 0 auto;
  display:grid;
  gap: clamp(10px, 2vw, 14px);
}

/* ===== Item base ===== */
.op-item{
  background:#d7d7d9;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.op-item + .op-item{ margin-top: 8px; }

/* Remove default marker */
.op-summary::-webkit-details-marker{ display:none; }

/* ===== Summary row (closed view) ===== */
.op-summary{
  list-style:none;
  display:grid;
  grid-template-columns: 1fr min(420px, 40%);
  align-items:center;
  gap: clamp(10px, 2.4vw, 18px);
  padding: clamp(14px, 2.6vw, 20px);
  cursor:pointer;
}

.op-left{ display:grid; grid-template-columns: 1fr; }
.op-text{ display:grid; gap:6px; }

.op-title{
  margin:0; font-weight:900; letter-spacing:.02em;
  font-size: clamp(18px, 3.8vw, 28px);
}
.op-sub{
  margin: -2px 0 0 0;
  color: var(--accent-2);
  letter-spacing:.22em; font-weight:800;
  font-size: clamp(12px, 1.8vw, 13px);
}

/* Small preview thumb in summary */
.op-thumb{
  margin:0;
  background:#2b2e33;
  overflow:hidden;
  border-radius: 6px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 12px rgba(0,0,0,.10);
  height: clamp(120px, 22vw, 180px);
}
.op-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Hide “extra” summary decorations you had */
.op-summary::after,
.op-thumb::before,
.op-thumb::after{ display:none !important; }

/* ===== Open content ===== */
.op-content{
  border-top:1px solid rgba(0,0,0,.08);
  background: #efefef;
  padding: clamp(14px, 2.8vw, 20px);
  display:grid; gap: clamp(12px, 2vw, 16px);
}

/* Only show description + gallery when OPEN */
.op-item:not([open]) .op-content{ display:none; }

/* ===== CSS-only viewer ===== */
.op-viewer{
  display:grid;
  gap: clamp(10px, 2vw, 14px);
}

/* radios are the state engine; hide them */
.op-viewer input[type="radio"]{ position:absolute; inset:auto; opacity:0; pointer-events:none; }

/* main image (bigger than summary thumb when open) */
.op-main{
  margin:0;
  background:#000;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
  border-radius: 12px;
  aspect-ratio: 16 / 9;
  width: 100%;
  min-height: 320px;                        /* ensures it doesn't get too short */
  position: relative;
  overflow:hidden;
}

/* stack all images; reveal selected */
.op-main img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition: opacity .25s ease;
}

/* Stack all media; show only the selected one */
.op-main > *{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}

/* Radios reveal the corresponding media */
#cs-1:checked ~ .op-main .img-1 { opacity:1; pointer-events:auto; }
#cs-2:checked ~ .op-main .vid-2 { opacity:1; pointer-events:auto; }
#cs-3:checked ~ .op-main .vid-3 { opacity:1; pointer-events:auto; }
#cs-4:checked ~ .op-main .vid-4 { opacity:1; pointer-events:auto; }
#cs-5:checked ~ .op-main .vid-5 { opacity:1; pointer-events:auto; }



/* thumb row */
.op-thumbs{
  display:flex; gap: clamp(8px, 1.6vw, 12px);
}
.op-thumbs .mini{
  display:block;
  width: clamp(62px, 14vw, 92px);
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.12);
  box-shadow: 0 4px 10px rgba(0,0,0,.10);
  cursor:pointer;
}

/* make sure minis never get faded out by other rules */
.op-thumbs .mini img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity: 1 !important;   /* <- key line */
}

.op-main img { opacity:0; transition:opacity .25s ease; }


/* put this after your existing .op-viewer input rule */
.op-viewer input[type="radio"]{
  position: fixed;     /* detach from scrolled containers */
  top: -100vh;         /* well above the viewport */
  left: -100vw;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.op-viewer input[type="radio"]:focus { outline: none; } /* avoid stray focus ring */


/* Map the 1st radio to .img-1, 2nd to .img-2, etc. */
.op-viewer input[type="radio"]:nth-of-type(1):checked ~ .op-main .img-1 { opacity: 1; }
.op-viewer input[type="radio"]:nth-of-type(2):checked ~ .op-main .img-2 { opacity: 1; }
.op-viewer input[type="radio"]:nth-of-type(3):checked ~ .op-main .img-3 { opacity: 1; }
.op-viewer input[type="radio"]:nth-of-type(4):checked ~ .op-main .img-4 { opacity: 1; }
.op-viewer input[type="radio"]:nth-of-type(5):checked ~ .op-main .img-5 { opacity: 1; }
.op-viewer input[type="radio"]:nth-of-type(6):checked ~ .op-main .img-6 { opacity: 1; }
.op-viewer input[type="radio"]:nth-of-type(7):checked ~ .op-main .img-7 { opacity: 1; }
.op-viewer input[type="radio"]:nth-of-type(8):checked ~ .op-main .img-8 { opacity: 1; }

/* Selected ring on the matching mini thumb */
.op-viewer input[type="radio"]:nth-of-type(1):checked ~ .op-thumbs .mini:nth-of-type(1),
.op-viewer input[type="radio"]:nth-of-type(2):checked ~ .op-thumbs .mini:nth-of-type(2),
.op-viewer input[type="radio"]:nth-of-type(3):checked ~ .op-thumbs .mini:nth-of-type(3),
.op-viewer input[type="radio"]:nth-of-type(4):checked ~ .op-thumbs .mini:nth-of-type(4),
.op-viewer input[type="radio"]:nth-of-type(5):checked ~ .op-thumbs .mini:nth-of-type(5),
.op-viewer input[type="radio"]:nth-of-type(6):checked ~ .op-thumbs .mini:nth-of-type(6),
.op-viewer input[type="radio"]:nth-of-type(7):checked ~ .op-thumbs .mini:nth-of-type(7),
.op-viewer input[type="radio"]:nth-of-type(8):checked ~ .op-thumbs .mini:nth-of-type(8){
  outline: 3px solid var(--accent-2);
  outline-offset: 2px;
  border-radius: 8px;
}

/* --- Other Projects viewer: show everything without cropping --- */
.op-main{ background:#000; }
.op-main > *{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: contain !important;   /* key: letterbox instead of crop */
  object-position: center center;   /* center tall images/videos */
  opacity:0; pointer-events:none; transition: opacity .35s ease;
}
/* keep your selection rules — they’ll just reveal the contained media now */
/* Softer cards + subtle hover on summary rows */
.op-item{
  border-radius: 14px;
  overflow: clip;
  background:#e5e6e8; /* slightly lighter for contrast on dark section */
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.08);
}
.op-item > .op-summary:hover{ background: rgba(255,255,255,.06); }

/* Clear “open” indicator */
.op-item[open] > .op-summary{
  box-shadow: inset 0 -3px 0 0 var(--accent-2);
}

/* Main title in hero stays big; item titles remain compact */
.op-hero .op-title{
  margin:0; font-weight:900; letter-spacing:-0.01em; line-height:1.1;
  font-size: clamp(34px, 7vw, 64px); color: var(--ink);
}
.op-summary .op-title{
  margin:0; font-weight:900; letter-spacing:.02em;
  font-size: clamp(18px, 3.8vw, 28px);
}

/* Slightly stronger selected ring on mini thumbs */
.op-thumbs .mini{ transition: transform .2s ease, box-shadow .2s ease; }
.op-thumbs .mini:hover{ transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.12); }


/* Extra text */
.op-more{ margin:0; color:#222; }

/* ===== Closed-state reductions (show only title, subtitle, small thumb) ===== */
.op-item:not([open]) .op-blurb,
.op-item:not([open]) .op-line-wrap{
  display:none;
}


.op-thumbs .mini:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.12); }


/* ===== Responsive ===== */
@media (max-width: 880px){
  .op-summary{ grid-template-columns: 1fr; }
  .op-thumb{ height: clamp(140px, 40vw, 200px); }
}
/* ============================= */
/* Other Projects – Responsive   */
/* ============================= */

/* Tablet and down */
@media (max-width: 880px){

  /* keep the component from ever exceeding the viewport */
  .op-accordion-section,
  .op-accordion,
  .op-item,
  .op-content,
  .op-main,
  .op-thumbs { max-width: 100%; overflow-x: clip; }

  .op-accordion-section{
    padding: clamp(16px, 4vw, 24px) 0;
  }

  /* a touch more breathing room side-to-side */
  .op-accordion{
    width: min(760px, 94vw);
  }

  /* summary stacks; tighter padding */
  .op-summary{
    grid-template-columns: 1fr;
    padding: clamp(12px, 2.4vw, 18px);
  }

  /* larger, full-width preview image in the summary */
  .op-thumb{
    height: clamp(160px, 44vw, 220px);
    border-radius: 10px;
  }

  .op-item{ border-radius: 12px; box-shadow: 0 8px 18px rgba(0,0,0,.08); }
  .op-content{ padding: clamp(12px, 2.4vw, 18px); }

  /* slightly taller stage so videos/images feel roomy */
  .op-main{
    aspect-ratio: 16 / 10;
    min-height: 240px;
    border-radius: 10px;
  }

  /* let lots of thumbs wrap to a second row on tablet */
  .op-thumbs{
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 2.4vw, 12px);
  }
  .op-thumbs .mini{
    width: clamp(64px, 18vw, 92px);
  }

  /* scale text a hair for tablet */
  .op-summary .op-title{ font-size: clamp(20px, 4.6vw, 28px); }
  .op-sub{ font-size: clamp(12px, 2.2vw, 13px); letter-spacing: .18em; }
}

/* Phone */
@media (max-width: 560px){

  .op-accordion{ width: min(520px, 96vw); }

  /* tighter radii and shadows for small cards */
  .op-item{ border-radius: 10px; box-shadow: 0 6px 14px rgba(0,0,0,.08); }

  .op-thumb{ height: clamp(140px, 56vw, 220px); }

  /* stage is a bit shorter; still letterboxed (contain) by your base rule */
  .op-main{
    aspect-ratio: 16 / 9;
    min-height: 200px;
  }

  /* switch thumbs to a horizontal scroller on phones */
  .op-thumbs{
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .op-thumbs .mini{
    flex: 0 0 clamp(64px, 28vw, 92px);
    scroll-snap-align: start;
  }

  /* body copy a touch smaller for long blurbs */
  .op-more{ font-size: .95rem; }
}