@charset "UTF-8";

/* Self-hosted, latin subset only. Both faces are SIL OFL 1.1; the licences sit
   beside the files in assets/fonts. Together they are ~64 KB. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-ink: #1b1512;
  --color-surface: #2a201b;
  --color-paper: #f6f0e9;
  --color-muted: #b9a79a;
  --color-line: rgba(255, 255, 255, .13);
  --color-white: #fff;
  --color-house: #c87945;
  --color-rides: #6d87b6;
  --color-poise: #e6d5c5;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", Palatino, Georgia, ui-serif, serif;
  --color-accent: #c9884f;
  --mark-color: #c08a52;
  --text-xs: clamp(.75rem, .72rem + .15vw, .84rem);
  --text-sm: clamp(.88rem, .84rem + .2vw, 1rem);
  --text-base: clamp(1rem, .95rem + .3vw, 1.125rem);
  --text-lg: clamp(1.25rem, 1.1rem + .75vw, 1.75rem);
  --text-xl: clamp(2.5rem, 1.4rem + 4vw, 5.75rem);
  --radius-sm: .75rem;
  --radius-lg: 1.5rem;
  --radius-full: 999px;
  --shadow-card: 0 1.5rem 4rem rgba(0, 0, 0, .16);
  --container: 105rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.055em; line-height: .98; }
h1 { max-width: 12ch; font-size: var(--text-xl); }
/* Serif italic accent inside a heading, e.g. "thoughtfully <em>made.</em>".
   The serif sits optically smaller than the grotesque, so it is nudged up. */
h1 em, h2 em, h3 em { display: inline-block; font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.015em; color: var(--color-accent); }
.section--dark h1 em, .section--dark h2 em { color: #e0a874; }
h2 { max-width: 16ch; font-size: clamp(2.2rem, 1.4rem + 3vw, 4.25rem); }
h3 { font-size: clamp(1.7rem, 1.1rem + 1.5vw, 2.5rem); }
.container { width: min(calc(100% - 3rem), var(--container)); margin-inline: auto; }
.section { padding-block: clamp(5rem, 9vw, 9rem); }
.section--dark { background: var(--color-ink); color: var(--color-white); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { z-index: 10000; top: 1rem; left: 1rem; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; padding: .75rem 1rem; background: var(--color-white); color: var(--color-ink); }

.site-header { position: absolute; z-index: 10; top: 1rem; width: 100%; color: var(--color-white); }
.site-header__inner { display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; gap: 1rem; }
.site-header__inner--glass { width: min(calc(100% - 3rem), 105rem); padding: .65rem .8rem .65rem 1.1rem; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-full); background: rgba(36,26,20,.52); box-shadow: 0 .75rem 2.5rem rgba(0,0,0,.2); backdrop-filter: blur(18px); }
.site-brand { font-size: 1.05rem; font-weight: 700; letter-spacing: -.04em; }
.custom-logo-link { display: block; line-height: 0; }
.custom-logo { display: block; max-height: 2rem; max-width: 10rem; width: auto; }
.site-brand--image img { display: block; width: 2.25rem; height: 2.25rem; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; object-fit: cover; object-position: center; }
.primary-nav ul { display: flex; align-items: center; gap: .4rem; padding: 0; margin: 0; list-style: none; color: #e5d6ca; font-size: var(--text-sm); }
.primary-nav li > a, .projects-menu summary { display: block; padding: .65rem .85rem; cursor: pointer; list-style: none; }
.projects-menu summary::-webkit-details-marker { display: none; }
.projects-menu summary span { margin-left: .25rem; }
.projects-menu { position: relative; }
.projects-menu__panel { position: absolute; top: calc(100% + .7rem); right: 0; min-width: 12rem; padding: .45rem; border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-sm); background: rgba(42,32,27,.94); box-shadow: 0 1.25rem 3rem rgba(0,0,0,.28); backdrop-filter: blur(18px); }
.projects-menu__panel a { display: block; padding: .7rem .8rem; border-radius: .5rem; color: var(--color-white); }
.projects-menu__panel a:hover { background: rgba(255,255,255,.09); }
.primary-nav__contact { border-radius: var(--radius-full); background: var(--color-white); color: var(--color-ink); font-weight: 600; }
.primary-nav__language { display: flex; align-items: center; margin-inline: .35rem; }
.language-switcher { display: inline-flex; align-items: center; gap: .1rem; padding: .2rem; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-full); background: rgba(255,255,255,.06); }
.language-switcher__option { padding: .3rem .55rem; border-radius: var(--radius-full); color: #b9a79a; font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; transition: color .2s ease, background .2s ease; }
.language-switcher__option:hover { color: var(--color-white); }
.language-switcher__option.is-active { background: rgba(255,255,255,.16); color: var(--color-white); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.language-switcher__option:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; }
.primary-nav a:hover, .primary-nav .current-menu-item > a { color: var(--color-white); }
.button { display: inline-flex; min-height: 3.25rem; align-items: center; justify-content: center; padding: .65rem 1.15rem; border: 1px solid transparent; border-radius: var(--radius-full); background: var(--color-white); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); background: #e9ebf2; }
.button--small { min-height: 2.5rem; padding-inline: 1rem; }
.button--glass { border-color: rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 .75rem 2rem rgba(0,0,0,.18); color: var(--color-white); backdrop-filter: blur(14px); }
.button--glass:hover { background: rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 1rem 2.5rem rgba(0,0,0,.24); }
.text-link { display: inline-flex; align-items: center; font-size: var(--text-sm); font-weight: 600; }
.text-link::after { margin-left: .45rem; content: "→"; transition: transform .2s ease; }
.text-link:hover::after { transform: translateX(.25rem); }
.menu-toggle { display: none; border: 0; background: transparent; color: inherit; }

.hero { position: relative; min-height: min(53rem, 100svh); display: grid; align-items: center; isolation: isolate; overflow: hidden; padding-top: 5.5rem; }
/* The backdrop art has the LT monogram baked in at ~78% across, which would now
   sit beside the real 3D one. Zooming to 155% and anchoring left keeps only the
   wall texture in frame — 0.70 x 1.55 > 1, so the mark stays cropped out at
   every width. The rem floor guarantees vertical cover on short viewports. */
.hero__background { position: absolute; z-index: -3; inset: 0; background: linear-gradient(90deg, rgba(18,14,12,.66) 0%, rgba(18,14,12,.3) 55%, rgba(18,14,12,.08) 100%), url('../images/landerbg.png') 0% 60% / max(155%, 111.25rem) auto no-repeat; }
.hero__grid-lines { position: absolute; z-index: -1; inset: 0; opacity: .45; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 5rem 5rem; mask-image: linear-gradient(to bottom, black, transparent 84%); }
.hero__aurora { position: absolute; z-index: -1; width: 48rem; aspect-ratio: 1; border-radius: 50%; filter: blur(28px); pointer-events: none; }
.hero__aurora--blue { top: -25rem; right: -13rem; background: radial-gradient(circle, rgba(128,86,57,.34), transparent 64%); }
.hero__aurora--gold { right: 14%; bottom: -32rem; background: radial-gradient(circle, rgba(205,151,105,.22), transparent 63%); }
.hero__grid { position: relative; display: grid; align-items: center; gap: 4rem; }
.eyebrow { margin-bottom: 1rem; color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.hero__lead { max-width: 37rem; margin-bottom: 2rem; color: var(--color-muted); font-size: var(--text-lg); }
.hero__lead p:last-child { margin-bottom: 0; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.hero__visual { position: relative; min-height: 20rem; filter: drop-shadow(0 2rem 3rem rgba(0,0,0,.32)); }
.product-orbit { position: absolute; display: flex; width: clamp(11rem, 23vw, 17rem); aspect-ratio: .78; align-items: end; isolation: isolate; padding: 1.25rem; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); font-weight: 600; letter-spacing: -.04em; transform: rotate(-8deg); }
.product-orbit::before { position: absolute; z-index: 2; inset: 8%; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; content: ""; pointer-events: none; }
.product-orbit span { position: relative; z-index: 3; }
.product-orbit img { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.product-orbit:has(img)::after { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, transparent 36%, rgba(0,0,0,.58)); content: ""; }
.product-orbit--poise:has(img)::after { background: linear-gradient(180deg, transparent 36%, rgba(48,43,36,.5)); }
.product-orbit--house { z-index: 3; left: 8%; top: 12%; background: linear-gradient(145deg, #d9a278, var(--color-house) 65%); }
.product-orbit--rides { z-index: 2; right: 3%; top: 2%; background: linear-gradient(145deg, #a8b5cd, var(--color-rides) 65%); transform: rotate(10deg); }
.product-orbit--poise { z-index: 1; right: 22%; bottom: 0; background: linear-gradient(145deg, #fff8e9, var(--color-poise)); color: var(--color-ink); transform: rotate(-1deg); }

/* 3D monogram stage. The flat SVG is what ships in the HTML; it cross-fades out
   only once WebGL has produced a frame, so a failure degrades to the flat mark. */
/* The default lives on :root, not here: setting it on .mark-stage itself would
   beat the per-product value inherited from .product-page--*. */
.mark-stage { position: relative; display: grid; place-items: center; filter: none; }
.mark-stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; }
.mark-stage__fallback { width: min(100%, 30rem); color: var(--mark-color); opacity: 1; transition: opacity .8s ease; }
.mark-stage__fallback svg { display: block; width: 100%; height: auto; }
.mark-stage.is-live .mark-stage__canvas { opacity: 1; }
.mark-stage.is-live .mark-stage__fallback { opacity: 0; }

.hero__scroll { position: absolute; z-index: 4; bottom: 2rem; left: 50%; display: inline-flex; align-items: center; gap: .75rem; padding: .5rem .9rem .5rem .5rem; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-full); background: rgba(255,255,255,.05); color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(12px); transform: translateX(-50%); transition: color .25s ease, border-color .25s ease, opacity .35s ease, transform .35s ease; }
.hero__scroll:hover { border-color: rgba(255,255,255,.3); color: var(--color-white); }
.hero__scroll-track { position: relative; display: block; width: 1.15rem; height: 1.85rem; flex: none; border: 1px solid currentColor; border-radius: var(--radius-full); opacity: .75; }
.hero__scroll-dot { position: absolute; top: .35rem; left: 50%; width: .22rem; height: .45rem; border-radius: var(--radius-full); background: currentColor; transform: translateX(-50%); animation: luval-scroll-hint 2s cubic-bezier(.6,.05,.3,1) infinite; }
.hero__scroll.is-hidden { opacity: 0; pointer-events: none; transform: translate(-50%, .75rem); }
@keyframes luval-scroll-hint {
  0%, 12% { opacity: 0; transform: translate(-50%, 0); }
  30% { opacity: 1; }
  70% { opacity: 1; transform: translate(-50%, .55rem); }
  100% { opacity: 0; transform: translate(-50%, .7rem); }
}

/* Product showcase. Default layout is three stacked rows; showcase.js adds
   .is-pinned to switch the stage to a sticky, scroll-scrubbed presentation. */
.showcase { position: relative; overflow: clip; padding-bottom: 0; }
.showcase__intro { margin-bottom: 4rem; }
.showcase__item { display: grid; gap: 2rem; align-items: center; padding-block: 3rem; }
.showcase__number { margin: 0 0 1rem; color: var(--product-accent, var(--color-house)); font-size: var(--text-sm); font-weight: 700; letter-spacing: .22em; }
/* Sized to hold its own against the screenshot beside it; at h3's default scale
   the copy column read as a caption rather than half the composition. */
.showcase__item h3 { max-width: 9ch; margin: 0 0 1.4rem; font-size: clamp(2.6rem, 1.5rem + 3.6vw, 5rem); }
.showcase__text { max-width: 26ch; margin: 0 0 2rem; color: var(--color-muted); font-size: clamp(1.15rem, 1rem + .55vw, 1.65rem); line-height: 1.35; }
.showcase__copy .text-link { font-size: var(--text-base); }
.showcase__shot { position: relative; margin: 0; padding: .5rem; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg); background: rgba(255,255,255,.05); box-shadow: 0 2rem 5rem rgba(0,0,0,.45); }
.showcase__shot::before { position: absolute; z-index: -1; inset: 12% -6% -18%; border-radius: 50%; background: radial-gradient(circle, var(--product-accent, var(--color-house)), transparent 62%); content: ""; opacity: .28; filter: blur(46px); }
.showcase__shot img { display: block; width: 100%; border-radius: calc(var(--radius-lg) - .45rem); }
.showcase__item--house { --product-accent: var(--color-house); }
.showcase__item--rides { --product-accent: var(--color-rides); }
.showcase__item--poise { --product-accent: var(--color-poise); }
.showcase__progress { display: none; }

.showcase__track.is-pinned { height: calc(var(--showcase-count, 3) * 100vh); }
.showcase__track.is-pinned .showcase__stage { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; overflow: hidden; }
.showcase__track.is-pinned .showcase__frame { position: relative; min-height: min(38rem, 68vh); }
/* The stage is a fixed 100vh box, so the screenshot has to be capped rather
   than run on at its natural aspect ratio. */
.showcase__track.is-pinned .showcase__shot img { max-height: min(27rem, 50vh); object-fit: cover; object-position: top center; }
.showcase__track.is-pinned .showcase__item { position: absolute; inset: 0; padding-block: 0; opacity: 0; visibility: hidden; transform: translateY(2.5rem); transition: opacity .6s ease, transform .8s cubic-bezier(.2,.8,.2,1), visibility .6s; }
.showcase__track.is-pinned .showcase__item.is-active { opacity: 1; visibility: visible; transform: none; }
/* Sits on the container's left gutter, under the copy column, so it never
   collides with the screenshot on the right. */
.showcase__track.is-pinned .showcase__progress { position: absolute; bottom: 2.75rem; left: calc((100% - min(100% - 3rem, 105rem)) / 2); display: flex; gap: 1.5rem; padding: 0; margin: 0; list-style: none; color: var(--color-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: .16em; }
.showcase__track.is-pinned .showcase__progress li { display: flex; align-items: center; gap: .6rem; opacity: .4; transition: opacity .4s ease, color .4s ease; }
.showcase__track.is-pinned .showcase__progress li span { display: block; width: 2.5rem; height: 1px; background: currentColor; transform-origin: left; transition: transform .5s ease; transform: scaleX(.35); }
.showcase__track.is-pinned .showcase__progress li.is-past { opacity: .7; }
.showcase__track.is-pinned .showcase__progress li.is-past span { transform: scaleX(1); }
.showcase__track.is-pinned .showcase__progress li.is-active { color: var(--color-white); opacity: 1; }
.showcase__track.is-pinned .showcase__progress li.is-active span { transform: scaleX(1); }

.products { background: var(--color-paper); }
.product-grid { display: grid; gap: 1rem; margin-top: 3rem; }
.product-card { position: relative; min-height: 30rem; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.product-card__link { position: relative; display: flex; min-height: 30rem; flex-direction: column; justify-content: space-between; isolation: isolate; padding: 1.8rem; overflow: hidden; }
.product-card__link::after { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(8,6,5,.16), rgba(8,6,5,.5)); content: ""; opacity: .45; transition: opacity .35s ease; }
.product-card__media { position: absolute; z-index: 0; inset: 0; overflow: hidden; background: linear-gradient(145deg, rgba(255,255,255,.22), transparent 60%); }
.product-card__media::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,6,5,.04) 20%, rgba(8,6,5,.45)); content: ""; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: left center; opacity: .95; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .4s ease; }
.product-card--poise .product-card__media img { object-position: center center; }
.product-card__topline { position: relative; z-index: 2; display: flex; justify-content: space-between; color: var(--color-white); font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-shadow: 0 .1rem .6rem rgba(0,0,0,.7); }
.product-card__topline span:last-child { opacity: .7; transition: transform .3s ease, opacity .3s ease; }
.product-card__content { position: relative; z-index: 2; margin-top: auto; padding: 1rem; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-sm); background: rgba(19,13,10,.72); box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.18); color: var(--color-white); backdrop-filter: blur(12px); }
.product-card h3 { margin: 0 0 .55rem; color: var(--color-white); }
.product-card__logo { display: block; max-width: 11rem; max-height: 3rem; width: auto; margin-bottom: .85rem; object-fit: contain; object-position: left; }
.product-card__content p { max-width: 24ch; margin: 0; color: var(--color-white); font-size: var(--text-base); }
.product-card--house { background: var(--color-house); color: #241007; }
.product-card--rides { background: var(--color-rides); color: var(--color-white); }
.product-card--poise { background: var(--color-poise); color: #302b24; }
.product-card:hover .product-card__media img, .product-card:focus-within .product-card__media img { transform: scale(1.07); opacity: .86; }
.product-card:hover .product-card__link::after, .product-card:focus-within .product-card__link::after { opacity: 1; }
.product-card:hover .product-card__topline span:last-child, .product-card:focus-within .product-card__topline span:last-child { transform: translate(.2rem, -.2rem); opacity: 1; }
.product-card__link:focus-visible { outline: 3px solid var(--color-white); outline-offset: -5px; }
.content-area { max-width: 48rem; }
.site-footer { padding-block: 3rem; background: var(--color-ink); color: var(--color-white); }
.site-footer__inner { display: grid; gap: 2rem; }
.site-footer p { margin: .75rem 0 0; color: var(--color-muted); font-size: var(--text-sm); }
.site-footer__privacy { color: var(--color-muted); font-size: var(--text-sm); }
.site-footer__privacy:hover { color: var(--color-white); }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0; margin: 0; list-style: none; color: var(--color-muted); font-size: var(--text-sm); }
.footer-nav a:hover { color: var(--color-white); }

/* Vision House product page */
.product-page--house { --product-accent: var(--color-house); --product-ink: #251208; --mark-color: #e07a33; }
.product-page--rides { --product-accent: var(--color-rides); --product-ink: #07152e; --mark-color: #3d7ee6; }
.product-page--poise { --product-accent: var(--color-poise); --product-ink: #302b24; --mark-color: #e6d5c5; }
.product-hero { position: relative; min-height: min(52rem, 100svh); display: grid; align-items: center; isolation: isolate; overflow: hidden; padding-top: 7rem; }
.product-hero h1 { max-width: 13ch; }
.product-hero__mark { min-height: 22rem; }
.product-hero .hero__grid-lines { z-index: -1; }
.product-hero__glow { position: absolute; top: -20rem; right: -12rem; width: 54rem; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,106,37,.38), transparent 64%); filter: blur(28px); }
.product-page--rides .product-hero__glow { background: radial-gradient(circle, rgba(59,130,246,.38), transparent 64%); }
.product-page--poise .product-hero__glow { background: radial-gradient(circle, rgba(232,207,200,.28), transparent 64%); }
.product-hero__grid { position: relative; display: grid; align-items: center; gap: 3rem; }
.product-hero h1 { max-width: 11ch; }
.product-hero__lead { max-width: 35rem; color: var(--color-muted); font-size: var(--text-lg); }
.button--house, .button--product { background: var(--product-accent); color: var(--product-ink); }
.button--house:hover, .button--product:hover { filter: brightness(1.1); background: var(--product-accent); }
.product-hero__screen { padding: .5rem; border: 1px solid rgba(255,255,255,.16); border-radius: clamp(1rem, 2vw, 1.5rem); background: rgba(255,255,255,.08); box-shadow: 0 2rem 5rem rgba(0,0,0,.35); transform: perspective(1000px) rotateY(-5deg) rotateX(2deg); }
.product-hero__screen img, .feature-showcase__image img, .product-gallery img { display: block; width: 100%; border-radius: calc(var(--radius-lg) - .45rem); }
.product-hero__screen--phone { max-width: 19rem; justify-self: center; }
/* Product page body sections, on the same typographic rhythm as the homepage:
   each is a full beat rather than a band of small text. */
.product-intro { display: grid; align-items: center; min-height: 72vh; padding-block: clamp(6rem, 11vw, 11rem); border-bottom: 1px solid rgba(7,9,15,.1); }
.product-intro__grid { display: grid; gap: clamp(2rem, 4vw, 4rem); }
.product-intro__grid h2 { max-width: 15ch; font-size: clamp(2.6rem, 1.8rem + 4vw, 5.5rem); }
.product-intro__grid p:not(.eyebrow) { max-width: 40ch; margin-top: 1.75rem; color: #5a5f6c; font-size: clamp(1.15rem, 1rem + .6vw, 1.7rem); }
.feature-showcase { padding-block: clamp(6rem, 11vw, 11rem); background: #f0e9e4; }
.feature-showcase__grid { display: grid; gap: 2.5rem; align-items: center; }
.feature-showcase__image { padding: .6rem; border-radius: var(--radius-lg); background: #dcd0c8; box-shadow: var(--shadow-card); }
.feature-showcase__copy h2 { max-width: 14ch; font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem); }
.feature-showcase__copy > p:not(.eyebrow) { max-width: 38ch; color: #5a5f6c; font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem); }
.feature-list { display: grid; gap: 1rem; padding: 0; margin: 2.25rem 0 0; list-style: none; font-size: var(--text-base); font-weight: 600; }
.feature-list li { display: flex; align-items: center; gap: .85rem; }
.feature-list li::before { width: 1.5rem; height: 1.5rem; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--product-accent); content: "✓"; font-size: .8rem; }
.workflow { padding-block: clamp(6rem, 11vw, 11rem); background: var(--color-surface); color: var(--color-white); }
.workflow h2 { max-width: 15ch; font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.75rem); }
.workflow__steps { display: grid; gap: 1px; padding: 0; margin: clamp(3rem, 5vw, 5rem) 0 0; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-line); list-style: none; }
.workflow__steps li { min-height: 19rem; display: flex; flex-direction: column; padding: clamp(1.75rem, 3vw, 2.75rem); background: var(--color-surface); }
.workflow__steps span { display: block; margin-bottom: auto; padding-bottom: 3rem; color: var(--product-accent); font-size: var(--text-sm); font-weight: 700; letter-spacing: .22em; }
.workflow__steps h3 { margin-bottom: 1rem; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); }
.workflow__steps p { max-width: 32ch; margin: 0; color: var(--color-muted); font-size: var(--text-base); }
.product-gallery__grid { display: grid; gap: 1rem; }
.product-gallery__grid--phones { max-width: 64rem; margin-inline: auto; }
.product-gallery__grid--phones img { max-height: 40rem; width: auto; justify-self: center; }
.product-gallery img { box-shadow: var(--shadow-card); }
.product-cta { position: relative; display: grid; align-items: center; min-height: 76vh; padding-block: clamp(6rem, 11vw, 11rem); isolation: isolate; overflow: clip; text-align: center; }
.product-cta::before { position: absolute; z-index: -1; bottom: -40%; left: 50%; width: min(70rem, 120%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--product-accent), transparent 62%); content: ""; opacity: .22; filter: blur(50px); transform: translateX(-50%); }
.product-cta__inner { max-width: 58rem; margin-inline: auto; }
.product-cta h2 { max-width: 16ch; margin-inline: auto; margin-bottom: 2.5rem; font-size: clamp(2.6rem, 1.8rem + 4vw, 5.5rem); }

/* Home mission and contact */
/* Sits between the hero and the product showcase, so it needs enough height and
   type weight to read as its own beat rather than a gap between them. */
.mission { display: grid; align-items: center; min-height: 88vh; padding-block: clamp(7rem, 13vw, 13rem); background: #e9ded3; }
.mission__grid { display: grid; gap: clamp(2.5rem, 5vw, 5rem); }
.mission__statement { max-width: 15ch; margin-bottom: 0; font-size: clamp(3.2rem, 2rem + 5.4vw, 7.5rem); }
.mission__cards { display: grid; gap: 1.25rem; }
.mission__card { min-height: 19rem; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.75rem, 3vw, 2.75rem); border: 1px solid rgba(27,21,18,.14); border-radius: var(--radius-lg); background: rgba(255,255,255,.42); }
.mission__card h3 { margin-bottom: 1rem; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem); }
.mission__card p { max-width: 34ch; margin: 0; color: #66594f; font-size: var(--text-base); }
.contact-page { padding-top: 8rem; }
.contact-page__grid { display: grid; gap: 3rem; }
.contact-page__lead { max-width: 38rem; color: var(--color-muted); font-size: var(--text-lg); }
.contact-card { padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-lg); background: rgba(255,255,255,.06); }
.contact-card__email { display: inline-block; margin: .75rem 0 2.5rem; color: var(--color-white); font-size: clamp(1.35rem, 1rem + 1.6vw, 2.2rem); font-weight: 600; letter-spacing: -.04em; text-decoration: underline; text-decoration-color: var(--color-house); text-underline-offset: .25em; }
.social-list { display: flex; flex-wrap: wrap; gap: .75rem; padding: 0; margin: 0; list-style: none; }
.social-list a { display: inline-flex; min-height: 2.75rem; align-items: center; padding-inline: 1rem; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-full); color: var(--color-white); font-size: var(--text-sm); }
.social-list a:hover { background: rgba(255,255,255,.12); }
/* Atelier: the bespoke-work programme. Sized as a closing statement, so it can
   hold the page after the product showcase instead of trailing off. */
.atelier { position: relative; display: grid; align-items: center; min-height: 92vh; padding-block: clamp(7rem, 13vw, 13rem); background: var(--color-ink); isolation: isolate; overflow: clip; }
.atelier__glow { position: absolute; z-index: -1; top: -18%; right: -12%; width: min(60rem, 90%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(200,121,69,.30), transparent 64%); filter: blur(40px); pointer-events: none; }
.atelier__inner { display: grid; gap: clamp(3rem, 6vw, 6rem); }
.atelier__head h2 { max-width: 13ch; margin-bottom: 1.75rem; font-size: clamp(3rem, 2rem + 5vw, 7rem); }
.atelier__lead { max-width: 44ch; margin-bottom: 2.5rem; color: var(--color-muted); font-size: clamp(1.15rem, 1rem + .6vw, 1.75rem); }
.atelier__pillars { display: grid; gap: 1.25rem; padding: 0; margin: 0; list-style: none; counter-reset: pillar; }
.atelier__pillar { padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.16); transition: border-color .3s ease; }
.atelier__pillar:hover { border-color: rgba(200,121,69,.6); }
.atelier__pillar-index { display: block; margin-bottom: 1rem; color: var(--color-house); font-size: var(--text-sm); font-weight: 700; letter-spacing: .22em; }
.atelier__pillar h3 { margin-bottom: .85rem; font-size: clamp(1.4rem, 1.05rem + 1.1vw, 2rem); }
.atelier__pillar p { max-width: 32ch; margin: 0; color: var(--color-muted); font-size: var(--text-base); }

/* Accent only. Deliberately not reusing .product-page--house here: that would
   also repaint the Luval monogram in Vision House orange. */
.customized-page { --product-accent: var(--color-house); --product-ink: #251208; }
.atelier-hero { position: relative; min-height: min(52rem, 100svh); display: grid; align-items: center; isolation: isolate; overflow: hidden; padding-top: 7rem; }
.atelier-hero .hero__grid-lines { z-index: -1; }
.atelier-hero__grid { position: relative; display: grid; align-items: center; gap: 3rem; }
.atelier-hero h1 { max-width: 14ch; }
.atelier-hero__lead { max-width: 38ch; margin-bottom: 2.5rem; color: var(--color-muted); font-size: clamp(1.15rem, 1rem + .6vw, 1.75rem); }
.atelier-hero__mark { min-height: 22rem; }
.atelier-services { padding-block: clamp(6rem, 11vw, 11rem); }
.atelier-services h2 { max-width: 14ch; margin-bottom: clamp(3rem, 5vw, 5rem); font-size: clamp(2.6rem, 1.8rem + 4vw, 5.5rem); }
.atelier-process { padding-block: clamp(6rem, 11vw, 11rem); background: var(--color-surface); }
.atelier-process h2 { max-width: 18ch; font-size: clamp(2.2rem, 1.5rem + 3vw, 4.25rem); }

.service-grid { display: grid; gap: 1.25rem; padding: 0; margin: 0; list-style: none; }
.service-grid li { min-height: 24rem; display: flex; flex-direction: column; padding: clamp(1.75rem, 3vw, 2.75rem); border: 1px solid rgba(27,21,18,.13); border-radius: var(--radius-lg); background: #efe5dc; transition: transform .3s ease, border-color .3s ease; }
.service-grid li:hover { border-color: rgba(200,121,69,.55); transform: translateY(-4px); }
.service-grid span { display: block; margin-bottom: auto; padding-bottom: 3rem; color: var(--color-house); font-size: var(--text-sm); font-weight: 700; letter-spacing: .22em; }
.service-grid h3 { margin-bottom: 1rem; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); }
.service-grid p { max-width: 28ch; margin: 0; color: #66594f; font-size: var(--text-base); }
.legal-page__content { max-width: 52rem; }
.legal-page h1 { margin-bottom: 1rem; }
.legal-page h2 { margin-top: 4rem; font-size: var(--text-lg); }
.legal-page h3 { margin: 2rem 0 .7rem; font-size: var(--text-base); letter-spacing: -.02em; }
.legal-page p { color: #5d5148; }
.legal-page a { color: #7d492e; text-decoration: underline; }
.legal-page__updated { color: #806f62 !important; font-size: var(--text-sm); }

@media (min-width: 48rem) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; }
  .hero__visual { min-height: 28rem; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .showcase__item { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); }
  .site-footer__inner { grid-template-columns: 1fr auto auto; align-items: end; }
  .product-hero__grid { grid-template-columns: 1.05fr .95fr; }
  .product-hero__mark { min-height: 30rem; }
  .product-intro__grid { grid-template-columns: .55fr 1fr; }
  .feature-showcase__grid { grid-template-columns: 1.1fr .9fr; gap: clamp(3rem, 8vw, 8rem); }
  .workflow__steps { grid-template-columns: repeat(3, 1fr); }
  .product-gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .product-gallery__grid--phones { grid-template-columns: repeat(3, 1fr); }
  .product-card, .product-card__link { min-height: clamp(32rem, 39vw, 42rem); }
  .mission__grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .contact-page__grid { grid-template-columns: 1fr 1fr; align-items: start; }
    .atelier__inner { grid-template-columns: 1fr 1fr; align-items: start; }
  .atelier__pillars { padding-top: .75rem; }
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .atelier-hero__grid { grid-template-columns: 1.05fr .95fr; }
  .atelier-hero__mark { min-height: 30rem; }
}

/* Wide screens have room to lift the LT monogram out from behind the product
   cards: zoom the backdrop past `cover`, anchor it bottom-right so the mark
   rises into the open space, and drop the card cluster to sit in front of it.
   Below this width the backdrop would have to zoom so far that the mark no
   longer fits, so the original centred composition is kept. */
@media (min-width: 64rem) {
  .hero__visual { min-height: 33rem; }
  .mark-stage__fallback { width: min(100%, 34rem); }
}

@media (max-width: 47.98rem) {
  /* The header floats over the hero, so the first line of copy needs to clear
     the glass bar rather than sit tight underneath it. */
  .hero { align-items: start; padding-top: 10.5rem; }
  .product-hero, .contact-page,   .primary-nav { display: none; }
  .menu-toggle { display: grid; width: 2.5rem; height: 2.5rem; place-content: center; gap: .35rem; }
  .menu-toggle span { display: block; width: 1.2rem; height: 1px; background: currentColor; }
  .site-header.is-menu-open .primary-nav { position: absolute; top: 5.25rem; left: 0; right: 0; display: block; padding: 1rem; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: rgba(42,32,27,.96); backdrop-filter: blur(18px); }
  .site-header.is-menu-open .primary-nav ul { flex-direction: column; gap: 1rem; }
  .projects-menu, .projects-menu details { width: 100%; }
  .primary-nav__language { margin-inline: 0; }
  /* No cue on phones. The mobile hero is taller than the viewport, so the
     monogram is already visibly cut off at the fold — that is a stronger scroll
     affordance than a badge, and a fixed badge would sit on top of it. */
  .hero__scroll { display: none; }
  .projects-menu__panel { position: static; margin-top: .35rem; background: rgba(255,255,255,.06); box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  /* Keep the scroll cue readable rather than frozen on the last keyframe. */
  .hero__scroll-dot { animation: none; opacity: .9; }
}