/* ---------------------------------------------------------------
   TOKENS
   --------------------------------------------------------------- */
:root{
  --paper:      #F6F5F0;   /* page base */
  --tile:       #EBEAE2;   /* neutral image tile */
  --ink:        #191A14;   /* near-black, biased green */
  --ink-soft:   #6B6C60;   /* secondary text */
  --lime:       #C7E04A;   /* the accent — panels and tiles */
  --lime-soft:  #E6F1B8;   /* quiet tint of the same hue */
  --olive:      #4F6318;   /* deep green — buttons, arrows */
  --line:       #DCDAD0;
  --alert:      #9E3B1F;   /* error text only, never decoration */

  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;

  --r-xl: 40px;
  --r-lg: 28px;
  --r-md: 18px;
  --pill: 999px;

  --gutter: clamp(1rem, 3.5vw, 3rem);
  --max: 1600px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------
   BASE
   --------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--olive); outline-offset:4px; border-radius:6px; }

.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }

/* ---------------------------------------------------------------
   NAV
   --------------------------------------------------------------- */
.nav{
  position:fixed; inset:.75rem .75rem auto; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:.75rem 1.25rem .75rem 1.5rem;
  border-radius:var(--pill);
  transition:background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.nav.is-stuck{
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line);
}
.nav__name{ font-weight:600; letter-spacing:-.015em; text-decoration:none; font-size:1rem; }
.nav__links{ display:flex; gap:.25rem; }
.nav__links a{
  text-decoration:none; font-size:.9375rem; color:var(--ink-soft);
  padding:.4rem .85rem; border-radius:var(--pill);
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.nav__links a:hover{ color:var(--ink); background:var(--lime-soft); }

/* ---------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.75rem;
  background:var(--olive); color:#fff; text-decoration:none;
  font-weight:600; font-size:1rem; letter-spacing:-.01em;
  padding:.7rem .8rem .7rem 1.375rem; border-radius:var(--pill);
  transition:transform .3s var(--ease), background-color .3s var(--ease);
}
.btn:hover{ transform:translateY(-2px); background:#42540F; }
.btn__arrow{
  display:grid; place-items:center; width:2.125rem; height:2.125rem;
  border-radius:50%; background:rgba(255,255,255,.16);
}
.btn__arrow svg{ width:16px; height:16px; }
.btn__note{ display:block; font-size:.8125rem; color:var(--ink-soft); margin-top:.75rem; }

.dot-arrow{
  position:absolute; right:1rem; bottom:1rem; z-index:2;
  display:grid; place-items:center; width:3rem; height:3rem;
  border-radius:50%; background:var(--olive); color:#fff;
  transform:scale(.85); opacity:0;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.dot-arrow svg{ width:16px; height:16px; }

/* ---------------------------------------------------------------
   HEADER
   --------------------------------------------------------------- */
.header{
  min-height:92svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-block:9rem 3rem;
}
.header__title{
  margin:0;
  font-size:clamp(3rem, 8.6vw, 8.5rem);
  line-height:.96;
  letter-spacing:-.038em;
  font-weight:600;
  max-width:16ch;
  text-wrap:balance;
}
.header__title em{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:400;
  font-style:italic;
  letter-spacing:-.01em;
  font-size:.94em;
  white-space:nowrap;
  color:var(--olive);
}
.header__intro{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:300;
  font-size:clamp(1.125rem, 1.6vw, 1.5rem);
  line-height:1.5;
  margin:clamp(1.75rem, 3vw, 2.5rem) 0 0;
  max-width:56ch;
}
.header__status{
  display:inline-flex; align-items:center; align-self:flex-start; gap:.6rem;
  margin-bottom:clamp(1.25rem, 2.5vw, 2rem);
  background:var(--lime); border-radius:var(--pill);
  padding:.5rem 1.125rem; font-size:.9375rem; font-weight:600;
}
.header__status::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--olive);
}

.reveal{ opacity:0; transform:translateY(14px); }
.is-ready .reveal{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }
.is-ready .reveal--2{ transition-delay:.12s; }
.is-ready .reveal--3{ transition-delay:.2s; }

/* ---------------------------------------------------------------
   FEATURED
   --------------------------------------------------------------- */
.featured{ padding-bottom:clamp(3rem,6vw,5rem); }
.panel{
  background:var(--lime);
  border-radius:var(--r-xl);
  padding:clamp(1.75rem,3.5vw,3.5rem);
}
.panel__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,32ch);
  gap:1.75rem clamp(2rem,5vw,5rem);
  align-items:end;
}
.panel__split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,44%);
  gap:clamp(1.75rem,4vw,4rem);
  align-items:center;
}
.panel__copy .panel__summary{ margin:1.25rem 0 1.75rem; max-width:44ch; }
.panel__title{
  margin:0;
  font-size:clamp(1.875rem, 3.4vw, 3.25rem);
  line-height:1.03;
  letter-spacing:-.032em;
  font-weight:600;
  max-width:18ch;
  text-wrap:balance;
}
.panel__summary{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:300;
  font-size:1.0625rem;
  line-height:1.6;
  margin:0 0 1.5rem;
}
.panel__shot{ margin-bottom:clamp(1.75rem,3vw,2.75rem); }

/* ---------------------------------------------------------------
   IMAGE TILES
   --------------------------------------------------------------- */
.shot{
  position:relative;
  background:var(--tile);
  border-radius:var(--r-lg);
  overflow:hidden;
  aspect-ratio:16/10;
}
.panel__shot .shot{ aspect-ratio:16/9; background:#EEF6CE; }
.shot img{ width:100%; height:100%; object-fit:cover; }
.shot.is-empty::after{
  content:attr(data-hint);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.875rem; color:var(--ink-soft); text-align:center; padding:1rem;
}
.shot--lime{ background:var(--lime); }
.shot--soft{ background:var(--lime-soft); }

/* ---------------------------------------------------------------
   OTHER WORK
   --------------------------------------------------------------- */
.work{ padding-bottom:clamp(3.5rem,7vw,6rem); }
.work__head{
  display:flex; justify-content:space-between; align-items:baseline; gap:2rem;
  margin-bottom:clamp(1.5rem,3vw,2.25rem); padding-inline:.25rem;
}
.work__head h2{ margin:0; font-size:1.0625rem; font-weight:600; letter-spacing:-.01em; }
.work__head p{ margin:0; font-size:.9375rem; color:var(--ink-soft); }
.cards{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,1.75vw,1.5rem);
  list-style:none; margin:0; padding:0;
}
.card{
  display:flex; flex-direction:column; height:100%;
  text-decoration:none; background:#fff;
  border-radius:var(--r-xl); padding:.75rem .75rem 1.5rem;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(25,26,20,.09); }
.card:hover .dot-arrow{ transform:scale(1); opacity:1; }
.card .shot{ aspect-ratio:4/3; border-radius:var(--r-lg); }
.card__stage{
  position:relative;
  aspect-ratio:4/3; height:auto;
  border-radius:var(--r-lg);
  padding:clamp(1rem,1.6vw,1.5rem);
}
.card .shot img{ transition:transform .5s var(--ease); }
.card:hover .shot img{ transform:scale(1.03); }
.card__body{ padding:1.125rem .75rem 0; }
.card h3{
  margin:0 0 .4rem; font-size:1.1875rem; font-weight:600;
  letter-spacing:-.018em; line-height:1.25;
}
.card p{ margin:0; font-size:.9375rem; color:var(--ink-soft); }
.meta-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .75rem;
  margin-bottom:.625rem;
}
.meta-row time{ font-size:.8125rem; color:var(--ink-soft); }
.panel .meta-row time{ color:rgba(25,26,20,.62); }
.card__status{
  display:inline-block; font-size:.8125rem; color:var(--ink-soft);
  background:var(--paper); border-radius:var(--pill); padding:.2rem .7rem;
}
.card__status::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--ink-soft); margin-right:.45rem; vertical-align:middle;
}
.card--live .card__status::before{ background:var(--olive); }

/* ---------------------------------------------------------------
   ABOUT
   --------------------------------------------------------------- */
.about{ padding-bottom:clamp(3.5rem,7vw,6rem); }
.about__inner{
  background:#fff; border-radius:var(--r-xl);
  padding:clamp(1.75rem,3.5vw,3.5rem);
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
}
.about p{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:300;
  font-size:clamp(1.125rem,1.6vw,1.4375rem);
  line-height:1.55;
  margin:0 0 1.25rem;
  max-width:52ch;
}
.about p:last-child{ margin-bottom:0; }
.about__list{ margin:0; font-size:.9375rem; align-self:center; }
.about__list div{
  display:flex; justify-content:space-between; gap:1.5rem;
  padding:.75rem 0; border-bottom:1px solid var(--line);
}
.about__list div:first-child{ border-top:1px solid var(--line); }
.about__list dt{ color:var(--ink-soft); }
.about__list dd{ margin:0; text-align:right; }

/* ---------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------- */
.footer{ padding-bottom:.75rem; }
.footer__inner{
  background:var(--ink); color:var(--paper);
  border-radius:var(--r-xl);
  padding:clamp(2.25rem,5vw,4rem) clamp(1.75rem,3.5vw,3.5rem) clamp(1.5rem,2.5vw,2rem);
}
.footer__mail{
  display:inline-block; text-decoration:none;
  font-size:clamp(1.5rem,5vw,4rem); font-weight:600; letter-spacing:-.035em;
  line-height:1.05; word-break:break-word;
  transition:color .3s var(--ease);
}
.footer__mail:hover{ color:var(--lime); }
.footer__row{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem 2rem;
  margin-top:clamp(2rem,4vw,3.5rem); padding-top:1.5rem;
  border-top:1px solid rgba(246,245,240,.16);
  font-size:.9375rem; color:rgba(246,245,240,.62);
}
.footer__row a{ color:rgba(246,245,240,.62); text-decoration:none; transition:color .25s var(--ease); }
.footer__row a:hover{ color:var(--lime); }
.footer__links{ display:flex; gap:1.5rem; }
.footer :focus-visible{ outline-color:var(--lime); }

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width:1000px){
  .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cards li:first-child{ grid-column:1 / -1; }
  .cards li:first-child .shot{ aspect-ratio:16/9; }
}
@media (max-width:820px){
  :root{ --r-xl:28px; --r-lg:20px; }
  .header{ min-height:auto; padding-block:7.5rem 2.5rem; }
  .header__title{ font-size:clamp(2.5rem,10vw,4rem); max-width:none; }
  .panel__grid,
  .panel__split,
  .about__inner{ grid-template-columns:minmax(0,1fr); }
  .panel__grid{ align-items:start; }
  .panel__split .stage{ order:-1; margin-bottom:.5rem; }
  .nav__links{ gap:0; }
  .dot-arrow{ opacity:1; transform:scale(1); width:2.5rem; height:2.5rem; }
}
@media (max-width:600px){
  .cards{ grid-template-columns:minmax(0,1fr); }
  .cards li:first-child .shot{ aspect-ratio:4/3; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  .dot-arrow{ opacity:1; transform:scale(1); }
}

/* ===============================================================
   CASE STUDY
   =============================================================== */
.cs-hero{ padding-block:8.5rem clamp(2rem,4vw,3rem); }
.cs-back{
  display:inline-flex; align-items:center; gap:.5rem;
  text-decoration:none; font-size:.9375rem; color:var(--ink-soft);
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
  transition:color .25s var(--ease);
}
.cs-back:hover{ color:var(--ink); }
.cs-back svg{ width:14px; height:14px; transform:rotate(180deg); }
.cs-hero__title{
  margin:0;
  font-size:clamp(2.25rem, 5.6vw, 5rem);
  line-height:1.01;
  letter-spacing:-.035em;
  font-weight:600;
  max-width:20ch;
  text-wrap:balance;
}
.cs-hero__lede{
  font-family:var(--serif); font-optical-sizing:auto; font-weight:300;
  font-size:clamp(1.125rem,1.6vw,1.5rem); line-height:1.5;
  margin:clamp(1.25rem,2.5vw,2rem) 0 0; max-width:60ch;
}
.cs-meta{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem clamp(1.5rem,4vw,4rem);
  margin:clamp(2rem,4vw,3rem) 0 0; padding-top:1.5rem;
  border-top:1px solid var(--line);
}
.cs-meta dt{ font-size:.8125rem; color:var(--ink-soft); margin-bottom:.35rem; }
.cs-meta dd{ margin:0; font-size:1rem; font-weight:600; letter-spacing:-.01em; }

.cs-cover{ padding-bottom:clamp(2.5rem,5vw,4rem); }
.cs-cover .stage{ border-radius:var(--r-xl); }

/* layout: sticky index + content */
.cs-layout{
  max-width:1120px; margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem);
  padding-bottom:clamp(3rem,7vw,6rem);
  align-items:start;
}
.cs-index{ position:sticky; top:6rem; }
.cs-index ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.125rem; }
.cs-index a{
  display:flex; gap:.75rem; align-items:baseline;
  text-decoration:none; color:var(--ink-soft);
  font-size:.9375rem; line-height:1.35;
  padding:.55rem .875rem; border-radius:var(--r-md);
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.cs-index a span{ font-variant-numeric:tabular-nums; font-size:.8125rem; opacity:.7; }
.cs-index a:hover{ color:var(--ink); background:var(--lime-soft); }
.cs-index a.is-active{ color:var(--ink); background:var(--lime); font-weight:600; }
.cs-index a.is-active span{ opacity:1; }

.cs-body{ max-width:70ch; }
.cs-section{ padding-bottom:clamp(2.5rem,5vw,4.5rem); scroll-margin-top:6.5rem; }
.cs-section > h2{
  margin:0 0 1.25rem;
  font-size:clamp(1.625rem,2.6vw,2.375rem);
  line-height:1.1; letter-spacing:-.03em; font-weight:600;
}
.cs-subtitle{
  font-size:clamp(1.0625rem,1.3vw,1.1875rem);
  font-weight:600;
  letter-spacing:-.012em;
  line-height:1.4;
  color:var(--ink);
  margin:-.5rem 0 1.75rem;
  max-width:52ch;
}
.cs-section h3{
  margin:2.5rem 0 .875rem;
  font-size:1.25rem; line-height:1.3; letter-spacing:-.018em; font-weight:600;
}
.cs-section p{ margin:0 0 1.125rem; }
.cs-section p:last-child{ margin-bottom:0; }
.cs-section > h2 + p{ font-size:1.125rem; }

.cs-list{ margin:1rem 0 0; padding-left:1.2rem; }
.cs-list li{ margin:.4rem 0; }
.cs-list li::marker{ color:currentColor; opacity:.5; }
.cs-section h3 + p{ margin-top:.5rem; }

.pull{
  font-size:1.1875rem;
  font-weight:500;
  line-height:1.45;
  letter-spacing:-.012em;
  margin:1.75rem 0;
  padding-left:1.25rem;
  border-left:3px solid var(--lime);
  color:var(--ink);
}
.stat{
  background:var(--lime); border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.25rem); margin:2rem 0;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.75rem 1.5rem;
}
.stat b{
  font-size:clamp(2.25rem,4.5vw,3.5rem); font-weight:600;
  letter-spacing:-.035em; line-height:1;
}
.stat span{ font-size:1rem; max-width:34ch; }

.note-cards{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem; list-style:none; margin:1.75rem 0 0; padding:0;
}
.note-cards--three{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.note-cards li{
  background:#fff; border-radius:var(--r-lg);
  padding:clamp(1.125rem,2vw,1.5rem);
}
.note-cards h4{
  margin:0 0 .5rem; font-size:1rem; font-weight:600; letter-spacing:-.012em;
}
.note-cards p{ margin:0; font-size:.9375rem; color:var(--ink-soft); }

figure{ margin:2rem 0; }
figure .shot{ aspect-ratio:16/10; }
figcaption{ margin-top:.75rem; font-size:.875rem; color:var(--ink-soft); }

.solutions{ display:grid; gap:1.5rem; margin:1.75rem 0 0; padding:0; list-style:none; }
.solutions li{ background:#fff; border-radius:var(--r-xl); padding:.75rem .75rem 1.5rem; }
.solutions .shot{ aspect-ratio:16/10; }
.solutions .stage,
figure .stage{ height:clamp(320px, 34vw, 440px); border-radius:var(--r-lg); }
.solutions .solutions__body{ padding:1.25rem .75rem 0; }
.solutions h3{ margin:0 0 .5rem; font-size:1.125rem; }
.solutions p{ margin:0; font-size:.9375rem; color:var(--ink-soft); }

.cs-next{ padding-bottom:clamp(3rem,6vw,5rem); }
.cs-next__inner{
  background:var(--lime-soft); border-radius:var(--r-xl);
  padding:clamp(1.75rem,3.5vw,3rem);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem;
}
.cs-next h2{ margin:0; font-size:clamp(1.375rem,2.4vw,2rem); letter-spacing:-.028em; max-width:22ch; }

@media (max-width:1000px){
  .cs-layout{ grid-template-columns:minmax(0,1fr); gap:2rem; }
  .cs-index{ display:none; }
  .cs-body{ max-width:none; }
}
@media (max-width:760px){
  .note-cards--three{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px){
  .cs-meta{ grid-template-columns:minmax(0,1fr); gap:1rem; }
  .note-cards,
  .note-cards--three{ grid-template-columns:minmax(0,1fr); }
}

/* ===============================================================
   PASSWORD GATE
   =============================================================== */
body.is-locked{ overflow:hidden; }
body.is-locked main,
body.is-locked .footer,
body.is-locked .nav{ display:none; }

.gate{ display:none; }
body.is-locked .gate{
  display:grid; place-items:center;
  position:fixed; inset:0; z-index:100;
  background:var(--paper); padding:var(--gutter);
}
.gate__card{
  background:#fff; border-radius:var(--r-xl);
  padding:clamp(1.75rem,4vw,3rem);
  width:100%; max-width:42rem;
}
.gate__badge{
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--lime); border-radius:var(--pill);
  padding:.45rem 1rem; font-size:.875rem; font-weight:600;
  margin-bottom:1.5rem;
}
.gate__badge svg{ width:14px; height:14px; }
.gate__card h1{
  margin:0 0 .75rem; font-size:clamp(1.5rem,3vw,2rem);
  line-height:1.1; letter-spacing:-.03em; font-weight:600;
}
.gate__card p{ margin:0 0 1.75rem; color:var(--ink-soft); max-width:46ch; }
.gate__card p a{ color:var(--olive); font-weight:600; }
.gate__form{ display:flex; flex-wrap:wrap; gap:.625rem; }
.gate__form input{
  flex:1 1 14rem; min-width:0;
  font:inherit; color:var(--ink);
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--pill); padding:.7rem 1.25rem;
  transition:border-color .25s var(--ease);
}
.gate__form input::placeholder{ color:var(--ink-soft); }
.gate__form input:focus{ outline:none; border-color:var(--olive); }
.gate__form input:focus-visible{ outline:2px solid var(--olive); outline-offset:2px; }
.gate__form button{ font:inherit; border:0; cursor:pointer; }
.gate__error{
  margin:1rem 0 0; font-size:.9375rem; color:var(--alert);
}
.gate__error[hidden]{ display:none; }
.gate__back{
  display:inline-block; margin-top:2rem;
  font-size:.9375rem; color:var(--ink-soft); text-decoration:none;
}
.gate__back:hover{ color:var(--ink); }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.gate__card h1 em{
  font-family:var(--serif); font-optical-sizing:auto;
  font-weight:400; font-style:italic;
  font-size:.96em; letter-spacing:-.01em;
  color:var(--olive);
}

/* ===============================================================
   ANIMATED HERO (featured panel)
   =============================================================== */
.stage{
  background:#FF88C8;
  border-radius:var(--r-lg);
  width:100%;
  height:clamp(360px, 40vw, 540px);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1.25rem, 2.2vw, 2.25rem);
  overflow:hidden;
}

.stage--sage{ background:#838E49; }

.stage__device{
  height:100%;
  aspect-ratio:828/1672;
  border-radius:13.89% / 6.88%;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.stage__device--tall{ aspect-ratio:828/1736; border-radius:13.89% / 6.62%; }

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

@media (max-width:820px){
  .stage{ height:clamp(340px, 62vw, 460px); }
}
@media (max-width:520px){
  .stage{ height:min(70vw, 400px); padding:.875rem; }
}