/* Fiore Beauty Studio
   One story: Andrea's vanity table. She stands in front of her gold arched mirror (the star), two smaller arches
   flank her like the wings of a vanity mirror: treatments on the left, the shop on the right. Her words land on the table.
   Colours are her own palette (Froth, Chai, Creme, Cinna, Latte) plus the gold of her mirror and her glasses.
   Motion: transform and opacity only. Everything works with motion off (no .viva on <html>, or reduced motion). */

:root {
  --froth: #f1eeeb; --chai: #e4d8cb; --creme: #cdc6c3; --cinna: #cfb3a9; --latte: #a09086;
  --ink: #2b2321; --soft: #6b5e57; --paper: #f8f5f2; --table: #ece4db;
  --gold: #b99a5b; --gold-hi: #ead9ae; --gold-lo: #9c7d42;
  --line: rgba(43, 35, 33, .16);
  --display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --ui: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.22, .7, .12, 1);
  --top: 104px;                                  /* room for the header */
  --H: clamp(300px, calc(67svh - var(--top)), 860px); /* Andrea's height; every arch is sized from it */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--froth); color: var(--ink); font: 400 1rem/1.55 var(--ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold-lo); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }

/* ───────── header ───────── */
.top { position: absolute; z-index: 30; inset: 0 0 auto 0; height: var(--top); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(16px, 4vw, 56px); }
.logo img { width: clamp(100px, 8.4vw, 132px); height: auto; }
.top-right { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); }
.lang { display: flex; gap: 2px; font: 500 .8125rem var(--ui); letter-spacing: .14em; }
.lang button { padding: 10px 8px; color: var(--soft); }
.lang button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.menu-btn { font: 500 .8125rem var(--ui); letter-spacing: .22em; text-transform: uppercase; padding: 10px 0; }

/* ───────── the stage ───────── */
.stage { position: relative; min-height: 100svh; display: flex; flex-direction: column; background: var(--froth); overflow: hidden; }
.stage-move { display: flex; flex-direction: column; flex: 1; transition: transform .9s var(--ease); will-change: transform; }
.scene { position: relative; flex: none; height: calc(var(--H) + var(--top)); }
.row { position: absolute; inset: auto 0 0 0; height: var(--H); display: flex; justify-content: center; align-items: flex-end; gap: clamp(24px, 5.5vw, 120px); }

/* Andrea */
.star { position: relative; flex: none; width: calc(var(--H) * .7467); height: var(--H); z-index: 2; }
.arch { position: absolute; left: 50%; bottom: 0; width: calc(var(--H) * .56); height: calc(var(--H) * .955); margin-left: calc(var(--H) * -.28);
  border-radius: 999px 999px 0 0; border: clamp(3px, calc(var(--H) * .008), 6px) solid transparent; border-bottom: 0;
  background: linear-gradient(180deg, #f3ece5 0%, #ead9cd 58%, #dcc4b8 100%) padding-box,
              linear-gradient(120deg, var(--gold-hi) 0%, var(--gold) 28%, var(--gold-lo) 52%, var(--gold-hi) 74%, var(--gold) 100%) border-box;
  overflow: hidden; }
.arch::after { content: ""; position: absolute; inset: -20% auto -20% -60%; width: 46%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); transform: translateX(0) skewX(-14deg); opacity: 0; }
.figure-pos { position: absolute; inset: 0; will-change: transform; }
.figure { position: absolute; left: 0; bottom: 0; width: 100%; aspect-ratio: 1792 / 2400; transform-origin: 50% 100%; }
.figure img { position: absolute; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.figure .base { inset: 0; width: 100%; height: 100%; }
.figure .ov { opacity: 0; transition: opacity .07s linear; }
.figure .ov.on { opacity: 1; }
.figure .ov[data-frame^="look"] { transition-duration: .16s; }
.figure .ov[data-frame="smile"] { transition-duration: .24s; }

/* the wings */
.wing { position: relative; flex: none; width: calc(var(--H) * .33); height: calc(var(--H) * .62); z-index: 1; display: block; text-align: center; }
.wing-arch { position: absolute; inset: 0; border-radius: 999px 999px 0 0; overflow: hidden; border: 2px solid var(--gold); border-bottom: 0; background: var(--chai);
  transition: transform .8s var(--ease); will-change: transform; }
.wing-l .wing-arch { transform-origin: 100% 100%; transform: perspective(900px) rotateY(16deg); }
.wing-r .wing-arch { transform-origin: 0 100%; transform: perspective(900px) rotateY(-16deg); }
.wing:hover .wing-arch, .wing:focus-visible .wing-arch, .wing.lit .wing-arch { transform: perspective(900px) rotateY(0deg); }
.wing-arch img { width: 100%; height: 100%; object-fit: cover; }
.wing-arch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(241, 238, 235, .0) 40%, rgba(43, 35, 33, .28)); }
.wing-cap { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(27vw, 300px); display: grid; gap: 6px; justify-items: center; }
.wing-cap b { font: italic 500 clamp(1.5rem, 1.1rem + 1vw, 2.125rem)/1 var(--display); }
.wing-cap span { font: 500 .6875rem/1.5 var(--ui); letter-spacing: .24em; text-transform: uppercase; color: var(--soft); text-wrap: balance; }
.wing-cap i { width: 28px; height: 1px; background: var(--gold); transform-origin: 50% 50%; transition: transform .5s var(--ease); }
.wing:hover .wing-cap i, .wing.lit .wing-cap i { transform: scaleX(2.2); }
.wing.lit .wing-cap span { color: var(--ink); }
.wing-v { display: none; }

/* the table: where her words land */
.table { position: relative; flex: 1; border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--table), var(--froth) 78%); padding: 0 clamp(18px, 4vw, 56px) 34px; display: flex; justify-content: center; }
.voice { width: min(100%, 660px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.lotus { width: 42px; height: auto; margin-top: 14px; overflow: visible; }
.lotus path { fill: none; stroke: var(--ink); stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; opacity: .2; transition: opacity .6s var(--ease), transform .6s var(--ease); transform-origin: 500px 466px; transform: scale(.96); }
.lotus path.on { opacity: 1; transform: none; }
.who { margin: 10px 0 0; font: 500 .6875rem var(--ui); letter-spacing: .24em; text-transform: uppercase; color: var(--soft); }
.line { margin: 44px 0 0; min-height: 1.18em; font: italic 500 clamp(1.5rem, 1.05rem + 1.9vw, 2.5rem)/1.18 var(--display); text-wrap: balance; }
.line .ch { opacity: 0; }
.line .ch.in { opacity: 1; transition: opacity .12s linear; }
.acts { width: 100%; margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 4px 44px; }
.answers { flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; text-align: left; }
.answers.one { flex: 0 1 auto; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.answers.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.answers:empty { display: none; }
.opt { position: relative; display: flex; text-decoration: none; align-items: center; justify-content: space-between; gap: 14px; min-height: 54px; padding: 12px 2px; border-bottom: 1px solid var(--line); font: 400 1.0625rem/1.25 var(--ui); text-align: left;
  opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease), border-color .25s; }
.opt.in { opacity: 1; transform: none; }
.opt::after { content: "→"; color: var(--gold-lo); transition: transform .3s var(--ease); }
.opt:hover, .opt:focus-visible { border-color: var(--ink); }
.opt:hover::after, .opt:focus-visible::after { transform: translateX(5px); }
.opt.gone { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.opt.picked { border-color: var(--gold-lo); }
.opt.ext::after { content: "↗"; }
.opt.cta { justify-content: center; gap: 12px; border-bottom: 0; min-height: 56px; font: 500 .875rem var(--ui); letter-spacing: .24em; text-transform: uppercase; }
.opt.cta span { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 8px; text-decoration-thickness: 1.5px; }
.opt.cta small { font: 400 .75rem var(--ui); letter-spacing: .12em; color: var(--soft); text-transform: none; }
.opt.cta::after { display: none; }
.minor { margin-top: 12px; font: 400 .8125rem var(--ui); letter-spacing: .06em; color: var(--soft); text-decoration: underline; text-underline-offset: 4px; padding: 8px; }
.ask { flex: 0 1 300px; display: flex; align-items: flex-end; gap: 8px; border-bottom: 1px solid var(--line); transition: border-color .25s; }
.ask:focus-within { border-color: var(--ink); }
.ask input { flex: 1; min-width: 0; border: 0; background: none; padding: 12px 2px; font: italic 400 1.1875rem var(--display); color: var(--ink); text-align: center; outline: none; border-radius: 0; }
.ask input::placeholder { color: var(--soft); opacity: 1; }
.ask button { padding: 12px 6px; color: var(--gold-lo); font-size: 1.125rem; }

/* ───────── panels: the wings opened ───────── */
.panel { position: fixed; z-index: 40; top: 0; bottom: 0; width: min(100%, 58vw); background: var(--paper); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  transition: transform .9s var(--ease), visibility 0s linear .9s; visibility: hidden; will-change: transform; padding: 0 clamp(20px, 4vw, 64px) 80px; }
.panel-l { left: 0; transform: translateX(-102%); border-right: 1px solid var(--line); }
.panel-r { right: 0; transform: translateX(102%); border-left: 1px solid var(--line); }
[data-view="services"] .panel-l, [data-view="shop"] .panel-r { transform: none; visibility: visible; transition: transform .9s var(--ease), visibility 0s; }
.panel-top { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; height: 64px; background: linear-gradient(var(--paper) 70%, rgba(248, 245, 242, 0)); }
.panel-r .panel-top { flex-direction: row-reverse; }
.back-btn { font: 500 .75rem var(--ui); letter-spacing: .22em; text-transform: uppercase; padding: 12px 0; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; }
.panel h2 { margin: 18px 0 0; font: 500 clamp(2.75rem, 2rem + 3vw, 4.5rem)/.95 var(--display); letter-spacing: -.01em; }
.panel-sub { margin: 10px 0 0; font: italic 400 1.375rem var(--display); color: var(--soft); }
.pick { margin-top: 30px; padding: 22px 0 24px; border-block: 1px solid var(--gold); display: grid; gap: 6px; }
.pick-k { font: 500 .6875rem var(--ui); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-lo); }
.pick h3 { margin: 4px 0 0; font: 500 1.875rem/1.1 var(--display); }
.pick p { margin: 0; color: var(--soft); max-width: 52ch; }
.pick .svc-meta { margin-top: 10px; }
.pick-extra { margin-top: 8px; font-size: .9375rem; }
.tabs { position: sticky; top: 64px; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px 26px; margin-top: 30px; padding: 10px 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.tabs button { font: 500 .75rem var(--ui); letter-spacing: .2em; text-transform: uppercase; padding: 10px 0; color: var(--soft); }
.tabs button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 8px; text-decoration-thickness: 1.5px; }
.svc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.svc h3 { margin: 0; font: 500 1.5rem/1.15 var(--display); }
.svc p { margin: 4px 0 0; grid-column: 1; font-size: .9375rem; color: var(--soft); max-width: 48ch; }
.svc-meta { display: flex; align-items: baseline; gap: 16px; font: 400 .9375rem var(--ui); white-space: nowrap; font-variant-numeric: tabular-nums; }
.svc-meta .t { color: var(--soft); }
.svc-meta b { font-weight: 500; }
.book { font: 500 .75rem var(--ui); letter-spacing: .2em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; text-decoration-thickness: 1.5px; padding: 8px 0; }
.svc .book { grid-column: 2; grid-row: 2; justify-self: end; }
.panel-foot { margin-top: 30px; display: grid; gap: 18px; color: var(--soft); font-size: .9375rem; }
.hours { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; font-variant-numeric: tabular-nums; max-width: 260px; }
.hours dt { text-transform: capitalize; }
.hours dd { margin: 0; }

.shop-hero { margin: 30px 0 0; height: clamp(180px, 30vh, 320px); border-radius: 999px 999px 0 0; overflow: hidden; border: 2px solid var(--gold); border-bottom: 0; }
.shop-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 88%; }
.note { margin: 18px 0 0; color: var(--soft); font-size: .9375rem; max-width: 52ch; }
.shelf { margin-top: 38px; }
.shelf h3 { margin: 0 0 16px; font: 500 1.875rem/1.1 var(--display); }
.niches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.niche { position: relative; aspect-ratio: 3 / 4.2; border-radius: 999px 999px 4px 4px; background: linear-gradient(180deg, var(--chai), var(--froth)); box-shadow: inset 0 10px 24px rgba(43, 35, 33, .08); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 8px 14px; text-align: center; overflow: hidden; }
.niche:nth-child(4n + 2) { background: linear-gradient(180deg, #ead9d2, var(--froth)); }
.niche:nth-child(4n + 3) { background: linear-gradient(180deg, var(--creme), var(--froth)); }
.niche:nth-child(4n + 4) { background: linear-gradient(180deg, #dccfc6, var(--froth)); }
.niche b { font: 500 1.125rem/1.1 var(--display); }
.niche small { margin-top: 4px; font: 500 .625rem var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--soft); }
.niche .n { position: absolute; top: 26%; font: italic 400 2.25rem var(--display); color: var(--gold-lo); opacity: .9; }
.niche.mine { box-shadow: inset 0 0 0 1.5px var(--gold), inset 0 10px 24px rgba(43, 35, 33, .08); }

/* the small Andrea that stays with you */
.mini { position: fixed; z-index: 45; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 10px; flex-direction: row-reverse;
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.mini.show { opacity: 1; transform: none; pointer-events: auto; }
.mini-face { position: relative; width: 68px; height: 86px; flex: none; border-radius: 999px 999px 10px 10px; overflow: hidden; border: 2px solid var(--gold); background: linear-gradient(180deg, #f3ece5, #dcc4b8); }
.mini-face img { position: absolute; width: 190%; height: auto; max-width: none; left: -45%; top: -12%; }
.mini-say { max-width: min(62vw, 300px); margin: 0 0 8px; padding: 10px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px 14px 2px 14px; font: italic 500 1.0625rem/1.25 var(--display); text-align: left;
  opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.mini-say.show { opacity: 1; transform: none; }

/* ───────── menu ───────── */
.menu { position: fixed; z-index: 60; inset: 0; background: rgba(241, 238, 235, .98); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s linear .4s; }
.menu.open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease), visibility 0s; }
.menu nav { display: grid; gap: clamp(6px, 1.6vh, 16px); text-align: center; }
.menu nav a, .menu nav button { font: 500 clamp(2rem, 1.4rem + 3vw, 3.75rem)/1.1 var(--display); text-decoration: none; padding: 4px 12px; }
.menu nav a:hover, .menu nav button:hover { font-style: italic; }
.menu-close { position: absolute; top: 18px; right: clamp(16px, 4vw, 56px); font: 500 .8125rem var(--ui); letter-spacing: .22em; text-transform: uppercase; padding: 12px 0; }

/* ───────── below the stage ───────── */
.sec { padding: clamp(64px, 10vw, 140px) clamp(18px, 6vw, 96px); }
.sec-in { max-width: 1120px; margin: 0 auto; }
.k { font: 500 .6875rem var(--ui); letter-spacing: .26em; text-transform: uppercase; color: var(--soft); }
.sec h2 { margin: 14px 0 0; font: 500 clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem)/1 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.about { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 6vw, 90px); align-items: end; }
.about-photo { border-radius: 999px 999px 0 0; overflow: hidden; border: 2px solid var(--gold); border-bottom: 0; aspect-ratio: 3 / 3.6; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about p { max-width: 46ch; margin: 18px 0 0; font-size: 1.0625rem; }
.proof { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.score { display: flex; align-items: baseline; gap: 14px; }
.score b { font: 500 3.25rem/1 var(--display); }
.score span { font-size: .9375rem; color: var(--soft); }
.proof blockquote { margin: 0; font: italic 500 1.5rem/1.25 var(--display); }
.proof cite { font: 400 .8125rem var(--ui); font-style: normal; color: var(--soft); letter-spacing: .04em; }
.linkline { font: 500 .75rem var(--ui); letter-spacing: .2em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.journal { background: var(--table); }
.journal ul { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 34px; font: italic 500 clamp(1.375rem, 1rem + 1.4vw, 2rem) var(--display); color: var(--soft); }
.contact-grid { margin-top: 34px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 5vw, 70px); }
.contact-grid h3 { margin: 0 0 10px; font: 500 .6875rem var(--ui); letter-spacing: .26em; text-transform: uppercase; color: var(--soft); }
.contact-grid p { margin: 0; font-size: 1.0625rem; }
.contact-grid .links { display: grid; gap: 14px; justify-items: start; }
.foot { padding: 34px clamp(18px, 6vw, 96px) 40px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; color: var(--soft); font-size: .8125rem; }
.foot img { width: 96px; height: auto; }

/* ───────── desktop: the wing opens beside her ───────── */
@media (min-width: 900px) {
  [data-view="services"] .stage-move { transform: translateX(29vw); }
  [data-view="shop"] .stage-move { transform: translateX(-29vw); }
  .wing, .wing-cap { transition: opacity .5s var(--ease); }
  [data-view="services"] .wing, [data-view="shop"] .wing { opacity: 0; pointer-events: none; }
  [data-view="services"] .voice, [data-view="shop"] .voice { width: min(100%, 34vw); }
  [data-view="services"] .answers, [data-view="shop"] .answers { grid-template-columns: minmax(0, 1fr); }
  [data-view="services"] .line, [data-view="shop"] .line { margin-top: 18px; }
}

@media (min-width: 900px) and (max-height: 780px) {
  .lotus { width: 36px; margin-top: 10px; }
  .line { font-size: clamp(1.5rem, 1rem + 1.5vw, 2.125rem); }
}

/* ───────── phones ───────── */
@media (max-width: 899px) {
  :root { --top: 78px; --H: clamp(270px, calc(56svh - var(--top)), 470px); }
  .row { gap: 0; }
  .wing { position: absolute; bottom: 0; width: calc(var(--H) * .34); height: calc(var(--H) * .58); }
  .wing-l { left: calc(var(--H) * -.13); }
  .wing-r { right: calc(var(--H) * -.13); }
  .wing-l .wing-arch { transform: perspective(700px) rotateY(10deg); }
  .wing-r .wing-arch { transform: perspective(700px) rotateY(-10deg); }
  .wing-cap { display: none; }
  .wing-v { display: block; position: absolute; bottom: 12px; writing-mode: vertical-rl; font: 500 .625rem var(--ui); letter-spacing: .26em; text-transform: uppercase; color: var(--froth); text-shadow: 0 0 10px rgba(43, 35, 33, .5); z-index: 1; }
  .wing-l .wing-v { right: 9px; transform: rotate(180deg); }
  .wing-r .wing-v { left: 9px; }
  .wing-arch::after { background: linear-gradient(180deg, rgba(43, 35, 33, .05), rgba(43, 35, 33, .42)); }
  .table { padding-bottom: 26px; }
  .lotus { width: 40px; margin-top: 14px; }
  .line { margin-top: 12px; min-height: 2.36em; }
  .acts { margin-top: 8px; }
  .answers, .answers.one, .answers.three { flex: 1 1 100%; grid-template-columns: minmax(0, 1fr); }
  .ask { flex: 1 1 100%; }
  .opt { min-height: 50px; padding: 10px 2px; font-size: 1rem; }
  .panel { width: 100%; padding-bottom: 130px; }
  .niches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .niche { aspect-ratio: 3 / 4.4; padding: 0 4px 10px; }
  .niche b { font-size: .9375rem; }
  .niche small { font-size: .5625rem; letter-spacing: .14em; }
  .niche .n { font-size: 1.625rem; top: 22%; }
  .about { grid-template-columns: minmax(0, 1fr); }
  .about-photo { aspect-ratio: 3 / 2.6; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .about .p2 { display: none; }                 /* phones: one idea per section */
  .svc { grid-template-columns: minmax(0, 1fr); }
  .svc .book { grid-column: 1; grid-row: auto; justify-self: start; }
  .svc-meta { margin-top: 2px; }
}

/* ───────── on the TV in the studio (?tv) ───────── */
html.tv { --top: 110px; --H: clamp(300px, calc(60svh - var(--top)), 1500px); }
html.tv body { overflow: hidden; }
html.tv .menu-btn, html.tv .sec, html.tv .foot, html.tv .ask, html.tv .book { display: none; }   /* the studio screen never leaves the page */
html.tv .line { font-size: clamp(2rem, 1.1rem + 2vw, 3.5rem); margin-top: 58px; }
html.tv .voice { width: min(100%, 1100px); }
html.tv .wing-cap { max-width: min(30vw, 560px); }
html.tv .minor { font-size: clamp(.875rem, .7rem + .5vw, 1.25rem); }
html.tv .opt { min-height: 78px; font-size: clamp(1.25rem, .9rem + 1vw, 2rem); }
html.tv .opt.cta { font-size: clamp(1rem, .8rem + .7vw, 1.5rem); }
html.tv .lotus { width: clamp(46px, 3.2vw, 72px); }
html.tv .wing-cap b { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 3.25rem); }
html.tv .wing-cap span { font-size: clamp(.6875rem, .5rem + .5vw, 1rem); }

/* ───────── the living layer ───────── */
@media (prefers-reduced-motion: no-preference) {
  .viva .figure { animation: breathe 5.6s ease-in-out infinite alternate; }
  .viva .arch::after { animation: glint 9s var(--ease) 2.2s infinite; }
  .viva .wing-l .wing-arch img { animation: drift 16s ease-in-out infinite alternate; }
  .viva .wing-r .wing-arch img { animation: drift 16s ease-in-out -8s infinite alternate; }
  .viva .wing.lit .wing-cap i { animation: pulse 1.6s ease-in-out infinite alternate; }
}
@keyframes breathe { from { transform: scale(1) translateY(0); } to { transform: scale(1.012) translateY(-.35%); } }
@keyframes glint { 0% { transform: translateX(0) skewX(-14deg); opacity: 0; } 8% { opacity: .9; } 26% { transform: translateX(420%) skewX(-14deg); opacity: 0; } 100% { transform: translateX(420%) skewX(-14deg); opacity: 0; } }
@keyframes drift { from { transform: scale(1.06) translateY(-1.5%); } to { transform: scale(1.12) translateY(1.5%); } }
@keyframes pulse { from { transform: scaleX(1.4); } to { transform: scaleX(2.6); } }
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01s !important; animation: none !important; }
  html { scroll-behavior: auto; }
}