/* Landing page, dark editorial variant. Fixed tokens (easing) and the viewer/editor live in style.css; this file re-themes them.
   One accent (--accent), hairlines instead of shadows, small radii, no blur or grain. Change --accent to re-colour the whole page. */
:root[data-theme="dark"] {
  --bg: #0a0a0b; --bg2: #0f0f11; --panel: #131316; --line: #232327; --line2: #34343a;
  --text: #ececec; --muted: #8a8a93; --accent: #d4ff3f; --accent2: #f2f2ee; --on-accent: #0a0a0b;
  --shadow: rgba(0, 0, 0, .6); --nav-bg: rgba(10, 10, 11, .92); --glass: rgba(10, 10, 11, .86);
  --art-bg: #131316;
  --serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* the viewer's titles follow */
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --ink: #d4ff3f; /* the accent as text: on dark it is the lime itself */
  color-scheme: dark;
}
/* light: paper-white, the lime becomes a highlighter fill and small accent text turns olive so it stays readable */
:root[data-theme="light"] {
  --bg: #f4f4f0; --bg2: #ecece7; --panel: #e8e8e2; --line: #dadad2; --line2: #c6c6bd;
  --text: #121214; --muted: #66666e; --accent: #d4ff3f; --accent2: #121214; --on-accent: #0a0a0b; --ink: #4f6c00;
  --shadow: rgba(0, 0, 0, .18); --nav-bg: rgba(244, 244, 240, .92); --glass: rgba(244, 244, 240, .86); --art-bg: #e8e8e2;
  --serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
:root { --r: 6px; }
body { font-feature-settings: "ss01", "cv11"; }
::selection { background: var(--accent); color: var(--on-accent); }
.wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }
.num, .eyebrow, .hero-facts, .tags, .idx, .go, .services .n, .foot, .sub { font-family: var(--mono); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 10; display: flex; justify-content: space-between; align-items: center;
  height: calc(60px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(24px, calc((100% - 1240px) / 2)) 0;
  border-bottom: 1px solid transparent; transition: background .3s, border-color .3s;
}
.nav.scrolled { background: var(--nav-bg); border-color: var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em; }
.brand i { width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--accent); box-shadow: 9px -6px 0 -3px var(--accent2), 4px 8px 0 -4px var(--muted); margin-right: 8px; }
.nav nav { display: flex; align-items: center; gap: 2px; }
.nl { white-space: nowrap; color: var(--muted); padding: 10px 14px; font-size: .9rem; transition: color .2s; }
.nl:hover { color: var(--text); }
.nav-cta { margin-left: 8px; padding: 9px 16px; border: 1px solid var(--line2); border-radius: var(--r); color: var(--text); font-size: .88rem; font-weight: 500; transition: background .2s, color .2s, border-color .2s; }
.nav-cta:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.theme { margin-left: 8px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line2); border-radius: var(--r); background: none; color: var(--muted); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.theme:hover { color: var(--text); border-color: var(--text); }
.theme .moon { display: none; }
:root[data-theme="dark"] .theme .sun { display: none; } :root[data-theme="dark"] .theme .moon { display: block; }
body, .nav, .media { transition: background-color .35s, border-color .35s, color .35s; }

/* ---------- hero: crisp points drift into a knot ---------- */
.hero { position: relative; }
.hero-pin { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: clip; isolation: isolate; }
#hero { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; touch-action: pan-y; cursor: crosshair; }
.hero-veil { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, var(--bg) 4%, color-mix(in srgb, var(--bg) 70%, transparent) 36%, transparent 64%); }
.hero-art { display: none; }
.hero-inner { width: min(1240px, 100% - 48px); margin-inline: auto; padding: 110px 0 120px; pointer-events: none; }
.hero-inner a, .hero-inner button { pointer-events: auto; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 clamp(20px, 3vw, 32px); color: var(--muted); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); animation: blink 2.4s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .25; } }
h1 { margin: 0 0 clamp(22px, 3vw, 34px); font: 600 clamp(2.9rem, min(7.7vw, 14vh), 7rem)/.98 var(--serif); letter-spacing: -.055em; }
h1 em { font-style: normal; color: var(--ink); }
.lead { max-width: 30em; margin: 0 0 clamp(28px, 4vw, 40px); color: var(--muted); font-size: clamp(1.02rem, 2.3vw, 1.2rem); line-height: 1.55; text-wrap: pretty; }
.cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; }
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 24px; border: 0; border-radius: var(--r); background: var(--accent); color: var(--on-accent); font: 600 .98rem var(--sans); cursor: pointer; transition: background .2s, transform .2s var(--ease); }
.btn span { transition: transform .3s var(--ease); }
.btn:hover { background: var(--text); color: var(--bg); }
.btn:hover span { transform: translate(2px, -2px); }
.btn:active { transform: scale(.98); }
.link { color: var(--text); font-weight: 500; display: inline-flex; gap: 8px; padding: 12px 2px; border-bottom: 1px solid transparent; }
.link:hover { color: var(--ink); }
.hero-facts { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(1240px, 100% - 48px); margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.hero-facts li { padding: 16px 16px 20px 0; color: var(--muted); font-size: .72rem; letter-spacing: .04em; line-height: 1.5; }
.hero-facts b { display: block; font-style: normal; color: var(--text); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; }
.coarse { display: none; }
@media (pointer: coarse), (hover: none) { .fine { display: none; } .coarse { display: inline; } }

/* ---------- sections ---------- */
section.wrap { padding-top: clamp(80px, 11vw, 150px); }
.sechead { display: grid; gap: 14px; margin-bottom: clamp(28px, 4.5vw, 56px); }
.num { color: var(--ink); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
h2 { margin: 0; font: 600 clamp(2.1rem, 5.4vw, 4rem)/1 var(--serif); letter-spacing: -.045em; }
.sub { max-width: 44em; margin: 4px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.6; text-wrap: pretty; }

/* ---------- compare: the same room, two ways ---------- */
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0; }
.panel { margin: 0; min-width: 0; }
.panel figcaption { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font: 500 1rem var(--sans); letter-spacing: -.01em; }
.panel figcaption b { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line2); border-radius: 4px; color: var(--muted); font: 500 .72rem var(--mono); }
.panel.b figcaption b { border-color: var(--ink); background: var(--accent); color: var(--on-accent); }
.view { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel) var(--poster) center / cover no-repeat; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.panel.b .view { border-color: color-mix(in srgb, var(--ink) 60%, var(--line)); }
.view.drag { cursor: grabbing; }
.view .cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.view .fade { position: absolute; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none; transition: opacity .26s; }
.view .fade.on { opacity: 1; }
.hot { position: absolute; left: 0; top: 0; z-index: 2; width: 52px; height: 52px; padding: 0; border: 0; background: none; cursor: pointer; }
.hot[hidden] { display: none; }
.hot i { position: absolute; inset: 15px; border: 2px solid #fff; border-radius: 50%; background: rgba(255, 255, 255, .28); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); transition: transform .2s var(--ease), background .2s; }
.hot:hover i { transform: scale(1.25); background: rgba(255, 255, 255, .6); }
.hot::after { content: ""; position: absolute; inset: 11px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; animation: ping 2.2s ease-out infinite; }
@keyframes ping { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.start { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--r); background: var(--accent); color: var(--on-accent); font: 600 .95rem var(--sans); cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .2s var(--ease); }
.start:hover { transform: translate(-50%, -50%) scale(1.03); }
.start.busy { opacity: .7; cursor: progress; }
.view .loadbar { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 3px; opacity: 0; transition: opacity .2s; }
.view .loadbar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.start.busy ~ .loadbar { opacity: 1; }
.pad { position: absolute; z-index: 2; right: 12px; bottom: 12px; display: none; flex-direction: column; gap: 8px; }
@media (pointer: coarse), (hover: none) { .view.live .pad { display: flex; } }
.pad button { width: 52px; height: 52px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(10, 10, 11, .55); color: #fff; font-size: 1rem; touch-action: none; }
.vfail { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px; margin: 0; padding: 10px 12px; border-radius: 4px; background: rgba(10, 10, 11, .86); color: #ececec; font: .76rem/1.45 var(--mono); }
.howto { margin: 10px 0 0; max-width: 34em; color: color-mix(in srgb, var(--text) 70%, var(--bg)); font: .74rem/1.55 var(--mono); letter-spacing: .02em; text-transform: none; transition: opacity .3s; }
.howto.done { opacity: .5; }
.cmp-note { margin: 18px 0 clamp(36px, 5vw, 56px); max-width: 52em; color: var(--muted); font: .74rem/1.6 var(--mono); }
.vs { width: 100%; border-collapse: collapse; }
.vs .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.vs thead th { padding: 0 18px 14px; color: var(--muted); font: 500 .72rem var(--mono); letter-spacing: .12em; text-align: left; text-transform: uppercase; }
.vs tbody th, .vs td { padding: 18px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; font-size: .98rem; line-height: 1.45; }
.vs tbody th { width: 22%; padding-left: 0; font-weight: 500; }
.vs td { color: var(--muted); }
.vs td.win { color: var(--text); background: color-mix(in srgb, var(--accent) 8%, transparent); } /* the cell that wins its row */
.vs tbody tr:last-child th, .vs tbody tr:last-child td { border-bottom: 1px solid var(--line); }

/* ---------- work: a live view of the scene, with the caption underneath ---------- */
.grid { display: grid; gap: clamp(36px, 5vw, 64px) 20px; grid-template-columns: repeat(12, 1fr); }
.tile { grid-column: span 6; display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tile.feature { grid-column: 1 / -1; }
.media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); isolation: isolate; transition: border-color .3s; }
.tile.feature .media { aspect-ratio: 21 / 9; }
.tile:hover .media, .tile:focus-visible .media { border-color: var(--ink); }
.thumb { position: absolute; inset: 0; background: var(--panel) center / cover no-repeat; transition: transform 1.2s var(--ease), opacity .6s; }
.tile:hover .thumb { transform: scale(1.025); }
/* no picture yet: a quiet grid, like an empty viewport */
/* light page: the lime is a highlighter behind the key words instead of coloured text */
:root[data-theme="light"] h1 em, :root[data-theme="light"] .lede em { color: var(--text); padding: 0 .1em; margin-inline: -.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--accent), var(--accent)) 0 86% / 100% 56% no-repeat; } /* a marker stroke across the lower half of the letters, so it never reaches the line above */
.thumb:not(.has-img) { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 32px 32px; background-position: center; }
.tile.live .thumb { opacity: 0; } /* the live view takes over from the picture */
.peek { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.peek-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .7s; }
.peek.on .peek-canvas { opacity: 1; }
.badge { position: absolute; z-index: 2; top: 14px; left: 14px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 4px; background: rgba(10, 10, 11, .78); color: #ececec; font: 500 .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.badge { opacity: 0; transition: opacity .3s; }
.tile.live .badge, .tile.loading-peek .badge { opacity: 1; }
.badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.tile.live .badge i { background: var(--accent); animation: blink 1.6s steps(2, jump-none) infinite; }
.tile.loading-peek .badge::after { content: "loading"; color: var(--muted); }
.tile.live .badge::after { content: "live"; color: #d4ff3f; }
.cap { display: grid; grid-template-columns: 3.2rem 1fr auto; column-gap: 12px; row-gap: 8px; padding: 18px 0 0; align-items: baseline; }
.idx { color: var(--muted); font-size: .74rem; letter-spacing: .08em; }
.tile h3 { margin: 0; font: 500 clamp(1.3rem, 2.4vw, 1.7rem)/1.15 var(--serif); letter-spacing: -.03em; text-wrap: balance; }
.tile.feature h3 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
.tile p { grid-column: 2; margin: 0; max-width: 40em; color: var(--muted); font-size: .95rem; line-height: 1.5; text-wrap: pretty; }
.tile p:empty { display: none; }
.tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.tags:empty { display: none; }
.tag { padding: 3px 8px; border: 1px solid var(--line2); border-radius: 3px; color: var(--muted); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.go { grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transition: color .2s; }
.go i { font-style: normal; transition: transform .35s var(--ease); }
.tile:hover .go, .tile:focus-visible .go { color: var(--ink); }
.tile:hover .go i { transform: translate(2px, -2px); }

/* edit mode: the "add a scene" card is plain and dashed */
.tile.add { grid-column: span 6; min-height: 200px; display: grid; place-items: center; border: 1px dashed var(--line2); border-radius: var(--r); }
.tile.add:hover, .tile.add.drag { border-color: var(--ink); }
.tile.add .thumb, .tile.add .media, .tile.add .cap { position: static; }
.tile.add .meta { padding: 28px; text-align: center; }
.tile.add p { color: var(--muted); }

.lede em { font-style: normal; color: var(--ink); }

/* ---------- services: a ruled list ---------- */
.services { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.services li { display: grid; grid-template-columns: 5rem minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px 24px; align-items: baseline; padding: 30px 0; border-top: 1px solid var(--line); transition: background .25s; }
.services .n { color: var(--ink); font-size: .74rem; letter-spacing: .14em; }
.services h3 { margin: 0; font: 500 clamp(1.4rem, 2.6vw, 2rem)/1.1 var(--serif); letter-spacing: -.035em; text-wrap: balance; }
.services p { margin: 0; color: var(--muted); max-width: 28em; text-wrap: pretty; }

/* ---------- what is it ---------- */
.lede { max-width: 17em; font-size: clamp(2rem, 5.4vw, 4.2rem); line-height: 1.02; letter-spacing: -.05em; text-wrap: balance; }
.what-lead { max-width: 36em; margin: 0 0 clamp(36px, 5vw, 64px); color: var(--muted); font-size: clamp(1.02rem, 2vw, 1.2rem); line-height: 1.6; text-wrap: pretty; }
.who { margin: clamp(28px, 4vw, 48px) 0 0; color: var(--muted); font-size: clamp(1rem, 1.8vw, 1.15rem); line-height: 1.5; }

/* ---------- industries: a ruled grid ---------- */
.sectors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; border: 1px solid var(--line); border-radius: var(--r); background: var(--line); overflow: hidden; }
.sectors li { display: grid; gap: 12px; align-content: start; padding: clamp(22px, 3vw, 34px); background: var(--bg); transition: background .25s; }
.sectors li:hover { background: var(--bg2); }
.sectors svg { width: 34px; height: 34px; margin-bottom: 10px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sectors h3 { margin: 0; font: 500 clamp(1.15rem, 2vw, 1.4rem)/1.2 var(--serif); letter-spacing: -.03em; text-wrap: balance; }
.sectors p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.5; text-wrap: pretty; }

/* ---------- how it works ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 28px; }
.steps li { position: relative; padding: 26px 0 8px; border-top: 1px solid var(--line2); }
.steps li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.steps .n { display: block; margin-bottom: 18px; color: var(--ink); font: .74rem var(--mono); letter-spacing: .14em; }
.steps h3 { margin: 0 0 10px; font: 500 clamp(1.25rem, 2.1vw, 1.55rem)/1.15 var(--serif); letter-spacing: -.03em; text-wrap: balance; }
.steps p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; text-wrap: pretty; }

/* ---------- contact + footer ---------- */
.big { margin: 0; font: 600 clamp(2.2rem, 8vw, 6.4rem)/1 var(--serif); letter-spacing: -.055em; }
.big a { display: inline-flex; align-items: baseline; gap: .1em; color: var(--ink); overflow-wrap: anywhere; background: linear-gradient(currentColor, currentColor) 0 100% / 0 3px no-repeat; transition: background-size .5s var(--ease); }
.big a:hover, .big a:focus-visible { background-size: 100% 3px; }
.big a span { font-size: .5em; transition: transform .35s var(--ease); }
.big a:hover span { transform: translate(.1em, -.1em); }
.contact-note { margin: 22px 0 0; max-width: 32em; color: var(--muted); font: .8rem/1.6 var(--mono); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: clamp(80px, 12vw, 150px) 48px; color: var(--muted); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--text); }

/* ---------- reveal on scroll (only when JS is on, so nothing is ever hidden without it) ---------- */
.js [data-reveal]:not(.in) { opacity: 0; transform: translateY(24px); }
.js [data-reveal].in { animation: rise .9s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
.no-reveal [data-reveal]:not(.in) { opacity: 1; transform: none; }
.no-reveal [data-reveal].in { animation: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal]:not(.in) { opacity: 1; transform: none; } .js [data-reveal].in { animation: none; } }

/* viewer + editor (style.css) were made for an orange accent with white text: keep their text readable on the new one */
.pill:hover, .ed button:hover, .ed button.pri, .edsteps button.on, .ed .edseg button.on, .plan button.on { color: var(--on-accent); }

/* ---------- tablets and phones ---------- */
@media (max-width: 1000px) { .sectors { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: repeat(2, 1fr); gap: 8px 28px; } .steps li { padding-bottom: 26px; } }
@media (max-width: 900px) {
  .cmp { grid-template-columns: 1fr; }
  .tile, .tile.add { grid-column: 1 / -1; }
  .tile.feature .media { aspect-ratio: 16 / 10; }
  .services li { grid-template-columns: 3.2rem 1fr; }
  .services p { grid-column: 2; }
}
@media (max-width: 720px) {
  .wrap, .hero-inner, .hero-facts { width: calc(100% - 40px); }
  .nl { display: none; }
  .nav { padding-inline: 20px; height: calc(56px + env(safe-area-inset-top)); }
  .btn { flex: 1 1 100%; justify-content: center; }
  .link { margin-inline: auto; }
  .grid { gap: 28px; }
  .media, .tile.feature .media { aspect-ratio: 4 / 3; }
  .cap { grid-template-columns: 2.4rem 1fr auto; padding-top: 14px; }
  .tile.feature h3 { font-size: 1.55rem; }
  .tile p { font-size: .9rem; }
  .go b { display: none; }
  .services li { padding: 22px 0; }
  .sectors, .steps { grid-template-columns: 1fr; }
  .sectors li { padding: 22px 20px; }
  .hero-facts li:nth-child(n + 3) { display: none; }
  .hero-facts { grid-template-columns: 1fr 1fr; }
  .foot { justify-content: flex-start; padding-bottom: 36px; }
}

/* Narrow OR portrait screens (phones, tablets held upright): the knot sits above the text instead of beside it.
   hero.js uses the very same condition, so the animation and the text always agree. */
@media (orientation: portrait), (orientation: landscape) and (max-width: 900px) and (min-height: 521px) {
  h1 { font-size: clamp(3rem, 13.2vw, 7.4rem); }
  .hero-pin { align-items: flex-start; }
  .hero-inner { padding: 92px 0 56px; } /* the words start under the header */
  .hero-art { display: block; height: clamp(160px, 27svh, 270px); margin: -6px 0 6px; } /* the cloud lives here, between the headline and the paragraph (hero.js) */
  .hero-veil { display: none; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .hero-inner { padding-block: 80px 80px; }
  h1 { margin-bottom: 14px; font-size: clamp(2.2rem, 11vh, 4rem); }
  .lead { margin-bottom: 18px; font-size: .95rem; }
  .btn { min-height: 44px; }
  .hero-facts { display: none; }
}
@media (min-width: 721px) and (max-width: 1100px) and (orientation: landscape) { .lead { max-width: min(30em, 50%); } }
@media (orientation: portrait) and (max-height: 720px) {
  h1 { font-size: clamp(2.5rem, 11.6vw, 3.5rem); margin-bottom: 16px; }
  .lead { font-size: .98rem; margin-bottom: 22px; }
  .hero-inner { padding: 84px 0 48px; }
  .btn { min-height: 48px; }
}

/* the scene viewer on phones: the title only, so the tour button never lands on the description */
@media (max-width: 600px) { .bar span { display: none; } }

/* phones, upright: the knot is the backdrop and the words sit in the lower third, so the hero is just the headline and the button */
@media (max-width: 720px) and (orientation: portrait) {
  .hero-facts { display: none; }
  .lead { color: color-mix(in srgb, var(--text) 82%, var(--bg)); }
  .eyebrow, h1, .lead { text-shadow: 0 0 14px color-mix(in srgb, var(--bg) 80%, transparent), 0 0 4px color-mix(in srgb, var(--bg) 55%, transparent); } /* a soft halo, so the words stay sharp where points pass behind them */
  .hero-inner { padding: 88px 0 48px; }
  .lead { margin-bottom: 22px; }
}

/* ?scroll: the hero stays pinned for a while and scrolling drives the knot (hero.js sets --p, 0..1 through the pinned stretch):
   the words fade up and away, the knot grows and turns, then scatters as the work arrives */
.scrolly .hero { height: 230vh; height: 230svh; }
.scrolly .hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
.scrolly .hero-inner { opacity: clamp(0, calc(1 - var(--p, 0) * 2.6), 1); transform: translateY(calc(var(--p, 0) * -56px)); }
.scrolly .hero-facts { opacity: clamp(0, calc(1 - var(--p, 0) * 4), 1); }
.scrolly .hero-veil { opacity: clamp(0, calc(1 - var(--p, 0) * 2.5), 1); }
/* the work slides up over the scattering knot like a curtain, so there is never an empty screen between them */
.scrolly #what { position: relative; z-index: 2; isolation: isolate; margin-top: -64vh; margin-top: -64svh; padding-top: clamp(56px, 9vw, 120px); }
.scrolly #what::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); } /* full width without creating sideways overflow (that would zoom a phone out) */
.pill { white-space: nowrap; }

/* phones: the email stays on one line, sized to the screen (it used to break in the middle of ".com" on narrow ones) */
@media (max-width: 720px) { .big a { font-size: min(.9em, 8.8vw); white-space: nowrap; } }

/* keyboard focus: the lime ring is invisible on the light page, so it follows the readable accent */
:focus-visible { outline-color: var(--ink); }
.skip { position: absolute; z-index: 30; left: 12px; top: -60px; padding: 10px 16px; border-radius: var(--r); background: var(--accent); color: var(--on-accent); font-weight: 600; transition: top .15s; }
.skip:focus { top: 12px; }

/* phones: the table keeps its two columns side by side. The headers sit once at the top (and stay while scrolling), each row's label spans
   the full width above its two cells, and the winning cell keeps its lime tint, so the eye can follow one column down. */
@media (max-width: 720px) {
  .vs, .vs thead, .vs tbody { display: block; }
  .vs thead { position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 5; background: var(--bg); }
  .vs thead tr, .vs tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .vs thead th:first-child { display: none; }
  .vs thead th { padding: 12px 12px 10px; border-bottom: 1px solid var(--line2); }
  .vs tbody tr { padding: 14px 0 6px; border-top: 1px solid var(--line); }
  .vs tbody tr:last-child { border-bottom: 1px solid var(--line); }
  .vs tbody th { grid-column: 1 / -1; width: auto; padding: 0 0 8px; border: 0; }
  .vs tbody td { padding: 12px; border: 0; border-radius: 4px; font-size: .9rem; line-height: 1.4; }
}

/* phones: the number sits above each title instead of taking a column beside it */
@media (max-width: 720px) {
  .services li { grid-template-columns: 1fr; gap: 6px; }
  .services .n { margin-bottom: 4px; }
  .services p { grid-column: auto; }
}

/* phones: no particle cloud at all (hero.js does not even load it), so the hero is just the words, centred in the first screen */
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) { #hero, .hero-art, .hero-veil { display: none; } }
@media (max-width: 720px) {
  .hero-pin { align-items: center; }
  .hero-inner { --g: clamp(18px, 3.5svh, 36px); padding: 104px 0 72px; } /* --g: one gap unit that grows with the screen height */
  .hero-inner .eyebrow { margin-bottom: var(--g); }
  .hero-inner h1 { margin-bottom: calc(var(--g) * 1.25); }
  .hero-inner .lead { margin-bottom: calc(var(--g) * 1.4); line-height: 1.65; }
  .hero-inner .cta { gap: 0 28px; } /* the link sits right under the button */
  .hero-inner .link { padding-block: 14px; }
}

.start .mb { margin-left: 2px; padding-left: 10px; border-left: 1px solid color-mix(in srgb, var(--on-accent) 35%, transparent); font: 500 .72rem var(--mono); letter-spacing: .06em; opacity: .75; }
.start { white-space: nowrap; }
.start .mb { white-space: nowrap; }

.hot em { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); padding: 2px 8px; border-radius: 3px; background: rgba(10, 10, 11, .72); color: #fff; font: 500 .66rem var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }

.rooms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rooms button { padding: 7px 12px; border: 1px solid var(--line2); border-radius: 4px; background: none; color: var(--muted); font: 500 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.rooms button:hover { color: var(--text); border-color: var(--text); }
.rooms button.on { background: var(--text); border-color: var(--text); color: var(--bg); }

/* ---------- the scene window with a floor plan ----------
   Computers / big tablets ("mode-split"): a size-limited window, the scene on the left, the plan on the right. A smaller picture is far less for the GPU to draw
   than a full-screen one. Phones ("mode-tabs"): a Miljö / Planritning tab switch; the scene is not drawn while the plan tab is open. */
.modal { --side: 0px; }
@media (min-width: 900px) and (min-height: 560px) {
  .modal.mode-split { --side: 400px; inset: auto; left: 50%; top: 50%; width: min(1320px, 94vw); height: min(780px, 90vh); height: min(780px, 90dvh); transform: translate(-50%, -50%);
    border-radius: 14px; overflow: hidden; border: 1px solid #ffffff1c; box-shadow: 0 0 0 100vmax rgba(6, 6, 7, .9), 0 40px 90px rgba(0, 0, 0, .6); }
}
.mode-split .stage { width: auto; right: var(--side); }
.mode-split .bar { right: var(--side); }
.mode-split .loading, .mode-split .introknot { right: var(--side); width: auto; }
.mode-split .pills, .mode-split .toast, .mode-split .roomname { left: calc((100% - var(--side)) / 2); }
.mode-split .miniplan:not([hidden]), .mode-tabs .miniplan:not([hidden]) { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mode-split .miniplan { position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: var(--side); padding: 22px 18px 18px; border-radius: 0; border-left: 1px solid #ffffff14; background: #0f0f11; backdrop-filter: none; }
.mode-split .miniplan canvas, .mode-tabs .miniplan canvas { border-radius: 8px; box-shadow: 0 0 0 1px #ffffff1c; }
.ptitle { align-self: flex-start; margin: 0; color: #8a8a93; font: 500 .7rem var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.plist { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.plist button { padding: 8px 12px; border: 1px solid #34343a; border-radius: 4px; background: none; color: #bdbdc4; font: 500 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.plist button:hover { color: #fff; border-color: #fff; }
.plist button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.phint { margin: 0; color: #6f6f78; font: .7rem/1.5 var(--mono); text-align: center; }
.miniplan:not(.x) .plist[hidden], .plist[hidden], .ptitle:only-child { display: none; }
.miniplan .ptitle, .miniplan .phint, .miniplan .plist { display: none; }
.mode-split .miniplan .ptitle, .mode-split .miniplan .phint, .mode-split .miniplan .plist, .mode-tabs .miniplan .ptitle, .mode-tabs .miniplan .phint, .mode-tabs .miniplan .plist { display: flex; }
.mode-split .miniplan .ptitle, .mode-tabs .miniplan .ptitle, .mode-split .miniplan .phint, .mode-tabs .miniplan .phint { display: block; }
.tabs { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(10, 10, 11, .94); border-top: 1px solid #ffffff18; }
.tabs[hidden] { display: none; }
.tabs button { flex: 1; min-height: 46px; border: 1px solid #34343a; border-radius: 6px; background: none; color: #bdbdc4; font: 600 .86rem var(--sans); cursor: pointer; }
.tabs button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.is-intro .tabs { display: none !important; }
.mode-tabs .stage { bottom: calc(62px + env(safe-area-inset-bottom)); height: auto; }
.mode-tabs .loading { bottom: calc(62px + env(safe-area-inset-bottom)); }
.mode-tabs .miniplan { position: absolute; z-index: 5; inset: 0 0 calc(62px + env(safe-area-inset-bottom)) 0; width: auto; padding: 70px 12px 12px; border-radius: 0; background: #0f0f11; backdrop-filter: none; }
.mode-tabs .stick { bottom: calc(88px + env(safe-area-inset-bottom)); }
.mode-tabs .planbtn { display: none !important; }
.mode-tabs .roomname { top: calc(64px + env(safe-area-inset-top)); left: 20px; transform: none; }
.mode-tabs .pills { top: calc(64px + env(safe-area-inset-top)); left: auto; right: 16px; transform: none; }
.mode-tabs .toast { top: calc(116px + env(safe-area-inset-top)); }
.mode-split .miniplan:not([hidden]) { justify-content: center; }

/* the how-to-navigate hint: plain white text over the scene, no box; it fades in, stays a few seconds, and fades out */
.navhint { position: absolute; z-index: 4; left: 50%; bottom: calc(max(28px, env(safe-area-inset-bottom)) + 26px); transform: translateX(-50%); width: max-content; max-width: calc(100% - 48px); margin: 0; color: #fff; text-align: center; white-space: pre-line;
  font: 500 .92rem/1.5 var(--sans); letter-spacing: .01em; text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 0 18px rgba(0, 0, 0, .5); opacity: 0; transition: opacity .8s; pointer-events: none; }
.navhint.on { opacity: 1; }
.navhint[hidden] { display: none; }
.mode-split .navhint { left: calc((100% - var(--side)) / 2); }
.mode-tabs .navhint { bottom: calc(82px + env(safe-area-inset-bottom) + 150px); }
.is-intro .navhint, .is-model .navhint, .tab-plan .navhint { display: none !important; }

/* "stack" (tall phones, upright): the scene on top (a little over half the screen), the floor plan and the room buttons always visible below it */
.modal.mode-stack { --sh: clamp(250px, 56dvh, 560px); }
.mode-stack .stage, .mode-stack .loading { bottom: auto; height: var(--sh); }
.mode-stack .miniplan:not([hidden]) { position: absolute; z-index: 5; top: var(--sh); left: 0; right: 0; bottom: 0; width: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-radius: 0; border-top: 1px solid #ffffff18; background: #0f0f11; backdrop-filter: none; }
.mode-stack .miniplan canvas { border-radius: 8px; box-shadow: 0 0 0 1px #ffffff1c; }
.mode-stack .miniplan .ptitle, .mode-stack .miniplan .phint { display: none; }
.mode-stack .miniplan .plist { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.mode-stack .stick { bottom: calc(100% - var(--sh) + 18px); }
.mode-stack .navhint { bottom: calc(100% - var(--sh) + 168px); }
.mode-stack .planbtn, .mode-stack .tabs { display: none !important; }
.mode-stack .roomname { top: calc(64px + env(safe-area-inset-top)); left: 20px; transform: none; }
.mode-stack .toast { top: calc(116px + env(safe-area-inset-top)); }

/* the "picture is improving" line: a thin bar along the top of the scene while the full-quality scene downloads and decodes; it goes when the full scene is in (red if it fails) */
.fullbar { position: absolute; z-index: 7; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; }
.fullbar[hidden] { display: none; }
.fullbar b { display: block; height: 100%; width: 0; background: var(--accent); box-shadow: 0 0 8px var(--accent); transition: width .35s; }
.fullbar.wait b { width: 100% !important; animation: fullpulse 1.1s ease-in-out infinite alternate; }
.fullbar.err b { background: #ff4d4d; box-shadow: none; width: 100% !important; }
@keyframes fullpulse { from { opacity: .25; } to { opacity: 1; } }
.mode-split .fullbar { right: var(--side); }
.is-intro .fullbar { display: none !important; }