/* ============================================================
   CINEMATIC PASS (2026-08) — "smoke & chapters"
   · morphism: SMOKE/MIST — no borders, no cards: a soft radial
     veil under the text that fades into nothing
   · chapters: every section enters as a film dissolve; the
     background world slowly mutates from frame to frame
   · texture: slow light-leak / breathing light (no vignette)
   · type: soft halo behind the letters — fused, still legible
   · phones: identical treatment to desktop (user's call)
   Loaded AFTER styles.css. Nothing here changes copy or layout.
   ============================================================ */
/* WebKit was auto-inflating small type (13px labels rendering at 20px),
   which broke the calculator's label/sub-label hierarchy. Pin it. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

:root{
  --cine-fill:252,251,248;      /* warm white mist */
  --cine-core:0.88;             /* alpha in the reading band — mist, not paint */
  --cine-blur:24px;
  --cine-ease:cubic-bezier(.16,.86,.26,1);
  --cine-dur:1.35s;             /* motion 70/100 */
  --cine-lift:34px;
}

/* ---------- 0. THE WORLD SHOWS THROUGH ----------
   The ivory veil over the cathedral canvas was eating the colour; it is
   now thin, and the canvas itself is lit richer. Type stays legible
   because every panel carries its own mist (section 2). */
.stone-veil{ background:
  linear-gradient(180deg, rgba(244,241,234,0.30) 0%, rgba(244,241,234,0.15) 44%, rgba(244,241,234,0.28) 100%),
  radial-gradient(120% 80% at 50% 28%, rgba(255,246,226,0.16), rgba(255,246,226,0) 72%) !important; }
#divine-bg{ filter:saturate(1.34) contrast(1.07) brightness(1.02); }
#fxCanvas{ opacity:.82 !important; }
@media(max-width:767px){
  .stone-veil{ background:
    linear-gradient(180deg, rgba(244,241,234,0.38) 0%, rgba(244,241,234,0.22) 46%, rgba(244,241,234,0.36) 100%) !important; }
  #divine-bg{ filter:saturate(1.28) contrast(1.05); }
}

/* ---------- 1. breathing light (the only texture) ---------- */
.cine-atmo{ position:fixed; inset:0; z-index:2; pointer-events:none; contain:strict; }
.cine-atmo::before,.cine-atmo::after{ content:""; position:absolute; inset:-10%; mix-blend-mode:screen; }
.cine-atmo::before{
  background:radial-gradient(58% 44% at 50% 10%, rgba(255,231,186,0.30), rgba(255,231,186,0) 72%);
  animation:cineLeakA 13s ease-in-out infinite; }
.cine-atmo::after{
  background:radial-gradient(46% 52% at 84% 66%, rgba(214,178,120,0.20), rgba(214,178,120,0) 74%);
  animation:cineLeakB 21s ease-in-out infinite; }
@keyframes cineLeakA{
  0%,100%{ opacity:.30; transform:translate3d(-1.5%,-2%,0) scale(1.02); }
  50%    { opacity:.80; transform:translate3d(1.5%,2.4%,0)  scale(1.09); } }
@keyframes cineLeakB{
  0%,100%{ opacity:.18; transform:translate3d(2%,1.5%,0) scale(1.04); }
  50%    { opacity:.52; transform:translate3d(-2.4%,-1.5%,0) scale(1.0); } }
/* the world drifts against the scroll — depth without movement */
#divine-bg{ transform:translate3d(0,var(--cine-py,0px),0) scale(1.06); transform-origin:50% 46%;
  filter:saturate(1.34) contrast(1.07) brightness(1.02); }

/* ---------- 2. SMOKE: panels stop being panels ---------- */
.glass{ background:none !important; border:none !important; box-shadow:none !important;
  border-radius:0 !important; isolation:isolate; }
.glass::before{ display:block; content:""; position:absolute; inset:-46px -72px; z-index:-1;
  pointer-events:none; border:none; border-radius:0; box-shadow:none; opacity:1;
  background:
    radial-gradient(112% 86% at 50% 48%,
      rgba(var(--cine-fill),var(--cine-core)) 0%,
      rgba(var(--cine-fill),calc(var(--cine-core) - .06)) 46%,
      rgba(var(--cine-fill),0.46) 74%,
      rgba(var(--cine-fill),0.12) 90%,
      rgba(var(--cine-fill),0) 100%);
  backdrop-filter:blur(var(--cine-blur)) saturate(1.05);
  -webkit-backdrop-filter:blur(var(--cine-blur)) saturate(1.05);
  -webkit-mask-image:
    radial-gradient(118% 96% at 50% 50%, #000 0%, #000 58%, rgba(0,0,0,.42) 84%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image:
    radial-gradient(118% 96% at 50% 50%, #000 0%, #000 58%, rgba(0,0,0,.42) 84%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  transition:opacity 1.4s var(--cine-ease); }

/* small surfaces: mist, not chrome — a whisper of edge only where the finger lands */
.surface,.callback,.calc-sum,.c-item,.cp,.btn-soft,.dock-item,.finish-btn,.casket-hint,
.field input,.field select,.field textarea,.callback .cb-row input{
  background:rgba(var(--cine-fill),0.72) !important;
  backdrop-filter:blur(14px) saturate(1.04); -webkit-backdrop-filter:blur(14px) saturate(1.04);
  box-shadow:inset 0 0 0 1px rgba(163,131,79,0.13) !important; }
.c-item.on{ background:rgba(163,131,79,0.12) !important;
  box-shadow:inset 0 0 0 1px rgba(163,131,79,0.44) !important; }
.cp[aria-pressed="true"],.dock-item.is-primary,.cs-mini-call,.btn-gold,.cta-primary{
  background:rgba(27,29,31,0.93) !important; box-shadow:0 24px 60px -34px rgba(27,29,31,0.75) !important;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.cta-secondary,.hero-quick .hq{ background:rgba(var(--cine-fill),0.66) !important;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-color:rgba(163,131,79,0.22) !important; }
.calc-sum{ border-color:rgba(163,131,79,0.20) !important; }

/* graphite chapters dissolve into the ivory at both ends */
.repat-panel{ border-radius:0 !important; overflow:visible !important;
  -webkit-mask-image:radial-gradient(120% 104% at 50% 50%, #000 0%, #000 62%, rgba(0,0,0,.5) 86%, transparent 100%);
  mask-image:radial-gradient(120% 104% at 50% 50%, #000 0%, #000 62%, rgba(0,0,0,.5) 86%, transparent 100%);
  box-shadow:none !important; }
.footer{ -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 5%, #000 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 5%, #000 100%); }
.dignity{ background:transparent !important; }
.d-close,.dignity .d-close{ background:none !important; border:none !important; box-shadow:none !important;
  position:relative !important; }
.d-close::before{ content:""; position:absolute; inset:-30px -46px; z-index:-1; pointer-events:none;
  background:radial-gradient(96% 88% at 50% 50%, rgba(var(--cine-fill),0.95) 0%,
    rgba(var(--cine-fill),0.78) 56%, rgba(var(--cine-fill),0.18) 84%, rgba(var(--cine-fill),0) 100%);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }

/* seams between chapters: light that vanishes before it reaches the edge */
main > .section:not(.hero):not(.dignity) + .section:not(.dignity)::after{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(900px,74%); height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(163,131,79,0.22) 34%, rgba(163,131,79,0.22) 66%, transparent); }

/* ---------- 3. CHAPTERS: each section enters as a dissolve ---------- */
.reveal{ transition:opacity var(--cine-dur) var(--cine-ease),
  transform var(--cine-dur) var(--cine-ease), filter 1.1s var(--cine-ease); }
html.anim .reveal{ opacity:0; transform:translateY(var(--cine-lift)) scale(.988); filter:blur(14px); }
html.anim .reveal.in{ opacity:1; transform:none; filter:blur(0); }
html.anim .reveal > [data-cine]{ opacity:0; transform:translateY(18px);
  transition:opacity 1.15s var(--cine-ease) calc(var(--cine-i,0) * 100ms),
             transform 1.15s var(--cine-ease) calc(var(--cine-i,0) * 100ms); }
html.anim .reveal.in > [data-cine]{ opacity:1; transform:none; }
/* out of frame the mist thins out — the world shows through between chapters */
.cine-chapter.cine-dim .glass::before{ opacity:.72; }

/* ---------- 4. header: transparent, crystallises on scroll ---------- */
.nav{ border-bottom:1px solid transparent !important; box-shadow:none !important;
  background:transparent !important; }
.nav::before{ content:""; position:absolute; left:0; right:0; top:0; bottom:-34px; z-index:-1;
  pointer-events:none; opacity:0; transition:opacity .8s var(--cine-ease);
  background:linear-gradient(180deg, rgba(244,241,234,0.94) 0%, rgba(244,241,234,0.84) 56%, rgba(244,241,234,0) 100%);
  backdrop-filter:blur(24px) saturate(1.05); -webkit-backdrop-filter:blur(24px) saturate(1.05);
  -webkit-mask-image:linear-gradient(180deg,#000 56%, rgba(0,0,0,.46) 82%, transparent 100%);
  mask-image:linear-gradient(180deg,#000 56%, rgba(0,0,0,.46) 82%, transparent 100%); }
.nav.solid::before{ opacity:1; }
.mobile-menu{ background:rgba(244,241,234,0.93) !important;
  backdrop-filter:blur(28px) saturate(1.05); -webkit-backdrop-filter:blur(28px) saturate(1.05); }

/* ---------- 5. type: halo behind the letters ---------- */
.hero .hero-title,.hero .hero-title .ht-name{
  text-shadow:0 1px 30px rgba(252,251,248,0.95), 0 0 110px rgba(252,251,248,0.8) !important; }
.hero-place,.hero-mission,.hero-note,.scroll-cue{ text-shadow:0 1px 24px rgba(252,251,248,0.9); }
.h-serif,.chapter-label{ text-shadow:0 1px 22px rgba(252,251,248,0.62); }
.dignity h2,.dignity .d-sub{ text-shadow:0 1px 30px rgba(252,251,248,0.95), 0 0 70px rgba(252,251,248,0.7) !important; }
.repat-copy h2,.repat-lead,.repat-points li{ text-shadow:0 1px 28px rgba(6,8,12,0.7); }
.footer h5,.footer .desc{ text-shadow:0 1px 20px rgba(6,8,12,0.5); }

/* ---------- 6. imagery melts into the background ---------- */
.process-img,.s-card .img{ border-radius:2px; background:none; }
.process-img img,.s-card .img img,.srv-preview img{
  -webkit-mask-image:radial-gradient(124% 124% at 50% 44%, #000 62%, rgba(0,0,0,.4) 88%, transparent 100%);
  mask-image:radial-gradient(124% 124% at 50% 44%, #000 62%, rgba(0,0,0,.4) 88%, transparent 100%); }
.d-photo::after{ background:
  radial-gradient(118% 80% at 50% 50%, rgba(244,241,234,0.34) 0%, rgba(244,241,234,0.10) 54%, rgba(244,241,234,0) 82%),
  linear-gradient(180deg, rgba(244,241,234,0.94) 0%, rgba(244,241,234,0.04) 32%, rgba(244,241,234,0.14) 72%, rgba(244,241,234,0.96) 100%) !important; }

/* ---------- 7. page-to-page film dissolve through ivory mist ---------- */
.cine-veil{ position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:0;
  background:radial-gradient(120% 112% at 50% 46%, rgba(252,251,248,0.96), rgba(244,241,234,0.99));
  transition:opacity .42s ease; }
html.cine-out .cine-veil{ opacity:1; }
html.cine-out main,html.cine-out .nav,html.cine-out .footer{
  transition:opacity .38s ease, filter .38s ease, transform .5s var(--cine-ease);
  opacity:.5; filter:blur(4px); transform:scale(1.006); }

/* modals: a lit sheet of smoke */
.modal-card{ background:rgba(var(--cine-fill),0.92) !important;
  backdrop-filter:blur(34px) saturate(1.06) !important; -webkit-backdrop-filter:blur(34px) saturate(1.06) !important;
  border:1px solid rgba(163,131,79,0.18) !important;
  box-shadow:0 50px 130px -50px rgba(27,29,31,0.5) !important; }
.modal-backdrop{ background:rgba(27,29,31,0.42) !important;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.calc-toast,.ios-toast .it-card{ backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }

/* phones keep the same treatment; only the overhang tightens to the screen */
@media(max-width:767px){
  :root{ --cine-blur:20px; }
  .glass::before{ inset:-34px -26px; }
  .d-close::before{ inset:-22px -20px; }
  main > .section + .section::after{ width:66%; }
}

/* ============================================================ LITE MODE
   Subpages without the WebGL world (calculator, catalog notes, service
   pages) get the same language: a slow drifting sky, mist surfaces,
   dissolve-in blocks and the same film transition. */
.cine-sky{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(72% 52% at 20% 10%, rgba(255,226,170,0.85), rgba(255,226,170,0) 70%),
    radial-gradient(66% 58% at 88% 24%, rgba(184,158,116,0.62), rgba(184,158,116,0) 72%),
    radial-gradient(90% 64% at 50% 100%, rgba(120,104,86,0.46), rgba(120,104,86,0) 74%),
    linear-gradient(180deg,#EFE7D7 0%,#E4DACA 50%,#CFC4B2 100%);
  animation:cineSky 34s ease-in-out infinite; }
@keyframes cineSky{
  0%,100%{ transform:scale(1.04) translate3d(-0.6%,-0.8%,0); filter:saturate(1); }
  50%    { transform:scale(1.10) translate3d(0.8%,1.1%,0);   filter:saturate(1.06); } }
html[data-cine-lite] body{ background:transparent; }
html[data-cine-lite] main,html[data-cine-lite] footer{ position:relative; z-index:3; }
html[data-cine-lite] header{ z-index:10; }

/* the veil is a pseudo-layer BEHIND the header — masking the header itself
   would fade the phone CTA with it */
html[data-cine-lite] .top,html[data-cine-lite] .topbar{
  background:transparent !important; border-bottom:none !important;
  backdrop-filter:none; -webkit-backdrop-filter:none; isolation:isolate; }
html[data-cine-lite] .top::before,html[data-cine-lite] .topbar::before{
  content:""; position:absolute; left:0; right:0; top:0; bottom:-26px; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(244,241,234,0.94) 0%, rgba(244,241,234,0.84) 58%, rgba(244,241,234,0) 100%);
  backdrop-filter:blur(22px) saturate(1.04); -webkit-backdrop-filter:blur(22px) saturate(1.04);
  -webkit-mask-image:linear-gradient(180deg,#000 58%, rgba(0,0,0,.46) 84%, transparent 100%);
  mask-image:linear-gradient(180deg,#000 58%, rgba(0,0,0,.46) 84%, transparent 100%); }
html[data-cine-lite] .panel,html[data-cine-lite] .pick,html[data-cine-lite] .card{
  background:rgba(var(--cine-fill),0.80) !important;
  border-color:rgba(163,131,79,0.16) !important;
  backdrop-filter:blur(18px) saturate(1.04); -webkit-backdrop-filter:blur(18px) saturate(1.04);
  box-shadow:0 30px 80px -60px rgba(27,29,31,0.4) !important; }
html[data-cine-lite] .pick[aria-selected="true"]{ background:rgba(255,253,247,0.92) !important; }
/* a subpage's own static backdrop steps aside so the breathing sky shows through */
html[data-cine-lite] .bg{ background:transparent !important; }
html[data-cine-lite] h1,html[data-cine-lite] h2{ text-shadow:0 1px 24px rgba(252,251,248,0.7); }

html[data-cine-anim] .cine-r:not(.cine-veil):not(.cine-sky):not(.cine-atmo){
  opacity:0; transform:translateY(var(--cine-lift)) scale(.99); filter:blur(12px);
  transition:opacity var(--cine-dur) var(--cine-ease) calc(var(--cine-i,0) * 90ms),
             transform var(--cine-dur) var(--cine-ease) calc(var(--cine-i,0) * 90ms),
             filter 1.05s var(--cine-ease) calc(var(--cine-i,0) * 90ms); }
html[data-cine-anim] .cine-r.is-in:not(.cine-veil):not(.cine-sky):not(.cine-atmo){
  opacity:1; transform:none; filter:blur(0); }
/* the overlay layers are never content: they can't be dissolved or tinted */
.cine-veil,.cine-sky,.cine-atmo{ transform:none; filter:none; }
.cine-veil:not(.is-cine-out){ opacity:0 !important; }
html.cine-out .cine-veil{ opacity:1 !important; }

/* ---------- 9. WEIGHT ----------
   Everything above is what you see; this is what it costs. Live blur is
   the single most expensive thing on the page, so it is dropped on the
   sections that have scrolled more than a screen away (.cine-far). The
   mist keeps its exact colour there — it simply stops sampling what is
   behind it, which nobody can see anyway. Same picture, a fraction of
   the GPU; this is what stopped Safari from running out of memory.
   Note the polarity: the cost is removed by a class that is only ever
   added once a section is known to be off-screen, so if the observer is
   late or unsupported the page keeps the full treatment. */
.cine-chapter.cine-far .glass::before{ backdrop-filter:none; -webkit-backdrop-filter:none; }
.cine-chapter.cine-far .surface,
.cine-chapter.cine-far .callback,
.cine-chapter.cine-far .calc-sum,
.cine-chapter.cine-far .c-item,
.cine-chapter.cine-far .cp,
.cine-chapter.cine-far .btn-soft,
.cine-chapter.cine-far .dock-item,
.cine-chapter.cine-far .finish-btn,
.cine-chapter.cine-far .casket-hint,
.cine-chapter.cine-far .cta-secondary,
.cine-chapter.cine-far .hero-quick .hq,
.cine-chapter.cine-far .field input,
.cine-chapter.cine-far .field select,
.cine-chapter.cine-far .field textarea{
  backdrop-filter:none; -webkit-backdrop-filter:none; }
/* a dissolve that has finished stops being a live filter layer */
.reveal.cine-done{ filter:none !important; will-change:auto; }
html.anim .cine-chapter.cine-far .reveal:not(.in){ filter:none; }

/* ---------- 10. LAST RUNG: live blur given up to save the frame rate ----------
   Only ever reached after the governor has already cut frames and
   resolution and the device is still behind. The mist keeps its place
   and thickens a touch so the type reads exactly as well. */
html.perf-lite .glass::before,
html.perf-lite .surface,html.perf-lite .callback,html.perf-lite .calc-sum,html.perf-lite .c-item,
html.perf-lite .cp,html.perf-lite .btn-soft,html.perf-lite .dock-item,html.perf-lite .finish-btn,
html.perf-lite .casket-hint,html.perf-lite .cta-secondary,html.perf-lite .hero-quick .hq,
html.perf-lite .field input,html.perf-lite .field select,html.perf-lite .field textarea,
html.perf-lite .nav::before,html.perf-lite .modal-card,html.perf-lite .modal-backdrop,
html.perf-lite .mobile-menu,html.perf-lite .d-close::before,html.perf-lite .top::before{
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
html.perf-lite{ --cine-core:0.95; }

/* ============================================================ MOBILE, FULL FAT
   The phone build used to be stripped for frame rate: no grain, no glass,
   no shadows, no light. That protection is obsolete — live blur is now
   gated to what is on screen and the governor watches real frame times,
   so the phone gets the whole picture back. Cheap things stay cheap;
   anything expensive is still on the ladder. */
@media(max-width:767px){
  .grain-overlay{ display:block !important; opacity:0.045; }
  .nav.solid{ background:transparent !important; }
  .badge-soft,.calc-toast,.it-card,.casket-hint,.btn-ghost{
    backdrop-filter:blur(12px) saturate(1.03) !important; -webkit-backdrop-filter:blur(12px) saturate(1.03) !important; }
  .hero-quick .hq,.cta-secondary{
    backdrop-filter:blur(14px) saturate(1.04) !important; -webkit-backdrop-filter:blur(14px) saturate(1.04) !important; }
  .mobile-menu{ background:rgba(244,241,234,0.93) !important;
    backdrop-filter:blur(26px) saturate(1.05) !important; -webkit-backdrop-filter:blur(26px) saturate(1.05) !important; }
  .modal-backdrop{ backdrop-filter:blur(12px) !important; -webkit-backdrop-filter:blur(12px) !important; }
  /* depth comes back — soft, single-direction, no stacked shadows */
  .surface,.s-card,.callback,.c-item,.dock-item,.t-card,.lead-quote,.cg-item,.grave-item{
    box-shadow:0 26px 56px -46px rgba(27,29,31,0.55) !important; }
  .finish-btn{ box-shadow:0 18px 40px -36px rgba(27,29,31,0.5) !important; }
  /* dissolves get their compositor layer back, then release it */
  html.anim .reveal:not(.in){ will-change:opacity,transform; }
  #fxCanvas{ display:block !important; opacity:.5; }
  .surface,.callback,.calc-sum,.c-item,.cp,.btn-soft,.field input,.field select,.field textarea,
  .dock-item,.finish-btn{ backdrop-filter:blur(12px) saturate(1.03); -webkit-backdrop-filter:blur(12px) saturate(1.03);
    background:rgba(var(--cine-fill),0.76) !important; }
}

/* ============================================================ LANGUAGE SWITCH
   Two flags, both always visible: the one you are reading is in full
   colour with a bronze underline, the other waits quietly beside it.
   Sits in the nav bar at every width, and again inside the mobile menu. */
.lang-switch{ display:flex; align-items:center; gap:8px; margin-left:14px; }
.lang-a{ display:flex; align-items:center; justify-content:center;
  width:38px; height:44px; padding:0; border:0; background:none; position:relative;
  transition:opacity .35s ease, filter .35s ease, transform .35s ease; }
.lang-a svg{ width:26px; height:17.3px; display:block; border-radius:2px;
  box-shadow:0 0 0 1px rgba(27,29,31,0.14), 0 6px 14px -10px rgba(27,29,31,0.6); }
.lang-a:not(.is-on){ opacity:.42; filter:saturate(.35); }
.lang-a:not(.is-on):hover{ opacity:1; filter:saturate(1); transform:translateY(-1px); }
.lang-a.is-on::after{ content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:7px; width:26px; height:1.5px; background:var(--gold,#A3834F); border-radius:2px; }
.lang-a:focus-visible{ outline:2px solid var(--gold,#A3834F); outline-offset:3px; border-radius:4px; }
.mm-lang{ margin:8px 0 0; gap:18px; }
.mm-lang .lang-a{ width:52px; height:48px; }
.mm-lang .lang-a svg{ width:36px; height:24px; }
.mm-lang .lang-a.is-on::after{ width:36px; bottom:4px; }
@media(max-width:879px){ .lang-switch{ margin-left:auto; margin-right:2px; } }

/* ---------- 11. no motion: everything present, nothing moves ---------- */
@media(prefers-reduced-motion:reduce){
  .cine-atmo::before,.cine-atmo::after{ animation:none; opacity:.34; }
  .cine-sky{ animation:none; }
  .cine-r{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .reveal{ transition:none !important; filter:none !important; }
  html.anim .reveal,html.anim .reveal > [data-cine]{ opacity:1 !important; transform:none !important; filter:none !important; }
  .cine-veil{ display:none; }
  #divine-bg{ transform:none; }
}