/* =========================================================================
   The Scale Studio — design system (v3, follows the brand reel)
   One family: Manrope · cream / espresso / gold · reel headline device
   A single gold branch grows through every page.
   ========================================================================= */

@property --bg { syntax: '<color>'; inherits: true; initial-value: #fdf4e6; }
@property --fg { syntax: '<color>'; inherits: true; initial-value: #211c16; }
@property --branch { syntax: '<color>'; inherits: true; initial-value: #c99032; }

:root {
  --cream: #fdf4e6;
  --espresso: #211c16;
  --night: #1a1511;
  --black: #0b0907;
  --gold: #e7b04d;
  --gold-hi: #f0c77a;
  --gold-lo: #b9822a;
  --ink: #211c16;
  --f: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 2.6vw, 40px);
  --rail-gap: clamp(24px, 3.6vw, 60px);
  --gap: clamp(12px, 1.6vw, 24px);
  --max: 1600px;
  --hdr-h: 76px;
  --sec: clamp(104px, 12vw, 200px);
  --r: clamp(16px, 1.6vw, 26px);
  --fs-xl: clamp(2.6rem, 6.2vw, 7rem);
  --fs-l: clamp(2.1rem, 4.6vw, 4.75rem);
  --fs-m: clamp(1.6rem, 2.9vw, 3rem);
  --fs-s: clamp(1.2rem, 1.5vw, 1.5rem);
  --fs-lg: clamp(1.0625rem, 1.25vw, 1.3rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.87, 0, 0.13, 1);
  --K: 0.5543; /* tan(29°) — the angle of the logo's bars, used by every diagonal */
}

body {
  --accent: var(--gold);
  --accent-ink: var(--espresso);
  --bg: var(--cream);
  --fg: var(--espresso);
  --branch: var(--gold-lo);
  --gold-hl: var(--gold-lo);
  --fg-2: color-mix(in srgb, var(--fg) 68%, transparent);
  --fg-3: color-mix(in srgb, var(--fg) 65%, transparent);
  --line: color-mix(in srgb, var(--fg) 13%, transparent);
}
body[data-theme="dark"] { --bg: var(--night); --fg: var(--cream); --branch: var(--gold-hi); --gold-hl: var(--gold-hi); }
body[data-theme="accent"] { --bg: var(--accent); --fg: var(--accent-ink); --branch: var(--accent-ink); --gold-hl: var(--accent-ink); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--night); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg); color: var(--fg);
  font-family: var(--f); font-size: 1rem; line-height: 1.6; font-weight: 450;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: --bg 0.9s var(--ease), --fg 0.9s var(--ease), --branch 0.9s var(--ease);
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure { margin: 0; }
b, strong { font-weight: 800; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--gold); color: var(--espresso); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.skip { position: fixed; left: 12px; top: -64px; z-index: 999; background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 8px; transition: top 0.2s; }
.skip:focus { top: 12px; }
html:not(.js) [data-bg="dark"] { background: var(--night); color: var(--cream); }
html:not(.js) [data-bg="accent"] { background: var(--accent); color: var(--accent-ink); }

/* ---------- type: one family, a handful of sizes ---------- */
.hl { font-size: var(--fs-l); line-height: 0.95; margin: 0; font-weight: 400; }
.hl--xl { font-size: var(--fs-xl); line-height: 0.92; }
.hl--m { font-size: var(--fs-m); line-height: 1; }
.hl__a { display: block; font-weight: 400; letter-spacing: -0.04em; }
.hl__b { display: block; font-weight: 800; letter-spacing: -0.05em; text-transform: uppercase; }
.hl--gold .hl__b { color: var(--gold-hl); }
.t-lg { font-size: var(--fs-lg); line-height: 1.45; letter-spacing: -0.01em; font-weight: 450; }
.t-label { font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }
.klabel { color: var(--fg-2); margin-bottom: clamp(18px, 2.4vw, 32px); transition: color 0.6s; }
.klabel.is-reached { color: var(--branch); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.tree { position: relative; }
.tree .wrap { padding-left: calc(var(--gutter) + var(--rail-gap)); }
.tree > section, .tree > a, .tree > div { position: relative; z-index: 2; }
.rail-probe, .tree__start { position: absolute; top: 0; left: calc(max(0px, (100% - var(--max)) / 2) + var(--gutter)); width: 1px; height: 1px; pointer-events: none; }
.tree__start { top: calc(var(--hdr-h) + 8px); }

/* ---------- the branch ---------- */
.branch { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; overflow: visible; }
.branch path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.branch .b-guide { stroke: var(--line); stroke-width: 1; }
.branch .b-line { stroke: var(--branch); stroke-width: 1.6; }
.branch .b-twig { stroke: var(--branch); stroke-width: 1.2; }
.branch .b-twig.has-accent { stroke: color-mix(in srgb, var(--tw) 78%, var(--fg)); }
.branch .b-node { fill: var(--bg); stroke: var(--branch); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.7s var(--ease), fill 0.4s; }
.branch .b-node.is-on { transform: scale(1); fill: var(--branch); }
.branch .b-tip { fill: var(--branch); }
.branch .b-halo { fill: var(--branch); opacity: 0.18; transform-box: fill-box; transform-origin: center; animation: halo 1.8s var(--ease) infinite; }
.branch .b-end { fill: none; stroke: var(--branch); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
@keyframes halo { 0% { transform: scale(0.6); opacity: 0.32; } 100% { transform: scale(2.2); opacity: 0; } }

/* rolling label + underline links */
.roll { position: relative; display: inline-block; overflow: hidden; line-height: 1.25; vertical-align: top; }
.roll > span { display: block; transition: transform 0.6s var(--ease); }
.roll::after { content: attr(data-text); position: absolute; left: 0; top: 100%; transition: transform 0.6s var(--ease); }
a:hover > .roll > span, a:hover > .roll::after, button:hover > .roll > span, button:hover > .roll::after { transform: translateY(-100%); }
.rlink { display: inline-block; font-weight: 600; }
.ul { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size 0.6s var(--ease); padding-bottom: 2px; }
.ul:hover { background-size: 0 1px; background-position: 100% 100%; }
.ul .arr, .end__ig .arr { display: inline-block; vertical-align: -0.12em; }

/* reveal initial states (JS only) */
.js [data-fade] { opacity: 0; visibility: hidden; transform: translateY(26px); }
.js [data-split], .js [data-lines], .js [data-hero-title] { visibility: hidden; }
.ln { display: block; overflow: clip; overflow-clip-margin: 0.12em; padding-bottom: 0.05em; margin-bottom: -0.05em; }
.sl { padding-bottom: 0.05em; margin-bottom: -0.05em; }

/* ---------- buttons ---------- */
.btn {
  --b-bg: var(--fg); --b-fg: var(--bg);
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  height: 54px; padding: 0 22px 0 26px; border-radius: 99px;
  background: var(--b-bg); color: var(--b-fg); font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.005em;
  overflow: hidden; isolation: isolate; white-space: nowrap; will-change: transform; transition: color 0.5s var(--ease);
}
.btn__fill { position: absolute; inset: 0; z-index: -1; background: var(--gold); border-radius: inherit; transform: translateY(102%); transition: transform 0.6s var(--ease); }
.btn:hover .btn__fill { transform: none; }
.btn:hover { color: var(--espresso); }
.btn .arr { transition: transform 0.6s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn--sm { height: 42px; padding: 0 16px 0 20px; font-size: 0.875rem; gap: 10px; }
.btn--gold { --b-bg: var(--gold); --b-fg: var(--espresso); }
.btn--gold .btn__fill { background: var(--cream); }
.btn--inv { --b-bg: var(--accent-ink); --b-fg: var(--accent); }
.btn--inv .btn__fill { background: var(--cream); }
.btn--inv:hover { color: var(--espresso); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); color: var(--fg-2); cursor: pointer; user-select: none; transition: color 0.4s, background 0.4s, box-shadow 0.4s; }
.chip:hover { color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.chip.is-on { background: var(--fg); color: var(--bg); box-shadow: none; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
label.chip:has(input:checked) { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
label.chip:has(input:focus-visible) { outline: 2px solid var(--fg); outline-offset: 3px; }

/* ---------- loader (1.5s — the reel's logo animation) ---------- */
.loader { position: fixed; inset: 0; z-index: 400; display: none; pointer-events: none; animation: loaderFailsafe 0.01s 6s forwards; }
.is-loading .loader, .loader.is-active { display: block; }
.is-loading body { overflow: hidden; }
.loader__bg { position: absolute; inset: 0; background: var(--black); }
.loader__streaks { position: absolute; left: 50%; top: 50%; width: 170vmax; height: 0; transform: translate(-50%, -50%) rotate(-29deg); }
.loader__streaks i { position: absolute; left: 0; right: 0; background: var(--gold-hi); clip-path: inset(0 100% 0 0); }
.loader__s1 { top: 9vmin; height: max(5px, 0.7vmin); }
.loader__s2 { top: calc(9vmin + max(18px, 2.6vmin)); height: 1.5px; opacity: 0.85; }
.loader__lockup { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: clamp(12px, 1.4vw, 20px); transform: translate(-50%, -50%); }
.loader__markwrap { position: relative; width: clamp(64px, 7vw, 96px); flex: none; }
.loader__mark { width: 100%; height: auto; overflow: visible; }
.lm-ring { fill: none; stroke: rgba(240, 199, 122, 0.55); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.lm-line path { fill: none; stroke: var(--gold-hi); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.lm-fill { opacity: 0; }
.loader__ripple { position: absolute; left: 50%; top: 50%; width: 260%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(240, 199, 122, 0.5); transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
.loader__word { font-size: clamp(1.75rem, 3.4vw, 3rem); color: var(--cream); white-space: nowrap; clip-path: inset(0 100% 0 0); }
@keyframes loaderFailsafe { to { opacity: 0; visibility: hidden; } }

/* wordmark (header, footer, loader) */
.wm { letter-spacing: -0.035em; font-weight: 500; }
.wm b { font-weight: 800; }

/* ---------- page transition (always the same direction: upward) ---------- */
.pt { position: fixed; inset: 0; z-index: 380; pointer-events: none; visibility: hidden; overflow: hidden; }
.pt__band { position: absolute; left: -25%; right: -25%; top: 50%; height: 26vmax; background: var(--gold); transform: translateY(80vh) rotate(-29deg); }
.pt__panel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: var(--night); color: var(--cream); transform: translateY(100%); }
.pt__mark { width: 40px; height: auto; }
.pt__label { font-size: var(--fs-l); font-weight: 800; letter-spacing: -0.05em; text-transform: uppercase; line-height: 1; }
.pt-in .pt { visibility: visible; }
.pt-in .pt__panel { transform: none; }

/* ---------- cursor + grain ---------- */
.cdot, .clabel { position: fixed; left: 0; top: 0; z-index: 500; pointer-events: none; display: none; }
.has-cursor .cdot, .has-cursor .clabel { display: block; }
.cdot { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; mix-blend-mode: difference; opacity: 0; transition: width 0.4s var(--ease), height 0.4s var(--ease), margin 0.4s var(--ease), opacity 0.3s; }
.cdot.is-on { opacity: 1; }
.cur-link .cdot { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.cur-label .cdot { opacity: 0; }
.clabel { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
.clabel > span { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--espresso); transform: scale(0); transition: transform 0.5s var(--ease); }
.cur-label .clabel > span { transform: scale(1); }
.has-cursor body, .has-cursor a, .has-cursor button, .has-cursor summary { cursor: none; }
.has-cursor input, .has-cursor textarea, .has-cursor select, .has-cursor label { cursor: auto; }
.grain { position: fixed; inset: -50%; z-index: 300; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: grain 0.9s steps(3) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--hdr-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-inline: var(--gutter); color: var(--fg); transition: transform 0.7s var(--ease), background-color 0.5s, box-shadow 0.5s; }
.hdr.is-solid { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--line); }
.hdr.is-hidden { transform: translateY(-101%); }
.hdr__logo { display: inline-flex; align-items: center; gap: 10px; font-size: 1.125rem; justify-self: start; }
.hdr__logo .mark { width: 22px; height: auto; transition: transform 0.8s var(--ease); }
.hdr__logo:hover .mark { transform: rotate(-14deg) scale(1.08); }
.hdr__nav { display: flex; gap: clamp(22px, 2.6vw, 40px); font-size: 0.9375rem; }
.hdr__nav a { position: relative; color: var(--fg-2); transition: color 0.4s; }
.hdr__nav a:hover, .hdr__nav a[aria-current] { color: var(--fg); }
.hdr__nav a[aria-current]::before { content: ""; position: absolute; left: -12px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--gold); }
.hdr__right { justify-self: end; display: flex; align-items: center; gap: 14px; }
.hdr__menu { display: none; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); position: relative; }
.hdr__menu i { position: absolute; left: 14px; right: 14px; height: 1.5px; background: currentColor; transition: transform 0.5s var(--ease), top 0.5s var(--ease); }
.hdr__menu i:first-child { top: 18px; } .hdr__menu i:last-child { top: 25px; }
.hdr__menu[aria-expanded="true"] i:first-child { top: 21px; transform: rotate(45deg); }
.hdr__menu[aria-expanded="true"] i:last-child { top: 21px; transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column; justify-content: flex-end; gap: 32px; padding: calc(var(--hdr-h) + 24px) var(--gutter) 28px; background: var(--night); color: var(--cream); }
.menu[hidden] { display: none; }
.menu__main li { overflow: hidden; border-bottom: 1px solid rgba(253, 244, 230, 0.14); }
.menu__main a { display: flex; align-items: baseline; gap: 14px; padding-block: 6px; font-size: clamp(2.6rem, 12vw, 4.2rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.05em; line-height: 1.05; }
.menu__main a span { color: var(--gold-hi); letter-spacing: 0.14em; }
.menu__foot { display: flex; flex-direction: column; gap: 8px; color: rgba(253, 244, 230, 0.6); }
.menu-open .hdr { color: var(--cream); background: transparent; box-shadow: none; backdrop-filter: none; }

/* ---------- WhatsApp ---------- */
.wa { position: fixed; right: var(--gutter); bottom: 20px; z-index: 90; display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px; border-radius: 99px; background: var(--fg); color: var(--bg); transition: transform 0.5s var(--ease); }
.wa:hover { transform: translateY(-3px); }
.wa__dot { width: 8px; height: 8px; border-radius: 50%; background: #25d366; animation: pulse 2.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); } 70% { box-shadow: 0 0 0 9px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }

/* =========================================================================
   HOME
   ========================================================================= */
.hero { min-height: 100svh; overflow: hidden; }
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero__wrap { position: relative; z-index: 2; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--hdr-h) + 24px); padding-bottom: 96px; pointer-events: none; }
.hero__wrap a, .hero__wrap button { pointer-events: auto; }
.hero__main { max-width: min(56%, 52rem); }
.hero__title { font-size: clamp(2.6rem, 4.9vw, 5.6rem); }
.hero__sub { margin-top: clamp(20px, 2.4vw, 32px); color: var(--fg-2); max-width: 30ch; }
.hero__ctas { margin-top: clamp(24px, 3vw, 40px); display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero__scroll { position: absolute; left: calc(var(--gutter) + var(--rail-gap)); bottom: 36px; display: inline-flex; align-items: center; gap: 12px; color: var(--fg-2); }
.hero__scroll-line { position: relative; width: 44px; height: 1px; background: var(--line); overflow: hidden; }
.hero__scroll-line::after { content: ""; position: absolute; inset: 0; background: var(--gold-hi); animation: scrollcue 2s var(--ease-io) infinite; }
@keyframes scrollcue { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
.js [data-hero-in] { opacity: 0; visibility: hidden; transform: translateY(16px); }

.idea { padding-block: var(--sec); }
.idea__p { margin-top: clamp(24px, 3vw, 40px); max-width: 34ch; color: var(--fg-2); }

/* story: scattered → structured → scaled */
.story__pin { height: 100svh; display: flex; align-items: center; padding-top: var(--hdr-h); overflow: hidden; }
.story__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: center; }
.story__states { position: relative; min-height: 15rem; }
.story__state { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(28px); transition: opacity 0.6s var(--ease), transform 0.9s var(--ease); pointer-events: none; }
.story__state.is-on { opacity: 1; transform: none; }
.story__k { color: var(--fg-3); margin-bottom: 14px; }
.story__p { margin-top: 18px; max-width: 26ch; color: var(--fg-2); }
.story__prog { display: flex; gap: 8px; margin-top: 12px; }
.story__prog i { position: relative; width: 56px; height: 2px; background: var(--line); overflow: hidden; }
.story__prog b { position: absolute; inset: 0; background: var(--fg); transform: scaleX(0); transform-origin: left; }
.story__stage { position: relative; height: min(68svh, 640px); --s: 60px; }
.blk { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); border-radius: calc(var(--s) * 0.16); background: var(--espresso); will-change: transform; }
.story__labels { position: absolute; inset: auto 0 0 0; height: 24px; }
.story__labels span { position: absolute; bottom: 0; transform: translateX(-50%); color: var(--fg-2); opacity: 0; white-space: nowrap; }
.story.is-static .story__state { position: static; opacity: 1; transform: none; margin-bottom: 28px; }
.story.is-static .story__states { min-height: 0; }
.story.is-static .story__labels span { opacity: 1; }

/* services: six branches + sticky stage */
.branches { padding-top: var(--sec); }
.branches__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 80px); margin-top: clamp(24px, 4vw, 56px); }
.brow { min-height: 72svh; display: flex; flex-direction: column; justify-content: center; opacity: 0.28; transition: opacity 0.7s var(--ease); }
.brow.is-active { opacity: 1; }
.brow__a { display: block; padding-block: 24px; }
.brow__k { display: block; color: var(--fg-2); margin-bottom: 18px; }
.brow__hl .hl__b { transition: color 0.6s var(--ease); }
.brow.is-active .brow__hl .hl__b { color: color-mix(in srgb, var(--accent) 70%, var(--cream)); }
.brow__tag { display: block; margin-top: 18px; font-size: var(--fs-lg); color: var(--fg-2); }
.brow__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; color: var(--fg); }
.brow__more .arr { transition: transform 0.6s var(--ease); }
.brow__a:hover .brow__more .arr { transform: translateX(6px); }
.brow__viz { display: none; }
.branches__stage { position: relative; }
.bstage { position: sticky; top: calc(50svh - min(40svh, 300px)); height: min(80svh, 600px); border-radius: var(--r); overflow: hidden; background: rgba(253, 244, 230, 0.04); }
.bstage__item { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; padding: clamp(16px, 3vw, 44px); background: var(--accent); clip-path: circle(0% at 12% 88%); transition: clip-path 1.1s var(--ease); }
.bstage__item.is-under { z-index: 1; clip-path: circle(150% at 12% 88%); transition: none; }
.bstage__item.is-on { z-index: 2; clip-path: circle(150% at 12% 88%); }
.bstage__item .viz { width: 100%; }
.bstage__count { position: absolute; left: 20px; bottom: 16px; z-index: 3; color: var(--espresso); background: rgba(253, 244, 230, 0.86); padding: 6px 12px; border-radius: 99px; font-variant-numeric: tabular-nums; }

/* process: growth rings */
.rings { padding-block: var(--sec); }
.rings__list { margin-top: clamp(40px, 5vw, 80px); }
.ring { display: grid; grid-template-columns: 56px minmax(0, auto) minmax(0, 1fr); column-gap: clamp(16px, 3vw, 48px); align-items: center; padding-block: clamp(20px, 2.8vw, 40px); border-top: 1px solid var(--line); }
.ring:last-child { border-bottom: 1px solid var(--line); }
.ring__n { color: var(--fg-3); }
.ring__w, .law__w { font-size: var(--fs-l); line-height: 1; font-weight: 800; letter-spacing: -0.05em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px var(--fg-3); background-image: linear-gradient(90deg, var(--fg) 0 50%, transparent 50% 100%); background-size: 200% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; }
.ring__d, .law__d { color: var(--fg-2); max-width: 30ch; justify-self: end; text-align: right; }

/* selected work */
.work-h { padding-block: var(--sec); }
.wlist { margin-top: clamp(40px, 5vw, 80px); border-top: 1px solid var(--line); }
.wrow { border-bottom: 1px solid var(--line); transition: opacity 0.5s; }
.wrow a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: var(--gap); align-items: baseline; padding-block: clamp(20px, 2.4vw, 34px); transition: transform 0.7s var(--ease); }
.wrow__n { color: var(--fg-3); }
.wrow__t { font-size: var(--fs-m); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; }
.wrow__tag { color: var(--fg-2); }
.wlist:hover .wrow { opacity: 0.3; }
.wlist .wrow:hover { opacity: 1; }
.wrow:hover a { transform: translateX(14px); }
.wlist__note { margin-top: 24px; color: var(--fg-3); }
.wpreview { position: fixed; left: 0; top: 0; z-index: 60; width: clamp(240px, 22vw, 360px); aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; pointer-events: none; opacity: 0; transform: scale(0.85); will-change: transform, opacity; }
.wpreview__art { position: absolute; inset: 0; background: var(--espresso); transition: background 0.5s; }
.wpreview__k { position: absolute; left: 14px; top: 12px; background: rgba(253, 244, 230, 0.92); color: var(--espresso); padding: 5px 9px; border-radius: 99px; }

/* everything under one roof — the branch draws the house */
.roof { padding-block: var(--sec); }
.roof__house { position: relative; width: min(880px, 100%); margin: calc((50vw - var(--gutter)) * var(--K) + 32px) auto 0; padding-top: calc(min(880px, 100%) / 2 * var(--K) + 28px); padding-bottom: 28px; }
.roof__rooms { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(56px, 10vw, 140px); padding-inline: clamp(16px, 3vw, 40px); }
.roof__col { display: grid; gap: 12px; }
.tile { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; background: color-mix(in srgb, var(--fg) 4%, transparent); box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; letter-spacing: -0.02em; opacity: 0; transform: translateY(14px) scale(0.96); transition: opacity 0.7s var(--ease), transform 0.8s var(--ease), background 0.4s, color 0.4s; }
.tile i { width: 12px; height: 12px; border-radius: 4px; background: var(--accent); transform: rotate(-29deg); }
.tile:hover { background: var(--accent); color: var(--accent-ink); }
.tile:hover i { background: var(--accent-ink); }
.roof__house.is-built .tile { opacity: 1; transform: none; }
.roof__house.is-built .roof__col:last-child .tile { transition-delay: 0.15s; }
.roof__laws { margin-top: clamp(48px, 6vw, 96px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.roof__laws li { border-top: 1px solid var(--line); padding-top: 18px; display: grid; gap: 6px; }
.roof__laws b { font-size: var(--fs-s); font-weight: 800; letter-spacing: -0.03em; }
.roof__laws span { color: var(--fg-2); }

/* CTA — the branch ends here */
.cta { padding-block: var(--sec); }
.cta__go { display: flex; justify-content: flex-end; margin-top: clamp(20px, 3vw, 48px); }
.cta__round { position: relative; flex: none; width: clamp(128px, 13vw, 196px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--espresso); isolation: isolate; }
.cta__round::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--cream); transform: scale(0); transition: transform 0.7s var(--ease); }
.cta__round:hover::before { transform: scale(1); }
.cta__ring { position: absolute; inset: -14px; border-radius: 50%; border: 1px solid var(--gold-hi); opacity: 0; transform: scale(0.8); }
.cta__round.is-reached .cta__ring { animation: ring 2.4s var(--ease) infinite; }
@keyframes ring { 0% { opacity: 0.7; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.5); } }
.cta__round-in { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cta__round-in .arr { font-size: 1.5rem; transition: transform 0.6s var(--ease); }
.cta__round:hover .arr { transform: rotate(-45deg); }
.cta__row { margin-top: clamp(48px, 6vw, 96px); padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px clamp(24px, 4vw, 64px); font-size: var(--fs-lg); font-weight: 600; }

/* footer */
.ftr { position: relative; z-index: 2; background: var(--black); color: var(--cream); padding-top: clamp(72px, 8vw, 128px); border-top: 1px solid rgba(253, 244, 230, 0.1); overflow: hidden; }
.ftr__grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 0.8fr); gap: 40px var(--gap); }
.ftr__k { color: var(--gold); margin-bottom: 18px; }
.ftr__mail { display: inline-block; font-size: clamp(1.6rem, 3.4vw, 3.25rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; transition: color 0.4s; }
.ftr__mail:hover { color: var(--gold-hi); }
.ftr__tel { display: block; margin-top: 12px; font-size: var(--fs-lg); font-weight: 500; color: rgba(253, 244, 230, 0.7); }
.ftr ul li { margin-bottom: 8px; }
.ftr ul a { color: rgba(253, 244, 230, 0.72); transition: color 0.4s; }
.ftr ul a:hover { color: var(--cream); }
.ftr__wordwrap { margin-top: clamp(56px, 8vw, 120px); overflow: hidden; }
.ftr__word { width: 100%; height: auto; overflow: visible; }
.ftr__word text { font-family: var(--f); font-size: 150px; font-weight: 800; letter-spacing: -0.06em; }
.ftr__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 22px 28px; margin-top: 14px; border-top: 1px solid rgba(253, 244, 230, 0.12); color: rgba(253, 244, 230, 0.55); }
.ftr__bottom a { padding-right: 150px; }
.ftr__bottom a:hover { color: var(--cream); }

/* =========================================================================
   INNER PAGES
   ========================================================================= */
.phero { padding-top: calc(var(--hdr-h) + clamp(56px, 9vw, 150px)); padding-bottom: clamp(56px, 7vw, 112px); }
.phero__foot { margin-top: clamp(32px, 4vw, 64px); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.phero__lede { color: var(--fg-2); max-width: 44ch; }

.slist { padding-bottom: var(--sec); }
.srow { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1.2fr) minmax(0, 1fr) 40px; column-gap: var(--gap); align-items: center; padding: clamp(22px, 2.8vw, 40px) 0; border-top: 1px solid var(--line); overflow: hidden; transition: color 0.5s, padding 0.7s var(--ease); }
.srow:last-child { border-bottom: 1px solid var(--line); }
.srow__fill { position: absolute; inset: 0; background: var(--accent); clip-path: inset(100% 0 0 0); transition: clip-path 0.7s var(--ease); }
.srow > :not(.srow__fill) { position: relative; }
.srow__n { color: var(--fg-3); }
.srow__t { font-size: var(--fs-m); font-weight: 800; letter-spacing: -0.05em; text-transform: uppercase; line-height: 1; }
.srow__d { color: var(--fg-2); }
.srow__a { justify-self: end; font-size: 1.6rem; transition: transform 0.7s var(--ease); }
.srow:hover { color: var(--accent-ink); padding-inline: 20px; }
.srow:hover .srow__fill { clip-path: inset(0); }
.srow:hover .srow__n, .srow:hover .srow__d { color: inherit; }
.srow:hover .srow__a { transform: rotate(-45deg); }

.svh { min-height: 100svh; display: flex; align-items: center; padding-top: calc(var(--hdr-h) + 32px); padding-bottom: 72px; }
.svh__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.svh__k a { text-decoration: underline; text-underline-offset: 3px; }
.svh__lede { margin-top: clamp(20px, 2.4vw, 32px); max-width: 36ch; opacity: 0.8; }
.svh__cta { margin-top: 36px; }
.svh__viz { border-radius: var(--r); background: color-mix(in srgb, var(--accent-ink) 9%, transparent); padding: clamp(10px, 2vw, 28px); }

.bene { padding-block: var(--sec); }
.bene__list { margin-top: clamp(40px, 5vw, 72px); }
.bene__row { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); align-items: baseline; padding-block: clamp(20px, 2.6vw, 36px); border-top: 1px solid var(--line); }
.bene__row:last-child { border-bottom: 1px solid var(--line); }
.bene__n { color: var(--accent-deep, var(--fg-3)); }
.bene__t { font-size: var(--fs-m); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; }
.bene__d { color: var(--fg-2); max-width: 40ch; }

.incl { padding-block: var(--sec); }
.incl__p { margin-top: clamp(20px, 2.4vw, 32px); max-width: 52ch; color: var(--fg-2); }
.incl__p b { color: var(--fg); }
.incl__list { margin-top: clamp(40px, 5vw, 72px); }
.irow { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); align-items: baseline; padding-block: clamp(20px, 2.6vw, 36px); border-top: 1px solid var(--line); }
.irow:last-child { border-bottom: 1px solid var(--line); }
.irow__n { color: var(--gold-hl); }
.irow__t { font-size: var(--fs-m); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; }
.irow__d { color: var(--fg-2); max-width: 44ch; }

.extras { padding-block: var(--sec); }
.extras__chips { margin-top: clamp(32px, 4vw, 56px); max-width: 64rem; }
.extras__chips .chip { cursor: default; height: 46px; font-size: 0.8rem; }

.faq { padding-block: var(--sec); }
.faq__list { margin-top: clamp(32px, 4vw, 56px); max-width: 64rem; }
.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: clamp(18px, 2vw, 28px); cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa__q { font-size: var(--fs-s); font-weight: 700; letter-spacing: -0.02em; transition: color 0.4s; }
.qa summary:hover .qa__q { color: var(--fg-2); }
.qa__pm { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); transition: background 0.4s; }
.qa__pm::before, .qa__pm::after { content: ""; position: absolute; left: 12px; right: 12px; top: 18.5px; height: 1.5px; background: currentColor; transition: transform 0.6s var(--ease); }
.qa__pm::after { transform: rotate(90deg); }
.qa[open] .qa__pm { background: var(--gold); color: var(--espresso); box-shadow: none; }
.qa[open] .qa__pm::after { transform: rotate(0); }
.qa__a { overflow: hidden; }
.qa__a p { padding-bottom: clamp(18px, 2vw, 28px); color: var(--fg-2); max-width: 60ch; }

.next { position: relative; display: block; overflow: hidden; padding-block: clamp(80px, 10vw, 168px); border-top: 1px solid var(--line); isolation: isolate; transition: color 0.6s; }
.next__fill { position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: translateY(101%); transition: transform 0.9s var(--ease); }
.next:hover .next__fill { transform: none; }
.next:hover { color: var(--accent-ink); }
.next__hl { transition: transform 0.9s var(--ease); }
.next:hover .next__hl { transform: translateX(clamp(8px, 2vw, 32px)); }

.wgrid-sec { padding-bottom: var(--sec); }
.wgrid { display: grid; gap: clamp(64px, 9vw, 140px); }
.wcard { width: min(100%, 64%); }
.wcard:nth-child(even) { margin-left: auto; }
.wcard.is-off { display: none; }
.wcard__art { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background:
  radial-gradient(70% 90% at 85% 8%, color-mix(in srgb, var(--accent) 85%, #fff) 0%, transparent 55%),
  linear-gradient(155deg, color-mix(in srgb, var(--accent) 70%, var(--espresso)) 0%, var(--espresso) 80%); }
.wcard__art::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-29deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 36px); }
.wcard__big { position: absolute; left: 22px; bottom: 4px; color: rgba(253, 244, 230, 0.92); font-size: clamp(3.5rem, 8vw, 8rem); font-weight: 800; letter-spacing: -0.06em; line-height: 1; transition: transform 0.9s var(--ease); }
.wcard:hover .wcard__big { transform: translateY(-10px); }
.wcard__flag { position: absolute; top: 14px; left: 14px; z-index: 1; background: rgba(253, 244, 230, 0.92); color: var(--espresso); padding: 5px 10px; border-radius: 99px; }
.wcard__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-top: 16px; }
.wcard__meta h3 { font-size: var(--fs-s); font-weight: 800; letter-spacing: -0.03em; }
.wcard__meta p { color: var(--fg-3); }

.about { padding-block: var(--sec); }
.about__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.about__text { font-size: var(--fs-m); line-height: 1.15; font-weight: 600; letter-spacing: -0.035em; }
.about__text .w, .terms__p .w { opacity: 0.16; }
.founder { position: relative; padding: 16px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); }
.founder__pic { aspect-ratio: 4 / 5; margin-bottom: 16px; border-radius: calc(var(--r) * 0.7); display: grid; place-items: center; background: radial-gradient(80% 70% at 70% 20%, rgba(231, 176, 77, 0.35), transparent 60%), linear-gradient(160deg, #2b241d, var(--black)); }
.founder__pic .mark { width: 34%; height: auto; }
.founder .t-label { color: var(--fg-3); }
.founder__name { font-size: var(--fs-s); font-weight: 800; letter-spacing: -0.03em; margin-top: 4px; }
.founder__links { margin-top: 14px; color: var(--fg-2); }
.laws { padding-block: var(--sec); }
.laws__list { margin-top: clamp(40px, 5vw, 80px); }
.law { display: grid; grid-template-columns: 56px minmax(0, auto) minmax(0, 1fr); column-gap: clamp(16px, 3vw, 48px); align-items: center; padding-block: clamp(20px, 2.8vw, 40px); border-top: 1px solid var(--line); }
.law:last-child { border-bottom: 1px solid var(--line); }
.law .t-label { color: var(--fg-3); }
.law__w { font-size: var(--fs-m); }
.terms { padding-block: var(--sec); }
.terms__p { font-size: var(--fs-m); font-weight: 600; letter-spacing: -0.035em; line-height: 1.15; max-width: 30ch; }

.contact { padding-bottom: var(--sec); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--gap); }
.field { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field--wide { grid-column: 1 / -1; }
.field > label, .field > legend { color: var(--fg-2); padding: 0; }
.field > legend { margin-bottom: 12px; }
.field input:not([type="checkbox"]), .field textarea, .field select { width: 100%; font: inherit; font-size: 1.125rem; font-weight: 500; color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 8px 0 12px; outline: none; transition: border-color 0.4s; }
.field select { appearance: none; background: linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 12px) 55% / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, currentColor 50%) calc(100% - 6px) 55% / 6px 6px no-repeat; }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--fg); }
.field .is-bad { border-color: #c4452a !important; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.form__status { color: var(--fg-2); }
.form__status.is-ok { color: #2f7a4a; }
.form__status.is-err { color: #c4452a; }
.contact__side { display: grid; gap: 34px; }
.contact__side .t-label { color: var(--fg-3); margin-bottom: 10px; }
.contact__side p + p { margin-top: 10px; }
.contact__big { font-size: var(--fs-s); font-weight: 800; letter-spacing: -0.03em; word-break: break-word; }
.contact__small { color: var(--fg-2); font-size: 0.9375rem; max-width: 42ch; }

/* =========================================================================
   SERVICE VISUALS — HTML/CSS, coloured by --accent, scale with cqw
   ========================================================================= */
.viz { position: relative; width: 100%; aspect-ratio: 4 / 3; container-type: inline-size; color: var(--ink); font-family: var(--f); letter-spacing: -0.01em; }
.viz.is-paused * { animation-play-state: paused !important; }

.vw { position: absolute; inset: 7% 5%; background: #fffaf2; border-radius: 2.4cqw; overflow: hidden; box-shadow: 0 3cqw 8cqw rgba(33, 28, 22, 0.25); }
.vw__bar { height: 9%; display: flex; align-items: center; gap: 1cqw; padding: 0 2.6cqw; background: #f3e9da; border-bottom: 1px solid #e6dac8; }
.vw__bar i { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: #d2c4ae; }
.vw__bar span { margin-left: 2cqw; padding: 0.7cqw 2cqw; border-radius: 99px; background: #fffaf2; color: #8a7f70; font: 600 1.7cqw/1 var(--f); }
.vw__body { display: grid; gap: 2.6cqw; padding: 3cqw 4cqw; }
.vw__nav { display: flex; align-items: center; gap: 2.4cqw; }
.vw__nav b { width: 9cqw; height: 2cqw; border-radius: 1cqw; background: var(--ink); }
.vw__nav span { width: 6cqw; height: 1.2cqw; border-radius: 1cqw; background: #e3d8c7; }
.vw__nav em { margin-left: auto; font-style: normal; font-weight: 700; font-size: 1.7cqw; padding: 1cqw 2.2cqw; border-radius: 99px; box-shadow: inset 0 0 0 1px #d2c4ae; }
.vw__hero { display: grid; gap: 1.4cqw; padding-block: 1cqw; }
.vw__hero span { height: 4.4cqw; border-radius: 0.8cqw; background: var(--ink); }
.vw__hero .a { width: 72%; } .vw__hero .b { width: 50%; } .vw__hero .c { width: 58%; height: 1.5cqw; background: #d8ccb9; margin-top: 1cqw; }
.vw__cta { position: relative; justify-self: start; margin-top: 1.6cqw; padding: 1.6cqw 3.2cqw; border-radius: 99px; background: var(--ink); color: #fffaf2; font-style: normal; font-size: 2cqw; font-weight: 700; }
.vw__cta::after { content: ""; position: absolute; inset: -1cqw; border-radius: 99px; box-shadow: 0 0 0 0.4cqw var(--accent); opacity: 0; }
.vw__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.vw__cards div { aspect-ratio: 16 / 10; border-radius: 1.4cqw; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 45%, #fff), #efe4d3); }
.vw__cursor { position: absolute; left: 70%; top: 85%; width: 4.4cqw; height: auto; filter: drop-shadow(0 0.5cqw 1cqw rgba(0, 0, 0, 0.25)); }
.vw__toast { position: absolute; right: 3.4cqw; top: 13%; display: flex; align-items: center; gap: 1.4cqw; padding: 1.6cqw 2.4cqw; border-radius: 1.4cqw; background: var(--ink); color: #fffaf2; font-size: 1.9cqw; font-weight: 600; opacity: 0; }
.vw__toast i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #25d366; }
.vw__nav, .vw__hero span, .vw__cta, .vw__cards div { animation: vwIn 7s var(--ease) infinite both; }
.vw__hero .a { animation-delay: 0.15s; } .vw__hero .b { animation-delay: 0.25s; } .vw__hero .c { animation-delay: 0.35s; }
.vw__cta { animation-delay: 0.5s; }
.vw__cards div:nth-child(1) { animation-delay: 0.6s; } .vw__cards div:nth-child(2) { animation-delay: 0.7s; } .vw__cards div:nth-child(3) { animation-delay: 0.8s; }
.vw__cursor { animation: vwCursor 7s var(--ease-io) infinite both; }
.vw__cta::after { animation: vwRipple 7s ease-out infinite both; }
.vw__toast { animation: vwToast 7s var(--ease) infinite both; }
@keyframes vwIn { 0% { opacity: 0; transform: translateY(2cqw); } 9%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes vwCursor { 0%, 18% { left: 72%; top: 86%; } 40%, 70% { left: 15%; top: 52%; } 43% { transform: scale(0.85); } 46% { transform: scale(1); } 100% { left: 72%; top: 86%; } }
@keyframes vwRipple { 0%, 42% { opacity: 0; transform: scale(0.9); } 44% { opacity: 1; transform: scale(1); } 56%, 100% { opacity: 0; transform: scale(1.25); } }
@keyframes vwToast { 0%, 46% { opacity: 0; transform: translateY(-2cqw) scale(0.96); } 52%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-1cqw); } }

.viz--brand::before { content: ""; position: absolute; inset: 7% 5%; border-radius: 2.4cqw; background: #fffaf2; box-shadow: 0 3cqw 8cqw rgba(33, 28, 22, 0.22); }
.vb__grid { position: absolute; left: 5%; top: 7%; width: 62%; height: 86%; fill: none; stroke: var(--accent); stroke-width: 1; }
.vb__grid * { stroke-dasharray: 700; stroke-dashoffset: 700; animation: vbDraw 8s var(--ease) infinite both; }
.vb__grid *:nth-child(2) { animation-delay: 0.2s; } .vb__grid *:nth-child(3) { animation-delay: 0.4s; } .vb__grid *:nth-child(4) { animation-delay: 0.5s; } .vb__grid *:nth-child(5) { animation-delay: 0.6s; }
.vb__glyph { position: absolute; left: 12%; top: 20%; font-size: 28cqw; line-height: 1; letter-spacing: -0.06em; color: var(--ink); font-weight: 300; animation: vbWeight 8s var(--ease-io) infinite both; }
.vb__swatches { position: absolute; right: 11%; top: 17%; width: 17cqw; height: 52cqw; }
.vb__swatches i { position: absolute; left: 0; right: 0; height: 11cqw; border-radius: 1.6cqw; box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, 0.12); animation: vbFan 8s var(--ease) infinite both; }
.vb__swatches i:nth-child(1) { background: var(--ink); --y: 0cqw; }
.vb__swatches i:nth-child(2) { background: var(--accent); --y: 13cqw; animation-delay: 0.1s; }
.vb__swatches i:nth-child(3) { background: #f3e9da; --y: 26cqw; animation-delay: 0.2s; }
.vb__swatches i:nth-child(4) { background: var(--gold); --y: 39cqw; animation-delay: 0.3s; }
.vb__meta { position: absolute; left: 10%; bottom: 13%; display: flex; gap: 3cqw; font: 700 1.6cqw/1 var(--f); text-transform: uppercase; letter-spacing: 0.12em; color: #8a7f70; }
@keyframes vbDraw { 0% { stroke-dashoffset: 700; } 30%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -700; } }
@keyframes vbWeight { 0%, 10% { font-weight: 300; } 45%, 60% { font-weight: 800; } 95%, 100% { font-weight: 300; } }
@keyframes vbFan { 0% { transform: translateY(0) rotate(-6deg); opacity: 0; } 14%, 86% { transform: translateY(var(--y)) rotate(0); opacity: 1; } 100% { transform: translateY(0) rotate(-6deg); opacity: 0; } }

.viz--motion::before { content: ""; position: absolute; inset: 7% 5%; border-radius: 2.4cqw; background: #17120e; box-shadow: 0 3cqw 8cqw rgba(0, 0, 0, 0.35); }
.vm__screen { position: absolute; left: 9%; right: 9%; top: 12%; height: 46%; border-radius: 1.4cqw; overflow: hidden; background: radial-gradient(60% 90% at 30% 30%, color-mix(in srgb, var(--accent) 60%, #fff), transparent 60%), linear-gradient(120deg, var(--accent), #140d10 80%); background-size: 160% 160%; animation: vmPan 7s ease-in-out infinite alternate; }
.vm__rec { position: absolute; left: 2.6cqw; top: 2.2cqw; font: 700 1.7cqw/1 var(--f); color: #ff5a4d; animation: vmBlink 1.2s steps(2) infinite; }
.vm__tc { position: absolute; right: 2.6cqw; top: 2.2cqw; font: 600 1.7cqw/1 var(--f); color: #fff; font-variant-numeric: tabular-nums; }
.vm__play { position: absolute; left: 50%; top: 50%; width: 8cqw; height: 8cqw; margin: -4cqw 0 0 -4cqw; border-radius: 50%; background: rgba(255, 250, 242, 0.92); animation: vmPulse 2.4s var(--ease) infinite; }
.vm__play::after { content: ""; position: absolute; left: 3.3cqw; top: 2.4cqw; border-left: 2.6cqw solid var(--ink); border-top: 1.6cqw solid transparent; border-bottom: 1.6cqw solid transparent; }
.vm__safe { position: absolute; inset: 12% 10%; border: 1px dashed rgba(255, 255, 255, 0.35); border-radius: 0.6cqw; }
.vm__tl { position: absolute; left: 9%; right: 9%; top: 63%; height: 26%; display: grid; grid-template-rows: 1fr 1fr 1.4fr; gap: 1cqw; }
.vm__track { position: relative; border-radius: 0.6cqw; background: rgba(255, 255, 255, 0.06); }
.vm__track i { position: absolute; top: 12%; bottom: 12%; left: calc(var(--x) * 1%); width: calc(var(--w) * 1%); border-radius: 0.6cqw; background: var(--gold); }
.vm__track + .vm__track i { background: color-mix(in srgb, var(--accent) 50%, #fff); }
.vm__wave { display: flex; align-items: center; gap: 0.5cqw; padding-inline: 0.6cqw; border-radius: 0.6cqw; background: rgba(255, 255, 255, 0.06); }
.vm__wave i { flex: 1; height: 70%; border-radius: 1cqw; background: rgba(255, 250, 242, 0.7); animation: vmWave 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -0.1s); }
.vm__head { position: absolute; top: -1cqw; bottom: -1cqw; left: 0; width: 2px; background: #fff; animation: vmHead 6s linear infinite; }
.vm__head::before { content: ""; position: absolute; left: -1cqw; top: -1.2cqw; width: 2.2cqw; height: 1.4cqw; border-radius: 0.4cqw; background: #fff; }
@keyframes vmPan { to { background-position: 100% 100%; } }
@keyframes vmBlink { 50% { opacity: 0; } }
@keyframes vmPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes vmWave { 0% { transform: scaleY(0.2); } 100% { transform: scaleY(1); } }
@keyframes vmHead { from { left: 0; } to { left: 100%; } }

.vs__phone { position: absolute; left: 9%; top: 6%; width: 38%; height: 88%; border-radius: 4cqw; background: var(--ink); padding: 1.6cqw; box-shadow: 0 3cqw 8cqw rgba(0, 0, 0, 0.25); }
.vs__phone::before { content: ""; position: absolute; inset: 1.6cqw; border-radius: 2.8cqw; background: #fffaf2; }
.vs__top { position: relative; display: flex; align-items: center; gap: 1.4cqw; padding: 3cqw 2.4cqw 2cqw; }
.vs__top b { width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: conic-gradient(var(--accent), var(--gold), var(--accent)); }
.vs__top span { height: 1.2cqw; border-radius: 1cqw; background: #e3d8c7; width: 7cqw; }
.vs__top span + span { width: 4cqw; margin-left: auto; }
.vs__grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6cqw; padding: 0 2cqw; }
.vs__grid i { aspect-ratio: 1; border-radius: 0.6cqw; background: color-mix(in srgb, var(--accent) 70%, #fff); animation: vsPop 6s var(--ease) infinite both; animation-delay: calc(var(--i) * 0.12s); }
.vs__grid i:nth-child(3n + 2) { background: var(--ink); }
.vs__grid i:nth-child(4), .vs__grid i:nth-child(9) { background: var(--gold); }
.vs__post { position: absolute; right: 7%; top: 15%; width: 41%; border-radius: 2.4cqw; background: #fffaf2; padding: 1.6cqw; box-shadow: 0 3cqw 8cqw rgba(0, 0, 0, 0.22); }
.vs__slides { position: relative; aspect-ratio: 1; border-radius: 1.4cqw; overflow: hidden; display: flex; }
.vs__slides i { flex: 0 0 100%; animation: vsSlide 6s var(--ease-io) infinite both; }
.vs__slides i:nth-child(1) { background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #fff)); }
.vs__slides i:nth-child(2) { background: var(--ink); }
.vs__slides i:nth-child(3) { background: linear-gradient(150deg, #f3e9da, var(--gold)); }
.vs__bar { display: flex; align-items: center; justify-content: space-between; padding: 1.6cqw 0.6cqw 0.4cqw; }
.vs__heart { font-size: 3cqw; line-height: 1; color: #e0533f; animation: vsHeart 2s var(--ease) infinite; }
.vs__dots { display: flex; gap: 0.8cqw; }
.vs__dots i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #e3d8c7; animation: vsDot 6s steps(1) infinite both; }
.vs__dots i:nth-child(2) { animation-delay: -4s; } .vs__dots i:nth-child(3) { animation-delay: -2s; }
@keyframes vsPop { 0% { opacity: 0; transform: scale(0.6); } 8%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(0.9); } }
@keyframes vsSlide { 0%, 28% { transform: translateX(0); } 34%, 61% { transform: translateX(-100%); } 67%, 94% { transform: translateX(-200%); } 100% { transform: translateX(0); } }
@keyframes vsHeart { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.35); } 30% { transform: scale(1); } }
@keyframes vsDot { 0% { background: var(--ink); } 33.3% { background: #e3d8c7; } }

/* WhatsApp AI — the Daybreak assistant from the reel */
.vc { position: absolute; inset: 5% 16%; border-radius: 3cqw; overflow: hidden; background: #efe5d6; box-shadow: 0 3cqw 8cqw rgba(0, 0, 0, 0.22); display: flex; flex-direction: column; border: 0.5cqw solid var(--ink); }
.vc__head { display: flex; align-items: center; gap: 1.8cqw; padding: 2.2cqw 2.6cqw; background: #fffaf2; }
.vc__head b { display: grid; place-items: center; width: 5cqw; height: 5cqw; border-radius: 50%; background: var(--ink); color: #fffaf2; font-size: 2cqw; font-weight: 800; }
.vc__head strong { display: block; font-size: 2.1cqw; font-weight: 800; }
.vc__head span { display: block; font-size: 1.4cqw; color: #7d725f; }
.vc__msgs { position: relative; flex: 1; display: flex; flex-direction: column; gap: 1.6cqw; padding: 2.6cqw; font-size: 2.1cqw; font-weight: 600; line-height: 1.3; }
.m { max-width: 78%; padding: 1.6cqw 2.2cqw; border-radius: 2cqw; animation: vcMsg 10s var(--ease) infinite both; }
.m--out { align-self: flex-end; background: var(--gold); color: var(--ink); border-bottom-right-radius: 0.5cqw; }
.m--in { align-self: flex-start; background: #fffaf2; border-bottom-left-radius: 0.5cqw; }
.m3 { display: grid; gap: 1cqw; padding: 1.2cqw; }
.m3 span { padding: 1.2cqw 1.6cqw; border-radius: 1.2cqw; box-shadow: inset 0 0 0 1px #e1d4bf; }
.m--sys { align-self: flex-end; max-width: none; padding: 0; background: none; font-size: 1.3cqw; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8a7f70; }
.m1 { animation-delay: 0.3s; } .m2 { animation-delay: 2.1s; } .m3 { animation-delay: 2.6s; } .m4 { animation-delay: 3.1s; }
.typing { position: absolute; left: 2.6cqw; top: 13cqw; display: flex; gap: 0.7cqw; padding: 1.6cqw 2cqw; border-radius: 2cqw; background: #fffaf2; animation: vcType 10s linear infinite both; animation-delay: 0.9s; }
.typing i { width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--ink); opacity: 0.4; animation: vcDot 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes vcMsg { 0% { opacity: 0; transform: translateY(2cqw) scale(0.96); } 4%, 82% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: none; } }
@keyframes vcType { 0% { opacity: 0; } 1%, 11% { opacity: 1; } 12%, 100% { opacity: 0; } }
@keyframes vcDot { 50% { transform: translateY(-0.6cqw); opacity: 1; } }

.vd { position: absolute; inset: 7% 5%; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1.1fr 1fr; gap: 2cqw; }
.vd__card { position: relative; border-radius: 2cqw; background: #fffaf2; padding: 2.4cqw; box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, 0.16); overflow: hidden; }
.vd__t { display: block; font: 700 1.5cqw/1 var(--f); text-transform: uppercase; letter-spacing: 0.12em; color: #8a7f70; margin-bottom: 1.6cqw; }
.vd__chart { grid-column: 1 / -1; }
.vd__chart svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 70%; }
.vd__line { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: vdLine 6s var(--ease) infinite both; }
.vd__area { fill: color-mix(in srgb, var(--accent) 55%, transparent); opacity: 0; animation: vdArea 6s var(--ease) infinite both; }
.vd__checks ul { display: grid; gap: 1.2cqw; font-size: 1.9cqw; font-weight: 600; }
.vd__checks li { display: flex; align-items: center; gap: 1.2cqw; }
.vd__checks li::before { content: "✓"; display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; font-size: 1.5cqw; color: transparent; box-shadow: inset 0 0 0 1px #dccfba; animation: vdCheck 6s var(--ease) infinite both; }
.vd__checks li:nth-child(2)::before { animation-delay: 0.4s; } .vd__checks li:nth-child(3)::before { animation-delay: 0.8s; } .vd__checks li:nth-child(4)::before { animation-delay: 1.2s; }
.vd__q { font-size: 1.8cqw; padding: 1.2cqw 1.8cqw; border-radius: 99px; background: #f3e9da; color: #6d6458; margin-bottom: 1.6cqw; white-space: nowrap; overflow: hidden; }
.vd__rank { position: relative; display: grid; gap: 0.9cqw; }
.vd__rank li { height: 2.6cqw; border-radius: 0.6cqw; background: #efe4d3; }
.vd__rank .you { position: relative; z-index: 1; display: flex; align-items: center; padding-inline: 1.4cqw; font-size: 1.6cqw; font-weight: 700; background: var(--accent); color: var(--accent-ink); animation: vdRank 6s var(--ease-io) infinite both; }
@keyframes vdLine { 0% { stroke-dashoffset: 100; } 40%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes vdArea { 0%, 25% { opacity: 0; } 45%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vdCheck { 0%, 20% { color: transparent; background: transparent; } 28%, 90% { color: var(--accent-ink); background: var(--accent); box-shadow: none; } 100% { color: transparent; background: transparent; } }
@keyframes vdRank { 0%, 30% { transform: translateY(0); } 50%, 88% { transform: translateY(calc(-2 * (2.6cqw + 0.9cqw))); } 100% { transform: translateY(0); } }

/* Device layouts share the same type, artwork and motion system. */
:root { --hdr-h: 114px; }
.hl { line-height: 1.06; }
.hl--xl { line-height: 1.04; }
.hl--m { line-height: 1.08; }
.ln { overflow-clip-margin: .18em; padding-block: .08em; margin-block: -.08em; }
.hl__a + .hl__b { margin-top: .07em; }
.hdr__logo { font-size: 1.45rem; gap: 12px; min-height: 48px; }
.hdr__logo .mark { width: 30px; }
.hdr__nav { font-size: 1rem; }
.hdr__menu { width: 52px; height: 52px; }
.hdr__menu i { left: 17px; right: 17px; }
.hdr__menu i:first-child { top: 22px; }
.hdr__menu i:last-child { top: 29px; }
.hdr__menu[aria-expanded="true"] i { top: 25px; }
.menu-open, .menu-open body { overflow: hidden; }
.menu-open .hdr { transform: none; }
.menu-open .wa { visibility: hidden; }
.menu { overflow-y: auto; overscroll-behavior: contain; justify-content: initial; display: grid; grid-template-rows: auto 1fr auto; gap: clamp(24px,4svh,48px); padding: calc(var(--hdr-h) + 24px) var(--gutter) max(24px,env(safe-area-inset-bottom)); isolation: isolate; }
.menu__intro { padding-right: 128px; }
.menu__intro .t-label { color: var(--gold); font-size: .65rem; letter-spacing: .10em; }
.menu__intro > p + p { margin-top: 12px; font-size: clamp(1.3rem,3.4vw,2rem); line-height: 1.2; letter-spacing: -.03em; }
.menu__intro strong { color: var(--gold-hi); }
.menu__art { position: absolute; right: var(--gutter); top: calc(var(--hdr-h) + 16px); width: clamp(90px,21vw,160px); aspect-ratio: 1; z-index: -1; }
.menu__art .mark { height: 100%; width: auto; margin-inline: auto; filter: drop-shadow(0 0 35px #e7b04d25); }
.menu__art > span { position: absolute; inset: -15%; border: 1px solid #e7b04d26; border-radius: 50%; transform: rotate(-29deg); }
.menu__art > span:last-child { inset: -35%; border-color: #e7b04d10; }
.menu__main { align-self: center; }
.menu__main a { align-items: center; padding-block: clamp(10px,1.6svh,20px); line-height: 1.12; font-size: clamp(2rem,7.6vw,4rem); }
.menu__label { flex: 1; }
.menu__main a > .arr { font-size: .5em; color: var(--gold); transition: transform .4s; }
.menu__main a:hover > .arr { transform: translate(4px,-4px); }
.menu__main a[aria-current] .menu__label { color: var(--gold-hi); }
.menu__foot { border-top: 1px solid #fdf4e624; padding-top: 18px; gap: 0; }
.menu__foot a { min-height: 36px; display: flex; align-items: center; overflow-wrap: anywhere; font-size: .7rem; }
.ftr__wordwrap { aspect-ratio: 1000 / 145; display: flex; align-items: center; overflow: visible; }
.ftr__word { width: 100%; font-size: 10.2vw; line-height: 1.2; font-family: var(--f); font-weight: 800; letter-spacing: -.065em; white-space: nowrap; }
.ftr__word span { display: inline-block; background: linear-gradient(#f7d58a,#e7b04d 55%,#8f6420); background-clip: text; -webkit-background-clip: text; color: transparent; }
.ftr__mail, .contact__big { overflow-wrap: anywhere; }
.wa { height: 60px; width: 60px; padding: 14px; justify-content: center; background: #25d366; border: 2px solid #fff7; box-shadow: 0 6px 24px #0003; bottom: max(20px,env(safe-area-inset-bottom)); }
.wa img { width: 30px; height: 30px; filter: invert(1); }
.wa:focus-visible { outline: 3px solid var(--fg); }
.ftr__bottom { padding-right: 80px; }
.ftr__bottom a { padding-right: 0; }
.form__hint { color: var(--fg-2); max-width: 60ch; }
.btn:disabled { opacity: .65; cursor: wait; }
.chip { min-height: 44px; height: auto; padding-block: 10px; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid var(--fg); outline-offset: 5px; }
.cta__row a { overflow-wrap: anywhere; max-width: 100%; }
.story__stage { overflow: hidden; }
.hero__fallback { position: absolute; right: 6%; top: 21%; height: min(62svh,34vw); width: auto; pointer-events: none; }
.hero.has-webgl .hero__fallback { visibility: hidden; }
html:not(.js) .form { display: none; }
html:not(.js) .roof__house .tile { opacity: 1; transform: none; }
html:not(.js) .story__state { position: static; opacity: 1; transform: none; margin-bottom: 24px; }
html:not(.js) .story__pin { height: auto; padding-block: var(--sec); }
@media (max-width: 1100px) {
  .roof__laws { grid-template-columns: 1fr; }
  .ftr__grid { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,.8fr); }
  .ftr__mail { font-size: clamp(1.2rem,2.8vw,2rem); }
}
@media (max-width: 900px) {
  :root { --hdr-h: 96px; --sec: clamp(80px,12vw,120px); --rail-gap: 18px; }
  .hdr { grid-template-columns: 1fr auto; gap: 16px; background: color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .hdr__logo { font-size: 1.35rem; }
  .hdr__nav, .hdr .btn { display: none; }
  .hdr__menu { display: block; }
  .wrap, .tree .wrap { padding-right: max(var(--gutter),env(safe-area-inset-right)); }
  .hl { overflow-wrap: normal; font-size: clamp(2rem,5.6vw,3.5rem); }
  .hl--xl { font-size: clamp(2.4rem,7.2vw,4.5rem); }
  .hl--m { font-size: clamp(1.65rem,4.2vw,2.7rem); }
  .hero__main { max-width: 56%; }
  .hero__wrap { min-height: max(660px,100svh); padding-top: calc(var(--hdr-h) + 32px); padding-bottom: 80px; }
  .hero__title { font-size: clamp(2rem,5.5vw,3.6rem); }
  .hero__sub { max-width: 32ch; margin-top: 24px; }
  .hero__ctas { gap: 14px 24px; margin-top: 28px; }
  .hero__ctas > .rlink { min-height: 48px; display: inline-flex; align-items: center; }
  .hero__scroll { bottom: 30px; }
  .story__pin { height: 100svh; min-height: 620px; padding-top: calc(var(--hdr-h) + 24px); padding-bottom: 32px; }
  .story__grid { grid-template-columns: 1fr; gap: 16px; align-content: center; }
  .story__states { min-height: 170px; }
  .story__state { position: absolute; margin: 0; opacity: 0; transform: translateY(20px); }
  .story__state.is-on { opacity: 1; transform: none; }
  .story__stage { height: clamp(180px,30svh,300px); }
  .story__labels { display: block; }
  .story__labels span { font-size: clamp(8px,1.6vw,12px); letter-spacing: 0; }
  .story__prog { display: flex; margin-top: 8px; }
  .story__p { max-width: 34ch; margin-top: 16px; }
  .story__text .klabel { margin-bottom: 20px; }
  .branches { padding-bottom: var(--sec); }
  .branches__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
  .brow { min-height: 65svh; }
  .bstage { top: calc(var(--hdr-h) + 32px); height: min(60svh,480px); }
  .bstage__item { padding: 12px; }
  .brow__viz { display: none; }
  .ring, .law { grid-template-columns: 32px minmax(0,1fr); column-gap: 16px; row-gap: 12px; }
  .ring__d, .law__d { grid-column: 2; justify-self: start; text-align: left; }
  .wrow a { grid-template-columns: 32px minmax(0,1fr); padding-block: 26px; }
  .wrow__tag { display: none; }
  .wpreview { display: none; }
  .roof__rooms { column-gap: 24px; padding-inline: 16px; }
  .tile { min-height: 52px; padding: 12px; gap: 8px; font-size: .875rem; border-radius: 12px; }
  .tile i { flex: none; }
  .ftr { padding-bottom: 36px; }
  .ftr__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px 24px; }
  .ftr__lead { grid-column: 1 / -1; }
  .ftr__mail { font-size: clamp(1.1rem,5vw,2rem); }
  .ftr ul a { display: inline-flex; align-items: center; min-height: 44px; }
  .ftr ul li { margin: 0; }
  .ftr__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ftr__bottom a { min-height: 44px; display: flex; align-items: center; }
  .cta .hl { font-size: clamp(2.4rem,8vw,4rem); }
  .cta__round { width: clamp(120px,24vw,170px); }
  .cta__row { gap: 20px 28px; line-height: 1.6; padding-bottom: 36px; }
  .srow { grid-template-columns: 28px minmax(0,1fr) 24px; row-gap: 12px; }
  .srow__d { grid-column: 2 / 4; }
  .srow__a { grid-column: 3; grid-row: 1; font-size: 1.3rem; }
  .srow__t { line-height: 1.14; }
  .svh { min-height: 0; padding-top: calc(var(--hdr-h) + 48px); padding-bottom: 64px; }
  .svh__grid, .about__grid, .contact__grid { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .svh__grid > *, .about__grid > *, .contact__grid > * { min-width: 0; }
  .svh__viz { max-width: 560px; width: 100%; justify-self: center; }
  .bene__row, .irow { grid-template-columns: 28px minmax(0,1fr); row-gap: 12px; }
  .bene__d, .irow__d { grid-column: 2; }
  .bene__t, .irow__t { line-height: 1.18; }
  .wcard { width: 100%; }
  .wcard__big { font-size: clamp(2.5rem,10vw,5rem); left: 16px; }
  .form { grid-template-columns: minmax(0,1fr); }
  .contact__big { font-size: clamp(1.125rem,4.7vw,1.75rem); }
  .contact__side { padding-top: 32px; border-top: 1px solid var(--line); }
  .phero { padding-top: calc(var(--hdr-h) + 48px); padding-bottom: 48px; }
  .about__text, .terms__p { line-height: 1.35; }
  .qa summary { gap: 16px; padding-block: 24px; }
  .qa__q { line-height: 1.4; }
  .btn--sm { min-height: 44px; }
  .wa { width: 56px; height: 56px; bottom: max(16px,env(safe-area-inset-bottom)); }
}
@media (max-width: 600px) {
  .hdr__logo { font-size: clamp(1.05rem,4.8vw,1.35rem); gap: 10px; }
  .hdr__logo .mark { width: 28px; }
  .hero__wrap { min-height: max(700px,100svh); justify-content: flex-start; padding-top: calc(var(--hdr-h) + clamp(140px,40vw,200px) + 64px); padding-bottom: 100px; }
  .hero__main { max-width: none; width: 100%; }
  .hero__title { font-size: clamp(2rem,8.1vw,3rem); }
  .hero__sub { font-size: 1.0625rem; line-height: 1.6; }
  .hero__scroll { bottom: 32px; }
  .hero__fallback { top: calc(var(--hdr-h) + 24px); right: 24px; height: clamp(140px,40vw,200px); }
  .hl { font-size: clamp(1.9rem,7.5vw,2.8rem); }
  .hl--xl { font-size: clamp(2rem,8.4vw,3.2rem); }
  .hl--m { font-size: clamp(1.65rem,6.4vw,2.3rem); }
  .hero__title { font-size: clamp(2rem,8.1vw,3rem); }
  .branches__grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  .branches__stage { display: none; }
  .brow { min-height: 0; padding-block: 36px; opacity: 1; border-top: 1px solid var(--line); }
  .brow__a { padding-block: 0 24px; }
  .brow__more { display: inline-flex; min-height: 44px; align-items: center; margin-top: 16px; }
  .brow__viz { display: block; margin: 0; border-radius: var(--r); background: var(--accent); padding: 12px; }
  .brow__tag { margin-top: 20px; line-height: 1.5; }
  .story__states { min-height: 182px; }
  .story__pin { min-height: 640px; }
  .story__stage { height: clamp(190px,27svh,260px); }
  .story__labels span { font-size: 9px; }
  .roof__house { margin-top: calc((50vw - var(--gutter)) * var(--K) + 48px); }
  .roof__rooms { column-gap: 20px; padding-inline: 10px; }
  .cta__row { flex-direction: column; align-items: flex-start; }
  .ftr__wordwrap { margin-top: 44px; }
}
@media (max-width: 380px) {
  .hero__ctas { align-items: flex-start; flex-direction: column; gap: 8px; }
  .hero__wrap { min-height: max(760px,100svh); }
  .roof__rooms { column-gap: 12px; padding-inline: 8px; }
  .tile { font-size: .75rem; padding: 10px 8px; }
  .tile i { width: 8px; height: 8px; }
  .menu__intro { padding-right: 105px; }
}
@media (max-height: 600px) and (max-width: 900px) {
  .menu { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 16px; padding-top: calc(var(--hdr-h) + 12px); }
  .menu__intro { grid-column: 1; padding-right: 0; }
  .menu__art { display: none; }
  .menu__main { grid-column: 2; grid-row: 1 / 3; }
  .menu__main a { font-size: 1.5rem; padding-block: 8px; }
  .menu__foot { grid-column: 1; }
  .story__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .story__pin { min-height: 420px; }
  .story__stage { height: 220px; }
}
@media (pointer: coarse) { a, button, summary { touch-action: manipulation; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js [data-fade], .js [data-hero-in] { opacity: 1; visibility: visible; transform: none; }
  .js [data-split], .js [data-lines], .js [data-hero-title] { visibility: visible; }
  .grain { display: none; }
  .ring__w, .law__w { background-position: 0 0; }
  .tile { opacity: 1; transform: none; }
  .bstage__item { clip-path: none; opacity: 0; }
  .bstage__item.is-on { opacity: 1; }
  .story__pin { height: auto; padding-block: var(--sec); }
  .story__state { position: static; opacity: 1; transform: none; margin-bottom: 28px; }
  .story__states { min-height: 0; }
  .story__prog { display: none; }
  .vw__toast { opacity: 1; }
}
.menu__main a .menu__label { color: var(--cream); letter-spacing: -.045em; }
.menu__main a[aria-current] .menu__label { color: var(--gold-hi); }
.branch { overflow: hidden; }
.cta { overflow: clip; }
@media (max-width: 600px) {
  .loader__markwrap { width: 48px; }
  .loader__word { font-size: clamp(1.1rem,5.1vw,1.6rem); }
}
@media (max-height: 600px) and (min-width: 601px) and (max-width: 900px) {
  .story__pin { min-height: 360px; padding-top: calc(var(--hdr-h) + 12px); padding-bottom: 20px; }
  .story__stage { height: 200px; }
}
@media (max-height: 600px) and (max-width: 600px) {
  .menu { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .menu__intro { display: none; }
  .menu__main { grid-column: 1; grid-row: 1; }
  .menu__foot { grid-column: 1; }
  .story__grid { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .story__pin { min-height: 560px; padding-top: calc(var(--hdr-h) + 12px); padding-bottom: 16px; }
  .story__states { min-height: 160px; }
  .story__stage { height: 144px; }
  .story__text .klabel { margin-bottom: 12px; }
}
.menu { overflow-x: hidden; }
@media (max-width: 900px) {
  .has-cursor .cdot, .has-cursor .clabel { display: none; }
  .has-cursor body, .has-cursor a, .has-cursor button, .has-cursor summary { cursor: auto; }
}
.menu__art { width: clamp(96px,24vw,160px); }
.menu__art .mark { height: 74%; margin: 13% auto; }
.menu__art > span { inset: 0; }
.menu__art > span:last-child { inset: 12%; }
.menu__art > span { transform: none; }
@media (max-width: 900px) { .hdr.is-hidden { transform: none; } }

/* =========================================================================
   V4 — interaction layer: particle journey · configurator · live demos ·
   reactive branch · click-origin transitions · kinetic type · ripple · shine
   ========================================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fx { position: absolute; width: 0; height: 0; overflow: hidden; }
.journey { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.trail { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 490; pointer-events: none; }
.hero__title { pointer-events: auto; }

/* the seed — "one idea" */
.idea .wrap { position: relative; }
.idea__seed { position: absolute; right: clamp(24px, 9vw, 170px); top: 50%; width: clamp(110px, 11vw, 168px); aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; }
.idea__seed span { position: absolute; inset: -24%; border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); border-radius: 50%; animation: orbit 16s linear infinite; }
.idea__seed span::after { content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 12px var(--gold); }
html:not(.has-journey) .idea__seed::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, var(--gold-hi), var(--gold) 45%, transparent 72%); }
@keyframes orbit { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .idea__seed { position: relative; right: auto; top: auto; transform: none; margin: 56px 24px 0 auto; width: 112px; } }

/* services stage: the particles draw each service; the panel becomes a soft coloured glow */
.bstage__name { display: none; position: absolute; right: 22px; bottom: 16px; z-index: 3; font-size: var(--fs-s); font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase; color: var(--cream); }
@media all {
  .has-journey .bstage { background: rgba(253, 244, 230, 0.02); box-shadow: inset 0 0 0 1px rgba(253, 244, 230, 0.08); }
  .has-journey .bstage__item { background: radial-gradient(58% 54% at 50% 46%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 72%); }
  .has-journey .bstage__item .viz { opacity: 0; visibility: hidden; }
  .has-journey .bstage__name { display: block; }
  .has-journey .bstage__item, .has-journey .bstage__item.is-under, .has-journey .bstage__item.is-on { clip-path: none; transition: opacity 0.9s var(--ease); }
  .has-journey .bstage__item { opacity: 0; }
  .has-journey .bstage__item.is-on { opacity: 1; }
}

/* build your project */
.roof__hint { margin-top: clamp(16px, 2vw, 28px); color: var(--fg-2); }
button.tile { font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; border: 0; }
.tile { position: relative; }
.tile:not(.is-on):hover { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; }
.tile:not(.is-on):hover i { background: var(--accent); }
.tile.is-on { background: var(--accent); color: var(--accent-ink); box-shadow: 0 14px 34px -16px var(--accent); }
.tile.is-on i { background: var(--accent-ink); }
.tile:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.tile__plus { position: relative; flex: none; margin-left: auto; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); transition: transform 0.6s var(--ease), background 0.4s; }
.tile__plus::before, .tile__plus::after { content: ""; position: absolute; left: 7px; right: 7px; top: 11.25px; height: 1.5px; background: currentColor; }
.tile__plus::after { transform: rotate(90deg); }
.tile.is-on .tile__plus { transform: rotate(135deg); background: color-mix(in srgb, var(--accent-ink) 14%, transparent); box-shadow: none; }
.roof__house::before { content: ""; position: absolute; inset: 18% 0 -6%; z-index: -1; background: radial-gradient(50% 58% at 50% 62%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 72%); opacity: 0; transition: opacity 0.9s var(--ease); pointer-events: none; }
.roof__house.has-picks::before { opacity: 1; }
.build { width: min(880px, 100%); margin: clamp(28px, 4vw, 48px) auto 0; display: flex; justify-content: space-between; align-items: center; gap: 20px 32px; flex-wrap: wrap; padding: 20px 24px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); background: color-mix(in srgb, var(--fg) 3%, transparent); }
.build__count { color: var(--fg-2); }
.build__count b { color: var(--fg); font-variant-numeric: tabular-nums; }
.build__list { margin-top: 6px; font-size: var(--fs-s); font-weight: 800; letter-spacing: -0.03em; line-height: 1.25; }
.build__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.is-disabled { opacity: 0.38; cursor: not-allowed; }
.btn.is-disabled:hover .btn__fill { transform: translateY(102%); }
.btn.is-disabled:hover { color: var(--b-fg); }

/* live demo — the assistant */
.demo { padding-block: var(--sec); }
.demo__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.demo__p { margin-top: clamp(20px, 2.4vw, 32px); color: var(--fg-2); max-width: 40ch; }
.demo__chips { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.demo__chips .chip { color: var(--fg); }
.demo__note { margin-top: 22px; color: var(--fg-3); }
.phone { width: min(400px, 100%); justify-self: end; height: min(640px, 76svh); border-radius: 40px; padding: 10px; background: #0d0a08; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6), inset 0 0 0 1.5px rgba(240, 199, 122, 0.35); display: flex; flex-direction: column; overflow: hidden; }
.phone__head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; background: #fffaf2; color: var(--espresso); border-radius: 30px 30px 0 0; }
.phone__head b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--espresso); color: var(--cream); font-weight: 800; }
.phone__head strong { display: block; font-size: 0.95rem; font-weight: 800; }
.phone__head span { display: block; font-size: 0.75rem; color: #6f6556; }
.phone__msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px 14px; background: #efe5d6; color: var(--espresso); scrollbar-width: none; overscroll-behavior: contain; }
.phone__msgs::-webkit-scrollbar { display: none; }
.msg { max-width: 84%; margin: 0; padding: 11px 14px; border-radius: 18px; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; }
.msg--in { align-self: flex-start; background: #fffaf2; border-bottom-left-radius: 6px; }
.msg--out { align-self: flex-end; background: var(--gold); border-bottom-right-radius: 6px; }
.msg--typing { display: flex; gap: 5px; padding: 15px 14px; }
.msg--typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--espresso); opacity: 0.35; animation: typingDot 1s ease-in-out infinite; }
.msg--typing i:nth-child(2) { animation-delay: 0.15s; } .msg--typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingDot { 50% { transform: translateY(-3px); opacity: 1; } }
.msg--cta { align-self: flex-start; background: #1f9d55; color: #fff; font-weight: 800; }
.phone__input { display: flex; gap: 8px; padding: 10px; background: #fffaf2; border-radius: 0 0 30px 30px; }
.phone__input input { flex: 1; min-width: 0; border: 0; border-radius: 99px; padding: 12px 16px; background: #efe5d6; font: inherit; font-weight: 600; color: var(--espresso); outline: none; }
.phone__input input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.phone__input button { width: 44px; height: 44px; border-radius: 50%; background: var(--espresso); color: var(--cream); display: grid; place-items: center; flex: none; font-size: 1.1rem; }
@media (max-width: 900px) { .demo__grid { grid-template-columns: minmax(0, 1fr); } .phone { justify-self: center; height: 560px; } }

/* live demo — the reel, scrubbed by scroll */
.reel { padding-top: var(--sec); }
.reel__pin { min-height: 100svh; display: flex; align-items: center; padding-top: calc(var(--hdr-h) + 12px); padding-bottom: 24px; }
.reel__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.reel__chapters li { display: flex; align-items: baseline; gap: 14px; padding-block: 12px; border-top: 1px solid var(--line); color: var(--fg-3); transition: color 0.5s; }
.reel__chapters li:last-child { border-bottom: 1px solid var(--line); }
.reel__chapters li.is-on { color: var(--fg); }
.reel__chapters li.is-on .t-label { color: var(--gold-hi); }
.reel__ct { font-size: var(--fs-s); font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase; }
.reel__phone { position: relative; height: min(72svh, 680px); aspect-ratio: 9 / 16; border-radius: 34px; padding: 8px; background: #0d0a08; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7), inset 0 0 0 1.5px rgba(240, 199, 122, 0.35); }
.reel__canvas, .reel__poster, .reel__video { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); border-radius: 27px; object-fit: cover; background: #1a1511; }
.reel__poster { transition: opacity 0.4s; }
.reel__poster.is-hidden { opacity: 0; }
.reel__video { z-index: 3; }
.reel__bar { position: absolute; left: 26px; right: 26px; bottom: 24px; z-index: 2; height: 3px; border-radius: 3px; background: rgba(253, 244, 230, 0.25); overflow: hidden; }
.reel__bar i { display: block; height: 100%; background: var(--gold-hi); transform: scaleX(0); transform-origin: left; }
.reel__phone.is-video .reel__bar { visibility: hidden; }
.reel__side { display: grid; gap: 18px; justify-items: start; }
.reel__tc { color: var(--fg-2); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .reel__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; }
  .reel__chapters { display: none; }
  .reel__phone { height: min(62svh, 560px); }
  .reel__side { justify-items: center; }
}

/* the reactive branch */
.branch .b-leaf { fill: var(--branch); }
.branch .b-pick { stroke-width: 1.8; }

/* page transitions grow from the click */
.pt__band { inset: 0; left: 0; right: 0; top: 0; height: auto; transform: none; clip-path: circle(0 at 50% 50%); }

/* kinetic type: headlines lean with scroll speed */
.has-skew .hl:not(.next__hl), .has-skew .ring__w, .has-skew .law__w, .has-skew .srow__t, .has-skew .wrow__t, .has-skew .reel__ct { transform: skewY(calc(var(--skew, 0) * 1deg)); }

/* footer wordmark: a gold shine sweeps across */
.ftr__word span { background-image: linear-gradient(105deg, transparent 40%, rgba(255, 248, 226, 0.95) 50%, transparent 60%), linear-gradient(#f7d58a, #e7b04d 55%, #8f6420); background-size: 300% 100%, 100% 100%; background-position: 150% 0, 0 0; background-repeat: no-repeat; transform-origin: 50% 100%; }
.ftr__word span.is-shining { animation: shine 1.8s var(--ease) both; }
@keyframes shine { from { background-position: 150% 0, 0 0; } to { background-position: -60% 0, 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .idea__seed span { animation: none; }
  .has-skew .hl, .has-skew .ring__w { transform: none; }
}

/* =========================================================================
   V5 — liquid transitions · drag-to-scale · tilt · scramble · gallery · sound
   ========================================================================= */
.pt__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }

/* drag the logo */
.hero__grab { position: absolute; z-index: 3; cursor: grab; touch-action: auto; }
.is-grabbing, .is-grabbing * { cursor: grabbing; user-select: none; }

/* phone tilt */
.tilt { position: absolute; right: var(--gutter); bottom: 30px; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); color: var(--gold-hi); background: color-mix(in srgb, var(--bg) 70%, transparent); }
.tilt[hidden] { display: none; }
.has-tilt .viz, .has-tilt .reel__phone { transform: perspective(900px) rotateY(calc(var(--tx, 0) * 7deg)) rotateX(calc(var(--ty, 0) * -7deg)); transition: none; }

/* work gallery */
.wgal-sec { padding-bottom: var(--sec); }
.wgal { position: relative; overflow: hidden; padding-left: calc(max(0px, (100vw - var(--max)) / 2) + var(--gutter) + var(--rail-gap)); padding-block: 8px 24px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; }
.wgal:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.wgal.is-drag { cursor: grabbing; }
.wgal__track { display: flex; align-items: flex-start; gap: clamp(16px, 2.4vw, 36px); width: max-content; padding-right: calc(var(--gutter) + 8vw); will-change: transform; }
.wgal .wcard { flex: none; width: clamp(270px, 36vw, 560px); margin: 0; }
.wgal .wcard:nth-child(even) { margin-left: 0; margin-top: clamp(24px, 5vw, 80px); }
.wgal .wcard__art { transform: skewX(var(--gskew, 0deg)); }
.wgal__foot { display: flex; align-items: center; gap: 24px; margin-top: 28px; }
.wgal__bar { flex: 1; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.wgal__bar i { display: block; height: 100%; background: var(--fg); transform: scaleX(0.12); transform-origin: left; }
.wgal__hint { color: var(--fg-3); }
@media (max-width: 900px) { .wgal .wcard { width: 76vw; } .wgal .wcard:nth-child(even) { margin-top: 28px; } }

/* home work list: a trail of project cards */
.wpreview { display: none !important; }
.wtrail { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.wtrail__card { position: fixed; left: 0; top: 0; width: clamp(150px, 13vw, 210px); aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 14px; color: var(--cream);
  background: repeating-linear-gradient(-29deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 28px), radial-gradient(70% 90% at 85% 8%, color-mix(in srgb, var(--c) 85%, #fff), transparent 55%), linear-gradient(155deg, color-mix(in srgb, var(--c) 70%, var(--espresso)), var(--espresso) 80%);
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.6); }
.wtrail__card span { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.wtrail__card em { font-style: normal; font-size: 0.75rem; font-weight: 700; letter-spacing: -0.01em; }

/* sound toggle */
.snd { position: fixed; right: var(--gutter); bottom: calc(max(20px, env(safe-area-inset-bottom)) + 74px); z-index: 90; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 12px; border-radius: 99px; color: var(--fg); background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line); transition: transform 0.5s var(--ease); }
.snd:hover { transform: translateY(-2px); }
.snd__t { font-size: 0.65rem; }
.snd__eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.snd__eq i { width: 2px; height: 28%; border-radius: 1px; background: currentColor; }
.snd.is-on { color: var(--gold-hi); }
.snd.is-on .snd__eq i { animation: eq 0.8s ease-in-out infinite alternate; }
.snd.is-on .snd__eq i:nth-child(2) { animation-delay: -0.3s; } .snd.is-on .snd__eq i:nth-child(3) { animation-delay: -0.55s; } .snd.is-on .snd__eq i:nth-child(4) { animation-delay: -0.15s; }
@keyframes eq { 0% { height: 18%; } 100% { height: 100%; } }
.menu-open .snd { visibility: hidden; }
@media (max-width: 900px) { .snd { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 68px); } }
body[data-theme="light"] .snd.is-on { color: var(--gold-lo); }

@media (prefers-reduced-motion: reduce) {
  .has-tilt .viz, .has-tilt .reel__phone, .wgal .wcard__art { transform: none; }
}
.wgal .wcard__meta { flex-direction: column; align-items: flex-start; gap: 6px; }

/* =========================================================================
   Every device — the same motion on phones and tablets
   ========================================================================= */
.hero__grab { touch-action: none; -webkit-tap-highlight-color: transparent; }
.grab-hint { position: absolute; z-index: 3; display: none; transform: translateX(-100%); white-space: nowrap; pointer-events: none; color: var(--gold-hi); opacity: 0.85; animation: hintPulse 2.4s var(--ease) infinite; transition: opacity 0.5s; }
.grab-hint::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: currentColor; vertical-align: 1px; box-shadow: 0 0 10px var(--gold); }
@media (pointer: coarse) { .has-journey .grab-hint { display: block; } }
.grab-hint.is-used { opacity: 0; animation: none; }
@keyframes hintPulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.4; } }

/* phones: the services stage sticks to the top and the particles draw each service in it */
@media (max-width: 600px) {
  .branches__grid { display: flex; flex-direction: column; }
  .branches__stage { display: block; order: -1; position: sticky; top: calc(var(--hdr-h) - 1px); z-index: 2; padding-block: 8px 14px; background: var(--bg); transition: background-color 0.6s var(--ease); }
  .branches__stage::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 36px; background: linear-gradient(var(--bg), transparent); pointer-events: none; }
  .bstage { position: relative; top: auto; height: clamp(190px, 30svh, 260px); }
  .bstage__item { padding: 16px 16px 44px; }
  .bstage__count { left: 14px; bottom: 12px; }
  .bstage__name { right: 16px; bottom: 14px; font-size: 0.75rem; }
  .brow { min-height: 46svh; justify-content: flex-start; padding-block: 28px; opacity: 0.32; transition: opacity 0.6s var(--ease); }
  .brow.is-active { opacity: 1; }
  .brow__viz { display: none; }
}
@media (prefers-reduced-motion: reduce) { .grab-hint { display: none !important; } }
.tilt { right: auto; left: calc(var(--gutter) + var(--rail-gap)); bottom: 84px; pointer-events: auto; }
.has-journey .bstage__name { transition: opacity 0.5s var(--ease) 0.25s; }
.has-journey .bstage__item:not(.is-on) .bstage__name { opacity: 0; transition: opacity 0.15s; }

/* =========================================================================
   Mobile polish
   ========================================================================= */
@media (max-width: 600px) {
  /* hero: the mark sits centred and large; the words settle at the bottom */
  .hero__wrap { justify-content: flex-end; padding-top: calc(var(--hdr-h) + 272px); padding-bottom: 148px; }
  .hero__fallback { top: calc(var(--hdr-h) + 20px); right: auto; left: 50%; height: 220px; transform: translateX(-50%); }
  /* the seed orbits in the middle */
  .idea__seed { margin: 64px auto 0; width: 148px; }
  /* sound: a small round button so it covers less while you read */
  .snd { width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0; }
  .snd__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.build__wa { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
@media (max-width: 600px) { .idea { padding-bottom: 8px; } }
/* touch: bigger hit areas for small text links, without moving their underline */
@media (pointer: coarse), (max-width: 900px) {
  .cta__row a, .contact__big, .ftr__mail, .ftr__tel, .build__wa { position: relative; }
  .cta__row a::before, .contact__big::before, .ftr__mail::before, .ftr__tel::before, .build__wa::before, .hero__scroll::before { content: ""; position: absolute; inset: -10px -6px; }
}
@media (max-width: 600px) {
  .story__stage { height: clamp(220px, 32svh, 300px); }
  .story__labels span { font-size: 9.5px; letter-spacing: 0.04em; }
  .story__labels span:nth-child(even) { bottom: -16px; }
}
/* phones & tablets: the sound toggle lives in the header, beside the menu button */
@media (max-width: 900px) {
  .snd { top: calc(var(--hdr-h) / 2 - 22px); bottom: auto; right: calc(var(--gutter) + 62px); z-index: 101; width: 44px; height: 44px; padding: 0; gap: 0; justify-content: center; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .snd:hover { transform: none; }
  .snd__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.field select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23211C16' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 4px center / 14px 9px no-repeat; padding-right: 28px; }