/* ─────────────────────────────────────────────────────────────
   Bonnema Cycle Services · « Sunset Glass »
   Pages blanches et calmes façon Apple, tuiles presque noires,
   une seule couleur d'action (orange coucher de soleil) et du
   verre dépoli façon iOS là où quelque chose flotte sur la lumière.
   Système complet : DESIGN.md à la racine du projet.
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --canvas: #FFFFFF;
  --parchment: #F5F5F7;
  --ink: #1D1D1F;
  --muted: #5E5E63;
  --tile: #111113;
  --on-tile: #F5F5F7;
  --on-tile-muted: #A1A1A6;
  --accent: #F28B30;
  --accent-press: #E07A20;
  --accent-ink: #B4561A;
  --on-accent: #1D1D1F;
  --peach: #FFC4A1;
  --amber: #FFD48C;
  --sky: #A8D5FF;

  --font: -apple-system, "SF Pro Display", "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;
  --hairline: #D2D2D7;
  --body: 1.0625rem;
  --small: 0.9375rem;
  --lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --title: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
  --display: clamp(3rem, 1.6rem + 5.6vw, 6rem);

  --edge: clamp(20px, 4vw, 48px);
  --section: clamp(104px, 12vw, 184px);
  --r-card: 28px;
  --r-small: 18px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* liquid glass */
  --glass-bg: rgb(255 255 255 / 0.56);
  --glass-rim: rgb(255 255 255 / 0.75);
  --glass-shadow: 0 1px 1px rgb(0 0 0 / 0.04), 0 16px 40px -16px rgb(30 20 10 / 0.22);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; scroll-padding-top: 110px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; min-height: 100vh; background: var(--canvas); color: var(--ink);
  font-family: var(--font); font-size: var(--body); line-height: 1.47; letter-spacing: -0.011em;
  font-feature-settings: "ss03", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; }
p { margin: 0 0 1em; text-wrap: pretty; max-width: 68ch; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h3 { font-size: 1.3125rem; line-height: 1.2; letter-spacing: -0.02em; }
::selection { background: var(--amber); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 12px; }
main:focus { outline: none; }
main { overflow-x: clip; }
html { scrollbar-color: #C7C7CC transparent; }
.icon { width: 1.15em; height: 1.15em; flex: none; }
.chev { width: 0.75em; height: 0.75em; flex: none; transition: transform .3s var(--ease); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 200; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: #fff; }
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--edge); }
.display { font-size: var(--display); line-height: 1.02; letter-spacing: -0.038em; }
.display--page { font-size: clamp(2.5rem, 1.4rem + 4vw, 4.75rem); }
.title { font-size: var(--title); line-height: 1.05; letter-spacing: -0.032em; }
.lead { font-size: var(--lead); line-height: 1.35; color: var(--muted); letter-spacing: -0.015em; max-width: 36ch; }

/* ─── Liquid glass ────────────────────────────────────────── */
.glass {
  position: relative; isolation: isolate;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 0 0 1px var(--glass-rim), inset 0 1px 0 rgb(255 255 255 / 0.9), var(--glass-shadow);
}
/* the specular sheen follows the pointer (set by the script) */
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(240px circle at var(--mx, 30%) var(--my, 0%), rgb(255 255 255 / 0.55), transparent 60%);
  opacity: 0.9; transition: opacity .4s ease;
}

/* soft sunset light that sits behind glass */
.aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.85; will-change: transform; }
.aurora span:nth-child(1) { width: 46vw; height: 46vw; left: -8vw; top: -10vw; background: var(--peach); }
.aurora span:nth-child(2) { width: 38vw; height: 38vw; right: -6vw; top: 4vw; background: var(--sky); opacity: .7; }
.aurora span:nth-child(3) { width: 34vw; height: 34vw; left: 30vw; top: 22vw; background: var(--amber); opacity: .75; }
.aurora--small span:nth-child(1) { width: 60%; height: 80%; left: -10%; top: -20%; }
.aurora--small span:nth-child(2) { width: 50%; height: 70%; right: -10%; top: 10%; }
.aurora--small span:nth-child(3) { width: 45%; height: 60%; left: 30%; top: 40%; }
.aurora--dark span:nth-child(1) { width: 70vw; height: 40vw; left: 15vw; top: auto; bottom: -22vw; background: var(--accent); opacity: .42; filter: blur(90px); }
.aurora--dark span:nth-child(2) { width: 40vw; height: 30vw; right: -8vw; top: -12vw; background: #4D6BFF; opacity: .22; filter: blur(90px); }
.aurora--dark span:nth-child(3) { display: none; }

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 13px 26px; border: 0; border-radius: 999px;
  font: inherit; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .35s var(--ease), background-color .2s ease, color .2s ease, box-shadow .3s ease;
}
.btn:active { transform: scale(0.96); }
.btn--accent { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 24px -12px rgb(242 139 48 / 0.9); }
.btn--accent:hover { background: var(--accent-press); box-shadow: 0 14px 30px -12px rgb(242 139 48 / 0.95); }
.btn--glass { background: rgb(255 255 255 / 0.6); color: var(--ink); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .8), 0 8px 24px -14px rgb(0 0 0 / .25); }
.btn--glass:hover { background: rgb(255 255 255 / 0.85); }
.btn--glass-dark { background: rgb(255 255 255 / 0.12); color: var(--on-tile); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.btn--glass-dark:hover { background: rgb(255 255 255 / 0.2); }
.btn--small { min-height: 40px; padding: 9px 18px; font-size: 0.9375rem; }
.btn--large { min-height: 58px; padding: 16px 32px; font-size: 1.125rem; }
.link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); font-weight: 500; text-decoration: none; }
.link:hover { text-decoration: underline; }
.link:hover .chev, .tile a:hover .chev { transform: translateX(3px); }

/* ─── Navigation: a floating glass capsule ────────────────── */
.draft-banner { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 8px var(--edge); background: var(--parchment); font-size: var(--small); color: var(--muted); }
.draft-banner p { margin: 0; }
.todo { padding: 2px 10px; border-radius: 999px; background: var(--amber); color: var(--ink); font-size: var(--small); }
/* the nav floats over the first section, so its coloured light reaches the very top of the window */
.nav { position: sticky; top: 0; z-index: 100; height: 64px; margin-bottom: -64px; padding: 12px var(--edge) 0; pointer-events: none; }
.nav__capsule {
  pointer-events: auto; display: flex; align-items: center; gap: 6px; max-width: 1040px; margin: 0 auto;
  padding: 6px 6px 6px 14px; border-radius: 999px; transition: max-width .6s var(--ease), padding .4s var(--ease);
}
.is-scrolled .nav__capsule { max-width: 980px; }
.nav__brand { display: inline-flex; align-items: center; gap: 9px; margin-right: auto; text-decoration: none; }
.nav__mark { width: 30px; height: 30px; display: block; transition: transform .8s var(--ease); }
.nav__mark svg { width: 100%; height: 100%; display: block; }
.nav__brand:hover .nav__mark { transform: rotate(72deg); }
.nav__name { font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.04em; }
.nav__links ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav__links a { display: block; padding: 8px 12px; white-space: nowrap; border-radius: 999px; font-size: 0.9375rem; text-decoration: none; color: var(--ink); transition: background-color .2s ease; }
.nav__links a:hover { background: rgb(0 0 0 / 0.05); }
.nav__links a[aria-current="page"] { background: var(--ink); color: #fff; }
.lang-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: rgb(0 0 0 / 0.05); }
.lang-switch a { padding: 5px 9px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; text-decoration: none; color: var(--muted); }
.lang-switch a[aria-current="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.nav__toggle { display: none; width: 40px; height: 40px; border: 0; border-radius: 999px; background: var(--ink); cursor: pointer; place-items: center; }
.nav__burger, .nav__burger::before { display: block; width: 16px; height: 2px; border-radius: 2px; background: #fff; transition: transform .35s var(--ease); }
.nav__burger { position: relative; transform: translateY(-3px); }
.nav__burger::before { content: ""; position: absolute; top: 6px; }
.nav__toggle[aria-expanded="true"] .nav__burger { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__burger::before { transform: translateY(-6px) rotate(-90deg); }

/* ─── Pignon ─────────────────────────────────────────────── */
.pignon { position: relative; }
.pignon .mascot { display: block; width: 100%; height: auto; overflow: visible; }
/* three stacked layers: legs and waving arm, the ring of teeth, then face and holding arm.
   The ring is its own layer so the graphics card can turn it without redrawing anything. */
.pignon__bob { position: relative; display: block; }
.pignon .m-ring, .pignon .mascot--front { position: absolute; inset: 0; }
.pignon .m-ring { display: block; transform-origin: 46.667% 45.038%; will-change: transform; }
.pignon .m-ring .mascot { width: 100%; height: 100%; }
.pignon .mascot--front { width: 100%; height: 100%; }
.m-prop { display: none; }
.pignon[data-prop="spanner"] .m-prop--spanner, .pignon[data-prop="magnifier"] .m-prop--magnifier,
.pignon[data-prop="book"] .m-prop--book, .pignon[data-prop="tag"] .m-prop--tag,
.pignon[data-prop="phone"] .m-prop--phone { display: inline; }
/* Pignon's moving parts are turned by the script around their own points (svgOrigin), so no CSS origin here */
.pignon[data-mood="sad"] .m-mouth { transform: rotate(180deg); transform-box: fill-box; transform-origin: center; }
.pignon { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.m-floor { opacity: .1; }
.bubble { position: absolute; margin: 0; padding: 9px 16px; border-radius: 20px 20px 20px 6px; font-weight: 600; font-size: 0.9375rem; white-space: nowrap; letter-spacing: -0.01em; }

/* ─── Home: hero ─────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; padding-top: calc(64px + clamp(56px, 9vh, 120px)); }
.hero__head { display: grid; justify-items: center; text-align: center; }
.hero__head .lead { margin: 22px auto 0; max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.hero__stage { position: relative; margin-top: clamp(72px, 10vh, 120px); }
.hero__frame { position: relative; margin: 0 auto; width: 100%; overflow: hidden; clip-path: inset(0 max(var(--edge), calc((100% - 1240px) / 2)) round var(--r-card)); }
.hero__photo { margin: 0; aspect-ratio: 16 / 9; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; }
.hero__chips { position: absolute; left: calc(max(var(--edge), (100% - 1240px) / 2) + 24px); bottom: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-block; padding: 10px 16px; border-radius: 999px; font-size: 0.9375rem; font-weight: 600; color: var(--ink); --glass-bg: rgb(255 255 255 / 0.62); }
.hero__pignon { position: absolute; z-index: 2; left: max(calc(var(--edge) + 4%), calc(50% - 560px)); top: 0; width: clamp(110px, 12vw, 170px); transform: translateY(-82%); }
.hero__pignon .bubble { left: 88%; top: 6%; }

/* ─── Chooser ────────────────────────────────────────────── */
.chooser { margin-top: var(--section); text-align: center; }
.chooser .title, .chooser__lead { margin-inline: auto; }
.chooser__lead { margin-top: 16px; }
.segmented { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; margin: 40px auto 0; padding: 5px; border-radius: 999px; --glass-bg: rgb(245 245 247 / 0.8); }
.segmented__thumb { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: #fff; box-shadow: 0 3px 10px -2px rgb(0 0 0 / .18), inset 0 0 0 1px rgb(0 0 0 / .04); transition: transform .55s var(--ease), width .55s var(--ease); z-index: 0; }
html:not(.js) .segmented__thumb { display: none; }
.seg { position: relative; z-index: 1; min-height: 46px; padding: 10px 22px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 0.9375rem; font-weight: 500; color: var(--muted); cursor: pointer; white-space: nowrap; transition: color .3s ease; }
.seg[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
html:not(.js) .seg[aria-pressed="true"] { background: #fff; }
.result { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(24px, 4vw, 56px); margin-top: 32px; padding: clamp(28px, 4vw, 64px); border-radius: 36px; background: var(--parchment); overflow: hidden; text-align: left; }
.result__pignon { position: relative; justify-self: center; width: min(100%, 260px); padding-top: 48px; }
.bubble--chooser { left: 46%; top: 0; white-space: normal; width: max-content; max-width: 210px; }
.result__card { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-card); }
.answers { display: grid; }
.answer { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility 0s .35s; }
.answer.is-on { visibility: visible; opacity: 1; transition: opacity .45s ease .05s; }
html:not(.js) .answer { visibility: visible; opacity: 1; grid-area: auto; margin-bottom: 32px; }
.answer__name { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.05; letter-spacing: -0.03em; }
.answer__price { margin: 12px 0 6px; font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.answer__lead { color: var(--muted); }
.answer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }

/* ─── Services: bento ────────────────────────────────────── */
.services { margin-top: var(--section); }
.services .lead { margin-top: 16px; }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 24vw, 320px); gap: 16px; margin: 48px 0 0; padding: 0; list-style: none; }
.tile { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--tile); }
.tile--0 { grid-column: span 4; grid-row: span 2; }
.tile--1 { grid-column: span 2; grid-row: span 2; }
.tile--2 { grid-column: span 3; }
.tile--3 { grid-column: span 3; }
.tile a { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; }
.tile__photo { position: absolute; inset: 0; margin: 0; }
.tile__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile a:hover .tile__photo img { transform: scale(1.05); }
.tile a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0) 40%, rgb(0 0 0 / 0.62) 100%); }
.tile__text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: 2px; padding: clamp(20px, 2.4vw, 32px); }
.tile__name { font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.tile__fact { color: rgb(255 255 255 / 0.82); }
.tile__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--amber); font-weight: 500; }

/* ─── How it works: the stage stays, the steps pass by ───── */
.steps { margin-top: var(--section); }
.steps__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.steps__stage { position: sticky; top: 110px; align-self: start; }
.steps__stage .lead { margin-top: 16px; }
.steps__pignon { position: relative; isolation: isolate; display: grid; place-items: center; margin-top: 32px; aspect-ratio: 5 / 4; border-radius: var(--r-card); background: var(--parchment); overflow: hidden; }
.pignon--steps { width: 46%; }
.steps__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; opacity: .28; transition: opacity .5s ease; }
.step.is-on, html:not(.js) .step { opacity: 1; }
.step__name { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); line-height: 1.05; letter-spacing: -0.035em; }
.step__text { margin-top: 14px; font-size: var(--lead); line-height: 1.35; color: var(--muted); max-width: 26ch; }

/* ─── Prices: store cards ────────────────────────────────── */
.prices { margin-top: var(--section); padding: var(--section) 0; background: var(--parchment); }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 48px 0 0; padding: 0; list-style: none; }
.card { display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-card); background: var(--canvas); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgb(0 0 0 / .22); }
.card__name { font-size: 1.1875rem; }
.card__price { margin: 14px 0 18px; font-size: clamp(2.25rem, 1.8rem + 1.4vw, 3rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.card__lines { display: grid; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; color: var(--muted); }
.card__link { margin-top: auto; }

/* ─── About: dark tile, the words light up as you read ───── */
.about { padding: var(--section) 0; background: var(--tile); color: var(--on-tile); }
.about__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.about .title { color: var(--on-tile); }
.statement { margin: 28px 0 36px; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.3; font-weight: 600; letter-spacing: -0.025em; max-width: 30ch; color: var(--on-tile); }
.js .statement .w { color: #4A4A4F; transition: color .3s ease; }
.js .statement .w.lit { color: var(--on-tile); }
.about__photo { margin: 0; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 5; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ─── FAQ ────────────────────────────────────────────────── */
.faq { margin-top: var(--section); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); }
.faq__list { border-top: 1px solid var(--hairline); }
.qa { border-bottom: 1px solid var(--hairline); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent-ink); }
.qa__sign { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--parchment); transition: background-color .3s ease, transform .5s var(--ease); }
.qa__sign::before, .qa__sign::after { content: ""; position: absolute; left: 8px; top: 13px; width: 12px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .45s var(--ease); }
.qa__sign::after { transform: rotate(90deg); }
.qa[open] .qa__sign { background: var(--amber); transform: rotate(180deg); }
.qa[open] .qa__sign::after { transform: rotate(0deg); }
.qa__a p { padding-bottom: 24px; color: var(--muted); font-size: 1.0625rem; max-width: 52ch; }

/* ─── Finale ─────────────────────────────────────────────── */
.finale { position: relative; isolation: isolate; margin-top: var(--section); padding: var(--section) 0; background: var(--tile); color: var(--on-tile); overflow: hidden; text-align: center; }
.finale__inner { display: grid; justify-items: center; }
.pignon--finale { width: clamp(110px, 12vw, 160px); margin-bottom: 24px; }
.display--finale { font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5rem); color: var(--on-tile); max-width: 16ch; }
.finale .lead { margin: 20px auto 0; color: #D1D1D6; }
.finale__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.finale .m-limb { stroke: #8E8E93; }

/* ─── Join: a quiet invitation to repair with us ─────────── */
.join { margin-top: var(--section); }
.join__card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: var(--r-card); background: var(--parchment); }
.join__title { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.1; letter-spacing: -0.03em; }
.join__text p { margin-top: 12px; color: var(--muted); max-width: 46ch; }
.join .cta__message pre { background: var(--canvas); }
@media (max-width: 860px) { .join__card { grid-template-columns: minmax(0, 1fr); } }

/* ─── Footer ─────────────────────────────────────────────── */
.foot { padding: 64px 0 32px; background: var(--parchment); color: var(--muted); font-size: var(--small); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.pignon--foot { width: 64px; margin-bottom: 14px; }
.foot__name { color: var(--ink); font-weight: 600; font-size: 1.0625rem; margin-bottom: 6px; }
.foot__links { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.foot__links a { display: inline-block; padding: 4px 0; color: var(--ink); text-decoration: none; }
.foot__links a:hover { color: var(--accent-ink); }
.foot__contact { display: grid; justify-items: start; gap: 14px; align-content: start; }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--hairline); font-size: 0.8125rem; }
.foot__legal p { margin: 0; }

/* ─── Service pages ──────────────────────────────────────── */
.page-hero { position: relative; isolation: isolate; padding: calc(64px + clamp(48px, 8vh, 96px)) 0 0; }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.page-hero__text .lead { margin-top: 18px; }
.panel { margin-top: 32px; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-card); }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 20px; }
.price__amount { font-size: clamp(2.5rem, 2rem + 1.8vw, 3.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.price__amount--words, .card__price--words, .answer__price--words { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); letter-spacing: -0.03em; line-height: 1.1; }
.price__note { color: var(--muted); font-size: var(--small); max-width: 26ch; }
.checklist { display: grid; gap: 12px; margin: 0 0 26px; padding: 0; list-style: none; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; }
.checklist__tick { display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.checklist__tick svg { width: 15px; height: 15px; }
.cta__buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.cta__hint { margin: 12px 0 0; font-size: var(--small); color: var(--muted); }
.cta__hint.is-done { color: var(--accent-ink); font-weight: 600; }
.cta__message { margin-top: 4px; font-size: var(--small); color: var(--muted); }
.cta__message summary { cursor: pointer; width: fit-content; text-decoration: underline; text-underline-offset: 3px; }
.cta__message pre { margin: 10px 0 0; padding: 14px 16px; border-radius: 14px; background: rgb(255 255 255 / .7); font-family: var(--font); font-size: var(--small); white-space: pre-wrap; color: var(--ink); }
.page-hero__visual { position: relative; }
.page-hero__frame { position: relative; isolation: isolate; border-radius: 36px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--parchment); }
.page-hero__photo { margin: 0; position: absolute; inset: 0; }
.page-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__frame--solo { display: grid; place-items: center; }
.pignon--solo { width: 56%; }
.pignon--perch { position: absolute; left: 8%; top: 0; width: clamp(100px, 10vw, 150px); transform: translateY(-80%); z-index: 2; }

.offers { position: relative; margin-top: 56px; }
.offers__row { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-block: 8px; }
.offers__row > .aurora { inset: -10% -5%; }
.offer { padding: clamp(26px, 3vw, 44px); border-radius: var(--r-card); }
.offer__name { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.05; letter-spacing: -0.03em; }
.offer__tagline { margin: 10px 0 22px; color: var(--muted); font-size: 1.125rem; }

.gallery { margin-top: var(--section); }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
.shot { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--parchment); }
.shot .photo { margin: 0; aspect-ratio: 4 / 5; }
.shot .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.shot:hover .photo img { transform: scale(1.05); }
.shot__cap { padding: 18px 22px 22px; }
.shot__title { margin: 0 0 4px; font-weight: 600; font-size: 1.125rem; }
.shot__text { margin: 0; color: var(--muted); }

.lost { position: relative; isolation: isolate; padding: calc(64px + clamp(64px, 10vh, 140px)) 0 var(--section); }
.lost__inner { display: grid; justify-items: center; gap: 20px; text-align: center; }
.pignon--lost { width: clamp(160px, 18vw, 240px); }

.listings { margin-top: var(--section); }
.listings__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin: 32px 0 0; padding: 0; list-style: none; }
.listing .photo { margin: 0; border-radius: var(--r-small); overflow: hidden; }
.listing__price { font-size: 1.75rem; font-weight: 600; }
.listing__meta { display: grid; gap: 4px; margin: 0 0 12px; }
.listing__meta div { display: flex; gap: 8px; }
.listing__meta dt { color: var(--muted); min-width: 80px; }
.listing__meta dd { margin: 0; }

/* ─── Tablet & phone ─────────────────────────────────────── */
@media (max-width: 1080px) {
  .nav__links { display: none; position: absolute; left: var(--edge); right: var(--edge); top: 68px; padding: 10px; border-radius: 26px;
    background: rgb(255 255 255 / .82); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .8), 0 24px 48px -20px rgb(0 0 0 / .3); }
  .nav__links.is-open { display: block; }
  .nav__links ul { flex-direction: column; }
  .nav__links a { padding: 14px 18px; font-size: 1.125rem; border-radius: 16px; }
  .nav__toggle { display: grid; }
  .nav__cta > span:not(.visually-hidden) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav__cta { width: 40px; padding: 0; }
  html:not(.js) .nav__links { display: block; position: static; background: none; box-shadow: none; padding: 0; }
  html:not(.js) .nav__capsule { flex-wrap: wrap; border-radius: 26px; }
  .cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .result, .steps__grid, .about__grid, .faq__grid, .page-hero__grid, .offers__row, .foot__grid { grid-template-columns: 1fr; }
  .segmented { display: grid; grid-auto-flow: row; grid-template-columns: 1fr 1fr; border-radius: 28px; width: 100%; }
  .seg { white-space: normal; border-radius: 22px; min-height: 56px; }
  .result__pignon { width: 190px; }
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }
  .tile--0 { grid-column: span 2; grid-row: span 2; }
  .tile--1 { grid-column: span 1; grid-row: span 2; }
  .tile--2, .tile--3 { grid-column: span 1; }
  .steps__stage { position: static; }
  .steps__pignon { display: none; }
  .step { min-height: 0; opacity: 1; padding: 28px 0; border-bottom: 1px solid var(--hairline); }
  .about__photo { max-width: 460px; }
  .page-hero__visual { order: -1; margin-top: 48px; }
  .page-hero__frame { aspect-ratio: 4 / 3; }
  .pignon--perch { width: 96px; }
  .hero__photo { aspect-ratio: 4 / 5; }
  .hero__pignon .bubble { left: 80%; }
}
@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .tile--0, .tile--1, .tile--2, .tile--3 { grid-column: span 1; grid-row: span 1; }
  .hero__chips { left: calc(var(--edge) + 14px); bottom: 14px; right: calc(var(--edge) + 14px); }
  .chip { font-size: 0.8125rem; padding: 8px 12px; }
  .lang-switch a { padding: 5px 7px; }
  .bubble--chooser { left: 40%; max-width: 50vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}
@media (max-width: 860px) {
  .hero__stage { margin-top: 150px; }
  .hero__pignon { width: 100px; left: calc(var(--edge) + 8px); }
  .bubble--chooser { left: 26%; max-width: 46vw; }
  .result { padding-top: 24px; }
}

/* Phones and tablets: the same look, with lighter effects so scrolling stays smooth */
.is-light .aurora span { filter: blur(40px); will-change: auto; }
.is-light .glass, .is-light .btn--glass, .is-light .btn--glass-dark { -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); }
.is-light .glass::after { display: none; }
.is-light .hero__frame { clip-path: inset(0 var(--edge) round var(--r-card)); }
.is-light .tile__photo img, .is-light .shot .photo img { transition: none; }

/* ─── Phones: the same design, built to stay smooth ─────────
   No backdrop blur except the navigation, light painted with gradients
   instead of blur filters, reveals done by the browser (CSS transitions). */
.is-light .glass:not(.nav__capsule) { -webkit-backdrop-filter: none; backdrop-filter: none; --glass-bg: rgb(255 255 255 / 0.9); }
.is-light .segmented { --glass-bg: rgb(235 235 240 / 0.95); }
.is-light .btn--glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(255 255 255 / 0.92); }
.is-light .btn--glass-dark { -webkit-backdrop-filter: none; backdrop-filter: none; }
.is-light .aurora span { filter: none; opacity: 1; }
.is-light .aurora span:nth-child(1) { background: radial-gradient(closest-side, rgb(255 196 161 / .95), rgb(255 196 161 / 0)); }
.is-light .aurora span:nth-child(2) { background: radial-gradient(closest-side, rgb(168 213 255 / .85), rgb(168 213 255 / 0)); }
.is-light .aurora span:nth-child(3) { background: radial-gradient(closest-side, rgb(255 212 140 / .9), rgb(255 212 140 / 0)); }
.is-light .aurora--dark span:nth-child(1) { background: radial-gradient(closest-side, rgb(242 139 48 / .5), rgb(242 139 48 / 0)); }
.is-light .aurora--dark span:nth-child(2) { background: radial-gradient(closest-side, rgb(77 107 255 / .3), rgb(77 107 255 / 0)); }
.is-light .segmented__thumb { display: none; }
.is-light .seg[aria-pressed="true"] { background: #fff; box-shadow: 0 3px 10px -3px rgb(0 0 0 / .2); }
.is-light .seg { transition: color .2s ease, background-color .2s ease; }
.is-light .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.is-light .rv.in { opacity: 1; transform: none; }
.is-light .tile, .is-light .shot { contain: paint; }
* { -webkit-tap-highlight-color: transparent; }
/* hover effects only where there is a real pointer (no "stuck" states after a tap) */
@media (hover: none) {
  .card:hover { transform: none; box-shadow: none; }
  .tile a:hover .tile__photo img, .shot:hover .photo img { transform: none; }
  .nav__brand:hover .nav__mark { transform: none; }
}
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; }
  .answer__actions .btn, .cta__buttons .btn, .hero__actions .btn, .finale__actions .btn { width: 100%; }
  .result { padding: 20px 16px 16px; border-radius: 28px; }
  .result__card { padding: 22px 18px; }
  .panel { padding: 22px 18px; }
  .offer { padding: 24px 18px; }
}

/* ─── Phones with scroll-driven animations (iOS 26 Safari, Chrome Android) ───
   The same scroll-linked motion as on a computer, computed by the browser's
   compositor, so it stays smooth under the finger. Older phones keep the reveals above. */
@supports (animation-timeline: view()) {
  @keyframes sd-rise { from { opacity: 0; transform: translateY(36px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes sd-open { from { clip-path: inset(0 var(--edge) round var(--r-card)); } to { clip-path: inset(0 0 round 0); } }
  @keyframes sd-zoom { from { transform: scale(1.14); } to { transform: scale(1); } }
  @keyframes sd-window { from { opacity: .3; transform: scale(.9); } to { opacity: 1; transform: none; } }
  @keyframes sd-spin { to { transform: rotate(1440deg); } }
  @keyframes sd-lit { from { color: #4A4A4F; } to { color: var(--on-tile); } }

  .is-light.sd .sd-rise { animation: sd-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
  .is-light.sd .hero__frame { animation: sd-open linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
  .is-light.sd .hero__photo img, .is-light.sd .page-hero__photo img, .is-light.sd .about__photo img, .is-light.sd .tile__photo img, .is-light.sd .shot .photo img {
    animation: sd-zoom linear both; animation-timeline: view(); animation-range: entry 0% exit 100%;
  }
  .is-light.sd .tile, .is-light.sd .shot, .is-light.sd .card { animation: sd-window linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
  .is-light.sd .m-ring { animation: sd-spin linear both; animation-timeline: scroll(root); }
  .is-light.sd .statement .w { animation: sd-lit linear both; animation-timeline: view(); animation-range: cover 20% cover 40%; }
  .is-light.sd .statement .w.lit { color: inherit; }
}
@media (prefers-reduced-motion: reduce) { .sd .sd-rise, .sd .tile, .sd .shot, .sd .card { animation: none !important; } }
/* account link (opens the BCS app) */
.nav__links .nav__login a { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14); margin-left: 4px; }
/* account invitation (home) */
.account { margin-top: var(--section); }
.account__card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(28px, 5vw, 72px); border-radius: var(--r-card); background: linear-gradient(140deg, #FFE3CC 0%, #FFF3E4 48%, #E3F0FF 100%); isolation: isolate; }
.account__card > .aurora { z-index: -1; }
.account__badge { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0.875rem; font-weight: 650; letter-spacing: 0.01em; }
.account__title { margin-top: 18px; font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem); line-height: 1; letter-spacing: -0.045em; }
.account__lead { margin-top: 16px; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); color: var(--muted); max-width: 46ch; }
.perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 28px 0 0; padding: 0; list-style: none; }
.perk { display: flex; gap: 12px; align-items: flex-start; }
.perk b { display: block; color: var(--ink); }
.perk > span:last-child { color: var(--muted); font-size: 0.9375rem; line-height: 1.4; }
.account__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* the app preview */
.phone { margin: 0; justify-self: center; width: min(340px, 100%); }
.phone__screen { display: grid; gap: 12px; padding: 18px; border-radius: 34px; box-shadow: 0 40px 80px -40px rgb(60 30 10 / .45), inset 0 0 0 1px rgb(255 255 255 / .8); transform: rotate(-2deg); }
.phone__top { display: flex; justify-content: space-between; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
.phone__req { padding: 14px 16px; border-radius: 20px; background: #fff; }
.phone__name { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-weight: 650; }
.phone__pill { padding: 2px 10px; border-radius: 999px; background: #FFC4A1; font-size: 0.75rem; white-space: nowrap; }
.phone__meta { margin-top: 2px; font-size: 0.8125rem; color: var(--muted); }
.phone__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 0.6875rem; color: var(--muted); }
.phone__steps li { padding-top: 10px; border-top: 4px solid var(--parchment); border-radius: 2px; }
.phone__steps .is-done { border-color: var(--accent); }
.phone__steps .is-now { border-color: var(--accent); color: var(--ink); font-weight: 650; }
.phone__msg { max-width: 85%; padding: 10px 14px; border-radius: 18px; font-size: 0.875rem; line-height: 1.35; }
.phone__msg b { display: block; font-size: 0.6875rem; opacity: .7; }
.phone__msg--them { justify-self: start; background: #fff; border-bottom-left-radius: 6px; }
.phone__msg--me { justify-self: end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 6px; }
.phone figcaption { margin-top: 18px; text-align: center; font-size: 0.8125rem; color: var(--muted); }
@media (max-width: 860px) {
  .account__card { grid-template-columns: 1fr; }
  .perks { grid-template-columns: 1fr; }
  .account__actions .btn { width: 100%; }
}

/* logged in or not (html.is-member is set before the page shows) */
html:not(.is-member) [data-member] { display: none !important; }
html.is-member [data-guest] { display: none !important; }
.nav__face { width: 22px; height: 22px; border-radius: 50%; margin: -3px 7px -3px -4px; vertical-align: middle; display: inline-block; object-fit: cover; }

/* welcome back (home, logged in): the light flows from here into the hero */
.welcome { position: relative; isolation: isolate; padding-top: calc(64px + clamp(20px, 3vw, 40px)); }
.welcome > .aurora { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
html.is-member .welcome + .hero { padding-top: clamp(32px, 4vw, 64px); }
html.is-member .welcome + .hero > .aurora { -webkit-mask-image: linear-gradient(transparent, #000 34%); mask-image: linear-gradient(transparent, #000 34%); }
.welcome__card { padding: clamp(22px, 4vw, 52px); border-radius: 36px; --glass-bg: rgb(255 255 255 / 0.5); }
.welcome__head { display: flex; gap: 18px; align-items: center; }
.welcome__face { flex: none; width: clamp(56px, 7vw, 80px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 10px 30px -14px rgb(60 30 10 / .5); }
.welcome__title { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem); line-height: 1; letter-spacing: -0.04em; }
.welcome__lead { margin-top: 8px; color: var(--muted); font-size: 1.125rem; }
.welcome h3 { font-size: 1.125rem; letter-spacing: -0.01em; margin-bottom: 12px; }
.peeks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.peek { position: relative; display: grid; align-content: start; gap: 6px; min-height: 170px; padding: 18px 18px 16px; border-radius: 24px; color: var(--ink); text-decoration: none; --glass-bg: rgb(255 255 255 / 0.66); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.peek:hover { transform: translateY(-4px); }
.peek__top { display: flex; align-items: center; gap: 10px; }
.peek__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--parchment); }
.peek__icon svg { width: 18px; height: 18px; }
.peek__badge { margin-left: auto; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px; background: #E5484D; color: #fff; font-size: 0.8125rem; font-weight: 700; display: grid; place-items: center; }
.peek__badge[hidden] { display: none; }
.peek__line { font-weight: 600; line-height: 1.3; }
.peek.has-news .peek__line { color: var(--accent-ink); }
.peek__sub { color: var(--muted); font-size: 0.875rem; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.peek__sub:empty { display: none; }
.peek__go { margin-top: auto; padding-top: 8px; font-size: 0.875rem; font-weight: 600; color: var(--accent-ink); }
.peek--accent { --glass-bg: var(--accent); color: var(--on-accent); }
.peek--accent .peek__icon { background: rgb(255 255 255 / .35); }
.peek--accent .peek__go, .peek--accent .peek__sub { color: var(--on-accent); }
.welcome__more { margin-top: 30px; }
.suggests { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.suggest { display: grid; gap: 4px; height: 100%; padding: 16px 18px; border-radius: 20px; color: var(--ink); text-decoration: none; transition: transform .4s var(--ease); }
.suggest:hover { transform: translateY(-2px); }
.suggest span { color: var(--muted); font-size: 0.875rem; line-height: 1.4; }
@media (max-width: 1080px) { .peeks, .suggests { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .peeks, .suggests { grid-template-columns: 1fr; } .peek { min-height: 0; } }

/* the menu never cuts a name; the Instagram button grows a little on hover */
.nav__capsule { min-width: max-content; }
.nav__who { display: inline-block; max-width: 11ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.nav__cta { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease, background-color .2s ease; }
.nav__cta:hover { transform: scale(1.08); box-shadow: 0 14px 30px -10px rgb(242 139 48 / 0.95); }
@media (max-width: 1080px) { .nav__capsule { min-width: 0; } }

/* theme button */
.theme-btn { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 999px; background: rgb(0 0 0 / 0.05); color: var(--ink); cursor: pointer; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), background-color .2s; }
.theme-btn:hover { transform: rotate(-18deg) scale(1.08); }
.theme-btn svg { width: 17px; height: 17px; }
.theme-btn__sun { display: none; }
[data-theme="dark"] .theme-btn__sun { display: block; }
[data-theme="dark"] .theme-btn__moon { display: none; }
.theme-anim, .theme-anim * { transition: background-color .5s ease, color .5s ease, border-color .5s ease !important; }

/* ─── Dark theme: the same sunset, after dark ───────────────── */
[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0B0B0D; --parchment: #18181B; --ink: #F5F5F7; --muted: #A1A1A6; --hairline: #2E2E33;
  --tile: #151517; --on-tile: #F5F5F7; --accent-ink: #FFB273;
  --peach: #8A4424; --amber: #7A5414; --sky: #1E4170;
  --glass-bg: rgb(30 30 34 / 0.56); --glass-rim: rgb(255 255 255 / 0.08);
  --glass-shadow: 0 1px 1px rgb(0 0 0 / 0.2), 0 16px 40px -16px rgb(0 0 0 / 0.7);
}
html[data-theme="dark"] { scrollbar-color: #3A3A3F transparent; }
[data-theme="dark"] .glass { box-shadow: inset 0 0 0 1px var(--glass-rim), inset 0 1px 0 rgb(255 255 255 / 0.06), var(--glass-shadow); }
[data-theme="dark"] .glass::after { background: radial-gradient(240px circle at var(--mx, 30%) var(--my, 0%), rgb(255 255 255 / 0.08), transparent 60%); }
[data-theme="dark"] .aurora span { opacity: .55; }
[data-theme="dark"] .btn--glass { background: rgb(40 40 46 / 0.6); color: var(--ink); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 8px 24px -14px rgb(0 0 0 / .6); }
[data-theme="dark"] .btn--glass:hover { background: rgb(56 56 62 / 0.8); }
[data-theme="dark"] .nav__links a:hover, [data-theme="dark"] .lang-switch, [data-theme="dark"] .theme-btn { background: rgb(255 255 255 / 0.08); }
[data-theme="dark"] .nav__links a[aria-current="page"] { background: var(--ink); color: var(--canvas); }
[data-theme="dark"] .nav__links .nav__login a { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16); }
[data-theme="dark"] .lang-switch a[aria-current="true"] { background: #2C2C31; color: var(--ink); }
[data-theme="dark"] .nav__toggle { background: var(--ink); }
[data-theme="dark"] .nav__burger, [data-theme="dark"] .nav__burger::before { background: var(--canvas); }
[data-theme="dark"] .segmented { --glass-bg: rgb(30 30 34 / 0.8); }
[data-theme="dark"] .segmented__thumb, [data-theme="dark"] .seg[aria-pressed="true"] { background: #2C2C31; }
[data-theme="dark"] .chip { --glass-bg: rgb(30 30 34 / 0.7); }
[data-theme="dark"] .card:hover { box-shadow: 0 24px 48px -24px rgb(0 0 0 / .8); }
[data-theme="dark"] .about, [data-theme="dark"] .finale { box-shadow: inset 0 1px 0 rgb(255 255 255 / .05); }
[data-theme="dark"] .js .statement .w { color: #3A3A3F; }
[data-theme="dark"] .skip-link { color: var(--canvas); }
[data-theme="dark"] .account__card { background: linear-gradient(140deg, #2B170B 0%, #1A140E 48%, #0E1A2B 100%); }
[data-theme="dark"] .account__badge { background: var(--ink); color: var(--canvas); }
[data-theme="dark"] .phone__req, [data-theme="dark"] .phone__msg--them { background: #222226; }
[data-theme="dark"] .phone__pill { color: #1D1D1F; }
[data-theme="dark"] .welcome__card { --glass-bg: rgb(22 22 26 / 0.55); }
[data-theme="dark"] .peek:not(.peek--accent), [data-theme="dark"] .suggest { --glass-bg: rgb(34 34 38 / 0.7); }
[data-theme="dark"] .peek__icon { background: rgb(255 255 255 / 0.08); }
[data-theme="dark"] .nav__mark { filter: drop-shadow(0 0 1px rgb(255 255 255 / .4)); }
@media (max-width: 1080px) {
  [data-theme="dark"] .nav__links { background: rgb(24 24 28 / .9); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), 0 24px 48px -20px rgb(0 0 0 / .7); }
}
[data-theme="dark"].is-light .glass:not(.nav__capsule) { --glass-bg: rgb(28 28 32 / 0.92); }
[data-theme="dark"].is-light .btn--glass { background: rgb(40 40 46 / 0.92); }
[data-theme="dark"].is-light .segmented { --glass-bg: rgb(36 36 40 / 0.95); }
[data-theme="dark"].is-light .seg[aria-pressed="true"] { background: #2C2C31; }
[data-theme="dark"].is-light .aurora span { opacity: .5; }

/* ─── Phones, premium pass (2026-11-08) ──────────────────────
   Today's phones blur glass on the GPU without trouble, so the liquid glass comes back
   (a little lighter than on a computer), with its sheen fixed at the top edge.
   The light behind it is painted with large soft gradients (no blur filter) that drift slowly. */
.is-light .glass:not(.nav__capsule), .is-light .btn--glass, .is-light .btn--glass-dark {
  -webkit-backdrop-filter: blur(18px) saturate(175%); backdrop-filter: blur(18px) saturate(175%);
}
.is-light .glass:not(.nav__capsule) { --glass-bg: rgb(255 255 255 / 0.62); }
.is-light .btn--glass { background: rgb(255 255 255 / 0.62); }
.is-light .glass::after { display: block; background: radial-gradient(130% 70% at 20% 0%, rgb(255 255 255 / 0.6), transparent 55%); }
[data-theme="dark"].is-light .glass:not(.nav__capsule) { --glass-bg: rgb(30 30 34 / 0.55); }
[data-theme="dark"].is-light .btn--glass { background: rgb(40 40 46 / 0.6); }
[data-theme="dark"].is-light .glass::after { background: radial-gradient(130% 70% at 20% 0%, rgb(255 255 255 / 0.09), transparent 55%); }
[data-theme="dark"].is-light .glass { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09), inset 0 1px 0 rgb(255 255 255 / 0.1), var(--glass-shadow); }

/* halos: wide and soft on a narrow screen, never small round spots */
.is-light .aurora span { opacity: 1; animation: drift 18s ease-in-out infinite alternate; will-change: transform; }
.is-light .aurora span:nth-child(1) { width: 130vw; height: 130vw; left: -55vw; top: -45vw;
  background: radial-gradient(closest-side, rgb(255 196 161 / .9), rgb(255 196 161 / .45) 45%, rgb(255 196 161 / 0)); }
.is-light .aurora span:nth-child(2) { width: 120vw; height: 120vw; right: -60vw; left: auto; top: 0;
  background: radial-gradient(closest-side, rgb(168 213 255 / .8), rgb(168 213 255 / .4) 45%, rgb(168 213 255 / 0)); animation-duration: 22s; animation-delay: -6s; }
.is-light .aurora span:nth-child(3) { width: 110vw; height: 110vw; left: -5vw; top: 30vw;
  background: radial-gradient(closest-side, rgb(255 212 140 / .75), rgb(255 212 140 / .35) 45%, rgb(255 212 140 / 0)); animation-duration: 26s; animation-delay: -12s; }
[data-theme="dark"].is-light .aurora span { opacity: 1; }
[data-theme="dark"].is-light .aurora span:nth-child(1) { background: radial-gradient(closest-side, rgb(242 120 40 / .42), rgb(242 120 40 / .18) 50%, rgb(242 120 40 / 0)); }
[data-theme="dark"].is-light .aurora span:nth-child(2) { background: radial-gradient(closest-side, rgb(70 110 255 / .34), rgb(70 110 255 / .14) 50%, rgb(70 110 255 / 0)); }
[data-theme="dark"].is-light .aurora span:nth-child(3) { background: radial-gradient(closest-side, rgb(255 170 60 / .26), rgb(255 170 60 / .1) 50%, rgb(255 170 60 / 0)); }
/* the dark sections' glow stays at the bottom, as on a computer */
.is-light .aurora--dark span:nth-child(1) { width: 150vw; height: 90vw; left: -25vw; top: auto; bottom: -40vw;
  background: radial-gradient(closest-side, rgb(242 139 48 / .5), rgb(242 139 48 / .2) 50%, rgb(242 139 48 / 0)); }
.is-light .aurora--dark span:nth-child(2) { width: 110vw; height: 80vw; right: -40vw; top: -30vw;
  background: radial-gradient(closest-side, rgb(77 107 255 / .32), rgb(77 107 255 / .12) 50%, rgb(77 107 255 / 0)); }
.is-light .aurora--small span:nth-child(1) { width: 120%; height: 90%; left: -40%; top: -25%; }
.is-light .aurora--small span:nth-child(2) { width: 110%; height: 80%; right: -45%; top: 10%; }
.is-light .aurora--small span:nth-child(3) { width: 100%; height: 70%; left: 0; top: 45%; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6vw, 4vw, 0) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .is-light .aurora span { animation: none; } }

/* ─── Logged-in home: tiles (2026-11-08, second pass) ─────────
   "New request" keeps its orange on phones too (the phone glass rule used to repaint it),
   phones get a compact 2 × 2 grid, and "Our services" runs the full width under it. */
.peek.peek--accent, .is-light .peek.peek--accent, [data-theme="dark"].is-light .peek.peek--accent { --glass-bg: var(--accent); color: var(--on-accent); }
.peek--accent b { color: var(--on-accent); }
.peeks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.peek--wide { grid-column: 1 / -1; min-height: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px; }
.peek--wide .peek__top { display: contents; }
.peek--wide .peek__icon { grid-row: span 2; }
.peek--wide b { grid-column: 2; }
.peek--wide .peek__line { grid-column: 2; }
.peek--wide .peek__sub { display: none; }
.peek--wide .peek__go { grid-column: 3; grid-row: 1 / span 2; }
.welcome__face { image-rendering: auto; }
#chooser-h { scroll-margin-top: 110px; }
@media (max-width: 1080px) { .peeks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .peeks { grid-template-columns: 1fr 1fr; gap: 10px; }
  .peek { min-height: 132px; padding: 14px 14px 12px; border-radius: 22px; gap: 4px; }
  .peek b { font-size: 1rem; }
  .peek__top { gap: 8px; }
  .peek__line { font-size: 0.875rem; line-height: 1.3; }
  .peek__go { font-size: 0.875rem; margin-top: auto; }
  .peek--wide { min-height: 0; }
  .peek--wide .peek__go { font-size: 0; }
  .peek--wide .peek__go svg { width: 18px; height: 18px; }
  .welcome__head { gap: 14px; }
}
@media (max-width: 560px) {
  .peek:not(.peek--wide) .peek__top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .peek:not(.peek--wide) .peek__badge { position: absolute; top: 14px; right: 14px; }
  .peek__go { font-size: 0.8125rem; }
}