/* ============================================================
   Benjamin Studio · Stylesheet
   Layout concept: a lush, dark-green world with warm gold light.
   Deep forest gradients, glowing gold outlines and glass cards,
   a serif display headline with the key word in italic gold, and the
   sunset-laptop artwork as the hero. One palette, every section.
   ============================================================ */

:root {
  --bg: #0E1B15;
  --bg-2: #142A20;
  --bg-3: #1B3529;
  --ink: #F3F0E7;
  --muted: rgba(243, 240, 231, 0.72);
  --faint: rgba(243, 240, 231, 0.5);
  --gold: #E6C98C;
  --gold-deep: #C9A866;
  --gold-glow: rgba(230, 201, 140, 0.35);
  --line: rgba(230, 201, 140, 0.22);
  --line-soft: rgba(243, 240, 231, 0.12);
  --glass: rgba(255, 255, 255, 0.05);
  --glass-strong: rgba(255, 255, 255, 0.09);
  --error: #F0A79A;
  --error-bg: rgba(240, 120, 100, 0.12);

  --font-display: "Playfair Display", "Iowan Old Style", "TeX Gyre Pagella", Georgia, serif;
  --font-body: "DM Sans", "Inter", "Segoe UI", Helvetica, Arial, sans-serif;

  --step--1: clamp(0.85rem, 0.82rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --step-3: clamp(2.2rem, 1.5rem + 3vw, 3.8rem);
  --step-4: clamp(2.6rem, 1.5rem + 4.4vw, 5.2rem);

  --container: 86rem;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; overflow-x: clip; color-scheme: dark; }
body { margin: 0; font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65; color: var(--ink); background-color: var(--bg); background-image: radial-gradient(1200px 700px at 85% -10%, rgba(230, 201, 140, 0.12), transparent 60%), radial-gradient(900px 600px at 0% 40%, rgba(56, 110, 80, 0.35), transparent 60%), linear-gradient(180deg, #0E1B15, #142A20 50%, #0E1B15); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: -0.01em; text-wrap: balance; color: var(--ink); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 100; background: var(--gold); color: #0E1B15; padding: 0.75rem 1rem; border-radius: 6px; }
.skip-link:focus { top: 0.75rem; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
@media (min-width: 1100px) { .container { padding-left: max(4rem, env(safe-area-inset-left, 0px)); padding-right: max(4rem, env(safe-area-inset-right, 0px)); } }

/* ---------- Cursor trail ---------- */
.trail { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

/* ---------- Typography helpers ---------- */
.eyebrow { display: block; font-size: 0.74rem; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 500; color: var(--gold); margin-bottom: 1.25rem; }
.display { font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.015em; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.5); }
.section__title { font-size: var(--step-3); max-width: 20ch; }
em.hl { font-style: italic; color: var(--gold); text-shadow: 0 0 24px rgba(230, 201, 140, 0.45); }
.section__intro { color: var(--muted); max-width: 36rem; margin-top: 1.25rem; line-height: 1.75; }
.lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink); margin-bottom: 1.25rem; }
.arrow { font-size: 1.05em; line-height: 1; }
.play { font-size: 0.9em; }
.textlink { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.92rem; font-weight: 500; color: var(--gold); padding-bottom: 0.35rem; border-bottom: 1px solid var(--line); transition: gap 0.25s var(--ease), border-color 0.2s; }
.textlink:hover { gap: 1rem; border-bottom-color: var(--gold); }
.gold-rule { display: block; width: 3rem; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); margin-top: 1.5rem; box-shadow: 0 0 12px var(--gold-glow); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; border-radius: 999px; padding: 1rem 1.75rem; font-size: 0.95rem; font-weight: 500; white-space: nowrap; transition: transform 0.25s var(--ease), box-shadow 0.3s, background-color 0.25s, color 0.25s; text-align: center; }
.btn:hover { transform: translateY(-2px); }
.btn--gold { background: linear-gradient(135deg, #F4E0B4, #E2C286); color: #1A2A1F; box-shadow: 0 0 0 1px rgba(255, 240, 200, 0.6), 0 0 28px var(--gold-glow); }
.btn--gold:hover { box-shadow: 0 0 0 1px #fff3d0, 0 0 40px rgba(230, 201, 140, 0.6); }
.btn--outline { background: rgba(255, 255, 255, 0.03); color: var(--ink); border: 1px solid var(--gold); box-shadow: 0 0 18px rgba(230, 201, 140, 0.15), inset 0 0 18px rgba(230, 201, 140, 0.06); }
.btn--outline:hover { background: rgba(230, 201, 140, 0.12); box-shadow: 0 0 28px rgba(230, 201, 140, 0.3); }
.btn--small { padding: 0.7rem 1.25rem; font-size: 0.85rem; }
.btn--dark { background: var(--gold); color: #1A2A1F; }
.btn--dark:hover { background: #F0D9A6; }
.btn--light { background: var(--glass-strong); color: var(--ink); border: 1px solid var(--line-soft); }
.btn--block { width: 100%; justify-content: space-between; }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.7; cursor: wait; transform: none; }
.btn__spinner { display: none; width: 1em; height: 1em; border: 2px solid rgba(26, 42, 31, 0.3); border-top-color: #1A2A1F; border-radius: 50%; animation: spin 0.8s linear infinite; }
.btn[aria-busy="true"] .btn__spinner { display: inline-block; }
.btn[aria-busy="true"] .arrow { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.glass { background: var(--glass); border: 1px solid var(--line); border-radius: 18px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 30px rgba(230, 201, 140, 0.08), 0 30px 60px -40px rgba(0, 0, 0, 0.8); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: linear-gradient(to bottom, rgba(14, 27, 21, 0.55), rgba(14, 27, 21, 0)); transition: background-color 0.3s, box-shadow 0.3s; }
.site-header.is-scrolled { background: rgba(14, 27, 21, 0.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--line-soft); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 5.25rem; }
.logo { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--ink); }
.leaf-logo { width: 2.5rem; height: 2.5rem; fill: none; stroke: var(--gold); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px var(--gold-glow)); flex: 0 0 auto; }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name { font-size: 1.05rem; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 600; }
.logo__tag { font-size: 0.68rem; letter-spacing: 0.44em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-top: 0.3rem; }
.site-nav { display: flex; align-items: center; gap: 2.5rem; }
.site-nav__list { display: flex; gap: 2.25rem; }
.site-nav__list a { font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; color: var(--ink); padding: 0.4rem 0; position: relative; }
.site-nav__list a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--gold); box-shadow: 0 0 10px var(--gold-glow); transition: right 0.35s var(--ease); }
.site-nav__list a:hover::after, .site-nav__list a.is-active::after { right: 0; }
.site-nav__extras { display: flex; align-items: center; gap: 1.75rem; }
.lang { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; letter-spacing: 0.14em; font-weight: 500; }
.lang a { color: var(--muted); padding: 0.2rem 0.1rem; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.lang a:hover { color: var(--ink); }
.lang a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }
.lang__sep { color: var(--line); }
.menu-toggle { display: none; padding: 0.5rem; }
.menu-toggle__bars { display: block; width: 26px; height: 16px; position: relative; }
.menu-toggle__bars i { position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--gold); transition: transform 0.3s var(--ease), opacity 0.2s, top 0.3s var(--ease); }
.menu-toggle__bars i:nth-child(1) { top: 0; } .menu-toggle__bars i:nth-child(2) { top: 7px; } .menu-toggle__bars i:nth-child(3) { top: 14px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(1) { top: 7px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* ---------- Sections & split ---------- */
.section { padding-block: clamp(4.5rem, 8vw, 7rem); position: relative; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.split--head { align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.split--head .section__intro { margin-top: 0; justify-self: end; max-width: 30rem; }
.split__b p + p { margin-top: 1.25rem; }
.split__b .textlink { margin-top: 2rem; }

/* ---------- Hero (full-bleed artwork) ---------- */
.hero { position: relative; overflow: hidden; margin-top: -5.25rem; padding-top: 7rem; min-height: min(100vh, 60rem); display: flex; flex-direction: column; justify-content: center; }
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.scene { display: block; width: 100%; height: 100%; }
.scene--phone { display: none; }
.hero__zoom { position: absolute; inset: 0; animation: slowZoom 30s ease-in-out infinite alternate; transform-origin: 72% 30%; }
/* Laptop screen slideshow: a 1600×1000 layer that main.js maps onto the screen with matrix3d */
.hero__screen { position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; transform-origin: 0 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 0.6s; backface-visibility: hidden; outline: 1px solid transparent; }
.hero__screen.is-ready { opacity: 1; }
.screen-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; background: #F7F1E8; }
.screen-slide--logo { background: transparent; }
.screen-slide.is-on, .screen-slide.is-leaving { opacity: 1; }
.screen-slide.is-leaving { opacity: 0; }
.screen-pan { transform: translateY(0); }
.screen-slide.is-on .screen-pan { transition: transform 3.8s cubic-bezier(0.45, 0, 0.35, 1) 0.6s; transform: translateY(var(--pan, 0px)); }
.screen-slide.is-leaving .screen-pan { transform: translateY(var(--pan, 0px)); }
.screen-pan img { display: block; width: 100%; height: auto; }
.screen-mock { width: 1600px; }
.screen-gloss { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s; background: linear-gradient(120deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 28%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.16) 100%); }
.hero__screen.is-showing .screen-gloss { opacity: 1; }
.leaf-logo .vein, .scene .vein { stroke-width: 1.6; opacity: 0.75; }
.scene__name { font-family: var(--font-display); font-style: italic; font-size: 60px; letter-spacing: 0.34em; fill: #F4EEDD; }
.scene__tag { font-family: var(--font-display); font-style: italic; font-size: 38px; letter-spacing: 0.5em; fill: #E3D2A8; opacity: 0.92; }

.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(14, 27, 21, 0.5) 0%, rgba(14, 27, 21, 0.25) 30%, rgba(14, 27, 21, 0) 50%), linear-gradient(to bottom, rgba(14, 27, 21, 0.15), transparent 20%, transparent 75%, rgba(14, 27, 21, 0.8) 100%); pointer-events: none; }
@keyframes screenGlow { from { opacity: 0.85; } to { opacity: 1; } }
.hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem; align-items: center; flex: 1; padding-bottom: 2rem; }
.hero__copy { position: relative; animation: rise 1s var(--ease) both; }
.hero__copy .display { max-width: 15ch; }
.hero__desc { color: var(--ink); opacity: 0.92; max-width: 28rem; margin-top: 1.5rem; font-size: var(--step-1); line-height: 1.5; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2.25rem; }
.hero__art { display: none; }
.hero > .container:last-child { position: relative; z-index: 2; }
.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 2rem; margin-top: 1rem; margin-bottom: 3rem; padding: 1.25rem 1.5rem; border-radius: 16px; background: rgba(14, 27, 21, 0.45); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 30px rgba(230, 201, 140, 0.1); }
.feature { display: flex; align-items: center; gap: 1rem; padding-right: 1rem; border-right: 1px solid var(--line-soft); }
.feature:last-child { border-right: 0; }
.feature__icon { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; color: var(--gold); filter: drop-shadow(0 0 6px var(--gold-glow)); }
.feature__icon svg, .step__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.feature b { display: block; font-weight: 600; font-size: 1rem; }
.feature small { display: block; color: var(--muted); font-size: 0.85rem; }
@keyframes slowZoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Process (glass cards) ---------- */
.process { margin-top: 0; padding-top: 2rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.process__layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.step { position: relative; padding: 1.75rem 1.5rem 3rem; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s; }
.step:hover { transform: translateY(-4px); border-color: rgba(230, 201, 140, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 40px rgba(230, 201, 140, 0.18), 0 30px 60px -40px rgba(0, 0, 0, 0.9); }
.step__icon { display: block; width: 2.4rem; height: 2.4rem; color: var(--gold); margin-bottom: 1.5rem; filter: drop-shadow(0 0 6px var(--gold-glow)); }
.step__title { font-family: var(--font-body); font-size: 1.3rem; font-weight: 600; display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.6rem; }
.step__num { color: var(--gold); font-weight: 400; font-size: 1.15rem; }
.step__desc { color: var(--muted); font-size: 0.92rem; line-height: 1.6; }
.step__arrow { position: absolute; left: 1.5rem; bottom: 1.1rem; color: var(--gold); font-size: 1.2rem; }

/* ---------- Work ---------- */
.work { }
.stage { margin-bottom: clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.stage__label { font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; color: var(--gold); margin-bottom: 1rem; }
.switcher__tabs { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; }
.switcher__tab { font-family: var(--font-display); font-size: var(--step-1); color: var(--muted); padding: 0.35rem 0; border-bottom: 1px solid transparent; transition: color 0.25s, border-color 0.25s, padding-left 0.3s var(--ease); }
.switcher__tab:hover { color: var(--ink); }
.switcher__tab.is-active { color: var(--gold); border-bottom-color: var(--gold); padding-left: 0.6rem; }
.stage__hint { margin-top: 1.25rem; font-size: var(--step--1); color: var(--muted); max-width: 20rem; }
.stage__view { position: relative; aspect-ratio: 16 / 10; max-width: 38rem; width: 100%; overflow: hidden; border-radius: 14px; -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); }
.stage__scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.9s var(--ease), visibility 0s linear 0.7s; }
.stage__scene.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.stage__desktop { position: absolute; left: 0; right: 12%; top: 3%; }
.stage__desktop .mock--desktop { box-shadow: 0 0 0 1px var(--line), 0 40px 70px -40px rgba(0, 0, 0, 0.9); }
.stage__mobile { position: absolute; right: 2%; top: 16%; width: 24%; max-width: 150px; }
.stage__mobile .mock--mobile { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem); }
.project:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; align-items: end; }
.project__visual { padding: 7% 7% 0; max-height: 26rem; background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.5s var(--ease); }
.project__open { display: block; width: 100%; text-align: left; }
.project__open .mock--desktop { border-radius: 6px 6px 0 0; border-bottom: 0; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9); transition: transform 0.6s var(--ease); }
.project__open:hover .mock--desktop { transform: translateY(-6px); }
.project__text { padding-top: 1.25rem; }
.project__index { display: block; font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-bottom: 0.6rem; }
.project__name { font-size: var(--step-2); }
.project__type { font-size: var(--step--1); color: var(--muted); margin-top: 0.3rem; }
.project__summary { color: var(--muted); max-width: 32rem; margin-top: 0.9rem; }
.project__text .textlink { margin-top: 1.25rem; }
.swipe-hint { display: none; }
.disclosure { margin-top: 2rem; font-size: 0.78rem; color: var(--faint); max-width: 60ch; }
.ba { margin-top: clamp(4rem, 8vw, 7rem); padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line-soft); }
.ba .section__title { font-size: var(--step-2); }

/* ---------- Website mockups (shared chrome + four distinct layouts) ---------- */
.mock { container-type: inline-size; width: 100%; font-family: var(--font-body); color: var(--m-ink); --m-bg: #fff; --m-ink: #222; --m-accent: #444; --m-btn-fg: #fff; --m-soft: #eee; --m-display: var(--font-display); }
.mock--skincare { --m-bg: #FCF7F4; --m-ink: #4A2A33; --m-accent: #B65A6A; --m-soft: #F4E2DC; --m-art: linear-gradient(170deg, #F0CFC4, #B65A6A); }
.mock--contractor { --m-bg: #FFFFFF; --m-ink: #15213A; --m-accent: #E0A030; --m-btn-fg: #15213A; --m-soft: #EDF0F5; --m-art: linear-gradient(160deg, #2B3F63, #15213A); --m-display: var(--font-body); }
.mock--restaurant { --m-bg: #FBF7F0; --m-ink: #3B2A1E; --m-accent: #8A3B2E; --m-soft: #F1E8DB; --m-art: linear-gradient(160deg, #6B2E22, #2A1711); }
.mock--desktop { border-radius: 8px; overflow: hidden; background: var(--m-bg); border: 1px solid rgba(0, 0, 0, 0.08); }
.mock__chrome { display: flex; align-items: center; gap: 5px; padding: 2.2cqi 2.5cqi; background: #E9E8E4; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.mock__chrome span { width: 1.6cqi; height: 1.6cqi; border-radius: 50%; background: #C6C4BE; }
.mock__url { flex: 1; height: 2.6cqi; margin-left: 2cqi; border-radius: 999px; background: #fff; }
.mock__site { padding: 0; }
.mock__nav { display: flex; align-items: center; justify-content: space-between; gap: 3cqi; padding: 2.4cqi 4cqi; font-size: 2cqi; }
.mock__nav--center { justify-content: center; gap: 6cqi; }
.mock__nav--light { color: #fff; }
.mock__nav--light .mock__brand { color: #fff; }
.mock__brand { font-family: var(--m-display); font-size: 3cqi; font-weight: 600; color: var(--m-ink); white-space: nowrap; }
.mock__links { display: flex; gap: 2.4cqi; }
.mock__links i { font-style: normal; font-weight: 500; opacity: 0.8; }
.mock__pill, .mock__btn { font-style: normal; display: inline-block; background: var(--m-accent); color: var(--m-btn-fg); font-weight: 600; border-radius: 999px; white-space: nowrap; }
.mock__pill { padding: 1cqi 2.4cqi; font-size: 1.9cqi; }
.mock__btn { padding: 1.6cqi 3.2cqi; font-size: 2cqi; }
.mock__btn--outline { background: transparent; color: var(--m-ink); border: 1px solid var(--m-ink); }
.mock h4 { font-family: var(--m-display); line-height: 1.05; color: var(--m-ink); margin: 0; font-weight: 500; }
.mock p { line-height: 1.45; opacity: 0.8; margin: 0; }
.mock span, .mock small, .mock strong, .mock b { display: block; }
.mock .mock__links { display: flex; }
.mock .mock__links i, .mock .mk__strip span { display: inline-block; }
.mock__burger { display: flex; flex-direction: column; gap: 1.6cqi; }
.mock__burger i { width: 7cqi; height: 1.1cqi; background: var(--m-ink); border-radius: 2px; }
.mock__nav--light .mock__burger i { background: #fff; }

/* Cleaning (Gloria's): cream + sage, serif headline, sunlit photo, schedule band, icon services, leafy CTA */
.mock--cleaning { --m-bg: #F7F1E8; --m-ink: #2B2F28; --m-accent: #2E4A3A; --m-soft: #D9E2CF; --m-display: var(--font-display); }
.mock--cleaning .mock__chrome { background: #EDE6DA; }
.mg__nav { display: flex; align-items: center; justify-content: space-between; gap: 3cqi; padding: 2.6cqi 4cqi; }
.mock .mg__brand { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 1cqi; align-items: end; color: var(--m-accent); }
.mg__leaf { grid-row: span 2; width: 6cqi; height: 6cqi; align-self: center; }
.mg__brand b { font-family: var(--m-display); font-size: 4.4cqi; line-height: 0.95; color: var(--m-ink); font-weight: 400; }
.mg__brand small { font-size: 1.3cqi; letter-spacing: 0.18em; text-transform: uppercase; color: var(--m-ink); font-weight: 600; }
.mock .mg__links { display: flex; gap: 3cqi; font-size: 2cqi; align-items: center; }
.mock .mg__links i { display: inline-block; }
.mg__ph { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; margin-right: 0.3em; }
.mg__links i { font-style: normal; }
.mg__lang { letter-spacing: 0.05em; white-space: nowrap; }
.mg__pill { font-style: normal; background: var(--m-accent); color: #fff; font-size: 1.9cqi; font-weight: 600; padding: 1.3cqi 2.6cqi; border-radius: 1.2cqi; white-space: nowrap; }
.mg__hero { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3cqi; align-items: center; padding: 1.5cqi 4cqi 3cqi; }
.mg__eyebrow { font-size: 1.5cqi; letter-spacing: 0.18em; text-transform: uppercase; color: #5E6E5E; font-weight: 600; margin-bottom: 1.6cqi; }
.mg__text h4 { font-family: var(--m-display); font-size: 5.6cqi; line-height: 1.02; color: var(--m-ink); margin-bottom: 1.6cqi; letter-spacing: -0.01em; }
.mg__text p { font-size: 2.1cqi; line-height: 1.4; margin-bottom: 2.4cqi; opacity: 0.85; }
.mg__btns { display: flex; gap: 1.4cqi; margin-bottom: 2cqi; }
.mg__btn { font-style: normal; display: inline-block; background: var(--m-accent); color: #fff; font-size: 2cqi; font-weight: 600; padding: 1.6cqi 2.6cqi; border-radius: 1cqi; white-space: nowrap; }
.mg__btn--outline { background: transparent; color: var(--m-accent); border: 1px solid var(--m-accent); }
.mg__phone { font-family: var(--m-display); font-size: 3.6cqi; color: var(--m-accent); font-weight: 400; }
.mg__photo { aspect-ratio: 11 / 10; border-radius: 2cqi; background: var(--g-room) center / cover no-repeat, #E6DCCB; }
.mg__band { display: flex; justify-content: center; gap: 2.4cqi; padding: 1.6cqi 4cqi; background: var(--m-soft); font-family: var(--m-display); font-size: 2.2cqi; letter-spacing: 0.08em; color: var(--m-accent); }
.mg__band i { font-style: normal; opacity: 0.6; }
.mg__services { padding: 3.5cqi 4cqi 1cqi; text-align: center; }
.mg__services h5 { font-family: var(--m-display); font-size: 4.4cqi; font-weight: 400; margin: 0 0 3cqi; color: var(--m-ink); }
.mg__cols { display: grid; grid-template-columns: repeat(3, 1fr); }
.mg__cols > div { padding: 0 3cqi; border-left: 1px solid rgba(43, 47, 40, 0.15); }
.mg__cols > div:first-child { border-left: 0; }
.mg__icon { display: block; width: 6.5cqi; height: 6.5cqi; margin: 0 auto 1.6cqi; color: var(--m-accent); }
.mg__cols b { display: block; font-family: var(--m-display); font-size: 2.6cqi; white-space: nowrap; font-weight: 400; margin-bottom: 1cqi; color: var(--m-ink); }
.mg__cols p { font-size: 1.8cqi; line-height: 1.4; opacity: 0.8; margin: 0; }
.mg__cta { display: grid; grid-template-columns: 0.8fr 1.2fr; margin: 3cqi 4cqi 0; border-radius: 2cqi; overflow: hidden; background: var(--m-soft); }
.mg__cta-leaf { background: var(--g-leaf) center / cover no-repeat, #CFDAC3; min-height: 26cqi; }
.mg__cta-text { padding: 3.5cqi 4cqi 3.5cqi 3cqi; }
.mg__cta-text h4 { font-family: var(--m-display); font-size: 4.6cqi; line-height: 1.02; color: var(--m-ink); margin-bottom: 1.4cqi; }
.mg__cta-text p { font-size: 2cqi; line-height: 1.4; opacity: 0.85; margin-bottom: 1.6cqi; }
.mg__cta-text .mg__phone { display: block; margin-bottom: 1.6cqi; }
.mg__footer { display: flex; align-items: center; justify-content: space-between; gap: 3cqi; padding: 3cqi 4cqi 0.5cqi; font-size: 1.9cqi; }
.mg__footer i { font-family: var(--m-display); color: #7A7D74; }
/* Gloria's on the phone */
.mock--mobile .mg__nav { padding: 11cqi 6cqi 4cqi; }
.mock--mobile .mg__leaf { width: 9cqi; height: 9cqi; }
.mock--mobile .mg__brand b { font-size: 7cqi; }
.mock--mobile .mg__brand small { font-size: 2cqi; }
.mock--mobile .mg__photo { margin: 0 6cqi; aspect-ratio: 16 / 11; border-radius: 3cqi; }
.mock--mobile .mg__text { padding: 5cqi 6cqi 4cqi; }
.mock--mobile .mg__eyebrow { font-size: 2.6cqi; }
.mock--mobile .mg__text h4 { font-size: 8.6cqi; margin-bottom: 3cqi; }
.mock--mobile .mg__text .mg__btn { font-size: 3.4cqi; padding: 2.8cqi 5cqi; display: block; text-align: center; margin-bottom: 3cqi; }
.mock--mobile .mg__phone { font-size: 6cqi; }
.mock--mobile .mg__band { font-size: 3.2cqi; gap: 2.5cqi; padding: 2.6cqi 4cqi; }
.mock--mobile .mg__services { padding: 4cqi 6cqi; }
.mock--mobile .mg__cols { grid-template-columns: 1fr 1fr; }
.mock--mobile .mg__icon { width: 10cqi; height: 10cqi; }
.mock--mobile .mg__cols b { font-size: 4.2cqi; }

/* Skincare: editorial split, tall portrait, treatment menu with prices */
.ms__hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 5cqi; padding: 2cqi 5cqi 4cqi; align-items: stretch; }
.ms__text { display: flex; flex-direction: column; justify-content: center; }
.ms__text h4 { font-size: 6.4cqi; margin-bottom: 1.8cqi; letter-spacing: -0.01em; }
.ms__text p { font-size: 2.1cqi; margin-bottom: 2.6cqi; max-width: 34cqi; }
.ms__text .mock__btn { align-self: flex-start; }
.ms__photo { aspect-ratio: 4 / 5; border-radius: 40cqi 40cqi 4px 4px; background: var(--m-art); position: relative; overflow: hidden; }
.ms__photo i { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; right: -20%; bottom: -10%; background: rgba(255, 255, 255, 0.25); }
.ms__menu { padding: 0 5cqi 4cqi; }
.ms__menu > b { font-family: var(--m-display); font-size: 3cqi; margin-bottom: 1.4cqi; }
.ms__menu > div { display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content; gap: 3cqi; align-items: baseline; padding: 1.5cqi 0; border-top: 1px solid rgba(0, 0, 0, 0.1); font-size: 2cqi; }
.ms__menu small, .ms__menu strong { white-space: nowrap; }
.ms__menu small { font-size: 1.7cqi; opacity: 0.6; }
.ms__menu strong { font-weight: 600; }
.ms__note { font-size: 1.7cqi; opacity: 0.6; margin-top: 1.4cqi; }
.mock--mobile .ms__photo { margin: 0 6cqi; aspect-ratio: 5 / 4; border-radius: 50cqi 50cqi 4px 4px; }
.mock--mobile .ms__text { padding: 5cqi 6cqi 3cqi; }
.mock--mobile .ms__text h4 { font-size: 9cqi; margin-bottom: 3cqi; }
.mock--mobile .ms__text .mock__btn { font-size: 3.5cqi; padding: 2.6cqi 5cqi; }
.mock--mobile .ms__menu { padding: 0 6cqi 4cqi; }
.mock--mobile .ms__menu > div { grid-template-columns: 1fr auto; font-size: 3.4cqi; padding: 2.4cqi 0; }

/* Contractor: dark top bar with phone, bold hero, badge strip, service tiles */
.mk__top { display: flex; align-items: center; justify-content: space-between; gap: 3cqi; padding: 2.2cqi 4cqi; background: #15213A; color: #fff; font-size: 2cqi; }
.mk__top .mock__brand { color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.mk__top .mock__links i { opacity: 0.8; }
.mk__phone { font-weight: 800; color: var(--m-accent); white-space: nowrap; font-size: 2.3cqi; }
.mk__hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4cqi; align-items: center; padding: 4cqi 4cqi 3cqi; }
.mk__text h4 { font-size: 6.2cqi; font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase; line-height: 0.98; margin-bottom: 1.6cqi; }
.mk__text p { font-size: 2.1cqi; margin-bottom: 2.4cqi; }
.mk__text .mock__btn { border-radius: 4px; font-weight: 800; }
.mk__photo { aspect-ratio: 4 / 3; border-radius: 4px; background: var(--m-art); position: relative; overflow: hidden; }
.mk__photo i { position: absolute; background: rgba(255, 255, 255, 0.1); }
.mk__photo i:first-child { width: 70%; height: 40%; right: -10%; bottom: 0; transform: skewX(-20deg); }
.mk__photo i:last-child { width: 30%; height: 100%; left: 10%; top: 0; transform: skewX(-20deg); background: rgba(224, 160, 48, 0.25); }
.mk__strip { display: flex; justify-content: space-between; gap: 2cqi; padding: 1.8cqi 4cqi; overflow: hidden; background: var(--m-accent); color: #15213A; font-size: 1.8cqi; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.mk__strip span { white-space: nowrap; }
.mk__services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqi; padding: 3cqi 4cqi 3.5cqi; }
.mk__services div { border: 1px solid #DDE2EA; border-radius: 4px; padding: 2cqi; }
.mk__services i { display: block; width: 4cqi; height: 4cqi; background: #15213A; border-radius: 3px; margin-bottom: 1.4cqi; }
.mk__services b { font-size: 2cqi; font-weight: 700; margin-bottom: 1.2cqi; }
.mk__services span { height: 1cqi; background: #DDE2EA; border-radius: 2px; margin-bottom: 0.8cqi; width: 90%; }
.mk__services span + span { width: 60%; }
.mock--mobile .mk__top { padding: 10cqi 6cqi 4cqi; font-size: 3.4cqi; }
.mock--mobile .mk__top .mock__brand { font-size: 5cqi; }
.mock--mobile .mk__phone { font-size: 3.6cqi; }
.mock--mobile .mk__photo { margin: 0; border-radius: 0; aspect-ratio: 16 / 9; }
.mock--mobile .mk__text { padding: 5cqi 6cqi 4cqi; }
.mock--mobile .mk__text h4 { font-size: 9.5cqi; margin-bottom: 3cqi; }
.mock--mobile .mk__text .mock__btn { font-size: 3.6cqi; padding: 3cqi 5cqi; display: block; text-align: center; }
.mock--mobile .mk__strip { font-size: 2.8cqi; padding: 3cqi 6cqi; flex-direction: column; gap: 1.2cqi; }

/* Restaurant: full-bleed dark hero with centered type, menu columns */
.mr__hero { background: var(--m-art); color: #fff; padding-bottom: 5cqi; position: relative; overflow: hidden; }
.mr__hero::before { content: ""; position: absolute; width: 70cqi; height: 70cqi; border-radius: 50%; right: -25cqi; top: -20cqi; background: radial-gradient(circle, rgba(217, 160, 102, 0.5), transparent 65%); }
.mr__hero > * { position: relative; }
.mr__hero .mock__links i { color: #fff; }
.mr__center { text-align: center; padding: 3cqi 14% 1cqi; }
.mr__center h4 { color: #fff; font-size: 6.6cqi; margin-bottom: 1.6cqi; font-style: italic; }
.mr__center p { color: rgba(255, 255, 255, 0.85); font-size: 2.1cqi; margin-bottom: 2cqi; }
.mr__center small { font-size: 1.8cqi; letter-spacing: 0.14em; text-transform: uppercase; color: #D9A066; }
.mr__menu { padding: 3.5cqi 5cqi 4cqi; }
.mr__menu > b { font-family: var(--m-display); font-size: 3cqi; margin-bottom: 1.6cqi; text-align: center; }
.mr__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqi; }
.mr__items div { border-top: 1px solid rgba(0, 0, 0, 0.12); padding-top: 1.6cqi; font-size: 2cqi; }
.mr__items strong { color: var(--m-accent); margin-top: 0.6cqi; }
.mock--mobile .mr__hero { padding-bottom: 7cqi; }
.mock--mobile .mr__hero .mock__nav { padding: 11cqi 6cqi 4cqi; }
.mock--mobile .mr__center { padding: 4cqi 8cqi 0; }
.mock--mobile .mr__center h4 { font-size: 9.5cqi; margin-bottom: 2.5cqi; }
.mock--mobile .mr__center small { font-size: 3cqi; margin-bottom: 3.5cqi; }
.mock--mobile .mr__center .mock__pill { font-size: 3.4cqi; padding: 2.4cqi 5cqi; }
.mock--mobile .mr__menu { padding: 5cqi 6cqi; }
.mock--mobile .mr__menu > div { display: flex; justify-content: space-between; gap: 3cqi; border-top: 1px solid rgba(0, 0, 0, 0.12); padding: 2.6cqi 0; font-size: 3.4cqi; }
.mock--mobile .mr__menu strong { color: var(--m-accent); }

/* Phone frame */
.mock--mobile { aspect-ratio: 9 / 18.5; border-radius: 12% / 5.85%; background: #121317; padding: 3.5%; position: relative; }
.mock--mobile .mock__site { height: 100%; border-radius: 9cqi; background: var(--m-bg); overflow: hidden; display: flex; flex-direction: column; }
.mock__notch { position: absolute; top: 5cqi; left: 50%; transform: translateX(-50%); width: 30%; height: 4cqi; border-radius: 999px; background: #121317; z-index: 2; }
.mock--mobile .mock__nav { padding: 11cqi 6cqi 4cqi; }
.mock--mobile .mock__brand { font-size: 5.5cqi; }


/* ---------- Before / after ---------- */
.ba { margin-top: clamp(4rem, 8vw, 7rem); padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line-dark); }
.ba__head { margin-bottom: 2.5rem; max-width: 46rem; }
.ba__title { font-size: var(--step-3); }
.ba__stage { position: relative; aspect-ratio: 16 / 9; max-width: 46rem; margin-inline: auto; border-radius: 10px; overflow: hidden; background: #D8DFD1; box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 0.7); user-select: none; touch-action: pan-y; cursor: ew-resize; }
.ba__after, .ba__before { position: absolute; inset: 0; padding: 3% 5% 0; }

.ba__after .mock--desktop, .oldsite { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5); }
.ba__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); background: #D9D7D1; }
.ba__label { position: absolute; top: 1rem; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; padding: 0.45em 0.9em; border-radius: 999px; }
.ba__label--after { right: 1rem; background: var(--gold); color: #1A2A1F; }
.ba__label--before { left: 1rem; background: #fff; color: #1A2A1F; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); }
.ba__handle span { position: absolute; top: 50%; left: 50%; width: 3rem; height: 3rem; border-radius: 50%; background: var(--gold); transform: translate(-50%, -50%); box-shadow: 0 0 20px var(--gold-glow); }
.ba__handle span::before, .ba__handle span::after { content: ""; position: absolute; top: 50%; width: 0.45rem; height: 0.45rem; border-top: 1.5px solid #1A2A1F; border-left: 1.5px solid #1A2A1F; }
.ba__handle span::before { left: 32%; transform: translateY(-50%) rotate(-45deg); }
.ba__handle span::after { right: 32%; transform: translateY(-50%) rotate(135deg); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba__stage:has(.ba__range:focus-visible) { outline: 2px solid var(--gold); outline-offset: 4px; }
.ba__hint { margin-top: 1rem; text-align: center; font-size: var(--step--1); color: var(--muted); }
/* The deliberately dated "before" website */
.oldsite { container-type: inline-size; font-family: "Times New Roman", Times, serif; background: #fff; border: 1px solid #999; }
.oldsite__bar { display: flex; align-items: center; gap: 5px; padding: 2.2cqi 2.5cqi; background: #DCDCDC; border-bottom: 1px solid #aaa; }
.oldsite__bar span { width: 1.6cqi; height: 1.6cqi; border-radius: 50%; background: #aaa; }
.oldsite__bar i { flex: 1; height: 2.6cqi; margin-left: 2cqi; background: #fff; border: 1px solid #bbb; }
.oldsite__page { padding: 2cqi 3cqi 3cqi; color: #000; }
.oldsite__header { background: #1F4E9C; color: #fff; padding: 2cqi 3cqi; }
.oldsite__header b { display: block; font-size: 4.2cqi; }
.oldsite__tagline { display: block; font-size: 2.2cqi; color: #FFD700; font-style: italic; }
.oldsite__nav { font-size: 2.2cqi; color: #0000EE; padding: 1.6cqi 0; border-bottom: 1px solid #999; }
.oldsite__cols { display: grid; grid-template-columns: 2.2fr 1fr; gap: 3cqi; padding-top: 2cqi; }
.oldsite__main p { font-size: 2.3cqi; line-height: 1.4; margin: 0 0 1.6cqi; }
.oldsite__phone { font-weight: 700; color: #C00; font-size: 2.6cqi !important; }
.oldsite__img { height: 16cqi; background: repeating-linear-gradient(45deg, #e6e6e6 0 6px, #f6f6f6 6px 12px); border: 1px solid #aaa; }
.oldsite__side i { display: block; height: 7cqi; margin-bottom: 1.6cqi; background: #EFEFEF; border: 1px solid #bbb; }
.oldsite__side small { font-size: 1.9cqi; color: #666; }



/* ---------- Services (difference) ---------- */
.difference { }
.difference__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.difference__flower { display: block; width: 3rem; height: 3rem; flex: none; color: var(--gold); line-height: 1; animation: spinSlow 40s linear infinite; filter: drop-shadow(0 0 10px var(--gold-glow)); }
.difference__flower svg { display: block; width: 100%; height: 100%; }
.difference__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.diff { padding: 2rem 1.75rem; background: var(--glass); border: 1px solid var(--line); border-radius: 18px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: transform 0.4s var(--ease), border-color 0.3s; }
.diff:hover { transform: translateY(-4px); border-color: rgba(230, 201, 140, 0.5); }
.diff__num { display: block; font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-bottom: 1.25rem; }
.diff__title { font-size: var(--step-2); max-width: 14ch; margin-bottom: 1rem; }
.diff__desc { color: var(--muted); font-size: var(--step--1); line-height: 1.75; }
.included { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 2.5rem; border-top: 1px solid var(--line-soft); }
.included__title { font-size: var(--step-1); margin-bottom: 1.75rem; }
.included__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.included__grid b { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.included__grid span { display: block; font-size: var(--step--1); color: var(--muted); line-height: 1.7; }
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* ---------- About (intention) ---------- */
.intention { }
.person { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1.25rem; align-items: center; margin-top: 2.5rem; }
.person__initial { grid-row: span 2; width: 4rem; height: 4rem; border-radius: 50%; border: 1px solid var(--gold); display: grid; place-items: center; font-family: var(--font-display); font-style: italic; font-size: 1.75rem; color: var(--gold); box-shadow: 0 0 18px var(--gold-glow); }
.person__name { font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--gold); }
.person__role { font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.intention .split__b p { color: var(--muted); }
.intention .split__b .lead { color: var(--ink); }

/* ---------- Pricing ---------- */
.pricing { }
.pricing .split__a .textlink { margin-top: 2rem; }
.price-card { background: var(--glass); border: 1px solid var(--line); border-radius: 22px; padding: clamp(1.5rem, 3vw, 2.5rem); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 40px rgba(230, 201, 140, 0.1); }
.price-card__top { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); font-weight: 500; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line-soft); }
.price-card__main { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 1.5rem; align-items: end; padding-block: 2rem 1.5rem; }
.price-card__starting { font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.price-card__price { font-family: var(--font-display); font-size: clamp(3.4rem, 2.5rem + 4vw, 5.4rem); line-height: 1; color: var(--gold); letter-spacing: -0.02em; margin-top: 0.35rem; text-shadow: 0 0 30px var(--gold-glow); }
.price-card__price { white-space: nowrap; }
.price-card__price small { font-size: 0.4em; letter-spacing: 0.06em; color: var(--muted); text-shadow: none; }
.price-card__note { font-size: var(--step--1); color: var(--muted); margin-top: 0.5rem; }
.price-card__lines { font-size: var(--step--1); color: var(--muted); line-height: 1.8; text-align: right; max-width: 15rem; justify-self: end; }
.price-card__list { border-top: 1px solid var(--line-soft); padding-top: 1.25rem; margin-bottom: 1.75rem; }
.price-card__list li { position: relative; padding: 0.5rem 0 0.5rem 1.5rem; font-size: var(--step--1); }
.price-card__list li::before { content: "+"; position: absolute; left: 0; color: var(--gold); }
.price-card__fee { font-size: 0.78rem; color: var(--muted); margin-top: 1rem; line-height: 1.7; }
.price-card__more { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); font-size: var(--step--1); color: var(--muted); display: grid; gap: 0.75rem; justify-items: start; }

/* ---------- FAQ ---------- */
.faq { }
.faq .section__title { position: sticky; top: 7rem; }
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line-soft); }
.accordion__heading { font-family: var(--font-body); font-size: inherit; }
.accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; text-align: left; padding: 1.4rem 0.25rem; font-size: var(--step-0); font-weight: 500; color: var(--ink); line-height: 1.4; transition: color 0.2s; }
.accordion__trigger:hover { color: var(--gold); }
.accordion__icon { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; position: relative; transition: transform 0.4s var(--ease); }
.accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--gold); transform: translate(-50%, -50%); }
.accordion__icon::before { width: 1rem; height: 1px; }
.accordion__icon::after { width: 1px; height: 1rem; transition: transform 0.3s; }
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(180deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.accordion__panel { padding: 0 0.25rem 1.6rem; max-width: 60ch; }
.accordion__panel p { line-height: 1.75; color: var(--muted); }
.accordion__panel.is-opening { animation: fadeDown 0.35s var(--ease); }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Contact ---------- */
.contact { background: radial-gradient(900px 500px at 100% 100%, rgba(230, 201, 140, 0.12), transparent 60%); }
.contact__copy { position: sticky; top: 7rem; }
.contact__reassurance { margin-top: 1.5rem; color: var(--ink); font-size: var(--step--1); padding-left: 1rem; border-left: 1px solid var(--gold); }
.contact__signature { font-family: var(--font-display); font-style: italic; font-size: 2rem; color: var(--gold); margin-top: 2.5rem; }
.contact__location { font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-top: 0.5rem; }
.form { background: var(--glass); border: 1px solid var(--line); border-radius: 22px; padding: clamp(1.25rem, 3vw, 2.25rem); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.form__required-note { font-size: var(--step--1); color: var(--muted); margin-bottom: 1.25rem; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .fieldset legend { font-size: 0.82rem; font-weight: 500; color: var(--ink); }
.fieldset legend { padding: 0; margin-bottom: 0.5rem; }
.field__hint { font-size: 0.8rem; color: var(--muted); margin-top: -0.25rem; }
.req { color: var(--gold); }
.optional { font-weight: 400; color: var(--muted); }
.field input:not([type="radio"]), .field select, .field textarea { width: 100%; font: inherit; color: var(--ink); background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line-soft); border-radius: 10px; padding: 0.8rem 1rem; transition: border-color 0.2s, box-shadow 0.2s; }
.field textarea { resize: vertical; min-height: 7rem; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E6C98C' stroke-width='1.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.field select option { color: #1A2A1F; background: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(230, 201, 140, 0.18); }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field .is-invalid { border-color: var(--error); }
.field__error { font-size: 0.8rem; color: var(--error); font-weight: 500; line-height: 1.35; min-height: 1.1rem; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.choice { display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line-soft); border-radius: 10px; cursor: pointer; font-size: 0.88rem; transition: border-color 0.2s, background-color 0.2s; min-width: 0; background: rgba(0, 0, 0, 0.2); }
.choice:hover { border-color: var(--gold); }
.choice input { margin: 0; accent-color: var(--gold); width: 1rem; height: 1rem; flex: 0 0 auto; }
.choice:has(input:checked) { border-color: var(--gold); background: rgba(230, 201, 140, 0.1); }
.choice:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.choice span { min-width: 0; }
.fieldset.is-invalid .choice { border-color: var(--error); }
.form__actions { margin-top: 2rem; display: grid; gap: 1rem; }
.form__privacy { font-size: 0.78rem; color: var(--muted); }
.form__status { font-weight: 500; line-height: 1.5; font-size: var(--step--1); }
.form__status:not(:empty) { padding: 0.9rem 1.1rem; margin-bottom: 1.25rem; border-radius: 10px; }
.form__status.is-error { background: var(--error-bg); color: var(--error); border: 1px solid rgba(240, 120, 100, 0.4); }
.form__status.is-info { background: var(--glass-strong); color: var(--ink); border: 1px solid var(--line-soft); }
.form-success { background: var(--glass); border: 1px solid var(--line); border-radius: 22px; padding: clamp(2rem, 4vw, 3rem); animation: rise 0.6s var(--ease) both; }
.form-success h3 { font-size: var(--step-2); margin-bottom: 1rem; }
.form-success p { color: var(--muted); max-width: 40ch; }
.form-success .textlink { margin-top: 2rem; }
.form-success__mark { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--gold); color: #1A2A1F; font-size: 1.2rem; margin-bottom: 1.5rem; box-shadow: 0 0 20px var(--gold-glow); }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta { display: none; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line-soft); padding-block: clamp(3rem, 6vw, 5rem) 2rem; color: var(--muted); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.35)); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(auto-fit, minmax(9rem, 1fr)); gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line-soft); }
.site-footer__col { min-width: 0; }
.site-footer__statement { margin-top: 1.5rem; font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); max-width: 24rem; line-height: 1.3; }
.site-footer__heading { font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-bottom: 1rem; }
.site-footer__col li { margin-bottom: 0.5rem; }
.site-footer__col a { color: var(--ink); }
.site-footer__col a:hover { color: var(--gold); }
.lang--footer { flex-wrap: wrap; }
.site-footer__top { display: flex; width: max-content; margin-top: 1.5rem; font-size: 0.82rem; }
.site-footer__privacy { padding-block: 2rem; border-bottom: 1px solid var(--line-soft); }
.site-footer__privacy p { max-width: 70ch; font-size: 0.85rem; line-height: 1.8; }
.site-footer__bottom { padding-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }

/* ---------- Dialogs ---------- */
.project-dialog { border: 0; padding: 0; background: transparent; max-width: min(64rem, calc(100vw - 2rem)); width: 100%; margin: auto; color: var(--ink); }
.project-dialog::backdrop { background: rgba(5, 12, 9, 0.75); backdrop-filter: blur(6px); }
.project-dialog[open] { animation: dialogIn 0.4s var(--ease); }
@keyframes dialogIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.project-dialog__inner { position: relative; background: #142A20; border: 1px solid var(--line); border-radius: 18px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); overflow: hidden; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); }
.project-dialog__visual { padding: clamp(1.5rem, 4vw, 3rem); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(160deg, #1E3A2E, #0E1B15); }
.project-dialog__visual .mock--desktop { width: 92%; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.project-dialog__visual .mock--mobile { position: absolute; right: 6%; bottom: 6%; width: 22%; max-width: 150px; box-shadow: 0 30px 50px -25px rgba(0, 0, 0, 0.9); }
.project-dialog__body { padding: clamp(1.5rem, 4vw, 3rem); overflow-y: auto; }
.project-dialog__body > p { margin-bottom: 1.25rem; line-height: 1.7; color: var(--muted); }
.project-dialog__body h3 { font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; color: var(--gold); margin: 1.5rem 0 0.75rem; }
.project-dialog__title { font-size: var(--step-2); margin-bottom: 0.25rem; }
.dash-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.6rem; line-height: 1.6; font-size: var(--step--1); color: var(--muted); }
.dash-list li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.8rem; height: 1px; background: var(--gold); }
.project-dialog__close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--gold); color: #1A2A1F; font-size: 1.4rem; line-height: 1; display: grid; place-items: center; transition: transform 0.3s var(--ease); }
.project-dialog__close:hover { transform: rotate(90deg); }
body.dialog-open { overflow: hidden; }

/* ---------- First-visit language prompt ---------- */
.lang-prompt { border: 0; padding: 0; background: transparent; width: min(30rem, calc(100vw - 2rem)); margin: auto; color: var(--ink); }
.lang-prompt::backdrop { background: rgba(5, 12, 9, 0.7); backdrop-filter: blur(5px); }
.lang-prompt[open] { animation: dialogIn 0.45s var(--ease); }
.lang-prompt__inner { position: relative; background: #142A20; border: 1px solid var(--line); border-radius: 18px; padding: clamp(1.75rem, 5vw, 2.75rem); box-shadow: 0 0 60px rgba(230, 201, 140, 0.15), 0 40px 80px -30px rgba(0, 0, 0, 0.9); }
.lang-prompt__title { font-size: var(--step-2); margin-bottom: 0.75rem; }
.lang-prompt__body { color: var(--muted); margin-bottom: 1.75rem; }
.lang-prompt__actions { display: grid; gap: 0.75rem; }
.lang-prompt__close { position: absolute; top: 0.75rem; right: 0.75rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--line); color: var(--gold); font-size: 1.3rem; line-height: 1; display: grid; place-items: center; }
.lang-prompt__close:hover { background: var(--glass-strong); }

/* ---------- Light (ivory) sections ----------
   Alternating with the dark green gives the page rhythm. The section redefines the
   colour tokens, so every component inside it switches palette automatically. */
.section--light {
  --ink: #1F2A22;
  --muted: #5B6258;
  --faint: rgba(31, 42, 34, 0.5);
  --gold: #8A672C;
  --gold-glow: rgba(176, 134, 62, 0.18);
  --line: rgba(138, 103, 44, 0.28);
  --line-soft: rgba(31, 42, 34, 0.12);
  --glass: rgba(255, 255, 255, 0.6);
  --glass-strong: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  color-scheme: light;
  border-top: 0;
}
.section--light + .section--light { border-top: 1px solid var(--line-soft); }
.section--light em.hl { color: #9A7536; text-shadow: none; }
.section--light .section__title, .section--light .display { text-shadow: none; }
.section--light .glass, .section--light .diff, .section--light .price-card, .section--light .form { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 24px 50px -36px rgba(60, 50, 30, 0.35); }
.section--light .project__visual { background: linear-gradient(160deg, #E9E2D3, #DDD4C1); border-color: rgba(31, 42, 34, 0.08); }
.section--light .project__open .mock--desktop, .section--light .stage__desktop .mock--desktop { box-shadow: 0 0 0 1px rgba(31, 42, 34, 0.08), 0 30px 60px -36px rgba(40, 35, 20, 0.45); }
.section--light .stage__mobile .mock--mobile { box-shadow: 0 30px 60px -30px rgba(40, 35, 20, 0.5); }
.section--light .ba__stage { box-shadow: 0 40px 80px -50px rgba(40, 35, 20, 0.45); }
.section--light .ba__handle span { background: #2B3D32; }
.section--light .ba__handle span::before, .section--light .ba__handle span::after { border-color: #F4EFE4; }
.section--light .ba__label--after { background: #2B3D32; color: #F4EFE4; }
.section--light .person__initial { background: #fff; box-shadow: 0 10px 30px -15px rgba(138, 103, 44, 0.5); }
.section--light .btn--outline { background: transparent; box-shadow: none; }
.section--light .btn--outline:hover { background: rgba(138, 103, 44, 0.08); }
.section--light .accordion__trigger:hover { color: var(--gold); }
.section--light .disclosure { color: var(--muted); }

/* Soft transitions: the ivory fades in and out over the real dark background,
   with a warm bloom of light at each edge, so there is no hard line or seam. */
.section--light { --fade: clamp(70px, 8vw, 130px); overflow: clip; isolation: isolate; background: transparent; padding-block: calc(var(--fade) + clamp(2.5rem, 5vw, 4.5rem)); }
.section--light::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(900px 500px at 90% 8%, rgba(230, 201, 140, 0.24), transparent 60%), radial-gradient(800px 600px at 0% 100%, rgba(163, 184, 150, 0.18), transparent 60%), #F4EFE4;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%); }
.section--light::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% calc(var(--fade) * 0.8) at 50% calc(var(--fade) * 1.05), rgba(240, 214, 160, 0.3), transparent 100%), radial-gradient(60% calc(var(--fade) * 0.8) at 50% calc(100% - var(--fade) * 1.05), rgba(240, 214, 160, 0.22), transparent 100%); }
.section--light > .container { position: relative; z-index: 1; }
.section--light + .section--light { border-top: 0; }

/* Sunlit leaf shadows falling across the ivory */
.leaf-shadow { position: absolute; z-index: 0; width: clamp(260px, 40vw, 620px); height: auto; color: #3E3722; opacity: 0.12; mix-blend-mode: multiply; pointer-events: none; animation: sway 16s ease-in-out infinite alternate; }
.leaf-shadow--tr { top: 4%; right: -6%; transform-origin: 100% 0%; }
.leaf-shadow--tl { top: 8%; left: -4%; transform: scaleX(-1); transform-origin: 0% 0%; }
.faq .leaf-shadow--tl { top: auto; bottom: 0; left: -2%; width: clamp(240px, 32vw, 480px); transform: scaleX(-1) scaleY(-1); }
.leaf-shadow--br { bottom: 2%; right: -5%; transform: scaleY(-1); opacity: 0.1; }
@keyframes sway { from { rotate: -1.5deg; } to { rotate: 2deg; } }

/* About: a signed gold mark fills the left column */
.about__mark { position: relative; display: grid; place-items: center; width: clamp(10rem, 19vw, 15.5rem); aspect-ratio: 1; margin-top: clamp(2rem, 5vw, 3.5rem); border-radius: 50%; border: 1px solid var(--line); background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%); }
.about__mark .leaf-logo { width: 52%; height: 52%; stroke-width: 2; filter: none; margin-top: -10%; }
.about__ring { position: absolute; inset: -12px; border-radius: 50%; border: 1px dashed rgba(138, 103, 44, 0.35); animation: spinSlow 60s linear infinite; }
.about__ring::after { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--gold); }
.about__role { margin-top: 1.5rem; max-width: 16rem; font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); font-weight: 500; line-height: 1.7; }
.about__sig { position: absolute; bottom: 18%; font-family: var(--font-display); font-style: italic; font-size: clamp(1rem, 1.6vw, 1.35rem); color: var(--gold); letter-spacing: 0.02em; }

/* Concepts delivered as full-page design images */
.mock__shot { padding: 0; }
.mock__shot img { display: block; width: 100%; height: auto; }
.stage__scene--image .stage__desktop { right: 4%; }
.project-dialog__visual:has(.mock-l-image) { align-items: flex-start; padding: clamp(1rem, 3vw, 2rem); }
.project-dialog__visual .mock-l-image { width: 100%; }
.project-dialog__visual .mock-l-image .mock__shot { max-height: min(72vh, 46rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.mock-stage--vitalbloom { background: linear-gradient(160deg, #EEF0E4, #D7DFC7); }
.mock-stage--costamar { background: linear-gradient(160deg, #F3DCC4, #C7764E); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal--delay { --d: 150ms; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .site-nav__list { gap: 1.4rem; }
  .site-nav__list a { font-size: 0.72rem; letter-spacing: 0.14em; }
}
@media (max-width: 1024px) {
  .hero__inner, .split, .process__layout { grid-template-columns: minmax(0, 1fr); }
  /* Tablet & phone hero: the scene opens the page full-bleed and fades into the green;
     the headline rises out of the water over it. */
  .hero { min-height: 0; margin-top: -4.5rem; padding-top: calc(4.5rem + var(--scene-text-start)); --scene-h: 74vw; --scene-text-start: 40vw; }
  .hero__bg { inset: 0 0 auto 0; height: var(--scene-h); }
  .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(14, 27, 21, 0.55) 0%, rgba(14, 27, 21, 0) 16%, rgba(14, 27, 21, 0) 46%, rgba(14, 27, 21, 0.78) 70%, #0E1B15 100%); pointer-events: none; }
  .hero__zoom { animation: none; }
  .hero::before { display: none; }
  .process { margin-top: 0; }
  .hero__copy .display { max-width: 14ch; }
  .split--head .section__intro { justify-self: start; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature:nth-child(2) { border-right: 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage { grid-template-columns: minmax(0, 1fr); }
  .switcher__tabs { flex-direction: row; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
  .switcher__tab.is-active { padding-left: 0; }
  .projects { grid-template-columns: minmax(0, 1fr); }
  .project:nth-child(3) { grid-template-columns: minmax(0, 1fr); }
  .difference__grid { grid-template-columns: minmax(0, 1fr); }
  .included__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq .section__title, .contact__copy { position: static; }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-dialog__inner { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .project-dialog__visual { min-height: 260px; }
}
@media (max-width: 860px) {
  .site-header__inner { min-height: 4.5rem; }
  .site-nav { position: fixed; inset: 0; z-index: 40; background: #0E1B15; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2.5rem; padding: calc(5rem + env(safe-area-inset-top, 0px)) var(--gutter-r) 3rem var(--gutter); transform: translateX(100%); visibility: hidden; transition: transform 0.45s var(--ease), visibility 0s linear 0.45s; }
  .site-nav.is-open { transform: none; visibility: visible; transition: transform 0.45s var(--ease), visibility 0s; }
  .site-nav__list { flex-direction: column; gap: 1.1rem; }
  .site-nav__list a { font-family: var(--font-display); font-size: var(--step-3); text-transform: none; letter-spacing: 0; }
  .site-nav__extras { flex-direction: column; align-items: flex-start; gap: 1.5rem; width: 100%; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); }
  .site-nav__extras .btn { width: 100%; padding: 1rem 1.5rem; font-size: 1rem; }
  .lang--nav { font-size: 1rem; }
  .menu-toggle { display: block; position: relative; z-index: 45; }
  .site-header__inner { position: relative; z-index: 46; }
  .sticky-cta { display: flex; align-items: center; justify-content: center; gap: 1rem; position: fixed; left: var(--gutter); right: var(--gutter-r); bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px)); z-index: 30; background: linear-gradient(135deg, #F4E0B4, #E2C286); color: #1A2A1F; font-weight: 600; font-size: 0.95rem; padding: 1rem 1.25rem; border-radius: 999px; box-shadow: 0 0 30px var(--gold-glow), 0 16px 40px -14px rgba(0, 0, 0, 0.7); transform: translateY(140%); transition: transform 0.4s var(--ease); }
  .sticky-cta.is-shown { transform: none; }
  body.dialog-open .sticky-cta { transform: translateY(140%); }
  .trail { display: none; }
}
@media (max-width: 760px) {
  .hero { --scene-h: 118vw; --scene-text-start: 54vw; }
  .scene--bg { display: none; }
  .scene--phone { display: block; }
  .hero__bg::after { background: linear-gradient(to bottom, rgba(14, 27, 21, 0.5) 0%, rgba(14, 27, 21, 0) 14%, rgba(14, 27, 21, 0) 38%, rgba(14, 27, 21, 0.72) 58%, #0E1B15 90%); }
  .hero .eyebrow { margin-bottom: 0.85rem; }
  .hero__copy .display { font-size: clamp(2.35rem, 10.2vw, 3.2rem); line-height: 1.04; }
  .hero__desc { font-size: 1.05rem; margin-top: 1rem; }
  .hero__actions { margin-top: 1.5rem; gap: 0.75rem; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 0.75rem; padding: 1.1rem; margin-bottom: 2rem; }
  .feature { flex-direction: column; align-items: flex-start; gap: 0.5rem; border-right: 0; padding-right: 0; }
  .feature__icon { width: 2rem; height: 2rem; }
  .feature b { font-size: 0.95rem; }
  .feature small { font-size: 0.8rem; line-height: 1.35; }

  /* Process: compact rows */
  .steps { gap: 0.75rem; }
  .step { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.2rem 1rem; align-items: start; padding: 1.15rem 1.2rem; border-radius: 14px; }
  .step__icon { grid-row: span 2; width: 2.1rem; height: 2.1rem; margin: 0.1rem 0 0; }
  .step__title { font-size: 1.1rem; margin-bottom: 0.15rem; }
  .step__desc { font-size: 0.9rem; }
  .step__arrow { display: none; }

  /* Swipe carousels: concept projects and service cards */
  .stage { display: none; }
  .projects, .difference__grid { display: flex; gap: 0.9rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r)); padding-inline: var(--gutter) var(--gutter-r); scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; }
  .projects::-webkit-scrollbar, .difference__grid::-webkit-scrollbar { display: none; }
  .project, .project:nth-child(3) { flex: 0 0 84%; display: block; scroll-snap-align: start; }
  .project__visual { max-height: 15rem; }
  .project__name { font-size: 1.45rem; }
  .project__summary { font-size: 0.92rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .diff { flex: 0 0 84%; scroll-snap-align: start; padding: 1.5rem 1.35rem; }
  .diff__title { font-size: 1.5rem; }
  .swipe-hint { display: flex; justify-content: flex-end; gap: 0.4rem; margin-top: 0.75rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); opacity: 0.85; }
  .swipe-hint span { animation: nudge 1.6s ease-in-out infinite; }
  @keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

  /* Before / after: taller frame so the comparison reads on a phone */
  .ba__stage { aspect-ratio: 4 / 3.6; }
  .ba__label { font-size: 0.6rem; top: 0.6rem; }
  .ba__label--before { left: 0.6rem; }
  .ba__label--after { right: 0.6rem; }
  .ba { margin-top: 3rem; padding-top: 2.5rem; }

  /* Ivory sections on phones */
  .leaf-shadow { width: 78vw; opacity: 0.1; }
  .about__mark { width: 9rem; margin-top: 1.75rem; }
  .about__role { margin-top: 1.5rem; max-width: 16rem; font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); font-weight: 500; line-height: 1.7; }
.about__sig { font-size: 0.95rem; }

  /* Footer: two-column links */
  .site-footer__col ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
}

@media (max-width: 600px) {
  .logo__name { font-size: 0.9rem; letter-spacing: 0.22em; }
  .logo__tag { font-size: 0.6rem; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .included__grid { grid-template-columns: minmax(0, 1fr); }
  .form__grid { grid-template-columns: minmax(0, 1fr); }
  .choice-grid { grid-template-columns: minmax(0, 1fr); }
  .price-card__main { grid-template-columns: minmax(0, 1fr); }
  .price-card__lines { text-align: left; justify-self: start; max-width: none; }
  .project-dialog { max-width: calc(100vw - 1rem); }
  .project-dialog__inner { max-height: calc(100dvh - 1rem); }
  .project-dialog__visual .mock--desktop { width: 100%; }
  .project-dialog__visual .mock--mobile { width: 26%; right: 4%; bottom: 4%; }
  .site-footer__bottom { flex-direction: column; }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .site-footer { padding-bottom: 5.5rem; }
  .stage__view { aspect-ratio: 16 / 13; }
  .stage__mobile { width: 30%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .difference__flower { animation: none; }
  .hero__zoom { animation: none; }
  .swipe-hint span, .leaf-shadow, .about__ring { animation: none; }
  .stage__scene { transition: none; }
  .project__visual { transform: none !important; }
  .trail { display: none; }
}

/* ---------- Living sunlight in the hero ---------- */
.sun { mix-blend-mode: screen; pointer-events: none; }
.sun > * { transform-box: view-box; transform-origin: var(--sx) var(--sy); }
.sun__halo { animation: sunBreathe 7s ease-in-out infinite; }
.sun__core { animation: sunFlicker 3.2s ease-in-out infinite; }
.sun__rays { opacity: 0.55; animation: sunTurn 80s linear infinite, sunRays 5.5s ease-in-out infinite; }
.sun__rays--b { opacity: 0.35; animation: sunTurnBack 120s linear infinite, sunRays 7.5s ease-in-out -2s infinite; }
@keyframes sunBreathe { 0%, 100% { opacity: 0.6; transform: scale(0.94); } 50% { opacity: 0.95; transform: scale(1.07); } }
@keyframes sunFlicker { 0%, 100% { opacity: 0.85; transform: scale(1); } 40% { opacity: 1; transform: scale(1.12); } 70% { opacity: 0.9; transform: scale(0.97); } }
@keyframes sunTurn { to { transform: rotate(360deg); } }
@keyframes sunTurnBack { to { transform: rotate(-360deg); } }
@keyframes sunRays { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.8; } }
@media (prefers-reduced-motion: reduce) { .sun > * { animation: none !important; } .sun__rays { opacity: 0.4; } }