/* vskygroup master prototype.
   Palette and type are the current site's own: paper, ink, stone, bronze; Schibsted Grotesk and Newsreader.
   One rule for motion: things come into focus and into light. Nothing slides. */
:root {
  --paper: #F1EFEA; --paper-2: #E5E2DA; --ink: #0A0908; --ink-2: #161615; --cream: #ECE7DC; --stone: #7D7A72; --bronze: #A9824F;
  --muted-d: rgba(236,231,220,.6); --faint-d: rgba(236,231,220,.14); --line: rgba(22,22,21,.14);
  --grotesk: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif; --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --g: clamp(20px, 4vw, 64px); --max: 1440px;
  --e-out: cubic-bezier(.2,.7,.2,1); --e-io: cubic-bezier(.65,0,.35,1); --e-soft: cubic-bezier(.4,0,.2,1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--ink); color: var(--cream); font-family: var(--grotesk); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { overflow-x: hidden; }
body.at-door, body.in-intro { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--bronze); outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 2000; background: var(--cream); color: var(--ink); padding: 10px 14px; font-size: 13px; }
.skip-link:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: max(var(--g), env(safe-area-inset-left, 0px)); padding-right: max(var(--g), env(safe-area-inset-right, 0px)); }
.label { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--stone); margin: 0; }
.dark .label { color: rgba(241,239,234,.5); }
.chapter-title { font-weight: 500; font-size: clamp(34px, 5.2vw, 76px); line-height: 1; letter-spacing: -.04em; margin: 28px 0 22px; max-width: 16ch; text-wrap: balance; }
.chapter-title .soft { color: var(--stone); }
.chapter-sub { font-family: var(--serif); font-weight: 300; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; max-width: 40ch; margin: 0; color: inherit; opacity: .78; }
.ul { position: relative; padding-bottom: 4px; }
.ul::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: .5; transform-origin: 100% 50%; transition: transform .6s var(--e-io); }
.ul:hover::after { animation: redraw .9s var(--e-io) forwards; }
@keyframes redraw { 0% { transform: scaleX(1); transform-origin: 100% 50%; } 45% { transform: scaleX(0); transform-origin: 100% 50%; } 46% { transform-origin: 0 50%; } 100% { transform: scaleX(1); transform-origin: 0 50%; } }

/* focus reveal used everywhere: opacity and blur only */
.rv { opacity: 0; filter: blur(10px); transition: opacity 1.3s var(--e-out), filter 1.5s var(--e-out); }
.rv.in { opacity: 1; filter: none; }

/* ============ 01 · the door ============ */
.door { position: fixed; inset: 0; z-index: 1500; background: #050504; overflow: hidden; --w: 0px; --spill: 0; --room: 0; --h: 74vh; --top: 13vh; }
.door-room { position: absolute; left: 50%; top: var(--top); height: var(--h); width: max(var(--w), 1px); transform: translateX(-50%);
  background: radial-gradient(ellipse 120% 70% at 50% 42%, #FFE3B8 0%, #F2BF7E 34%, #B87A3E 70%, #6E4320 100%);
  box-shadow: 0 0 calc(10px + var(--spill) * 40px) rgba(255,196,120,calc(.25 + var(--spill) * .35)); opacity: calc(var(--room) * (1 - var(--open, 0) * .55)); filter: blur(calc(var(--open, 0) * 26px)); }
.door-room::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(60,30,10,.35), rgba(60,30,10,0) 18%, rgba(60,30,10,0) 82%, rgba(60,30,10,.35)); }
.door-spill { position: absolute; inset: 0; pointer-events: none; opacity: var(--room);
  background: radial-gradient(ellipse calc(8vw + var(--w) * 1.6 + var(--spill) * 14vw + var(--open, 0) * 60vw) calc(52vh + var(--open, 0) * 50vh) at 50% 50%, rgba(255,190,120,calc(.05 + var(--spill) * .1 + var(--open, 0) * .1)), rgba(255,190,120,0) 72%); }
.door-floor { position: absolute; left: 0; right: 0; top: calc(var(--top) + var(--h)); bottom: 0; pointer-events: none; opacity: calc(var(--room) * (.5 + var(--spill) * .6));
  background: linear-gradient(180deg, rgba(255,196,130,.22), rgba(255,196,130,0) 80%);
  clip-path: polygon(calc(50% - var(--w) / 2) 0, calc(50% + var(--w) / 2) 0, calc(50% + var(--w) * 1.8 + 6vw) 100%, calc(50% - var(--w) * 1.8 - 6vw) 100%); filter: blur(6px); }
.door-opts { position: absolute; left: 0; right: 0; top: 50%; height: 0; }
.door-opt { position: absolute; top: 0; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 12px; padding: 16px 4px; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
  color: rgba(236,231,220,.66); opacity: 0; filter: blur(8px); transition: opacity 1.2s var(--e-out), filter 1.3s var(--e-out), color .6s var(--e-out), letter-spacing 1.1s var(--e-out); }
.door-opt.on { right: calc(50% + 56px); } .door-opt.off { left: calc(50% + 56px); color: rgba(236,231,220,.42); }
.door-opt.in { opacity: 1; filter: none; }
.door-opt:hover, .door-opt:focus-visible { color: var(--cream); letter-spacing: .25em; }
.door-opt .bars { display: inline-flex; gap: 2px; align-items: center; height: 12px; } .door-opt .bars i { width: 1.5px; height: 12px; background: currentColor; transform: scaleY(.22); }
.door-note { position: absolute; left: 0; right: 0; bottom: max(7vh, calc(env(safe-area-inset-bottom, 0px) + 28px)); text-align: center; margin: 0; font-size: 11px; letter-spacing: .08em; color: rgba(236,231,220,.3); opacity: 0; transition: opacity 1.6s var(--e-out); }
.door-note.in { opacity: 1; }
.door.chosen .door-opt, .door.chosen .door-note { opacity: 0; filter: blur(10px); transition-duration: .8s; pointer-events: none; }
.door.gone { opacity: 0; visibility: hidden; transition: opacity 1.4s var(--e-io), visibility 0s 1.4s; }

/* intro: the original, untouched; it arrives inside the light */
#introHost .intro { z-index: 1400; opacity: 0; transition: opacity 1.2s var(--e-soft); }
#introHost .intro.shown { opacity: 1; }
.skip-intro { position: fixed; right: max(var(--g), env(safe-area-inset-right, 0px)); bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 16px)); z-index: 1600; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(236,231,220,.42); padding: 10px 2px; opacity: 0; pointer-events: none; transition: opacity .8s, color .4s; }
body.in-intro .skip-intro { opacity: 1; pointer-events: auto; }
.skip-intro:hover { color: var(--cream); }

/* ============ header ============ */
.head { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: space-between; padding: max(18px, env(safe-area-inset-top, 0px)) max(var(--g), env(safe-area-inset-right, 0px)) 0 max(var(--g), env(safe-area-inset-left, 0px)); pointer-events: none; opacity: 0; transition: opacity 1.2s var(--e-out), color .9s var(--e-io); color: var(--cream); }
.head.on { opacity: 1; } .head.on > * { pointer-events: auto; }
.head.ink { color: var(--ink-2); }
.head::before { content: ''; position: absolute; inset: 0 0 auto 0; height: calc(86px + env(safe-area-inset-top, 0px)); pointer-events: none; z-index: -1; opacity: 0; transition: opacity .8s, background .8s;
  background: linear-gradient(180deg, rgba(10,9,8,.72), rgba(10,9,8,0)); }
.head.scrolled::before { opacity: 1; }
.head.ink::before { background: linear-gradient(180deg, rgba(241,239,234,.86), rgba(241,239,234,0)); }
.mark { font-weight: 600; font-size: 17px; letter-spacing: -.02em; line-height: 1.2; }
.mark .v { color: var(--bronze); }
.head-r { display: flex; align-items: center; gap: 26px; }
.snd-wrap { position: relative; display: flex; align-items: center; gap: 12px; }
.snd { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .72; transition: opacity .4s; padding: 8px 0; }
.snd:hover, .snd:focus-visible { opacity: 1; }
.snd .bars { display: inline-flex; align-items: center; gap: 2.5px; height: 14px; }
.snd i { display: block; width: 1.5px; height: 14px; background: currentColor; transform: scaleY(.18); border-radius: 1px; }
.vol { display: flex; align-items: center; width: 0; overflow: hidden; opacity: 0; transition: width .6s var(--e-io), opacity .5s; }
.snd-wrap:hover .vol, .snd-wrap:focus-within .vol { width: 84px; opacity: 1; }
.vol input { width: 80px; accent-color: var(--bronze); height: 14px; }
.menu-btn { display: inline-grid; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 8px 0; }
.menu-btn span { grid-area: 1/1; transition: opacity .5s var(--e-out), filter .6s var(--e-out); }
.menu-btn .c { opacity: 0; filter: blur(6px); }
body.menu-open .menu-btn .o { opacity: 0; filter: blur(6px); } body.menu-open .menu-btn .c { opacity: 1; filter: none; }

/* ============ menu: readable first, atmosphere second ============ */
.menu { position: fixed; inset: 0; z-index: 900; visibility: hidden; opacity: 0; transition: opacity .8s var(--e-io), visibility 0s .8s; background: rgba(8,7,6,.94); }
body.menu-open .menu { visibility: visible; opacity: 1; transition: opacity .8s var(--e-io), visibility 0s; }
body.menu-open main { filter: brightness(.5) blur(4px); transform: scale(.985); }
main { transition: filter 1s var(--e-io), transform 1s var(--e-io); transform-origin: 50% 50vh; }
.menu-gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .9s var(--e-out); }
.menu-gl.on { opacity: .55; }
.menu-in { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 90px max(var(--g), env(safe-area-inset-right, 0px)) 40px max(calc(var(--g) + 8vw), env(safe-area-inset-left, 0px)); overflow-y: auto; }
.menu-main { list-style: none; margin: 0; padding: 0; }
.menu-main > li > a { display: inline-flex; align-items: baseline; gap: 20px; font-size: clamp(30px, 3.4vw, 50px); font-weight: 500; letter-spacing: -.035em; line-height: 1.16; color: var(--cream); padding: 3px 0;
  opacity: 0; filter: blur(10px); transition: opacity .7s var(--e-out), filter .8s var(--e-out), color .4s; }
.menu-main .n { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 15px; letter-spacing: 0; color: var(--bronze); width: 28px; }
body.menu-open .menu-main > li > a { opacity: 1; filter: none; }
.menu-main > li > a:hover, .menu-main > li > a:focus-visible { color: #fff; }
.menu-houses { list-style: none; margin: 4px 0 14px 48px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; opacity: 0; transition: opacity .9s var(--e-out) .35s; }
body.menu-open .menu-houses { opacity: 1; }
.menu-houses a { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(236,231,220,.74); padding: 6px 0; display: inline-block; transition: color .4s; }
.menu-houses a:hover, .menu-houses a:focus-visible { color: var(--cream); }
.menu-foot { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center; margin-top: 46px; padding-left: 48px; font-size: 12px; color: rgba(236,231,220,.55); opacity: 0; transition: opacity .9s .5s; }
body.menu-open .menu-foot { opacity: 1; }
.menu-sound { display: flex; align-items: center; gap: 14px; }
.vol-m { width: auto; opacity: 1; } .vol-m input { width: 110px; }
.replay { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(236,231,220,.55); } .replay:hover { color: var(--cream); }

/* ============ 03 · philosophy ============ */
.dark { background: var(--ink); color: var(--cream); }
.philosophy { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 140px 0 110px; }
.vq { margin: 34px 0 0; }
.vision-q { font-family: var(--serif); font-weight: 300; font-size: clamp(38px, 6.2vw, 96px); line-height: 1.02; letter-spacing: -.02em; margin: 0; }
.vision-q .l1, .vision-q .l2 { display: block; }
.vision-q em { font-style: italic; color: #E9C892; }
.vision-q .l2 { color: rgba(236,231,220,.42); }
.vision-q .w { display: inline-block; opacity: 0; filter: blur(12px); transition: opacity 1.4s var(--e-out), filter 1.6s var(--e-out); }
.vision-q .w.in { opacity: 1; filter: none; }
.vision-sig { margin-top: 30px; font-size: 13px; letter-spacing: .04em; color: rgba(236,231,220,.7); }
.vision-sig span { color: rgba(236,231,220,.42); margin-left: 10px; }
.ph-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 12vh; max-width: 980px; }
.ph-lead { font-family: var(--serif); font-weight: 300; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; margin: 0; color: rgba(236,231,220,.82); }
.ph-lead.soft { color: rgba(236,231,220,.52); }

/* ============ 04 · the Hospitality moment ============ */
.hosp { position: relative; height: 170vh; }
.hosp-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; color: var(--cream); }
.hosp-dark, .hosp-paper, .hosp-glow { position: absolute; inset: 0; pointer-events: none; }
.hosp-dark { background: var(--ink); }
.hosp-glow { opacity: 0; background: radial-gradient(circle var(--gr, 30vmax) at var(--cx, 30%) var(--cy, 45%), rgba(255,190,120,.42) 0%, rgba(255,170,100,.18) 45%, rgba(255,170,100,0) 80%); }
.hosp-paper { background: var(--paper); --pa: 0; -webkit-mask: radial-gradient(circle var(--pr, 0px) at var(--cx, 30%) var(--cy, 45%), rgba(0,0,0,var(--pa)) 0%, rgba(0,0,0,calc(var(--pa) * .85)) 40%, transparent 100%); mask: radial-gradient(circle var(--pr, 0px) at var(--cx, 30%) var(--cy, 45%), rgba(0,0,0,var(--pa)) 0%, rgba(0,0,0,calc(var(--pa) * .85)) 40%, transparent 100%); }
.hosp-in { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-top: 120px; padding-bottom: 64px; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.hosp-top .label { grid-column: 1 / 6; } .hosp-top .place { grid-column: 9 / 13; text-align: right; }
.hosp-h1 { font-weight: 500; font-size: clamp(44px, 8.4vw, 136px); line-height: .92; letter-spacing: -.045em; margin: 0; color: var(--cream); transition: color 1.8s var(--e-io); }
.hosp.lit .hosp-h1 { color: var(--ink-2); }
.hosp-h1 .soft { color: var(--stone); }
#hospH1 .ticker { visibility: hidden; } #hospH1 .ticker.run, #hospH1 .ticker.done { visibility: visible; }
.line2 .w { display: inline-block; opacity: 0; filter: blur(10px); transition: opacity 1.2s var(--e-out), filter 1.4s var(--e-out); }
.line2 .w.in { opacity: 1; filter: none; }
.hosp .later { opacity: 0; transition: opacity 1.6s var(--e-out); } .hosp .later.in { opacity: 1; }
.hosp.lit .label { color: var(--stone); }
.hosp-index { list-style: none; margin: 0 0 0 auto; padding: 0; width: min(58%, 820px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.hosp-index li { opacity: 0; transition: opacity 1.4s var(--e-out); }
.hosp-index li.seen { opacity: 1; }
.hosp-index figure { margin: 0; aspect-ratio: 3/4; overflow: hidden; background: var(--paper-2); position: relative; }
.hosp-index img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(.96); transition: filter 2.2s var(--e-soft), transform 1.2s var(--e-out); }
.hosp-index li.warm img { filter: none; }
.hosp-index a:hover img { transform: scale(1.03); }
.hosp-index .cap { display: flex; justify-content: space-between; font-size: 13px; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 10px; color: var(--ink-2); }
.hosp-index .cap span:first-child { color: var(--stone); }

/* ============ 05/06 · houses ============ */
.chapter { padding: 22vh 0 16vh; }
.houses { position: relative; }
.h-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--ink); }
.h-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.h-shade { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(180deg, rgba(10,9,8,.42) 0%, rgba(10,9,8,0) 22%, rgba(10,9,8,0) 50%, rgba(10,9,8,.8) 88%, rgba(10,9,8,.92) 100%); }
.legacy.h-frames { position: absolute; inset: 0; z-index: 3; background: transparent; pointer-events: none; }
.legacy.h-frames .frame { position: absolute; inset: 0; height: 100%; min-height: 0; background: transparent; opacity: 0; visibility: hidden; }
.legacy.h-frames .frame.vis { visibility: visible; }
.legacy.h-frames .frame-content { opacity: 1; transform: none; }
.legacy.h-frames .frame.vis a { pointer-events: auto; }
.legacy .brand-meta-top { top: 96px; }
.h-progress { position: absolute; right: max(var(--g), env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); z-index: 4; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.h-progress li { width: 1px; height: 22px; background: rgba(236,231,220,.22); position: relative; overflow: hidden; }
.h-progress b { position: absolute; inset: 0; background: var(--cream); transform-origin: 50% 0; transform: scaleY(0); }
.h-anchor { position: absolute; left: 0; width: 1px; height: 1px; }

/* mobile houses: one portrait panel per house, the photograph develops as it arrives */
.houses.m .h-sticky { position: relative; height: auto; overflow: visible; background: none; }
.houses.m .h-gl, .houses.m .h-shade, .houses.m .h-progress { display: none; }
.houses.m .legacy.h-frames { position: relative; inset: auto; pointer-events: auto; }
.houses.m .legacy.h-frames .frame { position: relative; inset: auto; opacity: 1; visibility: visible; min-height: 100svh; overflow: hidden; }
.houses.m .frame .m-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.houses.m .frame .m-photo img { width: 100%; height: 100%; object-fit: cover; will-change: transform, filter, opacity; }
.houses.m .frame .m-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,9,8,.5) 0%, rgba(10,9,8,0) 22%, rgba(10,9,8,.2) 45%, rgba(10,9,8,.9) 72%, rgba(10,9,8,.96) 100%); }
.houses.m .frame .m-tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; }
.houses.m .legacy .frame-content { position: relative; min-height: 100svh; padding-top: 52svh; padding-bottom: 72px; z-index: 3; }
.houses.m .legacy .brand-meta-top { top: 84px; }

/* ============ founder ============ */
.founder { background: var(--paper); color: var(--ink-2); padding: 22vh 0 18vh; }
.founder .label { color: var(--stone); }
.f-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); margin-top: 11vh; align-items: start; }
.f-photo { position: relative; margin: 0; overflow: hidden; background: #D9D4C8; aspect-ratio: 2/3; }
.f-photo img { width: 100%; height: 100%; object-fit: cover; }
.f-photo .f-light { position: absolute; inset: 0; pointer-events: none; opacity: var(--fo, 0); background: radial-gradient(circle 260px at var(--fx, 50%) var(--fy, 40%), rgba(255,236,205,.22), rgba(255,236,205,0) 70%), radial-gradient(circle 520px at var(--fx, 50%) var(--fy, 40%), rgba(10,9,8,0) 40%, rgba(10,9,8,.28) 100%); mix-blend-mode: normal; transition: opacity .8s; }
.f-photo figcaption { position: absolute; left: 16px; bottom: 14px; font-family: var(--serif); font-style: italic; font-size: 14px; color: rgba(255,255,255,.85); }
.f-name { font-weight: 500; font-size: clamp(40px, 4.4vw, 64px); letter-spacing: -.04em; margin: 0; line-height: 1; }
.f-name .soft { color: var(--stone); }
.f-role { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); margin: 14px 0 30px; }
.f-lead { font-family: var(--serif); font-weight: 300; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.42; margin: 0 0 36px; max-width: 30ch; }
.facts { margin: 0 0 40px; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.facts dt { color: var(--stone); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding-top: 2px; }
.facts dd { margin: 0; }
.prose p { font-family: var(--serif); font-weight: 300; font-size: 18px; line-height: 1.62; margin: 0 0 18px; max-width: 60ch; color: rgba(22,22,21,.5); transition: color .9s var(--e-out); }
.prose p.near { color: rgba(22,22,21,.92); }

/* ============ group ============ */
.warm { background: var(--paper-2); color: var(--ink-2); }
.group { padding: 20vh 0 18vh; }
.group .label { color: var(--stone); }
.dir-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 10vh; border-top: 1px solid var(--line); padding-top: 32px; }
.dir-cols .n { font-family: var(--serif); font-style: italic; color: var(--bronze); }
.dir-cols h3 { font-weight: 500; font-size: 21px; letter-spacing: -.02em; margin: 12px 0 10px; }
.dir-cols p { font-family: var(--serif); font-weight: 300; font-size: 17px; line-height: 1.55; margin: 0; color: rgba(22,22,21,.72); }
.dir-note { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin: 48px 0 0; font-size: 13px; color: var(--stone); }
.dir-note a { color: var(--ink-2); }
.glance-h { font-weight: 500; font-size: clamp(28px, 3vw, 42px); letter-spacing: -.035em; margin: 16vh 0 28px; }
.glance-h .soft { color: var(--stone); }
.glance { margin: 0; border-top: 1px solid var(--line); }
.glance div { display: grid; grid-template-columns: 180px 220px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; transition: background-color .5s; }
.glance dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
.glance dd { margin: 0; } .glance .v { font-weight: 500; font-size: 20px; letter-spacing: -.02em; } .glance .d { font-family: var(--serif); font-weight: 300; font-size: 17px; color: rgba(22,22,21,.72); }

/* ============ people, careers ============ */
.people { background: var(--paper); color: var(--ink-2); padding: 20vh 0 18vh; }
.people .label { color: var(--stone); }
.careers { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; margin-top: 14vh; padding-top: 32px; border-top: 1px solid var(--line); }
.careers-h { font-weight: 500; font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -.03em; line-height: 1.1; margin: 0 0 18px; max-width: 22ch; }
.careers-p { font-family: var(--serif); font-weight: 300; font-size: 18px; line-height: 1.6; margin: 0 0 32px; max-width: 54ch; color: rgba(22,22,21,.75); }
.careers-note { font-size: 13px; color: var(--stone); margin: 18px 0 0; }
.pill { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 14px; padding: 16px 26px; border: 1px solid rgba(22,22,21,.3); border-radius: 999px; font-size: 13px; letter-spacing: .02em; transition: border-color .5s, transform .6s var(--e-out); max-width: 100%; }
.pill span { overflow: hidden; text-overflow: ellipsis; }
.pill::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle 70px at var(--px, 50%) var(--py, 50%), rgba(169,130,79,.18), rgba(169,130,79,0) 70%); opacity: 0; transition: opacity .5s; }
.pill:hover { border-color: rgba(22,22,21,.7); } .pill:hover::before { opacity: 1; }
.pill i { font-style: normal; transition: transform .6s var(--e-out); } .pill:hover i { transform: translateX(4px); }

/* ============ last word, contact ============ */
.last { padding: 26vh 0 22vh; }
.last-h { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 6vw, 92px); line-height: 1.02; letter-spacing: -.02em; margin: 0; }
.last-h em { color: #E9C892; }
.last-p { font-family: var(--serif); font-weight: 300; font-size: 20px; color: rgba(236,231,220,.6); margin: 40px 0 0; max-width: 40ch; }
.contact { padding: 16vh 0 0; border-top: 1px solid var(--faint-d); }
.c-k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(236,231,220,.5); margin: 8vh 0 14px; }
.c-big { font-weight: 500; font-size: clamp(26px, 4.6vw, 68px); letter-spacing: -.04em; line-height: 1.05; overflow-wrap: anywhere; display: inline-block; transition: color .5s; }
.c-big:hover { color: #fff; }
.c-topics { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 28px; font-size: 13px; letter-spacing: .06em; color: rgba(236,231,220,.7); }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 18vh; padding: 28px 0 max(36px, calc(env(safe-area-inset-bottom, 0px) + 20px)); border-top: 1px solid var(--faint-d); font-size: 12px; color: rgba(236,231,220,.5); }

/* ============ cursor: a point of light; nothing showy ============ */
.cur { position: fixed; inset: 0; pointer-events: none; z-index: 3000; opacity: 0; transition: opacity .5s; }
.cur.show { opacity: 1; }
.cur .dot, .cur .ring { position: absolute; left: 0; top: 0; will-change: transform; }
.cur .dot::before { content: ''; position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--cream); mix-blend-mode: difference; transition: transform .45s var(--e-out); }
.cur .ring::before { content: ''; position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 1px solid rgba(236,231,220,0); transition: width .55s var(--e-out), height .55s var(--e-out), margin .55s var(--e-out), border-color .4s, background-color .4s; }
.cur[data-mode="link"] .ring::before { border-color: rgba(236,231,220,.5); width: 42px; height: 42px; margin: -21px 0 0 -21px; }
.cur[data-mode="link"] .dot::before { transform: scale(0); }
.cur[data-mode="photo"] .ring::before { width: 110px; height: 110px; margin: -55px 0 0 -55px; background: radial-gradient(circle, rgba(255,226,180,.10), rgba(255,226,180,0) 70%); }
.cur.on-light .dot::before { background: var(--ink-2); mix-blend-mode: normal; }
.cur.on-light[data-mode="link"] .ring::before { border-color: rgba(22,22,21,.45); }
html.has-cur, html.has-cur a, html.has-cur button { cursor: none; }
html.has-cur input[type=range] { cursor: pointer; }
.touch { position: fixed; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; pointer-events: none; z-index: 3000; opacity: 0; background: radial-gradient(circle, rgba(255,226,180,.28), rgba(255,226,180,0) 70%); }
.touch.go { animation: touch .7s var(--e-out); }
@keyframes touch { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.4); } }

/* review only: sound layers and captions */
.hud { position: fixed; right: 16px; bottom: 16px; z-index: 2500; width: 220px; padding: 12px 14px; background: rgba(10,9,8,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(236,231,220,.6); }
.hud h6 { margin: 0 0 8px; font-size: 9.5px; color: rgba(236,231,220,.9); font-weight: 500; letter-spacing: .12em; }
.hud .r { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 8px; margin: 4px 0; }
.hud .m { height: 2px; background: rgba(236,231,220,.14); position: relative; } .hud .m b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cream); }
.hud .r.s .m b { background: var(--bronze); }
.demo-note { position: fixed; left: max(var(--g), env(safe-area-inset-left, 0px)); bottom: 18px; z-index: 2400; display: flex; gap: 16px; flex-wrap: wrap; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(236,231,220,.5); pointer-events: none; mix-blend-mode: difference; max-width: calc(100% - 40px); }
.demo-note b { font-weight: 500; color: rgba(236,231,220,.8); }

/* ============ phone ============ */
@media (max-width: 760px) {
  .door { --h: 46vh; --top: 14vh; }
  .door-opts { top: calc(14vh + 46vh + 9vh); }
  .door-opt { position: static; transform: none; display: flex; justify-content: center; width: 100%; padding: 14px 0; }
  .door-opts { display: flex; flex-direction: column; align-items: center; height: auto; }
  .head-r { gap: 18px; }
  .snd .lbl { display: none; }
  .snd-wrap .vol { display: none; }
  .menu-in { padding-left: max(28px, env(safe-area-inset-left, 0px)); justify-content: flex-start; padding-top: 110px; }
  .menu-houses { margin-left: 48px; }
  .menu-foot { padding-left: 0; }
  .philosophy { padding: 120px 0 90px; }
  .ph-cols { grid-template-columns: 1fr; gap: 22px; margin-top: 8vh; }
  .hosp { height: 150vh; }
  .hosp-in { padding-top: 96px; padding-bottom: 40px; }
  .hosp-top .label { grid-column: 1 / 13; } .hosp-top .place { display: none; }
  .hosp-h1 { font-size: clamp(40px, 12.4vw, 64px); line-height: .95; letter-spacing: -.04em; }
  .hosp-index { width: 100%; gap: 6px; }
  .hosp-index figure { aspect-ratio: 2/3; }
  .hosp-index .cap { font-size: 10px; flex-direction: column; gap: 2px; }
  .chapter { padding: 16vh 0 10vh; }
  .f-grid { grid-template-columns: 1fr; margin-top: 7vh; }
  .facts div { grid-template-columns: 1fr; gap: 4px; }
  .dir-cols { grid-template-columns: 1fr; gap: 28px; }
  .glance div { grid-template-columns: 1fr; gap: 6px; }
  .careers { grid-template-columns: 1fr; gap: 18px; }
  .demo-note { font-size: 9px; gap: 4px 10px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv, .vision-q .w, .line2 .w, .hosp .later, .hosp-index li { opacity: 1 !important; filter: none !important; transition: none !important; }
  .hosp { height: auto; } .hosp-stage { position: relative; height: auto; min-height: 100vh; }
  .hosp-paper { -webkit-mask: none !important; mask: none !important; } .hosp-h1 { color: var(--ink-2); } .hosp-index img { filter: none; }
  main, .menu, .menu-main > li > a { transition: none !important; }
}

/* images develop when they are ready; nothing pops in */
.f-photo.dev img { opacity: 0; filter: brightness(.25) saturate(0) contrast(1.3) blur(8px); }
.f-photo.dev.ready.seen img { animation: develop 2.4s var(--e-out) forwards; }
@keyframes develop { 0% { opacity: 0; filter: brightness(.25) saturate(0) contrast(1.3) blur(8px); } 35% { opacity: 1; filter: brightness(.6) saturate(.25) contrast(1.15) blur(2px); } 100% { opacity: 1; filter: none; } }
@media (prefers-reduced-motion: reduce) { .f-photo.dev img { opacity: 1; filter: none; animation: none !important; } }