/* ==================================================================
   B21 YACHTING — stylesheet
   $aviv666k · Argentina

   Design system: Flighty (see
   ~/.claude/skills/page-builder/references/style-refs/flighty/).
   The page runs a light "departure board" surface that sinks into a
   deep-indigo "control room". Two signal colours only: blue for the
   primary action, amber for the booking conversion.

   THE THREE RULES THAT HOLD THIS TOGETHER
   1. Depth comes from stacked whisper shadows (opacity .02–.04) and
      the light→dark transition. Never a single heavy shadow.
   2. Blue and amber are signals, not brand paint. They appear on
      actions only — never on text, borders or backgrounds.
   3. Every button, tag and icon is a full pill (999px). No
      exceptions, no partial rounding.

   ── CONTENTS ──────────────────────────────────────────────────────
   01  Tokens
   02  Reset and base
   03  Typography helpers
   04  Buttons
   05  Announcement bar and navigation
   06  Hero
   07  Floating cards (the signature component)
   08  Fleet
   09  Light → dark transition
   10  Services
   11  Destinations
   12  Booking
   13  Footer
   14  Motion and reveal
   15  Responsive
   ================================================================== */


/* ══ 01 · TOKENS ═══════════════════════════════════════════════════
   Change a value here and it changes everywhere. Nothing below this
   block should contain a raw hex code.                              */
:root{
  /* Colour — achromatic, plus two signal lights */
  --blue:#007bff;            /* THE primary action. One per surface. */
  --amber:#f7be00;           /* THE conversion moment. Always on dark. */
  --indigo:#0d0021;          /* dark canvas */
  --ink:#05010d;             /* deepest surface */
  --white:#ffffff;
  --black:#000000;
  --carbon:#333333;          /* body copy on light */
  --steel:#737373;           /* metadata, muted */
  --silver:#cfcfcf;          /* hairlines, body copy on dark */
  --linen:#faf8f7;           /* warm off-white surface */
  --alert:#d92d20;           /* functional only, never decorative */

  --line-light:#e6e4e3;
  --line-dark:rgba(255,255,255,.10);

  /* Type — one family, the system's own. That is the point. */
  --ui:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;

  --t-caption:12px;
  --t-sm:13px;
  --t-body:15px;
  --t-lead:17px;
  --t-h3:22px;
  --t-h2:clamp(28px,4.2vw,32px);
  --t-h1:clamp(34px,6.4vw,56px);

  --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700;

  /* Space — compact scale, base 4 */
  --s-4:4px;   --s-8:8px;   --s-12:12px; --s-16:16px;
  --s-20:20px; --s-24:24px; --s-32:32px; --s-40:40px;
  --s-48:48px; --s-64:64px; --s-80:80px;

  --page:1200px;
  --gutter:clamp(20px,5vw,40px);
  --section:clamp(56px,9vw,80px);

  /* Radius — this system has curves, unlike the luxury refs */
  --r-pill:999px;
  --r-card:16px;
  --r-float:20px;
  --r-input:12px;

  /* Shadows — six whispers, never one shout.
     Raising these opacities past .04 breaks the whole aesthetic. */
  --sh-card:
    0 0 0 1px rgba(0,0,0,.04),
    0 1px 1px .5px rgba(0,0,0,.02),
    0 3px 3px 1.5px rgba(0,0,0,.02),
    0 6px 6px -3px rgba(0,0,0,.02),
    0 12px 12px -6px rgba(0,0,0,.02),
    0 24px 24px -12px rgba(0,0,0,.02);
  --sh-nav:
    0 1px 1px .5px rgba(0,0,0,.03),
    0 3px 3px 1.5px rgba(0,0,0,.03),
    0 6px 6px -3px rgba(0,0,0,.03),
    0 12px 12px -6px rgba(0,0,0,.03),
    0 24px 24px -12px rgba(0,0,0,.03);

  /* Atmosphere — must read as light off a screen, never as a pattern */
  --glow:linear-gradient(180deg,rgb(18,0,54) 0%,rgb(37,1,96) 51%,rgb(18,0,54) 100%);

  --ease:cubic-bezier(.22,.61,.36,1);
}


/* ══ 02 · RESET AND BASE ══════════════════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background:var(--white); color:var(--black);
  font-family:var(--ui); font-size:var(--t-body); font-weight:var(--w-regular);
  line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
img,video{ display:block; max-width:100%; }
ul,ol{ list-style:none; }
::selection{ background:var(--blue); color:var(--white); }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--page); margin-inline:auto; padding-inline:var(--gutter); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

section{ padding-block:var(--section); scroll-margin-top:96px; }


/* ══ 03 · TYPOGRAPHY HELPERS ══════════════════════════════════════
   The display voice: line-height exactly 1.00 with tight negative
   tracking. That is what makes a headline read as one solid block
   of type instead of text that happened to wrap.                   */
.h1{ font-size:var(--t-h1); font-weight:var(--w-bold); line-height:1; letter-spacing:-.025em; }
.h2{ font-size:var(--t-h2); font-weight:var(--w-bold); line-height:1.1; letter-spacing:-.025em; }
.h3{ font-size:var(--t-h3); font-weight:var(--w-semibold); line-height:1.3; letter-spacing:-.02em; }
.lead{ font-size:var(--t-lead); line-height:1.5; letter-spacing:-.01em; color:var(--carbon); }
.meta{ font-size:var(--t-sm); color:var(--steel); }

.eyebrow{
  display:inline-block; font-size:var(--t-caption); font-weight:var(--w-semibold);
  letter-spacing:.1em; text-transform:uppercase; color:var(--steel);
}

/* On dark surfaces only the colour token changes — never the scale. */
.on-dark{ color:var(--white); }
.on-dark .lead{ color:var(--silver); }
.on-dark .meta{ color:var(--silver); }
.on-dark .eyebrow{ color:var(--silver); }

/* #737373 sobre #0d0021 queda en ~3.3:1 y no pasa contraste para texto
   chico. En la mitad oscura ese rol lo toma --silver. */
.dark .meta,
.dark .venue__h,
.dark .form__fine,
.dark .field input::placeholder,
.dark .field textarea::placeholder{ color:var(--silver); }
.foot__fine{ color:var(--silver); }


/* ══ 04 · BUTTONS ═════════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-8);
  padding:12px 24px; border-radius:var(--r-pill);
  font-size:var(--t-body); font-weight:var(--w-semibold); letter-spacing:-.005em;
  white-space:nowrap; transition:transform .25s var(--ease), background .25s var(--ease),
                                 border-color .25s var(--ease), opacity .25s var(--ease);
}
.btn:active{ transform:scale(.97); }
.btn svg{ flex:0 0 auto; }

/* The single chromatic filled button. One per surface, maximum. */
.btn--blue{ background:var(--blue); color:var(--white); }
.btn--blue:hover{ background:#0069d9; }

/* The conversion button. Amber on dark is the loudest thing here. */
.btn--amber{ background:var(--amber); color:var(--black); }
.btn--amber:hover{ background:#ffcb1f; }

.btn--ghost{ border:1px solid rgba(0,0,0,.5); color:var(--black); }
.btn--ghost:hover{ border-color:var(--black); background:rgba(0,0,0,.03); }

.btn--ghost-dark{ border:1px solid var(--line-dark); color:var(--white); background:var(--ink); }
.btn--ghost-dark:hover{ border-color:rgba(255,255,255,.35); }

.btn--sm{ padding:8px 16px; font-size:var(--t-sm); }


/* ══ 05 · ANNOUNCEMENT BAR AND NAVIGATION ═════════════════════════
   The bar sets the control-room tone before the white page starts.
   The nav is a floating pill, not a full-width bar — it should sit
   ON the page like a device, not act as structure.                 */
.announce{
  background:var(--indigo); color:var(--white);
  font-size:var(--t-sm); font-weight:var(--w-medium);
  padding:9px var(--gutter); text-align:center;
}
.announce span{ display:inline-flex; align-items:center; gap:var(--s-8); flex-wrap:wrap; justify-content:center; }
.announce a{ color:var(--amber); }
.announce a:hover{ text-decoration:underline; }

.navwrap{ position:sticky; top:12px; z-index:50; padding-inline:var(--gutter); margin-top:12px; }
.nav{
  max-width:var(--page); margin-inline:auto;
  display:flex; align-items:center; gap:var(--s-16);
  background:rgba(255,255,255,.95); backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--line-light); border-radius:var(--r-pill);
  box-shadow:var(--sh-nav); padding:8px 8px 8px 20px;
}
.nav__brand{ display:flex; align-items:baseline; gap:6px; font-weight:var(--w-bold); letter-spacing:-.03em; font-size:18px; }
.nav__brand i{ font-style:normal; font-weight:var(--w-regular); color:var(--steel); font-size:var(--t-sm); letter-spacing:0; }
.nav__links{ display:flex; gap:var(--s-24); margin-left:auto; }
.nav__links a{ font-size:var(--t-body); font-weight:var(--w-medium); color:var(--black); opacity:.75; transition:opacity .2s; }
.nav__links a:hover{ opacity:1; }
.nav__cta{ margin-left:auto; }
.nav__links + .nav__cta{ margin-left:0; }

/* Mobile: the links collapse, the call button stays. Navigation on a
   phone for this business is one tap to WhatsApp, not a menu. */
.nav__burger{ display:none; }


/* ══ 06 · HERO ════════════════════════════════════════════════════ */
.hero{ padding-block:clamp(40px,7vw,72px) 0; text-align:center; overflow:hidden; }
.hero__in{ max-width:760px; margin-inline:auto; display:grid; gap:var(--s-20); justify-items:center; }
.hero__sub{ max-width:52ch; }
.hero__cta{ display:flex; gap:var(--s-12); flex-wrap:wrap; justify-content:center; }

/* Trust row — supporting evidence, deliberately small */
.badges{ display:flex; gap:var(--s-8); flex-wrap:wrap; justify-content:center; margin-top:var(--s-4); }
.badge{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--white); border:1px solid var(--line-light); border-radius:var(--r-pill);
  padding:7px 14px; font-size:var(--t-sm); font-weight:var(--w-medium);
  box-shadow:var(--sh-card);
}
.badge b{ font-weight:var(--w-semibold); }
.badge span{ color:var(--steel); font-weight:var(--w-regular); }

/* The stage holds the product with the cards orbiting it */
.stage{
  position:relative; margin-top:var(--s-40);
  max-width:1040px; margin-inline:auto; padding-inline:var(--gutter);
}
.stage__media{
  position:relative; border-radius:var(--r-float); overflow:hidden;
  aspect-ratio:16/9; box-shadow:var(--sh-card); background:var(--linen);
}
.stage__media img,.stage__media video{ width:100%; height:100%; object-fit:cover; }


/* ══ 07 · FLOATING CARDS ══════════════════════════════════════════
   THE signature component of this system. White, 20px radius,
   whisper shadow, tilted a degree or three so they read as
   scattered rather than gridded. They exist to make the service
   feel live — keep the copy specific and time-stamped.            */
.cards{ position:absolute; inset:0; pointer-events:none; }
.card{
  position:absolute; width:min(260px,64vw);
  background:var(--white); border-radius:var(--r-float);
  box-shadow:var(--sh-card); padding:var(--s-16);
  display:grid; gap:3px; text-align:left;
  opacity:0; transform:translateY(14px) rotate(var(--rot,0deg));
}
.card.is-in{ opacity:1; transform:translateY(0) rotate(var(--rot,0deg)); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.card__t{ font-size:var(--t-body); font-weight:var(--w-semibold); line-height:1.3; letter-spacing:-.01em; }
.card__m{ font-size:var(--t-sm); color:var(--steel); line-height:1.4; }

/* Status is shown by a left border, never by tinting the card */
.card--ok{     border-left:3px solid var(--blue); }
.card--alert{  border-left:3px solid var(--alert); }
.card--action{ border-left:3px solid var(--amber); }

/* Positions. Deliberately uneven — a grid would kill the effect. */
.card:nth-child(1){ --rot:-2.5deg; top:8%;  left:-2%; }
.card:nth-child(2){ --rot:2deg;    top:34%; right:-3%; }
.card:nth-child(3){ --rot:-1.5deg; bottom:14%; left:2%; }
.card:nth-child(4){ --rot:2.5deg;  bottom:4%;  right:4%; }


/* ══ 08 · FLEET ═══════════════════════════════════════════════════ */
.head{ display:grid; gap:var(--s-12); max-width:62ch; margin-bottom:var(--s-40); }
.head--center{ text-align:center; margin-inline:auto; justify-items:center; }

.fleet{ display:grid; gap:var(--s-24); grid-template-columns:1fr; }
@media (min-width:620px){ .fleet{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1120px){ .fleet{ grid-template-columns:repeat(4,1fr); } }

.yacht{
  background:var(--white); border-radius:var(--r-card); box-shadow:var(--sh-card);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.yacht:hover{ transform:translateY(-3px); }

.yacht__shot{ position:relative; aspect-ratio:4/3; background:var(--linen); overflow:hidden; }
.yacht__shot img{ width:100%; height:100%; object-fit:cover; }

/* Placeholder state — used while a yacht has no photo yet. It has
   to look deliberate, not broken: the sea texture plus the model
   name set large. Drop a photo into the data file and it vanishes. */
.yacht__ph{ position:absolute; inset:0; display:grid; place-items:center; }
.yacht__ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.55) brightness(.62); }
.yacht:nth-child(1) .yacht__ph img{ object-position:30% 20%; transform:scale(1.35); }
.yacht:nth-child(2) .yacht__ph img{ object-position:70% 60%; transform:scale(1.15); }
.yacht:nth-child(3) .yacht__ph img{ object-position:20% 75%; transform:scale(1.45); }
.yacht:nth-child(4) .yacht__ph img{ object-position:80% 30%; transform:scale(1.25); }
.yacht__ph span{
  position:relative; color:var(--white); font-weight:var(--w-bold);
  font-size:clamp(22px,3.4vw,30px); letter-spacing:-.03em; text-align:center; padding:0 var(--s-16);
}

.yacht__tag{
  position:absolute; top:var(--s-12); left:var(--s-12); z-index:2;
  background:var(--white); border-radius:var(--r-pill); padding:5px 12px;
  font-size:var(--t-caption); font-weight:var(--w-semibold); letter-spacing:.02em;
  box-shadow:var(--sh-card);
}

.yacht__body{ padding:var(--s-20); display:grid; gap:var(--s-12); flex:1; }
.yacht__top{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-12); }
.yacht__name{ font-size:var(--t-h3); font-weight:var(--w-bold); letter-spacing:-.025em; line-height:1.2; }
.yacht__len{ font-size:var(--t-sm); color:var(--steel); white-space:nowrap; }
.yacht__sum{ font-size:var(--t-body); color:var(--carbon); line-height:1.5; }

.yacht__specs{ display:grid; gap:0; border-top:1px solid var(--line-light); }
.yacht__specs div{ display:flex; justify-content:space-between; gap:var(--s-12); padding:9px 0; border-bottom:1px solid var(--line-light); }
.yacht__specs dt{ font-size:var(--t-sm); color:var(--steel); }
.yacht__specs dd{ font-size:var(--t-sm); font-weight:var(--w-medium); text-align:right; }

.yacht__foot{ margin-top:auto; display:grid; gap:var(--s-12); }
.yacht__price{ display:flex; align-items:baseline; gap:var(--s-8); flex-wrap:wrap; }
.yacht__price b{ font-size:26px; font-weight:var(--w-bold); letter-spacing:-.03em; }
.yacht__price span{ font-size:var(--t-sm); color:var(--steel); }


/* ══ 09 · LIGHT → DARK TRANSITION ═════════════════════════════════
   No hard border. The colour shift itself is the separator, and the
   type scale carries straight through unchanged.                   */
.dark{ background:var(--indigo); color:var(--white); position:relative; overflow:hidden; }
.dark::before{
  content:""; position:absolute; inset:0; background:var(--glow); opacity:.55; pointer-events:none;
}
.dark > *{ position:relative; z-index:1; }
.dark .h1,.dark .h2,.dark .h3{ color:var(--white); }

/* The sea band that opens the dark half */
.sea{ position:relative; min-height:clamp(300px,46vw,470px); display:grid; place-items:center; padding-block:var(--section); }
.sea__media{ position:absolute; inset:0; }
.sea__media img,.sea__media video{ width:100%; height:100%; object-fit:cover; filter:saturate(.85) brightness(.5); }
.sea__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,var(--indigo) 0%,rgba(13,0,33,.55) 34%,rgba(13,0,33,.72) 66%,var(--indigo) 100%);
}
.sea__in{ position:relative; z-index:2; text-align:center; max-width:660px; padding-inline:var(--gutter); display:grid; gap:var(--s-16); justify-items:center; }


/* ══ 10 · SERVICES ════════════════════════════════════════════════
   Flat tiles on the dark surface — hairline border, no shadow. On
   dark, a shadow does nothing anyway; the border does the work.    */
.svcs{ display:grid; gap:var(--s-16); grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); }
.svc{
  background:var(--ink); border:1px solid var(--line-dark); border-radius:var(--r-card);
  padding:var(--s-24); display:grid; gap:var(--s-8); align-content:start;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.svc:hover{ border-color:rgba(255,255,255,.24); transform:translateY(-2px); }
.svc__ico{
  width:38px; height:38px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.07); display:grid; place-items:center; color:var(--white);
  margin-bottom:var(--s-4);
}
.svc__t{ font-size:var(--t-lead); font-weight:var(--w-semibold); letter-spacing:-.02em; }
.svc__l{ font-size:var(--t-sm); color:var(--amber); font-weight:var(--w-medium); }
.svc__d{ font-size:var(--t-body); color:var(--silver); line-height:1.5; }


/* ══ 11 · DESTINATIONS ════════════════════════════════════════════ */
.dest{ display:grid; gap:var(--s-40); }
.dest__cols{ display:grid; gap:var(--s-32); grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.venues{ display:grid; gap:0; }
.venues h4{ font-size:var(--t-caption); font-weight:var(--w-semibold); letter-spacing:.1em; text-transform:uppercase; color:var(--silver); margin-bottom:var(--s-12); }
.venue{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-16); padding:14px 0; border-bottom:1px solid var(--line-dark); }
.venue__n{ font-size:var(--t-body); font-weight:var(--w-semibold); }
.venue__k{ font-size:var(--t-sm); color:var(--silver); }
.venue__h{ font-size:var(--t-sm); color:var(--silver); white-space:nowrap; font-variant-numeric:tabular-nums; }


/* ══ 12 · BOOKING ═════════════════════════════════════════════════ */
.book{ display:grid; gap:var(--s-40); grid-template-columns:1fr; }
@media (min-width:900px){ .book{ grid-template-columns:.85fr 1.15fr; gap:var(--s-64); align-items:start; } }

.form{ display:grid; gap:var(--s-16); }
.field{ display:grid; gap:6px; }
.field > label{ font-size:var(--t-sm); font-weight:var(--w-medium); color:var(--silver); }
.field input,.field select,.field textarea{
  width:100%; background:var(--ink); color:var(--white);
  border:1px solid var(--line-dark); border-radius:var(--r-input);
  padding:13px 14px; font-family:var(--ui); font-size:var(--t-body);
  transition:border-color .25s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--steel); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--blue); }
.field textarea{ resize:vertical; min-height:88px; }
.field select option{ background:var(--ink); }
.row2{ display:grid; gap:var(--s-16); grid-template-columns:1fr 1fr; }

/* Extra services as pill toggles — a real checkbox, styled */
.chips{ display:flex; gap:var(--s-8); flex-wrap:wrap; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; width:100%; height:100%; cursor:pointer; }
.chip span{
  display:block; border:1px solid var(--line-dark); border-radius:var(--r-pill);
  padding:8px 14px; font-size:var(--t-sm); color:var(--silver);
  transition:all .25s var(--ease);
}
.chip input:checked + span{ background:var(--white); color:var(--black); border-color:var(--white); font-weight:var(--w-medium); }
.chip input:focus-visible + span{ outline:2px solid var(--blue); outline-offset:2px; }

.form__msg{ font-size:var(--t-sm); min-height:1.3em; color:var(--silver); }
.form__msg.is-err{ color:var(--alert); }
.form__msg.is-ok{ color:var(--amber); }
.form__fine{ font-size:var(--t-caption); color:var(--silver); }

.aside{ display:grid; gap:var(--s-24); align-content:start; }
.aside__block{ display:grid; gap:var(--s-8); }
.aside__block a{ font-size:var(--t-lead); font-weight:var(--w-semibold); letter-spacing:-.02em; }
.aside__block a:hover{ color:var(--amber); }


/* ══ 13 · FOOTER ══════════════════════════════════════════════════ */
.foot{ background:var(--ink); color:var(--silver); padding-block:var(--s-48) var(--s-32); }
.foot__row{ display:flex; gap:var(--s-24); flex-wrap:wrap; justify-content:space-between; align-items:center; }
.foot__brand{ font-size:20px; font-weight:var(--w-bold); color:var(--white); letter-spacing:-.03em; }
.foot__links{ display:flex; gap:var(--s-20); flex-wrap:wrap; font-size:var(--t-sm); }
.foot__links a:hover{ color:var(--white); }
.foot__fine{ margin-top:var(--s-24); padding-top:var(--s-20); border-top:1px solid var(--line-dark); font-size:var(--t-caption); color:var(--steel); display:flex; gap:var(--s-16); flex-wrap:wrap; justify-content:space-between; }


/* ══ 14 · MOTION AND REVEAL ═══════════════════════════════════════
   Everything that animates starts hidden in CSS and is released by
   an IntersectionObserver adding .is-in. If JavaScript fails, the
   fallback at the bottom of this block shows all of it anyway —
   content must never depend on a script to be readable.           */
[data-reveal]{ opacity:0; transform:translateY(18px); }
[data-reveal].is-in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }

.no-js [data-reveal],
.no-js .card{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  [data-reveal],.card{ opacity:1 !important; transform:none !important; }
}


/* ══ 15 · RESPONSIVE ══════════════════════════════════════════════ */
@media (max-width:900px){
  .nav__links{ display:none; }
  .nav{ padding-left:16px; }
  .nav__cta{ margin-left:auto; }

  /* The cards stop orbiting and stack under the image: overlapping
     a 16:9 photo on a phone makes both unreadable. */
  .cards{ position:static; display:grid; gap:var(--s-12); margin-top:var(--s-16); }
  .card{ position:static; width:100%; --rot:0deg !important; transform:none; }
  .card.is-in{ transform:none; }
  .stage{ padding-inline:var(--gutter); }
}

@media (max-width:520px){
  .row2{ grid-template-columns:1fr; }
  .venue{ flex-wrap:wrap; }
  .foot__row{ flex-direction:column; align-items:flex-start; }
}