/* ==========================================================================
   Luval Technologies theme 2.0
   Loaded after main.css. Holds the new header and footer, the flow field,
   the homepage, the Vision family pages and the connect and contact pages.
   Mobile first: every block starts at phone width, wider layouts are added
   in the media queries at the end of each section.
   ========================================================================== */

@property --active-branch {
  syntax: "<color>";
  inherits: true;
  initial-value: #c87945;
}

:root {
  --ink: #1b1512;
  --ink-2: #2a201b;
  --ink-3: #120d0b;
  --paper: #f6f0e9;
  --paper-2: #efe6dc;
  --bronze: #c08a52;
  --bronze-lt: #e0a874;
  --mute: #b9a79a;
  --mute-dark: #66594f;
  --line: rgba(255, 255, 255, .12);
  --line-dark: rgba(27, 21, 18, .12);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(1rem, 4vw, 3rem);
}

html, body { overflow-x: clip; }
html.has-menu-open { overflow: hidden; }
body { background: var(--ink); }
.container { width: min(calc(100% - 2 * var(--gutter)), var(--container)); }
::selection { background: var(--bronze-lt); color: var(--ink); }
:focus-visible { outline: 2px solid var(--bronze-lt); outline-offset: 3px; }

/* ---- shared bits -------------------------------------------------------- */
.pill { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.5rem; padding: .45rem .95rem .45rem .75rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.05); color: #e5d6ca; font-size: var(--text-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.pill__dot { position: relative; width: .45rem; height: .45rem; flex: none; border-radius: 50%; background: var(--bronze-lt); }
.pill__dot::after { position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--bronze-lt); content: ""; animation: lv-ping 2.4s var(--ease) infinite; }
@keyframes lv-ping { 0% { opacity: .9; transform: scale(.6); } 80%, 100% { opacity: 0; transform: scale(1.9); } }

.arrow { width: 1.1em; height: 1.1em; flex: none; transition: transform .35s var(--ease); }
.button { gap: .55rem; min-height: 3.35rem; padding: .7rem 1.35rem; font-size: var(--text-sm); letter-spacing: -.01em; transition: transform .35s var(--ease), background .25s ease, box-shadow .35s ease, filter .25s ease; }
.button:hover .arrow { transform: translateX(.25rem); }
.button--bronze { background: linear-gradient(135deg, #f0c08a, var(--bronze) 60%, #a8713e); color: #1d130b; box-shadow: 0 .8rem 2.4rem rgba(192,138,82,.32), inset 0 1px 0 rgba(255,255,255,.45); }
.button--bronze:hover { background: linear-gradient(135deg, #f6cd9c, #cb965f 60%, #b17a45); box-shadow: 0 1rem 3rem rgba(192,138,82,.45), inset 0 1px 0 rgba(255,255,255,.5); }
.button--light { background: var(--paper); color: var(--ink); }
.button--light:hover { background: #fff; }
.button--dark { background: var(--ink); color: var(--paper); }
.button--dark:hover { background: #2c221c; }
.button--branch { background: color-mix(in srgb, var(--branch, var(--bronze)) 88%, #fff); color: #140e0b; box-shadow: 0 .8rem 2.4rem color-mix(in srgb, var(--branch, var(--bronze)) 35%, transparent); }
.button--branch:hover { background: color-mix(in srgb, var(--branch, var(--bronze)) 70%, #fff); }
.button--wide { width: 100%; }
.text-link { min-height: 2.75rem; }
.text-link--dark { color: var(--ink); }
.section--dark .text-link { color: var(--paper); }

.eyebrow { letter-spacing: .14em; }
.section--dark .eyebrow { color: var(--mute); }

.chip { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.06); font-size: var(--text-xs); font-weight: 600; }
.chip i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--branch); box-shadow: 0 0 10px var(--branch); }

.status { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .7rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(18,13,11,.45); color: #f1e6dc; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.status i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--branch, var(--bronze-lt)); }
.status--live i { background: #5fd38d; box-shadow: 0 0 0 0 rgba(95,211,141,.6); animation: lv-live 2s infinite; }
@keyframes lv-live { 0% { box-shadow: 0 0 0 0 rgba(95,211,141,.55); } 70% { box-shadow: 0 0 0 7px rgba(95,211,141,0); } 100% { box-shadow: 0 0 0 0 rgba(95,211,141,0); } }

.switch-chip { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .5rem 1rem .5rem .85rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.04); color: var(--paper); font-size: var(--text-sm); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color .3s ease, background .3s ease, transform .3s var(--ease); }
.switch-chip i { width: .55rem; height: .55rem; flex: none; border-radius: 50%; background: var(--branch); box-shadow: 0 0 12px var(--branch); }
.switch-chip__name { font-weight: 600; }
.switch-chip__market { color: var(--mute); font-size: var(--text-xs); }
.switch-chip:hover, .switch-chip:focus-visible { border-color: var(--branch); background: color-mix(in srgb, var(--branch) 16%, transparent); transform: translateY(-2px); }
.switch-chip.is-current { border-color: var(--branch); background: color-mix(in srgb, var(--branch) 22%, transparent); }

/* ---- reveal ------------------------------------------------------------- */
.js [data-reveal] { opacity: 0; translate: 0 1.75rem; transition: opacity .9s var(--ease) var(--d, 0ms), translate 1.1s var(--ease-out) var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }
.is-split .w { display: inline-block; overflow: hidden; padding: 0 .05em .1em 0; margin: 0 -.05em -.1em 0; vertical-align: top; }
.is-split .w > span { display: inline-block; translate: 0 108%; transition: translate 1.1s var(--ease-out) calc(var(--i, 0) * 55ms + 120ms); }
.is-split.is-in .w > span, .is-in .is-split .w > span { translate: 0 0; }
.reveal-failsafe [data-reveal], .reveal-failsafe .is-split .w > span { opacity: 1 !important; translate: 0 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; translate: none; transition: none; }
  .pill__dot::after, .status--live i { animation: none; }
}

/* ---- flow field --------------------------------------------------------- */
.flow { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; background:
  radial-gradient(60% 50% at 75% 30%, rgba(192,138,82,.20), transparent 70%),
  radial-gradient(50% 45% at 15% 80%, rgba(122,74,38,.22), transparent 70%),
  var(--ink); }
.flow--vision { background:
  radial-gradient(45% 45% at 80% 25%, rgba(200,121,69,.22), transparent 70%),
  radial-gradient(45% 45% at 20% 70%, rgba(62,156,150,.18), transparent 70%),
  radial-gradient(40% 40% at 55% 55%, rgba(109,135,182,.16), transparent 70%),
  var(--ink-3); }
.flow--house, .flow--rides, .flow--marine { background:
  radial-gradient(55% 50% at 75% 30%, color-mix(in srgb, var(--branch) 26%, transparent), transparent 70%),
  radial-gradient(45% 45% at 15% 80%, color-mix(in srgb, var(--branch) 14%, transparent), transparent 70%),
  var(--ink-3); }
.flow__canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; }
.flow__canvas.is-live { opacity: 1; }
.flow__veil { position: absolute; inset: 0; background:
  radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(18,13,11,.55) 100%),
  linear-gradient(180deg, rgba(18,13,11,.15), transparent 30%, transparent 70%, rgba(18,13,11,.85)); }
.flow--fixed { position: fixed; }
.flow--fixed .flow__veil { background: radial-gradient(110% 80% at 50% 30%, rgba(18,13,11,.15), rgba(18,13,11,.7) 100%); }

/* ---- header ------------------------------------------------------------- */
.site-header { position: fixed; z-index: 100; top: max(.75rem, env(safe-area-inset-top)); left: 0; right: 0; width: 100%; pointer-events: none; }
.admin-bar .site-header { top: calc(32px + .75rem); }
@media (max-width: 782px) { .admin-bar .site-header { top: calc(46px + .75rem); } }
.site-header__inner { pointer-events: auto; }
.site-header__inner--glass { width: min(calc(100% - 2 * var(--gutter)), 105rem); min-height: 4rem; padding: .5rem .55rem .5rem .6rem; border-color: rgba(255,255,255,.12); background: rgba(27,21,18,.55); box-shadow: 0 .75rem 2.5rem rgba(0,0,0,.18); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); transition: background .35s ease, box-shadow .35s ease, border-color .35s ease; }
.site-header.is-scrolled .site-header__inner--glass { background: rgba(27,21,18,.86); border-color: rgba(255,255,255,.14); box-shadow: 0 1rem 3rem rgba(0,0,0,.32); }
.site-header__brand { position: relative; z-index: 3; display: flex; align-items: center; gap: .7rem; min-width: 0; }
.site-brand--image img { width: 2.6rem; height: 2.6rem; }
.site-header__wordmark { color: var(--paper); font-size: .98rem; font-weight: 650; letter-spacing: -.035em; white-space: nowrap; }
.site-header__wordmark span { color: var(--mute); font-weight: 500; }

.menu-toggle { position: relative; z-index: 3; display: grid; width: 2.9rem; height: 2.9rem; flex: none; place-content: center; gap: .38rem; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: rgba(255,255,255,.06); color: var(--paper); cursor: pointer; }
.menu-toggle__bar { display: block; width: 1.15rem; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .45s var(--ease), opacity .3s ease; }
.is-menu-open .menu-toggle__bar:first-of-type { transform: translateY(.27rem) rotate(45deg); }
.is-menu-open .menu-toggle__bar:last-of-type { transform: translateY(-.27rem) rotate(-45deg); }

/* Phone and tablet: the navigation is a full-screen sheet. */
.primary-nav { position: fixed; z-index: 2; inset: 0; display: flex; flex-direction: column; padding: calc(6.5rem + env(safe-area-inset-top)) var(--gutter) calc(2rem + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background:
  radial-gradient(80% 50% at 85% 0%, rgba(192,138,82,.25), transparent 70%),
  radial-gradient(60% 40% at 0% 100%, rgba(62,156,150,.12), transparent 70%),
  rgba(18,13,11,.97); opacity: 0; visibility: hidden; transform: translateY(-1rem); transition: opacity .4s ease, transform .5s var(--ease), visibility 0s linear .5s; }
@media (max-width: 63.99rem) { .admin-bar .primary-nav { padding-top: calc(6.5rem + 46px); } }
.site-header.is-menu-open .primary-nav { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; padding: calc(6.5rem + env(safe-area-inset-top)) var(--gutter) calc(2rem + env(safe-area-inset-bottom)); border: 0; border-radius: 0; box-shadow: none; background: radial-gradient(80% 50% at 85% 0%, rgba(192,138,82,.25), transparent 70%), radial-gradient(60% 40% at 0% 100%, rgba(62,156,150,.12), transparent 70%), rgba(18,13,11,.97); opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease, transform .5s var(--ease), visibility 0s; }
.admin-bar .site-header.is-menu-open .primary-nav { padding-top: calc(6.5rem + 46px); }
.site-header.is-menu-open .primary-nav ul.primary-nav__list { flex-direction: column; gap: 0; }
.menu-toggle .menu-toggle__bar { width: 1.15rem; height: 1.5px; }
/* backdrop-filter makes the bar the containing block for fixed children, which
   would trap the sheet inside the pill; it is switched off while open. */
.site-header.is-menu-open .site-header__inner--glass { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.primary-nav ul.primary-nav__list { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; margin: 0; list-style: none; color: var(--paper); font-size: 1rem; }
.primary-nav__list > li { border-bottom: 1px solid var(--line); }
.primary-nav__list > li.primary-nav__language, .primary-nav__list > li.primary-nav__cta { border: 0; }
.primary-nav__list > li > a, .nav-menu summary { display: flex; align-items: center; justify-content: space-between; min-height: 4rem; padding: .5rem 0; color: var(--paper); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); font-weight: 600; letter-spacing: -.045em; cursor: pointer; list-style: none; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu__chevron { width: .55rem; height: .55rem; margin: 0 .4rem 0 .6rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; opacity: .6; transform: rotate(45deg) translateY(-.15rem); transition: transform .35s var(--ease); }
.nav-menu details[open] .nav-menu__chevron { transform: rotate(225deg) translateY(-.1rem); }
.nav-menu__panel { display: grid; gap: .25rem; padding: 0 0 1rem; }
.nav-menu__panel a { display: grid; gap: .1rem; padding: .7rem .9rem; border-radius: .9rem; background: rgba(255,255,255,.04); }
.nav-menu__panel a:hover { background: rgba(255,255,255,.09); }
.nav-menu__title { color: var(--paper); font-size: 1rem; font-weight: 600; }
.nav-menu__hint { color: var(--mute); font-size: var(--text-xs); }
.nav-menu__kicker { color: var(--bronze-lt); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.nav-menu__branches { display: grid; gap: .25rem; }
.nav-branch { grid-template-columns: auto 1fr auto; align-items: center; column-gap: .7rem !important; }
.nav-branch__dot { grid-row: span 2; width: .6rem; height: .6rem; border-radius: 50%; background: var(--branch); box-shadow: 0 0 12px var(--branch); }
.nav-branch__name { color: var(--paper); font-weight: 600; }
.nav-branch__market { grid-column: 2; color: var(--mute); font-size: var(--text-xs); }
.nav-branch__status { grid-column: 3; grid-row: 1 / span 2; padding: .2rem .5rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: var(--mute); font-size: .64rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.primary-nav__language { display: flex; margin: 1.5rem 0 0; }
.primary-nav__cta { margin-top: 1rem; }
.primary-nav .primary-nav__contact { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.6rem; padding: .7rem 1.4rem; border-radius: 999px; background: linear-gradient(135deg, #f0c08a, var(--bronze) 60%, #a8713e); color: #1d130b; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
.primary-nav__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin: auto 0 0; padding-top: 2rem; color: var(--mute); font-size: var(--text-sm); }
.primary-nav__foot a { color: var(--paper); }

@media (max-width: 22rem) {
  .site-header__wordmark span { display: none; }
}

/* Desktop: glass bar with dropdown panels. */
@media (min-width: 64rem) {
  .menu-toggle, .nav-link--sheet, .primary-nav__foot { display: none; }
  .primary-nav { position: static; display: block; padding: 0; overflow: visible; background: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .primary-nav ul.primary-nav__list { flex-direction: row; align-items: center; gap: .15rem; font-size: var(--text-sm); }
  .primary-nav__list > li { border: 0; }
  .primary-nav__list > li > a, .nav-menu summary { min-height: 2.75rem; padding: .55rem .9rem; border-radius: 999px; color: #e5d6ca; font-size: var(--text-sm); font-weight: 500; letter-spacing: -.01em; transition: background .25s ease, color .25s ease; }
  .primary-nav__list > li > a:hover, .nav-menu summary:hover, .nav-menu details[open] summary { background: rgba(255,255,255,.07); color: #fff; }
  .nav-menu { position: relative; }
  .nav-menu__chevron { width: .38rem; height: .38rem; margin: 0 0 0 .5rem; }
  .nav-menu__panel { position: absolute; top: calc(100% + .85rem); left: 50%; width: 19rem; padding: .5rem; border: 1px solid rgba(255,255,255,.12); border-radius: 1.25rem; background: #1d1613; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.55); transform: translateX(-50%); animation: lv-drop .3s var(--ease-out); }
  .nav-menu__panel a { background: transparent; }
  /* The wide Vision panel hangs off the whole bar, right-aligned, so it can
     never run past the edge of the screen the way it did when it was anchored
     to the Vision item. */
  .primary-nav { position: relative; }
  .nav-menu--vision { position: static; }
  .nav-menu__panel--wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: .5rem; width: min(40rem, calc(100vw - 2 * var(--gutter))); left: auto; right: 0; transform: none; }
  .nav-menu__feature { align-content: end; min-height: 12rem; padding: 1.1rem !important; border-radius: .95rem; background:
    radial-gradient(90% 80% at 100% 0%, rgba(200,121,69,.45), transparent 60%),
    radial-gradient(80% 70% at 0% 100%, rgba(62,156,150,.35), transparent 60%),
    radial-gradient(70% 60% at 50% 60%, rgba(109,135,182,.3), transparent 60%),
    #1a1310 !important; }
  .nav-menu__feature .nav-menu__title { font-size: 1.3rem; letter-spacing: -.03em; }
  .primary-nav__language { margin: 0 .35rem; }
  .primary-nav__cta { margin: 0 0 0 .25rem; }
  .primary-nav .primary-nav__contact { min-height: 2.9rem; padding: .55rem 1.1rem; font-size: var(--text-sm); }
  .primary-nav .primary-nav__contact:hover .arrow { transform: translateX(.2rem); }
}
@keyframes lv-drop { from { translate: 0 -.4rem; } to { translate: 0 0; } }

/* ---- homepage hero ------------------------------------------------------ */
.home-hero, .vision-hero, .branch-hero { position: relative; isolation: isolate; display: grid; grid-template-rows: 1fr auto; min-height: 100svh; padding-top: calc(7rem + env(safe-area-inset-top)); padding-bottom: 1.5rem; overflow: hidden; background: var(--ink-3); color: var(--paper); }
.home-hero__grid, .vision-hero__grid, .branch-hero__grid { position: relative; display: grid; align-content: center; gap: 1.5rem; }
.home-hero__title { max-width: 11ch; margin-bottom: 1.5rem; font-size: clamp(3.1rem, 1.3rem + 7vw, 9.25rem); line-height: .92; letter-spacing: -.062em; }
.home-hero__title em, .vision-hero h1 em, .branch-hero h1 em, .contact-v2 h1 em { color: var(--bronze-lt); }
.home-hero__lead, .vision-hero__lead, .branch-hero__lead { max-width: 36rem; color: #cdbdb0; font-size: clamp(1.08rem, .98rem + .5vw, 1.45rem); line-height: 1.5; }
.home-hero__lead p { margin: 0; }
.home-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.25rem; margin-top: 2rem; }
.home-hero__visual { position: relative; width: min(100%, 20rem); aspect-ratio: 1; justify-self: center; margin-top: .5rem; }
.home-hero__visual .mark-stage__fallback { width: 66%; }
.home-hero__ring { position: absolute; inset: 4%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 60%, rgba(224,168,116,.75) 80%, transparent 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px)); animation: lv-spin 9s linear infinite; pointer-events: none; }
.home-hero__ring::after { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(224,168,116,.12); content: ""; }
@keyframes lv-spin { to { transform: rotate(360deg); } }
.home-hero__foot { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.home-hero__index { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; padding: 0; margin: 0; list-style: none; }
.home-hero__index a { display: inline-flex; align-items: baseline; gap: .5rem; min-height: 2.75rem; align-items: center; color: #e5d6ca; font-size: var(--text-sm); font-weight: 600; transition: color .2s ease; }
.home-hero__index a:hover { color: #fff; }
.home-hero__index span { color: var(--bronze-lt); font-size: .7rem; letter-spacing: .1em; }
.scroll-cue { display: none; align-items: center; gap: .75rem; color: var(--mute); font-size: var(--text-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: opacity .35s ease; }
.scroll-cue__track { position: relative; width: 1px; height: 2.6rem; overflow: hidden; background: rgba(255,255,255,.18); }
.scroll-cue__track span { position: absolute; top: -40%; left: 0; width: 1px; height: 40%; background: var(--bronze-lt); animation: lv-cue 1.8s var(--ease) infinite; }
.scroll-cue.is-hidden { opacity: 0; }
@keyframes lv-cue { to { top: 100%; } }

@media (min-width: 40rem) {
  .home-hero__visual { width: min(100%, 26rem); }
  .scroll-cue { display: inline-flex; }
}
@media (min-width: 64rem) {
  .home-hero, .vision-hero, .branch-hero { padding-top: 8rem; padding-bottom: 2rem; }
  .home-hero__grid, .vision-hero__grid, .branch-hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 3rem; }
  .home-hero__visual { width: min(100%, 34rem); margin: 0; }
}

/* ---- marquee ------------------------------------------------------------ */
.marquee { overflow: hidden; padding-block: 1.25rem; border-block: 1px solid var(--line); background: var(--ink); color: var(--paper); }
.marquee__track { display: flex; width: max-content; animation: lv-marquee 40s linear infinite; }
.marquee__group { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); padding-right: clamp(1.25rem, 3vw, 2.5rem); font-size: clamp(1.6rem, 1rem + 2.6vw, 3.4rem); font-weight: 600; letter-spacing: -.05em; white-space: nowrap; }
.marquee__group em { color: var(--bronze-lt); font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; }
.marquee__group i { color: var(--bronze); font-size: .45em; font-style: normal; }
@keyframes lv-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---- manifesto ---------------------------------------------------------- */
.manifesto { padding-block: clamp(6rem, 14vw, 12rem); background: var(--ink); color: var(--paper); }
.manifesto__text { max-width: 24ch; margin: 0; font-size: clamp(1.9rem, 1rem + 3.6vw, 4.9rem); font-weight: 600; letter-spacing: -.05em; line-height: 1.06; }
.mw { color: rgba(246,240,233,.14); transition: color .5s ease; }
.mw.is-lit { color: var(--paper); }
.mw.is-lit:nth-child(7n + 3) { color: var(--bronze-lt); }

/* ---- engines (product cards) ------------------------------------------- */
.engines { padding-block: clamp(5rem, 11vw, 10rem); background: var(--paper); color: var(--ink); }
.engines__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.engines__head h2 { max-width: 14ch; margin: 0; font-size: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); }
.engines__grid { display: grid; gap: 1rem; perspective: 1400px; }
.engine { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 1.5rem; min-height: 25rem; padding: clamp(1.4rem, 3vw, 2.4rem); overflow: hidden; border-radius: 1.75rem; background: var(--ink); color: var(--paper); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .6s var(--ease), box-shadow .5s ease; box-shadow: 0 1.5rem 4rem rgba(27,21,18,.18); }
.engine.is-tilting { transition: transform .1s linear, box-shadow .5s ease; }
.engine:hover { box-shadow: 0 2.5rem 6rem rgba(27,21,18,.28); }
.engine__glow { position: absolute; z-index: -1; inset: 0; background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 10%), rgba(255,226,190,.22), transparent 45%); opacity: .6; transition: opacity .4s ease; }
.engine:hover .engine__glow { opacity: 1; }
.engine__top { display: flex; align-items: center; justify-content: space-between; font-size: .75rem; font-weight: 700; letter-spacing: .14em; }
.engine__open { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; transition: background .3s ease, transform .5s var(--ease), color .3s ease; }
.engine__open .arrow { transform: rotate(-45deg); }
.engine:hover .engine__open { background: var(--paper); color: var(--ink); transform: rotate(45deg); }
.engine__body { display: grid; gap: .6rem; margin-top: auto; transform: translateZ(30px); }
.engine__kicker { color: var(--bronze-lt); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.engine__title { font-size: clamp(2.6rem, 1.8rem + 3vw, 4.6rem); font-weight: 650; letter-spacing: -.06em; line-height: .95; }
.engine__text { max-width: 34ch; color: #cdbdb0; font-size: var(--text-base); }
.engine__chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }

.engine--vision { background:
  radial-gradient(110% 80% at 100% 0%, rgba(200,121,69,.45), transparent 55%),
  radial-gradient(90% 70% at 0% 100%, rgba(62,156,150,.35), transparent 60%),
  radial-gradient(70% 60% at 60% 55%, rgba(109,135,182,.3), transparent 60%),
  #17110e; }
.engine__mark { position: absolute; z-index: -1; top: 12%; right: -6%; width: clamp(12rem, 40vw, 22rem); color: rgba(255,240,225,.9); filter: drop-shadow(0 2rem 3rem rgba(0,0,0,.45)); opacity: .9; transform: translateZ(60px) rotate(-8deg); animation: lv-float 9s ease-in-out infinite; }
.engine__mark svg { display: block; width: 100%; height: auto; }
@keyframes lv-float { 50% { translate: 0 -12px; } }

.engine--atelier { background: radial-gradient(90% 70% at 100% 0%, rgba(224,168,116,.32), transparent 60%), linear-gradient(160deg, #2c1f16, #17110d); }
.engine__prompt { display: grid; gap: .9rem; padding: 1rem 1.1rem; border: 1px solid rgba(255,255,255,.14); border-radius: 1.1rem; background: rgba(255,255,255,.05); transform: translateZ(50px); }
.engine__prompt-line { color: var(--paper); font-size: var(--text-sm); }
.engine__prompt-line::after { display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; background: var(--bronze-lt); content: ""; vertical-align: -.15em; animation: lv-caret 1s steps(1) infinite; }
.engine__prompt-bar { display: grid; gap: .4rem; }
.engine__prompt-bar span { height: .45rem; border-radius: 999px; background: linear-gradient(90deg, rgba(224,168,116,.55), rgba(224,168,116,.08)); animation: lv-bar 3.2s var(--ease) infinite; transform-origin: left; }
.engine__prompt-bar span:nth-child(2) { width: 78%; animation-delay: .3s; }
.engine__prompt-bar span:nth-child(3) { width: 55%; animation-delay: .6s; }
@keyframes lv-caret { 50% { opacity: 0; } }
@keyframes lv-bar { 0% { transform: scaleX(.1); opacity: .3; } 50%, 100% { transform: scaleX(1); opacity: 1; } }

.engine--poise { background: radial-gradient(90% 70% at 100% 0%, #fff8ee, transparent 60%), #e8dccd; color: var(--ink); }
.engine--poise .engine__text { color: var(--mute-dark); }
.engine--poise .engine__kicker { color: #9a6534; }
.engine--poise .engine__open { border-color: rgba(27,21,18,.2); }
.engine--poise:hover .engine__open { background: var(--ink); color: var(--paper); }
.engine--poise .engine__glow { background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 10%), rgba(255,255,255,.6), transparent 45%); }
.engine__phone { position: absolute; z-index: -1; top: 1.25rem; right: 1.25rem; width: clamp(7rem, 26vw, 10rem); aspect-ratio: 9 / 19; overflow: hidden; border: 5px solid #1b1512; border-radius: 1.6rem; box-shadow: 0 2rem 3rem rgba(27,21,18,.3); transform: translateZ(50px) rotate(6deg); }
.engine__phone img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 48rem) {
  .engines__grid { grid-template-columns: 1fr 1fr; }
  .engine--vision { grid-column: 1 / -1; min-height: 30rem; }
}
@media (min-width: 64rem) {
  .engines__grid { grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto; }
  .engine--vision { grid-column: 1; grid-row: 1 / span 2; min-height: 44rem; }
  .engine--atelier, .engine--poise { min-height: 21.5rem; }
  .engine__mark { width: 26rem; top: 10%; right: -4%; }
  .engine--poise .engine__body, .engine--atelier .engine__body { max-width: 60%; }
  .engine--atelier .engine__prompt { position: absolute; top: 5rem; right: 1.5rem; width: 46%; }
}

/* ---- Vision on the homepage -------------------------------------------- */
.home-vision { position: relative; isolation: isolate; padding-block: clamp(5rem, 11vw, 10rem); overflow: hidden; background: var(--ink-3); color: var(--paper); transition: --active-branch .9s ease; }
.home-vision__wash { position: absolute; z-index: -1; inset: -10% -20% auto; height: 70%; background: radial-gradient(45% 55% at 70% 35%, color-mix(in srgb, var(--active-branch) 32%, transparent), transparent 70%); filter: blur(20px); pointer-events: none; }
.home-vision__head { display: grid; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.home-vision__head h2 { max-width: 13ch; margin: 0; font-size: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); }
.home-vision__lead { max-width: 38ch; margin: 0; color: #cdbdb0; font-size: var(--text-lg); }
.home-vision__more { margin: 2rem 0 0; }
@media (min-width: 64rem) {
  .home-vision__head { grid-template-columns: 1.2fr .8fr; align-items: end; }
}

/* ---- branches (expanding panels) --------------------------------------- */
.branches { display: grid; gap: 1rem; }
.branch { position: relative; isolation: isolate; min-height: 34rem; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 1.6rem; background: #15100d; color: var(--paper); }
.branch__media { position: absolute; z-index: -1; inset: 0; }
.branch__media img { width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: saturate(.85); transform: scale(1.06); transition: transform 1.4s var(--ease-out), opacity .8s ease; }
.branch__media::after { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(18,13,11,.25) 0%, rgba(18,13,11,.6) 42%, rgba(18,13,11,.96) 78%),
  linear-gradient(120deg, color-mix(in srgb, var(--branch) 45%, transparent), transparent 60%); content: ""; }
.branch.is-active .branch__media img { opacity: .7; transform: scale(1); }
.branch__inner { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 100%; min-height: inherit; padding: clamp(1.3rem, 2.5vw, 2.25rem); }
.branch__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.branch__index { color: color-mix(in srgb, var(--branch) 55%, #fff); font-size: .75rem; font-weight: 700; letter-spacing: .14em; }
.branch__spine { display: none; }
.branch__content { margin-top: auto; padding-top: 6rem; }
.branch__market { margin: 0 0 .5rem; color: color-mix(in srgb, var(--branch) 55%, #fff); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.branch__name { max-width: none; margin: 0 0 1rem; font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem); font-weight: 650; letter-spacing: -.06em; }
.branch__name span { color: rgba(246,240,233,.7); font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; }
.branch__lead { max-width: 44ch; margin: 0 0 1.25rem; color: rgba(246,240,233,.8); font-size: var(--text-base); }
.branch__features { display: grid; gap: 0; padding: 0; margin: 0 0 1.5rem; list-style: none; }
.branch__features li { display: flex; gap: .75rem; align-items: baseline; padding-block: .65rem; border-top: 1px solid rgba(255,255,255,.12); color: #e9ddd2; font-size: var(--text-sm); }
.branch__features li::before { width: .45rem; height: .45rem; flex: none; border-radius: 50%; background: var(--branch); box-shadow: 0 0 10px var(--branch); content: ""; transform: translateY(-.1em); }
.branch__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.branch__actions .text-link { color: var(--paper); }

@media (min-width: 64rem) {
  .branches { display: flex; height: clamp(36rem, 70vh, 44rem); gap: .9rem; }
  .branch { flex: 1 1 0; min-width: 0; min-height: 0; cursor: pointer; transition: flex 0.9s var(--ease-out), border-color .4s ease; }
  .branch.is-active { flex: 3.4 1 0; cursor: default; border-color: color-mix(in srgb, var(--branch) 50%, transparent); }
  .branch__spine { position: absolute; bottom: 2rem; left: 50%; display: block; margin: 0; font-size: 1.6rem; font-weight: 650; letter-spacing: -.04em; white-space: nowrap; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); transition: opacity .4s ease .2s; }
  .branch.is-active .branch__spine { opacity: 0; transition-delay: 0s; }
  .branch__content { width: min(30rem, 100%); min-width: 28rem; opacity: 0; translate: 0 1.5rem; transition: opacity .35s ease, translate .6s var(--ease-out); }
  .branch.is-active .branch__content { opacity: 1; translate: 0 0; transition-delay: .35s; }
}

/* ---- Atelier on the homepage ------------------------------------------- */
.home-atelier { padding-block: clamp(5rem, 11vw, 10rem); overflow: hidden; background: var(--paper); color: var(--ink); }
.home-atelier__grid { display: grid; gap: 3rem; align-items: center; }
.home-atelier h2 { max-width: 12ch; font-size: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); }
.home-atelier__lead { max-width: 40ch; color: var(--mute-dark); font-size: var(--text-lg); }
.home-atelier__points { display: grid; gap: 0; padding: 0; margin: 1.5rem 0 0; list-style: none; }
.home-atelier__points li { display: flex; gap: .9rem; padding-block: .85rem; border-top: 1px solid var(--line-dark); color: #3d322b; font-size: var(--text-sm); }
.home-atelier__points li:last-child { border-bottom: 1px solid var(--line-dark); }
.home-atelier__points li::before { color: var(--bronze); content: "✦"; font-size: .8em; }

.studio { --hue: 28; overflow: hidden; border: 1px solid rgba(27,21,18,.1); border-radius: 1.4rem; background: var(--ink); color: var(--paper); box-shadow: 0 3rem 6rem rgba(27,21,18,.28); }
.studio__chrome { display: flex; align-items: center; gap: .4rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.studio__chrome i { width: .6rem; height: .6rem; border-radius: 50%; background: rgba(255,255,255,.18); }
.studio__chrome span { margin-left: auto; margin-right: auto; padding-right: 2rem; color: var(--mute); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.studio__body { display: grid; }
.studio__chat { padding: 1.25rem; border-bottom: 1px solid var(--line); }
.studio__label { margin: 0 0 .6rem; color: var(--mute); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.studio__prompt { min-height: 6.6em; margin: 0 0 1.1rem; padding: .9rem 1rem; border: 1px solid rgba(224,168,116,.3); border-radius: 1rem; background: rgba(255,255,255,.04); font-size: .95rem; line-height: 1.5; }
.studio__caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; background: var(--bronze-lt); vertical-align: -.2em; animation: lv-caret 1s steps(1) infinite; }
.studio__steps { display: grid; gap: .55rem; padding: 0; margin: 0; list-style: none; }
.studio__steps li { display: flex; align-items: center; gap: .6rem; color: rgba(246,240,233,.38); font-size: .85rem; transition: color .3s ease; }
.studio__steps li::before { width: .9rem; height: .9rem; flex: none; box-sizing: border-box; border: 1.5px solid rgba(255,255,255,.25); border-radius: 50%; content: ""; }
.studio__steps li.is-running { color: var(--paper); }
.studio__steps li.is-running::before { border-color: rgba(224,168,116,.25); border-top-color: var(--bronze-lt); animation: lv-spin .7s linear infinite; }
.studio__steps li.is-done { color: rgba(246,240,233,.85); }
.studio__steps li.is-done::before { border: 0; background: var(--bronze-lt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231b1512' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 80% no-repeat; }
.studio__preview { display: grid; gap: .7rem; align-content: start; min-height: 17rem; padding: 1.1rem; background: hsl(var(--hue) 35% 95%); transition: background 1s ease; }
.studio__nav, .studio__hero, .studio__cards { display: flex; gap: .4rem; }
.studio__nav i { height: .45rem; flex: 1; border-radius: 999px; background: rgba(27,21,18,.12); }
.studio__nav i:first-child { flex: 2.5; background: rgba(27,21,18,.3); }
.studio__hero { flex-direction: column; gap: .45rem; padding: 1.4rem 1.1rem; border-radius: .9rem; background: rgba(27,21,18,.06); transition: background .8s ease; }
.studio__hero b { display: block; height: .8rem; border-radius: 999px; background: rgba(27,21,18,.14); transform-origin: left; transition: background .8s ease, transform .9s var(--ease-out); }
.studio__hero b:nth-child(1) { width: 80%; height: 1.4rem; }
.studio__hero b:nth-child(2) { width: 55%; height: 1.4rem; }
.studio__hero b:nth-child(3) { width: 34%; height: 1.6rem; margin-top: .5rem; border-radius: 999px; }
.studio__cards i { height: 5rem; flex: 1; border-radius: .75rem; background: rgba(27,21,18,.07); transition: background .8s ease, transform .8s var(--ease-out); }
.studio:not(.is-built) .studio__hero b, .studio:not(.is-built) .studio__cards i { transform: scaleX(.35); opacity: .6; }
.studio.is-built .studio__hero { background: hsl(var(--hue) 40% 22%); }
.studio.is-built .studio__hero b { background: hsl(var(--hue) 30% 92%); }
.studio.is-built .studio__hero b:nth-child(3) { background: hsl(var(--hue) 65% 62%); }
.studio.is-built .studio__cards i { background: hsl(var(--hue) 40% 85%); }
.studio.is-built .studio__cards i:nth-child(2) { transition-delay: .1s; }
.studio.is-built .studio__cards i:nth-child(3) { transition-delay: .2s; }

@media (min-width: 40rem) {
  .studio__body { grid-template-columns: 1fr 1.1fr; }
  .studio__chat { border-right: 1px solid var(--line); border-bottom: 0; }
  .studio__preview { min-height: 21rem; }
}
@media (min-width: 64rem) {
  .home-atelier__grid { grid-template-columns: .9fr 1.1fr; gap: 4.5rem; }
  .studio { transform: perspective(1600px) rotateY(-9deg) rotateX(4deg); transition: transform .9s var(--ease-out); }
  .studio:hover { transform: perspective(1600px) rotateY(-3deg) rotateX(1deg); }
}

/* ---- principles --------------------------------------------------------- */
.principles, .vision-why { padding-block: clamp(5rem, 10vw, 9rem); background: var(--ink); color: var(--paper); }
.principles__list { display: grid; gap: 2rem; padding: 0; margin: 2rem 0 0; list-style: none; }
.principles__list li { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.principles__index { display: block; margin-bottom: 1.5rem; color: var(--bronze-lt); font-size: .75rem; font-weight: 700; letter-spacing: .16em; }
.principles__list h3 { margin-bottom: .75rem; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); }
.principles__list p { max-width: 34ch; margin: 0; color: var(--mute); }
@media (min-width: 48rem) { .principles__list { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

/* ---- footer ------------------------------------------------------------- */
.site-footer--v2 { position: relative; overflow: hidden; padding: clamp(4rem, 9vw, 7rem) 0 2rem; border-top: 1px solid var(--line); background: var(--ink-3); }
.footer-cta { margin-bottom: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line); }
.footer-cta .eyebrow { color: var(--mute); }
.footer-cta__link { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; color: var(--paper); font-size: clamp(2.5rem, 1rem + 6.4vw, 7.8rem); font-weight: 650; letter-spacing: -.065em; line-height: .95; }
.footer-cta__link em { color: var(--bronze-lt); font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; }
.footer-cta__arrow { display: grid; width: clamp(3.5rem, 8vw, 7rem); aspect-ratio: 1; flex: none; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; font-size: clamp(1.2rem, 2vw, 2rem); transition: background .4s ease, color .4s ease, transform .6s var(--ease); }
.footer-cta__arrow .arrow { transform: rotate(-45deg); }
.footer-cta__link:hover .footer-cta__arrow { background: var(--bronze-lt); color: var(--ink); transform: rotate(45deg); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; color: var(--mute); }

/* ---- Vision page -------------------------------------------------------- */
.vision-page { --mark-color: #e9cfaf; background: var(--ink-3); transition: --active-branch .9s ease; }
.vision-hero h1 { max-width: 12ch; margin-bottom: 1.5rem; font-size: clamp(3rem, 1.3rem + 6.4vw, 8.4rem); line-height: .92; letter-spacing: -.062em; }
.vision-hero__visual, .branch-hero__visual { width: min(100%, 18rem); aspect-ratio: 1; justify-self: center; }
.vision-hero__visual .mark-stage__fallback, .branch-hero__visual .mark-stage__fallback { width: 70%; }
.vision-hero__switch, .branch-hero__family { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.vision-hero__switch ul, .branch-hero__family ul { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.vision-hero__switch-label, .branch-hero__family > span { color: var(--mute); font-size: var(--text-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.vision-platforms { padding-block: clamp(5rem, 9vw, 8rem); background: var(--ink-3); color: var(--paper); }
.vision-platforms__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.vision-platforms__head h2 { max-width: 14ch; margin: 0; font-size: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); }

.engine-flow { padding-block: clamp(5rem, 10vw, 9rem); background: var(--paper); color: var(--ink); }
.engine-flow__head { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.engine-flow__head h2 { max-width: 14ch; margin: 0; font-size: clamp(2.4rem, 1.5rem + 3.6vw, 5rem); }
.engine-flow__tabs { display: inline-flex; flex-wrap: wrap; gap: .25rem; width: max-content; max-width: 100%; padding: .3rem; border-radius: 999px; background: rgba(27,21,18,.07); }
.engine-flow__tab { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .5rem 1.1rem; border: 0; border-radius: 999px; background: transparent; color: var(--mute-dark); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: background .3s ease, color .3s ease; }
.engine-flow__tab i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--branch); }
.engine-flow__tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.engine-flow__steps { position: relative; display: grid; gap: 1rem; padding: 0; margin: 0; list-style: none; }
.engine-step { position: relative; display: flex; flex-direction: column; gap: .5rem; min-height: 21rem; padding: clamp(1.4rem, 2.5vw, 2rem); overflow: hidden; border: 1px solid var(--line-dark); border-radius: 1.5rem; background: #fffaf4; }
.engine-step__index { margin-bottom: 1.5rem; color: color-mix(in srgb, var(--branch) 80%, #000); font-size: .75rem; font-weight: 700; letter-spacing: .16em; transition: color .5s ease; }
.engine-step h3 { margin: 0 0 .5rem; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }
.engine-step p { max-width: 32ch; margin: 0; color: var(--mute-dark); font-size: var(--text-sm); }
.engine-step__card { display: grid; gap: .45rem; margin-top: auto; padding: 1rem; border-radius: 1rem; background: color-mix(in srgb, var(--branch) 10%, #fff); transition: background .5s ease; }
.engine-step__card b { display: block; height: .55rem; border-radius: 999px; background: color-mix(in srgb, var(--branch) 45%, #fff); transition: background .5s ease; }
.engine-step__card b:first-child { height: 4.5rem; border-radius: .7rem; background: color-mix(in srgb, var(--branch) 30%, #fff); }
.engine-step__card b:last-child { width: 60%; }
.engine-step--core { background: var(--ink); color: var(--paper); border-color: transparent; }
.engine-step--core p { color: var(--mute); }
.engine-step--core .engine-step__index { color: color-mix(in srgb, var(--branch) 60%, #fff); }
.engine-step__core { position: relative; display: grid; place-items: center; height: 8rem; margin-top: auto; }
.engine-step__core span { position: absolute; width: 3rem; aspect-ratio: 1; border: 1.5px solid var(--branch); border-radius: 50%; box-shadow: 0 0 24px color-mix(in srgb, var(--branch) 60%, transparent); animation: lv-core 3s var(--ease) infinite; }
.engine-step__core span:nth-child(2) { animation-delay: 1s; }
.engine-step__core span:nth-child(3) { animation-delay: 2s; }
.engine-step__core::after { width: 1.6rem; aspect-ratio: 1; border-radius: 50%; background: var(--branch); box-shadow: 0 0 40px var(--branch); content: ""; transition: background .5s ease; }
@keyframes lv-core { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(3.2); } }
.engine-step__outputs { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: auto 0 0; list-style: none; }
.engine-step__outputs li { padding: .45rem .8rem; border-radius: 999px; background: color-mix(in srgb, var(--branch) 16%, #fff); color: var(--ink); font-size: .78rem; font-weight: 600; transition: background .5s ease; }
.is-swapping .engine-step__outputs li { animation: lv-pop .6s var(--ease-out) backwards; }
.is-swapping .engine-step__outputs li:nth-child(2) { animation-delay: .05s; }
.is-swapping .engine-step__outputs li:nth-child(3) { animation-delay: .1s; }
.is-swapping .engine-step__outputs li:nth-child(4) { animation-delay: .15s; }
.is-swapping .engine-step__outputs li:nth-child(5) { animation-delay: .2s; }
.is-swapping .engine-step__outputs li:nth-child(6) { animation-delay: .25s; }
.is-swapping [data-engine-object] { display: inline-block; animation: lv-pop .6s var(--ease-out); }
@keyframes lv-pop { from { opacity: 0; transform: translateY(.5rem) scale(.9); } }
@media (min-width: 64rem) {
  .engine-flow__head { grid-template-columns: 1fr auto; align-items: end; }
  .engine-flow__steps { grid-template-columns: repeat(3, 1fr); }
  .engine-flow__steps::before { position: absolute; z-index: 0; top: 50%; left: 8%; right: 8%; height: 2px; background: repeating-linear-gradient(90deg, var(--branch) 0 10px, transparent 10px 20px); background-size: 40px 2px; content: ""; opacity: .55; animation: lv-dash 1.2s linear infinite; }
  .engine-step { z-index: 1; min-height: 25rem; }
}
@keyframes lv-dash { to { background-position: 40px 0; } }

.vision-why__head h2 { max-width: 15ch; font-size: clamp(2.4rem, 1.5rem + 3.6vw, 5rem); }
.vision-next { padding-block: clamp(5rem, 10vw, 9rem); background: var(--paper); color: var(--ink); text-align: center; }
.vision-next__inner { display: grid; justify-items: center; }
.vision-next h2 { max-width: 14ch; font-size: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); }
.vision-next__lead { max-width: 42ch; margin-bottom: 2rem; color: var(--mute-dark); font-size: var(--text-lg); }
@media (min-width: 40rem) {
  .vision-hero__visual, .branch-hero__visual { width: min(100%, 24rem); }
}
@media (min-width: 64rem) {
  .vision-hero__visual, .branch-hero__visual { width: min(100%, 32rem); }
}

/* ---- Vision branch pages ----------------------------------------------- */
.product-page--marine { --product-accent: #3e9c96; --product-ink: #04201e; }
.branch-page { background: var(--paper); }
.branch-hero h1 { max-width: 12ch; margin-bottom: 1.5rem; font-size: clamp(2.8rem, 1.3rem + 5.2vw, 7rem); line-height: .94; letter-spacing: -.06em; }
.branch-hero h1 em { color: color-mix(in srgb, var(--branch) 60%, #fff); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin-bottom: 1.25rem; color: var(--mute); font-size: var(--text-sm); }
.crumbs a { color: var(--paper); text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: .25em; }
.crumbs .status { margin-left: .4rem; }
.branch-hero__kicker { margin-bottom: 1rem; color: color-mix(in srgb, var(--branch) 55%, #fff); font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.branch-page .feature-showcase__image { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); }
.branch-page .feature-showcase__image.is-tilting { transition: transform .1s linear; }
.branch-page .feature-showcase { background: var(--paper-2); }
.branch-page .product-intro { border-color: var(--line-dark); }
.branch-cta { overflow: hidden; }
.branch-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.5rem; }
.branch-cta::before { display: none; }

.mock-listing { overflow: hidden; border-radius: calc(var(--radius-lg) - .45rem); background: #fff; }
.mock-listing__photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.mock-listing__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; }
.mock-listing__badge { position: absolute; top: .9rem; left: .9rem; padding: .35rem .75rem; border-radius: 999px; background: var(--branch); color: #04201e; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mock-listing__body { padding: 1.25rem 1.4rem 1.5rem; }
.mock-listing__title { margin: 0 0 .4rem; font-size: 1.2rem; font-weight: 650; letter-spacing: -.03em; }
.mock-listing__copy { margin: 0 0 1rem; color: var(--mute-dark); font-family: var(--font-serif); font-size: 1.15rem; font-style: italic; line-height: 1.35; }
.mock-listing__chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; list-style: none; }
.mock-listing__chips li { padding: .35rem .7rem; border: 1px solid color-mix(in srgb, var(--branch) 40%, transparent); border-radius: 999px; color: #1e4b48; font-size: .75rem; font-weight: 600; }

/* ---- connect ------------------------------------------------------------ */
.connect-v2 { position: relative; isolation: isolate; min-height: 100svh; padding: calc(7rem + env(safe-area-inset-top)) var(--gutter) 4rem; background: var(--ink-3); color: var(--paper); }
.connect-v2__inner { display: grid; gap: 1.1rem; width: min(100%, 30rem); margin-inline: auto; }
.profile { display: grid; justify-items: center; gap: .35rem; padding-bottom: .75rem; text-align: center; }
.profile__badge { position: relative; display: grid; width: 8.5rem; aspect-ratio: 1; margin-bottom: 1.1rem; place-items: center; border-radius: 50%; background: radial-gradient(circle at 32% 26%, #3e2e24, #140f0c 72%); box-shadow: 0 1.5rem 3rem rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14); }
.profile__ring { position: absolute; inset: -7px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 55%, var(--bronze-lt) 80%, transparent 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); animation: lv-spin 6s linear infinite; }
.profile__mark { width: 86%; height: 86%; }
.profile__mark .mark-stage__fallback { width: 64%; }
.profile__name { max-width: none; margin: 0; font-size: clamp(2.4rem, 1.8rem + 3vw, 3.2rem); }
.profile__name em { color: var(--bronze-lt); }
.profile__role { margin: 0; color: #cdbdb0; font-size: var(--text-base); }
.profile__where { display: inline-flex; align-items: center; gap: .55rem; margin: .7rem 0 0; padding: .35rem .85rem .35rem .7rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.05); color: #e5d6ca; font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; }
.profile__time::before { margin-right: .55rem; color: var(--mute); content: "·"; }
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.quick__action { display: grid; justify-items: center; align-content: center; gap: .45rem; min-height: 5.25rem; padding: .9rem .4rem; border: 1px solid rgba(255,255,255,.12); border-radius: 1.15rem; background: rgba(30,22,18,.6); color: var(--paper); font: inherit; font-size: .78rem; font-weight: 600; text-align: center; cursor: pointer; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .25s var(--ease), border-color .25s ease, background .25s ease; }
.quick__action svg { width: 1.45rem; height: 1.45rem; color: var(--bronze-lt); }
.quick__action:hover { border-color: rgba(224,168,116,.45); background: rgba(42,32,27,.75); transform: translateY(-2px); }
.quick__action:active { transform: scale(.97); }
.featured { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.featured__card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .2rem; min-height: 11rem; padding: 1rem; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 1.3rem; color: var(--paper); transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease), border-color .3s ease; }
.featured__card.is-tilting { transition: transform .1s linear; }
.featured__card:hover { border-color: rgba(255,255,255,.28); }
.featured__card--vision { background:
  radial-gradient(100% 80% at 100% 0%, rgba(200,121,69,.6), transparent 60%),
  radial-gradient(90% 70% at 0% 100%, rgba(62,156,150,.5), transparent 60%),
  radial-gradient(70% 60% at 60% 50%, rgba(109,135,182,.4), transparent 60%),
  #1a1310; }
.featured__card--atelier { background: radial-gradient(100% 80% at 100% 0%, rgba(240,192,138,.55), transparent 60%), linear-gradient(160deg, #3a2819, #18110c); }
.featured__kick { color: rgba(246,240,233,.75); font-size: .6rem; font-weight: 700; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; }
.featured__title { font-size: 1.75rem; font-weight: 650; letter-spacing: -.05em; line-height: 1.05; }
.featured__text { color: rgba(246,240,233,.82); font-size: .8rem; line-height: 1.35; }
.featured__go { position: absolute; top: .8rem; right: .8rem; display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }
.featured__go .arrow { transform: rotate(-45deg); }
.connect-v2 .connect-group { margin-top: .6rem; }
.connect-v2 .connect-group__title { margin: 0 0 .6rem .3rem; color: var(--mute); }
.connect-v2 .connect-links { gap: .5rem; }
.connect-v2 .connect-link { gap: .9rem; min-height: 4.1rem; padding: .7rem 1rem .7rem .7rem; border-color: rgba(255,255,255,.1); border-radius: 1.15rem; background: rgba(30,22,18,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.connect-v2 .connect-link:hover { border-color: rgba(224,168,116,.45); background: rgba(42,32,27,.78); }
.connect-v2 .connect-link__icon { width: 2.7rem; height: 2.7rem; border-radius: .85rem; background: rgba(192,138,82,.16); color: var(--bronze-lt); }
.connect-v2 .connect-group--house .connect-link__icon { background: rgba(200,121,69,.2); color: #f0b27a; }
.connect-v2 .connect-link__label { font-size: var(--text-sm); }
.connect-v2 .connect-link__handle { font-size: var(--text-xs); }
.connect-v2 .connect-link__arrow { display: grid; color: var(--mute); }
.connect-v2 .connect-link:hover .connect-link__arrow { color: var(--bronze-lt); }
.connect-v2__contact { display: grid; gap: .25rem; margin-top: .9rem; padding: 1.2rem 1.3rem; border-radius: 1.3rem; background: linear-gradient(135deg, #f0c08a, var(--bronze) 60%, #a8713e); color: #1d130b; box-shadow: 0 1rem 2.5rem rgba(192,138,82,.3); transition: transform .3s var(--ease); }
.connect-v2__contact:hover { transform: translateY(-2px); }
.connect-v2__contact span { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.connect-v2__contact strong { display: flex; align-items: center; justify-content: space-between; font-size: 1.25rem; letter-spacing: -.03em; }
@media (max-width: 21rem) {
  .featured { grid-template-columns: 1fr; }
  .quick__action { font-size: .7rem; }
}

/* ---- contact ------------------------------------------------------------ */
.contact-v2 { position: relative; isolation: isolate; min-height: 100svh; padding-top: calc(7.5rem + env(safe-area-inset-top)); padding-bottom: clamp(4rem, 8vw, 7rem); background: var(--ink-3); color: var(--paper); }
.contact-v2__grid { display: grid; gap: 2.5rem; }
.contact-v2 h1 { max-width: 11ch; margin-bottom: 1.5rem; font-size: clamp(2.8rem, 1.4rem + 5vw, 6.6rem); line-height: .94; }
.contact-v2__lead { max-width: 34rem; margin: 0 0 2rem; color: #cdbdb0; font-size: clamp(1.05rem, .98rem + .4vw, 1.3rem); }
.contact-v2__lines { display: grid; padding: 0; margin: 0 0 1.75rem; list-style: none; }
.contact-v2__lines li { display: grid; gap: .25rem; padding-block: .9rem; border-top: 1px solid var(--line); font-size: var(--text-sm); }
.contact-v2__lines li:last-child { border-bottom: 1px solid var(--line); }
.contact-v2__line-label { color: var(--mute); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.contact-v2__email { overflow-wrap: anywhere; color: var(--paper); font-size: clamp(1.15rem, .9rem + 1.2vw, 1.6rem); font-weight: 600; letter-spacing: -.03em; text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: .25em; }
.contact-v2__time::before { margin: 0 .5rem; color: var(--mute); content: "·"; }
.contact-v2__socials { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.contact-v2__socials a { display: inline-flex; align-items: center; gap: .6rem; min-height: 3rem; padding: .4rem 1rem .4rem .4rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.04); font-size: var(--text-sm); font-weight: 600; transition: border-color .25s ease, background .25s ease; }
.contact-v2__socials a:hover { border-color: rgba(224,168,116,.5); background: rgba(255,255,255,.08); }
.contact-v2__social-icon { display: grid; width: 2.2rem; height: 2.2rem; flex: none; place-items: center; border-radius: 50%; background: rgba(192,138,82,.18); color: var(--bronze-lt); }
.contact-v2__social-icon svg { width: 1rem; height: 1rem; }
.contact-v2__social-owner { display: block; color: var(--mute); font-size: .68rem; font-weight: 600; letter-spacing: .04em; line-height: 1.1; }

.contact-form-wrap { position: relative; padding: clamp(1.25rem, 3vw, 2.5rem); border: 1px solid rgba(255,255,255,.12); border-radius: 1.6rem; background: rgba(24,18,15,.78); box-shadow: 0 2rem 5rem rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); scroll-margin-top: 6.5rem; }
.contact-form fieldset { min-width: 0; padding: 0; margin: 0 0 1.75rem; border: 0; }
.contact-form legend { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; padding: 0; color: var(--paper); font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; }
.contact-form__step { display: inline-grid; min-width: 2.2rem; height: 1.6rem; padding-inline: .4rem; place-items: center; border: 1px solid rgba(224,168,116,.4); border-radius: 999px; color: var(--bronze-lt); font-size: .7rem; font-weight: 700; letter-spacing: .08em; }
.topic-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.topic-chip { position: relative; }
.topic-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.topic-chip span { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.03); color: #e5d6ca; font-size: var(--text-sm); cursor: pointer; transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s var(--ease); user-select: none; }
.topic-chip span::before { width: .9rem; height: .9rem; flex: none; box-sizing: border-box; border: 1.5px solid rgba(255,255,255,.3); border-radius: 50%; content: ""; transition: background .25s ease, border-color .25s ease; }
.topic-chip:hover span { border-color: rgba(224,168,116,.45); }
.topic-chip input:checked + span { border-color: transparent; background: linear-gradient(135deg, #f0c08a, var(--bronze)); color: #1d130b; font-weight: 600; }
.topic-chip input:checked + span::before { border: 0; background: #1d130b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f0c08a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 80% no-repeat; }
.topic-chip input:focus-visible + span { outline: 2px solid var(--bronze-lt); outline-offset: 2px; }
.topic-chip--vision-house input:checked + span { background: linear-gradient(135deg, #f0b27a, #c87945); }
.topic-chip--vision-rides input:checked + span { background: linear-gradient(135deg, #b4c6ea, #6d87b6); }
.topic-chip--vision-marine input:checked + span { background: linear-gradient(135deg, #9fe0d6, #3e9c96); }
.field-row { display: grid; gap: 0 .75rem; }
.field { position: relative; display: block; margin-bottom: .75rem; }
.field input, .field textarea { display: block; width: 100%; box-sizing: border-box; padding: 1.5rem 1rem .6rem; border: 1px solid rgba(255,255,255,.14); border-radius: 1rem; background: rgba(255,255,255,.04); color: var(--paper); font: inherit; font-size: 16px; line-height: 1.4; outline: none; -webkit-appearance: none; appearance: none; transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.field textarea { min-height: 9.5rem; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--bronze-lt); background: rgba(255,255,255,.07); box-shadow: 0 0 0 4px rgba(224,168,116,.12); }
.field__label { position: absolute; top: 1.1rem; left: 1rem; color: var(--mute); font-size: .98rem; pointer-events: none; transform-origin: left top; transition: transform .25s var(--ease), color .25s ease; }
.field input:focus + .field__label, .field input:not(:placeholder-shown) + .field__label, .field textarea:focus + .field__label, .field textarea:not(:placeholder-shown) + .field__label { color: var(--bronze-lt); transform: translateY(-.62rem) scale(.76); }
.field input:-webkit-autofill { -webkit-text-fill-color: var(--paper); -webkit-box-shadow: 0 0 0 40rem #2a201b inset; caret-color: var(--paper); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #e06c5a; }
.field.is-invalid .field__label { color: #f19a8a; }
.contact-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__notice { margin: 0 0 1.5rem; padding: .9rem 1rem; border: 1px solid rgba(224,108,90,.45); border-radius: .9rem; background: rgba(224,108,90,.12); color: #ffd2c8; font-size: var(--text-sm); }
.contact-form__submit { display: grid; gap: 1rem; }
.contact-form__submit .button { min-height: 3.75rem; font-size: 1rem; }
.contact-form.is-sending .button { opacity: .7; pointer-events: none; }
.contact-form__privacy { margin: 0; color: var(--mute); font-size: var(--text-xs); }
.contact-form__privacy a { color: var(--paper); text-decoration: underline; text-underline-offset: .2em; }
.contact-sent { display: grid; justify-items: center; gap: .5rem; padding: 2rem 0; text-align: center; }
.contact-sent__icon { width: 4.5rem; color: var(--bronze-lt); }
.contact-sent__icon svg { display: block; width: 100%; stroke-dasharray: 160; stroke-dashoffset: 160; animation: lv-draw 1.2s var(--ease-out) .2s forwards; }
@keyframes lv-draw { to { stroke-dashoffset: 0; } }
.contact-sent h2 { max-width: none; margin: .5rem 0 0; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.contact-sent p { max-width: 34ch; color: #cdbdb0; }
@media (min-width: 40rem) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .contact-v2__lines li { grid-template-columns: 7rem 1fr; align-items: baseline; }
}
@media (min-width: 64rem) {
  .contact-v2__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 5rem; align-items: start; }
  .contact-v2__intro { position: sticky; top: 8rem; }
}

/* ---- older pages on the new chrome -------------------------------------- */
/* The Atelier, demo, Poise and legal templates were written for a header
   that scrolled away; the fixed bar needs the same clearance they already
   have, so only the hero spacing is nudged. */
.product-hero, .atelier-hero, .demo-hero { padding-top: calc(7rem + env(safe-area-inset-top)); }
.legal-page { padding-top: calc(8rem + env(safe-area-inset-top)); }

/* Compact form: it sat a size too large next to the intro. */
.contact-form-wrap { padding: clamp(1.1rem, 2.5vw, 1.9rem); border-radius: 1.4rem; }
.contact-form fieldset { margin-bottom: 1.25rem; }
.contact-form legend { gap: .6rem; margin-bottom: .7rem; font-size: .95rem; }
.contact-form__step { min-width: 1.9rem; height: 1.4rem; font-size: .64rem; }
.topic-chips { gap: .35rem; }
.topic-chip span { min-height: 2.3rem; padding: .35rem .8rem; gap: .4rem; font-size: .85rem; }
.topic-chip span::before { width: .75rem; height: .75rem; }
.field { margin-bottom: .55rem; }
.field-row { gap: 0 .55rem; }
.field input, .field textarea { padding: 1.2rem .9rem .4rem; border-radius: .85rem; }
.field textarea { min-height: 7rem; }
.field__label { top: .85rem; left: .9rem; font-size: .92rem; }
.field input:focus + .field__label, .field input:not(:placeholder-shown) + .field__label, .field textarea:focus + .field__label, .field textarea:not(:placeholder-shown) + .field__label { transform: translateY(-.55rem) scale(.76); }
.contact-form__submit { gap: .75rem; }
.contact-form__submit .button { min-height: 3.2rem; font-size: .95rem; }

/* ---- footer: four columns ---------------------------------------------- */
@media (min-width: 48rem) { .site-footer--v2 .footer-nav { grid-template-columns: repeat(4, minmax(8rem, auto)); } }

/* ---- homepage: Mobile card ---------------------------------------------- */
.engine--mobile { background: radial-gradient(90% 70% at 100% 0%, rgba(201,161,90,.35), transparent 60%), radial-gradient(80% 70% at 0% 100%, rgba(231,178,168,.45), transparent 60%), #efe3d6; }
.engine--mobile .engine__phone { border-color: #241a14; }

/* ---- shared phone frame ------------------------------------------------- */
.phone { position: relative; width: 100%; aspect-ratio: 1206 / 2622; overflow: hidden; border: clamp(5px, .7vw, 9px) solid #120d0b; border-radius: clamp(1.6rem, 3.4vw, 2.9rem); background: #120d0b; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 2.5rem 5rem rgba(0,0,0,.5); }
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; }
.phone__notch { position: absolute; z-index: 2; top: 1.6%; left: 50%; width: 30%; height: 3.2%; border-radius: 999px; background: #000; transform: translateX(-50%); }
.phone[data-tilt], .poster[data-tilt] { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); }
.phone.is-tilting, .poster.is-tilting { transition: transform .1s linear; }

/* ---- Mobile page -------------------------------------------------------- */
.mobile-page { background: var(--ink-3); }
.mobile-hero { position: relative; isolation: isolate; display: grid; min-height: 100svh; padding-top: calc(7rem + env(safe-area-inset-top)); padding-bottom: 3rem; overflow: hidden; background: var(--ink-3); color: var(--paper); }
.mobile-hero__grid { position: relative; display: grid; align-content: center; gap: 2.5rem; }
.mobile-hero h1 { max-width: 11ch; margin-bottom: 1.5rem; font-size: clamp(3rem, 1.3rem + 6.4vw, 8.2rem); line-height: .92; letter-spacing: -.062em; }
.mobile-hero h1 em { color: #f0c2b8; }
.mobile-hero__lead { max-width: 36rem; color: #cdbdb0; font-size: clamp(1.08rem, .98rem + .5vw, 1.4rem); }
.mobile-hero__apps { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 2rem 0 0; list-style: none; }
.mobile-hero__stage { position: relative; width: min(100%, 22rem); aspect-ratio: 1 / 1.25; justify-self: center; }
.float-phone, .float-card, .float-icon { position: absolute; translate: var(--px, 0) var(--py, 0); transition: translate .5s var(--ease-out); }
.float-phone { right: 6%; top: 0; width: 52%; transform: rotate(6deg); animation: lv-float 8s ease-in-out infinite; }
.float-card { left: 0; bottom: 4%; width: 46%; overflow: hidden; border-radius: 1.3rem; box-shadow: 0 2rem 4rem rgba(0,0,0,.45); transform: rotate(-8deg); animation: lv-float 10s ease-in-out -3s infinite; }
.float-card img { display: block; width: 100%; }
.float-icon { left: 40%; top: 4%; width: 22%; border-radius: 22%; box-shadow: 0 1.5rem 3rem rgba(0,0,0,.5); transform: rotate(-10deg); animation: lv-float 7s ease-in-out -1s infinite; }
@media (min-width: 64rem) {
  .mobile-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 3rem; }
  .mobile-hero__stage { width: min(100%, 30rem); }
}

.app-section { position: relative; isolation: isolate; padding-block: clamp(5rem, 10vw, 9rem) clamp(3rem, 6vw, 5rem); overflow: hidden; }
.app-section--whodoku { background: radial-gradient(70% 60% at 85% 20%, rgba(201,161,90,.22), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(138,59,42,.3), transparent 70%), linear-gradient(180deg, #1c120d, #120b08); color: #f3e6cf; }
.app-section--poise { background: radial-gradient(70% 60% at 15% 20%, rgba(231,178,168,.55), transparent 70%), linear-gradient(180deg, #f8eee8, #f1e3da); color: #2b1f1c; }
.app-section__grid { display: grid; gap: 3rem; align-items: center; }
.app-section__id { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.app-section__icon { width: 4.5rem; height: 4.5rem; flex: none; border-radius: 1.1rem; box-shadow: 0 1rem 2rem rgba(0,0,0,.3); }
.app-section__icon--type { display: grid; place-items: center; background: linear-gradient(135deg, #f6dcd2, #e7b2a8); color: #5a3530; font-family: var(--font-serif); font-size: 2.6rem; font-style: italic; }
.app-section__kind { margin: 0 0 .25rem; color: var(--branch); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.app-section--poise .app-section__kind { color: #a8706a; }
.app-section__name { max-width: none; margin: 0; font-size: clamp(2.8rem, 1.6rem + 4.4vw, 5.8rem); }
.app-section--whodoku .app-section__name { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; color: #f0dca8; }
.app-section__tagline { margin: 0 0 1rem; font-family: var(--font-serif); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); font-style: italic; line-height: 1.15; }
.app-section__lead { max-width: 44ch; margin: 0 0 1.5rem; opacity: .8; font-size: var(--text-base); }
.app-section__features { display: grid; padding: 0; margin: 0 0 2rem; list-style: none; }
.app-section__features li { display: flex; gap: .8rem; padding-block: .8rem; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); font-size: var(--text-sm); }
.app-section__features li::before { color: var(--branch); content: "✦"; }
.app-section--poise .app-section__features li::before { color: #c9827a; }
.app-section__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.25rem; }
.app-section--poise .status { border-color: rgba(43,31,28,.2); background: rgba(255,255,255,.5); color: #2b1f1c; }
.app-section--poise .button--branch { background: #2b1f1c; color: #fbefea; box-shadow: none; }
.app-section__visual { width: min(100%, 21rem); justify-self: center; }
.poster { overflow: hidden; border-radius: 1.6rem; box-shadow: 0 2.5rem 5rem rgba(90,53,48,.3); }
.poster img { display: block; width: 100%; }
.app-rules { display: grid; gap: .6rem; padding: 0; margin: 3rem 0 0; list-style: none; counter-reset: r; }
.app-rules li { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border: 1px solid rgba(240,220,168,.18); border-radius: 1rem; background: rgba(240,220,168,.05); font-family: var(--font-serif); font-size: 1.15rem; font-style: italic; }
.app-rules span { color: var(--branch); font-family: var(--font-sans); font-size: .72rem; font-style: normal; font-weight: 700; letter-spacing: .14em; }
.app-rail { margin-top: clamp(2.5rem, 5vw, 4rem); }
.app-rail__track { display: flex; gap: 1rem; padding: .5rem var(--gutter) 1.5rem; margin: 0; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.app-rail__track::-webkit-scrollbar { display: none; }
.app-rail__track li { flex: none; width: clamp(11rem, 42vw, 15rem); scroll-snap-align: start; }
.app-rail__track img { display: block; width: 100%; border-radius: 1.2rem; box-shadow: 0 1.5rem 3rem rgba(0,0,0,.25); }
.app-rail__track--framed img { border: 5px solid #120d0b; border-radius: 1.8rem; }
@media (min-width: 48rem) { .app-rules { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 64rem) {
  .app-section__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 5rem; }
  .app-section--poise .app-section__copy { order: 2; }
  .app-section__visual { width: min(100%, 24rem); }
}

/* ---- Atelier page ------------------------------------------------------- */
.atelier-page { background: var(--ink-3); }
.atelier-hero2 { position: relative; isolation: isolate; display: grid; min-height: 100svh; padding-top: calc(7rem + env(safe-area-inset-top)); padding-bottom: 3rem; overflow: hidden; background: var(--ink-3); color: var(--paper); }
.atelier-hero2__grid { position: relative; display: grid; align-content: center; gap: 2.5rem; }
.atelier-hero2 h1 { max-width: 10ch; margin-bottom: 1.5rem; font-size: clamp(3rem, 1.3rem + 6.4vw, 8.2rem); line-height: .92; letter-spacing: -.062em; }
.atelier-hero2 h1 em { color: var(--bronze-lt); }
.atelier-hero2__lead { max-width: 36rem; color: #cdbdb0; font-size: clamp(1.08rem, .98rem + .5vw, 1.4rem); }
.atelier-hero2__status { margin: 1.75rem 0 0; }
.atelier-hero2 .studio { border-color: rgba(255,255,255,.1); box-shadow: 0 3rem 6rem rgba(0,0,0,.5); }
@media (min-width: 64rem) {
  .atelier-hero2__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 3.5rem; }
  .atelier-hero2 .studio { transform: perspective(1600px) rotateY(-10deg) rotateX(4deg); }
}

.platform-preview { padding-block: clamp(5rem, 10vw, 9rem); background: var(--paper); color: var(--ink); }
.platform-preview__head { display: grid; gap: 1.25rem; margin-bottom: 2.5rem; }
.platform-preview__head h2 { max-width: 13ch; margin: 0; font-size: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); }
.platform-preview__lead { max-width: 42ch; margin: 0; color: var(--mute-dark); font-size: var(--text-lg); }
.platform-preview__tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: 1.25rem; }
.preview-tab { position: relative; display: grid; gap: .2rem; align-content: start; padding: .9rem 1rem 1.1rem; overflow: hidden; border: 1px solid var(--line-dark); border-radius: 1rem; background: #fffaf4; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background .3s ease, border-color .3s ease; }
.preview-tab__index { color: var(--bronze); font-size: .7rem; font-weight: 700; letter-spacing: .14em; }
.preview-tab__title { font-size: 1.05rem; font-weight: 650; letter-spacing: -.02em; }
.preview-tab__text { display: none; color: var(--mute-dark); font-size: .82rem; line-height: 1.4; }
.preview-tab__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(27,21,18,.06); }
.preview-tab__bar span { display: block; width: 0; height: 100%; background: var(--bronze); }
.preview-tab[aria-selected="true"] { border-color: var(--bronze); background: #fff; }
.preview-tab[aria-selected="true"] .preview-tab__bar span { width: 100%; }
.preview-tab.is-playing .preview-tab__bar span { width: 0; animation: lv-progress 4.2s linear forwards; }
@keyframes lv-progress { to { width: 100%; } }
@media (min-width: 48rem) {
  .platform-preview__tabs { grid-template-columns: repeat(4, 1fr); }
  .preview-tab__text { display: block; }
}
@media (min-width: 64rem) { .platform-preview__head { grid-template-columns: 1fr 1fr; align-items: end; } }

.app-frame { overflow: hidden; border: 1px solid rgba(27,21,18,.12); border-radius: 1.4rem; background: var(--ink); color: var(--paper); box-shadow: 0 3rem 6rem rgba(27,21,18,.25); }
.app-frame__chrome { display: flex; align-items: center; gap: .4rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.app-frame__chrome i { width: .6rem; height: .6rem; border-radius: 50%; background: rgba(255,255,255,.18); }
.app-frame__chrome span { margin-inline: auto; padding: .25rem 2.5rem; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--mute); font-size: .72rem; }
.app-frame__body { display: grid; min-height: 26rem; }
.app-frame__side { display: none; }
.app-frame__main { position: relative; padding: clamp(1.25rem, 3vw, 2.5rem); }
.screen { display: none; animation: lv-screen .6s var(--ease-out); }
@keyframes lv-screen { from { opacity: 0; transform: translateY(.75rem); } }
.app-frame[data-screen="describe"] .screen--describe,
.app-frame[data-screen="build"] .screen--build,
.app-frame[data-screen="refine"] .screen--refine,
.app-frame[data-screen="live"] .screen--live { display: grid; }
.screen--describe { justify-items: center; align-content: center; gap: 1.25rem; min-height: 22rem; text-align: center; }
.screen__title { margin: 0; font-family: var(--font-serif); font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem); line-height: 1; }
.screen__title em { color: var(--bronze-lt); }
.screen__prompt { width: min(100%, 36rem); padding: 1rem 1.1rem; border: 1px solid rgba(224,168,116,.35); border-radius: 1rem; background: rgba(255,255,255,.04); font-size: .92rem; line-height: 1.5; text-align: left; }
.screen__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.screen__chips span { padding: .4rem .8rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: #e5d6ca; font-size: .78rem; }
.screen--build, .screen--refine { gap: 1.25rem; }
.screen__chat { display: grid; gap: .75rem; align-content: start; }
.bubble { max-width: 30rem; margin: 0; padding: .8rem 1rem; border-radius: 1rem 1rem 1rem .3rem; background: rgba(255,255,255,.07); font-size: .88rem; line-height: 1.45; }
.bubble--me { justify-self: end; border-radius: 1rem 1rem .3rem 1rem; background: rgba(224,168,116,.22); }
.mini-site { position: relative; display: grid; gap: .6rem; align-content: start; min-height: 16rem; padding: 1rem; border-radius: 1rem; background: #f4eee6; color: #1f3a34; }
.mini-site__nav { display: flex; align-items: center; gap: .4rem; }
.mini-site__nav b { margin-right: auto; font-family: var(--font-serif); font-size: 1.1rem; font-style: italic; }
.mini-site__nav i { width: 2.2rem; height: .35rem; border-radius: 999px; background: rgba(31,58,52,.25); }
.mini-site__hero { display: grid; gap: .7rem; padding: 1.5rem 1.1rem; border-radius: .8rem; background: #1f3a34; color: #f4efe6; transition: background .8s ease; }
.mini-site__hero b { max-width: 14ch; font-family: var(--font-serif); font-size: 1.6rem; font-weight: 400; line-height: 1.05; }
.mini-site__hero i { width: 6rem; height: 1.6rem; border-radius: 999px; background: #c9a46b; }
.mini-site__row { display: flex; gap: .45rem; }
.mini-site__row i { height: 4.5rem; flex: 1; border-radius: .7rem; background: rgba(31,58,52,.12); }
.mini-site--building .mini-site__row i { animation: lv-shimmer 1.4s ease-in-out infinite; }
.mini-site--building .mini-site__row i:nth-child(2) { animation-delay: .15s; }
.mini-site--building .mini-site__row i:nth-child(3) { animation-delay: .3s; }
@keyframes lv-shimmer { 50% { opacity: .35; } }
.mini-site--dark .mini-site__hero { background: #10201d; outline: 2px solid var(--bronze-lt); outline-offset: 3px; }
.mini-site__pointer { position: absolute; top: 5.5rem; right: 18%; width: 1.4rem; height: 1.4rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3l7 17 2.5-7L21 10.5z' fill='%23fff' stroke='%231b1512' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; animation: lv-point 2.4s var(--ease) infinite; }
@keyframes lv-point { 0% { transform: translate(2rem, 2rem); } 40%, 100% { transform: none; } }
.screen--live { place-items: center; min-height: 22rem; }
.screen__domain { display: grid; gap: .8rem; width: min(100%, 26rem); padding: 1.5rem; border: 1px solid rgba(255,255,255,.12); border-radius: 1.2rem; background: rgba(255,255,255,.04); }
.screen__domain-label { margin: 0; color: var(--mute); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.screen__domain-field { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: .85rem 1rem; border: 1px solid rgba(224,168,116,.4); border-radius: .8rem; font-weight: 600; }
.screen__domain-field span { color: #5fd38d; font-size: .75rem; font-weight: 600; }
.screen__go { display: grid; place-items: center; min-height: 3rem; border-radius: 999px; background: linear-gradient(135deg, #f0c08a, var(--bronze)); color: #1d130b; font-weight: 650; }
.screen__live { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: 0; color: #a8e6c0; font-size: .85rem; animation: lv-screen .6s var(--ease-out) .9s backwards; }
.screen__live i { width: .55rem; height: .55rem; border-radius: 50%; background: #5fd38d; animation: lv-live 2s infinite; }
@media (min-width: 48rem) {
  .app-frame__body { grid-template-columns: 13rem 1fr; min-height: 30rem; }
  .app-frame__side { display: grid; gap: .3rem; align-content: start; padding: 1.25rem 1rem; border-right: 1px solid var(--line); background: #241b16; }
  .app-frame__brand { display: grid; margin: 0 0 1rem; font-family: var(--font-serif); font-size: 1.6rem; line-height: 1; }
  .app-frame__brand small { margin-top: .3rem; color: var(--mute); font-family: var(--font-sans); font-size: .62rem; letter-spacing: .04em; }
  .app-frame__new { margin-bottom: .6rem; padding: .6rem .8rem; border-radius: .7rem; background: var(--bronze); color: #1d130b; font-size: .8rem; font-weight: 650; }
  .app-frame__nav { padding: .55rem .8rem; border-radius: .6rem; color: #cdbdb0; font-size: .82rem; }
  .app-frame__nav.is-on { background: rgba(255,255,255,.07); color: #fff; }
  .screen--build, .screen--refine { grid-template-columns: .9fr 1.1fr; align-items: start; }
}

.quality { position: relative; isolation: isolate; padding-block: clamp(5rem, 11vw, 10rem); overflow: hidden; background: var(--ink); color: var(--paper); }
.quality__glow { position: absolute; z-index: -1; top: -30%; left: -15%; width: min(50rem, 90%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(192,138,82,.28), transparent 65%); filter: blur(30px); }
.quality__grid { display: grid; gap: 2.5rem; }
.quality h2 { max-width: 12ch; margin: 0; font-size: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); }
.quality__lead { max-width: 40ch; margin: 0 0 2rem; color: #cdbdb0; font-size: var(--text-lg); }
.quality__points { display: grid; padding: 0; margin: 0; list-style: none; }
.quality__points li { display: grid; gap: .25rem; padding-block: 1.1rem; border-top: 1px solid var(--line); }
.quality__points li:last-child { border-bottom: 1px solid var(--line); }
.quality__points strong { font-size: 1.1rem; letter-spacing: -.02em; }
.quality__points span { color: var(--mute); font-size: var(--text-sm); }
@media (min-width: 64rem) { .quality__grid { grid-template-columns: 1fr 1fr; align-items: start; gap: 5rem; } }

.compare { padding-block: clamp(5rem, 10vw, 9rem); background: var(--paper); color: var(--ink); }
.compare__head { margin-bottom: 2.5rem; }
.compare__head h2 { max-width: 13ch; font-size: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); }
.compare__lead { max-width: 46ch; color: var(--mute-dark); font-size: var(--text-lg); }
.compare__table { display: grid; gap: .6rem; }
.compare__row--head { display: none; }
.compare__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; padding: 1rem; border: 1px solid var(--line-dark); border-radius: 1.1rem; background: #fffaf4; }
.compare__label { grid-column: 1 / -1; margin-bottom: .4rem; font-weight: 650; letter-spacing: -.01em; }
.compare__cell { display: grid; justify-items: center; gap: .3rem; padding: .55rem .25rem; border-radius: .7rem; background: rgba(27,21,18,.04); color: var(--mute-dark); font-size: .72rem; text-align: center; }
.compare__cell::before { content: attr(data-col); color: var(--ink); font-size: .68rem; font-weight: 650; }
.compare__cell i { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: center / 70% no-repeat; }
.compare__cell--yes i { background-color: #2b6b4a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5'/%3E%3C/svg%3E"); }
.compare__cell--no i { background-color: rgba(27,21,18,.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2366594f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 5l6 6M11 5l-6 6'/%3E%3C/svg%3E"); }
.compare__cell--some i { background-color: rgba(192,138,82,.25); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239a6534' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4.5 8h7'/%3E%3C/svg%3E"); }
.compare__cell.compare__col--us { background: var(--ink); color: var(--paper); }
.compare__cell.compare__col--us::before { color: var(--bronze-lt); }
@media (min-width: 48rem) {
  .compare__table { gap: 0; overflow: hidden; border: 1px solid var(--line-dark); border-radius: 1.4rem; background: #fffaf4; }
  .compare__row, .compare__row--head { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 0; align-items: center; padding: 0; border: 0; border-top: 1px solid var(--line-dark); border-radius: 0; background: transparent; }
  .compare__row--head { border-top: 0; }
  .compare__label { grid-column: auto; margin: 0; padding: 1.1rem 1.4rem; }
  .compare__col { padding: 1.1rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-align: center; text-transform: uppercase; color: var(--mute-dark); }
  .compare__col.compare__col--us { align-self: stretch; display: grid; place-items: center; background: var(--ink); color: var(--bronze-lt); }
  .compare__cell { align-self: stretch; align-content: center; padding: 1rem; border-radius: 0; background: transparent; font-size: .8rem; }
  .compare__cell::before { display: none; }
}

.demo-rail { padding-block: clamp(5rem, 10vw, 9rem); overflow: hidden; background: var(--ink); color: var(--paper); }
.demo-rail__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2.5rem; }
.demo-rail__head h2 { max-width: 14ch; margin: 0; font-size: clamp(2.4rem, 1.5rem + 3.6vw, 5rem); }
.demo-rail__track { display: flex; gap: 1rem; padding: .5rem var(--gutter) 1.5rem; margin: 0; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.demo-rail__track::-webkit-scrollbar { display: none; }
.demo-rail__track li { flex: none; width: min(80vw, 26rem); scroll-snap-align: start; }
.demo-tile { display: grid; gap: .7rem; padding: .6rem .6rem 1.1rem; border: 1px solid var(--line); border-radius: 1.3rem; background: #221a15; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease), border-color .3s ease; }
.demo-tile.is-tilting { transition: transform .1s linear; }
.demo-tile:hover { border-color: color-mix(in srgb, var(--demo-accent) 60%, transparent); }
.demo-tile__shot { overflow: hidden; aspect-ratio: 16 / 10; border-radius: .9rem; }
.demo-tile__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.demo-tile:hover .demo-tile__shot img { transform: scale(1.04); }
.demo-tile__line { display: flex; align-items: center; gap: .5rem; padding-inline: .5rem; color: var(--mute); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.demo-tile__line i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--demo-accent); }
.demo-tile__name { padding-inline: .5rem; font-size: 1.5rem; font-weight: 650; letter-spacing: -.04em; }

.bespoke { padding-block: clamp(5rem, 10vw, 8rem); background: var(--paper); color: var(--ink); }
.bespoke__inner { display: grid; gap: 1.5rem; }
.bespoke h2 { max-width: 12ch; margin: 0; font-size: clamp(2.4rem, 1.5rem + 3.6vw, 5rem); }
.bespoke__lead { max-width: 40ch; color: var(--mute-dark); font-size: var(--text-lg); }
@media (min-width: 64rem) { .bespoke__inner { grid-template-columns: 1fr 1fr; align-items: end; gap: 4rem; } }
.atelier-hero2 h1 { max-width: 12ch; font-size: clamp(3rem, 1.3rem + 5.6vw, 7.4rem); }
.atelier-hero2 .studio__body { grid-template-columns: 1fr; }
.atelier-hero2 .studio__chat { border-right: 0; border-bottom: 1px solid var(--line); }
.atelier-hero2 .studio__preview { min-height: 13rem; }
@media (min-width: 80rem) {
  .atelier-hero2 .studio__body { grid-template-columns: 1fr 1.1fr; }
  .atelier-hero2 .studio__chat { border-right: 1px solid var(--line); border-bottom: 0; }
  .atelier-hero2 .studio__preview { min-height: 21rem; }
}
.demo-rail__lead { max-width: 36ch; margin: 0; color: var(--mute); }
.demo-tile { align-content: start; }
.demo-tile__name { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.demo-tile__name .arrow { color: var(--mute); transform: rotate(-45deg); transition: color .3s ease, transform .4s var(--ease); }
.demo-tile:hover .demo-tile__name .arrow { color: var(--demo-accent); transform: rotate(-45deg) translateX(.2rem); }
.demo-tile__lead { padding-inline: .5rem; color: #cdbdb0; font-size: .85rem; line-height: 1.45; }
.demo-tile__credit { padding-inline: .5rem; color: var(--mute); font-size: .7rem; }
.demo-tile[id] { scroll-margin-top: 8rem; }

/* ---- rails: swipe hint, progress, arrows ------------------------------- */
[data-rail] ul { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 4rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 4rem), transparent); transition: -webkit-mask-image .3s ease; }
[data-rail].is-end ul, [data-rail].rail-fits ul { -webkit-mask-image: none; mask-image: none; }
.rail-ui { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; }
.rail-fits .rail-ui { display: none; }
.rail-ui__hint { display: inline-flex; flex: none; align-items: center; gap: .45rem; color: currentColor; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .7; transition: opacity .5s ease; }
.rail-ui__hint svg { width: 1.3rem; height: 1.3rem; animation: lv-swipe 1.8s var(--ease) infinite; }
.has-scrolled .rail-ui__hint { opacity: .35; }
.has-scrolled .rail-ui__hint svg { animation: none; }
@keyframes lv-swipe { 0%, 100% { transform: translateX(.35rem) rotate(8deg); } 50% { transform: translateX(-.45rem) rotate(-6deg); } }
.rail-ui__bar { position: relative; flex: 1; height: 2px; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, currentColor 15%, transparent); }
.rail-ui__bar span { position: absolute; left: 0; top: 0; height: 100%; width: 30%; border-radius: 2px; background: var(--branch, var(--bronze-lt)); transition: transform .15s linear; }
.rail-ui__buttons { display: none; gap: .4rem; }
.rail-ui__btn { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background .25s ease, opacity .25s ease; }
.rail-ui__btn svg { width: 1.1rem; height: 1.1rem; }
.rail-ui__btn:hover:not(:disabled) { background: color-mix(in srgb, currentColor 12%, transparent); }
.rail-ui__btn:disabled { opacity: .3; cursor: default; }
.app-section--poise .rail-ui__bar span { background: #c9827a; }
@media (hover: hover) and (pointer: fine) {
  .rail-ui__buttons { display: flex; }
  .rail-ui__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rail-ui__hint svg { animation: none; } }