/* Hallmark · shape: Conversational FAQ, one page per world · genre: atmospheric · theme: Refract (the site's own, by request: these pages share site.css, tokens.css and base.css) · hero: Banner on the home page and At home (the head on paper, then the footage across the whole page, its label naming the scene that plays), Stage on At events (the film beside the head) · nav: edge-aligned · footer: mast over the audience index · imagery: the product, the owner's footage (room loop, Mahalla film, night event, plinth prototype) and stills drawn by the HELIO simulator, each captioned as what it is · signature: the hub's two doors, At home and At events, each a real picture of HELIO in that place with its three audiences named beneath
 * axes: light/grotesk-sans/cool · posture: restrained · modes: light+dark (prefers-color-scheme) · job: buy (enquire, book a demo) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the two world pages share a skeleton; each leads with its own footage and orders its sections by what that world asks first */
/* Hallmark · dropped the six audience pages · the owner found them redundant: they shared most sections and the same few clips; each world is one page now, its audiences three blocks with their own addresses */
/* Hallmark · moved the simulator from the home page's hero to /3d/ · the owner was told the page shows everything at once; the home page now says what HELIO is, then who it is for */
/* Hallmark · dismissed 42 · the footer is the site's index: the mast over three lists, the two worlds with their audiences and the three ways to see and order */
/* Hallmark · dismissed 58 · a world page carries a price table, a list of facts and the enquiry form; each screen still holds one of them */
/* Hallmark · reworded "Where does a mirrored sphere belong?" to "A mirrored sphere of light." · a visitor who has never seen HELIO needs the noun first */

:root {
  --lp-hero-h: calc(100svh - var(--nav-h));
  --banner-head-h: 13.25rem;
  --banner-full-h: calc(100vw * 27 / 64);
  --color-screen-veil: oklch(13% 0.004 95 / 0.66);
}

/* Nav on the audience pages: the two worlds, the simulator, one action */
.site-nav .nav-here { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule); }

/* Hero: what HELIO is, in this audience's words, beside its real footage */
.lp-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); align-items: center; min-height: var(--lp-hero-h); padding-block: var(--space-lg) var(--space-2xl); }
.lp-hero__text { display: grid; justify-items: start; gap: var(--space-lg); }
.lp-hero h1 { max-width: 12ch; font-size: var(--text-hero); line-height: 1.02; }
.lp-hero .lead { max-width: 30ch; color: var(--color-muted); }
.lp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }
.lp-hero__visual { display: grid; gap: var(--space-sm); margin: 0; }
.lp-hero__frame { position: relative; aspect-ratio: 16 / 10; max-height: calc(var(--lp-hero-h) - 7rem); overflow: hidden; border-radius: var(--radius-card); background: var(--color-screen); color: var(--color-on-screen); box-shadow: var(--shadow-cast); }
.lp-hero__frame > img, .lp-hero__frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-hero__visual figcaption, .showcase figcaption { color: var(--color-muted); font-size: var(--text-sm); }
.lp-hero--portrait { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
/* Footage with a taller cut for phones gets a taller frame there */
@media (max-width: 40rem) and (orientation: portrait) { .lp-hero__frame--phone { aspect-ratio: 4 / 5; } }
.lp-hero--portrait h1 { max-width: 14ch; }
.lp-hero--portrait .lp-hero__frame { aspect-ratio: 4 / 5; }
html:not(.js) .lp-hero__frame > video, html:not(.js) .showcase__frame > video { display: none; }

/* The banner hero (owner, 12 November 2026: the sphere, huge): the head on paper, then the footage
   across the whole page. On a wide screen the footage ends at the foot of the first screen; to get
   there it may lose 8 % of its height, all of it continued wall above the dome, and never more:
   on a shorter screen it runs on below, so the sphere is never cut. Its label names the scene that
   plays and stays in view while the footage is. */
.banner-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; min-height: var(--banner-head-h); padding-block: var(--space-lg) var(--space-xl); }
.banner-head h1 { grid-column: 1 / span 7; max-width: 14ch; font-size: var(--text-hero); line-height: 1.02; }
.banner-head__side { grid-column: 8 / span 5; display: grid; justify-items: start; gap: var(--space-lg); }
.banner-head .lead { max-width: 30ch; color: var(--color-muted); }
.banner { display: grid; gap: var(--space-sm); margin: 0; }
.banner__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; justify-items: start; width: 100%; height: clamp(calc(var(--banner-full-h) * 0.92), calc(100svh - var(--nav-h) - var(--banner-head-h)), var(--banner-full-h)); background: var(--color-screen); color: var(--color-on-screen); }
.banner__stage > picture { position: absolute; inset: 0; }
.banner__stage img, .banner__stage > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
/* The picture under the video is the poster, one per screen shape; the video joins it with its first frame */
.banner__stage > video { opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.banner__stage > video.is-live { opacity: 1; }
html:not(.js) .banner__stage > video, html:not(.js) .banner__playing { display: none; }
.banner__playing { grid-area: 1 / 1; position: sticky; bottom: var(--space-md); z-index: 1; display: inline-flex; align-items: baseline; gap: var(--space-xs); margin: var(--space-md) 0 var(--space-md) max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-screen-veil); color: var(--color-on-screen); font-size: var(--text-sm); }
.banner__playing b { font-size: var(--text-md); font-weight: 500; }
/* The simulator's button on the footage: glass like the label, so the head keeps its one filled button */
.banner__go { grid-area: 1 / 2; position: sticky; bottom: var(--space-md); z-index: 1; justify-self: end; display: inline-flex; align-items: center; min-height: 56px; margin: var(--space-md) max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))) var(--space-md) var(--space-md); padding: 0 var(--space-lg); border: 1px solid var(--color-on-screen); border-radius: var(--radius-pill); background: var(--color-screen-veil); color: var(--color-on-screen); font: 500 var(--text-lg)/1 var(--font-body); white-space: nowrap; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.banner__go:hover { background: var(--color-on-screen); color: var(--color-screen); }
.banner__go:active { transform: translateY(1px); }
.banner__go:focus-visible { outline: 2px solid var(--color-on-screen); outline-offset: 2px; }
.banner figcaption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
@media (orientation: portrait) {
  .banner__stage { height: auto; aspect-ratio: 10 / 9; max-height: 72svh; }
  .banner__go { position: absolute; top: var(--space-sm); right: var(--gutter); bottom: auto; min-height: 44px; margin: 0; padding: 0 var(--space-md); font-size: var(--text-md); }
}

/* A section, and the split used for facts beside a picture */
.lp-section { padding-block: var(--section-gap) 0; }
.lp-section--l { padding-block: var(--section-gap-l) 0; }
.lp-section--s { padding-block: var(--section-gap-s) 0; }
.lp-section > .lead { color: var(--color-muted); }
.section-head--stack { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); margin-bottom: var(--space-2xl); }
.section-head--stack .lead { color: var(--color-muted); }

/* Facts: a ruled list, the name on the left, the fact on the right */
.facts { margin: 0; }
.facts > div { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.facts > div:last-child { border-bottom: 1px solid var(--color-rule); }
.facts dt { grid-column: 1 / span 4; font-family: var(--font-display); font-size: var(--text-title); letter-spacing: var(--tracking-display); line-height: 1.2; }
.facts dd { grid-column: 5 / span 8; margin: 0; max-width: 62ch; color: var(--color-ink-2); }
.facts-note { margin-top: var(--space-lg); max-width: 75ch; }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.split__text { grid-column: 1 / span 7; }
.split__text h2 { margin-bottom: var(--space-md); }
.split__text > .lead { margin-bottom: var(--space-2xl); color: var(--color-muted); }
.split__text .facts dt { grid-column: 1 / span 5; }
.split__text .facts dd { grid-column: 6 / span 7; }
.split__visual { grid-column: 9 / span 4; display: grid; gap: var(--space-sm); margin: 0; position: sticky; top: var(--space-2xl); }
.split__visual img, .split__visual video { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-card); background: var(--color-screen); }
.split__visual figcaption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.split__visual .stand__clip > img, .split__visual .stand__clip > video { height: 100%; aspect-ratio: auto; border-radius: 0; object-position: 50% 30%; }

/* The stand section's clip takes the photograph's frame */
.stand__clip { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-card); background: var(--color-screen); color: var(--color-on-screen); }
.stand__clip > img, .stand__clip > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.stand__photo figcaption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
html:not(.js) .stand__clip > video, html:not(.js) .split__visual > video { display: none; }

/* A full-width picture with its caption */
.showcase { display: grid; gap: var(--space-sm); margin: 0; }
.showcase__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-card); background: var(--color-screen); color: var(--color-on-screen); }
.showcase__frame--wide { aspect-ratio: 21 / 9; }
.showcase__frame > img, .showcase__frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showcase figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2xs) var(--space-lg); }

/* Three places, drawn by the simulator */
.places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.place { display: grid; align-content: start; gap: var(--space-sm); }
.place img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); background: var(--color-screen); }
.place h3 { margin-top: var(--space-xs); }
.place p { color: var(--color-ink-2); }
.places__go { display: grid; justify-items: start; gap: var(--space-sm); margin-top: var(--space-xl); }

/* Sizes and prices as a table */
.spec-wrap { overflow-x: auto; }
.spec-wrap:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.spec { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.spec th, .spec td { padding: var(--space-md) var(--space-lg) var(--space-md) 0; border-top: 1px solid var(--color-rule); text-align: left; vertical-align: baseline; }
.spec tr > :last-child { padding-right: 0; text-align: right; }
.spec thead th { border-top: 0; color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
.spec tbody th { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; letter-spacing: var(--tracking-display); white-space: nowrap; }
.spec tbody td { color: var(--color-ink-2); }
.spec tbody td:last-child { color: var(--color-ink); font-weight: 500; white-space: nowrap; }
.spec tbody tr:last-child > * { border-bottom: 1px solid var(--color-rule); }
.spec-foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-md); align-items: start; margin-top: var(--space-lg); }
.spec-foot > p { grid-column: 1 / span 7; }
.spec-foot > .lp-actions { grid-column: 9 / span 4; justify-content: flex-end; }

/* One sentence, set large */
.statement { max-width: 24ch; font-family: var(--font-display); font-size: var(--text-section); letter-spacing: var(--tracking-display); line-height: 1.08; overflow-wrap: break-word; }
.statement-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); align-items: end; }
.statement-row .statement { grid-column: 1 / span 8; }
.statement-row__side { grid-column: 9 / span 4; display: grid; justify-items: start; gap: var(--space-md); }
.statement-row__side p { color: var(--color-ink-2); }

/* The 3D band: dark like the stage in either theme, so the light reads */
.how__more { padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }

/* The way into the simulator (owner, 13 November 2026: a button, and much bigger). The simulator's own
   picture across the page, the invitation at its foot, one large button; the whole band is its target. */
.btn--xl { min-height: 72px; padding-inline: var(--space-xl); font-size: var(--text-xl); }
@media (max-width: 40rem) { .btn--xl { max-width: 100%; min-height: 64px; padding: var(--space-sm) var(--space-lg); font-size: var(--text-lg); line-height: 1.2; white-space: normal; } }
.launch { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: end; min-height: min(84svh, 62.5vw); margin-top: var(--section-gap); background: var(--color-screen); color: var(--color-on-screen); }
.launch__view { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
.launch:hover .launch__view { transform: scale(1.015); }
.launch::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--color-screen) 0%, var(--color-screen-veil) 34%, transparent 68%); }
.launch__text { display: grid; justify-items: start; gap: var(--space-md); padding-block: var(--space-2xl); }
.launch h2 { max-width: 14ch; font-size: var(--text-display); line-height: 1.02; }
.launch__lead { max-width: 46ch; margin-bottom: var(--space-sm); color: var(--color-on-screen-2); font-size: var(--text-lead); }
.launch .btn--xl::after { content: ""; position: absolute; inset: 0; }
.launch .small { color: var(--color-on-screen-3); }
@media (prefers-reduced-motion: reduce) { .launch__view { transition: none; } .launch:hover .launch__view { transform: none; } }
/* On a phone the picture stands above the invitation, so the words do not cover the sphere */
@media (max-width: 40rem) {
  .launch { display: block; min-height: 0; }
  .launch__view { position: static; height: auto; aspect-ratio: 16 / 10; }
  .launch::before { content: none; }
  .launch__text { padding-block: var(--space-lg) var(--space-xl); }
}

/* The home page: two doors, one for each kind of place, the audiences named under each */
.doors2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.door2 { display: grid; align-content: start; gap: var(--space-md); scroll-margin-top: var(--space-xl); }
.door { display: grid; align-content: start; gap: var(--space-sm); border-radius: var(--radius-card); color: var(--color-ink); text-decoration: none; }
.door__view { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-card); background: var(--color-screen); color: var(--color-on-screen); box-shadow: 0 0 0 0 var(--color-ink); transition: box-shadow var(--dur-short) var(--ease-out); }
.door__view img { width: 100%; height: 100%; object-fit: cover; }
.door:hover .door__view { box-shadow: 0 0 0 2px var(--color-ink); }
.door__title { margin-top: var(--space-sm); font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: var(--tracking-display); line-height: 1.1; text-decoration: underline; text-decoration-color: var(--color-rule); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.door:hover .door__title { text-decoration-color: currentColor; }
.door:active .door__title { color: var(--color-ink-2); }
.door__line { color: var(--color-ink-2); font-size: var(--text-lead); }
.door:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; }
.door2__for { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); margin: 0; padding: var(--space-sm) 0 0; border-top: 1px solid var(--color-rule); list-style: none; }
.door2__for a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 0.2em; transition: color var(--dur-micro) var(--ease-out), text-decoration-color var(--dur-micro) var(--ease-out); }
.door2__for a:hover { color: var(--color-ink); text-decoration-color: currentColor; }
.door2__for a:active { color: var(--color-accent-hi); }

/* A world page: its three audiences, each a block with its own address */
.auds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.aud { display: grid; align-content: start; justify-items: start; gap: var(--space-md); padding-top: var(--space-lg); border-top: 2px solid var(--color-rule); scroll-margin-top: var(--space-2xl); transition: border-color var(--dur-short) var(--ease-out); }
.aud:target { border-top-color: var(--color-accent); }
.aud h3 { font-size: var(--text-xl); }
.aud__pitch { color: var(--color-ink); font-size: var(--text-lead); line-height: 1.35; max-width: 24ch; }
.aud ul { width: 100%; margin: 0; padding: 0; list-style: none; }
.aud li { padding-block: var(--space-xs); border-top: 1px solid var(--color-rule); color: var(--color-ink-2); }

/* Enquiry on an audience page: the same form, with the call beside it */
.enquiry-intro .lp-actions { margin-top: calc(-1 * var(--space-xs)); }
.enquiry-form select:invalid { color: var(--color-muted); }
.enquiry-form .check .check__text { color: inherit; font-weight: inherit; }
.verify { padding-block: var(--section-gap-s) var(--section-gap); }
.verify h2 { font-size: var(--text-2xl); }
.verify p { margin-top: var(--space-md); max-width: 75ch; color: var(--color-ink-2); font-size: var(--text-sm); }

/* Footer: every audience page, as the site's index */
.footer-nav { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); margin-top: var(--space-2xl); }
.footer-nav > div { grid-column: span 4; }
.footer-nav h2 { max-width: none; color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; line-height: 1.55; }
.site-footer .footer-nav h2 a { min-height: 0; color: inherit; }
.footer-nav ul { margin: 0; padding: 0; list-style: none; }
.site-footer .footer-nav a { color: var(--color-ink); }

/* The simulator page: the head sits over the stage as it did on the home page */
.sim-page .band { padding-block: var(--space-lg) var(--space-2xl); }
.sim-page .band h1 { max-width: 12ch; }

@media (max-width: 60rem) {
  .lp-hero, .lp-hero--portrait { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); min-height: 0; padding-block: var(--space-md) var(--space-xl); }
  .banner-head { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); min-height: 0; padding-block: var(--space-md) var(--space-lg); }
  .banner-head h1, .banner-head__side { grid-column: auto; }
  .lp-hero__frame { max-height: none; box-shadow: var(--shadow-soft); }
  .lp-hero--portrait .lp-hero__frame { max-width: 28rem; }
  .facts > div, .split, .statement-row, .spec-foot { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xs); }
  .facts dt, .facts dd, .split__text .facts dt, .split__text .facts dd, .split__text, .split__visual, .statement-row .statement, .statement-row__side, .spec-foot > p, .spec-foot > .lp-actions { grid-column: auto; }
  .split, .statement-row { row-gap: var(--space-xl); }
  .split__visual { position: static; max-width: 28rem; }
  .spec-foot > .lp-actions { justify-content: flex-start; }
  .auds { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xl); }
  .aud__pitch { max-width: 40ch; }
  .places { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .footer-nav > div { grid-column: span 6; }
}
@media (max-width: 40rem) {
  .doors2 { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xl); }
  .spec th, .spec td { padding-right: var(--space-md); }
  .spec .spec__extra { display: none; }
  .footer-nav > div { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .door__view, .door__title, .aud { transition: none; }
}