/* Graba Music — STUDIO page (grabamusic.com)
   Extra styles on top of css/home.css (palette/font/header/hero/footer condivisi).
   Sezioni: services / adr spotlight / equipment / rooms gallery / rates / portfolio / booking cta.
   Layout variato, stesso container 1320px + griglie a 4 colonne fisse (auto-fill 270-300px,
   pin a 4 col da 1100px, come .divisions-grid/.labels-grid in home.css) delle altre pagine.

   ACCENTO: pagina Studio distinta dal resto del sito (home/gruppo = teal; etichette = colori
   propri via label.css) con un ROSSO "recording / on-air", stesso pattern --accent di label.css.
   --accent-* qui SOVRASCRIVE, solo per questa pagina, ogni uso di var(--teal) ereditato da
   home.css (header/bottoni/lang-toggle/hero/sec-head condivisi) ridichiarando quei selettori
   con var(--accent) — studio.css è caricato dopo home.css quindi vince a parita' di specificita'.
   Il fondo scuro premium della famiglia Graba resta invariato: cambia solo l'accento. */
:root{
  --accent:#E4483B;
  --accent-2:#f0796c;
  --accent-dim:rgba(228,72,59,.16);
}

/* Hero leggermente più basso di quello home (meno testo sopra) */
.st-hero{min-height:88vh}
/* Titolo hero in tedesco: "VERÖFFENTLICHUNG" (16 caratteri, parola unica non spezzabile a
   centro riga senza trattino) e' molto piu' lungo di "LANZAMIENTO"/"RELEASE"/"USCITA" nelle
   altre 3 lingue — col clamp(3rem,10vw,7.4rem) ereditato da home.css usciva dal contenitore
   920px di .hero-inner anche scalando (bug riscontrato in QA screenshot: la parola tagliata
   a meta' andava a capo in modo illeggibile). Misurato che a 920px di container la parola
   sta comoda fino a ~64px di font-size (608px a 55px, 665px a 60px, contro 920px disponibili);
   qui il tetto scende a 4rem (64px) contro i 7.4rem delle altre lingue. Fix scoped SOLO a
   html.lang-de + SOLO questa pagina (le altre 5 pagine hanno titoli fissi col nome del brand,
   mai variabili per lingua, quindi non a rischio) + overflow-wrap come rete di sicurezza per
   qualunque parola composta futura ancora piu' lunga. */
html.lang-de .st-hero .hero-title{
  font-size:clamp(2rem,5.4vw,4rem);
  overflow-wrap:break-word;
}
/* .hero-title span (regola generica di home.css, specificita' 0-1-1: .hero-title + span) colora
   GIA' tutto il testo del titolo (anche i wrapper data-es/data-en) con un UNICO gradiente — qui
   invece il titolo e' a 2 righe con colori DIVERSI: riga 1 = teal brand (--teal, #00B8A8, stesso
   di home.css), riga 2 = rosso di studio (--accent). Si annulla il gradiente generico sul wrapper
   data-es/... (altrimenti vince per ultimo in cascata e ricolora tutto), poi si ridichiara il
   gradiente separatamente su .hero-l1 (teal) e .hero-l2 (rosso): qualificati come
   ".hero-title .hero-l1/.hero-l2" (specificita' 0-2-1, quindi superiore a ".hero-title span")
   cosi' da vincere davvero sul reset qui sopra invece di perdere per parita' di specificita'
   (bug riscontrato: con solo ".hero-l1"/".hero-l2" — specificita' 0-1-0 — il reset generico
   vinceva comunque e il titolo restava tutto bianco). */
.hero-title span{
  background:none;-webkit-background-clip:initial;background-clip:initial;color:inherit;
}
.hero-title .hero-l1{
  background:linear-gradient(92deg,var(--teal) 0%,#5be8db 55%,var(--teal) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-title .hero-l2{
  background:linear-gradient(92deg,var(--accent) 0%,var(--accent-2) 55%,var(--accent) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ===== Overrides selettori condivisi di home.css (header/bottoni/hero/sec-head) =====
   Stessi elementi/markup, solo l'accento cambia da teal a rosso su questa pagina. */
::selection{background:var(--accent);color:var(--black)}
.top-brand-tag{color:var(--accent)}
.top-nav a:hover{color:var(--accent)}
.lang-toggle button.active{background:var(--accent);color:var(--black)}
html.lang-en .lang-toggle button[data-lang="en"]{background:var(--accent);color:var(--black)}
html.lang-de .lang-toggle button[data-lang="de"]{background:var(--accent);color:var(--black)}
html.lang-it .lang-toggle button[data-lang="it"]{background:var(--accent);color:var(--black)}
.hero-bg{
  background:
    radial-gradient(ellipse 60% 50% at 50% 12%, rgba(228,72,59,.22), transparent 60%),
    radial-gradient(ellipse 80% 60% at 15% 88%, rgba(228,72,59,.10), transparent 55%),
    radial-gradient(ellipse 70% 55% at 90% 85%, rgba(228,72,59,.08), transparent 55%),
    linear-gradient(180deg,#000 0%,#050807 55%,#000 100%);
}
.btn-primary{background:var(--accent);color:var(--black)}
.btn-primary:hover{box-shadow:0 0 34px rgba(228,72,59,.5);transform:translateY(-2px)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.hero-scroll span{background:linear-gradient(180deg,var(--accent),transparent)}
.sec-eyebrow{color:var(--accent)}
.sec-head h2::after{background:var(--accent)}

/* ===== SERVICES — grid 4 card verticali, ADR primo posto e in evidenza ===== */
.st-services{padding:12vh var(--page-pad) 10vh;max-width:var(--page-max);margin:0 auto}
.st-services .sec-head{max-width:660px;margin:0 0 6vh}
.st-services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,300px));gap:26px;justify-content:center}
@media (min-width:1100px){
  .st-services-grid{grid-template-columns:repeat(4,minmax(0,300px))}
}
.st-scard{
  position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 26px 30px;transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .32s ease,box-shadow .32s ease;
}
.st-scard::before{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.st-scard:hover{transform:translateY(-8px);border-color:rgba(228,72,59,.45);box-shadow:0 22px 46px rgba(0,0,0,.55),0 0 0 1px rgba(228,72,59,.18)}
.st-scard:hover::before{transform:scaleX(1)}
.st-scard-num{margin:0 0 20px;font-size:.7rem;font-weight:800;letter-spacing:.16em;color:var(--grey);opacity:.7}
.st-scard h3{margin:0;font-size:1.28rem;font-weight:900;letter-spacing:-.01em;color:var(--white)}
.st-scard p{margin:12px 0 0;color:var(--grey);font-size:.9rem;line-height:1.6}
/* ADR — card di punta: bordo/fondo rosso (var(--accent)) + tag, stesso trattamento di .st-rcard-feat */
.st-scard-feat{
  background:linear-gradient(165deg,rgba(228,72,59,.14),var(--panel) 60%);
  border-color:rgba(228,72,59,.5);
}
.st-scard-tag{
  margin:0 0 14px;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);
}

/* ===== ADR SPOTLIGHT — foto reale + testo, split orizzontale (varia il ritmo dopo la griglia) ===== */
.st-adr{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink)}
.st-adr-inner{
  max-width:var(--page-max);margin:0 auto;padding:11vh var(--page-pad);
  display:grid;grid-template-columns:.9fr 1.1fr;gap:6vw;align-items:center;
}
.st-adr-media{
  position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
}
.st-adr-media img{width:100%;height:100%;object-fit:cover;display:block}
.st-adr-eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.st-adr-text h2{margin:0;font-size:clamp(2rem,4vw,2.9rem);font-weight:900;letter-spacing:-.01em;color:var(--white);line-height:1.12}
.st-adr-lead{margin:20px 0 0;font-size:1.02rem;font-weight:600;color:var(--white);opacity:.9;line-height:1.55;max-width:520px}
.st-adr-sub{margin:12px 0 0;color:var(--grey);font-size:.9rem;line-height:1.6;max-width:460px}

/* ===== EQUIPMENT — intro split orizzontale con foto regia reale + griglia card sotto ===== */
.st-equip{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.st-equip-inner{
  max-width:var(--page-max);margin:0 auto;padding:12vh var(--page-pad) 6vh;
  display:grid;grid-template-columns:1.2fr .8fr;gap:6vw;align-items:center;
}
.st-equip-eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.st-equip-text h2{margin:0;font-size:clamp(2rem,4vw,2.9rem);font-weight:900;letter-spacing:-.01em;color:var(--white);line-height:1.12}
.st-equip-lead{margin:20px 0 0;font-size:1.02rem;font-weight:600;color:var(--white);opacity:.9;line-height:1.55;max-width:520px}
.st-equip-sub{margin:12px 0 0;color:var(--grey);font-size:.9rem;line-height:1.6;max-width:460px}
.st-equip-visual{
  position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
}
.st-equip-visual img{width:100%;height:100%;object-fit:cover;display:block}

.st-equip-grid{
  max-width:var(--page-max);margin:0 auto;padding:2vh var(--page-pad) 12vh;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,300px));gap:22px;
  justify-content:center;
}
@media (min-width:1100px){
  .st-equip-grid{grid-template-columns:repeat(4,minmax(0,300px))}
}
.st-ecard{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px 22px;transition:border-color .3s ease}
.st-ecard:hover{border-color:rgba(228,72,59,.35)}
.st-ecard h4{margin:0 0 14px;font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.st-ecard ul{margin:0;padding:0;list-style:none}
.st-ecard li{
  margin:0 0 9px;padding-left:16px;position:relative;color:var(--white);opacity:.88;font-size:.86rem;line-height:1.5;
}
.st-ecard li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.7}
.st-ecard li:last-child{margin-bottom:0}

/* ===== ROOMS — gallery foto reali (sala voci / regia / sesion / atmos), griglia 4 col ===== */
.st-rooms{padding:12vh var(--page-pad) 11vh;max-width:var(--page-max);margin:0 auto}
.st-rooms .sec-head{max-width:660px;margin:0 0 6vh}
.st-rooms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,300px));gap:22px;justify-content:center}
@media (min-width:1100px){
  .st-rooms-grid{grid-template-columns:repeat(4,minmax(0,300px))}
}
.st-rphoto{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);aspect-ratio:3/4;background:var(--panel)}
.st-rphoto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.st-rphoto:hover img{transform:scale(1.05)}
.st-rphoto figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  background:linear-gradient(0deg,rgba(0,0,0,.82),transparent);
  color:var(--white);font-size:.78rem;font-weight:700;letter-spacing:.02em;
}

/* ===== RATES — card orizzontali stile pricing, ADR in evidenza (prima e in tag) ===== */
.st-rates{padding:13vh var(--page-pad) 10vh;max-width:var(--page-max);margin:0 auto;border-top:1px solid var(--line)}
.st-rates .sec-head{max-width:660px;margin:0 0 6vh}
.st-rates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,300px));gap:22px;justify-content:center}
@media (min-width:1100px){
  .st-rates-grid{grid-template-columns:repeat(4,minmax(0,300px))}
}
.st-rcard{
  position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px 26px;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s ease;
}
.st-rcard:hover{transform:translateY(-6px);border-color:rgba(228,72,59,.4)}
.st-rcard-feat{
  background:linear-gradient(165deg,rgba(228,72,59,.14),var(--panel) 60%);
  border-color:rgba(228,72,59,.5);
}
.st-rcard-tag{
  position:absolute;top:-11px;left:24px;background:var(--accent);color:var(--black);
  font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:99px;
}
.st-rcard-label{margin:0;font-size:.82rem;font-weight:700;letter-spacing:.03em;color:var(--grey);text-transform:uppercase}
.st-rcard-price{margin:14px 0 0;font-size:clamp(1.7rem,3vw,2.2rem);font-weight:900;color:var(--white);letter-spacing:-.01em}
.st-rcard-price span{font-size:.9rem;font-weight:600;color:var(--grey);margin-left:4px}
.st-rcard-note{margin:12px 0 0;color:var(--grey);font-size:.82rem;line-height:1.5}
.st-rates-fineprint{margin:5vh 0 0;color:var(--grey);font-size:.78rem;opacity:.7;font-style:italic}

/* ===== PORTFOLIO — griglia 8 card, thumbnail YouTube reale come fondo card =====
   Ogni .st-fcard porta la thumbnail via custom property inline --st-fcard-thumb (impostata
   nell'HTML, es. style="--st-fcard-thumb:url(https://i.ytimg.com/vi/<ID>/hqdefault.jpg)")
   cosi' lo stesso CSS regge qualunque video senza dover aggiungere una regola per card. */
.st-folio{padding:11vh var(--page-pad) 12vh;max-width:var(--page-max);margin:0 auto;border-top:1px solid var(--line)}
.st-folio .sec-head{max-width:660px;margin:0 0 6vh}
.st-folio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,300px));gap:22px;justify-content:center}
@media (min-width:1100px){
  .st-folio-grid{grid-template-columns:repeat(4,minmax(0,300px))}
}
.st-fcard{
  position:relative;overflow:hidden;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 24px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s ease;
}
/* thumbnail YouTube come fondo, con overlay a gradiente scuro per leggibilita' del testo sopra.
   Il gradiente e' quasi OPACO (.9+) gia' dal 20% in giu', su tutta l'area dove vive il blocco
   di testo, a prescindere da quanto sia chiara la thumbnail sotto (bug riscontrato due volte:
   con stop piu' permissivi le thumbnail chiare/pastello — es. ANNA, J Black — rendevano il
   testo arancione/bianco illeggibile: qui si e' scelto di sacrificare un po' di visibilita'
   della foto pur di garantere SEMPRE il testo leggibile); text-shadow come rete di sicurezza
   aggiuntiva sul testo stesso. */
.st-fcard::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--st-fcard-thumb),linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.82) 20%,rgba(0,0,0,.94) 40%,rgba(0,0,0,.97) 100%);
  background-size:cover,cover;background-position:center,center;
  transition:transform .5s ease;
}
.st-fcard:hover::before{transform:scale(1.06)}
.st-fcard>*{position:relative;z-index:1}
.st-fcard:hover{transform:translateY(-6px);border-color:rgba(228,72,59,.4)}
.st-fcard-type{margin:0;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2);text-shadow:0 1px 6px rgba(0,0,0,.8)}
.st-fcard h3{margin:8px 0 0;font-size:1.1rem;font-weight:800;color:var(--white);letter-spacing:-.005em;line-height:1.25;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.st-fcard h3 span{font-weight:500;color:#e4e8e7;font-size:.84rem}
.st-fcard p{margin:8px 0 0;color:#e4e8e7;font-size:.84rem;line-height:1.5;text-shadow:0 1px 6px rgba(0,0,0,.7)}
/* card cliccabili (tutte le 8, tutte con data-media) -> aprono il modal con il video YouTube */
.st-fcard[data-media]{cursor:pointer}
.st-fcard[data-media]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.st-fcard-play{
  margin:14px 0 0;display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);
  opacity:0;transform:translateY(4px);transition:opacity .25s ease,transform .25s ease;
}
.st-fcard-play::before{
  content:"";width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--accent-2);
}
.st-fcard[data-media]:hover .st-fcard-play,.st-fcard[data-media]:focus-visible .st-fcard-play{opacity:1;transform:translateY(0)}

/* Sonic 2 (ADR) — card di punta, primo posto, stesso trattamento "house speciality" di .st-scard-feat */
.st-fcard-feat{
  grid-column:span 1;min-height:280px;border-color:rgba(228,72,59,.55);
  box-shadow:0 0 0 1px rgba(228,72,59,.18),0 22px 46px rgba(0,0,0,.5);
}
.st-fcard-feat::before{
  background-image:var(--st-fcard-thumb),linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(228,72,59,.18) 16%,rgba(0,0,0,.86) 36%,rgba(0,0,0,.97) 100%);
}
.st-fcard-tag{
  margin:0 0 8px;font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  text-shadow:0 1px 6px rgba(0,0,0,.8);
}
.st-fcard-feat .st-fcard-type{color:var(--accent)}
.st-fcard-feat h3{font-size:1.3rem}
@media (min-width:1100px){
  /* Sonic 2 occupa 2 colonne su desktop per essere davvero in evidenza come richiesto */
  .st-fcard-feat{grid-column:span 2}
}

.st-folio-fineprint{margin:5vh 0 0;color:var(--grey);font-size:.78rem;opacity:.7;font-style:italic}

/* ===== PORTFOLIO MODAL — overlay scuro + dialog con player audio/video ===== */
.st-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:5vh 5vw;visibility:hidden;opacity:0;transition:opacity .28s ease,visibility 0s linear .28s}
.st-modal.is-open{visibility:visible;opacity:1;transition:opacity .28s ease}
.st-modal-backdrop{position:absolute;inset:0;background:rgba(4,6,6,.86);backdrop-filter:blur(6px)}
.st-modal-dialog{
  position:relative;width:100%;max-width:640px;max-height:86vh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:40px 36px 36px;transform:translateY(18px) scale(.98);transition:transform .3s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px rgba(228,72,59,.12);
}
.st-modal.is-open .st-modal-dialog{transform:translateY(0) scale(1)}
.st-modal-close{
  position:absolute;top:16px;right:16px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:var(--panel-2);border:1px solid var(--line);border-radius:50%;color:var(--white);cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
.st-modal-close:hover,.st-modal-close:focus-visible{border-color:var(--accent);color:var(--accent)}
.st-modal-close svg{width:18px;height:18px}
.st-modal-type{margin:0;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding-right:40px}
.st-modal-title{margin:10px 0 0;font-size:1.4rem;font-weight:900;letter-spacing:-.01em;color:var(--white);padding-right:40px}
.st-modal-media{margin:26px 0 0}
.st-modal-media audio{width:100%;display:block}
.st-modal-media video{width:100%;display:block;border-radius:calc(var(--radius) - 6px);background:#000}
/* embed YouTube responsive 16:9 (aspect-ratio box: iframe assoluto dentro contenitore a padding %) */
.st-modal-yt{position:relative;width:100%;aspect-ratio:16/9;border-radius:calc(var(--radius) - 6px);overflow:hidden;background:#000}
.st-modal-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.st-modal-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:48px 20px;border:1px dashed var(--line);border-radius:calc(var(--radius) - 6px);
  color:var(--grey);text-align:center;
}
.st-modal-placeholder svg{width:30px;height:30px;color:var(--accent);opacity:.7}
.st-modal-placeholder p{margin:0;font-size:.88rem;font-weight:600}

@media (max-width:640px){
  .st-modal{padding:0}
  .st-modal-dialog{max-width:none;max-height:100vh;height:100%;border-radius:0;padding:32px 22px 28px}
}

/* blocca lo scroll della pagina sotto quando il modal e' aperto */
body.st-modal-lock{overflow:hidden}

/* ===== BOOKING CTA — full width banda finale ===== */
.st-cta{
  text-align:center;padding:14vh 6vw;
  background:radial-gradient(ellipse 70% 100% at 50% 0%,rgba(228,72,59,.14),transparent 60%),var(--ink);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.st-cta h2{margin:0;font-size:clamp(1.9rem,4vw,2.7rem);font-weight:900;color:var(--white)}
.st-cta-sub{margin:14px auto 0;max-width:520px;color:var(--grey);font-size:1rem;line-height:1.6}
.st-cta-links{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:34px}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .st-adr-inner{grid-template-columns:1fr;gap:5vh}
  .st-equip-inner{grid-template-columns:1fr;gap:5vh}
  .st-equip-visual{order:-1}
}
@media (max-width:640px){
  .st-hero{min-height:84vh}
  .st-services{padding:8vh 6vw 8vh}
  .st-services-grid{grid-template-columns:1fr;gap:16px}
  .st-adr-inner{padding:8vh 6vw}
  .st-equip-inner{padding:8vh 6vw 5vh}
  .st-equip-grid{padding:1vh 6vw 8vh;grid-template-columns:1fr;gap:16px}
  .st-rooms{padding:8vh 6vw 8vh}
  .st-rooms-grid{grid-template-columns:1fr;gap:16px}
  .st-rphoto{aspect-ratio:4/3}
  .st-rates{padding:8vh 6vw 8vh}
  .st-rates-grid{grid-template-columns:1fr;gap:16px}
  .st-rcard-feat{order:-1}
  .st-folio{padding:8vh 6vw 9vh}
  .st-folio-grid{grid-template-columns:1fr;gap:16px}
  .st-fcard-feat{grid-column:span 1;order:-1}
  .st-cta{padding:9vh 6vw}
  .st-cta-links{flex-direction:column;align-items:stretch}
}