/* ==================================================================
   audacIA Sessions
   Ported from Figma: iF-Web / Frame 54 (node 245:1095), 1440 x 8743

   THE SCALE SYSTEM
   Every size on this page is written in design pixels of the original
   1440 x 1024 frame and multiplied by --u. That unit is the smaller of
   one horizontal and one vertical share of the viewport, so a section
   that is 1024 tall in Figma is never taller than the window: shrink
   the browser vertically and the type shrinks with it. Nothing is ever
   cut off and nothing needs an inner scrollbar.

   FONTS
   Creato Display (Light / Regular / Bold / ExtraBold / Black) is
   licensed and has no CDN. Self-host it and uncomment the block below,
   until then the page falls back to Neue Montreal.

   @font-face{ font-family:'Creato Display'; src:url('assets/fonts/CreatoDisplay-Light.woff2')     format('woff2'); font-weight:300; font-display:swap }
   @font-face{ font-family:'Creato Display'; src:url('assets/fonts/CreatoDisplay-Regular.woff2')   format('woff2'); font-weight:400; font-display:swap }
   @font-face{ font-family:'Creato Display'; src:url('assets/fonts/CreatoDisplay-Bold.woff2')      format('woff2'); font-weight:700; font-display:swap }
   @font-face{ font-family:'Creato Display'; src:url('assets/fonts/CreatoDisplay-ExtraBold.woff2') format('woff2'); font-weight:800; font-display:swap }
   @font-face{ font-family:'Creato Display'; src:url('assets/fonts/CreatoDisplay-Black.woff2')     format('woff2'); font-weight:900; font-display:swap }
================================================================== */

:root{
  --navy:#04285a;
  --blue:#045ab4;
  --orange:#de6a07;
  --rust:#a63a10;
  --ink:#010d1d;
  --paper:#f4f4f4;
  --on-navy:#f4f4f4;
  --placeholder:#d9d9d9;

  --font-display:'Creato Display','Neue Montreal','Helvetica Neue',Arial,sans-serif;
  --font-ui:'Neue Montreal','Helvetica Neue',Arial,sans-serif;
  --font-meta:'Helvetica Neue',Helvetica,Arial,sans-serif;

  /* 1 design pixel of the 1440 x 1024 frame */
  --u-base:min(0.069444vw, 0.097656vh);
  --u:var(--u-base);

  /* ---- motion system: one curve, three durations, one stagger ----
     Every transition and every entrance on the page uses these, and
     every scroll-driven piece shares --lerp inside the script. */
  --ease:cubic-bezier(.19,1,.22,1);
  --ease-soft:cubic-bezier(.32,.72,0,1);
  --dur-1:.45s;    /* hover and colour, anything under the pointer */
  --dur-2:.8s;     /* entrances: text blocks, links, cards         */
  --dur-3:1.15s;   /* the slow ones: line masks and image settles  */
  --stagger:.09s;  /* one step between siblings                    */

  /* ---- type scale: the seven steps the Figma frame actually uses,
     plus one chrome step for the nav bar ---- */
  /* the four heading steps each sit 8px below the raw Figma value,
     the three body steps keep it */
  --fs-0:calc(105 * var(--u));       /* 113 - 8, the cassette word only */
  --fs-display:calc(72 * var(--u));   /* 80 - 8 */
  --fs-1:calc(52 * var(--u));         /* 60 - 8 */
  --fs-2:calc(42 * var(--u));         /* 50 - 8 */
  --fs-3:calc(32 * var(--u));         /* 40 - 8 */
  --fs-4:calc(30 * var(--u));
  --fs-5:calc(20 * var(--u));
  --fs-6:calc(12 * var(--u));
  --fs-ui:calc(15 * var(--u));

  /* Content shell. --u can end up height-bound on a wide, short window,
     and then the design's 1440 frame is narrower than the viewport. This
     caps the content at that frame, centres it and keeps a roomy edge, so
     sections read centred instead of stretched to the glass. */
  --shell:calc(1440 * var(--u));
  --edge:calc(140 * var(--u));
  --gutter-x:max(var(--edge), calc((100% - var(--shell)) / 2 + var(--edge)));

  --lh-tight:1.05;
  --lh-snug:1.2;
  --lh-body:1.35;

  --ls-tight:-.035em;
  --ls-body:-.02em;
  --ls-caps:.14em;

  /* the video grade, see the colour matrix at the end of the body.
     If the video ever stutters on a weak GPU, swap this one line for
     brightness(.73) saturate(.95) and the overlay picks up the rest. */
  --grade:url(#audacia-grade);

  /* hero ribbed texture, from the Wix media library:
     fb9608_8097243cf4a447b7be82dc708dddf22c~mv2.png */
  --tex-src:url("/assets/img/texture.webp");
  --tex:.4;
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--paper);
  color:var(--navy);
  font-family:var(--font-ui);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,video{ display:block; max-width:100% }

/* every section is exactly one screen tall and centres its content.
   --fit is a safety multiplier the script sets when a section would
   still spill past the fold, for instance because the fallback font
   wraps a headline onto an extra line. */
.section,.footer{ --u:calc(var(--u-base) * var(--fit, 1)) }

.section{
  position:relative;
  min-height:100svh;
  display:grid;
  align-content:center;
  overflow:clip;
}

:where(a,button):focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- shared motion primitives ------------------------------ */

/* Three primitives cover every entrance on the page. Siblings set --i
   to take their turn in the stagger; nothing hand-times a delay. */

/* .lines - headlines rise out of a mask, one line at a time */
.lines span{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em }
.lines i{
  display:block; font-style:normal;
  transform:translate3d(0,110%,0);
  transition:transform var(--dur-3) var(--ease);
  transition-delay:calc(var(--i, 0) * var(--stagger));
}
.lines.is-in i{ transform:none }
.lines span:nth-child(2) i{ transition-delay:calc((var(--i, 0) + 1) * var(--stagger)) }
.lines span:nth-child(3) i{ transition-delay:calc((var(--i, 0) + 2) * var(--stagger)) }

/* .reveal - everything else rises and fades */
.reveal{
  opacity:0;
  transform:translate3d(0, calc(26 * var(--u)), 0);
  transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  transition-delay:calc(var(--i, 0) * var(--stagger));
  will-change:transform, opacity;
}
.reveal.is-in{ opacity:1; transform:none }

/* .zoom - every image on the page settles out of the same overscan */
.zoom{
  transform:scale(1.06);
  transition:transform var(--dur-3) var(--ease);
  transition-delay:calc(var(--i, 0) * var(--stagger));
  will-change:transform;
}
.is-in .zoom, .zoom.is-in{ transform:none }

/* ================= hero, 245:1096 =================================
   Structure and intro taken from wolverineworldwide.com: full bleed
   rounded video, stacked display headline bottom left, frosted card
   bottom right. The intro runs on the same three primitives as every
   other section, so the opening reads like the rest of the page. */

.hero{
  min-height:100svh;
  padding:calc(6 * var(--u));
  display:flex;
  align-content:stretch;
}

.hero__media{
  position:relative;
  flex:1;
  overflow:clip;
  border-radius:calc(20 * var(--u));
  background:#0d0f14;
}

.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  /* no colour grade here: the footage is the audacIA gradient, and the
     matrix was fitted to the venue clip, it would kill the oranges */
}

.hero__vignette{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, rgb(2 12 28 / .55) 0%, transparent 42%),
    radial-gradient(120% 90% at 50% 35%, transparent 50%, rgb(2 12 28 / .3) 100%);
  pointer-events:none;
}

/* ribbed texture laid over the footage, under every piece of copy. The
   PNG already carries a low alpha, so --tex is the dial if it needs to
   read harder or softer. */
.hero__texture{
  position:absolute; inset:0; z-index:2;
  background:var(--tex-src) top center / 100% auto repeat-y;
  opacity:var(--tex, 1);
  pointer-events:none;
}

/* ---- top bar ---- */

/* La barra vive fuera del hero. Tiene que ser asi: el bucle de scroll
   aplica transform:scale() a .hero__media, y un ancestro transformado
   se convierte en el bloque contenedor de cualquier hijo fixed, ademas
   de que .hero__media lleva overflow:clip. Dentro del hero, position:
   fixed no pegaria nunca. Fuera, la barra es chrome del sitio y el hero
   se queda solo con su contenido. */
.bar{
  position:fixed; z-index:60;
  top:0; left:0; right:0;
  /* 6 de padding del hero + 42 del top original = 48 desde el borde */
  padding:calc(48 * var(--u)) calc(81 * var(--u));
  color:var(--on-navy);
  transition:
    transform .52s var(--ease),
    background-color .4s var(--ease-soft),
    padding .4s var(--ease-soft),
    box-shadow .4s var(--ease-soft);
}
.bar__in{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; column-gap:calc(52 * var(--u));
}

/* estado 2: ya no hay video detras, hace falta fondo propio */
.bar--solid{
  padding-block:calc(18 * var(--u));
  background:rgb(4 40 90 / .86);
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:0 1px 0 rgb(244 244 244 / .14), 0 calc(18 * var(--u)) calc(40 * var(--u)) rgb(1 13 29 / .18);
}

/* estado 3: se retira al bajar y vuelve al subir */
.bar--hidden{ transform:translate3d(0,-102%,0); box-shadow:none }

.wordmark{
  grid-column:1; justify-self:start; margin:0;
  font-family:var(--font-display); font-weight:800;
  /* es el logo, no un enlace de menú: ni hover ni cambio de estado */
  font-size:calc(30 * var(--u)); letter-spacing:var(--ls-tight);
  color:var(--on-navy); text-decoration:none;
}

.nav{ grid-column:2; justify-self:start }
.nav__list{
  margin:0; padding:0; list-style:none;
  display:flex; align-items:center; gap:calc(10 * var(--u));
  margin-left:calc(-14 * var(--u));   /* pull the first pill's padding back to the grid line */
}
.nav__link{
  position:relative; display:flex; align-items:center;
  padding:calc(9 * var(--u)) calc(14 * var(--u));
  border-radius:999px;
  font-size:calc(18 * var(--u)); letter-spacing:var(--ls-body);
  color:var(--on-navy); text-decoration:none; white-space:nowrap;
  transition:background-color var(--dur-1) var(--ease-soft);
}
.nav__link:hover{ background:rgb(244 244 244 / .14) }

.bar__right{
  grid-column:3; justify-self:end;
  display:flex; align-items:center; gap:calc(22 * var(--u));
}
.bar__cta{
  display:inline-flex; align-items:center; justify-content:center;
  height:calc(46 * var(--u)); padding:0 calc(30 * var(--u));
  border:1px solid currentColor; border-radius:999px;
  font-family:var(--font-display); font-weight:400;
  font-size:calc(18 * var(--u)); letter-spacing:var(--ls-body);
  text-transform:uppercase;
  color:inherit; text-decoration:none; white-space:nowrap;
  transition:background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.bar__cta{ color:#fff; border-color:#fff; background:none }
.bar__cta:hover{ background:rgb(255 255 255 / .14) }

.lang{
  display:inline-flex; align-items:center; gap:calc(6 * var(--u));
  font-family:var(--font-meta); font-weight:500;
  font-size:calc(18 * var(--u)); line-height:1;
  letter-spacing:var(--ls-caps); color:#fff; white-space:nowrap;
}
.lang button{
  position:relative;
  margin:0; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; letter-spacing:inherit; color:inherit;
  opacity:.75; transition:opacity var(--dur-1) var(--ease);
}
/* a 44 x 44 tap target centred on each language, without moving the bar */
.lang button::after{ content:""; position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%, -50%) }
.lang button[aria-pressed="true"]{ opacity:1 }
.lang button:hover{ opacity:.8 }
.lang button[aria-pressed="true"]:hover{ opacity:1 }
.lang__sep{ opacity:.75; pointer-events:none }

/* ---- bottom row: headline and card ---- */

.hero__bottom{
  position:absolute; z-index:3;
  left:calc(75 * var(--u)); right:calc(75 * var(--u)); bottom:calc(42 * var(--u));
  /* above .hero__texture */
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:calc(40 * var(--u));
}

.hero__title{
  margin:0;
  font-family:var(--font-display); font-weight:800;
  /* el hero se sale de la escala a propósito: es la única voz de ese tamaño */
  font-size:calc(120 * var(--u)); line-height:1; letter-spacing:-.04em;
  color:#fff;
}

.hero__copy{ flex:1; min-width:0; max-width:calc(1040 * var(--u)) }
.hero__lede{
  margin:calc(24 * var(--u)) 0 0;
  width:calc(660 * var(--u)); max-width:100%;
  font-family:var(--font-display); font-weight:400;
  font-size:calc(24 * var(--u)); line-height:1.25; letter-spacing:var(--ls-tight);
  color:rgb(255 255 255 / .88);
}
@media (prefers-reduced-motion:no-preference){
  .hero__lede{ animation:heroLede var(--dur-2) var(--ease) .34s both }
  @keyframes heroLede{
    from{ opacity:0; transform:translate3d(0, calc(20 * var(--u)), 0) }
    to  { opacity:1; transform:none }
  }
}

.hero__card{
  flex:none;
  width:calc(280 * var(--u));
  display:flex; flex-direction:column; gap:calc(4 * var(--u));
  padding:calc(4 * var(--u));
  border-radius:calc(20 * var(--u));
  background:rgb(0 0 0 / .1);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  color:#fff; text-decoration:none;
}

.hero__card-media{
  position:relative;
  height:calc(112 * var(--u));      /* a wide, low strip at full card width */
  border-radius:calc(20 * var(--u));
  overflow:clip;
}
/* the source is portrait, so it is taken out of the flow: left in it,
   aspect-ratio loses and the image stretches the whole card tall */
.hero__card-media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:50% 45%;
  transition:transform var(--dur-3) var(--ease);
}
.hero__card:hover .hero__card-media img{ transform:scale(1.06) }

.hero__card-body{
  display:flex; flex-direction:column; gap:calc(28 * var(--u));
  padding:calc(9 * var(--u)) calc(9 * var(--u)) calc(7 * var(--u));
}
.hero__card-label{
  font-family:var(--font-display);
  font-size:max(14px, var(--fs-6)); letter-spacing:var(--ls-caps); text-transform:uppercase;
  color:rgb(255 255 255 / .72);
}
.hero__card-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:calc(10 * var(--u)) }
.hero__card-title span{ display:block }
.hero__card-title{
  margin:0; max-width:82%;
  font-family:var(--font-display); font-weight:700;
  font-size:var(--fs-5); line-height:var(--lh-body); letter-spacing:var(--ls-body);
}
.hero__card svg{
  flex:none; width:calc(14 * var(--u)); height:calc(14 * var(--u));
  fill:none; stroke:currentColor; stroke-width:1.8;
  transition:transform var(--dur-1) var(--ease);
}
.hero__card:hover svg{ transform:scale(1.25) }

/* con una barra fija, los anclajes tienen que dejarle sitio */
.section,.footer{ scroll-margin-top:calc(96 * var(--u)) }

/* invisible ruler so the script can read the current value of --u */
.u-probe{ position:absolute; width:calc(100 * var(--u)); height:0; visibility:hidden; pointer-events:none }

/* ================= statement, 292:735 =============================
   Desktop - 101: paragraph and a pill button on the left, a portrait
   video panel on the right, both vertically centred in the screen. */

.statement{
  min-height:auto; display:block; align-content:normal;
  padding:calc(140 * var(--u)) var(--gutter-x) calc(120 * var(--u));
  overflow:visible;
  /* el script lleva estos dos del papel al navy al bajar, así la entrada
     en la zona oscura de la página no es un corte sino un lavado */
  background:var(--wash-bg, var(--paper));
  color:var(--wash-fg, var(--navy));
}

.statement__body{
  margin:0 auto; width:calc(1000 * var(--u)); max-width:100%;
  font-family:var(--font-display); font-weight:700;
  font-size:calc(56 * var(--u)); line-height:1.18; letter-spacing:-.03em;
  text-align:center; color:inherit;
}
.statement__body--end{ color:var(--orange) }
/* cada palabra se enciende al pasar el scroll. inline-block para poder
   animarlas por separado, sin que eso permita partirlas por dentro */
.statement__body w{
  display:inline-block;
  word-break:keep-all; overflow-wrap:normal; hyphens:none;
  opacity:.14;
  transition:opacity var(--dur-1) var(--ease);
  will-change:opacity;
}

.statement__media{
  position:relative;
  margin:calc(96 * var(--u)) auto 0;
  width:calc(1160 * var(--u)); max-width:100%;
  aspect-ratio:690 / 435;
  border:0;
  border-radius:calc(20 * var(--u));
  overflow:clip; background:#8a8a8a;
}
.statement__media video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  /* el clip asienta un ligero zoom cuando el bloque se revela */
  transform:scale(1.12);
  transition:transform var(--dur-3) var(--ease);
}
/* la entrada del vídeo va algo más lenta para que se lea la aparición */
.statement__media.reveal{
  transition:opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.statement__media.is-in video{ transform:scale(1) }

/* la píldora que comparten todos los enlaces de acción */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:calc(178 * var(--u)); height:calc(46 * var(--u));
  padding:0 calc(24 * var(--u));
  border:1px solid var(--orange); border-radius:calc(80 * var(--u));
  font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-ui); letter-spacing:var(--ls-body);
  text-transform:uppercase; text-align:center; white-space:nowrap;
  color:var(--orange); text-decoration:none;
  transition:background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn:hover{ background:var(--orange); color:var(--paper) }

/* variante de la píldora cuando va sobre un fondo de color:
   borde y texto en papel, y al pasar el puntero se rellena de papel
   con la tinta propia de la tarjeta (--btn-ink) */
.btn--onfill{
  border-color:var(--paper); color:var(--paper);
  font-weight:700; font-size:calc(18 * var(--u));
}
.btn--onfill:hover{ background:var(--paper); color:var(--btn-ink, var(--navy)) }

/* ================= two doors ======================================
   Las dos tarjetas comparten alto y el botón se apoya siempre en el
   fondo, así quedan simétricas aunque el texto tenga distinta longitud. */
.doors__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:calc(60 * var(--u));
  align-items:stretch;
  margin-top:calc(96 * var(--u));
}
/* Cada puerta es una tarjeta de color a sangre, con el texto en papel.
   El epígrafe queda arriba y el bloque de título, cuerpo y botón se
   apoya en el fondo, así las dos quedan simétricas aunque el texto
   tenga distinta longitud. */
.door{
  min-height:calc(500 * var(--u));
  border:0; border-radius:calc(50 * var(--u));
  padding:calc(50 * var(--u)) calc(40 * var(--u));
  display:flex; flex-direction:column; align-items:flex-start;
  color:var(--paper);
}
.door--sessions{ background:var(--orange); --btn-ink:var(--orange) }
.door--program{ background:var(--blue);  --btn-ink:var(--blue) }
.door__k{
  margin:0;
  font-family:var(--font-display); font-weight:400; font-size:var(--fs-5);
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--paper);
}
/* el pie se empuja hasta el fondo de la tarjeta */
.door__foot{
  margin-top:auto; width:100%;
  display:flex; flex-direction:column; align-items:flex-start;
}
.door h2{
  margin:0 0 calc(14 * var(--u));
  font-family:var(--font-display); font-weight:700;
  font-size:calc(48 * var(--u)); line-height:1.05; letter-spacing:var(--ls-tight);
  color:var(--paper);
}
.door__p{
  margin:0 0 calc(30 * var(--u));
  font-family:var(--font-display); font-weight:400;
  font-size:calc(26 * var(--u)); line-height:1.25; letter-spacing:var(--ls-tight);
  color:var(--paper);
}
.door .btn{ width:calc(228 * var(--u)); min-width:0; padding:0 calc(14 * var(--u)); margin-top:0 }
/* entrada de las tarjetas: suben algo más y asientan una leve escala.
   El escalonado lo da --i a través del transition-delay de .reveal */
.door.reveal{ transform:translate3d(0, calc(44 * var(--u)), 0) scale(.98) }
.door.reveal.is-in{ transform:none }

/* ================= the full program, 358:2138 ====================
   Desktop - 113. Cuatro tarjetas de igual alto con filete dorado, la
   primera y la última redondeadas por fuera. La palabra audacIA sigue
   entrando entera y partiéndose en sus cuatro fases. */

.phases{
  height:calc(100svh + 90svh);
  display:block; align-content:normal;
  overflow:visible;
}
.phases__stage{
  position:sticky; top:0;
  height:100svh;
  display:grid; align-content:center;
  /* 10-02: the site gutter (was 89u) */
  padding-inline:var(--gutter-x);
  overflow:clip;
}

.phases__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:calc(40 * var(--u));
  margin-bottom:calc(24 * var(--u));
}
.phases__head h2{
  margin:0;
  font-family:var(--font-display); font-weight:700;
  font-size:calc(80 * var(--u)); line-height:1.1; letter-spacing:var(--ls-tight);
  color:var(--navy);
}
.phases__lede{
  margin:0 0 calc(68 * var(--u));
  width:calc(772 * var(--u)); max-width:100%;
  font-family:var(--font-display); font-weight:400;
  font-size:calc(28 * var(--u)); line-height:1.25; letter-spacing:var(--ls-tight);
  color:var(--navy);
}
.phases__head > *,
.phases__lede{ opacity:0; transition:opacity var(--dur-2) var(--ease) }

.phases__grid{ display:grid; grid-template-columns:repeat(4, 1fr) }

.phase{
  --c:#c08023;
  height:calc(560 * var(--u));
  padding:calc(24 * var(--u)) calc(39 * var(--u)) calc(30 * var(--u));
  display:flex; flex-direction:column;
  border:1px solid rgb(192 128 35 / var(--bo, 0));
}
.phase + .phase{ margin-left:-1px }
.phase:first-child{ border-radius:calc(50 * var(--u)) 0 0 calc(50 * var(--u)) }
.phase:last-child{ border-radius:0 calc(50 * var(--u)) calc(50 * var(--u)) 0 }

.phase__k{
  display:block; width:max-content;
  font-family:var(--font-display); font-weight:700;
  font-size:calc(92.37 * var(--u)); line-height:1.2; letter-spacing:-.04em;
  color:#c08023; opacity:.4;
  transform-origin:left top;
  /* sin will-change: promocionaba la letra a capa propia y, al
     escalarla x1.9 con la palabra unida, se magnificaba el bitmap */
}
.phase__rest{
  margin-top:calc(95 * var(--u));
  opacity:0; transition:opacity var(--dur-2) var(--ease);
}

.phase h3{
  margin:0 0 calc(14 * var(--u));
  font-family:var(--font-display); font-weight:700;
  font-size:calc(27.71 * var(--u)); line-height:1.15; letter-spacing:var(--ls-tight);
  color:var(--c);
}
.phase--cia h3{ font-size:calc(25.86 * var(--u)) }
.phase p{
  margin:0 0 calc(14 * var(--u));
  font-family:var(--font-display); font-weight:400;
  font-size:calc(20.32 * var(--u)); line-height:1.3; letter-spacing:var(--ls-body);
  color:var(--navy);
}
.phase .chip{
  display:inline-flex; align-items:center; gap:calc(13 * var(--u));
  font-family:var(--font-display); font-weight:400;
  font-size:calc(20.32 * var(--u)); letter-spacing:var(--ls-body); color:var(--navy);
}
.phase .chip svg{
  width:calc(18 * var(--u)); height:calc(18 * var(--u));
  fill:none; stroke:#c08023; stroke-width:1.6; flex:none;
}

.btn--gold{
  background:none; border-color:#c08023; color:#c08023;
  height:calc(46 * var(--u)); min-width:0; padding:0 calc(20 * var(--u));
  /* gold on paper is 3.01:1: large text (700 at 18.67px or more) */
  font-weight:700; font-size:max(18.67px, calc(16 * var(--u)));
}
.btn--gold:hover{ background:#c08023; color:var(--paper) }

/* ================= sessions, 350:1835 ============================
   Desktop - 105. Lista plana con filete entre filas: duración, precio
   y reserva a la derecha. Ya no es un acordeón. */

.sessions{
  /* comparte el mismo color lavado que el statement, así el paso de una
     sección a otra no tiene borde: las dos viran a la vez */
  background:var(--wash-bg, var(--navy)); color:var(--on-navy);
  padding:calc(83 * var(--u)) calc(52 * var(--u));
  align-content:center;
}
/* Sessions no entra con el observador: espera a que el lavado a navy
   haya cuajado, para que el texto no aparezca sobre un fondo a medias. */
.sessions__k,
.sessions__top > *,
.ses{
  opacity:0; transform:translate3d(0, calc(26 * var(--u)), 0);
  transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  transition-delay:calc(var(--i, 0) * var(--stagger));
}
.sessions.is-lit .sessions__k,
.sessions.is-lit .sessions__top > *,
.sessions.is-lit .ses{ opacity:1; transform:none }

.sessions__k{
  margin:0 0 calc(12 * var(--u));
  font-family:var(--font-display); font-weight:400;
  font-size:calc(18 * var(--u)); letter-spacing:var(--ls-body);
  text-transform:uppercase; color:var(--orange);
}
.sessions__top{
  display:grid; grid-template-columns:calc(430 * var(--u)) calc(837 * var(--u));
  justify-content:space-between; align-items:start;
  gap:calc(40 * var(--u));
  margin-bottom:calc(74 * var(--u));
}
.sessions__top h2{
  margin:0;
  font-family:var(--font-display); font-weight:700;
  font-size:calc(80 * var(--u)); line-height:1; letter-spacing:var(--ls-tight);
  color:var(--on-navy);
}
.sessions__top p{
  margin:calc(20 * var(--u)) 0 0;
  font-family:var(--font-display); font-weight:400;
  font-size:calc(28 * var(--u)); line-height:1.25; letter-spacing:var(--ls-tight);
  color:var(--on-navy);
}

.ses{
  display:grid; grid-template-columns:calc(580 * var(--u)) 1fr;
  align-items:center; gap:calc(40 * var(--u));
  padding:calc(30 * var(--u)) 0;
  border-top:1px solid rgb(244 244 244 / .25);
}
.ses:last-child{ border-bottom:1px solid rgb(244 244 244 / .25) }

.ses__n{
  display:block; margin-bottom:calc(10 * var(--u));
  font-family:var(--font-display); font-weight:400;
  font-size:calc(30 * var(--u)); line-height:1; letter-spacing:var(--ls-tight);
  color:rgb(244 244 244 / .72);
}
.ses h3{
  margin:0 0 calc(10 * var(--u));
  font-family:var(--font-display); font-weight:700;
  font-size:calc(50 * var(--u)); line-height:1; letter-spacing:var(--ls-tight);
  color:var(--on-navy);
}
.ses p{
  margin:0;
  font-family:var(--font-display); font-weight:400;
  font-size:calc(22 * var(--u)); line-height:1.3; letter-spacing:var(--ls-body);
  color:rgb(255 255 255 / .7);
}

.ses__tags{ display:flex; justify-content:flex-end; gap:calc(37 * var(--u)) }
.tag{
  display:inline-flex; align-items:center; justify-content:center;
  width:calc(124 * var(--u)); height:calc(46 * var(--u));
  border:calc(1.4 * var(--u)) solid var(--on-navy); border-radius:calc(55 * var(--u));
  opacity:.8;
  font-family:var(--font-display); font-weight:700;
  font-size:calc(18 * var(--u)); letter-spacing:var(--ls-body);
  color:var(--on-navy); white-space:nowrap;
}
/* el precio lleva prefijo, asi que no le vale el ancho fijo de .tag.
   Los tres dicen lo mismo y tienen los mismos digitos, asi que las tres
   pastillas siguen midiendo igual y la columna no se descuadra. */
.tag--price{ width:auto; padding-inline:calc(22 * var(--u)) }

.tag--book{
  opacity:1; background:var(--orange); border-color:var(--orange);
  text-decoration:none; cursor:pointer;
  transition:filter var(--dur-1) var(--ease);
}
.tag--book:hover{ filter:brightness(1.12) }

/* ================= collection, 328:1503 ==========================
   Desktop - 95. Tres caminos apilados: texto a la izquierda, casete a
   la derecha. Las etiquetas van sobre la imagen, no horneadas. */

.coll{
  /* raíl: la cabecera se queda fija y los tres caminos se relevan */
  height:calc(100svh + 2 * 85svh);
  display:block; align-content:normal;
  /* comparte el lavado con el casete, así el paso a claro no tiene borde */
  background:var(--wash2-bg, var(--paper));
  color:var(--wash2-fg, var(--navy));
  overflow:visible;
}
.coll__stage{
  position:sticky; top:0;
  height:100svh;
  display:grid; align-content:center; justify-items:center;
  padding-inline:calc(123 * var(--u));
  overflow:clip;
}
/* nada se lee hasta que el lavado a papel ha cuajado */
.coll__head,
.coll__lede,
.paths3,
.coll__dots{
  opacity:0;
  transition:opacity var(--dur-2) var(--ease);
}
.coll__lede{ transition-delay:.08s }
.paths3{ transition-delay:.16s }
.coll__dots{ transition-delay:.24s }
.coll.is-lit .coll__head,
.coll.is-lit .coll__lede,
.coll.is-lit .paths3,
.coll.is-lit .coll__dots{ opacity:1 }
.coll__head{
  margin:0 0 calc(30 * var(--u));
  width:calc(880 * var(--u)); max-width:100%; text-align:center;
  font-family:var(--font-display); font-weight:700;
  font-size:calc(72 * var(--u)); line-height:1.1; letter-spacing:var(--ls-tight);
  color:inherit;
}
.coll__head em{ font-style:normal; color:var(--orange) }
.coll__lede{
  margin:0 0 calc(90 * var(--u));
  width:calc(940 * var(--u)); max-width:100%; text-align:center;
  font-family:var(--font-display); font-weight:400;
  font-size:calc(26 * var(--u)); line-height:1.4; letter-spacing:var(--ls-tight);
  /* sin opacity propia: la usa la regla que lo mantiene apagado hasta
     que el lavado a papel termina */
  color:inherit;
}

/* los tres caminos ocupan el mismo sitio y se relevan al scrollear */
.paths3{ position:relative; width:100%; min-height:calc(470 * var(--u)) }

.path{
  position:absolute; inset:0;
  /* el par se centra en la pantalla en vez de repartirse a los extremos,
     que dejaba un vacío enorme en medio */
  display:grid; grid-template-columns:calc(470 * var(--u)) calc(400 * var(--u));
  justify-content:center; align-items:center;
  gap:calc(80 * var(--u));
  opacity:0; transform:translate3d(0, calc(30 * var(--u)), 0);
  transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  pointer-events:none;
}
.path.is-on{ opacity:1; transform:none; pointer-events:auto }

/* mismo tratamiento que los eyebrow de la página (start small, think big).
   Con más peso de selector que .path p, que va después y si no lo pisaba. */
.path .path__k{
  margin:0 0 calc(22 * var(--u));
  font-family:var(--font-display); font-weight:400;
  font-size:calc(20 * var(--u)); line-height:normal;
  /* -0.8px sobre 20px, en em para que siga a la escala */
  letter-spacing:-.04em;
  text-transform:uppercase; color:rgb(4 40 90 / .72); opacity:1;
}
.path h3{
  margin:0 0 calc(24 * var(--u));
  font-family:var(--font-display); font-weight:700;
  font-size:calc(54 * var(--u)); line-height:1.05; letter-spacing:var(--ls-tight);
  color:inherit;
  /* en castellano "Anade el Volumen 2" dejaba el 2 solo en una linea */
  text-wrap:balance;
}
.path p{
  margin:0;
  font-family:var(--font-display); font-weight:400;
  font-size:calc(26 * var(--u)); line-height:1.45; letter-spacing:var(--ls-tight);
  color:inherit; opacity:.85;
}

/* puntos de posición, uno por camino */
.coll__dots{
  display:flex; justify-content:center; gap:calc(10 * var(--u));
  margin-top:calc(56 * var(--u));
}
.coll__dots b{
  width:calc(30 * var(--u)); height:2px;
  background:currentColor; opacity:.25;
  transition:opacity var(--dur-1) var(--ease);
}
.coll__dots b.is-on{ opacity:1; background:var(--orange) }

.path__art{ position:relative; overflow:clip; align-self:center }
.path__art img{ width:100%; height:100%; object-fit:cover; display:block }
/* la pila se muestra entera: el recorte del frame cortaba el primer
   casete y descuadraba las etiquetas, porque un margen en % se resuelve
   contra el ancho y no contra el alto. Va más estrecha para que su alto
   se parezca al de los otros dos y no se coma las rayas de abajo. */
.path__art--stack{ width:calc(306 * var(--u)); justify-self:center }
.path__art--stack img{ height:auto }

/* Etiquetas sobre el casete. Van en una sola fila con reparto propio en
   vez de tres piezas colocadas a mano: así no pueden solaparse aunque la
   tipografía renderice más ancha que en el frame. */
.tagrow{
  position:absolute;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:calc(8 * var(--u));
  font-family:var(--font-display);
  color:var(--on-navy); opacity:.85; white-space:nowrap;
  pointer-events:none;
}
.tagrow > span{ display:flex; align-items:baseline; gap:calc(7 * var(--u)) }
.tag-a{ font-weight:700 }
.tag-s,.tag-v{ font-weight:400; text-transform:uppercase; letter-spacing:var(--ls-body) }

/* ================= proof, layout del v4 ==========================
   Dos columnas: texto y cifras a la izquierda, foto del equipo a la
   derecha, y la fila de logos cruzando por debajo. */

.proof{
  background:var(--paper); color:var(--navy);
  padding-inline:var(--gutter-x); align-content:center;
}
.proof__row{
  display:grid; grid-template-columns:1fr 1fr;
  gap:calc(72 * var(--u)); align-items:center;
}
.proof h2 em{ font-style:normal; color:var(--orange) }
.proof h2{
  margin:0;
  font-family:var(--font-display); font-weight:700;
  font-size:var(--fs-1); line-height:var(--lh-tight); letter-spacing:var(--ls-tight);
  color:var(--navy);
}
.proof__lede{
  margin:calc(14 * var(--u)) 0 0;
  font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-5); line-height:1.45; letter-spacing:var(--ls-body);
  color:rgb(4 40 90 / .8);
}

.stats{
  display:grid; grid-template-columns:1fr 1fr;
  gap:calc(14 * var(--u)); margin-top:calc(28 * var(--u));
}
.stat{
  border:1px solid rgb(4 40 90 / .18); border-radius:calc(14 * var(--u));
  padding:calc(16 * var(--u)) calc(18 * var(--u)); background:#fff;
}
.stat b{
  display:block;
  font-family:var(--font-display); font-weight:700;
  font-size:calc(34 * var(--u)); line-height:1; letter-spacing:var(--ls-tight);
}
.stat span{
  display:block; margin-top:calc(6 * var(--u));
  font-family:var(--font-display); font-size:var(--fs-ui);
  letter-spacing:var(--ls-body); opacity:.75;
}

.proof__media{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:calc(18 * var(--u)); display:block;
}

/* Tira de clientes. Ahora son los nombres compuestos en navy; cuando
   lleguen los SVG reales basta con meter un <img> o un <svg> dentro de
   cada .logo: el filtro los deja en el mismo navy sin tocar el fichero. */
.logos{
  display:grid; grid-template-columns:repeat(5, 1fr);
  gap:calc(40 * var(--u)) calc(24 * var(--u));
  margin-top:calc(72 * var(--u));
  align-items:center;
}
.logo{
  display:grid; place-items:center;
  min-height:calc(56 * var(--u));
  font-family:var(--font-display); font-weight:700;
  font-size:calc(22 * var(--u)); line-height:1.1; letter-spacing:var(--ls-tight);
  text-align:center; color:var(--navy); opacity:.72;
  transition:opacity var(--dur-1) var(--ease);
}
.logo:hover{ opacity:1 }
/* los logos vienen ya pasados a navy, con sus calados intactos.
   El alto máximo se afina por logo para que pesen parecido en la tira:
   los muy apaisados se limitan por ancho y los compactos por alto. */
.logo img{
  max-width:calc(150 * var(--u)); max-height:calc(38 * var(--u));
  width:auto; height:auto; object-fit:contain; display:block;
}
.logo--tall img{ max-height:calc(48 * var(--u)) }
.logo--wide img{ max-width:calc(124 * var(--u)) }

/* ================= footer, layout del v4 =========================
   Reserva a la izquierda con contacto y VU meter, formulario a la
   derecha, y la línea legal más el wordmark cruzando por abajo. */

.footer{
  background:var(--navy); color:var(--on-navy);
  /* 10-02: the same side gutter as every section above it (was 89u) */
  padding:calc(150 * var(--u)) var(--gutter-x) 0;
}
.f-row{
  display:grid; grid-template-columns:1fr 1fr;
  gap:calc(110 * var(--u));
  align-items:start;
}
.footer h2{
  margin:0;
  font-family:var(--font-display); font-weight:700;
  /* mismo paso que los titulares de Collection y proof */
  font-size:calc(72 * var(--u)); line-height:1.1; letter-spacing:var(--ls-tight);
}
.f-sub{
  margin:calc(14 * var(--u)) 0 0;
  font-family:var(--font-display); font-weight:400;
  font-size:calc(26 * var(--u)); line-height:1.4; letter-spacing:var(--ls-tight);
  opacity:.92;
}
.f-soft{
  margin:calc(18 * var(--u)) 0 0;
  font-family:var(--font-display); font-size:var(--fs-5);
  letter-spacing:var(--ls-body); opacity:.9;
}
.f-soft a{ color:#fff; text-decoration:none; border-bottom:1px solid var(--orange) }

.f-contact{
  display:grid; gap:calc(10 * var(--u)); margin-top:calc(30 * var(--u));
  font-family:var(--font-display); font-size:var(--fs-5);
  letter-spacing:var(--ls-body);
}
.f-contact b{
  display:block; margin-bottom:calc(2 * var(--u));
  /* mismo eyebrow que start small, think big o path one */
  /* orange on navy is 4.24:1: large text (700 at 18.67px or more) */
  font-weight:700; font-size:max(18.67px, calc(18 * var(--u))); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--orange);
}

/* VU meter, del footer del v4 */
.vu{
  display:flex; align-items:flex-end; gap:calc(5 * var(--u));
  height:calc(40 * var(--u)); margin-top:calc(52 * var(--u));
}
.vu i{
  display:block; width:calc(8 * var(--u));
  border-radius:2px; height:30%;
  background:#e79a1f;
  animation:vu 1.6s var(--ease) infinite alternate;
  animation-delay:calc(var(--d) * -1s);
}
@keyframes vu{ from{ height:20% } to{ height:95% } }

.f-form{ display:grid; grid-template-columns:1fr 1fr; gap:calc(12 * var(--u)); align-content:start }
.f-form input,
.f-form select,
.f-form textarea{
  width:100%; padding:calc(13 * var(--u)) calc(14 * var(--u));
  border:1px solid rgb(255 255 255 / .18); border-radius:calc(12 * var(--u));
  background:rgb(255 255 255 / .04); color:#fff;
  font-family:var(--font-display); font-size:calc(18 * var(--u)); letter-spacing:var(--ls-body);
}
.f-form input::placeholder,
.f-form textarea::placeholder{ color:rgb(244 244 244 / .6) }
.f-form input:focus,
.f-form select:focus,
.f-form textarea:focus{ outline:none; border-color:var(--orange) }
.f-form select{ grid-column:1 / -1; appearance:none; cursor:pointer;
  padding-right:max(40px, calc(44 * var(--u)));
  background-image:url("/assets/img/select-chevron.svg");
  background-repeat:no-repeat; background-position:right max(14px, calc(16 * var(--u))) center; background-size:12px 8px }
.f-form select option{ color:var(--navy) }
.f-form textarea{ grid-column:1 / -1; min-height:calc(110 * var(--u)); resize:vertical }
.f-form .btn{
  grid-column:1 / -1; width:100%;
  /* paper on orange is 3.09:1: large text (700 at 18.67px or more) */
  font-weight:700; font-size:max(18.67px, calc(18 * var(--u)));
  background:var(--orange); border-color:var(--orange); color:var(--paper);
  cursor:pointer;
}
.f-form .btn:hover{ filter:brightness(1.1) }

.f-legal{
  margin-top:calc(96 * var(--u)); padding:calc(24 * var(--u)) 0;
  border-top:1px solid rgb(255 255 255 / .18);
  display:flex; flex-wrap:wrap; gap:calc(18 * var(--u));
  font-family:var(--font-meta); font-size:max(14px, var(--fs-6));
  /* no uppercase: the line carries "ideafoster", which stays lowercase */
  letter-spacing:var(--ls-caps); opacity:.75;
}
.f-legal span:last-child{ margin-left:auto }

.f-mark{
  display:flex; align-items:baseline; gap:.2em;
  padding-top:calc(40 * var(--u));
  font-family:var(--font-display); font-weight:800;
  font-size:calc(190 * var(--u)); line-height:.85; letter-spacing:-.05em;
  overflow:clip; white-space:nowrap;
}
.f-mark small{ font-weight:300; font-size:.28em; letter-spacing:.02em }

/* ================= phones and short landscape ===================== */

/* ================= iPhone primero ==================================
   Por debajo de 820px la unidad de diseño pasa a 1px y la escala la
   llevan clamps sobre el ancho real. Los raíles de scroll se convierten
   en flujo normal y los lavados de color se fijan, porque en vertical
   no hay recorrido suficiente para que se lean como transición. */

@media (max-width:820px){

  :root{
    --u:1px;
    --m-display:clamp(38px, 11vw, 56px);
    --m-1:clamp(27px, 7.4vw, 36px);
    --m-2:clamp(22px, 5.8vw, 27px);
    --m-3:clamp(16px, 4.3vw, 18px);
    --m-4:clamp(14px, 3.7vw, 16px);
  }

  .section{ min-height:auto; display:block; overflow:clip }
  .hero{ min-height:100svh; display:flex; overflow:visible }

  /* ---------- barra ----------
     En movil es una sola fila y una sola altura: marca a la izquierda,
     CTA e idioma pegados a la derecha. El menu no aparece, ni al bajar
     ni pegada arriba. Para recuperarlo, quita el display:none de .nav y
     devuelvele grid-column:1 / -1; grid-row:2. */
  .bar{ padding:22px 24px }
  .bar--solid{ padding-block:12px }
  .bar__in{ grid-template-columns:auto 1fr; column-gap:12px }
  .wordmark{ grid-column:1; grid-row:1; font-size:22px }
  .nav{ display:none }
  .bar__right{ grid-column:2; grid-row:1; justify-self:end; gap:12px }
  .bar__cta{ height:34px; padding:0 14px; font-size:12px }
  .lang{ font-size:14px; gap:9px }
  .section,.footer{ scroll-margin-top:72px }

  /* ---------- hero ---------- */
  .hero{ padding:8px }
  .hero__media{ border-radius:20px }
  .hero__bottom{
    left:18px; right:18px; bottom:20px;
    flex-direction:column; align-items:stretch; gap:18px;
  }
  .hero__copy{ max-width:none }
  .hero__title{ font-size:var(--m-display); letter-spacing:-.03em }
  .hero__lede{ width:auto; margin-top:14px; font-size:var(--m-3) }

  /* ---------- statement y las dos puertas ---------- */
  /* el lavado necesita recorrido lateral que aquí no hay, así que los
     colores se fijan y el texto se muestra entero */
  .statement{
    padding:80px 20px 70px;
    background:var(--paper) !important; color:var(--navy) !important;
  }
  .statement__body{ width:auto; font-size:var(--m-1); line-height:1.24 }
  .statement__body--end{ font-size:var(--m-2); margin-top:28px !important }
  .statement__body w{ opacity:1 !important }
  .statement__media{ width:auto; margin-top:44px; border-radius:16px }
  .doors__grid{ grid-template-columns:1fr; gap:16px; margin-top:44px }
  .door{ min-height:0; padding:28px 24px; border-radius:24px }
  .door__k{ font-size:13px; margin-bottom:10px }
  .door h2{ font-size:var(--m-2) }
  .door__p{ font-size:var(--m-3); margin-bottom:22px }

  /* ---------- sessions ---------- */
  .sessions{ padding:70px 20px; background:var(--navy) !important }
  .sessions__k,
  .sessions__top > *,
  .ses{ opacity:1 !important; transform:none !important }
  .sessions__top{ grid-template-columns:1fr; gap:16px; margin-bottom:38px }
  .sessions__top h2{ font-size:var(--m-1) }
  .sessions__top p{ font-size:var(--m-3) }
  .ses{ grid-template-columns:1fr; gap:18px; padding:24px 0 }
  .ses__n{ font-size:16px; margin-bottom:6px }
  .ses h3{ font-size:var(--m-2); margin-bottom:8px }
  .ses p{ font-size:var(--m-4) }
  .ses__tags{ justify-content:flex-start; gap:10px; flex-wrap:wrap }
  .tag{ width:auto; min-width:0; height:38px; padding:0 16px; font-size:14px }

  /* ---------- collection ---------- */
  .coll{
    height:auto; padding:70px 20px;
    background:var(--paper) !important; color:var(--navy) !important;
  }
  .coll__stage{ position:static; height:auto; padding:0; overflow:visible }
  .coll__head,.coll__lede,.paths3,.coll__dots{ opacity:1 !important }
  .coll__head{ width:auto; font-size:var(--m-1); margin-bottom:16px }
  .coll__lede{ width:auto; font-size:var(--m-3); margin-bottom:44px }
  /* los tres caminos dejan de relevarse y se apilan */
  .paths3{ min-height:0; display:grid; gap:52px }
  .path{
    position:static; opacity:1 !important; transform:none !important;
    pointer-events:auto;
    grid-template-columns:1fr; gap:22px; justify-items:start;
  }
  .path .path__k{ font-size:14px; margin-bottom:10px }
  .path h3{ font-size:var(--m-2); margin-bottom:12px }
  .path p{ font-size:var(--m-3) }
  .path__art{ width:min(300px, 78%); align-self:start }
  .path__art--stack{ width:min(230px, 62%) }
  .coll__dots{ display:none }

  /* ---------- the full program ---------- */
  .phases{ height:auto }
  .phases__stage{ position:static; height:auto; padding:70px 20px; overflow:visible }
  .phases__head{ flex-direction:column; align-items:flex-start; gap:20px; margin-bottom:18px }
  .phases__head h2{ font-size:var(--m-1) }
  .phases__head > *,.phases__lede,.phase__rest{ opacity:1 !important }
  .phases__lede{ width:auto; font-size:var(--m-3); margin-bottom:40px }
  .phases__grid{ grid-template-columns:1fr }
  .phase{
    height:auto; padding:26px 22px; --bo:1;
    border-radius:0 !important;
  }
  .phase + .phase{ margin-left:0; margin-top:-1px }
  .phases__grid > .phase:first-child{ border-radius:24px 24px 0 0 !important }
  .phases__grid > .phase:last-child{ border-radius:0 0 24px 24px !important }
  .phase__k{
    font-size:52px; margin-bottom:6px;
    transform:none !important; opacity:.4 !important; color:var(--c) !important;
  }
  .phase__rest{ margin-top:0 }
  .phase h3,.phase--cia h3{ font-size:20px }
  .phase p,.phase .chip{ font-size:var(--m-4) }
  .btn--gold{ height:44px; font-size:18.67px }

  /* ---------- proof ---------- */
  .proof{ padding:70px 20px }
  .proof__row{ grid-template-columns:1fr; gap:28px }
  .proof h2{ font-size:var(--m-1) }
  .proof__lede{ font-size:var(--m-3) }
  .stats{ gap:10px; margin-top:24px }
  .stat{ padding:14px 16px; border-radius:12px }
  .stat b{ font-size:26px }
  .stat span{ font-size:13px }
  .logos{ grid-template-columns:repeat(3,1fr); gap:26px 14px; margin-top:44px }
  /* Con 10 logos en tres columnas, Sabadell se quedaba solo en una cuarta
     fila. En movil sale Ocensa (8) y Sabadell (10) ocupa su hueco, asi que
     la rejilla cierra en 3x3. En escritorio siguen estando los diez. */
  .logos .logo:nth-child(8){ display:none }
  .logos .logo:nth-child(10){ order:1 }
  .logos .logo:nth-child(9){ order:2 }
  .logo img{ max-width:88px; max-height:30px }
  .logo--tall img{ max-height:36px }
  .logo--wide img{ max-width:76px }

  /* ---------- footer ---------- */
  .footer{ padding:70px 20px 0 }
  .f-row{ grid-template-columns:1fr; gap:36px }
  .footer h2{ font-size:var(--m-1) }
  .f-sub{ font-size:var(--m-3) }
  .f-soft,.f-contact{ font-size:var(--m-4) }
  .f-contact b{ font-size:18.67px }
  .vu{ margin-top:34px; height:32px }
  .vu i{ width:6px }
  .f-form{ grid-template-columns:1fr; gap:10px }
  .f-form input,.f-form select,.f-form textarea{ font-size:16px; padding:13px 14px }
  .f-form textarea{ min-height:120px }
  .f-form .btn{ height:48px; font-size:18.67px }
  .f-legal{
    margin-top:56px; padding:16px 0;
    flex-direction:column; gap:10px; font-size:14px;
  }
  .f-legal span:last-child{ margin-left:0 }
  .f-mark{ font-size:clamp(52px, 17vw, 96px); padding-top:26px }
}

/* ================= movimiento reducido ============================ */

@media (prefers-reduced-motion:reduce){
  .reveal,.lines i,.zoom{ opacity:1 !important; transform:none !important }
  .statement__body w{ opacity:1 !important }
  .phase__k{ transform:none !important }
  .phase__rest,.phases__head > *,.phases__lede{ opacity:1 !important }
  .phase{ --bo:1 }
  .sessions__k,.sessions__top > *,.ses{ opacity:1 !important; transform:none !important }
  .coll__head,.coll__lede,.paths3,.coll__dots{ opacity:1 !important }
  .bar{ transition:background-color .3s linear, padding .3s linear }
  .vu i,.cue__line{ animation:none }
  .vu i{ height:45% }
}

/* ---------------- tagline de cada fase --------------------------- */
.phase__tag{
  margin:0 0 calc(22 * var(--u));
  font-family:var(--font-display); font-weight:400; font-style:italic;
  font-size:calc(17 * var(--u)); line-height:1.35;
  letter-spacing:var(--ls-body); color:var(--navy); opacity:.72;
}

/* ------------- aire dentro de la fase y chips al pie -------------
   .phase ya era una columna flex con altura fija. Faltaba que el
   bloque de texto ocupase el resto para poder empujar el chip con
   margin-top:auto: asi las cuatro duraciones quedan a la misma altura
   aunque los parrafos midan distinto. */
.phase__rest{ flex:1; display:flex; flex-direction:column; min-height:0 }
.phase h3{ margin-bottom:calc(16 * var(--u)) }
.phase p{ margin-bottom:calc(24 * var(--u)) }
.phase .chip{ margin-top:auto; padding-top:calc(6 * var(--u)) }
/* Nada de altura fija. Con 560 el contenido no cabia y con 720 sobraba
   medio palmo, porque en pantallas anchas los parrafos ocupan menos
   lineas y el hueco crecia solo. Como las cuatro son celdas de la misma
   fila del grid, se estiran a la mas alta por si mismas: el hueco queda
   al minimo a cualquier ancho y el chip sigue anclado abajo. */
.phase{ height:auto }

/* El stage centra su contenido en 100svh, pero la barra es sticky y se
   comia el titular por arriba. Con este padding el centrado ocurre por
   debajo de la barra y "El programa completo" se lee entero junto con
   las tarjetas. */
.phases__stage{ padding-top:calc(96 * var(--u)) }
/* y se recupera algo de ese alto acercando el bloque de texto a la letra */
.phase__rest{ margin-top:calc(70 * var(--u)) }
/* el wordmark, siempre entero en Spark Orange */
.phase p em{ font-style:normal; color:inherit; font-weight:700 }

/* ============ barrido de luz en las letras y en Mixtape ===========
   Un duplicado en ::after con el mismo color que lleva la letra en ese
   momento, subido de brillo, y una mascara que lo cruza de izquierda a
   derecha. Como el duplicado hereda el color, el efecto vale igual con
   la palabra unida en dorado y con cada letra ya virada a su color de
   fase: no hay nada que sincronizar con el script que las pinta. */

.phase__k{
  color:transparent;
  background-image:linear-gradient(100deg,
    var(--lc, #c08023) 0 41%,
    color-mix(in srgb, var(--lc, #c08023) 42%, #fff) 50%,
    var(--lc, #c08023) 59% 100%);
  background-size:300% 100%;
  background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
  animation:mixGlow 4s linear infinite;
  /* el desfase por letra hace que, con la palabra unida, la luz recorra
     "audacia" de principio a fin en vez de encender las cuatro a la vez */
  animation-delay:calc(var(--gi,0) * .14s);
}

/* Mixtape no lleva duplicado: es un elemento inline y el ::after no
   caia exacto encima, asi que el texto parecia levantarse y doblarse.
   Aqui el degradado se pinta sobre el propio texto con background-clip,
   que no mueve nada: solo recorre la luz por dentro de las letras. */
/* Collection lleva el mismo barrido que Mixtape. Duracion distinta a
   proposito: si coinciden, las dos palabras encienden a la vez y se nota
   el truco. */
.coll__head em{
  color:transparent;
  background-image:linear-gradient(100deg,
    var(--orange) 0 42%, #ff9d3d 50%, var(--orange) 58% 100%);
  background-size:300% 100%;
  background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
  animation:mixGlow 4.9s linear infinite;
}

@keyframes mixGlow{
  0%       { background-position:100% 0 }
  55%,100% { background-position:0% 0 }
}

/* ---------------- el titular del footer entra con el scroll -------
   --fp lo mueve el script de 0 a 1 y llega a 1 justo cuando el scroll
   toca el final de la pagina. */
.footer h2{
  opacity:calc(.12 + .88 * var(--fp, 1));
  transform:translate3d(0, calc((1 - var(--fp, 1)) * 18 * var(--u)), 0);
  will-change:opacity, transform;
}

@media (prefers-reduced-motion:reduce){
  .phase__k{ animation:none; background:none; color:var(--lc, #c08023) }
  .coll__head em{ animation:none; color:var(--orange); background:none }
  .footer h2{ opacity:1; transform:none }
}

/* la trampa: fuera de pantalla pero no display:none, que algunos bots
   lo detectan y se lo saltan */
.f-trap{
  position:absolute !important; left:-9999px !important;
  width:1px !important; height:1px !important; opacity:0 !important;
  pointer-events:none;
}
.f-aviso{
  margin:calc(12 * var(--u)) 0 0;
  font-family:var(--font-display); font-size:calc(18 * var(--u));
  line-height:1.35; min-height:calc(24 * var(--u));
}
.f-aviso[data-estado="ok"]{ color:var(--paper, #f4f4f4) }
.f-aviso[data-estado="error"]{ color:var(--orange); font-weight:700; font-size:max(18.67px, calc(18.67 * var(--u))) }

/* ==================================================================
   audacIA v2, 21 September 2026
   Everything below is new. Nothing above was restyled: the only live
   rules touched are listed in CHANGES.md. New blocks follow the live
   convention (block__element, is-state). Sizes keep the design unit
   and add the v2 type floor: body never under 17px, labels never
   under 12px. --xu is the design unit on desktop and a fixed step on
   phones, because each .section recomputes --u from the viewport.
================================================================== */

/* ---------------- v2 fix to a live rule, approved by LG ------------
   fit() writes --fit on .phases__stage, but --u was only recomputed on
   .section and .footer, so the pinned program never shrank and was cut
   by about 30px at 1440 x 1024. */
.phases__stage{ --u:calc(var(--u-base) * var(--fit, 1)) }

/* a text link that opens a question */
.more{
  display:inline-block; margin-top:calc(18 * var(--u));
  font-family:var(--font-display); font-weight:400;
  font-size:max(17px, calc(20 * var(--u))); letter-spacing:var(--ls-body); line-height:1.3;
  color:inherit; text-decoration:none; border-bottom:1px solid var(--orange);
  transition:opacity var(--dur-1) var(--ease);
}
.more:hover{ opacity:.7 }

/* ================= hero, v2 additions ==============================
   Eyebrow above the title, two buttons under the sub, one trust line
   across the foot of the frame. All of it scales with the hero. */
.hero__bottom{ flex-wrap:wrap; row-gap:calc(26 * var(--u)) }
.hero__eyebrow{
  margin:0 0 calc(18 * var(--u));
  font-family:var(--font-display); font-weight:700;
  font-size:max(14px, calc(20 * var(--u))); letter-spacing:var(--ls-body); line-height:1.25;
  color:#fff;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:calc(14 * var(--u)); margin-top:calc(28 * var(--u)) }
.hero__cta .btn{ font-size:max(12px, calc(18 * var(--u))); font-weight:700 }
.btn--fill{ background:var(--orange); border-color:var(--orange); color:var(--paper); font-weight:700; font-size:max(18.67px, calc(18 * var(--u))) }
.btn--fill:hover{ filter:brightness(1.1); background:var(--orange); color:var(--paper) }
.hero__trust{
  flex:0 0 100%; margin:0; padding-top:calc(16 * var(--u));
  border-top:1px solid rgb(255 255 255 / .22);
  font-family:var(--font-display); font-weight:400;
  font-size:max(12px, calc(15 * var(--u))); letter-spacing:var(--ls-body); line-height:1.35;
  color:rgb(255 255 255 / .72);
}
@media (prefers-reduced-motion:no-preference){
  .hero__eyebrow{ animation:heroLede var(--dur-2) var(--ease) .2s both }
  .hero__cta{ animation:heroLede var(--dur-2) var(--ease) .44s both }
  .hero__trust{ animation:heroLede var(--dur-2) var(--ease) .54s both }
}

/* ================= two doors, v2 additions ======================== */
.door__p--lead{ margin-bottom:calc(12 * var(--u)) }
.door__a{ font-weight:700 }

/* ================= three things, shared frame =====================
   The program's column frame as three columns: rounded container,
   gold hairlines, a big static numeral where the letters sit. Used by
   What is a Session and by the program's three things. Own classes on
   purpose: the main script animates every .phase and .phase__k. */
.things__grid{ display:grid; grid-template-columns:repeat(3, 1fr); margin:0; padding:0; list-style:none }
.thing{
  --c:#c08023;
  padding:calc(24 * var(--u)) calc(39 * var(--u)) calc(34 * var(--u));
  min-height:calc(430 * var(--u));
  border:1px solid #c08023;
}
.thing + .thing{ margin-left:-1px }
.thing:first-child{ border-radius:calc(50 * var(--u)) 0 0 calc(50 * var(--u)) }
.thing:last-child{ border-radius:0 calc(50 * var(--u)) calc(50 * var(--u)) 0 }
.thing__n{
  display:block;
  font-family:var(--font-display); font-weight:700;
  font-size:max(56px, calc(92.37 * var(--u))); line-height:1.2; letter-spacing:-.04em;
  color:var(--c); opacity:.55;
}
.thing h3{
  margin:calc(36 * var(--u)) 0 calc(16 * var(--u));
  font-family:var(--font-display); font-weight:700;
  font-size:max(19px, calc(30 * var(--u))); line-height:1.15; letter-spacing:var(--ls-tight);
  color:var(--c);
}
.thing p{
  margin:0;
  font-family:var(--font-display); font-weight:400;
  font-size:max(17px, calc(20.32 * var(--u))); line-height:1.3; letter-spacing:var(--ls-body);
  color:inherit;
}

/* ================= what is a session ==============================
   Sits in wash one. The wash is anchored to this section's bottom
   edge, so the page turns navy as it leaves. Text takes the wash
   foreground, never a fixed navy. Opts out of fit(). */
.things{
  min-height:auto; height:auto; display:block; align-content:normal;
  padding:calc(120 * var(--u)) calc(89 * var(--u)) calc(130 * var(--u));
  background:var(--wash-bg, var(--paper));
  color:var(--wash-fg, var(--navy));
}
.things__h{
  margin:0 0 calc(56 * var(--u));
  font-family:var(--font-display); font-weight:700;
  font-size:max(34px, calc(80 * var(--u))); line-height:1.1; letter-spacing:var(--ls-tight);
  color:inherit;
}

/* ================= sessions, v2: the accordion =====================
   The rows are the live rows plus a toggle. The panel opens by growing
   a grid row from 0fr to 1fr, so nothing is measured. Rows are open by
   default and only close under .js, so with scripts off every example
   Session is on the page. Opts out of fit(). */
.sessions{ min-height:100svh; height:auto; align-content:start; padding-block:calc(110 * var(--u)) }
.ses{ --xu:var(--u); --mix-paper:#ebe6da; --mix-paper2:#ddd6c6; --mix-ink:#16284b; --mix-deep:#021a3d; row-gap:0 }
.ses:last-of-type{ border-bottom:1px solid rgb(244 244 244 / .25) }
.ses__tags{ flex-wrap:wrap; row-gap:calc(12 * var(--u)) }
.ses__toggle{
  all:unset; box-sizing:border-box; cursor:pointer;
  display:inline-flex; align-items:center; gap:calc(18 * var(--u));
}
.ses__toggle:focus-visible,.ses__theme:focus-visible,.mix button:focus-visible,.mix a:focus-visible{ outline:2px solid var(--orange); outline-offset:4px; border-radius:6px }
.ses__mark{ position:relative; flex:none; width:max(16px, calc(26 * var(--u))); height:max(16px, calc(26 * var(--u))); opacity:.8 }
.ses__mark::before,.ses__mark::after{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:max(2px, calc(2.4 * var(--u))); background:currentColor;
  transition:transform var(--dur-1) var(--ease);
}
.ses__mark::after{ transform:rotate(90deg) }
.ses[data-open="true"] .ses__mark::after{ transform:rotate(0deg) }

.ses__wrap{ grid-column:1 / -1; display:grid; grid-template-rows:1fr; transition:grid-template-rows var(--dur-2) var(--ease) }
.js .ses[data-open="false"] .ses__wrap{ grid-template-rows:0fr }
.ses__panel{
  min-height:0; overflow:hidden;
  display:grid; grid-template-columns:calc(430 * var(--xu)) minmax(0, 1fr);
  gap:calc(30 * var(--xu)) calc(64 * var(--xu)); align-items:stretch;
  perspective:2200px;
}
/* once the row has finished opening, the Mixtape may turn and cast its shadow past the panel */
.ses.is-settled .ses__panel{ overflow:visible }
.js .ses[data-open="false"] .ses__panel{ visibility:hidden; transition:visibility 0s var(--dur-2) }
.ses__panel > *{ margin-top:calc(44 * var(--xu)) }

/* the row's own text rule, .ses p, reaches every paragraph in the panel: each one below resets what it needs */
.ses .ses__label{
  margin:0 0 calc(8 * var(--xu));
  font-family:var(--font-display); font-weight:400;
  font-size:max(13px, calc(18 * var(--xu))); line-height:1.2; letter-spacing:var(--ls-body);
  text-transform:uppercase; color:var(--on-navy); opacity:.75;
}
.ses .ses__inst{
  margin:0 0 calc(18 * var(--xu));
  font-size:max(17px, calc(22 * var(--xu))); line-height:1.3; color:var(--on-navy);
}
.ses__themes{ list-style:none; margin:0; padding:0; border-bottom:1px solid rgb(244 244 244 / .25) }
.ses__theme{
  all:unset; box-sizing:border-box; cursor:pointer;
  display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:calc(14 * var(--xu));
  width:100%; min-height:max(48px, calc(64 * var(--xu)));
  padding:calc(10 * var(--xu)) calc(14 * var(--xu));
  border-top:1px solid rgb(244 244 244 / .25);
  font-family:var(--font-display); font-size:max(17px, calc(24 * var(--xu))); line-height:1.15; letter-spacing:var(--ls-tight);
  color:rgb(255 255 255 / .78);
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), padding var(--dur-1) var(--ease);
}
.ses__theme b{ font-weight:400; font-size:max(14px, .7em); color:rgb(255 255 255 / .6); letter-spacing:0 }
.ses__theme:hover{ background:rgb(244 244 244 / .06); color:#fff; padding-left:calc(22 * var(--xu)) }
.ses__theme[aria-pressed="true"]{ color:#fff; font-weight:700; background:rgb(244 244 244 / .1); box-shadow:inset max(3px, calc(4 * var(--xu))) 0 0 var(--orange) }
.ses__theme[aria-pressed="true"] b{ color:#fff; font-weight:700 }
.ses__theme em{
  display:none; font-style:normal; font-weight:700;
  font-size:max(12px, calc(13 * var(--xu))); letter-spacing:.08em; text-transform:uppercase;
  padding:max(3px, calc(4 * var(--xu))) max(9px, calc(11 * var(--xu))); border-radius:99px;
  background:var(--on-navy); color:var(--navy);
}
.ses__theme[aria-pressed="true"] em{ display:inline-block }

/* the eighteen example Sessions as plain HTML: what the script reads, and what shows with scripts off */
.ses__store{ grid-column:1 / -1 }
.js .ses__store{ display:none }
html:not(.js) .mix{ display:none }
.ses__ex{ margin-bottom:calc(30 * var(--xu)) }
.ses__ex h4{ margin:0 0 .3em; font-family:var(--font-display); font-weight:700; font-size:max(19px, calc(28 * var(--xu))); letter-spacing:var(--ls-tight); color:var(--on-navy) }
.ses .ses__ex p{ font-size:max(17px, calc(20 * var(--xu))); color:rgb(255 255 255 / .85) }
.ses__ex ol{ margin:.2em 0 .4em; padding-left:1.4em; font-family:var(--font-display); font-size:max(17px, calc(20 * var(--xu))); line-height:1.35; color:rgb(255 255 255 / .85) }
.mix__live{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

/* the four lines under the rows. No visual spec: built from existing parts, flagged for the designer */
.ses__notes{
  list-style:none; margin:calc(56 * var(--u)) 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:calc(18 * var(--u)) calc(64 * var(--u));
}
.ses__notes li{
  padding-top:calc(16 * var(--u)); border-top:1px solid rgb(244 244 244 / .25);
  font-family:var(--font-display); font-weight:400;
  font-size:max(17px, calc(20 * var(--u))); line-height:1.35; letter-spacing:var(--ls-body);
  color:rgb(255 255 255 / .8);
}

/* ================= the Mixtape ===================================
   One DOM. The design that ships is the strip (.mix[data-variant="tstrip"],
   in template.css); these are its shared parts. The other five designs
   were deleted on 10-02. Local colours are declared once on .ses as --mix-* tokens. */
/* ---------- the Mixtape, shared ---------- */
.mix{position:relative;box-sizing:border-box;min-height:calc(560 * var(--xu));font-family:var(--font-display);letter-spacing:var(--ls-body);text-align:left}
/* the slide-in is a class the script adds on open and removes when it ends, so it never outranks the flip */
.mix.is-entering{animation:mix-in var(--dur-3) var(--ease) both}
@keyframes mix-in{from{opacity:0;transform:translate3d(calc(80 * var(--xu)),0,0) rotate(1.2deg)}to{opacity:1;transform:none}}
.ses .mix p,.mix h4,.mix ol{margin:0}
.ses .mix p{color:inherit}
.ses .mix .mix__k{color:inherit;font-size:max(14px,calc(15 * var(--xu)))}
.mix__title{font-weight:700;line-height:1.04;letter-spacing:var(--ls-tight);text-wrap:balance}
.mix__k{font-size:max(14px,calc(15 * var(--xu)));text-transform:uppercase;letter-spacing:.1em;font-weight:700;opacity:.75}
.mix__note b,.mix__keep > b{display:block;font-size:max(14px,calc(14 * var(--xu)));letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:.25em}
.mix__note p{font-size:max(17px,calc(20 * var(--xu)));line-height:1.36}
.mix__foot{font-size:max(13px,calc(15 * var(--xu)));line-height:1.35;opacity:.8}
.mix__foot:empty{display:none}
.mix__list{padding:0;list-style:none;counter-reset:k;font-family:'Caveat','Patrick Hand','Kalam','Bradley Hand','Segoe Print',cursive;font-size:max(17px,calc(24 * var(--xu)));line-height:1.2}
.mix__list li{counter-increment:k;display:grid;grid-template-columns:1.5em minmax(0,1fr)}
.mix__list li::before{content:counter(k) "."}
.mix__brand{font-weight:700}.mix__brand i{font-style:normal;font-weight:400;font-size:max(13px,.36em);letter-spacing:.08em;margin-left:.45em;vertical-align:.1em}
.mix__vol,.mix__min,.mix__idx{font-size:max(13px,calc(18 * var(--xu)));text-transform:uppercase}
.mix__min b{font-weight:400}
.mix__book{width:auto;padding-inline:calc(26 * var(--xu));z-index:3}
.mix__reel{display:block;flex:none;width:calc(128 * var(--xu));height:calc(128 * var(--xu));border-radius:50%;
  --pack:calc(40% + 30% * (1 - var(--p)));
  background:
    radial-gradient(circle,#01112a 0 9%,transparent 9.6%),
    radial-gradient(circle,transparent 0 94%,rgb(255 255 255 / .38) 95% 98%,transparent 99%),
    radial-gradient(circle,transparent 0 30%,#3b2a1d 30.6% var(--pack),transparent calc(var(--pack) + .8%)),
    radial-gradient(circle,transparent 0 30%,#020f24 30.6%),
    repeating-conic-gradient(from 0deg,#e8edf5 0 16deg,#56688a 16deg 60deg)}
.mix__reel--r{--pack:calc(40% + 30% * var(--p))}
.mix__reels{display:flex;align-items:center;justify-content:center;gap:0}
.mix__band{display:block;height:max(2px,calc(3 * var(--xu)));width:calc(110 * var(--xu));background:#3b2a1d;align-self:flex-end;margin-bottom:calc(14 * var(--xu))}
.mix.is-loading .mix__reel{animation:mix-spin .95s cubic-bezier(.3,.1,.2,1)}
@keyframes mix-spin{to{transform:rotate(900deg)}}
.mix.is-loading .mix__title,.mix.is-loading .mix__notes > *,.mix.is-loading .mix__list{animation:mix-swap .95s var(--ease)}
@keyframes mix-swap{0%{opacity:1;transform:none}40%{opacity:0;transform:translate3d(0,calc(-14 * var(--xu)),0)}50%{opacity:0;transform:translate3d(0,calc(16 * var(--xu)),0)}100%{opacity:1;transform:none}}
.mix__scale{font-size:max(13px,calc(11 * var(--xu)));letter-spacing:.3em;color:rgb(244 244 244 / .55)}

.mix__transport .tag{cursor:pointer;background:none;font-size:max(14px,calc(15 * var(--xu)));height:max(44px,calc(46 * var(--xu)));transition:background var(--dur-1) var(--ease),opacity var(--dur-1) var(--ease)}
.mix__transport .tag:hover{opacity:1;background:rgb(244 244 244 / .1)}
.mix__vu{display:flex;align-items:flex-end;gap:calc(5 * var(--xu));margin:0 0 0 calc(10 * var(--xu));height:calc(34 * var(--xu))}
.mix__vu i{display:block;width:calc(8 * var(--xu));border-radius:2px;height:30%;background:#e79a1f;animation:vu 1.6s var(--ease) infinite alternate;animation-delay:calc(var(--d) * -1s)}
.mix__vu i{animation-play-state:paused}
.mix.is-loading .mix__vu i{animation-play-state:running;animation-duration:.35s}

/* ---------- each Session gets its own shell colour ---------- */
.ses .mix{--shell:#de6a07}
.ses[data-row="qw"] .mix{--shell:#045ab4}
.ses[data-row="dd"] .mix{--shell:#a63a10}

/* ---------- the turn-over (Side A / Side B) ---------- */
.ses__panel{perspective:2200px}
.mix.is-flipping{animation:mix-flip .9s var(--ease)}
@keyframes mix-flip{0%{transform:rotateY(0)}49.9%{transform:rotateY(90deg)}50%{transform:rotateY(-90deg)}100%{transform:rotateY(0)}}

/* ---------- Mixtape: two-state labels are two keyed spans, CSS shows one.
   No script ever writes inside a keyed element, so a language switch cannot undo a state. */
.mix__keep-b,.mix__flip-b{ display:none }
.mix[data-side="b"] .mix__keep-a,.mix[data-side="b"] .mix__flip-a{ display:none }
.mix[data-side="b"] .mix__keep-b,.mix[data-side="b"] .mix__flip-b{ display:inline }
.ses .mix .mix__foot{ font-size:max(13px, calc(15 * var(--xu))) }

/* the longer v2 lede takes the preview's smaller step */
.sessions .sessions__top p{ font-size:max(17px, calc(22 * var(--u))); line-height:1.35 }

/* ================= how a session runs ==============================
   Sits in wash two, which is anchored to this section's top edge.
   Nothing reads until the paper has landed (is-lit), as in Collection.
   Base state is four stacked blocks: that is what phones, reduced
   motion and scripts off get. The two treatments sit on top. */
.runs{
  min-height:auto; height:auto; display:block; align-content:normal;
  background:var(--wash2-bg, var(--paper));
  color:var(--wash2-fg, var(--navy));
  overflow:visible;
}
.runs__stage{ padding:calc(120 * var(--u)) calc(123 * var(--u)) }
.runs__h,.runs__panes,.runs__dots{ opacity:0; transition:opacity var(--dur-2) var(--ease) }
.runs__panes{ transition-delay:.08s }
.runs__dots{ transition-delay:.16s }
.runs.is-lit .runs__h,.runs.is-lit .runs__panes,.runs.is-lit .runs__dots{ opacity:1 }
.runs__h{
  margin:0 0 calc(70 * var(--u)); text-align:center;
  font-family:var(--font-display); font-weight:700;
  font-size:max(34px, calc(72 * var(--u))); line-height:1.1; letter-spacing:var(--ls-tight);
  color:inherit;
}
.runs__panes{ display:grid; gap:calc(60 * var(--u)) }
.runs__pane h3{
  margin:0 0 calc(20 * var(--u));
  font-family:var(--font-display); font-weight:700;
  font-size:max(24px, calc(54 * var(--u))); line-height:1.05; letter-spacing:var(--ls-tight); color:inherit;
}
.runs__pane p{
  margin:0;
  font-family:var(--font-display); font-weight:400;
  font-size:max(17px, calc(26 * var(--u))); line-height:1.45; letter-spacing:var(--ls-tight);
  color:inherit; opacity:.85;
}
.runs__n{
  display:block;
  font-family:var(--font-display); font-weight:700;
  font-size:calc(300 * var(--u)); line-height:.9; letter-spacing:-.04em;
  color:var(--c, #c08023); opacity:.55;
}
.runs__dots{ display:none }

/* ---------- the flow of a Session: the pinned scene, four panes.
   Four panes cost three steps of 85svh. Only with scripts and motion: the
   main loop swaps the panes. */
@media (min-width:821px) and (prefers-reduced-motion:no-preference){
  html.js .runs{ height:calc(100svh + 3 * 85svh); scroll-margin-top:0 }
  html.js .runs__stage{
    position:sticky; top:0; height:100svh; overflow:clip;
    display:grid; align-content:center; justify-items:center; padding-block:0;
  }
  html.js .runs__h{ margin-bottom:calc(90 * var(--u)) }
  html.js .runs__panes{ position:relative; display:block; width:100%; min-height:calc(400 * var(--u)) }
  html.js .runs__pane{
    position:absolute; inset:0;
    display:grid; grid-template-columns:calc(560 * var(--u)) calc(300 * var(--u));
    justify-content:center; align-items:center; gap:calc(80 * var(--u));
    opacity:0; transform:translate3d(0, calc(30 * var(--u)), 0);
    transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
    pointer-events:none;
  }
  html.js .runs__pane.is-on{ opacity:1; transform:none; pointer-events:auto }
  html.js .runs__n{ text-align:center }
  html.js .runs__dots{ display:flex; justify-content:center; gap:calc(10 * var(--u)); margin-top:calc(56 * var(--u)) }
  .runs__dots b{ width:calc(30 * var(--u)); height:2px; background:currentColor; opacity:.25; transition:opacity var(--dur-1) var(--ease) }
  .runs__dots b.is-on{ opacity:1; background:var(--orange) }
}
/* stacked state (reduced motion, scripts off): numeral beside the text, smaller */
.runs__pane{ display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:calc(60 * var(--u)); max-width:calc(1000 * var(--u)); margin-inline:auto; width:100% }

/* ================= after the session, v2 addition ================== */
.coll__more{ margin-top:calc(36 * var(--u)); opacity:0; transition:opacity var(--dur-2) var(--ease) .3s }
.coll.is-lit .coll__more{ opacity:1 }
.coll.is-lit .coll__more:hover{ opacity:.7 }

/* ================= the full program, v2: the loop ==================
   Three parts on paper: three things to know, the loop with its four
   phases, the same loop at three sizes. Opts out of fit(), may be taller
   than a screen. (r10 program page; program.html is rebuilt from
   program_FINAL.html, which does not use .plan / .loop__list / .sizes.) */

.plan{
  --xu:var(--u);
  min-height:auto; height:auto; display:block; align-content:normal;
  padding:calc(130 * var(--u)) calc(89 * var(--u)) calc(130 * var(--u));
  background:var(--paper); color:var(--navy);
}
.plan__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:calc(40 * var(--u)); margin-bottom:calc(48 * var(--u)) }
.plan__head h2{
  margin:0;
  font-family:var(--font-display); font-weight:700;
  font-size:max(34px, calc(80 * var(--u))); line-height:1.1; letter-spacing:var(--ls-tight); color:var(--navy);
}
.plan__head .btn--gold{ flex:none; font-size:max(18.67px, calc(16 * var(--u))); min-height:max(44px, calc(46 * var(--u))) }
.plan .things__grid{ margin-bottom:calc(130 * var(--u)) }
.plan .thing{ min-height:calc(380 * var(--u)) }

.loop__h{
  margin:0 0 calc(14 * var(--u));
  font-family:var(--font-display); font-weight:700;
  font-size:max(28px, calc(56 * var(--u))); line-height:1.05; letter-spacing:var(--ls-tight); color:var(--navy);
}
.loop__lede{
  margin:0 0 calc(64 * var(--u)); width:calc(772 * var(--u)); max-width:100%;
  font-family:var(--font-display); font-weight:400;
  font-size:max(18px, calc(28 * var(--u))); line-height:1.25; letter-spacing:var(--ls-tight); color:var(--navy);
}
.loop{ display:grid; grid-template-columns:calc(520 * var(--u)) minmax(0, 1fr); gap:calc(110 * var(--u)); align-items:center }
.loop__ring{ position:relative; width:100%; aspect-ratio:1 }
.loop__ring svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.loop__arc{ fill:none; stroke-width:7; stroke-linecap:round }
/* the four words are HTML over the ring, so they carry keys and the type floor. The paper pad keeps them clear of the arcs */
.loop__word{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%, -50%);
  padding:.15em .4em; background:var(--paper);
  font-family:var(--font-display); font-weight:700;
  font-size:max(17px, calc(36 * var(--u))); line-height:1; letter-spacing:var(--ls-tight); color:var(--c);
  white-space:nowrap;
}
.loop__list{ list-style:none; margin:0; padding:0 }
.loop__row{
  display:grid; grid-template-columns:calc(250 * var(--u)) minmax(0, 1fr); column-gap:calc(24 * var(--u)); align-items:start;
  padding:calc(18 * var(--u)) 0; border-top:1px solid rgb(192 128 35 / .5);
}
.loop__row:last-child{ border-bottom:1px solid rgb(192 128 35 / .5) }
.loop__row h3{ margin:0; font:inherit }
.loop__name{
  all:unset; box-sizing:border-box; cursor:pointer; display:block; min-height:44px;
  font-family:var(--font-display); font-weight:700;
  font-size:max(20px, calc(27.71 * var(--u))); line-height:1.15; letter-spacing:var(--ls-tight); color:var(--c);
}
.loop__name:hover{ text-decoration:underline; text-underline-offset:.15em }
.loop__name:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:6px }
.loop__sum{ grid-column:2 }
.loop__sum p,.loop__more p{
  margin:0 0 calc(8 * var(--u));
  font-family:var(--font-display); font-weight:400;
  font-size:max(17px, calc(20.32 * var(--u))); line-height:1.3; letter-spacing:var(--ls-body); color:var(--navy);
}
.loop__sum .loop__tag{ font-style:italic; color:var(--navy) }
.loop__more p em{ font-style:normal; color:inherit; font-weight:700 }
.loop .chip,.phover .chip{
  display:inline-flex; align-items:center; gap:calc(13 * var(--u));
  font-family:var(--font-display); font-weight:400;
  font-size:max(15px, calc(20.32 * var(--u))); letter-spacing:var(--ls-body); color:var(--navy);
}
.loop .chip svg,.phover .chip svg{ width:max(16px, calc(18 * var(--u))); height:max(16px, calc(18 * var(--u))); fill:none; stroke:#c08023; stroke-width:1.6; flex:none }
.loop__sum .loop__hint{ display:none; margin:calc(8 * var(--u)) 0 0; font-size:max(14px, calc(15 * var(--u))); color:rgb(4 40 90 / .72); letter-spacing:var(--ls-body) }
.js .loop__sum .loop__hint{ display:block }
/* with scripts off the paragraph and the end block sit under each row; with scripts on they open full screen */
.loop__more{ grid-column:2; padding-top:calc(14 * var(--u)) }
.js .loop__more{ display:none }
.phase-end{ margin:calc(6 * var(--u)) 0 0; padding:calc(16 * var(--u)) calc(20 * var(--u)); border-radius:calc(22 * var(--u)); background:rgb(4 40 90 / .05) }
.phase-end b{
  display:block; margin-bottom:6px;
  font-family:var(--font-display); font-weight:700;
  font-size:max(14px, calc(14 * var(--u))); text-transform:uppercase; letter-spacing:.06em; color:rgb(4 40 90 / .72);
}
.loop__more .phase-end p,.phover .phase-end p{ margin:0 }

.sizes{ margin-top:calc(130 * var(--u)); display:grid; grid-template-columns:calc(420 * var(--u)) minmax(0, 1fr); gap:calc(80 * var(--u)); align-items:center }
.sizes h3{
  margin:0 0 calc(16 * var(--u));
  font-family:var(--font-display); font-weight:700;
  font-size:max(26px, calc(44 * var(--u))); line-height:1.1; letter-spacing:var(--ls-tight); color:var(--navy);
}
.sizes p{
  margin:0;
  font-family:var(--font-display); font-weight:400;
  font-size:max(17px, calc(22 * var(--u))); line-height:1.35; letter-spacing:var(--ls-body); color:var(--navy);
}
.sizes__art{ position:relative; padding-bottom:calc(44 * var(--u)) }
.sizes__art svg{ width:100%; height:auto; display:block; overflow:visible }
.sizes__l{
  position:absolute; bottom:0; left:var(--x); transform:translateX(-50%); white-space:nowrap;
  font-family:var(--font-display); font-weight:400;
  font-size:max(12px, calc(18 * var(--u))); letter-spacing:var(--ls-body); color:var(--navy);
}

/* ---------- the phase, opened to the size of the screen ------------
   Lives at body level: a sticky or clipped ancestor would trap a fixed
   child. --u here is the root unit, no section fit applies. */
.phover{
  position:fixed; inset:0; z-index:90; overflow:auto;
  background:var(--paper); color:var(--navy);
  display:grid; place-items:center;
  padding:calc(60 * var(--u)) calc(90 * var(--u));
  animation:phover-in var(--dur-2) var(--ease);
}
.phover[hidden]{ display:none }
@keyframes phover-in{ from{ opacity:0; transform:scale(.94) } }
.phover__in{ --c:#c08023; display:grid; grid-template-columns:auto minmax(0, 1fr); gap:calc(30 * var(--u)) calc(90 * var(--u)); align-items:start; max-width:calc(1240 * var(--u)) }
.phover__k{ font-family:var(--font-display); font-weight:700; font-size:calc(240 * var(--u)); line-height:.9; letter-spacing:-.04em; color:var(--c); opacity:.5 }
.phover__txt h3{ margin:0 0 calc(14 * var(--u)); font-family:var(--font-display); font-weight:700; font-size:max(28px, calc(64 * var(--u))); line-height:1.02; letter-spacing:var(--ls-tight); color:var(--c) }
.phover__txt p{ margin:0 0 calc(22 * var(--u)); font-family:var(--font-display); font-weight:400; font-size:max(17px, calc(28 * var(--u))); line-height:1.3; letter-spacing:var(--ls-body); max-width:calc(820 * var(--u)) }
.phover__txt p em{ font-style:normal; color:inherit; font-weight:700 }
.phover__txt .phover__tag{ font-style:italic; color:var(--navy); font-size:max(17px, calc(24 * var(--u))) }
.phover .phase-end{ max-width:calc(820 * var(--u)); margin-bottom:calc(22 * var(--u)) }
.phover .chip{ font-size:max(16px, calc(24 * var(--u))) }
.phover__nav{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:calc(14 * var(--u)); margin-top:calc(10 * var(--u)) }
.phover__nav .btn{ cursor:pointer; min-height:44px; font-weight:700; font-size:max(18.67px, calc(16 * var(--u))) }

/* ================= questions =======================================
   Native details and summary, so every answer is in the HTML and it
   works with scripts off. Rows follow the Session row pattern:
   hairlines, display type, the accordion's plus and minus mark. On
   paper, between proof and the footer. Opts out of fit(). */
.qa{
  min-height:auto; height:auto; display:block; align-content:normal;
  padding:calc(130 * var(--u)) var(--gutter-x) calc(140 * var(--u));
  background:var(--paper); color:var(--navy);
}
.qa__h{
  margin:0 0 calc(64 * var(--u));
  font-family:var(--font-display); font-weight:700;
  font-size:max(34px, calc(72 * var(--u))); line-height:1.1; letter-spacing:var(--ls-tight); color:var(--navy);
}
.qa__cols{ display:grid; grid-template-columns:1fr 1fr; gap:calc(72 * var(--u)); align-items:start }
.qa__group{ margin-bottom:calc(64 * var(--u)) }
.qa__group h3{
  margin:0 0 calc(18 * var(--u));
  font-family:var(--font-display); font-weight:400;
  font-size:max(14px, calc(18 * var(--u))); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--rust);
}
.qa__item{ border-top:1px solid rgb(4 40 90 / .25); scroll-margin-top:calc(110 * var(--u)) }
.qa__item:last-child{ border-bottom:1px solid rgb(4 40 90 / .25) }
.qa__item summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:calc(20 * var(--u));
  min-height:44px; padding:calc(18 * var(--u)) 0;
  font-family:var(--font-display); font-weight:700;
  font-size:max(19px, calc(28 * var(--u))); line-height:1.15; letter-spacing:var(--ls-tight); color:var(--navy);
}
.qa__item summary::-webkit-details-marker{ display:none }
.qa__item summary:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:6px }
.qa__mark{ position:relative; width:max(16px, calc(22 * var(--u))); height:max(16px, calc(22 * var(--u))); opacity:.8 }
.qa__mark::before,.qa__mark::after{ content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:currentColor; transition:transform var(--dur-1) var(--ease) }
.qa__mark::after{ transform:rotate(90deg) }
.qa__item[open] .qa__mark::after{ transform:rotate(0deg) }
.qa__a{ padding:0 calc(40 * var(--u)) calc(26 * var(--u)) 0 }
.qa__a p,.qa__a li{
  margin:0 0 calc(12 * var(--u));
  font-family:var(--font-display); font-weight:400;
  font-size:max(17px, calc(20 * var(--u))); line-height:1.45; letter-spacing:var(--ls-body); color:rgb(4 40 90 / .85);
}
.qa__a ul{ list-style:none; margin:0; padding:0 }
.qa__a li b{ font-weight:700; color:var(--navy) }
.qa__item.is-flash summary{ color:var(--rust) }

/* ================= v2 phones =======================================
   A new block at the very end on purpose: the live file has base rules
   after its own phone block that already beat it. Everything in px,
   because --u collapses inside a section on phones. */
@media (max-width:820px){

  /* ---- fixes to live phone defects, approved by LG ---- */
  .sessions__k{ font-size:13px; margin-bottom:10px }                                   /* was 4.9px */
  .door .btn{ width:auto; min-width:0; height:44px; padding:0 20px; font-size:14px }  /* was 4.9px text, 12px tall */
  .f-aviso{ margin-top:12px; font-size:15px; min-height:22px }                          /* was 4.9px */

  .more{ margin-top:14px; font-size:17px }

  /* ---- hero ---- */
  .hero__bottom{ flex-wrap:nowrap; row-gap:0 }
  .hero__eyebrow{ margin-bottom:12px; font-size:14px }
  .hero__cta{ gap:10px; margin-top:18px }
  .hero__cta .btn{ min-width:0; height:44px; padding:0 18px; font-size:13px }
  .hero__trust{ flex:none; padding-top:12px; font-size:12px }
  .door__p--lead{ margin-bottom:10px }

  /* ---- three things and what is a session ---- */
  .things{ padding:70px 20px; background:var(--paper) !important; color:var(--navy) !important }
  .things__h{ font-size:var(--m-1); margin-bottom:28px }
  .things__grid{ grid-template-columns:1fr }
  .thing{ min-height:0; padding:18px 22px 24px }
  .thing + .thing{ margin:-1px 0 0 }
  .things__grid > .thing:first-child{ border-radius:24px 24px 0 0 }
  .things__grid > .thing:last-child{ border-radius:0 0 24px 24px }
  .thing__n{ font-size:52px }
  .thing h3{ margin:8px 0 10px; font-size:20px }
  .thing p{ font-size:17px }

  /* ---- sessions: the accordion ---- */
  .sessions{ min-height:0; padding:70px 20px }
  .ses{ --xu:.72px }
  .ses__toggle{ gap:10px; min-height:44px }
  .ses__tags{ row-gap:10px }
  .ses__panel{ grid-template-columns:minmax(0, 1fr); gap:0 }
  .ses__panel > *{ margin-top:22px }
  .ses__theme em{ font-size:12px }
  .mix{min-height:0}
  .mix__spine span{writing-mode:horizontal-tb;transform:none;white-space:normal}
  .mix__book{min-height:44px}
  .ses__notes{ grid-template-columns:1fr; gap:14px; margin-top:36px }
  .ses__notes li{ padding-top:14px; font-size:17px }

  /* ---- how a session runs: stacked, colours pinned, nothing gated ---- */
  .runs{ background:var(--paper) !important; color:var(--navy) !important }
  .runs__stage{ padding:70px 20px }
  .runs__h,.runs__panes{ opacity:1 !important }
  .runs__h{ margin-bottom:32px; text-align:left; font-size:var(--m-1) }
  .runs__panes{ gap:36px }
  .runs__pane{ grid-template-columns:1fr; gap:6px; max-width:none }
  .runs__n{ order:-1; font-size:64px }
  .runs__pane h3{ margin-bottom:10px; font-size:var(--m-2) }
  .runs__pane p{ font-size:17px }
  .coll__more{ margin-top:28px; opacity:1 !important }

  /* ---- the full program: the loop ---- */
  .plan{ padding:70px 20px }
  .plan__head{ flex-direction:column; gap:18px; margin-bottom:28px }
  .plan__head h2{ font-size:var(--m-1) }
  .plan__head .btn--gold{ height:44px; font-size:18.67px }
  .plan .things__grid{ margin-bottom:56px }
  .plan .thing{ min-height:0 }
  .loop__h{ font-size:var(--m-2); margin-bottom:10px }
  .loop__lede{ width:auto; margin-bottom:32px; font-size:18px }
  .loop{ grid-template-columns:minmax(0, 1fr); gap:36px }
  .loop__ring{ max-width:340px; margin:0 auto }
  .loop__word{ font-size:20px }
  .loop__row{ grid-template-columns:minmax(0, 1fr); row-gap:6px; padding:16px 0 }
  .loop__sum,.loop__more{ grid-column:1 }
  .loop__name{ font-size:20px }
  .loop__sum p,.loop__more p{ margin-bottom:8px; font-size:17px }
  .loop__sum .loop__hint{ margin-top:8px; font-size:14px }
  .loop .chip,.phover .chip{ gap:10px; font-size:16px }
  .loop .chip svg,.phover .chip svg{ width:16px; height:16px }
  .phase-end{ margin-top:6px; padding:14px 16px; border-radius:16px }
  .phase-end b{ font-size:14px }
  .sizes{ grid-template-columns:minmax(0, 1fr); gap:32px; margin-top:64px }
  .sizes h3{ margin-bottom:12px; font-size:var(--m-2) }
  .sizes p{ font-size:17px }
  .sizes__art{ padding-bottom:30px }
  .sizes__l{ font-size:12px }
  .phover{ padding:24px 20px; place-items:start }
  .phover__in{ grid-template-columns:minmax(0, 1fr); gap:8px }
  .phover__k{ font-size:96px }
  .phover__txt h3{ margin-bottom:10px; font-size:28px }
  .phover__txt p{ margin-bottom:14px; font-size:17px; max-width:none }
  .phover__txt .phover__tag{ font-size:17px }
  .phover .phase-end{ margin-bottom:14px; max-width:none }
  .phover__nav{ gap:10px; margin-top:6px }
  .phover__nav .btn{ min-width:0; height:44px; padding:0 16px; font-size:18.67px }

  /* ---- questions ---- */
  .qa{ padding:70px 20px 80px }
  .qa__h{ margin-bottom:32px; font-size:var(--m-1) }
  .qa__cols{ grid-template-columns:minmax(0, 1fr); gap:0 }
  .qa__group{ margin-bottom:40px }
  .qa__group h3{ margin-bottom:12px; font-size:14px }
  .qa__item{ scroll-margin-top:80px }
  .qa__item summary{ gap:14px; padding:14px 0; font-size:19px }
  .qa__mark{ width:16px; height:16px }
  .qa__a{ padding:0 0 18px }
  .qa__a p,.qa__a li{ margin-bottom:10px; font-size:17px }

  /* ---- 10-02: inside a .section or .footer --u is re-derived from --u-base, so on a
     390 phone it is about 0.27px, not the 1px this block declares. Layout values written
     in --u get the px value they were drawn at (N design px = N px); type sizes are not
     touched here ---- */
  .btn{ min-height:44px; padding-inline:24px; border-radius:80px }
  .btn--gold{ padding-inline:20px }
  .phover__nav .btn{ padding:0 18px }
  .f-sub{ margin-top:14px }
  .f-soft{ margin-top:18px }
  .f-contact{ margin-top:30px; gap:10px }
  .f-contact b{ margin-bottom:2px }
  .vu{ gap:5px }
  .f-form input,.f-form select,.f-form textarea{ border-radius:12px }
  .tag{ border-radius:55px }
  .hero__card-row{ gap:10px }
  .hero .hero__copy{ max-width:none }
  .phases__stage{ padding-top:70px }
  .phase h3{ margin-bottom:16px }
  .phase p{ margin-bottom:24px }
  /* the 'audacIA · sessions · Vol. N' labels drawn on the cassette images cannot fit at
     the 14px floor on a phone-sized tape: they are put away under 820 */
  .tagrow{ display:none }
}

/* ================= v2 reduced motion ===============================
   The main loop never starts here, so nothing may wait for it. */
@media (prefers-reduced-motion:reduce){
  .ses__wrap{ transition:none }
  .mix.is-entering,.mix.is-loading,.mix.is-loading *,.mix.is-flipping{ animation:none !important }
  .mix__vu i{ animation:none; height:45% }
  .runs__h,.runs__panes,.runs__dots,.coll__more{ opacity:1 !important }
  .phover{ animation:none }
  /* 10-02: Home's tiles do not pin (the run has nothing to play here, so the section is as
     tall as its content) and the four letters take their own phase colour, because the
     script that turns them never runs */
  section.phases--press{ height:auto; min-height:0 }
  section.phases--press .phases__stage{ position:static; height:auto; padding-bottom:calc(96 * var(--u)) }
  .phases--press .phase__k{ color:var(--c) }
  /* guard: the Mixtape drawer and the cassette never animate (the k80 reel and slide
     keyframes live in sessions.html) */
  .mix,.mix *,.k80,.k80 *{ animation:none !important; transition:none !important }
}
/* fix to a live defect, approved by LG: on desktop with reduced motion no script
   ever marks a Collection path as live, so all three stayed invisible inside a
   pinned section three screens tall. Now covered by the desktop stack below,
   which every desktop gets, with or without motion. */

/* LG 10-02: three paths as a static stack by default, pending LG; the pinned scene is the alternative.
   Desktop only, with or without scripts or motion; phones stack the paths in the phone block. */
@media (min-width:821px){
  .coll{ height:auto }
  .coll__stage{ position:static; height:auto; overflow:visible; padding-block:calc(90 * var(--u)) }
  .paths3{ min-height:0; display:grid; gap:calc(70 * var(--u)) }
  .path{ position:static; opacity:1; transform:none; pointer-events:auto }
  .coll__dots{ display:none }
}

/* v2, scripts off: nothing may wait for a script. Everything gated is shown and
   chrome that cannot work is put away. Scoped to html.no-js: every page ships
   <html class="no-js"> and its first head script swaps the class for "js". */
html.no-js .reveal,html.no-js .lines i,html.no-js .zoom{ opacity:1 !important; transform:none !important }
html.no-js .sessions__k,html.no-js .sessions__top > *,html.no-js .ses{ opacity:1 !important; transform:none !important }
html.no-js .coll__head,html.no-js .coll__lede,html.no-js .paths3,html.no-js .coll__more,html.no-js .runs__h,html.no-js .runs__panes{ opacity:1 !important }
html.no-js .coll__dots,html.no-js .lang{ display:none !important }
html.no-js .bar{ position:absolute }
/* Home's tiles: the same static state reduced motion gets (10-02) */
html.no-js .phases__head > *,html.no-js .phases__lede,html.no-js .phase__rest{ opacity:1 !important }
html.no-js .phase{ --bo:1 }
html.no-js .phase__k{ transform:none !important }
html.no-js .phases--press .phase__k{ color:var(--c) }
html.no-js section.phases--press{ height:auto; min-height:0 }
html.no-js section.phases--press .phases__stage{ position:static; height:auto; padding-bottom:calc(96 * var(--u)) }
html.no-js .footer h2{ opacity:1; transform:none }

/* ===== split site: page header for pages without a hero, static backgrounds, chosen hero and doors ===== */
.wordmark{ white-space:nowrap }
.wordmark__by{ display:inline-block; margin-left:calc(10 * var(--u)); font-weight:400; font-size:calc(16 * var(--u)); letter-spacing:0; opacity:.78 }
@media (max-width:820px){ .wordmark__by{ font-size:12px; margin-left:6px } }
.pagehead{ min-height:auto; display:block; overflow:visible; background:var(--navy); color:var(--on-navy); padding:calc(200 * var(--u)) var(--gutter-x) calc(90 * var(--u)) }
.pagehead__h{ margin:0 0 calc(20 * var(--u)); font-family:var(--font-display); font-weight:800; font-size:max(40px, calc(96 * var(--u))); line-height:1; letter-spacing:-.035em; color:#fff }
.pagehead__p{ margin:0; max-width:calc(900 * var(--u)); font-family:var(--font-display); font-weight:400; font-size:max(17px, calc(26 * var(--u))); line-height:1.35; letter-spacing:var(--ls-body); color:rgb(255 255 255 / .85) }
.page--sub .bar{ background:rgb(4 40 90 / .86); padding-block:calc(18 * var(--u)); backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px) saturate(1.1) }
.page--sub .sessions{ background:var(--navy) !important; color:var(--on-navy) !important }
.page--sub .sessions__k,.page--sub .sessions__top > *,.page--sub .ses{ opacity:1 !important; transform:none !important }
.page--sub .sessions__top h2{ display:none }
.page--sub .statement{ background:var(--paper) !important; color:var(--navy) !important }
.page--home .statement{ background:var(--paper) !important; color:var(--navy) !important }
.page--sub .runs,.page--sub .coll{ background:var(--paper) !important; color:var(--navy) !important }
.page--sub .runs__h,.page--sub .runs__panes,.page--sub .runs__dots,.page--sub .coll__head,.page--sub .coll__lede,.page--sub .paths3,.page--sub .coll__more{ opacity:1 !important }
.qa .qa__h{ display:none }
.qa{ padding-top:calc(110 * var(--u)) }  /* 10-02: the first-section step Sessions uses (was 60u) */
/* home summaries */
.sum{ min-height:auto; display:block; overflow:visible; padding:calc(110 * var(--u)) var(--gutter-x) calc(110 * var(--u)); background:var(--navy); color:var(--on-navy) }
.sum__k{ margin:0 0 calc(12 * var(--u)); font-family:var(--font-display); font-weight:700; font-size:max(14px, calc(14 * var(--u))); letter-spacing:var(--ls-caps); text-transform:uppercase; color:rgb(244 244 244 / .72) }
.sum__h{ margin:0 0 calc(18 * var(--u)); font-family:var(--font-display); font-weight:700; font-size:max(34px, calc(72 * var(--u))); line-height:1.05; letter-spacing:var(--ls-tight); color:inherit }
.sum__p{ margin:0 0 calc(44 * var(--u)); max-width:calc(900 * var(--u)); font-family:var(--font-display); font-weight:400; font-size:max(17px, calc(24 * var(--u))); line-height:1.35; letter-spacing:var(--ls-body); color:inherit; opacity:.88 }
.sum__rows{ list-style:none; margin:0 0 calc(36 * var(--u)); padding:0; border-top:1px solid rgb(244 244 244 / .25) }
.sum__row{ display:grid; grid-template-columns:calc(60 * var(--u)) 1fr auto; gap:calc(24 * var(--u)); align-items:center; padding:calc(26 * var(--u)) 0; border-bottom:1px solid rgb(244 244 244 / .25); color:inherit; text-decoration:none }
.sum__row:hover h3{ color:var(--orange) }
.sum__n{ font-family:var(--font-display); font-weight:400; font-size:max(14px, calc(20 * var(--u))); color:rgb(244 244 244 / .72) }
.sum__row h3{ margin:0 0 calc(4 * var(--u)); font-family:var(--font-display); font-weight:700; font-size:max(22px, calc(40 * var(--u))); line-height:1.05; letter-spacing:var(--ls-tight); transition:color var(--dur-1) var(--ease) }
.sum__row p{ margin:0; font-family:var(--font-display); font-size:max(14px, calc(18 * var(--u))); line-height:1.35; opacity:.8 }
.sum__tags{ display:flex; gap:calc(10 * var(--u)) }
.sum--paper{ background:var(--paper); color:var(--navy) }
.sum--paper .sum__rows,.sum--paper .sum__row{ border-color:rgb(4 40 90 / .18) }
.loopline{ display:flex; flex-wrap:wrap; align-items:center; gap:calc(14 * var(--u)); margin:0 0 calc(40 * var(--u)); font-family:var(--font-display); font-weight:700; font-size:max(18px, calc(30 * var(--u))); letter-spacing:var(--ls-tight) }
.loopline i{ font-style:normal; opacity:.4 }
.loopline b:nth-child(1){ color:#c08023 } .loopline b:nth-child(3){ color:#a63a10 } .loopline b:nth-child(5){ color:#de6a07 } .loopline b:nth-child(7){ color:#045ab4 }
.sum .btn{ width:auto; min-width:0; padding:0 calc(26 * var(--u)); font-weight:700; font-size:max(14px, calc(16 * var(--u))) }
.sum--paper .btn{ border-color:var(--navy); color:var(--navy) } .sum--paper .btn:hover{ background:var(--navy); color:var(--paper) }
.qs{ list-style:none; margin:0 0 calc(30 * var(--u)); padding:0; border-top:1px solid rgb(4 40 90 / .18) }
.qs a{ display:flex; justify-content:space-between; gap:20px; padding:calc(20 * var(--u)) 0; border-bottom:1px solid rgb(4 40 90 / .18); font-family:var(--font-display); font-weight:700; font-size:max(19px, calc(28 * var(--u))); letter-spacing:var(--ls-tight); color:var(--navy); text-decoration:none }
.qs a:hover{ color:var(--orange) }
.stmt__cap{ margin:calc(14 * var(--u)) auto 0; width:calc(1160 * var(--u)); max-width:100%; font-family:var(--font-display); font-size:max(14px, calc(16 * var(--u))); color:rgb(4 40 90 / .7) }
@media (max-width:820px){
  .pagehead{ padding:110px 20px 40px } .pagehead__h{ font-size:var(--m-display) } .pagehead__p{ font-size:var(--m-3) }
  .sum{ padding:60px 20px } .sum__h{ font-size:var(--m-1) } .sum__p{ font-size:var(--m-3); margin-bottom:24px }
  .sum__row{ grid-template-columns:1fr; gap:8px; padding:16px 0 } .sum__n{ display:none } .sum__row h3{ font-size:var(--m-2) } .sum__row p{ font-size:15px }
  .sum__tags{ flex-wrap:wrap; gap:8px } .loopline{ font-size:18px; gap:8px }
  .qs a{ font-size:18px; padding:14px 0 }
  /* 10-02: px for the --u values that collapse on phones (see the v2 phone block) */
  .qa{ padding-top:70px }
  .sum__k{ margin-bottom:12px }
  .sum__h{ margin-bottom:18px }
  .sum__p{ max-width:none }
  .sum__rows{ margin-bottom:36px }
  .sum__row h3{ margin-bottom:4px }
  .sum .btn{ padding:0 26px }
}

/* ---------- the full program on Home: smaller tiles, press to fill the screen ---------- */
.phases__k{ margin:0 0 calc(12 * var(--u)); font-family:var(--font-display); font-weight:700; font-size:max(14px, calc(14 * var(--u))); letter-spacing:var(--ls-caps); text-transform:uppercase; color:rgb(4 40 90 / .72) }
.phases--press .phases__lede{ width:calc(1000 * var(--u)); font-size:max(17px, calc(26 * var(--u))) }
.phases--press .phase{ cursor:pointer; min-height:0; padding-bottom:calc(26 * var(--u)); transition:background var(--dur-1) var(--ease) }
.phases--press .phase:hover{ background:rgb(255 255 255 / .65) }
.phases--press .phase:focus-visible{ outline:2px solid var(--orange); outline-offset:-4px }
.phases--press .phase__k{ font-size:calc(70 * var(--u)) }
.phases--press .phase__rest{ margin-top:calc(22 * var(--u)) }
.phases--press .phase__p,.phases--press .phase .phase-end{ display:none }
.phases--press .phase .chip{ margin-top:auto; padding-top:calc(14 * var(--u)) }
.phases--press .phase__hint{ display:block; margin-top:calc(14 * var(--u)); font-family:var(--font-display); font-weight:700; font-size:max(14px, calc(14 * var(--u))); letter-spacing:.08em; text-transform:uppercase; color:rgb(4 40 90 / .72) }
.phases--press .phase__hint::after{ content:"  +" }
.page--home .phases{ background:var(--paper) }
@media (max-width:820px){
  .phases--press .phase__k{ font-size:44px }
  .phases--press .phase__rest{ margin-top:6px }
  .phases--press .phase__hint{ margin-top:12px; font-size:14px }
  .phases--press .phase .chip{ font-size:15px; gap:8px }
  .phases--press .phase .chip svg{ width:16px; height:16px }
  .phases__k{ font-size:14px; margin-bottom:12px }
  .phases--press .phase{ padding-bottom:26px }
  .phases--press .phases__lede{ width:auto }
}

/* ================= 10-03 · cassettes =================================
   Every tape carries its 'audacIA · SESSIONS' label at both widths. The label
   sizes are container units of the tape itself (equal to the 1440 px sizes at
   1440), so they keep the artwork's proportions at any width.
   Path two is two tapes, slightly fanned: gold Vol. 1 behind, rust Vol. 2 in front. */
.path__art,.path__tape{ container-type:inline-size }
.path__art--pair{ overflow:visible; aspect-ratio:840 / 819 }
.path__tape{ position:absolute; width:76% }
.path__art .path__tape img{ width:100%; height:auto }
.path__tape--back{ left:0; top:3%; transform:rotate(-6deg) }
.path__tape--front{ right:0; bottom:3%; transform:rotate(4deg); filter:drop-shadow(0 calc(14 * var(--u)) calc(22 * var(--u)) rgb(4 40 90 / .28)) }
@media (max-width:820px){
  .tagrow{ display:flex }
  .path__tape--front{ filter:drop-shadow(0 10px 16px rgb(4 40 90 / .28)) }
}