/* ============================================================
   AVOLCA — THE SIGNAL PATH
   Motion prototype for the Studio page.
   One device carries the whole page: a signal travelling from
   input to output. It is a 1px rule, then a waveform, then a
   progress marker, then nothing, then back.
   Everything readable is real HTML — JS only moves it.
   ============================================================ */

:root{
  --ink:#04060E;
  --blue:#077AFF;
  --blue-lt:#4E9BFF;
  --text:#EDF1F8;
  --muted:#69748A;
  --line:rgba(255,255,255,.09);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--mono);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}

/* ---------- technical lettering ---------- */
.meta{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin:0;
}
.meta b{color:var(--blue-lt);font-weight:400}

/* ---------- session rail: the page is a track ---------- */
.rail{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;gap:16px;
  padding:16px 32px;pointer-events:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
  mix-blend-mode:difference;
}
.rail .file{white-space:nowrap}
.rail .track{position:relative;flex:1;height:1px;background:rgba(255,255,255,.18)}
.rail .played{position:absolute;inset:0 auto 0 0;width:0;background:var(--blue)}
.rail .head{
  position:absolute;top:50%;left:0;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
  background:var(--blue-lt);border-radius:50%;
}
.rail .tc{white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- nav ---------- */
.nav{position:fixed;top:76px;left:0;right:0;z-index:70;pointer-events:none}
.nav-in{max-width:1180px;margin:0 auto;padding:0 32px;display:flex;align-items:center}
.nav a{pointer-events:auto;text-decoration:none}
.nav .mark img{height:20px;width:auto}
.nav ol{list-style:none;display:flex;gap:26px;margin:0 0 0 auto;padding:0;align-items:center}
.nav ol a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);position:relative;padding-bottom:5px;transition:color .2s;
}
.nav ol a i{font-style:normal;color:rgba(255,255,255,.28);margin-right:7px}
.nav ol a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--blue);transition:right .3s cubic-bezier(.2,.7,.3,1);
}
.nav ol a:hover{color:#fff}
.nav ol a:hover::after{right:0}
.nav .book{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;border:1px solid rgba(255,255,255,.26);padding:9px 16px;
  transition:background .2s,border-color .2s;
}
.nav .book:hover{background:var(--blue);border-color:var(--blue)}
.studio-house-toggle{
  pointer-events:auto;margin-left:22px;padding:8px 0;border:0;background:none;color:#fff;cursor:pointer;
  font:10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;display:inline-flex;align-items:center;gap:9px
}
.studio-house-toggle>i{font-style:normal;color:var(--blue-lt);font-size:15px;transition:transform .3s}
.studio-house-toggle[aria-expanded=true]>i{transform:rotate(45deg)}
.studio-house-menu{
  position:fixed;inset:0;z-index:65;background:rgba(4,6,14,.98);padding:118px max(32px,calc((100vw - 1180px)/2 + 32px)) 40px;
  display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .38s,visibility .38s
}
.studio-house-menu.open{opacity:1;visibility:visible}
.studio-house-menu ol{width:min(100%,900px);list-style:none;margin:0;padding:0}
.studio-house-menu li{border-bottom:1px solid var(--line)}
.studio-house-menu a{display:grid;grid-template-columns:14ch 1fr;align-items:baseline;padding:12px 0;text-decoration:none}
.studio-house-menu small{font:9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.studio-house-menu span{font-family:'Bebas Neue',sans-serif;font-size:clamp(32px,4.6vw,62px);line-height:1;color:#697486;transition:color .25s}
.studio-house-menu a:hover span,.studio-house-menu a:focus-visible span,.studio-house-menu a[aria-current=page] span{color:var(--text)}
.studio-house-menu a[aria-current=page] small{color:var(--blue-lt)}
.studio-house-menu em{font:10px var(--mono);font-style:normal;letter-spacing:.15em;text-transform:uppercase;color:var(--blue-lt);margin-left:12px;opacity:.55}
.studio-house-menu a[aria-disabled=true] span{color:#30394A}
body.studio-menu-open{overflow:hidden}

/* ---------- hero: the room powers on ---------- */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden}
.hero-media{position:absolute;inset:-4% -4% -4% -4%;}
.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 26%;
  filter:brightness(.18) saturate(.5);
  transform:scale(1.06);
  transition:filter 1500ms cubic-bezier(.2,.6,.2,1), transform 2200ms cubic-bezier(.2,.6,.2,1);
}
.booted .hero-media img{filter:brightness(1) saturate(1);transform:scale(1)}
.hero-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(4,6,14,.55) 78%, var(--ink) 100%),
    linear-gradient(to bottom, rgba(4,6,14,.7) 0%, transparent 26%, transparent 62%, var(--ink) 100%);
}
.hero-in{
  position:relative;z-index:2;height:100%;
  max-width:1180px;margin:0 auto;padding:0 32px;
  display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:9vh;
}
.boot{
  font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:#EAF2FF;margin:0 0 22px;opacity:0;transition:opacity .5s;
  text-shadow:0 1px 14px rgba(0,0,0,.9);
}
.booted .boot{opacity:1}
.boot .dot{
  display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--blue);
  margin-right:9px;vertical-align:middle;
  animation:live 2s ease-in-out infinite;
}
@keyframes live{0%,100%{opacity:.35}50%{opacity:1}}

.hero h1{
  font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:clamp(44px,7.6vw,118px);line-height:.86;letter-spacing:0;
  margin:0;text-wrap:balance;
}
.hero h1 span{display:block;overflow:hidden}
.hero h1 span i{
  font-style:normal;display:block;transform:translateY(105%);
  transition:transform 900ms cubic-bezier(.19,1,.22,1);
}
.booted .hero h1 span:nth-child(1) i{transition-delay:120ms}
.booted .hero h1 span:nth-child(2) i{transition-delay:220ms}
.booted .hero h1 span:nth-child(3) i{transition-delay:320ms}
.booted .hero h1 span i{transform:none}
.hero h1 .dim{color:var(--muted)}

.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:34px;flex-wrap:wrap}
/* Body copy shares the voice of SYSTEM ONLINE / INPUT AVAILABLE.
   Sentence case, not caps — the metadata is uppercase because it is a
   label; a sentence in caps stops being readable. Mono needs more leading
   than a proportional face and no added tracking, being wide already. */
.say,.hero-foot .lede{
  font-family:var(--mono);font-weight:400;
  font-size:clamp(13.5px,1.28vw,15.5px);line-height:1.75;letter-spacing:0;
  color:#CBD6E4;margin:0;
}
.hero-foot .lede{max-width:34ch;text-shadow:0 1px 16px rgba(0,0,0,.8)}
.say{max-width:44ch}

/* ---------- the signal line ---------- */
.signal{position:relative;height:112px;display:flex;justify-content:center}
.signal .stem{width:1px;background:var(--line);height:100%;position:relative;overflow:hidden}
.signal .stem::after{
  content:"";position:absolute;left:0;right:0;top:0;height:0;background:var(--blue);
  box-shadow:0 0 10px rgba(7,122,255,.8);
}
.signal.on .stem::after{height:100%;transition:height 1.1s cubic-bezier(.3,.6,.3,1)}
.signal .tag{
  position:absolute;top:50%;left:calc(50% + 18px);transform:translateY(-50%);
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;opacity:0;transition:opacity .5s .5s;
}
.signal.on .tag{opacity:1}

/* waveform divider — the signal becomes sound */
.wave{display:block;width:100%;height:52px;overflow:visible}
.wave path{
  fill:none;stroke:var(--blue);stroke-width:1.4;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.6s cubic-bezier(.3,.6,.3,1);
  filter:drop-shadow(0 0 6px rgba(7,122,255,.55));
}
.wave.on path{stroke-dashoffset:0}

/* ---------- sections ---------- */
section{position:relative}
.blk{padding:0 0 7vh}
.hd{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.hd h2{
  font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:clamp(38px,6.4vw,86px);line-height:.9;margin:0;
}
.hd h2 .dim{color:var(--muted)}

/* ---------- equipment: annotated inspection ---------- */
.rig{position:relative}
.rig-photo{position:relative;overflow:hidden}
.rig-photo{max-height:40vh}
.rig-photo img{width:100%;height:40vh;object-fit:cover;filter:contrast(1.04)}
.rig-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 62%,var(--ink) 100%);
}
.anno{position:absolute;z-index:3;opacity:0;transform:translateY(6px);transition:opacity .6s,transform .6s}
.rig.on .anno{opacity:1;transform:none}
.rig.on .anno:nth-of-type(2){transition-delay:.18s}
.anno .pt{
  width:7px;height:7px;border-radius:50%;background:var(--blue);
  box-shadow:0 0 0 4px rgba(7,122,255,.2),0 0 12px rgba(7,122,255,.9);
}
.anno .lead{position:absolute;height:1px;background:rgba(78,155,255,.6);top:3px;left:7px}
.anno .txt{position:absolute;top:-9px;white-space:nowrap}
.anno .txt b{
  display:block;font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;font-weight:400;
}
.anno .txt span{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-top:5px;
}

/* ---------- expanding photograph ---------- */
.grow{display:flex;justify-content:center;height:52vh;min-height:340px}
/* Fixed container height: the figure widens without changing document
   height. Otherwise the page grows as you scroll, the scroll maximum keeps
   moving, and progress-linked things (timecode, clock) never complete. */
.grow figure{margin:0;width:38%;height:100%;position:relative;overflow:hidden}
.grow img{width:100%;height:100%;object-fit:cover}
.grow figcaption{
  position:absolute;left:16px;bottom:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.9);
}

/* ---------- rates: mechanical counter ---------- */
.rates{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.rate .n{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(52px,8vw,104px);line-height:.82;
  color:#fff;display:block;font-variant-numeric:tabular-nums;
}
.rate .l{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);display:block;margin-top:14px;
}
.rate .u{
  display:block;height:1px;width:0;background:var(--blue);margin-top:18px;
  transition:width .9s cubic-bezier(.3,.6,.3,1);
}
.rates.on .rate .u{width:100%}
.rates.on .rate:nth-child(2) .u{transition-delay:.12s}
.rates.on .rate:nth-child(3) .u{transition-delay:.24s}

/* ---------- 24/7 as a timeline ---------- */
.clock{position:relative;padding:2vh 0 0}
.clock .meta{margin-bottom:4px}
.clock .big{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(64px,12vw,150px);line-height:.9;
  margin:20px 0 0;letter-spacing:-.01em;
}
.clock .big em{font-style:normal;color:var(--blue)}
.clock-line{position:relative;margin-top:40px;height:36px}
.clock-line .base{position:absolute;top:0;left:0;right:0;height:1px;background:var(--line)}
.clock-line .fill{position:absolute;top:0;left:0;height:1px;width:0;background:var(--blue)}
.clock-line .mk{position:absolute;top:0;transform:translateX(-50%);text-align:center}
.clock-line .mk i{display:block;width:1px;height:7px;background:rgba(255,255,255,.22);margin:0 auto}
.clock-line .mk span{
  display:block;margin-top:9px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;color:var(--muted);
}
.clock-line .cursor{
  position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;
  background:var(--blue-lt);box-shadow:0 0 12px rgba(78,155,255,.95);
  transform:translateX(-50%);
}

/* ---------- output ---------- */
.out{padding:2vh 0 9vh;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.out h2{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(46px,8.4vw,112px);line-height:.86;margin:0;
}
.out .go{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);
  padding-bottom:6px;transition:color .2s,border-color .2s;
}
.out .go:hover{color:var(--blue-lt);border-color:var(--blue-lt)}

footer{border-top:1px solid var(--line);padding:26px 0 40px}
.foot-in{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

@media (max-width:820px){
  .wrap{padding:0 20px}
  .nav ol{display:none}
  .nav{top:66px}
  .nav-in{padding:0 20px}
  .studio-house-toggle{margin-left:auto;font-size:10px}
  .studio-house-menu{padding:90px 20px 34px;align-items:center}
  .studio-house-menu a{grid-template-columns:9ch 1fr}
  .rates{grid-template-columns:1fr;gap:26px}
  .grow figure{width:70%}
  .anno .txt{font-size:9px}
  .signal{height:120px}
}

@media(max-width:820px){
  /* Fail-safe mobile presentation: the room remains visible even if a
     low-memory browser delays the boot choreography. */
  .boot{opacity:1!important;transform:none!important}
  .hero h1 span i{transform:none!important}
  .hero-media{transform:none!important}
  .hero-media img{filter:brightness(.82) saturate(.9);transform:scale(1.01);transition:none}
}
/* The signal-path motions are the page's subject, so they play regardless
   of prefers-reduced-motion — the same call already made for the walker.
   Only the cursor parallax honours it, being the one effect that moves
   with the pointer rather than once, on cue. */


/* "Book the room." — white until you reach for it, then the blue runs
   through the letterforms. The gradient is clipped to the text and its
   position animates, so the colour travels rather than just switching. */
.out h2 a.book-link{
  color:#fff;text-decoration:none;display:inline-block;
  -webkit-text-fill-color:currentColor;
  background-image:linear-gradient(100deg,#077AFF 0%,#4E9BFF 22%,#8FE0FF 46%,#4E9BFF 70%,#077AFF 100%);
  background-size:260% 100%;background-position:0% 0;
  -webkit-background-clip:text;background-clip:text;
  transition:-webkit-text-fill-color .28s ease, color .28s ease;
}
.out h2 a.book-link:hover,
.out h2 a.book-link:focus-visible{
  color:transparent;-webkit-text-fill-color:transparent;
  animation:book-run 2.6s linear infinite;
}
.out h2 a.book-link:focus-visible{outline:2px solid var(--blue-lt);outline-offset:6px}
@keyframes book-run{ to{background-position:260% 0} }
@media (prefers-reduced-motion:reduce){
  .out h2 a.book-link:hover{animation:none}
}

/* Smaller photography — the beats stay, the pictures stop dominating. */
.rig-photo{max-height:34vh;max-width:none}
.rig-photo img{height:34vh}
.grow{height:42vh;min-height:280px}


/* Two floors: the container used to be a fixed short box that the figure
   widened into — at full width that box is ~2.7:1 against a 4:3 photo, so
   cover sliced the mezzanine clean off. Now the figure keeps the photo's
   own aspect and SCALES instead of widening: nothing is ever cropped, and
   because transform does not affect layout, the page height stays fixed. */
.grow{height:auto;min-height:0;align-items:center}
.grow figure{
  width:min(100%,860px);height:auto;aspect-ratio:4/3;
  transform:scale(.62);transform-origin:center center;
}
.grow img{width:100%;height:100%;object-fit:cover}


/* Rates: the real figure is in the HTML and never changes. Only its
   presentation animates — the digits rise into a mask. Counting from zero
   would have put "£0" in the crawlable page, which is simply untrue. */
.rate .n{overflow:hidden}
.rate .n i{
  font-style:normal;display:block;transform:translateY(105%);
  transition:transform 800ms cubic-bezier(.19,1,.22,1);
}
.rates.on .rate .n i{transform:none}
.rates.on .rate:nth-child(2) .n i{transition-delay:.09s}
.rates.on .rate:nth-child(3) .n i{transition-delay:.18s}




/* ============================================================
   SESSION MODE — typographic rows, not cards. A 1px rule between
   each; the row you are on moves a blue indicator and decides
   which photograph is showing. Switching a mode, not browsing.
   ============================================================ */
.modes-grid{display:grid;grid-template-columns:1fr .95fr;gap:0 44px;align-items:start}

.mode-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.mode-list li{border-bottom:1px solid var(--line)}
.mode-list button{
  position:relative;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  display:grid;grid-template-columns:30px 1fr;gap:1px 10px;
  padding:11px 24px 11px 0;color:var(--muted);transition:color .25s;
}
.mode-list button i{
  font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  color:rgba(255,255,255,.26);padding-top:6px;transition:color .25s;
}
.mode-list button b{
  font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:clamp(20px,2.4vw,30px);line-height:1;letter-spacing:.5px;color:inherit;
}
.mode-list button em{
  grid-column:2;font-style:normal;font-family:var(--mono);font-size:11.5px;
  line-height:1.55;color:transparent;max-height:0;overflow:hidden;
  transition:max-height .35s cubic-bezier(.2,.7,.3,1), color .3s;
}
/* the indicator that slides in like a mode switch */
.mode-list button .dot{
  position:absolute;right:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;
  background:var(--blue);opacity:0;transform:translateX(10px);
  box-shadow:0 0 12px rgba(7,122,255,.95);
  transition:opacity .3s, transform .3s cubic-bezier(.2,.7,.3,1);
}
.mode-list button:hover{color:#C7D2E2}
.mode-list button.on{color:#fff}
.mode-list button.on i{color:var(--blue-lt)}
.mode-list button.on em{color:var(--muted);max-height:44px;padding-top:3px}
.mode-list button.on .dot{opacity:1;transform:none}

.mode-view{position:relative;aspect-ratio:4/3;max-height:46vh;overflow:hidden;background:#080C16}
.mode-view img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.04);
  transition:opacity .55s ease, transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.mode-view img.on{opacity:1;transform:none}
.mode-view::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent 70%,rgba(4,6,14,.6) 100%);
}

@media (max-width:820px){
  .modes-grid{grid-template-columns:1fr;gap:26px}
  .mode-view{order:-1;aspect-ratio:16/10}
}


/* Footer that navigates, for the promoted studio page. */
.foot-nav{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px}
.foot-nav a{display:block;color:#C0CAD9;text-decoration:none;font-size:14px;margin-bottom:9px;transition:color .2s}
.foot-nav a:hover{color:var(--blue-lt)}
.foot-h{margin-bottom:14px}
.foot-lockup{height:38px;width:auto}
@media (max-width:900px){ .foot-nav{grid-template-columns:1fr 1fr;gap:26px} }
@media (max-width:560px){ .foot-nav{grid-template-columns:1fr;gap:26px} }


/* ============================================================
   EQUIPMENT MANIFEST
   The specification sheet belonging to AV_SESSION / 001.
   Straight rules and aligned columns — no cards, no tiles.
   Blue is reserved for numbers, rules and active states.
   ============================================================ */
.man-head{
  padding-top:118px;padding-bottom:32px;
  border-bottom:1px solid rgba(78,155,255,.22);
}
.man-head h1{
  font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.5px;
  font-size:clamp(48px,7.4vw,84px);line-height:.88;margin:14px 0 18px;
  opacity:0;transform:translateY(14px);
  transition:opacity .7s ease .1s,transform .7s cubic-bezier(.19,1,.22,1) .1s;
}
.ready .man-head h1{opacity:1;transform:none}
.man-head .meta{opacity:0;transition:opacity .6s ease}
.ready .man-head .meta{opacity:1}
.man-head .lede{
  font-family:var(--mono);font-size:14px;line-height:1.75;
  color:#B7C3D4;max-width:56ch;margin:0;
  opacity:0;transform:translateY(10px);
  transition:opacity .7s ease .25s,transform .7s cubic-bezier(.19,1,.22,1) .25s;
}
.ready .man-head .lede{opacity:1;transform:none}

.man{padding-bottom:7vh}
.man-group{padding-top:38px}
.man-group > .hdr{
  display:grid;grid-template-columns:52px 1fr;gap:0 20px;align-items:baseline;
  padding-bottom:14px;
}
.man-group .no{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;color:var(--blue-lt);
}
.man-group .cat{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;
  color:#fff;margin:0;
}
/* the rule draws across as the group arrives */
.man-group .rule{
  grid-column:1/-1;height:1px;background:rgba(78,155,255,.30);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1s cubic-bezier(.22,.7,.24,1);
}
.man-group.in .rule{transform:scaleX(1)}

.man-rows{list-style:none;margin:0;padding:0}
.man-rows li{
  display:grid;grid-template-columns:52px 200px 1fr;gap:0 20px;align-items:baseline;
  min-height:58px;padding:15px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(8px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.19,1,.22,1);
}
.man-group.in .man-rows li{opacity:1;transform:none}
.man-group.in .man-rows li:nth-child(1){transition-delay:.06s}
.man-group.in .man-rows li:nth-child(2){transition-delay:.12s}
.man-group.in .man-rows li:nth-child(3){transition-delay:.18s}
.man-group.in .man-rows li:nth-child(4){transition-delay:.24s}
.man-group.in .man-rows li:nth-child(5){transition-delay:.30s}
.man-rows .k{
  grid-column:2;font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);transition:color .25s;
}
.man-rows .v{
  grid-column:3;font-family:var(--mono);font-size:15.5px;line-height:1.45;
  color:#fff;letter-spacing:.01em;
}
.man-rows .v small{
  display:block;font-size:12.5px;color:var(--muted);margin-top:6px;
  font-family:var(--mono);letter-spacing:.04em;text-transform:none;
}
.man-rows li:hover .k{color:var(--blue-lt)}

/* the recording chain carries more weight than the amenities */
.man-group.primary .man-rows .v{font-size:17px}
.man-group.minor .man-rows li{min-height:46px;padding:11px 0}
.man-group.minor .man-rows .v{font-size:14px}

.man-foot{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  border-top:1px solid rgba(78,155,255,.22);padding-top:26px;margin-top:42px;
}
.man-foot a{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  transition:color .25s,gap .25s;
}
.man-foot a:hover{color:var(--blue-lt);gap:16px}

@media (max-width:820px){
  .man-head{padding-top:104px}
  .man-rows li{grid-template-columns:1fr;gap:6px;min-height:0;padding:16px 0}
  .man-rows .k,.man-rows .v{grid-column:1}
  .man-rows .v{font-size:17px}
  .man-group.primary .man-rows .v{font-size:18px}
  .man-group > .hdr{grid-template-columns:40px 1fr}
  .man-foot{flex-direction:column;align-items:stretch;gap:16px}
  .man-foot a{justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){
  .man-head h1,.man-head .lede,.man-head .meta,.man-group .rule,.man-rows li{transition:none}
  .man-head h1,.man-head .lede,.man-head .meta,.man-rows li{opacity:1;transform:none}
  .man-group .rule{transform:scaleX(1)}
}




/* current page in the numbered nav */
.nav ol a.here{color:#fff}
.nav ol a.here i{color:var(--blue-lt)}
.nav ol a.here::after{right:0}