/* Interior / Design System. Each render sits ABOVE its own sourcing table,
   stacked room by room. Elegant load sequence, reveal-on-scroll throughout.
   Brand palette + Rimini Sans. */
:root {
  --ink: var(--text);
  --paper: var(--bg);
  --paper-2: var(--surface);
  --acid: var(--accent);
  --caviar-brand: #2c2f32;
  --line: rgba(215, 232, 188, .16);
  --serif: "Rimini Sans", "Instrument Serif", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
  --mono: "Rimini Sans","DM Mono", monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body.menu-open, body.ix-loading { overflow: hidden; }
a { color: inherit; }
button { color: inherit; font-family: inherit; }
.skip-link { position: fixed; top: -4rem; left: 1rem; z-index: 200; background: var(--acid); color: var(--caviar-brand); padding: .75rem; }
.skip-link:focus { top: 1rem; }

/* Load sequence: a panel with the wordmark and a filling bar, then it lifts */
.ix-loader { position: fixed; inset: 0; z-index: 300; background: var(--paper); display: grid; place-items: center; gap: 1.4rem; grid-auto-flow: row; transition: transform 1s var(--ease), opacity .6s ease; }
.ix-loader.is-done { transform: translateY(-101%); }
.ix-loader-word { font: 400 clamp(1.4rem, 3vw, 2.4rem)/1 var(--serif); letter-spacing: -.01em; }
/* Note: do not set display here. .ix-swap must stay inline-grid so its two
   words stack in one cell; a display declaration on this compound selector
   outranks .ix-swap and lays them out side by side. */
.ix-loader-word em,
.ix-loader-word b { display: inline-block; }
.ix-loader-word em,
.ix-loader-word .ix-swap,
.ix-loader-word b { font-weight: inherit; opacity: 0; transform: translateY(12px); animation: ix-enter .7s var(--ease) both; }
.ix-loader-word em { font-style: normal; color: var(--acid); animation-delay: .12s; }
.ix-loader-word .ix-swap { animation-delay: .42s; }
.ix-loader-word b { animation-delay: 1.55s; }

/* Design and Styling trade places on the same footprint. Stacked in one grid
   cell so the line never reflows when the longer word is showing. */
.ix-swap { display: inline-grid; vertical-align: baseline; text-align: center; }
.ix-swap i { grid-area: 1 / 1; font-style: normal; }
.ix-swap i:nth-child(1) { animation: ix-word-a 3.6s var(--ease) .45s infinite; }
.ix-swap i:nth-child(2) { animation: ix-word-b 3.6s var(--ease) .45s infinite; }
@keyframes ix-word-a {
  0%, 22% { opacity: 1; transform: none; }
  30%, 72% { opacity: 0; transform: translateY(-45%); }
  80%, 100% { opacity: 1; transform: none; }
}
@keyframes ix-word-b {
  0%, 22% { opacity: 0; transform: translateY(45%); }
  30%, 72% { opacity: 1; transform: none; }
  80%, 100% { opacity: 0; transform: translateY(45%); }
}
@media (prefers-reduced-motion: reduce) {
  .ix-swap i:nth-child(2) { display: none; }
}
.ix-loader-bar { width: min(220px, 50vw); height: 2px; background: var(--line); position: relative; overflow: hidden; }
.ix-loader-bar::after { content: ""; position: absolute; inset: 0; background: var(--acid); transform-origin: left; transform: scaleX(0); animation: ix-fill 2.05s var(--ease) .2s forwards; }
@keyframes ix-fill { to { transform: scaleX(1); } }
@keyframes ix-rise { to { opacity: 1; transform: none; } }

/* Floating header: index left, wordmark centered, actions right */
.ix-header { position: fixed; inset: 0 0 auto; z-index: 90; height: 60px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(1rem, 2.2vw, 2rem); background: linear-gradient(180deg, var(--paper) 30%, transparent); }
.ix-index { justify-self: start; display: flex; align-items: center; gap: .5rem; border: 0; background: none; font: 300 .64rem/1 var(--mono); letter-spacing: .04em; cursor: pointer; color: var(--ink); }
.ix-index i { width: 6px; height: 6px; border: 1px solid currentColor; }
.ix-wordmark { justify-self: center; font: 400 1.4rem/1 var(--serif); letter-spacing: .02em; text-decoration: none; }
.ix-wordmark em { font-style: normal; color: var(--acid); }
.ix-actions { justify-self: end; display: flex; align-items: center; gap: clamp(.8rem, 1.6vw, 1.4rem); }
.ix-menu-btn { border: 0; background: none; font: 300 .6rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }

/* Circular language switcher (shared widget classes) */
.lang-switch { position: relative; }
.lang-switch-btn { width: 32px; height: 32px; border-radius: 50%; background: none; border: 1px solid var(--line); color: var(--muted); font: 700 .62rem/1 var(--sans); letter-spacing: .02em; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; flex-shrink: 0; }
.lang-switch-btn:hover, .lang-switch-btn.open { border-color: rgba(233,240,86,.6); color: var(--ink); }
.lang-switch-btn.active { background: var(--acid); color: var(--caviar-brand); border-color: var(--acid); }
.lang-switch-pop { position: absolute; top: calc(100% + 10px); right: 0; min-width: 200px; background: var(--caviar-brand); border: 1px solid rgba(233,240,86,.18); border-radius: 14px; padding: .4rem; box-shadow: 0 18px 40px rgba(0,0,0,.4); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97); transform-origin: top right; transition: opacity .18s, transform .18s, visibility .18s; z-index: 160; }
.lang-switch-pop.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.lang-switch-item { display: block; width: 100%; text-align: left; background: none; border: 0; color: #e7ecdd; font: 400 .82rem var(--sans); padding: .55rem .75rem; border-radius: 8px; cursor: pointer; transition: background .15s; }
.lang-switch-item:hover { background: rgba(233,240,86,.08); }
.lang-switch-item.active { color: var(--acid); font-weight: 600; }

/* Intro hero */
.ix-intro { min-height: 90svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.4rem; padding: 100px clamp(1.5rem, 5vw, 4rem) 70px; max-width: 1000px; margin: 0 auto; }
/* Every intro entrance waits for body.ix-ready, which the loader sets when it
   lifts. Rest state is fully visible, so a JS failure costs the animation,
   never the content. */
@keyframes ix-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ix-slab-up { from { transform: translateY(105%); } to { transform: none; } }
@keyframes ix-slab-down { from { transform: translateY(-105%); } to { transform: none; } }
.ix-intro-eyebrow { margin: 0; font: 300 .7rem var(--mono); text-transform: uppercase; letter-spacing: .22em; color: var(--muted); }
body.ix-ready .ix-intro-eyebrow { animation: ix-enter .8s var(--ease) both; }
/* The headline reveals in two beats. The first line rises into its own mask;
   the second drops out from behind it, so "when someone can act on it"
   literally falls out of "a rendering becomes useful". */
.ix-intro-title { margin: 0; font: 400 clamp(2.3rem, 6vw, 5rem)/1.04 var(--serif); letter-spacing: -.02em; }
.ix-intro-title .ix-l { display: block; overflow: hidden; padding-bottom: .06em; }
.ix-intro-title .ix-l i { display: block; font-style: normal; }
.ix-intro-title .ix-l:nth-child(2) i { color: var(--acid); }
body.ix-ready .ix-intro-title .ix-l:nth-child(1) i { animation: ix-slab-up 1.05s var(--ease) .12s both; }
body.ix-ready .ix-intro-title .ix-l:nth-child(2) i { animation: ix-slab-down 1.1s var(--ease) .48s both; }
.ix-intro-sub { margin: .7rem auto 0; max-width: 54ch; font: 300 clamp(1.12rem, 1.5vw, 1.4rem)/1.6 var(--sans); color: #c5d1b3; }
body.ix-ready .ix-intro-sub { animation: ix-enter .9s var(--ease) 1.05s both; }
.ix-scroll-cue { margin-top: 1rem; font: 300 .66rem var(--mono); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); opacity: .5; }
body.ix-ready .ix-scroll-cue { animation: ix-cue 1.2s ease 1.5s both; }
@keyframes ix-cue { 0% { opacity: 0; transform: translateY(-6px); } 60% { opacity: .9; } 100% { opacity: .5; transform: none; } }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-clip { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); }
.reveal-clip.in { clip-path: inset(0 0 0 0); }
.reveal-clip .ix-stage img { transform: scale(1.08); transition: transform 1.6s var(--ease); }
.reveal-clip.in .ix-stage img { transform: scale(1); }

/* A room: render image ABOVE its own sourcing table */
.ix-room { max-width: 1080px; margin: 0 auto; padding: clamp(3rem, 7vw, 7rem) clamp(1.5rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.ix-room-visual { position: relative; margin-bottom: clamp(1.8rem, 3.5vw, 3rem); }
.ix-stage { position: relative; width: 100%; aspect-ratio: 29 / 20; overflow: hidden; background: var(--paper-2); box-shadow: 0 34px 80px rgba(0,0,0,.45); }
.ix-stage img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.ix-room-tag { position: absolute; left: 1rem; bottom: 1rem; z-index: 3; padding: .55rem .85rem; background: rgba(20,22,19,.55); backdrop-filter: blur(10px); font: 300 .64rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #e7ecdd; }

/* Numbered hotspots on the render. The visible disc is 40px so the numeral
   reads at arm's length; the transparent ::after pushes the hit area past 52px. */
.ix-dot { position: absolute; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.8); background: rgba(20,22,19,.34); backdrop-filter: blur(3px); color: #fff; font: 400 .92rem/1 var(--mono); display: grid; place-items: center; cursor: pointer; z-index: 4; transition: transform .2s, background .2s, border-color .2s, color .2s; animation: ix-pulse 2.8s ease-out infinite; }
.ix-dot span { pointer-events: none; }
.ix-dot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.ix-dot:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
.ix-dot:hover, .ix-dot.is-hot { background: var(--acid); color: var(--caviar-brand); border-color: var(--acid); transform: translate(-50%, -50%) scale(1.16); animation: none; }
.ix-dot:nth-of-type(2) { animation-delay: .6s; }
.ix-dot:nth-of-type(3) { animation-delay: 1.2s; }
.ix-dot:nth-of-type(4) { animation-delay: 1.8s; }
.ix-dot:nth-of-type(5) { animation-delay: 2.4s; }
@keyframes ix-pulse { 0% { box-shadow: 0 0 0 0 rgba(233,240,86,.35); } 70%, 100% { box-shadow: 0 0 0 12px rgba(233,240,86,0); } }

/* Piece popover (fixed to viewport, above the clicked dot) */
.ix-pop { position: fixed; z-index: 250; transform: translate(-50%, calc(-100% - 14px)); width: min(240px, 74vw); padding: .95rem 1.05rem 1.05rem; background: var(--caviar-brand); border: 1px solid rgba(233,240,86,.28); border-radius: 12px; box-shadow: 0 22px 50px rgba(0,0,0,.5); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.ix-pop.is-open { opacity: 1; pointer-events: auto; }
.ix-pop::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: var(--caviar-brand); border-right: 1px solid rgba(233,240,86,.28); border-bottom: 1px solid rgba(233,240,86,.28); transform: translateX(-50%) rotate(45deg); }
.ix-pop-cat { font: 300 .58rem var(--mono); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.ix-pop-name { margin: .5rem 0 0; font: 400 1.2rem/1.15 var(--serif); color: var(--ink); }
.ix-pop-vendor { margin: .3rem 0 0; font: 300 .64rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ix-pop-link { display: inline-block; margin-top: .85rem; font: 300 .64rem var(--mono); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; color: var(--acid); border-bottom: 1px solid var(--acid); padding-bottom: 3px; }

/* Room copy */
.ix-box-head { margin-bottom: 1.6rem; }
.ix-eyebrow { margin: 0 0 1rem; font: 300 .66rem var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.ix-project-title { margin: 0; font: 400 clamp(1.9rem, 3vw, 3rem)/1.04 var(--serif); letter-spacing: -.01em; max-width: 20ch; }
.ix-project-copy { margin: 1.1rem 0 0; max-width: 52ch; font: 300 clamp(.96rem, 1vw, 1.05rem)/1.68 var(--sans); color: #cfd8bf; }

/* Numbered sourcing table with piece thumbnails, linked to the hotspots */
.ix-source { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ix-src { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(.9rem, 1.8vw, 1.5rem); align-items: center; padding: clamp(.95rem, 1.4vw, 1.15rem) 0; min-height: 60px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .2s; }
.ix-src:hover, .ix-src.is-hot { background: rgba(233,240,86,.06); }
.ix-src-n { width: 32px; height: 32px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font: 400 .8rem var(--mono); color: var(--muted); transition: border-color .2s, color .2s, background .2s; }
.ix-src:hover .ix-src-n, .ix-src.is-hot .ix-src-n { border-color: var(--acid); color: var(--caviar-brand); background: var(--acid); }
.ix-src-name { display: block; font: 400 clamp(1.08rem, 1.4vw, 1.35rem)/1.14 var(--serif); }
.ix-src-vendor { display: block; margin-top: .3rem; font: 300 .64rem var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ix-src-link { font: 300 .62rem var(--mono); text-transform: uppercase; letter-spacing: .07em; text-decoration: none; color: var(--muted); white-space: nowrap; border-bottom: 1px solid transparent; padding: 10px 0 3px; transition: color .2s, border-color .2s; }
.ix-src-link:hover { color: var(--acid); border-color: var(--acid); }
.ix-src-link:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }

/* Sourcing rows arrive one after another once the room body reveals.
   Needs its own keyframe: ix-rise has no from-state, so it would no-op here. */
@keyframes ix-row { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ix-room-body.in .ix-src { animation: ix-row .7s var(--ease) both; }
.ix-room-body.in .ix-src:nth-child(1) { animation-delay: .12s; }
.ix-room-body.in .ix-src:nth-child(2) { animation-delay: .2s; }
.ix-room-body.in .ix-src:nth-child(3) { animation-delay: .28s; }
.ix-room-body.in .ix-src:nth-child(4) { animation-delay: .36s; }
.ix-room-body.in .ix-src:nth-child(5) { animation-delay: .44s; }

/* Layer switcher: one photograph, the drawing and the notes stacked over it.
   Every layer is the same pixel size and crossfades in place, so the room
   never moves under the buyer while they switch. */
.ix-layers { max-width: 1080px; margin: 0 auto; padding: clamp(3rem, 7vw, 7rem) clamp(1.5rem, 5vw, 4rem) 0; border-top: 1px solid var(--line); }
/* This header carries the argument for the whole section, so it sits centred
   and reads a size up from the room copy above it. */
.ix-layers-head { margin: 0 auto clamp(2.2rem, 4vw, 3.4rem); max-width: 64ch; text-align: center; }
.ix-layers-head .ix-project-title { max-width: 22ch; margin: 0 auto; font-size: clamp(2.1rem, 3.7vw, 3.5rem); }
.ix-layers-head .ix-project-copy { max-width: 60ch; margin: 1.4rem auto 0; font-size: clamp(1.06rem, 1.3vw, 1.25rem); line-height: 1.72; }
.ix-lx { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.ix-lx-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); box-shadow: 0 34px 80px rgba(0,0,0,.45); }
.ix-lx-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .55s var(--ease); }
.ix-lx-layer.is-on { opacity: 1; }
.ix-lx-switch { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.ix-lx-switch button { flex: 1 1 auto; min-height: 48px; padding: .85rem 1.1rem; border: 1px solid var(--line); border-radius: 100px; background: none; color: var(--muted); font: 300 .68rem var(--mono); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; transition: color .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease); }
.ix-lx-switch button:hover { color: var(--ink); border-color: rgba(233,240,86,.45); }
.ix-lx-switch button.is-on { background: var(--acid); border-color: var(--acid); color: var(--caviar-brand); }
.ix-lx-switch button:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }

/* Closing CTA + request form */
.ix-cta { max-width: 1080px; margin: 0 auto; padding: clamp(3rem, 7vw, 7rem) clamp(1.5rem, 5vw, 4rem) 6rem; border-top: 1px solid var(--line); }
.ix-cta .ix-box, .ix-cta .ix-box-head { display: grid; gap: 1.8rem; margin: 0; }
.ix-cta h2 { margin: 0; max-width: 16ch; font: 400 clamp(2rem, 4vw, 3.6rem)/1.02 var(--serif); letter-spacing: -.02em; }
.ix-form { display: grid; gap: .85rem; max-width: 34rem; }
.ix-form-title { margin: 0; font: 400 clamp(1.15rem, 1.6vw, 1.5rem)/1.2 var(--serif); }
.ix-field { display: grid; gap: .35rem; }
.ix-field label { font: 300 .64rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ix-field input, .ix-field textarea { background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font: 400 .95rem var(--sans); padding: .8rem .9rem; min-height: 48px; }
.ix-field input:focus, .ix-field textarea:focus { outline: none; border-color: rgba(233,240,86,.55); }
.ix-field textarea { min-height: 96px; resize: vertical; }
.ix-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.ix-submit { justify-self: start; margin-top: .4rem; padding: 1rem 1.9rem; min-height: 48px; border: 1px solid var(--acid); border-radius: 100px; background: var(--acid); color: var(--caviar-brand); font: 400 .7rem var(--mono); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; transition: .25s var(--ease); }
.ix-submit:hover { transform: translateY(-2px); }
.ix-submit:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }
.ix-form-alt { margin: 0; font: 300 .85rem var(--sans); color: var(--muted); }
.ix-form-alt a { text-decoration: underline; text-underline-offset: 3px; }
/* Human check reads as part of the form, not as a gate bolted onto it. */
.ix-human { margin-top: .4rem; padding: .95rem 1.1rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(233,240,86,.04); }
.ix-human label { text-transform: none; letter-spacing: .01em; font: 300 .82rem/1.5 var(--sans); color: #c5d1b3; }
.ix-human label b { font-weight: 400; color: var(--acid); }
.ix-human input { margin-top: .5rem; max-width: 11rem; }
/* Bait for anything filling the form without reading it. Kept out of the
   layout, the tab order and the accessibility tree, never display:none,
   since some bots skip fields that are hidden that way. */
.ix-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ix-form-error { margin: 0; min-height: 0; font: 300 .85rem/1.5 var(--sans); color: #f0a58a; }
.ix-form-error:empty { display: none; }
.ix-form.has-error .ix-submit { border-color: #f0a58a; }
.ix-form.is-sent .ix-form-body { display: none; }
.ix-form-thanks { display: none; font: 400 1.05rem/1.5 var(--serif); }
.ix-form.is-sent .ix-form-thanks { display: block; }

/* What happens next: sits under the form so the terms are visible before
   anyone commits, without competing with the form itself. */
.ix-next { max-width: 34rem; margin-top: clamp(2rem, 3.5vw, 2.8rem); padding-top: clamp(1.5rem, 2.5vw, 2rem); border-top: 1px solid var(--line); }
.ix-next-title { margin: 0 0 1.2rem; font: 300 .66rem var(--mono); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.ix-next-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ix-next-steps li { display: flex; gap: 1rem; align-items: baseline; }
.ix-next-steps b { flex: 0 0 auto; font: 400 .68rem var(--mono); color: var(--acid); }
.ix-next-steps span { font: 300 .95rem/1.65 var(--sans); color: #c5d1b3; }
.ix-next-fee { margin: 1.4rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); font: 300 .95rem/1.6 var(--sans); color: var(--ink); }

/* Side menu */
.ix-menu { position: fixed; inset: 0; z-index: 140; padding: 5rem clamp(1.25rem, 5vw, 5rem); background: var(--acid); color: var(--caviar-brand); transform: translateX(101%); transition: transform .7s cubic-bezier(.77,0,.18,1); display: flex; flex-direction: column; }
.ix-menu.is-open { transform: none; }
.ix-menu-top { display: flex; align-items: center; justify-content: space-between; }
.ix-menu-top .lang-switch-btn { border-color: rgba(44,47,50,.4); color: var(--caviar-brand); }
.ix-menu-top .lang-switch-btn.active { background: var(--caviar-brand); color: var(--acid); border-color: var(--caviar-brand); }
.ix-menu-top .lang-switch-pop { background: var(--caviar-brand); }
.ix-menu-close { border: 0; background: none; font: 300 .62rem var(--mono); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.ix-menu nav { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }
.ix-menu nav a { text-decoration: none; font: 400 clamp(2rem, 5vw, 4.6rem)/1.06 var(--serif); }
.ix-menu nav a:hover { font-style: italic; }
.ix-menu-meta { margin-top: 2rem; font: 300 .58rem var(--sans); color: rgba(44,47,50,.75); }

/* ---- responsive ladder: iPad landscape, iPad portrait, phones, small phones */
@media (max-width: 1024px) {
  .ix-room { padding: clamp(2.75rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem); }
  .ix-cta { padding: clamp(2.75rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem) 5rem; }
}
@media (max-width: 834px) {
  .ix-intro { min-height: 84svh; padding: 92px clamp(1.5rem, 5vw, 3rem) 60px; }
  /* A 29:20 render loses too much presence once the column narrows */
  .ix-stage { aspect-ratio: 4 / 3; }
  .ix-project-title { max-width: 24ch; }
}
@media (max-width: 720px) {
  .ix-form-row { grid-template-columns: 1fr; }
  .ix-src { gap: .8rem; }
  .ix-room-tag { left: .75rem; bottom: .75rem; }
}
@media (max-width: 560px) {
  .ix-stage { aspect-ratio: 5 / 4; }
  .ix-header { height: 56px; }
  .ix-wordmark { font-size: 1.2rem; }
  /* The source link no longer fits beside the name: drop it under the row */
  .ix-src { grid-template-columns: auto 1fr; row-gap: .5rem; }
  .ix-src-link { grid-column: 2; justify-self: start; white-space: normal; }
  .ix-submit { justify-self: stretch; text-align: center; }
}
@media (max-width: 380px) {
  .ix-stage { aspect-ratio: 1 / 1; }
  .ix-dot { width: 36px; height: 36px; font-size: .84rem; }
  .ix-room { padding: 2.25rem 1.15rem; }
  .ix-cta { padding: 2.25rem 1.15rem 4rem; }
  .ix-intro { padding: 84px 1.15rem 52px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .reveal-clip { clip-path: none; }
  .ix-intro-title .ix-l i { transform: none; }
  .ix-loader { display: none; }
}